/* ============================================================================
   PENSION LA PERLA · Collado Villalba
   El color sale de SU foto del anochecer (refs/maps/m01.jpg): el cielo de
   septiembre a esa hora mide #367bbe y la luz que sale del portal y del
   escaparate mide #b1712a. Toda la pagina esta banada en ese azul y la unica
   cosa calida que hay es esa luz. El coral sale de las colchas de sus
   habitaciones y el barro de la cazuela de su cocido.
   ========================================================================= */

@font-face{font-family:'Vollkorn';src:url('fonts/vollkorn.woff2') format('woff2');
  font-weight:400 900;font-display:swap}
@font-face{font-family:'Spartan';src:url('fonts/leaguespartan.woff2') format('woff2');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Mono';src:url('fonts/splinemono.woff2') format('woff2');
  font-weight:300 700;font-display:swap}

:root{
  --noche:    #0e2340;
  --noche-2:  #16335a;
  --noche-3:  #1e4675;
  --cobalto:  #3179bd;
  --ambar:    #f0a63a;
  --ambar-2:  #ffc879;
  --cal:      #f3efe7;
  --cal-2:    #e5dfd2;
  --coral:    #c9573c;
  --barro:    #7a4a2c;
  --tinta:    #101c2c;

  --ancho: min(2000px, 92vw);   /* a 2400 px, que es su pantalla, 1680 dejaba
                                   360 px de margen muerto a cada lado */
  --r: 3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--noche); color:var(--cal);
  font-family:'Spartan',system-ui,sans-serif; font-weight:380;
  font-size:1.0625rem; line-height:1.62; letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3{margin:0; font-family:'Vollkorn',Georgia,serif; font-weight:600;
  letter-spacing:-0.01em; line-height:1.08}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--ambar); outline-offset:3px; border-radius:2px}

.contenedor{width:var(--ancho); margin-inline:auto}

/* Una caja de rejilla mide POR DENTRO por defecto (min-width:auto): basta una
   tira de 60 dias con width:max-content para que la columna crezca a 4.000 px
   y la pagina entera se mueva de lado en el movil. Se corta aqui, de raiz. */
.cuenta__cuerpo>*, .sierra__cuerpo>*, .carta>*, .cuartos__cab>*, .cocina__cab>*,
.horno>*, .pie__caja>*, .terraza>*, .llegar__rejilla>*, .regla>*,
.comodidades>*, .galeria>*, .platos>*, .tipos>*, .paso, .dias, .tique{min-width:0}
.rotulo{font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.24em; font-size:.72rem; line-height:1.5}
.mono{font-family:'Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

.sube{opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .82s cubic-bezier(.16,.72,.24,1), transform .82s cubic-bezier(.16,.72,.24,1);
  transition-delay:var(--d,0ms)}
.sube.dentro{opacity:1; transform:none}
html:not(.js) .sube{opacity:1; transform:none}

/* ============================ BARRA =================================== */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:1.4rem;
  padding:.7rem clamp(1rem,4vw,3rem);
  background:rgba(14,35,64,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(49,121,189,.3);
  transform:translate3d(0,-104%,0); transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.barra.vista{transform:none}
.barra__marca{display:flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:'Vollkorn'; font-size:1.28rem; font-weight:600; letter-spacing:-.01em}
.barra__marca svg{width:26px;height:26px;flex:none}
.barra__nav{display:flex; gap:.2rem; margin-left:auto; align-items:center}
.barra__nav a{
  text-decoration:none; padding:.6rem .8rem; border-radius:var(--r);
  font-family:'Spartan'; font-weight:600; text-transform:uppercase;
  letter-spacing:.13em; font-size:.7rem; color:#c9d8ea;
  transition:color .25s, background .25s}
.barra__nav a:hover{color:var(--noche); background:var(--ambar)}
.barra__tel{background:var(--ambar)!important; color:var(--noche)!important}

/* ── LAS DOS PATAS ──────────────────────────────────────────────────────
   La Perla son dos negocios en el mismo edificio: se duerme arriba y se come
   abajo. En la barra iban como dos enlaces mas entre otros dos, y no se
   entendia. Ahora van juntas, en su propia caja, con un filete de por medio:
   se lee de un vistazo que hay pension Y restaurante. */
.barra__patas{
  display:flex; align-items:stretch; gap:0;
  border:1px solid rgba(49,121,189,.45); border-radius:var(--r);
  overflow:hidden; margin-right:.5rem;
}
.barra__patas .pata{
  display:grid; gap:.1rem; padding:.42rem .95rem; text-decoration:none;
  transition:background .25s, color .25s;
}
.barra__patas .pata:hover{background:var(--ambar)}
.barra__patas .pata:hover .pata__q,
.barra__patas .pata:hover .pata__s{color:var(--noche)}
.pata__q{
  font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.11em; font-size:.72rem; color:#eaf1f8; line-height:1.2;
}
.pata__s{
  font-family:'Spartan'; font-size:max(12.5px,.56rem); letter-spacing:.13em;
  text-transform:uppercase; color:#8fa8c4; line-height:1.2;
}
.pata__sep{width:1px; background:rgba(49,121,189,.45); flex:none}

@media (max-width:860px){
  .barra__nav a:not(.barra__tel):not(.pata){display:none}
  /* en el movil se quedan las dos patas y el telefono: es lo que se usa */
  .barra__patas{margin-right:.35rem}
  .barra__patas .pata{padding:.4rem .7rem}
  .pata__s{display:none}
}
/* En un movil de 390 no caben «La Perla» + las dos pestañas + el telefono
   escrito: «RESTAURANTE» salia cortado a «RESTAURA…» y el numero se partia en
   dos lineas. Como lo que hay que ver son LAS DOS PESTAÑAS, se les deja el
   sitio: la marca se queda en su simbolo y el telefono en su icono. Los dos
   siguen siendo pulsables y con nombre accesible. */
@media (max-width:560px){
  .barra{gap:.6rem; padding-inline:.7rem}
  .barra__marca{font-size:0; gap:0}          /* solo el simbolo */
  .barra__marca svg{width:28px;height:28px}
  .barra__tel{
    font-size:0!important; padding:.55rem!important;
    display:grid; place-items:center; min-width:42px; min-height:42px;
  }
  .barra__tel::after{
    content:""; width:19px; height:19px; display:block;
    background:var(--noche);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.7a1.7 1.7 0 0 1 2.4.6l1.6 2.8c.4.7.2 1.5-.4 2l-1 .8c.4 1.4 1.3 2.9 2.4 4 1.1 1.1 2.6 2 4 2.4l.8-1c.5-.6 1.3-.8 2-.4l2.8 1.6c.8.4 1 1.5.6 2.2l-1 1.6c-.6 1-1.7 1.5-2.9 1.3C13.5 20.1 7.4 16 4.4 9.2c-.6-1.3-.3-2.8.7-3.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.7a1.7 1.7 0 0 1 2.4.6l1.6 2.8c.4.7.2 1.5-.4 2l-1 .8c.4 1.4 1.3 2.9 2.4 4 1.1 1.1 2.6 2 4 2.4l.8-1c.5-.6 1.3-.8 2-.4l2.8 1.6c.8.4 1 1.5.6 2.2l-1 1.6c-.6 1-1.7 1.5-2.9 1.3C13.5 20.1 7.4 16 4.4 9.2c-.6-1.3-.3-2.8.7-3.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .barra__patas{margin-left:auto; margin-right:0}
  .barra__patas .pata{padding:.48rem .8rem}
  .pata__q{font-size:max(12.5px,.68rem); letter-spacing:.05em; white-space:nowrap}
}

/* ============================ PORTADA ================================== */
.port{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:1fr minmax(320px,40vw);
  background:
    radial-gradient(120% 90% at 8% 88%, rgba(240,166,58,.15), transparent 62%),
    linear-gradient(175deg,#0b1c33 0%, var(--noche) 46%, #123055 100%);
  overflow:hidden;
}
.port__texto{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(6rem,11vh,9rem) clamp(1.4rem,5vw,5.5rem) clamp(3rem,7vh,5rem)
          clamp(1.4rem,6vw,7rem);
  position:relative; z-index:2;
}
.port__ceja{color:var(--ambar); margin-bottom:1.6rem}
.port__ceja b{color:var(--cal); font-weight:700}
.port h1{
  font-size:clamp(3rem,7.6vw,8.4rem); line-height:1.08; letter-spacing:-0.01em;
  font-weight:600; margin:0 0 1.5rem; max-width:14ch;
}
.port h1 em{font-style:italic; color:var(--ambar); font-weight:500}
.port__bajada{max-width:52ch; color:#c2d3e6; font-size:clamp(1rem,1.15vw,1.16rem)}
.port__bajada strong{color:var(--cal); font-weight:600}
.port__acciones{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:.6rem}

.port__foto{position:relative; overflow:hidden}
.port__foto img{
  position:absolute; inset:0; width:100%; height:112%;
  object-fit:cover; object-position:52% 42%;
  will-change:transform;
}
.port__foto::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, #0e2340 0%, rgba(14,35,64,.55) 9%, transparent 26%);
}

/* el CARTEL: el luminoso de su propia fachada, rehecho a mano */
.cartel{
  align-self:start; margin:2.4rem 0 2rem; padding:1.05rem 1.5rem 1.15rem;
  border:2px solid var(--ambar); border-radius:5px; max-width:24rem;
  background:linear-gradient(180deg, rgba(240,166,58,.14), rgba(240,166,58,.05));
  box-shadow:0 0 0 1px rgba(240,166,58,.2), 0 0 44px -6px rgba(240,166,58,.5),
             inset 0 0 26px -8px rgba(255,200,121,.55);
  color:var(--ambar-2);
}
.cartel b{
  display:block; font-family:'Spartan'; font-weight:800; font-size:clamp(1.5rem,2.5vw,2rem);
  letter-spacing:.06em; line-height:1; color:#fff;
  text-shadow:0 0 16px rgba(255,200,121,.85), 0 0 40px rgba(240,166,58,.5);
}
.cartel span{display:block; margin-top:.5rem; font-family:'Spartan'; font-weight:600;
  text-transform:uppercase; letter-spacing:.15em; font-size:.68rem; color:var(--ambar-2)}
.cartel i{display:block; margin-top:.55rem; font-style:normal;
  font-family:'Mono'; font-size:.86rem; letter-spacing:.02em; color:#fff}
.js .cartel{animation:enciende 1.5s .5s both}
@keyframes enciende{
  0%{opacity:.12; filter:brightness(.3)}
  22%{opacity:.9; filter:brightness(1.5)}  30%{opacity:.2; filter:brightness(.35)}
  44%{opacity:1;  filter:brightness(1.6)}  52%{opacity:.35;filter:brightness(.5)}
  70%,100%{opacity:1; filter:none}
}

.btn{
  --f:var(--ambar); --c:var(--noche);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.5rem; border:0; border-radius:var(--r); cursor:pointer;
  background:var(--f); color:var(--c); text-decoration:none;
  font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; font-size:.74rem; line-height:1;
  transition:filter .25s, box-shadow .25s;
  will-change:transform;
}
.btn:hover{filter:brightness(1.12); box-shadow:0 10px 34px -12px rgba(240,166,58,.9)}
.btn--linea{--f:transparent; --c:var(--cal); box-shadow:inset 0 0 0 1.5px rgba(197,215,235,.4)}
.btn--linea:hover{--c:var(--noche); --f:var(--cal); box-shadow:none}
.btn--wa{--f:#25d366; --c:#08240f}
.btn svg{width:17px;height:17px;flex:none;fill:currentColor}

/* ==================== LA TIRA DEL TOLDO ================================ */
.toldo{
  background:var(--ambar); color:#3a2408; overflow:hidden;
  border-block:1px solid rgba(14,35,64,.25);
  padding:.7rem 0; position:relative; z-index:3;
}
.toldo__pista{display:flex; width:max-content; will-change:transform}
.toldo__pista span{
  font-family:'Spartan'; font-weight:800; text-transform:uppercase;
  letter-spacing:.2em; font-size:clamp(.78rem,1.35vw,1rem);
  padding-inline:1.1rem; white-space:nowrap;
}
.toldo__pista span::after{content:'\2022'; margin-left:2.2rem; opacity:.5}

/* ==================== LA BRUJULA DE LA SIERRA ========================== */
.sierra{background:var(--cal); color:var(--tinta); padding:clamp(4.5rem,10vh,8rem) 0}
.sierra__cab{width:var(--ancho); margin-inline:auto; margin-bottom:clamp(2rem,5vh,3.4rem);
  display:grid; grid-template-columns:1fr minmax(280px,42ch); gap:clamp(1.5rem,4vw,4rem);
  align-items:end}
.sierra__cab>*{min-width:0}
.sierra .rotulo{color:var(--barro)}
.sierra h2{font-size:clamp(2.3rem,5vw,5rem); max-width:19ch; margin:.7rem 0 0}
.sierra h2 em{font-style:italic; color:var(--coral)}
.sierra__intro{color:#3f4d5e; margin:0; font-size:.98rem}

.ladera{margin:0 auto; width:var(--ancho); max-width:1180px}
/* overflow oculto: los rotulos del borde derecho se salian del lienzo y el
   auditor los contaba como desborde. Ahora el dibujo tiene su marco. */
.ladera__svg{width:100%; height:auto; display:block; overflow:hidden}

/* las cotas de altitud: la regla del dibujo, en segundo plano */
.lad__cotas line{stroke:#c9bda4; stroke-width:1; stroke-dasharray:2 9}
.lad__cotas text{font-family:'Mono'; font-size:15px; fill:#96876e; text-anchor:end}

.lad__lejos{fill:url(#gLejos)}
.lad__monte{fill:url(#gLadera)}
.lad__via{fill:none; stroke:var(--barro); stroke-width:2.4; stroke-dasharray:9 8;
  stroke-linecap:round; opacity:.75}
.js .lad__via{stroke-dasharray:1400; stroke-dashoffset:1400}
.js .ladera.dentro .lad__via{animation:trazo 2.2s cubic-bezier(.3,.7,.3,1) .25s forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .js .lad__via{stroke-dasharray:9 8; stroke-dashoffset:0; animation:none}
}

.lad__palo{stroke:#9f8f74; stroke-width:1.6; stroke-dasharray:3 5}
.lad__hito circle{fill:var(--tinta)}
.lad__nom{font-family:'Spartan'; font-weight:800; font-size:21px; fill:var(--tinta);
  text-anchor:middle}
.lad__dat{font-family:'Mono'; font-size:17px; fill:#7d6f59; text-anchor:middle}

/* La Perla, con su cartel: es el unico punto en azul noche y con rotulo */
.lad__perla circle{fill:var(--noche)}
.lad__perla .lad__palo{stroke:var(--ambar); stroke-dasharray:none; stroke-width:2}
.lad__cartel rect{fill:var(--noche)}
.lad__cartel-t{font-family:'Spartan'; font-weight:800; font-size:23px; fill:#fff;
  text-anchor:middle; letter-spacing:.12em}
.lad__cartel-s{font-family:'Mono'; font-size:15px; fill:var(--ambar); text-anchor:middle}

/* el desnivel medido: lo que cuenta el dibujo y no contaba la brujula */
.lad__medida line{stroke:var(--coral); stroke-width:2}
.lad__flecha{stroke-width:2.4}
.lad__medida-n{font-family:'Spartan'; font-weight:800; font-size:30px; fill:var(--coral)}
.lad__medida-s{font-family:'Mono'; font-size:16px; fill:#7d6f59}


/* EL DIBUJO EN EL MOVIL. Un texto de 21 unidades dentro de un lienzo de 1330
   se ve a 21 x 390/1330 = 6 px reales en un movil: ilegible. Y el auditor NO
   lo detecta, porque en SVG mide las unidades del lienzo y no lo que se ve.
   Asi que aqui se agranda lo que se queda y se quita lo que sobra: las cotas
   de altitud y los kilometros, que ya estan en la regla de abajo. */
.lad__solo-movil,.lad__solo-movil2{display:none}
@media (max-width:820px){
  .lad__cotas{display:none}
  .lad__dat{display:none}
  /* en el movil se cae lo que se sale del lienzo: el cartel negro y la medida
     del desnivel, que ya lo dice el titular. La Perla se rotula como los
     demas hitos, que es mas limpio a este tamano. */
  .lad__cartel,.lad__medida{display:none}
  .lad__solo-movil{display:block; font-size:46px}
  .lad__solo-movil2{display:none}
  .lad__nom{font-size:46px}
  .lad__cartel-t{font-size:44px}
  .lad__cartel-s{font-size:30px}
  .lad__medida-n{font-size:52px}
  .lad__medida-s{font-size:30px}
  .lad__hito circle{r:16}
  .lad__perla circle{r:18}
  .lad__palo{stroke-width:3}
}
.ladera__pie{margin:1.1rem auto 0; width:var(--ancho); max-width:1180px;
  font-size:.86rem; color:#5d6b7c}
.ladera__pie b{color:var(--tinta); font-weight:600}

/* ── LA REGLA DE KILOMETROS ────────────────────────────────────────────
   Dos piezas: arriba una regla A ESCALA REAL sobre 40 km (que es Madrid, el
   mas lejos) con los cinco puntos en su sitio; debajo el texto en columnas
   iguales. A escala se ve lo que en tarjetas sueltas no se veia: que los tres
   sitios de la sierra caben en 21 km y que Madrid esta al doble de todo. El
   texto NO va a escala porque se pisaria. */
.reglaCaja{margin:clamp(2.4rem,5vh,3.6rem) auto 0; width:var(--ancho); max-width:1180px}

.reglaLinea{position:relative; height:46px; margin-bottom:.4rem}
.reglaLinea__eje{position:absolute; left:0; right:0; top:26px; height:2px;
  background:linear-gradient(90deg,var(--barro),var(--barro) 52.5%,#c9bda4 52.5%)}
.reglaLinea__marca{position:absolute; top:26px; left:var(--x); transform:translateX(-50%)}
.reglaLinea__marca::before{content:""; position:absolute; left:50%; top:-5px; width:1px;
  height:11px; background:#b6a689}
.reglaLinea__marca i{position:absolute; left:50%; top:12px; transform:translateX(-50%);
  font-family:'Mono'; font-style:normal; font-size:max(12.5px,.72rem); color:#96876e;
  white-space:nowrap}
.rp{position:absolute; top:26px; left:var(--x); width:13px; height:13px; margin:-6px 0 0 -6px;
  border-radius:50%; background:var(--barro); box-shadow:0 0 0 4px var(--cal)}
.rp--casa{width:17px; height:17px; margin:-8px 0 0 -8px; background:var(--noche)}
.rp--lejos{background:var(--coral)}

.regla{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0 clamp(.8rem,1.6vw,1.6rem);
}
.regla__i{padding-right:.4rem}
.regla__km{
  display:block; font-family:'Mono'; font-weight:300;
  font-size:clamp(1.9rem,3.2vw,2.8rem); line-height:1; color:var(--tinta);
}
.regla__km i{font-style:normal; font-size:.32em; letter-spacing:.1em; margin-left:.15em;
  color:#7d6f59; text-transform:uppercase}
.regla__i:first-child .regla__km{color:var(--noche)}
.regla__i--lejos .regla__km{color:var(--coral)}
.regla__n{display:block; font-family:'Spartan'; font-weight:700; font-size:.95rem;
  margin:.5rem 0 .3rem; line-height:1.25}
.regla__p{display:block; font-size:.83rem; color:#5d6b7c; line-height:1.5}

@media (max-width:900px){
  /* en el movil la regla horizontal no cabe con texto: se vuelca en vertical y
     la escala se enseña con la altura de cada tramo, no con la anchura */
  .reglaLinea{display:none}
  .regla{grid-template-columns:minmax(0,1fr); gap:0}
  .regla__i{padding:1rem 0 1rem 1.6rem; border-left:2px solid var(--barro); position:relative}
  .regla__i::before{content:""; position:absolute; top:1.35rem; left:-7px; width:12px;
    height:12px; border-radius:50%; background:var(--barro)}
  .regla__i:first-child::before{background:var(--noche); width:15px; height:15px; left:-8px}
  .regla__i--lejos::before{background:var(--coral)}
  .regla__km{font-size:2.1rem}
}

}

/* ==================== LAS HABITACIONES ================================= */
.cuartos{padding:clamp(4.5rem,10vh,8rem) 0 0; background:var(--noche)}
.cuartos__cab{width:var(--ancho); margin-inline:auto;
  display:grid; grid-template-columns:1fr minmax(280px,34ch); gap:clamp(1.5rem,4vw,4rem);
  align-items:end; margin-bottom:clamp(2.2rem,5vh,3.4rem)}
.cuartos .rotulo{color:var(--ambar)}
.cuartos h2{font-size:clamp(2.3rem,5vw,5rem); max-width:16ch; margin:.7rem 0 0}
.cuartos h2 em{font-style:italic; color:var(--ambar)}
.cuartos__nota{color:#a8bdd4; font-size:.98rem; margin:0}

.galeria{width:var(--ancho); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.4rem)}
.gcuarto{position:relative; overflow:hidden; border-radius:var(--r); background:var(--noche-2);
  margin:0}
.gcuarto img{width:100%; aspect-ratio:3/4; object-fit:cover; height:auto;
  transition:transform 1.1s cubic-bezier(.16,.72,.24,1)}
.gcuarto:hover img{transform:scale(1.05)}
.gcuarto figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.6rem 1.2rem 1.1rem;
  background:linear-gradient(transparent, rgba(9,22,40,.92) 62%);
  display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem}
.gcuarto b{font-family:'Vollkorn'; font-size:1.35rem; font-weight:600; letter-spacing:-.01em}
.gcuarto i{font-style:normal; font-family:'Mono'; font-size:.94rem; color:var(--ambar);
  white-space:nowrap}

.comodidades{width:var(--ancho); margin:clamp(2.2rem,5vh,3.2rem) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--noche-3)}
.comod{background:var(--noche); padding:1.4rem 1.3rem; display:flex; gap:.95rem;
  align-items:flex-start}
.comod svg{width:26px;height:26px;flex:none;stroke:var(--ambar);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.comod b{display:block; font-family:'Spartan'; font-weight:700; font-size:.92rem;
  letter-spacing:.01em}
.comod span{font-size:.83rem; color:#94aac3; line-height:1.45}

.tira-frase{width:var(--ancho); margin:clamp(3rem,7vh,5rem) auto 0;
  padding-bottom:clamp(4rem,9vh,7rem);
  border-top:1px solid var(--noche-3); padding-top:clamp(2rem,4vh,3rem)}
.tira-frase p{font-family:'Vollkorn'; font-style:italic; font-weight:400;
  font-size:clamp(1.35rem,2.6vw,3rem); line-height:1.28; color:#dce8f5;
  max-width:38ch; margin:0}
.tira-frase cite{display:block; margin-top:1rem; font-style:normal;
  font-family:'Spartan'; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; font-size:.68rem; color:var(--ambar)}

/* ==================== LA CUENTA DE LA NOCHE (la pieza) ================= */
.cuenta{
  background:
    radial-gradient(90% 60% at 78% 12%, rgba(240,166,58,.12), transparent 60%),
    linear-gradient(180deg,#0a1a30, #12294a 55%, #0a1a30);
  padding:clamp(4.5rem,10vh,8rem) 0; border-top:1px solid var(--noche-3);
}
.cuenta__cab{width:var(--ancho); margin-inline:auto; margin-bottom:clamp(2.2rem,5vh,3.4rem);
  display:grid; grid-template-columns:1fr minmax(280px,40ch); gap:clamp(1.5rem,4vw,4rem);
  align-items:end}
.cuenta__cab>*{min-width:0}
.cuenta .rotulo{color:var(--ambar)}
.cuenta h2{font-size:clamp(2.3rem,5vw,5rem); max-width:15ch; margin:.7rem 0 0}
.cuenta h2 em{font-style:italic; color:var(--ambar)}
.cuenta__intro{color:#b6cade; margin:0; font-size:.98rem}

.cuenta__cuerpo{width:var(--ancho); margin-inline:auto;
  display:grid; grid-template-columns:1.55fr minmax(300px,.85fr);
  gap:clamp(1.6rem,3.5vw,3.2rem); align-items:start}

.paso{margin-bottom:clamp(1.6rem,3.5vh,2.4rem)}
.paso__t{display:flex; align-items:baseline; gap:.75rem; margin-bottom:.9rem;
  flex-wrap:wrap}
.paso__n{font-family:'Mono'; font-size:.78rem; color:var(--noche);
  background:var(--ambar); width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; flex:none; font-weight:600}
.paso__t b{font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.15em; font-size:.74rem; color:#cfe0f1}
.paso__t span{font-size:.8rem; color:#8fa7c1; margin-left:auto; text-align:right}

.dias{position:relative; overflow:hidden; border:1px solid var(--noche-3);
  border-radius:var(--r); background:rgba(6,16,30,.5)}
.dias::after{content:''; position:absolute; inset:0 0 0 auto; width:56px;
  pointer-events:none; background:linear-gradient(90deg,transparent,#0b1c33)}
.dias__pista{display:flex; gap:0; width:max-content; cursor:grab;
  padding:.55rem; will-change:transform; touch-action:pan-y}
.dias__pista.agarrando{cursor:grabbing}
.dia{
  flex:none; width:66px; padding:.7rem .3rem .8rem; border:0; background:transparent;
  color:#b8cade; font:inherit; cursor:pointer; border-radius:var(--r);
  text-align:center; transition:background .22s, color .22s;
  position:relative;
}
.dia:hover{background:rgba(49,121,189,.28)}
.dia__d{display:block; font-family:'Spartan'; font-weight:700; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.11em; color:#8fa7c1}
.dia__n{display:block; font-family:'Mono'; font-size:1.5rem; line-height:1.15;
  font-weight:300}
.dia__m{display:block; font-family:'Spartan'; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.13em; color:#8fa7c1}
.dia.finde .dia__d, .dia.finde .dia__m{color:var(--ambar)}
.dia.finde .dia__n{color:var(--ambar-2)}
.dia.extremo{background:var(--ambar); color:var(--noche)}
.dia.extremo .dia__d,.dia.extremo .dia__m,.dia.extremo .dia__n{color:var(--noche)}
.dia.medio{background:rgba(240,166,58,.2)}
.dia.con-cocido::after{content:''; position:absolute; left:50%; bottom:6px;
  width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--coral)}

.tipos{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem}
.tipo{
  border:1.5px solid var(--noche-3); border-radius:var(--r); overflow:hidden;
  background:rgba(6,16,30,.5); cursor:pointer; padding:0; text-align:left;
  font:inherit; color:inherit; transition:border-color .3s, background .3s;
}
.tipo:hover{border-color:var(--cobalto)}
.tipo[aria-pressed="true"]{border-color:var(--ambar); background:rgba(240,166,58,.11)}
.tipo img{width:100%; aspect-ratio:16/11; object-fit:cover; object-position:50% 74%;
  height:auto; opacity:.75; transition:opacity .3s}
.tipo[aria-pressed="true"] img,.tipo:hover img{opacity:1}
.tipo__pie{padding:.75rem .85rem .9rem}
.tipo__pie b{display:block; font-family:'Spartan'; font-weight:700; font-size:.86rem;
  letter-spacing:.02em}
.tipo__pie span{display:block; font-family:'Mono'; font-size:.78rem; color:#9db4cd;
  margin-top:.2rem}
.tipo[aria-pressed="true"] .tipo__pie span{color:var(--ambar)}

.tique{
  position:sticky; top:5.5rem;
  background:#fbf7ee; color:#20180f; padding:1.8rem 1.6rem 2.1rem;
  transform:rotate(-1.1deg);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.7), 0 3px 0 rgba(0,0,0,.12);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0/100% calc(100% - 9px) no-repeat,
    linear-gradient(-45deg, transparent 6px, #000 0) 0 100%/9px 9px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0/100% calc(100% - 9px) no-repeat,
    linear-gradient(-45deg, transparent 6px, #000 0) 0 100%/9px 9px repeat-x;
}
.tique__cab{text-align:center; padding-bottom:1rem; border-bottom:1.5px dashed #c4b8a4}
.tique__cab b{display:block; font-family:'Spartan'; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; font-size:.82rem}
.tique__cab span{display:block; font-family:'Mono'; font-size:.74rem; color:#6a5e50;
  margin-top:.35rem; letter-spacing:.02em}
.tique__lineas{margin:1rem 0 0; padding:0; list-style:none; font-family:'Mono';
  font-size:.86rem}
.tique__lineas li{display:flex; gap:.6rem; padding:.36rem 0; align-items:baseline;
  border-bottom:1px dotted #d8cdb9}
.tique__lineas li i{font-style:normal; color:#6a5e50; font-size:.76rem;
  margin-left:auto; margin-right:.5rem; text-transform:uppercase; letter-spacing:.06em}
.tique__lineas li b{font-weight:500; min-width:4.6em; text-align:right}
.tique__lineas li.cocido-av{display:block; color:#a8452c; font-size:.78rem;
  border-bottom:0; padding-top:.7rem; line-height:1.45}
.tique__vacio{font-family:'Mono'; font-size:.85rem; color:#6a5e50; text-align:center;
  padding:2.2rem .5rem; line-height:1.65}
.tique__total{display:flex; align-items:flex-end; justify-content:space-between;
  gap:.8rem; margin-top:1.1rem; padding-top:.9rem; border-top:2px solid #20180f}
.tique__total span{font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.15em; font-size:.7rem; padding-bottom:.35rem}
.tique__total b{font-family:'Mono'; font-weight:500; font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:.9; letter-spacing:-.03em}
.tique__detalle{font-family:'Mono'; font-size:.76rem; color:#6a5e50; margin:.55rem 0 0;
  text-align:right}
.tique .btn{width:100%; justify-content:center; margin-top:1.2rem}
.tique__legal{font-size:.74rem; color:#6a5e50; margin:.9rem 0 0; line-height:1.5;
  font-family:'Spartan'}

/* ==================== LA COCINA ======================================== */
.cocina{background:var(--cal); color:var(--tinta); padding:clamp(4.5rem,10vh,8rem) 0 0}
.cocina__cab{width:var(--ancho); margin-inline:auto;
  display:grid; grid-template-columns:1fr minmax(280px,36ch); gap:clamp(1.5rem,4vw,4rem);
  align-items:end; margin-bottom:clamp(2.2rem,5vh,3.4rem)}
.cocina .rotulo{color:var(--barro)}
.cocina h2{font-size:clamp(2.3rem,5vw,5rem); max-width:15ch; margin:.7rem 0 0}
.cocina h2 em{font-style:italic; color:var(--coral)}
.cocina__nota{margin:0; color:#4a586a; font-size:.98rem}

.platos{width:var(--ancho); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.4rem)}
.plato{position:relative; overflow:hidden; border-radius:var(--r); background:#ded7c8;
  margin:0}
.plato img{width:100%; aspect-ratio:4/3; object-fit:cover; height:auto;
  transition:transform 1.1s cubic-bezier(.16,.72,.24,1)}
.plato:hover img{transform:scale(1.045)}
.plato figcaption{position:absolute; inset:auto 0 0 0; padding:2.6rem 1.1rem 1rem;
  background:linear-gradient(transparent, rgba(20,14,8,.9) 65%); color:#fdf8ef}
.plato b{display:block; font-family:'Vollkorn'; font-size:1.3rem; font-weight:600}
.plato span{display:block; font-size:.82rem; color:#e6d5bc; margin-top:.15rem}

.carta{width:var(--ancho); margin:clamp(2.4rem,5vh,3.6rem) auto 0;
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start}
.carta h3{font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:.72rem; color:var(--barro); margin:0 0 1.1rem;
  padding-bottom:.7rem; border-bottom:1.5px solid #cfc3ae}
.carta ul{list-style:none; margin:0; padding:0}
.carta li{display:flex; align-items:baseline; gap:.5rem; padding:.62rem 0; flex-wrap:wrap}
.carta li .n{font-family:'Spartan'; font-weight:600; font-size:.97rem; flex:0 1 auto}
.carta li .p{flex:1 1 1.4rem; border-bottom:1.5px dotted #b3a48a; transform:translateY(-5px);
  min-width:1.2rem}
.carta li b{font-family:'Mono'; font-weight:500; font-size:1.02rem; white-space:nowrap;
  color:var(--barro)}
.carta li i{flex:1 0 100%; font-style:normal; font-size:.79rem; color:#5d6b7c;
  margin-top:.15rem; letter-spacing:.01em}
.carta__pie{margin:1.2rem 0 0; font-size:.84rem; color:#5d6b7c}

.cocido{background:var(--noche); color:var(--cal); padding:1.8rem 1.7rem 1.9rem;
  border-radius:var(--r); position:relative; overflow:hidden}
.cocido::before{content:''; position:absolute; inset:auto -30% -60% auto;
  width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(201,87,60,.35), transparent 70%)}
.cocido h3{color:var(--ambar); border-bottom-color:var(--noche-3); position:relative}
.cocido__prox{font-family:'Vollkorn',serif; font-style:italic; font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.16; letter-spacing:-.015em;
  margin:.2rem 0 .5rem; color:var(--ambar-2); position:relative}
.cocido__prox b{font-family:'Mono'; font-style:normal; font-weight:400; color:#fff}
.cocido__pie{font-size:.86rem; color:#a8bdd4; margin:0 0 1.3rem; position:relative}
.cocido__meses{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--noche-3); position:relative}
.cocido__mes{background:var(--noche); padding:.7rem .3rem .75rem; text-align:center}
.cocido__mes span{display:block; font-family:'Spartan'; font-weight:700; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.1em; color:#8fa7c1}
.cocido__mes b{display:block; font-family:'Mono'; font-weight:400; font-size:1.15rem;
  margin-top:.15rem}
.cocido__mes.ya{background:var(--coral)}
.cocido__mes.ya span{color:#f8ded6}
.cocido__mes.ya b{color:#fff; font-weight:500}
.cocido .btn{margin-top:1.3rem; position:relative; width:100%; justify-content:center}

.horno{width:var(--ancho); margin:clamp(3rem,6vh,4.5rem) auto 0;
  padding-bottom:clamp(4rem,9vh,7rem);
  display:grid; grid-template-columns:1fr minmax(280px,42ch); gap:clamp(1.5rem,4vw,4rem);
  align-items:center; border-top:1px solid #cfc3ae; padding-top:clamp(2rem,4vh,3rem)}
.horno p{font-family:'Vollkorn'; font-size:clamp(1.4rem,2.9vw,3.2rem); line-height:1.2;
  margin:0; max-width:20ch; letter-spacing:-.015em}
.horno p em{font-style:italic; color:var(--coral)}
.horno__lado p{font-family:'Spartan'; font-size:.95rem; color:#4a586a; line-height:1.6;
  max-width:none}

/* ==================== LA TERRAZA / APEROS ============================== */
.terraza{background:var(--noche); display:grid;
  grid-template-columns:minmax(300px,.9fr) 1fr; align-items:stretch}
.terraza__foto{position:relative; overflow:hidden; min-height:clamp(340px,52vh,620px)}
.terraza__foto img{position:absolute; inset:0; width:100%; height:116%;
  object-fit:cover; will-change:transform}
.terraza__texto{padding:clamp(3rem,8vh,6rem) clamp(1.4rem,5vw,5rem);
  display:flex; flex-direction:column; justify-content:center}
.terraza .rotulo{color:var(--ambar)}
.terraza h2{font-size:clamp(2rem,4.2vw,4rem); max-width:15ch; margin:.7rem 0 1.1rem}
.terraza h2 em{font-style:italic; color:var(--ambar)}
.terraza p{color:#b6cade; max-width:44ch}
.terraza__datos{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem}
.pastilla{border:1px solid var(--noche-3); border-radius:99px; padding:.5rem 1rem;
  font-family:'Spartan'; font-weight:600; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.11em; color:#cfe0f1}

/* ==================== LA VOZ =========================================== */
.voz{position:relative; padding:clamp(5rem,12vh,9rem) 0; overflow:hidden;
  background:var(--noche-2)}
.voz__fondo{position:absolute; inset:-8% 0; z-index:0}
.voz__fondo img{width:100%; height:100%; object-fit:cover; opacity:.15;
  filter:grayscale(.4); will-change:transform}
.voz__caja{position:relative; z-index:1; width:var(--ancho); margin-inline:auto}
.voz .rotulo{color:var(--ambar); margin-bottom:1.6rem}
.voz__citas{position:relative; min-height:clamp(11rem,22vh,15rem)}
.cita{position:absolute; inset:0; opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .7s, transform .7s; pointer-events:none}
.cita.on{opacity:1; transform:none; pointer-events:auto}
.cita blockquote{margin:0; font-family:'Vollkorn'; font-weight:400; font-style:italic;
  font-size:clamp(1.35rem,3.2vw,3.5rem); line-height:1.22; letter-spacing:-.015em;
  max-width:24ch}
.cita cite{display:block; margin-top:1.3rem; font-style:normal; font-family:'Spartan';
  font-weight:600; text-transform:uppercase; letter-spacing:.19em; font-size:.68rem;
  color:var(--ambar)}
.voz__mandos{display:flex; gap:.5rem; margin-top:1.4rem}
.voz__mandos button{width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid var(--noche-3); background:transparent; display:grid; place-items:center;
  transition:background .25s, border-color .25s}
.voz__mandos button:hover{background:var(--ambar); border-color:var(--ambar)}
.voz__mandos svg{width:15px;height:15px;stroke:var(--cal);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.voz__mandos button:hover svg{stroke:var(--noche)}
.voz__nota{margin:1.6rem 0 0; font-size:.82rem; color:#a0b6cd}

/* ==================== LLEGAR + PIE ===================================== */
.llegar{background:var(--cal); color:var(--tinta); padding:clamp(4.5rem,10vh,8rem) 0 0}
.llegar__cab{width:var(--ancho); margin-inline:auto; margin-bottom:clamp(2rem,4.5vh,3rem)}
.llegar .rotulo{color:var(--barro)}
.llegar h2{font-size:clamp(2.3rem,5vw,5rem); max-width:14ch; margin:.7rem 0 0}
.llegar h2 em{font-style:italic; color:var(--coral)}
.llegar__rejilla{width:var(--ancho); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#cfc3ae;
  border:1px solid #cfc3ae}
.ficha{background:var(--cal); padding:1.7rem 1.5rem 1.8rem}
.ficha h3{font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.19em; font-size:.68rem; color:var(--barro); margin:0 0 .9rem}
.ficha p{margin:0 0 .55rem; font-size:.95rem; line-height:1.55}
.ficha a{color:var(--tinta); text-decoration-color:#b9ab92; text-underline-offset:3px;
  display:inline-block; padding:.3rem 0; line-height:1.4}
.ficha a:hover{color:var(--coral)}
.ficha__tel{font-family:'Mono'; font-size:1.1rem; letter-spacing:.01em; display:block;
  text-decoration:none; padding:.3rem 0}
.ficha__tel span{font-family:'Spartan'; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.15em; color:#6d7b8c; margin-left:.5rem}
.ficha .btn{margin-top:.9rem}
.aviso{grid-column:1/-1; background:#faf6ee; padding:1.4rem 1.5rem; font-size:.9rem;
  color:#4a586a; line-height:1.6}
.aviso b{color:var(--barro)}
.aviso p{margin:0}

.pie{background:var(--noche); color:#a0b6cd; padding:clamp(3rem,6vh,4.5rem) 0 2.5rem;
  margin-top:clamp(4rem,9vh,7rem)}
.pie__caja{width:var(--ancho); margin-inline:auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(1.5rem,4vw,3rem)}
.pie__marca{display:flex; align-items:center; gap:.7rem; font-family:'Vollkorn';
  font-size:1.5rem; color:var(--cal); font-weight:600; margin-bottom:.8rem}
.pie__marca svg{width:30px;height:30px}
.pie p{font-size:.88rem; margin:0 0 .5rem; max-width:36ch}
.pie h4{font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.19em; font-size:.66rem; color:var(--ambar); margin:0 0 .9rem}
.pie ul{list-style:none; margin:0; padding:0}
.pie li{margin-bottom:.15rem}
.pie a{color:#bdcfe3; text-decoration:none; font-size:.88rem;
  display:inline-block; padding:.32rem 0; line-height:1.4}
.pie a:hover{color:var(--ambar); text-decoration:underline; text-underline-offset:3px}
.pie__fin{width:var(--ancho); margin:clamp(2.2rem,5vh,3.2rem) auto 0;
  padding-top:1.4rem; border-top:1px solid var(--noche-3);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; font-size:.8rem; color:#8ea5bd}

/* ==================== PAGINAS LEGALES ================================== */
.legal{background:var(--cal); color:var(--tinta); min-height:70vh;
  padding:clamp(6rem,14vh,10rem) 0 clamp(3rem,7vh,5rem)}
.legal__caja{width:min(70ch,90vw); margin-inline:auto}
.legal h1{font-size:clamp(2.4rem,5.5vw,4.4rem); margin:0 0 1.6rem; letter-spacing:-0.01em}
.legal h2{font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.19em; font-size:.72rem; color:var(--barro);
  margin:2.4rem 0 .8rem; border-bottom:1.5px solid #cfc3ae; padding-bottom:.6rem}
.legal p{font-size:.98rem; line-height:1.7; color:#33404f}
.legal a{color:var(--coral)}
.legal .volver{display:inline-flex; margin-bottom:2rem; text-decoration:none;
  font-family:'Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:.7rem; color:var(--barro)}
.legal .volver:hover{color:var(--coral)}

/* ==================== MOVIL ============================================ */
@media (max-width:1080px){
  .cuenta__cuerpo{grid-template-columns:1fr}
  .tique{position:static; transform:none; max-width:34rem; margin-inline:auto}
  .ladera{width:100%}
  .carta{grid-template-columns:1fr}
  .terraza{grid-template-columns:1fr}
  .terraza__foto{min-height:56vw}
}
@media (max-width:900px){
  .cuenta__cab,.sierra__cab{grid-template-columns:1fr; align-items:start}
  .port{grid-template-columns:1fr; min-height:auto}
  .port__foto{order:-1; height:58svh; min-height:320px}
  .port__foto::before{background:linear-gradient(0deg,#0e2340 0%,rgba(14,35,64,.5) 12%,transparent 40%)}
  .port__texto{padding-top:2.6rem}
  .cuartos__cab,.cocina__cab,.horno{grid-template-columns:1fr; align-items:start}
  .pie__caja{grid-template-columns:1fr 1fr}
  .pie__marca{grid-column:1/-1}
}
@media (max-width:900px){
}
@media (max-width:720px){
  body{font-size:1rem}
  .galeria{grid-template-columns:1fr 1fr}
  .galeria .gcuarto:last-child{grid-column:1/-1}
  .galeria .gcuarto:last-child img{aspect-ratio:16/10}
  .comodidades{grid-template-columns:repeat(2,1fr)}
  .platos{grid-template-columns:1fr 1fr}
  .platos .plato:last-child{grid-column:1/-1}
  .platos .plato:last-child img{aspect-ratio:16/9}
  .llegar__rejilla{grid-template-columns:1fr}
  .tipos{grid-template-columns:1fr}
  .tipo{display:grid; grid-template-columns:110px 1fr; align-items:center}
  .tipo img{aspect-ratio:1/1}
}
/* En el movil ningun texto baja de 12 px: a 11 se lee mal y se toca peor. */
@media (max-width:820px){
  .rotulo,.barra__nav a,.btn,.pastilla,.tique__legal,.paso__t b,.cartel span,
  .tique__total span{font-size:.79rem}
  .cita cite,.tira-frase cite,.ficha__tel span,.cocido__mes span,
  .dia__d,.dia__m,.tipo__pie span,.regla__km i{font-size:.77rem}
  .ficha h3,.pie h4,.carta h3,.cocido h3{font-size:.76rem}
  .tique__cab span{font-size:.79rem}
  .dia{width:74px}
}
@media (max-width:520px){
  .pie__caja{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr}
  .galeria .gcuarto:last-child img{aspect-ratio:3/4}
  .platos{grid-template-columns:1fr}
  .platos .plato:last-child img{aspect-ratio:4/3}
  .comodidades{grid-template-columns:1fr}
  .port__acciones .btn{flex:1 1 100%; justify-content:center}
  .cocido__meses{grid-template-columns:repeat(2,1fr)}
}

/* ==================== SIN MOVIMIENTO =================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .sube{opacity:1!important; transform:none!important}
  .js .cartel{animation:none}
}