/* Rancho San Antonio - hoja compartida por todas las paginas.
   El sistema completo esta descrito en DESIGN.md. Editar aqui cambia el
   diseno de todo el sitio a la vez; los textos viven en cada pagina. */

:root{
  --noche:#0E1512;
  --paramo:#26332C;
  --humo:#6B7671;
  --niebla:#CFD8D5;
  --niebla-alta:#E8ECEB;
  --carmin:#9E2B25;

  --ground:var(--noche);
  --ink:var(--niebla-alta);
  --ink-2:#98A5A0;
  --rule:rgba(232,236,235,.16);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* La foto de portada es un fondo, no una etiqueta <img>: aqui no llega
     srcset y las tallas se eligen a mano, abajo. Estas dos son la talla de
     partida, la del telefono normal. */
  --foto-dia:url("../assets/img/hotel-exterior-1200.webp");
  --foto-noche:url("../assets/img/finca-noche-1200.webp");

  --gut:clamp(1.25rem,4vw,3.5rem);
  --max:76rem;

  /* Altura de la barra pegajosa. Todo lo que tenga que esquivarla la lee de
     aqui y de ningun otro sitio. Estos dos valores son el respaldo; el guion
     mide la barra de verdad y los reescribe, asi que si algun dia cambia el
     logo, la tipografia o el relleno, lo que la esquiva se entera solo.
     Antes era un 62 escrito a mano en un `calc()`: la barra crecio al apilar
     el logo sobre el nombre y el numero se quedo, que es como la etiqueta de
     seccion acabo por detras del menu al llegar por un enlace con ancla. */
  --barra:76px;
}
@media (max-width:44rem){ :root{ --barra:68px } }

/* Las tallas de la foto de portada.

   Los cortes miran el ancho Y la densidad de la pantalla, no solo el ancho:
   un telefono de 390 px con pantalla de 3x necesita tantos pixeles como un
   portatil, y si solo se mirara el ancho se llevaria la talla de un telefono
   viejo y se veria blanda. Antes no habia cortes de ninguna clase: todo el
   mundo cargaba la de 2400, tambien quien entraba con datos en la carretera.

   Si algun dia cambian estas fotos, aqui hay seis archivos escritos a mano
   (tres tallas por franja, en ocho url()).
   publicar.py comprueba que existan, asi que si una desaparece lo dice y no
   se sube una portada en blanco. */
@media (min-width:34rem),(min-resolution:1.5dppx){
  :root{
    --foto-dia:url("../assets/img/hotel-exterior-2400.webp");
    --foto-noche:url("../assets/img/finca-noche-2400.webp");
  }
}
@media (min-width:80rem) and (min-resolution:1.5dppx),(min-width:110rem){
  :root{
    --foto-dia:url("../assets/img/hotel-exterior-3067.webp");
    --foto-noche:url("../assets/img/finca-noche-3840.webp");
  }
}
/* Y si el visitante pidio 4K en el pie, la mas grande y punto. La marca la
   pone temprano.js antes de pintar, asi que no se pide una y luego la otra. */
:root[data-max="si"]{
  --foto-dia:url("../assets/img/hotel-exterior-3067.webp");
  --foto-noche:url("../assets/img/finca-noche-3840.webp");
}

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

/* Quien llega por un enlace con ancla se para donde diga esto, no pegado al
   borde de la ventana. Sin ello la seccion aterriza en cero y la barra, que
   es semitransparente, le tapa la primera linea: a 1280x800 la etiqueta de
   seccion quedaba 4,6 px por detras del menu. */
section[id]{scroll-margin-top:var(--barra)}

body{
  margin:0;
  position:relative;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.65;
  transition:background-color .45s linear,color .45s linear;
  overflow-x:hidden;
}

/* -- El amanecer ---------------------------------------------
   Seis tramos, 0..5. El fondo va de la noche al papel de niebla a
   medida que bajas; la tinta y las reglas viajan con él para
   que la cota siga legible en todo el recorrido.            */
body[data-luz="0"]{--ground:#0E1511;--ink:#E8ECEB;--ink-2:#7B807E;--rule:rgba(232,236,235,.20);--velo:rgba(14,21,18,.55);--velo-alto:rgba(232,236,235,.07)}
body[data-luz="1"]{--ground:#293B31;--ink:#E8ECEB;--ink-2:#9CA5A1;--rule:rgba(232,236,235,.20);--velo:rgba(14,21,18,.45);--velo-alto:rgba(232,236,235,.07)}
body[data-luz="2"]{--ground:#4A6456;--ink:#E8ECEB;--ink-2:#D5DCD9;--rule:rgba(232,236,235,.24);--velo:rgba(14,21,18,.35);--velo-alto:rgba(232,236,235,.08)}
body[data-luz="3"]{--ground:#748F80;--ink:#0E1512;--ink-2:#19221E;--rule:rgba(14,21,18,.26);--velo:rgba(255,255,255,.30);--velo-alto:rgba(14,21,18,.06)}
body[data-luz="4"]{--ground:#B1BBB6;--ink:#0E1512;--ink-2:#424A46;--rule:rgba(14,21,18,.22);--velo:rgba(255,255,255,.42);--velo-alto:rgba(14,21,18,.05)}
body[data-luz="5"]{--ground:#EAEBEB;--ink:#0E1512;--ink-2:#646867;--rule:rgba(14,21,18,.18);--velo:rgba(255,255,255,.55);--velo-alto:rgba(14,21,18,.04)}

@media (prefers-reduced-motion:reduce){
  /* El amanecer es un cambio de color ligado a la lectura, no movimiento
     vestibular, asi que se conserva. Solo se retira el scroll suave y se
     alarga el fundido para que ningun cambio resulte brusco. */
  html{scroll-behavior:auto}
  body{transition:background-color .9s linear,color .9s linear}

  /* Lo demas que se mueve si se retira: son transformaciones y crecimiento
     de barras, no cambios de color. El amanecer se queda porque un cambio de
     color ligado a la lectura no es movimiento vestibular. */
  .onda i,.menu-rayas i,.reservar,.source-button{transition:none}
  .reservar:active{transform:none}
  .sonido:hover .onda i{height:35%}
  .menu-b[aria-expanded="true"] .menu-rayas i:nth-child(1),
  .menu-b[aria-expanded="true"] .menu-rayas i:nth-child(3){transition:none}
}

#riel{
  position:absolute;top:0;left:0;
  width:1px;height:100%;
  pointer-events:none;visibility:hidden;
}
#riel i{display:block;height:16.6667%}

/* -- Tipografía --------------------------------------------- */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  font-optical-sizing:auto;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.012em;
  line-height:1.02;
}
h1{font-size:clamp(2.9rem,1.2rem + 7.4vw,7.4rem)}
h2{font-size:clamp(2.1rem,1.1rem + 3.9vw,4.1rem);line-height:1.06}
h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);line-height:1.15}

p{margin:0}

.cota{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* -- Estructura --------------------------------------------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

section{padding-block:clamp(5rem,12vh,9.5rem)}
section.primera{padding-top:clamp(3rem,7vh,5rem)}

.stack{display:flex;flex-direction:column}

/* Marca de cota: la línea de nivel del sistema cartográfico */
.nivel{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.25rem;
  padding-block:.9rem;
  border-top:1px solid var(--rule);
}
.nivel .tick{
  height:1px;
  background:repeating-linear-gradient(to right,var(--rule) 0 5px,transparent 5px 11px);
}

/* -- Barra superior ----------------------------------------- */
.top{
  position:sticky;top:0;z-index:20;
  /* el panel del menu se cuelga de aqui */
  /* La primera declaracion es el respaldo: si el navegador no entiende
     color-mix() descarta la segunda y la barra se queda opaca en vez de
     quedarse transparente con el texto de la pagina cruzandola por detras.
     Las dos salen de --ground, asi que la transicion del amanecer vale igual. */
  background:var(--ground);
  background:color-mix(in srgb, var(--ground) 72%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
  transition:background-color .45s linear;
}
.top-in{
  max-width:var(--max);margin-inline:auto;
  padding:.7rem var(--gut);
  display:flex;align-items:center;gap:1.25rem;
  min-width:0;
}
.marca{
  font-family:var(--serif);
  font-size:1.0625rem;
  letter-spacing:.02em;
  white-space:nowrap;
  color:var(--ink);text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:.18rem;
}
/* Los cuernos encima del nombre, como un solo bloque. Apilar sube la barra
   pegajosa, asi que en movil el logo encoge en vez de desaparecer: el
   nombre solo ya identifica, pero la marca completa se reconoce antes. */
.marca-logo{display:block;height:1.35rem;width:auto;flex:none}
@media (max-width:44rem){
  .marca{font-size:.9375rem;gap:.12rem}
  .marca-logo{height:1rem}
}
.top nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.9rem)}
.top nav a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);text-decoration:none;
  font-size:.8125rem;letter-spacing:.07em;text-transform:uppercase;
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:border-color .2s,opacity .2s;
}
.top nav a:hover{border-bottom-color:var(--ink)}
/* Un solo enlace, al otro idioma y escrito en ese idioma. Callado, que no
   compite con Reservar; el globo es lo que lo separa del resto del menu. */
.lang{
  font-family:var(--sans);font-size:.8125rem;font-weight:400;
  letter-spacing:.02em;text-transform:none;
  color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:.42rem;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.top nav a.lang{text-transform:none;font-size:.8125rem;letter-spacing:.02em}
.lang:hover,.lang:focus-visible{color:var(--ink);border-bottom-color:currentColor}
.lang-globo{width:1.05em;height:1.05em;flex:none;display:block}
/* -- Menu de movil -------------------------------------------
   Debajo de 44rem la barra se queda solo con la marca: el menu completo
   —los cuatro enlaces, el idioma y Reservar— vive detras del boton. Antes
   los enlaces se ocultaban y no habia forma de llegar a ellos desde el
   telefono, que es donde entra la mayoria. */
/* 44x44 es el minimo comodo para un dedo. Con solo el relleno el area
   sensible quedaba en 40x34, y este es el control mas usado del sitio:
   debajo de 44rem es la unica puerta a los cuatro enlaces y a Reservar.
   El tamano lo fija la caja, no el relleno, para que no dependa del icono. */
.menu-b{
  display:none;
  margin-left:auto;
  align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  background:none;border:0;padding:.55rem;cursor:pointer;
  color:var(--ink);
}
.menu-rayas{display:block;width:1.4rem;height:1.05rem;position:relative}
.menu-rayas i{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .22s ease,opacity .18s ease;
}
.menu-rayas i:nth-child(1){top:0}
.menu-rayas i:nth-child(2){top:50%;margin-top:-.75px}
.menu-rayas i:nth-child(3){bottom:0}
/* Abierto: las tres rayas se convierten en aspa */
.menu-b[aria-expanded="true"] .menu-rayas i:nth-child(1){transform:translateY(.51rem) rotate(45deg)}
.menu-b[aria-expanded="true"] .menu-rayas i:nth-child(2){opacity:0}
.menu-b[aria-expanded="true"] .menu-rayas i:nth-child(3){transform:translateY(-.51rem) rotate(-45deg)}

@media (max-width:44rem){
  .menu-b{display:flex}
  .top nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;
    gap:0;margin-left:0;
    padding:.4rem var(--gut) 1.4rem;
    background:var(--ground);
    border-bottom:1px solid var(--rule);
    display:none;
  }
  .top nav[data-abierto]{display:flex}
  .top nav a{
    padding-block:.95rem;
    border-bottom:1px solid var(--rule);
    font-size:.875rem;
  }
  .top nav a:hover{border-bottom-color:var(--rule)}
  /* Los cuatro enlaces dejan de esconderse: aqui es donde se llega a ellos */
  .top nav a.oculta-movil{display:block}
  .top nav a.lang{
    font-size:.875rem;gap:.6rem;text-transform:none;letter-spacing:.02em;
    padding-block:.95rem;
  }
  .top nav a.reservar{
    margin-top:1rem;text-align:center;border-bottom:0;
    padding-block:1rem;
  }
  .top nav a.reservar:hover{border-bottom:0}
}
/* En la pagina de gracias el selector son botones, no enlaces: cambia el
   idioma en sitio para no perder los datos de la reserva al navegar. */
.lang-b{
  font-family:var(--sans);background:none;border:0;padding:0;cursor:pointer;
}

/* -- Hora y clima, bajo el titular de Consejos ---------------- */
/* Una tira de datos sueltos, no una tarjeta: el sitio no tiene cajas.
   Los separa el espacio y una regla fina, como el resto. */
.estado{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.55rem 1.6rem;
  margin-top:clamp(1.6rem,4vh,2.4rem);
  padding-top:clamp(1.2rem,3vh,1.8rem);
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.8125rem;
  color:var(--ink-2);
}
.estado-dato{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.estado-dato b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
/* El icono se alinea con la altura de la x, no con la caja del texto */
.estado-icono{display:inline-block;width:1.3em;height:1.3em;flex:none}
.estado-icono svg{display:block;width:100%;height:100%}
.estado-nota{margin-top:.9rem;color:var(--ink-2);opacity:.72}
@media (max-width:34rem){
  .estado{gap:.5rem 1.1rem;font-size:.75rem}
}

/* 44x44 es el minimo comodo para un dedo (DESIGN.md). El tamano lo fija la
   caja, no el relleno, para que no dependa de lo que lleve dentro. */
.reservar,.sonido,.conmutador{min-height:44px}
.reservar{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);
  font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:#F4F6F5;background:var(--carmin);
  padding:.7rem 1.4rem;
  text-decoration:none;
  border:0;cursor:pointer;
  white-space:nowrap;
  transition:background-color .2s,transform .2s;
}
.reservar:hover{background:#88231E}
.reservar:active{transform:translateY(1px)}

/* El enlace de texto del cuerpo: WhatsApp, correo, Google Maps. Existia en
   ocho sitios de las partes y NO en esta hoja, asi que salia con el azul por
   defecto del navegador (#0000EE), que sobre el tramo 1 del amanecer da
   1,27:1 y es ademas un segundo color fuera del sistema. Es la misma
   vestimenta que ya tenian los enlaces del pie y del cierre legal. */
.secundario{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:border-color .2s;
}
.secundario:hover{border-bottom-color:var(--ink)}

/* El anillo de foco va en tinta, no en carmin: ese color es solo del boton
   Reservar (CLAUDE.md). Ademas --ink viaja con la rampa del amanecer, asi que
   contrasta en los seis tramos, y el carmin no: sobre el tramo 2 daba 1,15:1.
   Antes habia tres reglas para una sola idea, porque .menu-b y .lang-b ya
   traian su propia excepcion en tinta. */
/* Saltar al contenido. Es la primera parada del teclado y solo se ve al
   enfocarla: sin ella hay que recorrer la marca, cuatro enlaces, el idioma,
   Reservar y el boton del menu antes de llegar al titular, en cada pagina. */
.salto{
  position:absolute;z-index:40;left:var(--gut);top:0;
  transform:translateY(-150%);
  padding:.75rem 1.1rem;
  background:var(--ground);color:var(--ink);
  border:1px solid var(--ink);
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;
  transition:transform .18s ease;
}
.salto:focus-visible{transform:translateY(0)}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

/* -- Portada ------------------------------------------------ */
.portada{
  position:relative;
  min-height:clamp(34rem,92svh,58rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  /* La foto arranca en el borde de la ventana y la barra flota encima. Antes
     empezaba justo debajo, y como la barra es semitransparente el canto de la
     foto se leia como una raya cruzando la pantalla: arriba una franja opaca
     del color del fondo, debajo la fotografia.
     El tiron sale de --barra, que se mide sola: si la barra cambia de alto, la
     portada sube exactamente lo que haga falta y no se descuadra. */
  margin-top:calc(-1 * var(--barra));
  /* El relleno NO compensa el tiron, y es a proposito. Compensarlo hacia
     abajo hace crecer la seccion, y como la foto va con `cover` y el velo es
     un degradado por porcentajes, la seccion mas alta recorta distinto y
     mueve el contenido dentro del velo: la cota pasaba del 15,8 % al 22,6 %,
     se salia de la banda oscura del velo (0-20 %) y se quedaba sobre nubes
     claras, ilegible. Sin compensar, la seccion conserva su alto y todo
     —foto, velo y texto— sube en bloque sin cambiar de relacion.

     El relleno superior tiene que superar la altura de la barra pegajosa con
     aire de sobra: la portada alinea abajo, asi que en pantallas bajas el
     contenido subia hasta meterse debajo del menu. A 1280x720 el hueco entre
     la barra y la cota era exactamente 0. */
  padding-block:clamp(6rem,15vh,9.5rem) clamp(2.5rem,6vh,4rem);
  overflow:hidden;
}
.portada-foto{
  position:absolute;inset:0;
  background-image:var(--foto-dia);
  background-size:cover;background-position:72% 58%;
  opacity:.95;
  filter:saturate(.86) contrast(1.03);
}
/* De noche la foto ya es oscura: no hace falta apagarla. La version anterior
   llevaba saturate(.68) para calmar el LED morado del jacuzzi y de paso se
   llevaba por delante las luces calidas de las cabanas, que son lo mejor de
   la imagen. Se deja casi la saturacion original y el morado se controla con
   el encuadre, no quitandole color a todo. */
[data-hora="noche"] .portada-foto{
  background-image:var(--foto-noche);
  background-position:58% 62%;
  opacity:1;
  filter:saturate(.98) contrast(1.05);
}
/* Y el velo tambien se aligera: sobre una foto nocturna el mismo velo que de
   dia deja el hotel en nada. */
[data-hora="noche"] .portada-vel{
  background:
    linear-gradient(to right,
      rgba(14,21,18,.74) 0%,
      rgba(14,21,18,.48) 42%,
      rgba(14,21,18,.14) 68%,
      rgba(14,21,18,0) 88%),
    linear-gradient(to bottom,
      rgba(14,21,18,.66) 0%,
      rgba(14,21,18,.16) 20%,
      rgba(14,21,18,.14) 54%,
      rgba(14,21,18,.52) 82%,
      rgba(14,21,18,.84) 100%);
}
@media (max-width:56rem){
  [data-hora="noche"] .portada-vel{
    background:linear-gradient(to bottom,
      rgba(14,21,18,.74) 0%,
      rgba(14,21,18,.24) 18%,
      rgba(14,21,18,.34) 48%,
      rgba(14,21,18,.74) 78%,
      rgba(14,21,18,.92) 100%);
  }
}
/* Oscuro arriba para que la barra se lea sobre el cielo, claro en el medio
   para que se vean las cabanas y el quiosco, y solido abajo para asentar el
   titular. */
.portada-vel{
  position:absolute;inset:0;
  background:
    /* Velo lateral: el texto se apoya en oscuro a la izquierda y el hotel
       queda limpio a la derecha, donde esta el quiosco. */
    linear-gradient(to right,
      rgba(14,21,18,.90) 0%,
      rgba(14,21,18,.80) 40%,
      rgba(14,21,18,.42) 62%,
      rgba(14,21,18,.10) 78%,
      rgba(14,21,18,0) 90%),
    /* Y el vertical, oscuro arriba para la barra y abajo para asentar. */
    linear-gradient(to bottom,
      rgba(14,21,18,.72) 0%,
      rgba(14,21,18,.22) 18%,
      rgba(14,21,18,.20) 52%,
      rgba(14,21,18,.60) 80%,
      rgba(14,21,18,.88) 100%);
}
@media (max-width:56rem){
  /* En pantallas estrechas no cabe la columna: se vuelve al velo vertical. */
  .portada-vel{
    background:linear-gradient(to bottom,
      rgba(14,21,18,.80) 0%,
      rgba(14,21,18,.34) 16%,
      rgba(14,21,18,.44) 46%,
      rgba(14,21,18,.80) 78%,
      rgba(14,21,18,.95) 100%);
  }
}
.portada-in{position:relative;z-index:2;width:100%}
.portada .cota{
  /* Nada de limites en ch: no cuentan el letter-spacing de 0.16em y la
     linea se partia. */
  max-width:min(58vw,46rem);
  text-shadow:0 1px 12px rgba(14,21,18,.75);
}
.portada h1{
  margin-block:1.4rem 2rem;
  /* Mas contenido que el h1 general: aqui compite con la foto. El limite en
     vw evita que el titular invada el quiosco en pantallas anchas. */
  /* El tamano mira el ancho Y el alto. Solo con vw, en una pantalla baja el
     titular crece igual y empuja el selector de fechas fuera de pantalla:
     con el titular de cuatro lineas, a 1280x720 el boton quedaba en 716 de
     720. El termino en vh lo impide. */
  font-size:clamp(2.6rem,min(6.4vw,10vh),6rem);
  max-width:min(12ch,58vw);
}
/* Una sola vez: estaba declarada dos veces seguidas y el tope en 46vw moria
   en la linea siguiente. En pantalla ancha ese tope es lo que impide que la
   bajada invada el quiosco. */
.portada .bajada{
  max-width:min(44ch,46vw);
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  color:#C8D2CE;
  line-height:1.55;
}
.portada-pie{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;
  margin-top:clamp(2rem,5vh,3.25rem);
}

/* Selector de fechas de LobbyPMS. El widget es de mejora progresiva: espera
   este marcado (#input-start-date, #input-end-date, sus labels y .ldrs-button)
   y le engancha el calendario. Si su script no carga, esto se queda como un
   formulario estatico en vez de desaparecer. */
.reserva{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  border:1px solid var(--rule);
  background:var(--velo);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  max-width:34rem;
  margin-top:1.9rem;
}
.reserva .campo{
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;
  padding:.75rem 1.1rem .8rem;
  flex:1 1 9rem;min-width:0;
  border-right:1px solid var(--rule);
}
.reserva label{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.reserva input{
  font-family:var(--sans);font-size:.9375rem;font-weight:300;
  color:var(--ink);background:none;border:0;padding:0;border-radius:0;
  width:100%;min-width:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.reserva input::placeholder{color:var(--ink-2);opacity:1}
.reserva input:focus{outline:none}
.reserva .campo:focus-within{background:var(--velo-alto)}
.ldrs-button{
  font-family:var(--sans);font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:#F4F6F5;background:var(--carmin);
  border:0;border-radius:0;cursor:pointer;
  padding:1rem 1.5rem;
  transition:background-color .2s;
}
.ldrs-button:hover{background:#88231E}
/* Su CSS oculta el texto y saca un icono en pantallas estrechas. Aqui el
   texto manda siempre. */
.reserva .ldrs-button{
  background:var(--carmin);border-radius:0;
  padding:1rem 1.5rem;width:auto;flex:0 0 auto;
  box-shadow:none;
}
.reserva .ldrs-button:hover{background:#88231E;box-shadow:none}
.reserva .ldrs-button span{display:inline}
.reserva .ldrs-button svg{display:none}
/* El panel flotante de Lobby duplica el selector (position:bottom).
   Lo ocultamos: el rediseño vive en .reserva y Lobby sigue enganchando
   #input-start-date / #input-end-date. El calendario (.ldrs-calendar-*)
   no se toca. */
body > .ldrs-main-container{
  display:none !important;
}
/* Por si el panel se anclara alguna vez dentro de .reserva, vestimos
   ese arbol con el mismo lenguaje que .campo. */
.reserva .ldrs-main-container{
  position:static !important;width:100% !important;
  background:transparent !important;z-index:auto !important;
  inset:auto !important;
}
.reserva .ldrs-container{
  display:flex;flex-wrap:wrap;align-items:stretch;width:100%;
}
.reserva .ldrs-input-container{
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;
  padding:.75rem 1.1rem .8rem;
  flex:1 1 9rem;min-width:0;
  border-right:1px solid var(--rule);
}
.reserva .ldrs-input-container label{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.reserva .ldrs-input{
  font-family:var(--sans);font-size:.9375rem;font-weight:300 !important;
  color:var(--ink) !important;background:none !important;border:0 !important;
  padding:0 !important;border-radius:0 !important;height:auto !important;
  line-height:inherit !important;max-width:none !important;width:100% !important;
  min-width:0;cursor:pointer;box-shadow:none !important;
}
.reserva .ldrs-input-container:focus-within{background:var(--velo-alto)}
@media (max-width:30rem){
  .reserva .ldrs-input-container{border-right:0;border-bottom:1px solid var(--rule)}
}
@media (max-width:30rem){
  .reserva .campo{border-right:0;border-bottom:1px solid var(--rule)}
  .reserva .ldrs-button{width:100%;flex:1 1 100%}
}


/* Botón del sonido del lugar */
.sonido{
  display:inline-flex;align-items:center;gap:.7rem;
  background:none;border:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.65rem 1.1rem;cursor:pointer;
  transition:border-color .2s,background-color .2s;
}
.sonido:hover{border-color:var(--ink);background:rgba(232,236,235,.05)}
.onda{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.onda i{display:block;width:2px;background:var(--ink);height:35%;transition:height .2s}
.sonido:hover .onda i:nth-child(1){height:65%}
.sonido:hover .onda i:nth-child(2){height:100%}
.sonido:hover .onda i:nth-child(3){height:45%}
.sonido:hover .onda i:nth-child(4){height:80%}
.nota-sonido{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  color:var(--ink-2);
  max-width:26ch;line-height:1.5;
}

/* -- Manifiesto --------------------------------------------- */
.manifiesto{max-width:34ch}
.manifiesto h2{margin-bottom:1.75rem}

.dos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}

figure{margin:0}
figure img{display:block;width:100%;height:auto}
figcaption{
  margin-top:.9rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
}

/* -- Habitaciones ------------------------------------------- */
.habs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:0;
  border-top:1px solid var(--rule);
}
.hab{
  padding:2rem 1.6rem 1.9rem;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.85rem;
}
.hab:last-child{border-right:0}
.hab-foto{
  aspect-ratio:16/9;
  margin-bottom:.4rem;
  overflow:hidden;
  background:var(--rule);
}
.hab-foto img{
  display:block;width:100%;height:100%;
  object-fit:cover;
}
.hab h3{margin-bottom:.15rem}
/* :not(.cota) porque los unicos parrafos de la tarjeta son cotas y esta
   regla las agrandaba a 15 px: mono en mayuscula con tracking .16em, un 36 %
   por encima de cualquier otra cota del sitio. El flex:1 lo hereda .precio. */
.hab p:not(.cota){font-size:.9375rem;color:var(--ink-2);line-height:1.55;flex:1}
.hab .cota{flex:0 0 auto}
.precio{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:1.5rem;font-weight:400;
  letter-spacing:-.02em;
  margin-top:.5rem;
}
.precio small{display:block;font-size:.625rem;letter-spacing:.16em;color:var(--ink-2);margin-bottom:.3rem}
.hab .reservar{align-self:flex-start;margin-top:.9rem}

/* El CSS del apendice «03 El sistema» y el del aviso vivian aqui despues de
   que la seccion se retirara el 2026-08-21. Eran 30 lineas sin uso, dos de
   ellas con carmin fuera de Reservar, listas para volver de un copia y pega.
   Si algun dia se quiere ver pintado, su CSS va con contenido/apendice-sistema.html. */

/* Pie en columnas etiquetadas. Antes era una fila unica con cinco cosas
   distintas al mismo nivel: Registro Nacional de Turismo, coordenadas,
   correo, telefono y copyright,
   sin agrupar ni jerarquia. */
.pie{
  border-top:1px solid var(--rule);
  padding-block:clamp(2.75rem,6vh,4.25rem) 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
.pie-col{display:flex;flex-direction:column;gap:.85rem}
.pie-col > .cota:first-child{
  padding-bottom:.6rem;
  border-bottom:1px solid var(--rule);
}
.pie-marca{
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1.2;
}
.pie-lista{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
/* Los enlaces del pie se tocan con el dedo igual que los de la barra: el
   alto sale de la caja del enlace, no del gap de la lista. */
.pie-lista a{display:inline-flex;align-items:center;min-height:44px}
/* Declarada una sola vez. Estaba dos, con `transparent` en una y
   `var(--rule)` en la otra: quien editara la primera no veia ningun cambio. */
.pie a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:border-color .2s;
  font-size:.9375rem;
}
.pie a:hover{border-bottom-color:var(--ink)}
.pie-dato{font-size:.9375rem;color:var(--ink-2);line-height:1.5}
.pie-abajo{
  border-top:1px solid var(--rule);
  margin-top:clamp(2.5rem,5vh,3.5rem);
  padding-block:1.4rem clamp(2.5rem,5vh,3.5rem);
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center;
}
.pie-abajo .lang{margin-left:auto}
@media (max-width:34rem){
  .pie-abajo .lang{margin-left:0}
}
/* Ver en 4K. Un interruptor, no una llamada a la accion: sin carmin —ese
   color es solo de Reservar—, sin esquina redonda y del mismo tamano que la
   letra menuda del pie. Debajo, lo que cuesta pulsarlo, calculado pagina a
   pagina por el constructor. */
.calidad{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.conmutador{
  display:inline-flex;align-items:center;
  background:none;border:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .95rem;cursor:pointer;
  transition:border-color .2s,background-color .2s;
}
.conmutador:hover{border-color:var(--ink);background:rgba(232,236,235,.05)}
.conmutador[aria-pressed="true"]{
  border-color:var(--ink);
  background:rgba(232,236,235,.08);
}
.nota-calidad{color:var(--ink-2);margin:0}



@media (max-width:34rem){
  .hab{border-right:0}
}

/* ── Paginas interiores ──────────────────────────────────────
   La portada del inicio es un cartel; las paginas interiores abren con una
   cabecera de texto, mas sobria y sin foto a sangre. */
.cabecera-pagina{
  padding-block:clamp(6rem,15vh,9.5rem) clamp(1rem,3vh,2rem);
}
.cabecera-pagina .stack{gap:1.2rem}
.cabecera-pagina h1{
  font-size:clamp(2.4rem,1rem + 5vw,4.6rem);
  max-width:16ch;
}
.bajada-pagina{
  color:var(--ink-2);
  max-width:52ch;
  font-size:clamp(1.05rem,1rem + .4vw,1.2rem);
}

/* Cada habitacion a bloque completo, alternando el lado de la foto */
.habitacion{padding-block:clamp(3rem,7vh,5rem) 0}
.hab-bloque{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
  margin-top:clamp(1.5rem,4vh,2.5rem);
}
.hab-imagen{margin:0}
.hab-imagen img{display:block;width:100%;height:auto}
@media (min-width:56rem){
  .hab-bloque.invertido .hab-imagen{order:2}
}
.hab-datos{display:flex;flex-direction:column;gap:1.1rem}
.hab-datos p{color:var(--ink-2);max-width:44ch}
.hab-datos .reservar{align-self:flex-start;margin-top:.4rem}

.tarifas{display:flex;flex-direction:column;gap:0;margin-top:.4rem}
.tarifas .cota{padding-bottom:.5rem}
.tarifa{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding-block:.7rem;
  border-top:1px solid var(--rule);
}
.tarifa span{font-size:.9375rem;color:var(--ink-2)}
.tarifa b{
  font-family:var(--mono);font-weight:500;
  font-size:1.125rem;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

.cierre-reserva{padding-block:clamp(3.5rem,8vh,6rem)}
.cierre-reserva .stack{gap:1.1rem}

#antes-de-venir a{color:var(--ink);border-bottom:1px solid var(--rule)}
#antes-de-venir a:hover{border-bottom-color:var(--ink)}

/* La pagina en la que estas, marcada en la barra y en el pie */
.top nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.pie a[aria-current="page"]{border-bottom-color:var(--ink);color:var(--ink)}

/* ── Listas de actividades ───────────────────────────────────
   Veinticinco entradas necesitan ritmo, no tarjetas: una regla fina entre
   cada una y el nombre haciendo de ancla. */
.lista{display:flex;flex-direction:column}
.actividad{
  padding-block:1.1rem;
  border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.3rem;
}
.actividad:first-child{border-top:0;padding-top:0}
.actividad h3{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.2}
.actividad p{font-size:.9375rem;color:var(--ink-2);max-width:46ch}
.actividad .cota{font-size:.625rem}

.acciones-cierre{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  margin-top:1.4rem;
}

/* ── Tiras de fotografía ─────────────────────────────────────
   Una tira que sigue a un bloque de texto necesita aire: si no, la foto se
   pega al ultimo boton y parece que forma parte de el. Dos tiras seguidas,
   en cambio, quieren ir casi juntas. El selector de hermano adyacente lo
   resuelve solo, sin tener que acordarse en cada pagina. */
.tira{padding-block:clamp(3rem,7vh,5rem) 0}
.tira + .tira{padding-top:clamp(1.25rem,3vh,2rem)}

/* ── Documento legal ─────────────────────────────────────────
   El reglamento se lee cuando hace falta, no de corrido: cada clausula
   tiene que encontrarse de un vistazo. Columna estrecha y titulillos que
   funcionen de indice visual. */
.documento{padding-block:clamp(2rem,5vh,3rem) 0}
.documento .wrap{max-width:50rem}   /* deja la columna de texto en ~65 caracteres */
.clausula{
  padding-block:1.5rem;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:.5rem 2rem;
  align-items:start;
}
.clausula h2{
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  line-height:1.25;
}
.clausula p{color:var(--ink-2);font-size:.9375rem}
/* Sin carmin y sin color fijo: el realce lo hacen la barra lateral y la
   negrita, y los dos viajan con la rampa. El #F0BDB8 anterior dejaba «No hay
   salvavidas» en 1,19:1 sobre el tramo 4, que es donde cae esta clausula. */
.clausula.destacada{border-left:3px solid var(--ink);padding-left:1.2rem}
.clausula.destacada strong{color:var(--ink);font-weight:500}
@media (max-width:50rem){
  .clausula{grid-template-columns:1fr}
}

.cierre-legal{padding-block:clamp(2.5rem,6vh,4rem) clamp(3rem,8vh,5rem)}
.cierre-legal .wrap{max-width:50rem}
.cierre-legal p{
  /* --ink-2 y no --humo: el gris fijo se quedaba en 3,95:1 en el mejor tramo
     y en 1,34:1 en el peor. Este parrafo cierra el contrato de hospedaje. */
  color:var(--ink-2);font-size:.875rem;line-height:1.7;
  border-top:1px solid var(--rule);padding-top:1.4rem;
}
.cierre-legal a{color:var(--ink);border-bottom:1px solid var(--rule)}
.cierre-legal a:hover{border-bottom-color:var(--ink)}

/* ── Columna que acompaña ────────────────────────────────────
   En Experiencias el titular es corto y la lista de al lado es larguisima:
   doce actividades dejan la columna izquierda vacia durante toda la pantalla.
   Con una imagen y position:sticky, esa columna acompaña la lectura en vez
   de quedarse arriba. El desplazamiento tiene en cuenta la barra pegajosa. */
.columna-fija{display:flex;flex-direction:column;gap:1.2rem}
@media (min-width:56rem){
  .columna-fija{position:sticky;top:calc(var(--barra) + clamp(1.5rem,4vh,2.5rem))}
}
.foto-columna{margin:0;margin-top:.6rem;display:flex;flex-direction:column;gap:.7rem}
.foto-columna img{display:block;width:100%;height:auto}
/* La columna pegajosa no lleva bloque de movimiento reducido: sticky es
   posicion, no movimiento. */