/* ============================================================
   LOF Hostal — sistema visual compartido por las páginas
   interiores (/preguntas, /como-llegar). Mismos tokens que
   index.html; acá va solo lo que estas páginas usan.
   ============================================================ */
:root{
  --arena:#D8CFBE; --arena-alta:#E4DDD0; --lino:#F3EFE6;
  --tinta:#221F1B; --tinta-med:#4A443C; --tinta-soft:#6A6259;
  --marea:#1F4B47; --marea-alta:#2E6560;
  --greda:#B85C38; --greda-osc:#9C4A2A;
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --rule:1px solid color-mix(in oklab, var(--tinta) 18%, transparent);
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:"Jost", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--arena); color:var(--tinta);
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1rem,.55vw + .88rem,1.09rem); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.05; margin:0; text-wrap:balance; letter-spacing:-.012em; }
p{ margin:0; text-wrap:pretty; }
a{ color:var(--greda-osc); text-decoration:none; text-underline-offset:.28em; }
a:hover{ color:var(--tinta); text-decoration:underline; text-decoration-thickness:1px; }
a:focus-visible{ outline:2px solid var(--marea); outline-offset:3px; border-radius:2px; }
.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:.71rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-med); margin:0;
}

/* ---------- barra de marca ---------- */
.nav{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:1.15rem var(--gutter); border-bottom:var(--rule);
}
.brand{ display:inline-flex; align-items:flex-end; gap:.6rem; color:var(--tinta); text-decoration:none; margin-right:auto; }
.brand:hover{ text-decoration:none; color:var(--tinta); }
.brand__iso{ height:2.44rem; width:auto; flex:none; }
.brand__wm{ display:inline-flex; align-items:baseline; gap:.42em; }
.brand__mark{ font-weight:300; font-size:1.62rem; letter-spacing:.42em; line-height:1; }
.brand__sub{ font-weight:500; font-size:.694rem; letter-spacing:.28em; line-height:1; text-transform:none; }
.btn{
  display:inline-block; font-family:var(--sans); font-weight:500; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.78em 1.5em;
  border-radius:2px; transition:background .18s, color .18s, border-color .18s;
}
.btn--solid{ background:var(--marea); color:var(--lino); }
.btn--solid:hover{ background:var(--marea-alta); color:var(--lino); text-decoration:none; }

/* ---------- encabezado de página ---------- */
.cabecera{ padding:clamp(3rem,7vw,5.5rem) var(--gutter) clamp(2rem,4vw,3rem); display:flex; flex-direction:column; gap:1rem; }
.cabecera h1{ font-size:clamp(2.6rem,7vw,4.6rem); max-width:16ch; }
.cabecera .bajada{ font-size:1.12rem; color:var(--tinta-med); max-width:56ch; }
.miga{ font-size:.8rem; color:var(--tinta-med); }
.miga a{ color:var(--tinta-med); }

/* ---------- cuerpo ---------- */
main{ padding:0 var(--gutter) clamp(3.5rem,7vw,6rem); }
.bloque{ border-top:var(--rule); padding-top:clamp(2rem,4vw,3rem); margin-top:clamp(2rem,4vw,3rem); }
.bloque > h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:1.6rem; }

.qa{ display:flex; flex-direction:column; gap:1.5rem; max-width:62ch; }
.qa > div{ display:flex; flex-direction:column; gap:.45rem; }
.qa h3{ font-family:var(--sans); font-weight:500; font-size:1.06rem; line-height:1.4; letter-spacing:0; }
.qa p{ color:var(--tinta-med); font-size:.98rem; }
.qa p + p{ margin-top:.5rem; }

/* ---------- pasos ---------- */
.pasos{ display:flex; flex-direction:column; gap:1rem; counter-reset:paso; max-width:64ch; }
.paso{
  background:var(--lino); border-radius:3px; padding:1.2rem 1.4rem;
  display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.1rem;
}
.paso__n{
  grid-row:1 / span 2; font-family:var(--serif); font-size:2.1rem; line-height:.9;
  color:var(--marea); font-variant-numeric:tabular-nums;
}
.paso h3{ font-family:var(--sans); font-weight:500; font-size:1.04rem; letter-spacing:0; align-self:center; }
.paso__c{ display:flex; flex-direction:column; gap:.6rem; color:var(--tinta-med); font-size:.96rem; }
.opcion{ background:var(--arena-alta); border-radius:3px; padding:.7rem .9rem; font-size:.92rem; }
.opcion b{ color:var(--tinta); font-weight:500; }
@media (max-width:32rem){
  .paso{ grid-template-columns:1fr; }
  .paso__n{ grid-row:auto; font-size:1.6rem; }
}

.aviso{
  background:var(--lino); border-left:3px solid var(--greda-osc);
  padding:1rem 1.2rem; border-radius:0 3px 3px 0; max-width:62ch;
  font-size:.95rem; color:var(--tinta-med);
}
.aviso b{ color:var(--tinta); font-weight:500; }

/* ---------- pie ---------- */
.pie{ background:var(--tinta); color:var(--arena); padding:clamp(2.5rem,5vw,3.5rem) var(--gutter); }
.pie__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:2rem; }
.pie h4{ font-family:var(--sans); font-weight:500; font-size:.71rem; letter-spacing:.22em; text-transform:uppercase; color:var(--arena); opacity:.62; margin:0 0 .7rem; }
.pie p, .pie a{ color:var(--arena); font-size:.95rem; }
.pie a{ display:block; }
.pie a:hover{ color:var(--lino); }
.pie__sign{ margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid color-mix(in oklab, var(--arena) 24%, transparent); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.82rem; opacity:.72; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; scroll-behavior:auto!important; } }

/* ---------- fichas de habitación y espacios ----------
   Las diez tipologías viven en UNA página, no en diez. El catálogo
   repite un párrafo idéntico de 55 palabras en ocho de las diez
   («Incluye ropa de cama y WiFi, y acceso a todos los espacios
   comunes…»): en páginas separadas eso sería la mayor parte de cada
   una y Google las leería como duplicados. Acá ese párrafo se dice
   una sola vez arriba y cada ficha se queda con lo que la distingue. */
.fichas{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:1.6rem;
  /* align-items:start y no el stretch por defecto: las descripciones salen del
     catálogo y son muy desparejas —la Twin con baño externo dobla en largo a la
     Individual Básica—, así que estirar todas al alto de la más larga le deja a
     la vecina un bloque de lino vacío abajo. Las fotos igual quedan alineadas
     porque van arriba de la ficha. */
  align-items:start;
}
.ficha{
  background:var(--lino); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column; scroll-margin-top:1.5rem;
}
.ficha__img{ aspect-ratio:4/3; background:var(--arena-alta); }
.ficha__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ficha__c{ padding:1.15rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.ficha h3{ font-family:var(--sans); font-weight:500; font-size:1.08rem; letter-spacing:0; line-height:1.3; }
.ficha__meta{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-soft); }
.ficha p{ color:var(--tinta-med); font-size:.95rem; }
.ficha ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.ficha li{
  font-size:.78rem; background:var(--arena-alta); color:var(--tinta-med);
  padding:.24em .68em; border-radius:2px;
}

/* ---------- galería de espacios ---------- */
.galeria{
  /* auto-FIT y no auto-fill: con auto-fill el bloque de dos fotos de /terraza/
     creaba seis columnas y dejaba cuatro vacías, con las dos fotos apretadas a
     la izquierda y medio ancho de arena al lado. auto-fit colapsa las columnas
     sobrantes y las dos se reparten la fila. Donde ya hay seis fotos el
     resultado es idéntico. */
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem; margin-top:1.4rem;
}
.galeria figure{ margin:0; display:flex; flex-direction:column; gap:.5rem; }
.galeria img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:3px; display:block; }
.galeria figcaption{ font-size:.88rem; color:var(--tinta-med); }

/* ---------- índice de anclas ---------- */
.indice{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.8rem; }
.indice a{
  font-size:.82rem; background:var(--lino); color:var(--tinta-med);
  padding:.36em .8em; border-radius:2px;
}
.indice a:hover{ background:var(--marea); color:var(--lino); text-decoration:none; }

/* ---------------------------------------------------------------------------
   Selector de idioma
   Un <select> pelado: es el control que el teléfono ya sabe abrir a pantalla
   completa, y no hay que mantener un menú propio. Vive acá y no solo en la
   portada porque las páginas secundarias también lo llevan.
   --------------------------------------------------------------------------- */
.lang{
  font-family:var(--sans); font-size:.76rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tinta);
  background:transparent; border:1px solid color-mix(in oklab, var(--tinta) 30%, transparent);
  border-radius:2px; padding:.5em 1.7em .5em .7em; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23221F1B' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6em center; background-size:.6em;
}
.lang:hover{ border-color:var(--greda); }
.lang:focus-visible{ outline:2px solid var(--greda); outline-offset:2px; }

/* En pantalla angosta la marca (178 px) + el selector + el botón suman más que
   el ancho del teléfono, así que la barra se parte en dos filas y se come 143 px
   antes del contenido. Se esconde el botón, igual que hace la portada bajo
   520 px; el enlace para reservar sigue estando en el cuerpo y en el pie.

   El :has() lo limita a las barras que TIENEN selector —hoy solo /como-llegar/—
   para no tocarles el comportamiento a las páginas que siguen en un idioma. Si
   un navegador viejo no lo soporta, vuelve al corte en dos filas: se ve peor,
   no se rompe. */
@media (max-width:520px){
  .nav:has(.lang) .btn{ display:none; }
}