/* Layout: full-bleed media carousel over a flush-field page; colour blocks butt edge to edge,
   type is oversized and uppercase, one ladrillo accent per band. Tokens are The Cut design system. */
:root {
  --hueso: #eae1d7;
  --verde-montana: #42380c;
  --menta: #a8e5cf;
  --ladrillo: #e92e0f;
  --tierra: #2d150c;

  --surface: var(--hueso);
  --surface-invert: var(--tierra);
  --surface-deep: var(--verde-montana);
  --surface-accent: var(--ladrillo);
  --surface-cool: var(--menta);
  --ink: var(--tierra);
  --ink-muted: rgba(45, 21, 12, 0.66);
  --ink-invert: var(--hueso);
  --ink-accent: var(--ladrillo);
  --ink-on-accent: var(--tierra);
  --ink-on-deep: var(--hueso);
  --ink-on-cool: var(--tierra);
  --border: rgba(45, 21, 12, 0.25);
  --border-strong: var(--tierra);
  --focus: var(--ladrillo);
  --scrim-top: rgba(45, 21, 12, 0.15);
  --scrim-bottom: rgba(45, 21, 12, 0.82);

  --font-display: "Outfit", "Arial Black", system-ui, sans-serif;
  --font-text: "Hind", system-ui, sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-none: 0; --radius-sm: 2px; --radius-lg: 20px; --radius-pill: 999px;

  --measure: 62ch;
  --gutter: clamp(16px, 5vw, 72px);

  /* Fondo del menú una vez pasa el carrusel. */
  --header-solid: #eae0d7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --header-solid: var(--tierra);
    --surface: var(--tierra);
    --surface-invert: var(--hueso);
    --ink: var(--hueso);
    --ink-muted: rgba(234, 225, 215, 0.7);
    --ink-invert: var(--tierra);
    --border: rgba(234, 225, 215, 0.25);
    --border-strong: var(--hueso);
    --focus: var(--menta);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --header-solid: var(--tierra);
  --surface: var(--tierra);
  --surface-invert: var(--hueso);
  --ink: var(--hueso);
  --ink-muted: rgba(234, 225, 215, 0.7);
  --ink-invert: var(--tierra);
  --border: rgba(234, 225, 215, 0.25);
  --border-strong: var(--hueso);
  --focus: var(--menta);
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

a { color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 2px solid transparent;
  border-radius: var(--radius-none);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: var(--surface-accent);
  color: var(--ink-on-accent);
  transition: transform 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-color: var(--border-strong); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--outline:hover { background: var(--surface-invert); color: var(--ink-invert); }
.btn--light { background: var(--hueso); color: var(--tierra); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 15px; }

/* ---------- Header ---------------------------------------------------- */
/* Fijo siempre. Sobre el carrusel va transparente con un velo degradado para que
   el menú se lea sobre la foto; al pasar el hero toma fondo sólido. */
.siteheader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* mitad · logo · mitad */
  align-items: center;
  column-gap: var(--space-6);
  padding: var(--space-3) var(--gutter);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease;
}

/* El logo ocupa su propia columna: nunca puede solaparse con el menú, y las dos
   columnas laterales (1fr cada una) lo dejan en el eje. */
.siteheader > .logo { grid-column: 2; grid-row: 1; justify-self: center; }

.header__side {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  justify-content: space-between;
  min-width: 0;
}
/* Los dos bloques se apoyan contra el logo, no contra los bordes: el de la
   izquierda termina en el eje y el de la derecha empieza en él. */
.header__side--left { grid-column: 1; grid-row: 1; justify-content: flex-end; }
.header__side--right { grid-column: 3; grid-row: 1; justify-content: space-between; }

/* ---------- Botón hamburguesa (solo móvil) ----------------------------- */
.navtoggle {
  display: none;
  appearance: none;
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  place-items: center;
}
.navtoggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 220ms ease, opacity 160ms ease;
}
.navtoggle span + span { margin-top: 5px; }
.siteheader--open .navtoggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.siteheader--open .navtoggle span:nth-child(2) { opacity: 0; }
.siteheader--open .navtoggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* Panel abierto: sólido siempre, aunque esté sobre el carrusel. */
.siteheader--open {
  background: var(--header-solid);
  color: var(--ink);
  border-bottom-color: var(--border);
}
.siteheader--open::before { opacity: 0; }
.siteheader--open .langswitch { border-color: var(--border-strong); }
.siteheader--open .langswitch button,
.siteheader--open .langswitch a { color: var(--ink); }
.siteheader--open .langswitch button[aria-pressed="true"],
.siteheader--open .langswitch a[aria-current] {
  background: var(--border-strong);
  color: var(--surface);
}

.siteheader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(45, 21, 12, 0.55), rgba(45, 21, 12, 0));
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}

/* Sobre el carrusel. El logo se queda en ladrillo en los dos estados;
   solo cambia el texto del menú, que es lo que necesita el velo para leerse. */
.siteheader--over { color: var(--hueso); }
.siteheader--over::before { opacity: 1; }
.siteheader--over .mainnav a:hover { border-bottom-color: var(--menta); }
.siteheader--over .langswitch { border-color: rgba(234, 225, 215, 0.7); }
.siteheader--over .langswitch button,
.siteheader--over .langswitch a { color: var(--hueso); }
.siteheader--over .langswitch button[aria-pressed="true"],
.siteheader--over .langswitch a[aria-current] {
  background: var(--hueso);
  color: var(--tierra);
}

/* Ya fuera del hero: crema sólido. */
.siteheader--solid {
  background: var(--header-solid);
  border-bottom-color: var(--border);
}

/* Páginas sin carrusel: el contenido arranca bajo el header fijo. */
.no-hero main { padding-top: var(--header-h, 84px); }

/* Que las anclas no queden escondidas bajo el header. */
html { scroll-padding-top: calc(var(--header-h, 84px) + var(--space-2)); }

.logo {
  display: block;
  width: 86px;
  height: 70px;
  background-color: var(--ink-accent);
  /* El mismo archivo que usa el header del sitio actual (86×70).
     Ojo: en CSS, url() se resuelve contra la hoja de estilos (assets/), no contra la
     página. Por eso sube un nivel — y por eso funciona igual en /habitaciones/suite/. */
  -webkit-mask: url("../media/logo-the-cut.svg") no-repeat center / contain;
  mask: url("../media/logo-the-cut.svg") no-repeat center / contain;
  flex: none;
}
.logo--sm { width: 64px; height: 52px; }
/* Sobre el ladrillo del footer, el logo va en tierra — así lo pone el manual. */
.logo--footer { width: 150px; height: 122px; background-color: var(--tierra); }

.mainnav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.mainnav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { border-bottom-color: var(--ink-accent); }

/* El bloque móvil va DESPUÉS de las reglas base: con la misma
   especificidad, la última gana. Si sube, el menú reaparece en móvil. */
@media (max-width: 880px) {
  /* Barra: hamburguesa · logo · idioma. El resto baja al panel.
     El selector de idioma se queda a la vista: el huésped extranjero no
     debería tener que abrir un menú para encontrar el inglés. */
  .siteheader { display: flex; flex-wrap: wrap; gap: var(--space-3); row-gap: 0; }
  /* display:contents disuelve los contenedores: sus hijos pasan a ser ítems
     del header y se reordenan solos, sin duplicar marcado. */
  .header__side { display: contents; }
  .navtoggle { display: grid; order: 1; }
  .siteheader > .logo { order: 2; margin-inline: auto; }
  .langswitch { order: 3; }

  .mainnav {
    order: 4;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-inline-start: 0;
  }
  .mainnav--left { padding-top: var(--space-3); }
  .mainnav a {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    letter-spacing: 0.1em;
  }
  .siteheader--open .mainnav { display: flex; }
}

.langswitch {
  display: inline-flex;
  border: 2px solid var(--border-strong);
  flex: none;
}
/* El selector de idioma son <a> a direcciones reales; quedan las reglas de
   <button> por si vuelve a usarse en alguna página suelta. */
.langswitch button,
.langswitch a {
  appearance: none;
  text-decoration: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  cursor: pointer;
}
.langswitch button[aria-pressed="true"], .langswitch a[aria-current] {
  background: var(--border-strong);
  color: var(--surface);
}

/* ---------- Hero carousel --------------------------------------------- */
.hero {
  position: relative;
  background: var(--tierra);
  color: var(--hueso);
  isolation: isolate;
}

.slides {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 460px;
  max-height: 82vh;
  overflow: hidden;
}
@media (max-width: 760px) {
  .slides { aspect-ratio: 3 / 4; min-height: 0; max-height: none; }
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.slide[data-active="true"] { opacity: 1; pointer-events: auto; }

.slide__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Se quitó el zoom lento (scale 1.06 → 1). Ampliaba la foto un 6% por encima
   de su tamaño real durante todo el rato que la slide estaba visible, y en
   pantallas grandes eso se veía como pixelación. El carrusel ya tiene
   movimiento con el fundido entre slides. */

/* La slide de campaña trae su propio arte y su propia tipografía: no lleva
   degradado ni texto encima. Va en COVER, y funciona porque el ARCHIVO está
   ensanchado a 2.26 de proporción — más que cualquier marco posible, que va
   de 1.78 a 2.17 según el alto de la ventana. Con eso, cover siempre escala
   por el alto: se ve el arte completo de arriba abajo y lo único que se
   recorta es el margen replicado de los lados. Con el archivo original (1.83)
   cover cortaba la banda roja de abajo. */
.slide--poster { background: var(--tierra); }
.slide--poster .slide__media { object-fit: cover; object-position: center; }
.slide--poster .slide__scrim { display: none; }

.slide__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.slide__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--scrim-top) 0%, rgba(45,21,12,0.1) 38%, var(--scrim-bottom) 100%);
}

/* El texto va abajo de la imagen, apoyado sobre los controles del carrusel. */
.slide__caption {
  position: absolute;
  inset-inline: var(--gutter);
  bottom: clamp(84px, 10vh, 120px);
  /* Ancho generoso: con 17ch el titular se partía en cuatro líneas y el bloque
     crecía hacia arriba. Al extenderse en horizontal cae dos líneas y se queda abajo. */
  /* NADA de ch aquí: ch se mide contra la fuente de ESTA caja (16px), no
     contra la del titular (hasta 92px). Con 30ch la caja quedaba en 322px
     mientras el titular necesitaba 729px — se salía 364px y por eso se veía
     cortado. En píxeles y porcentaje el cálculo sí corresponde. */
  max-width: min(900px, 90%);
}
.slide__kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--menta);
  margin: 0 0 var(--space-3);
}
.slide__title {
  margin: 0;
  /* Estas cuatro líneas venían de la regla h1,h2,h3. El titular del banner era
     un <h1> por diapositiva; se pasó a <p> porque cinco <h1> en un carrusel
     son cinco titulares para un buscador, y al dejar de ser <h1> perdió la
     tipografía. La tipografía pertenece a la clase, no al nombre de la etiqueta. */
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
  /* El mínimo bajó de 38 a 35px: en teléfonos de 360px "A MEETING PLACE"
     —que va con espacios duros y no se parte— no cabía a 38px. */
  font-size: clamp(35px, 7.4vw, 92px);
  line-height: 0.88;
  letter-spacing: -0.015em;
  color: var(--hueso);
}

.hero__controls {
  position: absolute;
  inset-inline: var(--gutter);
  bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* En móvil la barra de reserva sí ocupa el borde inferior, así que ahí sube. */
@media (max-width: 760px) {
  .slide__caption { bottom: clamp(180px, 26vh, 240px); }
  .hero__controls { bottom: 112px; }
}

.dots { display: flex; gap: var(--space-2); margin-inline-end: auto; }
.dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 46px;
  height: 4px;
  background: rgba(234, 225, 215, 0.35);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.dot[aria-current="true"] { background: rgba(234, 225, 215, 0.35); }
.dot__fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--ladrillo);
}
.dot[aria-current="true"] .dot__fill { background: var(--menta); }

.ctrl {
  appearance: none;
  width: 44px;
  height: 44px;
  flex: none;
  border: 2px solid rgba(234, 225, 215, 0.5);
  background: transparent;
  color: var(--hueso);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 120ms ease, color 120ms ease;
}
.ctrl:hover { background: var(--hueso); color: var(--tierra); }
.ctrl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }

/* ---------- Mirai theme ------------------------------------------------
   Mirai Core renders in the light DOM and reads ~291 CSS custom properties,
   so it can be branded from here. Typography and corners only: the colour
   variables are left at Mirai's values except the accent, which the current
   site already sets to Ladrillo. Changing colours blind risks contrast. */
:root {
  --mirai-ui-font: "Hind", system-ui, sans-serif;
  --mirai-ui-font-medium: "Hind", system-ui, sans-serif;
  --mirai-ui-font-bold: "Hind", system-ui, sans-serif;
  --mirai-ui-input-font: "Hind", system-ui, sans-serif;
  --mirai-chat-text-font: "Hind", system-ui, sans-serif;
  --mirai-ui-text-brand-font: "Outfit", "Arial Black", sans-serif;
  --mirai-ui-text-brand-font-medium: "Outfit", "Arial Black", sans-serif;
  --mirai-ui-text-brand-font-bold: "Outfit", "Arial Black", sans-serif;
  --mirai-finder-button-font-family: "Outfit", "Arial Black", sans-serif;

  /* The brand is square-cornered; Mirai ships 4px. */
  --mirai-ui-border-radius: 0px;
  --mirai-field-border-radius: 0px;
  --mirai-finder-button-border-radius: 0px;
  --mirai-ui-tooltip-border-radius: 0px;
  --mirai-ui-notification-border-radius: 0px;
  --mirai-ui-table-border-radius: 0px;

  --mirai-header-accent: #e92e0f;
  --mirai-ui-switch-background-checked: #e92e0f;
  --mirai-ui-menu-option-selected-background: #e92e0f;
}

/* ---------- Booking bar (Mirai) ----------------------------------------
   Flotante y centrada abajo, igual que el fixed finder de producción:
   position fixed, bottom 50px, max-width fit-content con márgenes automáticos,
   fondo transparente — la tarjeta blanca la pone el propio Finder. */
/* El centrado va en DOS niveles y los dos hacen falta:
   1. La sección ocupa todo el ancho y centra con flex. Antes se le daba
      width:max-content + margin auto; eso centra la CAJA, no la tarjeta.
   2. justify-items:center centra la tarjeta del Finder dentro de la caja.
      Sin esto, cuando la caja queda más ancha que la tarjeta — pasa cuando
      Mirai reacomoda su layout y deja de llenarla — la tarjeta se pega a la
      izquierda y aparece un hueco a la derecha. Medido: caja de 1100px con
      tarjeta de 708px → la tarjeta se iba a x=528 en vez de 715. */
.booking {
  position: fixed;
  inset-inline: 0;
  bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  justify-content: center;
  padding: 10px var(--space-4);
  pointer-events: none;
}
.booking__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  pointer-events: auto;
  max-width: 100%;
  min-width: 0;
}
.booking__label { display: none; }

.booking__fallback {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--surface-invert);
  color: var(--ink-invert);
  padding: var(--space-3) var(--space-4);
}
.booking__fallback p { margin: 0; font-size: 14px; max-width: 40ch; }

/* Que el pie no quede tapado por la barra flotante. */
.sitefooter { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 760px) {
  .booking {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 6px var(--space-2);
  }
  .sitefooter { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
}

@media print { .booking { display: none; } }

/* ---------- Marquee ---------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--surface-accent);
  color: var(--ink-on-accent);
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  animation: scroll 26s linear infinite;
}
.marquee__dot { font-size: 0.38em; transform: translateY(-0.28em); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sections --------------------------------------------------- */
.section { padding: clamp(56px, 9vw, 120px) var(--gutter); }
.section--deep { background: var(--surface-deep); color: var(--ink-on-deep); }
.section--deep .eyebrow { color: var(--menta); }
.section--invert { background: var(--surface-invert); color: var(--ink-invert); }
.section--invert .eyebrow { color: var(--menta); }

.section__head { display: grid; gap: var(--space-4); max-width: var(--measure); }
.section__title { font-size: clamp(34px, 5.6vw, 68px); line-height: 0.9; letter-spacing: -0.01em; }
.section__lead { font-size: 20px; line-height: 1.35; font-weight: 600; margin: 0; }

/* La marca de las elipses del sitio anterior (icono-the-cut.svg): va como
   ::before para no tener que meterla a mano en cada plantilla. Se usa encima
   del titular de las páginas internas y de la sección marcada en el home.
   OJO: url() resuelve contra la hoja de estilos (assets/), no contra la página. */
.room-hero::before,
.section--mark .section__head::before {
  content: ""; display: block;
  width: clamp(72px, 7vw, 100px); aspect-ratio: 100 / 51;
  background: url("../media/icono-the-cut.svg") no-repeat left center / contain;
  margin-bottom: var(--space-4);
}
.section--mark .section__head { justify-items: start; }

/* amenities */
/* Son 10 servicios: solo 2 y 5 columnas los reparten en filas completas.
   Cualquier otro número deja una fila huérfana al final. */
.amenities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-12);
  border-top: 1px solid var(--border);
}
@media (min-width: 880px) {
  .amenities { grid-template-columns: repeat(5, 1fr); }
}

.amenity {
  display: grid;
  align-content: start;          /* sin esto las filas se estiran y los nombres se desalinean */
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4) var(--space-6) 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
/* Los íconos son los SVG del sitio anterior, tal cual: vienen a 100x100 con
   su propio trazo rojo, así que aquí solo se les da tamaño. Tamaño de
   referencia en la página actual: 100px. */
.amenity__icon { width: clamp(64px, 6.5vw, 88px); height: auto; display: block; }
.amenity__name { font-size: 18px; font-weight: 600; line-height: 1.3; }
.amenity__soon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  padding: 2px 6px;
}

/* rooms */
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin-top: var(--space-12);
  background: var(--border);
  border: 1px solid var(--border);
}
/* color explícito: la tarjeta es clara pero vive dentro de .section--invert,
   que es oscura. Sin esta línea el texto hereda el hueso de la sección y
   queda hueso sobre hueso — el nombre y el "Ver habitación" desaparecían y
   del enlace solo se veía el subrayado rojo. */
.room {
  background: var(--surface);
  color: var(--ink);
  display: grid;
  min-width: 0;
}
/* La tarjeta ocupa todo el alto de su fila y el cuerpo reparte: la reseña se
   estira y el enlace queda pegado abajo. Así el "Ver habitación" se alinea
   entre las cuatro aunque un texto sea más largo. */
.room > a { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.room__fig {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  background: var(--surface-deep);
  overflow: hidden;
}
.room__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2,.7,.3,1);
}
.room:hover .room__fig img { transform: scale(1.04); }

/* El rótulo rojo sobre la foto lleva el NOMBRE de la habitación, no los
   metros: es el título de la tarjeta. La superficie se fue a la línea de
   especificaciones, junto a huéspedes y cama. */
.room__name {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  margin: 0;
  background: var(--surface-accent);
  color: var(--ink-on-accent);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: var(--space-2) var(--space-3);
  /* z-index obligatorio: en hover la foto recibe un transform, y eso la
     convierte en contexto de apilamiento que pinta como si fuera z-index 0.
     Como el <img> va después del <h3> en el marcado, la foto tapaba el
     rótulo y el nombre desaparecía al pasar el mouse. */
  z-index: 1;
  transition: background-color 220ms, color 220ms;
}
/* En hover el rótulo solo cambia de fondo: de rojo a tierra. */
.room:hover .room__name,
.room:focus-within .room__name {
  background: var(--surface-invert);
  color: var(--ink-invert);
}

.room__body {
  padding: var(--space-6);
  display: grid;
  grid-template-rows: auto 1fr auto;   /* specs · reseña · enlace abajo */
  gap: var(--space-3);
}
.room__spec {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.room__spec span + span::before { content: "·"; margin-inline-end: var(--space-2); }
.room__teaser { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* experiences */
.exps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.exp { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.exp__fig {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  overflow: hidden;
  background: rgba(234, 225, 215, 0.08);
}
.exp__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp__name { font-size: 24px; line-height: 1; }
.exp p { margin: 0; font-size: 15px; line-height: 1.6; }

/* mission / split */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-12);
  align-items: center;
}
.split__fig { position: relative; aspect-ratio: 5 / 4; max-width: 100%; overflow: hidden; background: var(--surface-deep); }
.split__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__body { display: grid; gap: var(--space-4); min-width: 0; }

/* location */
.loc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); margin-top: var(--space-12); }
.loc__item { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.loc__item h3 { font-size: 18px; letter-spacing: 0.04em; }
.loc__item p { margin: 0; font-size: 15px; color: var(--ink-muted); }
.section--deep .loc__item p { color: rgba(234, 225, 215, 0.78); }

/* ---------- Reseñas de Google -----------------------------------------
   Marcado propio, generado por render-reviews.py a partir del volcado de
   Trustindex. Sin JS de terceros: los datos son reales, el estilo es nuestro. */
.reviews__slot { margin-top: var(--space-12); }

html[lang="en"] .rev-es, html:not([lang="en"]) .rev-en { display: none; }

.rev-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-muted);
  flex-wrap: wrap;
  text-decoration: none;
}
.rev-summary:hover .rev-es, .rev-summary:hover .rev-en { text-decoration: underline; }

/* Nota agregada: capa dorada recortada al porcentaje real (4.6 → 92%). */
.rev-stars--agg { position: relative; display: inline-block; line-height: 0; }
.rev-stars--agg .rev-stars__base .rev-star { fill: var(--border); }
.rev-stars__fill {
  position: absolute;
  inset: 0;
  width: var(--pct, 100%);
  overflow: hidden;
  white-space: nowrap;
}
.rev-summary strong {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rev-stars { display: inline-flex; gap: 2px; }
.rev-star { width: 16px; height: 16px; fill: #f5a623; flex: none; }

.rev-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.rev-nav { display: flex; gap: var(--space-2); }
.rev-nav .ctrl { border-color: var(--border-strong); color: var(--ink); }
.rev-nav .ctrl:hover { background: var(--border-strong); color: var(--surface); }
.rev-nav .ctrl[disabled] { opacity: 0.35; pointer-events: none; }

/* Carrusel: desplazamiento horizontal con anclaje, como el widget original. */
.rev-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--space-2);
  scrollbar-width: none;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.rev-card {
  flex: 0 0 clamp(250px, 78vw, 330px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

/* Texto recortado a cuatro líneas con "Leer más", como el widget original. */
.rev-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-card.is-open .rev-text { -webkit-line-clamp: unset; overflow: visible; }
.rev-more {
  appearance: none;
  justify-self: start;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink-accent);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid var(--ink-accent);
}
.rev-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rev-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--surface-accent);
  color: var(--ink-on-accent);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
}
.rev-who { display: grid; gap: 1px; min-width: 0; }
.rev-name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.rev-meta { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em; }
.rev-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.reviews__fallback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  background: var(--surface-cool);
  color: var(--ink-on-cool);
  padding: var(--space-8);
}
.reviews__fallback p { margin: 0; font-size: 18px; font-weight: 600; max-width: 42ch; }
.reviews__fallback .btn { background: var(--tierra); color: var(--hueso); }

/* ---------- Footer (misma estructura que el sitio actual) -------------- */
/* Fondo ladrillo, como el footer de producción. Blanco sobre #e92e0f da 4.32:1:
   por debajo del 4.5 que pide la norma para texto normal, así que el cuerpo va
   a 16px y la letra pequeña a 14px, donde el umbral baja a 3:1. */
.sitefooter {
  background: var(--ladrillo);
  color: #fff;
  padding: clamp(48px, 7vw, 96px) var(--gutter) var(--space-12);
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--space-12);
}
.foot__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-12) var(--space-24);
  align-items: start;
}
@media (max-width: 760px) {
  .foot__top { grid-template-columns: 1fr; gap: var(--space-8); }
}

.contact { display: grid; gap: var(--space-6); min-width: 0; }
.contact__row {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}
.contact__row svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
}
.contact__value {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
  text-decoration: none;
  color: #fff;
}
a.contact__value:hover { text-decoration: underline; }

.legal {
  font-size: 14px;
  line-height: 1.65;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.legal p { margin: 0; max-width: 92ch; }
.legal a {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  justify-self: start;
}

/* ---------- Botón flotante de WhatsApp --------------------------------- */
.wafloat {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(45, 21, 12, 0.3);
  transition: transform 160ms ease;
}
.wafloat:hover { transform: scale(1.06); }
.wafloat svg { width: 32px; height: 32px; fill: #fff; }

/* En móvil la barra de reserva ocupa el borde inferior: el botón sube. */
@media (max-width: 760px) {
  .wafloat { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =======================================================================
   Room pages — index and the four landings
   ======================================================================= */
.page-head { padding: clamp(40px, 6vw, 80px) var(--gutter) 0; }
.crumbs {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 var(--space-6);
}
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--border); }
.crumbs a:hover { border-bottom-color: var(--ink-accent); }
.crumbs span[aria-current] { color: var(--ink); }

.room-hero { display: grid; gap: var(--space-6); max-width: var(--measure); }
.room-hero h1 { font-size: clamp(48px, 8vw, 104px); line-height: 0.86; letter-spacing: -0.015em; }
.room-hero .lead { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 600; }

.specbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: var(--space-12) 0 0;
}
.specbar div { background: var(--surface); padding: var(--space-4) var(--space-6); display: grid; gap: var(--space-1); min-width: 0; }
.specbar dt { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.specbar dd {
  margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 900;
  line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-2); padding: var(--space-12) var(--gutter) 0; }
.gallery button {
  appearance: none; border: 0; padding: 0; margin: 0; background: var(--surface-deep);
  cursor: zoom-in; overflow: hidden; position: relative; aspect-ratio: 3 / 2; min-width: 0;
}
.gallery button:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(.2,.7,.3,1); }
.gallery button:hover img { transform: scale(1.03); }
@media (max-width: 640px) { .gallery button:first-child { aspect-ratio: 4 / 3; } }

/* Cool Guide: láminas de imagen con texto adentro. A diferencia de .gallery NO
   se recortan (object-fit: cover comería las esquinas del diseño) ni se fuerza
   aspect-ratio: cada lámina se muestra entera y el alto lo pone la imagen.
   Lleva id="gallery" para heredar el lightbox de room.js — sin él la letra
   pequeña de las láminas no se lee en pantalla. */
.guide {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-4); padding: var(--space-12) 0 0;
}
.guide button {
  appearance: none; border: 0; padding: 0; margin: 0; background: var(--surface-deep);
  cursor: zoom-in; display: block; overflow: hidden; min-width: 0;
}
.guide img {
  width: 100%; height: auto; display: block;
  transition: transform 600ms cubic-bezier(.2,.7,.3,1);
}
.guide button:hover img { transform: scale(1.02); }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- Cool Guide en texto */
/* Las láminas siguen abajo, pero el contenido vive aquí como HTML: es lo
   único que Google indexa y lo único que lee un lector de pantalla. */
.section--cool { background: var(--surface-cool); color: var(--ink-on-cool); }
.section--cool .eyebrow { color: var(--ladrillo); }

.guide-index {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.guide-index a {
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; transition: background 180ms, color 180ms, border-color 180ms;
}
.guide-index a:hover { background: var(--surface-accent); border-color: var(--surface-accent); color: #fff; }

/* Cada lámina viaja con su texto. Cuatro láminas cubren dos sitios: en esas,
   .gpair__body apila los dos bloques. Las filas alternan lado (--flip). */
.gpairs { display: grid; gap: var(--space-16); margin-top: var(--space-16); }
.gpair {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-8) var(--space-12); align-items: start;
}
/* El hijo a invertir puede ser .gpair__fig (Cool Guide) o .gpair__figs
   (Experiencias, que mete varias fotos en un contenedor): se invierte el
   primer hijo, sea cual sea. */
.gpair--flip > :first-child { order: 2; }
.gpair__fig {
  appearance: none; border: 0; padding: 0; margin: 0; background: var(--surface-deep);
  cursor: zoom-in; display: block; overflow: hidden; min-width: 0;
  position: sticky; top: calc(var(--header-h, 72px) + 24px);
}
.gpair__fig img { width: 100%; height: auto; display: block; transition: transform 600ms cubic-bezier(.2,.7,.3,1); }
.gpair__fig:hover img { transform: scale(1.02); }
.gpair__body { display: grid; gap: var(--space-12); min-width: 0; align-self: center; }
/* Un bloque puede traer más de una foto (Gastronomía trae dos, de formatos
   distintos): se recortan a una proporción común para que la fila no cojee. */
.gpair__figs { display: grid; gap: var(--space-2); min-width: 0; }
/* Las fotos sueltas venían de las láminas en formatos muy distintos: una
   vertical se estiraba a todo el ancho de la columna y quedaba del doble de
   alto que una fila de dos fotos (Café Dragón llegaba a 850px contra los
   ~390px de las demás). Se limita el ALTO, no el ancho: así todas caen en la
   misma banda y ninguna se recorta — solo cambia su escala. */
.gpair__figs--duo { grid-template-columns: 1fr 1fr; }
.gpair__figs--duo .gpair__fig { aspect-ratio: 4 / 5; position: static; }
.gpair__figs--duo .gpair__fig img { height: 100%; object-fit: cover; }

/* Láminas sueltas a todo el ancho: portada, índice, separadores y cierre.
   Anulan el sticky de .gpair__fig — aquí no viven en una fila de dos. */
.gband { width: 100%; position: static; }
.gband img { width: 100%; height: auto; display: block; }

/* Réplica final: las veinte páginas apiladas SIN separación — en la guía
   original no hay aire entre ellas y se leen como un solo documento continuo.
   gap:0 no basta: display:block en el botón deja el hueco de línea base del
   img, así que el grid va sin gap y cada lámina es su propia fila. */
.guide-orig { display: grid; gap: 0; margin-top: var(--space-12); }
.guide-orig .gband { background: var(--surface-deep); overflow: hidden; }
.guide-orig .gband img { vertical-align: top; }

/* ------------------------------------------------------------- Ubicación */
.locshot { margin: 0; }
.locshot img { width: 100%; height: clamp(300px, 52vh, 560px); object-fit: cover; display: block; }
.loc__grid--stack { display: grid; gap: var(--space-6); align-content: start; }
/* El iframe de Google no respeta height en %, así que la proporción la pone
   el contenedor y el iframe se estira por inset. */
.mapwrap {
  position: relative; aspect-ratio: 16 / 9; margin-top: var(--space-12);
  background: var(--surface-deep); overflow: hidden;
}
.mapwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .mapwrap { aspect-ratio: 4 / 5; } }
@media (max-width: 860px) {
  .gpair { grid-template-columns: 1fr; gap: var(--space-6); }
  .gpair--flip > :first-child { order: 0; }
  .gpair__fig { position: static; }
  .gpairs { gap: var(--space-24); }
}

.places { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--space-12) var(--space-8); margin-top: var(--space-16); }
.place { min-width: 0; }
/* scroll-margin: el header es fijo, sin esto el ancla deja el nombre debajo. */
.place { scroll-margin-top: calc(var(--header-h, 72px) + 24px); }
.place__name {
  font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 900;
  text-transform: uppercase; line-height: 1; letter-spacing: -0.01em;
  margin: 0 0 var(--space-3); color: var(--ink-accent);
}
.section--invert .place__name, .section--deep .place__name { color: var(--menta); }
.place p { margin: 0 0 var(--space-3); font-size: 16px; line-height: 1.6; }
.place__ig {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
  font-size: 14px; font-weight: 600; color: inherit; text-decoration: none;
  opacity: 0.72; transition: opacity 180ms;
}
.place__ig:hover { opacity: 1; text-decoration: underline; }
.place__ig svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }

.amen-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3) var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.amen-list li { display: flex; gap: var(--space-2); align-items: baseline; font-size: 15px; min-width: 0; }
.amen-list li::before { content: "—"; color: var(--ink-accent); flex: none; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(45,21,12,0.95); display: grid; place-items: center; padding: var(--space-8); }
.lb[hidden] { display: none !important; }
.lb img { max-width: 100%; max-height: 82vh; object-fit: contain; display: block; }
.lb__bar { position: absolute; inset-inline: var(--gutter); bottom: var(--space-6); display: flex; gap: var(--space-3); align-items: center; justify-content: center; }
.lb__count { color: var(--hueso); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; margin-inline-end: auto; }
.lb__close { position: absolute; top: var(--space-4); inset-inline-end: var(--gutter); }

.roomnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.roomnav a {
  background: var(--surface); padding: var(--space-6); text-decoration: none; display: grid; gap: var(--space-1); min-width: 0;
}
.roomnav a:hover { background: var(--surface-accent); color: var(--ink-on-accent); }
.roomnav strong { font-family: var(--font-display); font-size: 22px; font-weight: 900; text-transform: uppercase; line-height: 1; }
.roomnav span { font-size: 13px; color: var(--ink-muted); }
.roomnav a:hover span { color: var(--ink-on-accent); }

/* Siempre visible y siempre abajo. La flecha se corre al pasar el mouse por
   la tarjeta entera, no solo por el enlace: toda la tarjeta es el área de
   clic, así que el hover tiene que responder ahí. */
.room-link {
  justify-self: start; align-self: end;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--ink-accent);
  padding-bottom: 3px;
  transition: color 200ms, border-color 200ms;
}
.room-link::after {
  content: "→"; font-size: 15px; line-height: 1;
  transition: transform 240ms cubic-bezier(.2,.7,.3,1);
}
.room:hover .room-link,
.room:focus-within .room-link { color: var(--ink-accent); }
.room:hover .room-link::after,
.room:focus-within .room-link::after { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .room-link::after { transition: none; }
}

/* ------------------------------------------------- embudo de Mirai y legales */
/* Las páginas /bookingstep1-3/, /signup/ y /profile/ no tienen contenido propio:
   son el hueco donde monta el componente de Mirai. El hueco se reserva con una
   altura mínima para que la página no salte cuando el motor termina de cargar. */
.mirai-slot { min-height: 420px; }
.mirai-slot > [data-mirai-component] { display: block; }

/* Documento legal. Dos columnas: el número y el título de la sección a la
   izquierda, el cuerpo a la derecha. Así el texto usa el ancho de la página en
   vez de quedarse en una sola columna angosta contra el borde izquierdo, pero
   cada párrafo conserva un renglón legible (sobre 75 caracteres se vuelve
   incómodo de leer, por largo que sea el monitor). */
.doc { display: grid; gap: var(--space-16); max-width: 1180px; }
.doc__block {
  display: grid; gap: var(--space-6) var(--space-12);
  grid-template-columns: minmax(0, 26ch) minmax(0, 68ch);
  align-items: start;
  padding-top: var(--space-8); border-top: 1px solid var(--border);
}
/* El cuerpo va en UN solo hijo. Si cada párrafo fuera una celda de la rejilla,
   el h2 que ocupa toda la columna izquierda repartiría su altura sobrante entre
   las filas y abriría huecos entre el subtítulo y su lista. */
.doc__body { display: grid; gap: var(--space-4); }
.doc__block > h2 { position: sticky; top: 96px; }
.doc__block h2 {
  font-size: clamp(20px, 2.1vw, 27px); line-height: 1.08;
  letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
.doc__block h3 {
  font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); margin: var(--space-6) 0 0;
}
.doc__body > h3:first-child { margin-top: 0; }
.doc p { margin: 0; line-height: 1.6; }
.doc ul {
  margin: 0; padding-inline-start: 1.15em;
  display: grid; gap: var(--space-2); line-height: 1.55;
}
.doc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--ink-accent); }
.doc__note {
  border-inline-start: 3px solid var(--border-strong);
  padding-inline-start: var(--space-4); color: var(--ink-muted);
}
.doc__meta {
  border-top: 1px solid var(--border); padding-top: var(--space-6);
  font-size: 14px; color: var(--ink-muted);
}

/* Debajo de 900 px no hay sitio para dos columnas: el título vuelve arriba. */
@media (max-width: 900px) {
  .doc { gap: var(--space-12); }
  .doc__block { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .doc__block > h2 { position: static; }
}

/* ------------------------------------------------------ preguntas frecuentes */
/* Mismo patrón de dos columnas que el documento legal: la pregunta a la
   izquierda, la respuesta a la derecha. Las respuestas están escritas para
   entenderse solas, así que se leen bien aunque se salte de una a otra. */
.faq { display: grid; gap: var(--space-8); max-width: 1180px; margin-top: var(--space-12); }
.faq__item {
  display: grid; gap: var(--space-4) var(--space-12);
  grid-template-columns: minmax(0, 32ch) minmax(0, 62ch);
  align-items: start;
  padding-top: var(--space-6); border-top: 1px solid var(--border);
}
.faq__item h3 {
  font-size: clamp(18px, 1.8vw, 23px); line-height: 1.15;
  letter-spacing: -0.005em; margin: 0; text-transform: none; text-wrap: balance;
}
.faq__item p { margin: 0; line-height: 1.6; color: var(--ink-muted); }

@media (max-width: 900px) {
  .faq__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}