/* ============================================================
   Hotel Cacique Adiact — sistema de diseño "colonial solar"
   León, Nicaragua · v2 · agosto 2026
   Paleta, tipografía y forma según el brief de rediseño.
   ============================================================ */

:root{
  --basalto:#1B1A18;
  --cal:#F6F1E7;
  --arena:#EAE0D0;
  --teja:#B8502D;
  --teja-oscura:#A6421F;
  --indigo:#1F3D57;
  --indigo-claro:#C9D3DC;
  --verde:#43532F;
  --verde-claro:#8FA36C;
  --oro:#D79A2B;

  --texto:#1B1A18;
  --texto-2:#3D3A34;
  --texto-3:#5C574E;
  --texto-inv:#F6F1E7;
  --texto-inv-2:#A9A296;

  --borde:#8C857A;        /* bordes de componente — 3.36:1 sobre Cal */
  --borde-deco:#EAE0D0;   /* bordes decorativos */
  --borde-osc:#6B655C;

  --display:'Fraunces',Georgia,serif;
  --texto-f:'Inter',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --max:1280px;
  --gutter:24px;
  --bloque:160px;
  --curva:cubic-bezier(.16,1,.3,1);
  --d-presion:140ms;
  --d-breve:180ms;
  --d-interfaz:200ms;
  --d-panel:260ms;
}

@media (max-width:900px){ :root{ --bloque:96px; --gutter:20px; } }

*,*::before,*::after{box-sizing:border-box}

/* Regla defensiva: cualquier display de autor (flex, grid…) pisa la regla del
   navegador para [hidden] y deja visible algo que debía estar oculto. Pasó con
   el visor de fotos y con la fila de descuento. Aquí se zanja de una vez. */
[hidden]{display:none !important}

html{
  scroll-behavior:smooth;
  scroll-padding-top:145px
}

body{
  margin:0;
  /* clip, no hidden: recorta el sobrante de subpíxel sin romper position:sticky */
  overflow-x:clip;
  background:var(--cal);
  color:var(--texto);
  font-family:var(--texto-f);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

img{max-width:100%;display:block;height:auto}

a{color:var(--indigo);text-decoration:none}
a:hover{color:var(--teja-oscura)}

:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.basalto :focus-visible,.pie :focus-visible{outline-color:var(--oro)}

::selection{background:var(--oro);color:var(--basalto)}

/* ---------- tipografía ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:'SOFT' 80,'WONK' 1;
  font-weight:400;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:pretty;
}
h1{font-size:clamp(2.75rem,6vw,5.25rem);line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08}
h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2}
h4{font-size:1.125rem;line-height:1.3}
.h-med{font-size:clamp(1.75rem,3vw,2.5rem)}
.h-peq{font-size:clamp(1.25rem,2vw,1.5rem)}

p{margin:0 0 1em;max-width:68ch}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--texto-f);
  font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-3);margin:0 0 20px;
}
.eyebrow--oro{color:var(--oro)}
.eyebrow--teja{color:var(--teja-oscura)}

.entrada{font-size:1.25rem;line-height:1.5;color:var(--texto-2);max-width:60ch}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.cifra{font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1;font-size:clamp(3.5rem,9vw,8rem);line-height:.9;letter-spacing:-.03em;color:var(--oro)}
.nota{font-size:13.5px;color:var(--texto-3);line-height:1.55;max-width:60ch}
.lectura{max-width:68ch}
.destacado{border-left:3px solid var(--verde);padding-left:18px;font-size:15.5px;color:var(--texto-2);margin:24px 0;max-width:64ch}
.destacado--teja{border-left-color:var(--teja)}
.pendiente{color:var(--texto-3);font-style:italic}

/* ---------- layout ---------- */

.env{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.env--lectura{max-width:820px}
.bloque{padding:var(--bloque) 0}
.bloque--fino{padding:calc(var(--bloque)*.55) 0}
.arena{background:var(--arena)}
.basalto{background:var(--basalto);color:var(--texto-inv)}
.basalto h1,.basalto h2,.basalto h3,.basalto h4{color:var(--texto-inv)}
.basalto p{color:var(--texto-inv-2)}
.basalto .eyebrow{color:var(--oro)}
.basalto a{color:var(--texto-inv)}
.basalto a:hover{color:var(--oro)}
.indigo{background:var(--indigo);color:var(--texto-inv)}
.indigo h2,.indigo h3{color:var(--texto-inv)}
.indigo p{color:var(--indigo-claro)}
.baldosa{
  background-image:
    repeating-linear-gradient(45deg,rgba(246,241,231,.06) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(-45deg,rgba(246,241,231,.06) 0 1px,transparent 1px 30px);
}

.rejilla{display:grid;gap:2px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .r3,.r4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .r2,.r3,.r4{grid-template-columns:minmax(0,1fr)} }

.dos-col{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.dos-col--par{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:center}
.dos-col--ancho{grid-template-columns:1fr 400px;gap:64px}
.editorial{display:grid;grid-template-columns:1fr 472px;gap:96px;align-items:center}
.guia{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}
@media (max-width:1000px){
  .dos-col,.dos-col--par,.dos-col--ancho,.editorial,.guia{grid-template-columns:minmax(0,1fr);gap:36px}
  .guia{gap:24px}
}

.cabecera-bloque{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:48px;flex-wrap:wrap}
.cabecera-bloque p{margin:0}

/* separador: curva de hamaca · se dibuja sola al entrar en pantalla */
.hamaca{display:block;width:100%;height:28px;overflow:visible;margin:0 auto}
.hamaca path{fill:none;stroke:var(--borde-deco);stroke-width:1}
.js .hamaca path{stroke-dasharray:1300;stroke-dashoffset:1300;transition:stroke-dashoffset 1600ms var(--curva)}
.js .hamaca.visible path{stroke-dashoffset:0}

/* el subrayado de sección crece cuando la sección aparece */
.h2--linea{position:relative;padding-bottom:20px}
.h2--linea::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:72px;background:var(--teja);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--curva) 240ms}
.h2--linea.visible::after{transform:scaleX(1)}

/* el sol del bloque eco gira una vuelta cada minuto y medio */
@keyframes girasol{to{transform:rotate(360deg)}}
.js .sol{animation:girasol 90s linear infinite}

/* silueta de Los Maribios */
.volcanes-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-top:40px;
}
.volcanes-wrap::-webkit-scrollbar{display:none}
.volcanes-svg{display:block;width:100%;height:135px}
.volcanes-pista{display:none}
@media (max-width:768px){
  .volcanes-wrap{
    margin-top:28px;
    padding-right:24px;
    mask-image:linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image:linear-gradient(to right, black 80%, transparent 100%);
  }
  .volcanes-svg{width:820px;min-width:820px;height:135px}
  .volcanes-svg path{stroke-width:1.5;vector-effect:non-scaling-stroke}
  .volcanes-pista{display:inline;color:var(--teja-oscura)}
}

/* ---------- encabezado ---------- */

.cab{position:sticky;top:0;z-index:60;background:rgba(246,241,231,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--borde-deco)}
.cab__fila{display:flex;align-items:center;gap:28px;height:84px;transition:height 320ms var(--curva)} 
.cab.is-fija .cab__fila{height:62px}
.marca{display:flex;align-items:center;gap:14px;font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1;font-size:22px;color:var(--texto);letter-spacing:-.02em;line-height:1.05;flex-shrink:0}

.marca__logo{
    height:80px;
    width:auto;
    flex-shrink:0;
    object-fit:contain;
    transition:height 320ms var(--curva);
}
.marca small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.nav{display:flex;gap:24px;margin-left:auto;font-size:15px}
.nav a{color:var(--texto-2);padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--indigo);border-bottom-color:var(--teja)}
.nav a[aria-current="page"]{color:var(--teja-oscura);border-bottom-color:var(--teja)}
.idiomas{font-size:13px;color:var(--texto-3);display:flex;gap:6px;align-items:center;margin:0}
.idiomas [aria-current]{color:var(--texto);font-weight:500}
.cab .btn{flex-shrink:0}

.cab.is-fija .marca__logo{
    height:56px;
}

@media (max-width:1180px){ .nav,.idiomas{display:none} }
/* En pantallas muy estrechas (320 px) la marca, el botón y la hamburguesa no
   caben en una fila. El botón sale del encabezado: la barra inferior fija ya
   lleva «Reservar» siempre a la vista. */
@media (max-width:768px){
  .cab__fila{gap:12px;height:70px}
  .marca{font-size:18px;gap:10px}
  .marca__logo{height:46px}
  .cab .btn--peq{display:none}
}

/* barra compacta de reserva, aparece al desplazar */
.cab__barra{max-height:0;overflow:hidden;transition:max-height 340ms var(--curva);border-top:0 solid var(--borde-deco)}
/*.cab.is-fija .cab__barra{max-height:82px;border-top-width:1px}*/
.cab.is-fija .cab__barra{
    max-height:70px;
    border-top-width:1px
}

.barra{
  display:flex;
  align-items:center;
  gap:0;
  /*padding:12px 0;*/
  padding:8px 0;
}

.barra__campo{padding:0 22px;border-right:1px solid var(--borde)}
.barra__campo:first-child{padding-left:0}
.barra__campo .meta{display:block;margin-bottom:2px}
.barra__campo strong{font-weight:500;font-size:15px}
.barra .btn{margin-left:auto}
@media (max-width:1180px){ .cab__barra{display:none} }

/* menú móvil */
.hamburguesa{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--borde);
  border-radius:999px;width:44px;height:44px;cursor:pointer;align-items:center;
  justify-content:center;flex-direction:column;gap:5px;
  transition:border-color var(--d-interfaz),background var(--d-interfaz),transform var(--d-presion);
}
.hamburguesa:active{transform:scale(.94)}
.hamburguesa span{display:block;width:18px;height:1px;background:var(--basalto);transition:transform 320ms var(--curva),opacity var(--d-interfaz)}
.hamburguesa[aria-expanded="true"]{background:var(--basalto);border-color:var(--basalto)}
.hamburguesa[aria-expanded="true"] span{background:var(--cal)}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1180px){ .hamburguesa{display:flex} }

/* el menú se despliega, no aparece de golpe */
.menu-movil{
  display:block;max-height:0;opacity:0;overflow:hidden;border-top:0 solid var(--borde-deco);
  background:var(--cal);padding:0;
  transition:max-height 400ms var(--curva),opacity var(--d-panel) var(--curva),padding 400ms var(--curva);
}
.menu-movil.is-abierto{max-height:78vh;opacity:1;overflow-y:auto;padding:8px 0 24px;border-top-width:1px}
.menu-movil ul{list-style:none;margin:0;padding:0}
.menu-movil li{
  border-bottom:1px solid var(--borde-deco);
  opacity:0;transform:translateY(-8px);
  transition:opacity 300ms var(--curva),transform 300ms var(--curva);
}
.menu-movil.is-abierto li{opacity:1;transform:none}
.menu-movil.is-abierto li:nth-child(1){transition-delay:40ms}
.menu-movil.is-abierto li:nth-child(2){transition-delay:80ms}
.menu-movil.is-abierto li:nth-child(3){transition-delay:120ms}
.menu-movil.is-abierto li:nth-child(4){transition-delay:160ms}
.menu-movil.is-abierto li:nth-child(5){transition-delay:200ms}
.menu-movil.is-abierto li:nth-child(6){transition-delay:240ms}
.menu-movil.is-abierto li:nth-child(7){transition-delay:280ms}
.menu-movil.is-abierto li:nth-child(8){transition-delay:320ms}
.menu-movil a{display:block;padding:14px 0;font-size:17px;color:var(--texto);transition:transform var(--d-interfaz) var(--curva),color var(--d-interfaz)}
.menu-movil a:active{transform:translateX(6px);color:var(--teja-oscura)}
.menu-movil .idiomas-movil{display:flex;gap:10px;padding-top:18px;font-size:14px}

/* respuesta al toque: en móvil no hay hover, así que todo lo pulsable se hunde */
a,button{-webkit-tap-highlight-color:rgba(184,80,45,.12)}
.tarjeta{transition:border-color var(--d-interfaz),transform 160ms var(--curva)}
.tarjeta:active{transform:scale(.99)}
/* Las siete tarjetas de unidad del paso 2 son etiquetas pulsables del tamaño
   de media pantalla y no respondían al dedo. Mismo par que .tarjeta: es el
   mismo gesto sobre el mismo tipo de caja. */
.opcion-unidad{transition:border-color var(--d-interfaz),background-color var(--d-interfaz),transform 160ms var(--curva)}
.opcion-unidad:active{transform:scale(.99)}
.opcion-unidad:has(input:checked){border-color:var(--teja);background-color:rgba(184,80,45,.04)}
.opcion-unidad[hidden]{display:none !important}
.enlace,.tarjeta__enlace{transition:color var(--d-breve),opacity 160ms}
.enlace:active,.tarjeta__enlace:active{opacity:.6}
.pildora{transition:background var(--d-interfaz),color var(--d-interfaz),border-color var(--d-interfaz),transform var(--d-presion)}
.pildora:active{transform:scale(.95)}
.nav a,.pie a,.subnav a{transition:color var(--d-breve),border-color var(--d-breve)}

/* al fijar un filtro, la píldora late una vez */
/* El filtro se pulsa decenas de veces por sesión: el cambio de color ya es
   la señal de estado. Un pulso ahí solo hace la interfaz más lenta. */

.credito{font-size:.85em;color:var(--texto-3)}
.credito a{color:var(--texto-3);text-decoration:underline;text-underline-offset:2px}
.credito a:hover{color:var(--teja-oscura)}

/* ---------- botones y píldoras ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--texto-f);font-size:14px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  padding:0 30px;height:52px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background var(--d-interfaz),color var(--d-interfaz),border-color var(--d-interfaz);
}
/* blanco sobre Teja da 4.87:1; Cal se quedaba en 4.42:1 y no pasa AA */
.btn--pri,.basalto .btn--pri,.indigo .btn--pri{background:var(--teja);color:#FFFFFF}
.btn--pri:hover,.basalto .btn--pri:hover,.indigo .btn--pri:hover{background:var(--teja-oscura);color:#FFFFFF}
.btn--sec{background:transparent;color:var(--texto);border-color:var(--borde)}
.btn--sec:hover{border-color:var(--basalto);color:var(--texto)}
/* .basalto a gana por especificidad: sin esto el botón queda Cal sobre Cal */
.btn--inv,.basalto .btn--inv,.indigo .btn--inv{background:var(--cal);color:var(--basalto)}
.btn--inv:hover,.basalto .btn--inv:hover,.indigo .btn--inv:hover{background:var(--arena);color:var(--basalto)}
.btn--peq{height:42px;padding:0 22px;font-size:12px}
.btn--ancho{width:100%}

.enlace{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--indigo);border-bottom:1px solid var(--teja);padding-bottom:4px;display:inline-block}
.enlace:hover{color:var(--teja-oscura)}
.basalto .enlace,.indigo .enlace{color:var(--cal);border-bottom-color:var(--oro)}
.basalto .enlace:hover,.indigo .enlace:hover{color:var(--oro)}

.pildora{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;padding:7px 16px;border-radius:999px;
  border:1px solid var(--borde);color:var(--texto-2);background:transparent;
  cursor:pointer;font-family:var(--texto-f);line-height:1.4;
  transition:background var(--d-interfaz),color var(--d-interfaz),border-color var(--d-interfaz);
}
.pildora:hover{border-color:var(--basalto)}
.pildora[aria-pressed="true"]{background:var(--basalto);color:var(--cal);border-color:var(--basalto)}
.pildora--et{cursor:default;border-color:var(--borde-deco);color:var(--texto-3)}
.pildora--et:hover{border-color:var(--borde-deco)}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px}

.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}

/* ---------- héroe y fotografía ---------- */

.heroe{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;background:var(--basalto);overflow:hidden}
.heroe--medio{min-height:min(60vh,520px)}
.heroe__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--py,0px),0) scale(var(--pe,1.06));
}

/* ---------- carrusel del héroe ----------
   Rota el fondo, nunca el contenido. El titular, la bajada y el buscador se
   quedan clavados: mover texto o un formulario bajo el dedo de alguien que está
   leyendo o escribiendo una fecha es lo que hace odiosos a los carruseles. */
.heroe__fotos{position:absolute;inset:0;transform:translate3d(0,var(--py,0px),0)}
.heroe__lamina{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1400ms cubic-bezier(.4,0,.2,1);
}
.heroe__lamina.is-activa{opacity:1}
.heroe__lamina img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 8000ms linear;
}
/* deriva lentísima mientras la lámina está a la vista: da vida sin llamar la atención */
.js .heroe__lamina.is-activa img{transform:scale(1.1)}

.heroe__mandos{
  position:absolute;right:var(--gutter);bottom:24px;z-index:3;
  display:flex;align-items:center;gap:16px;
}
.heroe__puntos{display:flex;gap:8px}
.heroe__punto{
  width:32px;height:3px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(246,241,231,.35);
  transition:background 300ms var(--curva),width 300ms var(--curva);
}
.heroe__punto.is-activa{background:var(--cal);width:44px}
.heroe__punto:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.heroe__pausa{
  width:34px;height:34px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(246,241,231,.45);background:rgba(27,26,24,.35);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--d-interfaz),border-color var(--d-interfaz),transform var(--d-presion);
}
.heroe__pausa:hover{background:rgba(27,26,24,.7);border-color:var(--cal)}
.heroe__pausa:active{transform:scale(.92)}
.heroe__pausa:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
/* dos barras = pausa; al pausar se vuelve un triángulo de reproducir */
.heroe__pausa span{
  width:9px;height:11px;
  border-left:3px solid var(--cal);border-right:3px solid var(--cal);
}
.heroe__pausa[aria-pressed="true"] span{
  width:0;height:0;margin-left:3px;
  border:0;border-left:9px solid var(--cal);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
@media (max-width:700px){
  /* En la pantalla estrecha los mandos ensuciaban la foto y se montaban sobre
     el CTA del buscador. Se retiran de la vista con el mismo recurso que .salto,
     no con display:none: el carrusel sigue avanzando solo y WCAG pide poder
     detenerlo, así que el botón sigue alcanzable con teclado o lector y reaparece
     en cuanto recibe el foco. */
  .heroe__mandos{left:-9999px;right:auto;top:auto;bottom:auto;gap:10px}
  .heroe__mandos:focus-within{left:auto;right:var(--gutter);top:calc(220px - 34px - 12px)}
  .heroe__punto{width:22px}
  .heroe__punto.is-activa{width:30px}
}
@media (prefers-reduced-motion:reduce){
  .heroe__lamina{transition:opacity 300ms linear}
  .js .heroe__lamina.is-activa img,.heroe__lamina img{transform:scale(1.04);transition:none}
}
/* la foto se asienta al cargar: entra un punto más cerca y se retira */
.js .heroe__foto{--pe:1.14;transition:transform 2200ms cubic-bezier(.16,1,.3,1)}
.js .heroe.is-listo .heroe__foto{--pe:1.06}
/* Terminado el asentamiento, se quita la transición: si no, cada fotograma de
   scroll del parallax retargetea 2,2 s y la imagen va arrastrada tras el dedo. */
.js .heroe.is-asentado .heroe__foto{transition:none}

/* el titular sube desde detrás de su propia línea, palabra por palabra */
.js .heroe h1 .palabra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.js .heroe h1 .palabra>span{
  display:inline-block;transform:translateY(115%);
  transition:transform 620ms cubic-bezier(.16,1,.3,1);
}
.js .heroe.is-listo h1 .palabra>span{transform:none}
.js .heroe .eyebrow,.js .heroe h1+p,.js .heroe .buscador,.js .heroe h1~.nota{
  opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--curva),transform 700ms var(--curva);
}
.js .heroe.is-listo .eyebrow{opacity:1;transform:none;transition-delay:80ms}
.js .heroe.is-listo h1+p{opacity:1;transform:none;transition-delay:620ms}
.js .heroe.is-listo .buscador{opacity:1;transform:none;transition-delay:760ms}
.js .heroe.is-listo h1~.nota{opacity:1;transform:none;transition-delay:900ms}
.heroe__capa{position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,26,24,.62) 0%,rgba(27,26,24,.28) 38%,rgba(27,26,24,.86) 100%)}
.heroe__cuerpo{position:relative;width:100%;padding:0 0 56px}
.heroe h1,.heroe h2{color:var(--cal)}
.heroe p{color:var(--arena)}
.heroe .eyebrow{color:var(--arena)}
@media (max-width:700px){
  .heroe{min-height:80vh;padding-top:80px}
  .heroe__cuerpo{padding-bottom:24px}
  .heroe h1{font-size:1.85rem;line-height:1.15;max-width:100% !important;margin:8px 0 16px}
  .heroe h1+p{display:none}
}

/* ---------- buscador de fechas ---------- */
.buscador{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--cal);border:1px solid var(--basalto);max-width:1060px;width:100%}
.buscador__campo{padding:8px 14px;border-right:1px solid var(--borde);display:flex;flex-direction:column;justify-content:center;min-width:0}
.buscador__campo label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);margin-bottom:2px}
.buscador__campo input,.buscador__campo select{border:0;background:transparent;font-family:var(--sans);font-size:14px;color:var(--texto);outline:none;width:100%;cursor:pointer}
.buscador__btn{height:auto;border-radius:0;white-space:nowrap;padding:12px 20px;font-weight:600;display:flex;align-items:center;justify-content:center}

@media (min-width:769px){
  .buscador__campo--fecha{flex:1 1 150px}
  .buscador__campo--adultos{flex:0 1 110px}
  .buscador__campo--ninos{flex:0 1 180px}
  .buscador__btn{flex:1 1 200px}
}

@media (max-width:768px){
  .buscador{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--basalto)}
  .buscador__campo{border-right:1px solid var(--borde);border-bottom:1px solid var(--borde);padding:8px 12px}
  .buscador__campo:nth-child(2n){border-right:none}
  .buscador__btn{grid-column:span 2;width:100%;padding:14px;text-align:center;border-top:none}
}

figure{margin:0}
figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3);padding-top:10px}
.foto{position:relative;overflow:hidden;background:var(--arena);width:100%}
.foto img{width:100%;height:100%;object-fit:cover}
.foto--alta{aspect-ratio:3/4}
.foto--cuadro{aspect-ratio:4/3}
.foto--ancha{aspect-ratio:16/9}
.foto--banda{aspect-ratio:3/1}
.arco{border-radius:280px 280px 0 0;overflow:hidden}
@media (max-width:700px){ .arco{border-radius:180px 180px 0 0} }

/* marcador honesto: foto por producir */
.marcador{
  background:var(--arena);display:flex;align-items:center;justify-content:center;
  position:relative;text-align:center;padding:20px;min-height:120px;
}
.marcador::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(27,26,24,.045) 14px 28px);pointer-events:none}
.marcador .meta{position:relative;z-index:1;max-width:26ch;line-height:1.5;color:var(--texto-2)}
.marcador--osc{background:#2A2723}
.marcador--osc::after{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(246,241,231,.06) 14px 28px)}
.marcador--osc .meta{color:var(--texto-inv-2)}

.galeria{display:grid;grid-template-columns:1.55fr 1fr 1fr;grid-auto-rows:260px;gap:2px}
.galeria>*:first-child{grid-row:span 2}
@media (max-width:900px){ .galeria{grid-template-columns:1fr 1fr;grid-auto-rows:180px} .galeria>*:first-child{grid-column:span 2;grid-row:span 1} }

/* En móvil la galería se recorre con el dedo en lugar de apilarse: una foto por
   pantalla, con anclaje y sin barra visible. El arrastre es el nativo del
   navegador, así que conserva la inercia del sistema. */
@media (max-width:700px){
  .galeria{
    display:flex;grid-auto-rows:auto;gap:0;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter);
  }
  .galeria::-webkit-scrollbar{display:none}
  .galeria>*{flex:0 0 86%;scroll-snap-align:center;margin-right:8px;aspect-ratio:4/3;height:auto}
  .galeria>*:first-child{grid-column:auto}
  .galeria>*:last-child{margin-right:0}
}
.galeria__puntos{display:none}
@media (max-width:700px){
  .galeria__puntos{display:flex;gap:7px;justify-content:center;padding-top:14px}
  .galeria__puntos span{width:6px;height:6px;border-radius:999px;background:var(--borde);transition:background 220ms,transform 220ms}
  .galeria__puntos span.is-activo{background:var(--teja);transform:scale(1.5)}
}

/* ---------- cinta de confianza ----------
   Una sola fila, siempre. En escritorio los cinco datos caben de un golpe; en
   movil la fila se desplaza a lo ancho y un degradado en el borde derecho avisa
   de que sigue. Envolverlos en varias lineas convertia la cinta en un bloque
   negro tan alto como una tarjeta, y apilarlos en un carrusel los encimaba. */

.cinta{background:var(--basalto);color:var(--arena)}
.cinta ul.cinta__clon{display:none}
.cinta ul{list-style:none;margin:0;padding:14px 0;display:flex;gap:28px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:13px;font-weight:500;letter-spacing:.03em}
/* el liderazgo en Tripadvisor es el dato que decide: manda sobre los demas */
.cinta__pico{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.cinta__pico strong{font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1;font-weight:400;font-size:1.9rem;line-height:1;color:var(--oro);letter-spacing:-.02em}
.cinta__pico span{color:var(--cal)}

@media (max-width:900px){
  .cinta{position:relative;overflow:hidden;width:100%}
  .cinta .env{max-width:none;padding:0;margin:0}
  .cinta ul.cinta__clon{display:flex}
  .cinta__pista{
    display:flex;width:max-content;
    will-change:transform;
    animation:cinta-desfile 32s linear infinite;
  }
  .cinta ul{
    display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;
    gap:28px;padding:12px 14px;margin:0;list-style:none;flex-shrink:0;
  }
  .cinta li{white-space:nowrap;flex:0 0 auto}
  .cinta__pico{margin-right:0}
  .cinta__pico strong{font-size:1.25rem}
  .cinta__pico span{max-width:none}
  .cinta:hover .cinta__pista,
  .cinta:active .cinta__pista{animation-play-state:paused}
}

@keyframes cinta-desfile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .cinta__pista{animation:none}
  .cinta{overflow-x:auto}
}

/* ---------- tarjetas ---------- */

.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.tarjetas--2{grid-template-columns:repeat(2,1fr)}
.tarjetas--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .tarjetas,.tarjetas--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .tarjetas,.tarjetas--2,.tarjetas--4{grid-template-columns:minmax(0,1fr)} }

.tarjeta{display:flex;flex-direction:column;background:var(--cal);border:1px solid var(--borde-deco);text-decoration:none;color:inherit}
.tarjeta:hover{border-color:var(--basalto)}
.tarjeta[hidden]{display:none}
/* Al filtrar, las tarjetas que reaparecen se asientan en 140 ms. Es un gesto de
   decenas de veces por sesión: cualquier cosa más larga estorbaría. La rejilla
   en sí no se anima a propósito — mover el layout aquí cansa. */
.js .tarjeta.is-filtrada{animation:asentar 140ms var(--curva)}
@keyframes asentar{from{opacity:0}to{opacity:1}}
.tarjeta__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--arena);display:flex;align-items:center;justify-content:center}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover;transition:transform 240ms var(--curva)}
@media (hover:hover) and (pointer:fine){ .tarjeta:hover .tarjeta__foto img{transform:scale(1.03)} }
.tarjeta__cuerpo{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.tarjeta h3{font-size:1.375rem}
.tarjeta__datos{font-size:14px;color:var(--texto-3);line-height:1.55;margin:0}
.tarjeta__pie{margin-top:auto;padding-top:16px;border-top:1px solid var(--borde-deco);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.precio{font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1;font-size:1.5rem;color:var(--teja-oscura);line-height:1.1}
.precio small{font-family:var(--texto-f);font-size:12px;color:var(--texto-3);display:block;letter-spacing:.02em;line-height:1.4}
.tarjeta__enlace{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--indigo);white-space:nowrap}
.tarjeta:hover .tarjeta__enlace{color:var(--teja-oscura)}
.tarjeta:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* La unidad que ningún otro hotel del centro de León tiene manda en la retícula.
   Va después de .tarjeta a propósito: si no, display:flex le gana a display:grid. */
.tarjeta--ancha{grid-column:span 2;display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch}
.tarjeta--ancha .tarjeta__foto{aspect-ratio:auto;height:100%;min-height:300px}
.tarjeta--ancha .tarjeta__cuerpo{padding:32px}
.tarjeta--ancha h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.tarjeta--ancha .tarjeta__datos{font-size:15px}
@media (max-width:1100px){
  .tarjeta--ancha{grid-template-columns:1fr}
  .tarjeta--ancha .tarjeta__foto{aspect-ratio:16/9;height:auto;min-height:0}
}
@media (max-width:700px){ .tarjeta--ancha{grid-column:span 1} }

.caja{border:1px solid var(--borde);padding:28px;background:var(--cal);min-width:0}
@media (max-width:700px){ .caja{padding:20px} }
.caja h3{margin-bottom:12px}
.caja--arena{background:var(--arena);border-color:var(--borde)}
.caja--eco{padding:40px}
@media (max-width:700px){ .caja--eco{padding:24px} }
.basalto .caja{background:transparent;border-color:#3A3733}

.lista-num{list-style:none;margin:0;padding:0;border-top:1px solid var(--borde-deco)}
.lista-num li{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--borde-deco);align-items:baseline}
.lista-num li span{font-family:var(--mono);font-size:11px;color:var(--texto-3)}
/* la numeración solo se usa donde el orden significa algo: pasos, línea de tiempo, anexo */
.lista-simple li{grid-template-columns:1fr}
.basalto .lista-num,.basalto .lista-num li,.indigo .lista-num,.indigo .lista-num li{border-color:#3A3733}

.pares{list-style:none;margin:0;padding:0;border-top:1px solid var(--borde-deco)}
.pares li{display:flex;justify-content:space-between;gap:24px;padding:15px 0;border-bottom:1px solid var(--borde-deco);align-items:baseline;font-size:16px}
.pares li b{font-weight:500;color:var(--texto-3);text-align:right;white-space:nowrap;overflow-wrap:anywhere}
@media (max-width:700px){ .pares li b{white-space:normal} }
.indigo .pares,.indigo .pares li{border-color:rgba(246,241,231,.24)}
.indigo .pares li b{color:var(--indigo-claro)}

/* ---------- tabla comparativa ---------- */

.tabla-env{border:1px solid var(--borde-deco);overflow-x:auto}
table.comp{width:100%;border-collapse:collapse;font-size:15px;min-width:760px}
table.comp th,table.comp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--borde-deco);vertical-align:top}
table.comp thead th{background:var(--basalto);color:var(--cal);font-family:var(--texto-f);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;position:sticky;top:0}
table.comp tbody tr:nth-child(even){background:rgba(234,224,208,.4)}
table.comp td:first-child{font-weight:500}
.tabla-tarjetas{display:none}

@media (max-width:900px){
  .tabla-env{display:none}
  .tabla-tarjetas{display:grid;gap:2px}
  .tt{border:1px solid var(--borde-deco);padding:20px;background:var(--cal);min-width:0;overflow:hidden}
  .tt h4{margin-bottom:12px}
  .tt dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:14px}
  .tt dt{color:var(--texto-3)}
  .tt dd{margin:0;overflow-wrap:anywhere;word-break:break-word}
}
@media (max-width:640px){
  .tt dl{grid-template-columns:1fr;gap:4px 0}
  .tt dt{margin-top:10px;font-weight:500}
  .tt dt:first-child{margin-top:0}
}

/* ---------- ficha técnica ---------- */

.ficha{border-top:1px solid var(--borde-deco);margin:0}
.ficha__fila{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--borde-deco)}
.ficha__fila dt{color:var(--texto-3);font-size:14px}
.ficha__fila dd{margin:0}
@media (max-width:700px){ .ficha__fila{grid-template-columns:1fr;gap:2px} }

/* plano esquemático */
.plano{border:1px solid var(--borde);display:grid;gap:1px;background:var(--borde)}
.plano div{background:var(--cal);padding:16px 20px;font-size:15px}
.plano .plano__ext{background:var(--arena)}

/* ---------- barra de reserva lateral ---------- */

.reserva{position:sticky;top:110px;border:1px solid var(--borde);padding:28px;background:var(--cal)}
.reserva__precio{font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1;font-size:2.5rem;line-height:1;color:var(--texto);margin:0}
.reserva__campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde);margin:22px 0}
.reserva__campo{background:var(--cal);padding:12px 14px;min-width:0}
.reserva__campo label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);margin-bottom:4px}
.reserva__campo input,.reserva__campo select{width:100%;max-width:100%;min-width:0;border:0;background:transparent;font-family:var(--texto-f);font-size:15px;color:var(--texto);padding:0}
.reserva__total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--borde-deco);margin-bottom:18px}
.js [data-total],.js [data-total-usd],.js [data-por-noche]{transition:opacity 160ms var(--curva)}
.js [data-total].is-actualizando,.js [data-total-usd].is-actualizando,.js [data-por-noche].is-actualizando{opacity:.55;transition:none}
.reserva .btn{width:100%}
.contador{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.contador__mando{display:flex;align-items:center;gap:12px}
.contador__mando button{width:34px;height:34px;padding:0;justify-content:center;font-size:16px}
.desglose{margin:0;font-size:14px;display:grid;gap:8px}
.desglose>div{display:flex;justify-content:space-between;gap:12px}
.desglose dd{margin:0}
.desglose .verde{color:var(--verde)}
/* La línea del descuento aparece y desaparece sola mientras el visitante mueve
   los selectores: es dinero entrando y saliendo del resumen sin avisar. Se
   despliega en vez de saltar.
   Sobre el uso de max-height, que un revisor marcará como propiedad de
   maquetación: aquí es deliberado. La alternativa buena (grid a 0fr, la del
   acordeón) necesita un hijo único que recortar, y esta fila son un <dt> y un
   <dd> hermanos. Y transform no sirve: dejaría el hueco ocupado. Es una línea
   de texto de altura conocida que se pliega una vez por interacción, no algo
   que corra por fotograma, así que el coste de maquetación es irrelevante.
   visibility:hidden la saca además del árbol accesible: plegada no se lee. */
.js .desglose>[data-desc-fila]{
  overflow:hidden;visibility:hidden;
  max-height:0;opacity:0;margin-bottom:-8px;
  transition:max-height var(--d-interfaz) var(--curva),opacity 160ms var(--curva),margin-bottom var(--d-interfaz) var(--curva),visibility var(--d-interfaz);
}
.js .desglose>[data-desc-fila].is-visible{visibility:visible;max-height:3em;opacity:1;margin-bottom:0}
/* Mismo caso en la calculadora de estadías largas: el aviso de tarifa mensual
   entra y sale según la duración elegida.
   Aquí el recuadro trae 18 px de relleno arriba y abajo más los bordes, y eso
   max-height no lo recorta: plegado dejaba una banda de 38 px. Se pliegan
   también el relleno y el borde. */
.js [data-l-mensual]{
  overflow:hidden;visibility:hidden;
  max-height:0;opacity:0;
  margin-top:0 !important;padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;
  transition:max-height 240ms var(--curva),opacity 180ms var(--curva),margin-top 240ms var(--curva),padding-top 240ms var(--curva),padding-bottom 240ms var(--curva),visibility 240ms;
}
.js [data-l-mensual].is-visible{
  visibility:visible;max-height:12em;opacity:1;
  margin-top:24px !important;padding-top:18px;padding-bottom:18px;border-top-width:1px;border-bottom-width:1px;
}
.quedan{font-size:13px;color:var(--verde);margin-top:14px;text-align:center}
@media (max-width:1000px){ .reserva{position:static} }

/* ---------- formularios ---------- */

.form{display:grid;gap:20px;max-width:640px}
.form--dos{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){ .form--dos{grid-template-columns:minmax(0,1fr)} }
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--texto-2)}
.campo input,.campo select,.campo textarea{
  font-family:var(--texto-f);font-size:16px;color:var(--texto);
  background:var(--cal);border:1px solid var(--borde);border-radius:0;
  padding:13px 14px;width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--indigo)}
.campo .ayuda{font-size:13px;color:var(--texto-3)}
.campo .error{font-size:13px;color:var(--teja-oscura)}
.arena .campo input,.arena .campo select,.arena .campo textarea{background:var(--cal)}

/* ---------- navegación interna pegada ---------- */

.subnav{position:sticky;top:62px;z-index:50;background:var(--cal);border-bottom:1px solid var(--borde-deco)}
@media (min-width:1181px){
  /* En escritorio la cabecera fija suma la barra compacta de fechas */
  .subnav{top:132px}
}
.subnav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;padding:16px 0;font-size:14px;font-weight:500;color:var(--texto-2);white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover,.subnav a.is-activo{color:var(--teja-oscura);border-bottom-color:var(--teja)}

/* índice lateral de guía */
.indice{position:sticky;top:120px;font-size:14px}
.indice ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--borde-deco)}
.indice li a{display:block;padding:8px 0 8px 16px;color:var(--texto-3);border-left:2px solid transparent;margin-left:-1px}
.indice li a:hover,.indice li a.is-activo{color:var(--texto);border-left-color:var(--teja)}
@media (max-width:1000px){ .indice{position:static;margin-bottom:32px} }

/* ---------- artículo de guía ---------- */

.articulo{font-size:17px}
.articulo h2{margin:56px 0 20px;font-size:clamp(1.75rem,3vw,2.25rem)}
.articulo h3{margin:36px 0 14px;font-size:1.3rem}
.articulo p,.articulo ul,.articulo ol{max-width:68ch}
.articulo ul,.articulo ol{padding-left:20px;margin:0 0 1em}
.articulo li{margin-bottom:8px}
.dato-practico{border:1px solid var(--borde);background:var(--arena);padding:22px 24px;margin:28px 0;max-width:68ch}
.dato-practico h4{font-family:var(--texto-f);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);margin-bottom:14px}
.dato-practico dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:15px}
.dato-practico dt{color:var(--texto-3)}
.dato-practico dd{margin:0}

/* ---------- flujo de reserva ---------- */

.pasos{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--borde);margin-bottom:40px}
.pasos li{list-style:none;flex:1 1 180px;padding:14px 18px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-3);border-right:1px solid var(--borde);display:flex;gap:10px;align-items:center}
.pasos li:last-child{border-right:0}
.pasos li[aria-current="step"]{background:var(--basalto);color:var(--cal)}

/* Los tres pasos de la reserva se relevan en lugar de cortar en seco: el que
   sale se va hacia donde venías, el que entra llega desde donde vas. Es la ruta
   de conversión y merece que se entienda hacia dónde te mueves. */
.js [data-paso-panel]{transition:opacity var(--d-interfaz) var(--curva),transform var(--d-interfaz) var(--curva)}
.js [data-paso-panel].is-saliendo{opacity:0;transform:translateY(-10px)}
.js [data-paso-panel].is-saliendo-atras{opacity:0;transform:translateY(10px)}
.js [data-paso-panel].is-entrando{opacity:0;transform:translateY(14px)}
.js [data-paso-panel].is-entrando-atras{opacity:0;transform:translateY(-14px)}
/* La confirmación se ve una vez por reserva: ahí sí cabe algo más generoso. */
.js [data-paso-panel="4"] .caja{transition:opacity 360ms var(--curva) 80ms,transform 360ms var(--curva) 80ms}
.js [data-paso-panel="4"].is-entrando .caja{opacity:0;transform:scale(.97)}
@media (max-width:700px){ .pasos li{font-size:11px;padding:10px} }

/* ---------- calendario de dos meses con rango ---------- */

.calendario{border:1px solid var(--borde);background:var(--cal)}
.calendario__barra{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--borde-deco)}
/* nada de text-transform:capitalize: en español pondría «Agosto De 2026».
   La mayúscula inicial la pone el JS, solo en la primera letra. */
.calendario__titulo{margin:0;flex:1;text-align:center;font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1;font-size:1.125rem}
.calendario__nav{
  width:40px;height:40px;border:1px solid var(--borde);background:transparent;border-radius:999px;
  cursor:pointer;font-size:15px;color:var(--texto);display:flex;align-items:center;justify-content:center;
  transition:background var(--d-breve),color var(--d-breve),border-color var(--d-breve),transform var(--d-presion);
}
.calendario__nav:hover:not(:disabled){background:var(--basalto);color:var(--cal);border-color:var(--basalto)}
.calendario__nav:active:not(:disabled){transform:scale(.92)}
.calendario__nav:disabled{opacity:.35;cursor:not-allowed}
.calendario__meses{display:grid;grid-template-columns:1fr 1fr;gap:0}
.js .calendario__meses{position:relative}
.js .calendario__lamina{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0}
.js .calendario__lamina--saliente{position:absolute;inset:0;pointer-events:none;transition:opacity 100ms var(--curva),transform 100ms var(--curva)}
.js .calendario__lamina--entrante{opacity:0;transition:opacity 160ms var(--curva),transform 160ms var(--curva)}
.js .calendario__meses[data-direccion="1"] .calendario__lamina--entrante{transform:translateX(6px)}
.js .calendario__meses[data-direccion="-1"] .calendario__lamina--entrante{transform:translateX(-6px)}
.js .calendario__meses.is-cambiando[data-direccion="1"] .calendario__lamina--saliente{opacity:0;transform:translateX(-6px)}
.js .calendario__meses.is-cambiando[data-direccion="-1"] .calendario__lamina--saliente{opacity:0;transform:translateX(6px)}
.js .calendario__meses.is-cambiando .calendario__lamina--entrante{opacity:1;transform:none}
@media (max-width:760px){
  .calendario__meses,.js .calendario__lamina{grid-template-columns:minmax(0,1fr)}
}

/* display:table, no block: con block el navegador deja de tratar tr/td como
   fila y celda de verdad, la fila no se estira al ancho completo y las celdas
   se encogen a su contenido — el calendario "flotaba" angosto en móvil. */
.calendario table.mes{width:100%;table-layout:fixed;border-collapse:collapse;padding:18px 18px 4px}
.calendario table.mes + table.mes{border-left:1px solid var(--borde-deco)}
@media (max-width:760px){ .calendario table.mes + table.mes{border-left:0;border-top:1px solid var(--borde-deco)} }
.calendario caption{
  font-family:var(--texto-f);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-3);text-align:left;padding:0 0 12px;
}
.calendario thead th{
  font-family:var(--texto-f);font-size:10px;font-weight:600;letter-spacing:.08em;
  color:var(--texto-3);padding:6px 0;text-align:center;font-weight:600;
}
.calendario td{padding:1px;text-align:center}
.calendario .dia{
  width:100%;min-height:46px;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:var(--texto-f);color:var(--texto);padding:6px 2px;
  transition:background 160ms,color 160ms;
}
.calendario .dia__n{font-size:14px;font-variant-numeric:tabular-nums}
.calendario .dia__p{font-size:10px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.calendario .dia{transition:background-color 140ms var(--curva),color 140ms var(--curva),transform 120ms var(--curva)}
.calendario .dia:active:not(:disabled){transform:scale(.94)}
@media (hover:hover) and (pointer:fine){ .calendario .dia:hover:not(:disabled){background:var(--arena)} }
.calendario .dia:focus-visible{outline:2px solid var(--indigo);outline-offset:-2px}
/* los días pasados siguen siendo legibles: tachados, no borrosos */
.calendario .dia--pasado{color:var(--borde-osc);cursor:not-allowed}
.calendario .dia--pasado .dia__n{text-decoration:line-through;text-decoration-thickness:1px}
.calendario .dia--pasado .dia__p{visibility:hidden}
.calendario .dia--rango{background:var(--arena)}
.calendario .dia--inicio,.calendario .dia--fin{background:var(--basalto);color:var(--cal)}
.calendario .dia--inicio .dia__p,.calendario .dia--fin .dia__p{color:var(--oro)}
.calendario__estado{
  margin:0;padding:14px 18px;border-top:1px solid var(--borde-deco);background:var(--arena);
  font-size:14px;color:var(--texto-2);
}

.resumen{border:1px solid var(--borde);padding:26px;background:var(--arena);position:sticky;top:110px}
@media (max-width:1000px){ .resumen{position:static} }

.aviso{border:1px solid var(--borde);border-left:3px solid var(--teja);padding:18px 22px;background:var(--cal);font-size:15px;max-width:68ch}
.aviso--verde{border-left-color:var(--verde)}
.aviso--oro{border-left-color:var(--oro)}

/* ---------- acordeón ---------- */

.acordeon{border-top:1px solid var(--borde-deco)}
.acordeon>div{border-bottom:1px solid var(--borde-deco)}
.acordeon h3{margin:0;font-size:1.25rem}
.acordeon button{
  all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:20px;width:100%;
  padding:20px 0;font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1;
  font-size:1.2rem;line-height:1.3;color:var(--texto);box-sizing:border-box;
}
.acordeon button:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.acordeon button span{color:var(--teja-oscura);font-family:var(--texto-f);font-size:20px;line-height:1}
/* El acordeón se despliega en lugar de saltar: grid-template-rows 0fr→1fr es la
   única forma de animar "hasta el alto del contenido" sin medirlo en JS.
   El relleno vive en el hijo; si estuviera aquí, nunca cerraría del todo. */
.acordeon__cuerpo{display:grid;grid-template-rows:1fr}
.acordeon__cuerpo>*{min-height:0}
.acordeon__cuerpo p{font-size:15.5px;color:var(--texto-2);max-width:66ch;padding:0 0 22px}
.js .acordeon__cuerpo{
  grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows var(--d-panel) var(--curva),opacity var(--d-breve) var(--curva),visibility var(--d-panel);
}
/* el relleno viaja con la fila: un padding fijo dejaría 22 px de aire al cerrar */
.js .acordeon__cuerpo>*{overflow:hidden;padding-bottom:0;transition:padding-bottom var(--d-panel) var(--curva)}
.js .acordeon__cuerpo.is-abierto{grid-template-rows:1fr;opacity:1;visibility:visible}
.js .acordeon__cuerpo.is-abierto>*{padding-bottom:22px}

/* ---------- mapa ---------- */

.mapa{position:relative;border:1px solid var(--borde);background:var(--cal);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;
  background-image:repeating-linear-gradient(0deg,var(--arena) 0 1px,transparent 1px 58px),repeating-linear-gradient(90deg,var(--arena) 0 1px,transparent 1px 58px)}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity var(--d-interfaz) var(--curva)}
.mapa.is-cargado iframe{opacity:1}
.mapa.is-mapa-preparando iframe{transition:none}
.mapa__aviso{max-width:34ch;opacity:1;transition:opacity 120ms var(--curva)}
.mapa.is-cargado .mapa__aviso{opacity:0}

/* ---------- visor de fotos a pantalla completa ---------- */

.js .ampliable{cursor:zoom-in}
.js .ampliable:focus-visible{outline:2px solid var(--oro);outline-offset:-4px}

.visor{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2vw,28px);padding:clamp(16px,4vw,56px);
  background:rgba(27,26,24,.94);
  opacity:0;pointer-events:none;transition:opacity 220ms var(--curva);
}
/* display:flex pisa la regla del navegador para [hidden]: sin esto, el visor se
   queda encima de la página entera y se traga todos los clics. */
.visor[hidden]{display:none}
.visor.is-abierto{opacity:1;pointer-events:auto}
.visor__marco{max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:14px;opacity:1;transform:none;transition:opacity 180ms var(--curva),transform 180ms var(--curva)}
.visor__marco.is-saliendo{opacity:0;transition:opacity 100ms var(--curva),transform 100ms var(--curva)}
.visor__marco.is-saliendo[data-direccion="1"]{transform:translateX(-8px)}
.visor__marco.is-saliendo[data-direccion="-1"]{transform:translateX(8px)}
.visor__marco.is-entrando{opacity:0;transition:none}
.visor__marco.is-entrando[data-direccion="1"]{transform:translateX(8px)}
.visor__marco.is-entrando[data-direccion="-1"]{transform:translateX(-8px)}
.visor__marco img{
  max-width:100%;max-height:78vh;object-fit:contain;background:#2A2723;
  transform:scale(.985);transition:transform 320ms var(--curva);
}
.visor.is-abierto .visor__marco img{transform:none}
.visor figcaption{
  font-family:var(--texto-f);font-size:14px;line-height:1.5;color:var(--arena);
  text-align:center;padding:0;max-width:70ch;margin:0 auto;
}
.visor__cuenta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--texto-inv-2);margin-left:10px}
.visor__cerrar,.visor__nav{
  border:1px solid rgba(246,241,231,.4);background:transparent;color:var(--cal);
  width:48px;height:48px;border-radius:999px;cursor:pointer;font-size:17px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--d-breve),border-color var(--d-breve),transform var(--d-presion);
}
.visor__cerrar:hover,.visor__nav:hover{background:var(--cal);color:var(--basalto);border-color:var(--cal)}
.visor__cerrar:active,.visor__nav:active{transform:scale(.92)}
.visor__cerrar{position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.visor__cerrar:focus-visible,.visor__nav:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
@media (max-width:700px){
  .visor{flex-wrap:wrap}
  .visor__marco{order:-1;flex:1 0 100%}
  .visor__nav{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .visor{transition:none}
  .visor__marco img{transform:none}
  .visor__marco{transform:none;transition:opacity 120ms linear}
  .visor__marco.is-saliendo{opacity:1;transform:none;transition:none}
  .visor__marco.is-entrando{opacity:.8;transform:none;transition:none}
  .calendario__lamina--saliente{opacity:0;transform:none !important;transition:none}
  .calendario__lamina--entrante{opacity:.82;transform:none !important;transition:opacity 120ms linear}
  .calendario__meses.is-cambiando .calendario__lamina--entrante{opacity:1}
  .mapa iframe{transition:opacity 120ms linear}
  .mapa.is-mapa-preparando iframe{opacity:.85;transition:none}
}

/* ---------- anexo de trabajo ---------- */

.anexo{background:var(--arena);border-top:2px solid var(--basalto);padding:56px 0}
.anexo h2{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texto);margin:0}
.anexo .meta{margin:6px 0 28px;display:block}
.anexo ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--borde)}
@media (max-width:900px){ .anexo ol{grid-template-columns:1fr} }
.anexo li{display:grid;grid-template-columns:34px 1fr;gap:12px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--texto);padding:12px 0;border-bottom:1px solid var(--borde)}
.anexo li span{color:var(--texto-3)}

/* ---------- pie ---------- */

.pie{background:var(--basalto);color:var(--texto-inv);padding:72px 0 40px;position:relative}
.pie a{color:var(--texto-inv-2)}
.pie a:hover{color:var(--oro)}
.pie__cols{display:grid;grid-template-columns:1.5fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
@media (max-width:900px){ .pie__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} }
@media (max-width:560px){ .pie__cols{grid-template-columns:minmax(0,1fr)} }
.pie h4{font-family:var(--texto-f);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-inv);margin-bottom:14px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.pie p{color:var(--texto-inv-2);font-size:15px}
.pie__base{margin-top:56px;padding-top:24px;border-top:1px solid #3A3733;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#8C857A}
.maribios{display:block;width:100%;max-width:300px;height:36px;margin-bottom:22px}
.maribios path{fill:none;stroke:#3A3733;stroke-width:1}
.boletin{display:flex;gap:0;margin-top:14px;width:100%;max-width:320px}
.boletin input{flex:1 1 0;min-width:0;background:transparent;border:1px solid #3A3733;color:var(--cal);padding:11px 14px;font-family:var(--texto-f);font-size:14px}
.boletin button{border:1px solid var(--oro);background:transparent;color:var(--oro);padding:0 16px;font-family:var(--texto-f);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.boletin button:hover{background:var(--oro);color:var(--basalto)}

.pie__marca{
    display:flex;
    align-items:center;
    gap:14px;
}
 
.pie__logo{
    width:60px;
    height:auto;
}

.pie__descripcion,
.pie__historia{
    max-width:34ch;
}
 
.credito{
    font-size:.85em;
    color:var(--texto-3);
}
/* ---------- barra inferior móvil ---------- */

.movil{display:none}
@media (max-width:1180px){
  .movil{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--borde);border-top:1px solid var(--borde);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(100%);
    transition:transform 260ms var(--curva);
    will-change:transform;
  }
  .movil.is-visible{transform:translateY(0)}
  .no-js .movil{transform:none}
  .movil a{
    display:flex;align-items:center;justify-content:center;height:60px;
    font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    transition:transform var(--d-presion) var(--curva);
  }
  .movil a:active{transform:scale(.98);transition-duration:120ms}
  .movil .m-pri{background:var(--teja);color:var(--cal)}
  .movil .m-sec{background:var(--cal);color:var(--texto)}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  body[data-pagina="reservar"]{padding-bottom:0 !important}
  body.menu-abierto .movil,body.lightbox-abierta .movil{transform:translateY(100%) !important}
}

/* ---------- animación de entrada ---------- */

/* Solo se esconde si hay JavaScript para volver a mostrarlo. Sin JS, la clase
   .js nunca se añade y el contenido se ve entero: la animación es un adorno,
   no un requisito para leer la página. */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 400ms var(--curva),transform 400ms var(--curva)}
.js [data-reveal].visible{opacity:1;transform:none}

/* aparición automática de bloques que no la declaran en el HTML */
.js [data-anim]{opacity:0;transform:translateY(18px);transition:opacity 420ms var(--curva),transform 420ms var(--curva)}
.js [data-anim].visible{opacity:1;transform:none}

/* El héroe se mueve un poco más lento que la página.
   La capa de composición se reserva solo mientras el héroe está en pantalla:
   un will-change permanente la mantiene viva durante toda la vida de la
   página, también cuando el héroe quedó diez pantallas atrás. La clase la
   pone y la quita el observador de sitio.js. */
.heroe.is-a-la-vista .heroe__foto,
.heroe.is-a-la-vista .heroe__fotos{will-change:transform}

/* ---------- panel de estado del envío ----------
   El guion escribe data-estado="cargando" al mandar la solicitud y "listo"
   cuando termina. Antes nadie pintaba esos dos valores: el aviso «Enviando…»
   aparecía de golpe y se quedaba 900 ms sin señal de vida, justo en el momento
   de más duda de todo el sitio. Ahora entra como todo lo demás. */
.js [data-estado]{
  opacity:0;transform:translateY(6px);
  transition:opacity var(--d-interfaz) var(--curva),transform var(--d-interfaz) var(--curva);
}
.js [data-estado="cargando"],
.js [data-estado="listo"]{opacity:1;transform:none}

/* la cifra display cuenta al entrar */
.cifra[data-contando]{font-variant-numeric:tabular-nums}

/* el título de tarjeta gana subrayado de izquierda a derecha */
.tarjeta h3{display:inline-block;background-image:linear-gradient(var(--teja),var(--teja));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size 260ms var(--curva)}
@media (hover:hover) and (pointer:fine){ .tarjeta:hover h3{background-size:100% 1px;text-decoration:none} }

/* píldoras y botones responden al pulsar */
/* Feedback de pulsación: escala sutil, no desplazamiento. Un translate de 1 px
   se lee como un salto; el scale se siente como que el botón cede. */
.btn:active{transform:scale(.97)}
.btn{transition:background var(--d-interfaz),color var(--d-interfaz),border-color var(--d-interfaz),transform 160ms var(--curva)}

/* el arco entra revelándose desde abajo */
.arco img{transition:transform 320ms var(--curva)}
@media (hover:hover) and (pointer:fine){ figure.arco:hover img{transform:scale(1.02)} }

@media (prefers-reduced-motion:reduce){
  .js [data-anim],.js [data-reveal]{opacity:1;transform:none;transition:none}
  .menu-movil li{opacity:1;transform:none;transition:none}
  .hamburguesa:active,.tarjeta:active,.pildora:active,.opcion-unidad:active{transform:none}
  /* Lo que se despliega pasa a solo aparecer: se conserva el cambio de opacidad,
     que es lo que hace entender que algo cambió, y se quita el movimiento. */
  .js [data-estado]{transform:none}
  .js .desglose>[data-desc-fila],.js [data-l-mensual]{transition-property:opacity}
  .js .desglose>[data-desc-fila]{max-height:3em;margin-bottom:0}
  .js [data-l-mensual]{max-height:12em;margin-top:24px !important}
  .js .desglose>[data-desc-fila]:not(.is-visible),
  .js [data-l-mensual]:not(.is-visible){display:none}
  .js .heroe h1 .palabra>span{transform:none}
  .js .heroe .eyebrow,.js .heroe h1+p,.js .heroe .buscador,.js .heroe h1~.nota{opacity:1;transform:none}
  .js .heroe__foto{--pe:1;transition:none}
  .js .hamaca path{stroke-dashoffset:0}
  .h2--linea::after{transition:none;width:72px}
  .js .sol{animation:none}
  .tarjeta h3{background-size:0 1px !important}
  .arco img,figure.arco:hover img{transform:none}
  .js [data-total],.js [data-total-usd],.js [data-por-noche]{transition:opacity 120ms linear}
  .js [data-total].is-actualizando,.js [data-total-usd].is-actualizando,.js [data-por-noche].is-actualizando{opacity:.82;transition:none}
  .movil a{transform:none;transition:opacity 120ms linear}
  .movil a:active{opacity:.78;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:120ms !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .tarjeta:hover .tarjeta__foto img{transform:none}
}

/* ---------- utilidades ---------- */

.salto{position:absolute;left:-9999px}
.salto:focus{left:24px;top:12px;z-index:100;background:var(--basalto);color:var(--cal);padding:12px 20px}
.migas{font-size:13px;color:var(--texto-3);padding:20px 0;margin:0}
.migas a{color:var(--texto-3)}
.migas span{margin:0 8px;color:var(--texto-3)}
.centro{text-align:center}
.centro p{margin-left:auto;margin-right:auto}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sol{width:34px;height:34px;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--oro) 0deg 2.6deg,transparent 2.6deg 30deg);-webkit-mask:radial-gradient(circle,transparent 21%,#000 24%);mask:radial-gradient(circle,transparent 21%,#000 24%);flex-shrink:0}
.flujo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-inv-2)}
.flujo .oro{color:var(--oro)}