* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ══ Índice de sección ═══════════════════════════════════════════════════
   Las cinco secciones numeradas —(01) Los espacios … (05) Ubicación— traían
   cada una su propio encabezado, y las cinco habían derivado. Medido en el
   navegador antes de tocar nada: tres tracking distintos (0.14 / 0.20 /
   0.25em), dos blancos casi iguales pero no idénticos (244,239,232 contra
   239,234,227), y mono en UNA sola de ellas mientras las otras cuatro caían
   en la sans.

   El sistema vive aquí porque style.css es la única hoja global. Cada
   sección conserva la suya para lo que sí le pertenece —posición, márgenes,
   fondo— y deja de redeclarar tipografía.

   La decisión de fondo: la mono era lo correcto y estaba en la sección
   equivocada. Un índice numerado es un gesto de catálogo, y la mono es lo
   que lo hace leer como índice en vez de como etiqueta suelta. Se promueve
   el tratamiento de .hs-eyebrow a las otras cuatro en lugar de inventar uno.

   OJO con el orden de carga: esta hoja va PRIMERO (index.html:10) y las de
   sección después, así que a igual especificidad ganan ellas. Por eso las
   reglas por sección quedaron despojadas de font/tracking/color — si se
   vuelven a declarar allí, esto deja de aplicar sin avisar. */

:root {
  --sec-mono: "JetBrains Mono", ui-monospace, monospace;
  --sec-serif: "Zodiak", Georgia, serif;
  --sec-accent: #c79a5b;
}

/* La jerarquía es interna al propio índice: el numeral ancla —dorado y a
   peso pleno—, el filete separa, y el nombre queda en voz baja. Antes las
   tres partes iban en un mismo gris al 50% y la marca se leía plana. */
.sec-eyebrow {
  /* inline-flex, no flex. Un flex de nivel bloque ocupa todo el ancho y sus
     items dejan de obedecer al text-align del contenedor: rooms y voices
     centran así su encabezado, y con `flex` el índice se quedaba pegado a la
     izquierda mientras el título seguía centrado. Como caja inline vuelve a
     alinearse según lo que cada sección ya decidía —centrado en esas dos,
     a la izquierda en location— sin necesidad de overrides por sección. */
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  font-family: var(--sec-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* currentColor, nunca un valor duro: la sección horizontal hace una rampa
     de fondo de casi negro a crema, así que un color fijo se rompería a
     mitad del recorrido. Aquí hereda --hs-fg; en el resto, el color de la
     sección. */
  color: currentColor;
}

.sec-eyebrow b {
  flex: none;
  font-weight: 500;
  /* Cifras de ancho fijo: (01) y (05) tienen que ocupar lo mismo, o el
     filete baila de una sección a otra. */
  font-variant-numeric: tabular-nums;
  color: var(--sec-accent);
}

/* Sustituye al guión largo. El carácter dependía de la fuente y se sentaba a
   distinta altura en cada sección; un filete se alinea solo y no hereda esa
   deriva. align-self porque el resto de la fila va a baseline y una regla de
   1px no tiene baseline que valga. */
.sec-eyebrow i {
  flex: none;
  align-self: center;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.32;
}

/* min-width:0 para que el nombre pueda partirse dentro de su propia caja en
   pantallas angostas. Sin esto el ítem flex se niega a bajar de su ancho de
   contenido y "(04) — La voz de los huéspedes" empuja la fila a lo ancho. */
.sec-eyebrow span {
  min-width: 0;
  opacity: 0.62;
}

/* ── Título de sección ────────────────────────────────────────────────
   No declara font-family a propósito: hereda la display (Satoshi) de la
   raíz de cada sección, que ya era coherente en las tres. Lo que sí unifica
   es la escala —location iba a 4.2vw/3.4rem contra 3.6vw/3rem de las otras
   dos, sin motivo— y el tratamiento del énfasis. */
.sec-title {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  /* Evita la palabra huérfana en la última línea. Progresivo: donde no está
     soportado simplemente se ignora. */
  text-wrap: balance;
}

/* La itálica serif es la voz de énfasis de la casa —la misma del hero
   ("Espacio para vivir")—. Rooms la llevaba en sans y además en dorado,
   que era el único sitio donde el acento competía con el numeral del
   índice. Ahora el dorado aparece UNA vez por sección y siempre en el mismo
   lugar; el énfasis del título lo carga la forma de la letra, no el color. */
.sec-title em {
  font-family: var(--sec-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

html,
body {
  width: 100%;
  background: #141414;
  font-family: "Montserrat";
}

/* ══ Registro de timelines de scroll ═════════════════════════════════
   El traspaso de FAQ sostenida mientras Reserva sube lee una `view-timeline`
   definida en .reserve, y como son elementos hermanos el nombre tiene que
   estar declarado en su ancestro común, que es body. Reserva→Footer NO lleva
   este tratamiento: el footer es continuación simple de documento, sin efecto
   de página — ver la nota en footer.css.

   Este registro tiene que estar declarado UNA SOLA VEZ, con la lista
   completa. `timeline-scope` no se acumula entre hojas: una segunda
   declaración sobre body reemplaza a la primera, así que si cada sección
   declarase la suya, la última en cargar apagaría la otra en silencio. Por
   eso el registro vive aquí, en la hoja global, y no en faq.css.

   Al añadir un traspaso nuevo: el nombre se agrega a esta lista. */
@supports (timeline-scope: --a) {
  body {
    timeline-scope: --faq-handoff;
  }
}

/* Scroll stays locked while the intro timeline autoplays; story.js drops
   this class the moment the hero settles. */
body.is-intro {
  height: 100vh;
  overflow: hidden;
}

.hero-intro {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* ══ Eliminado: el bloque `nav` + `.nav-item` de la plantilla ═════════
   Aquí vivía un `nav { position: fixed; width: 100%; padding: 2.5em; display:
   flex; ... }` con sus `.nav-item`. Era código muerto heredado de la
   plantilla: `.nav-item` no aparece ni una vez en el HTML, y los cinco <nav>
   reales de la página traen su clase con estilos completos —.nav-center,
   .hscroll__progress, .cv-nav y las dos columnas del pie—.

   Muerto pero no inofensivo: un selector de elemento a secas alcanzaba a
   todos, y un `position: fixed` heredado sin querer no rompe a la vista, rompe
   en silencio. Dos casos medidos antes de quitarlo:

     · Las dos columnas de enlaces del pie salían de su rejilla. Quedaban dos
       de cuatro en flujo y el pie se veía descuadrado, con la mitad derecha
       vacía.
     · .cv-nav, en el menú, quedaba fija y con 40px de relleno propio, y sus
       enlaces terminaban 46px MÁS ALLÁ del borde del panel. Ése era el origen
       real de la línea que cruzaba de lado a lado.

   Se borra en vez de acotarse a `.hero-intro nav`: acotar SUBE la
   especificidad de 0-0-1 a 0-1-1, con lo que la regla pasaba a ganarle a
   `.nav-center` (0-1-0) y le imponía `position: fixed` y `width: 100%` —justo
   lo que overlay.css corrigió en su día porque el nav vacío se comía el clic
   del botón "Reservar"—. Eliminarlo no cambia la especificidad de nadie.

   Si algún día hace falta un nav genérico, que sea con clase. */



.hero {
  position: absolute;
  width: 95%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  color: #fff;
}

.icon,
.icon-2 {
  flex: 0.5;
  padding: 0 5em;
  font-size: 30px;
  opacity: 0.5;
}

.icon-2 {
  text-align: right;
}

.icon ion-icon,
.icon-2 ion-icon {
  transform: scale(0);
}

.title {
  flex: 2;
  text-align: center;
  font-size: 40px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.title p {
  position: relative;
  top: 50px;
}

/* Acotado a la intro. Era un selector de elemento a secas —`footer`— y su
   único destinatario es el contador "1 — 3" pegado al pie del hero, pero la
   página tiene ahora un pie de verdad al final, y un `position: absolute` de
   nivel global lo habría sacado del flujo. Lo mismo en overlay.css con el
   z-index. */
.hero-intro footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.slide-num {
  margin: 3em 0;
  text-align: center;
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.slide-num p {
  position: relative;
  transform: translate3d(0, 30px, 0);
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 1em;
}

.container .col {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.col .item {
  position: relative;
  flex: 1;
  width: 100%;
  background: gainsboro;
  overflow: hidden;
}

/* Opening positions for the intro, as transforms rather than as `top`.

   They used to be `top: 100%` / `-100%`, and the timeline animated `top` on
   all thirty elements — five columns and twenty-five tiles. `top` is a layout
   property, so every frame of a three-second animation forced a reflow of the
   whole grid, and the last stretch does it while .container is being scaled
   six times. Blink absorbs that; WebKit does not, which is why the intro ran
   smoothly in Chrome and stuttered in Safari.

   The distance is unchanged: `top: 100%` on these resolves against the
   containing block, and both .container and .col inherit the hero's height —
   so 100% was already exactly 100svh. Transforms are compositor work: no
   layout, no repaint, same picture. */
.c-1,
.c-3,
.c-5 {
  transform: translate3d(0, 100svh, 0);
}

.c-1 .item,
.c-3 .item,
.c-5 .item {
  transform: translate3d(0, 100svh, 0);
}

.c-2 .item,
.c-4 .item {
  transform: translate3d(0, -100svh, 0);
}

/* Only while the intro is running. body.is-intro is removed by unlockScroll()
   in the timeline's final call, so these hints are dropped the moment they
   stop being useful instead of holding thirty layers for the session. */
body.is-intro .container,
body.is-intro .col,
body.is-intro .col .item {
  will-change: transform;
  backface-visibility: hidden;
}

@media (max-width: 900px) {
  .slide-num {
    text-align: left;
    padding-left: 2em;
    margin-bottom: 2.5em;
  }

  .title {
    font-size: 30px;
  }

  .icon,
  .icon-2 {
    padding: 0 1em;
    font-size: 16px;
  }

}

/* ══ Táctil: legibilidad y área de toque ═════════════════════════════════
   Todo lo de este bloque se activa sólo con puntero grueso —teléfono y
   tablet—, así que el escritorio no cambia ni un píxel.

   Va al final de style.css a propósito: esta hoja carga PRIMERO y las de
   sección después, de modo que a igual especificidad ganan ellas. Por eso
   las reglas de abajo usan selectores algo más específicos o !important
   donde hace falta pisar un valor de sección. Ver la nota de .sec-eyebrow
   más arriba, que documenta el mismo orden de carga. */
@media (any-pointer: coarse) {

  /* ── Área de toque ────────────────────────────────────────────────
     Medido en un iPhone de 390px: doce controles quedaban por debajo de
     los 44px que recomienda Apple, y dos de ellos muy por debajo — el
     botón de menú a 28x20 y las flechas de habitación a 40x22.

     Se amplía con un pseudo-elemento invisible en lugar de con padding:
     el padding empujaría la maquetación y cambiaría el diseño, que es
     justo lo que no se quiere. Así el control se ve igual y la zona
     sensible al dedo crece por debajo.

     Se usa ::before y no ::after porque .link-underline y .rooms-more ya
     tienen tomado el ::after para su subrayado. */
  .btn-book, .btn-burger, .link-underline, .hs-card__alt,
  .rooms-cta, .rooms-more, .rooms-nav, .rooms-tab,
  .voices-cta, .location-cta, .hscroll__progress button,
  .location-item a[href^="tel:"], .faq-foot-cta,
  .ft-social a, .ft-contact a {
    position: relative;
  }

  .btn-book::before, .btn-burger::before, .link-underline::before,
  .hs-card__alt::before, .rooms-cta::before, .rooms-more::before,
  .rooms-nav::before, .rooms-tab::before, .voices-cta::before,
  .location-cta::before, .hscroll__progress button::before,
  .location-item a[href^="tel:"]::before, .faq-foot-cta::before,
  .ft-social a::before, .ft-contact a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    /* Sin fondo: sólo existe para recibir el toque. */
  }

  /* ── Tamaño mínimo de texto ───────────────────────────────────────
     Seis rótulos bajaban de 11px, y el peor —el epígrafe del cierre— se
     quedaba en 8.5px, que en una pantalla de teléfono es prácticamente
     ilegible. Se suben al mínimo del sistema de índices de sección, que
     ya es 11px, sin tocar su tracking ni su color.

     Los selectores llevan el contenedor delante (.offering .offering-kicker
     en vez de .offering-kicker a secas) por el orden de carga que ya se
     explica arriba: esta hoja va primero, así que a igual especificidad
     ganaba la hoja de sección y estas reglas no llegaban a aplicarse.
     Con el padre delante suben a 0-2-0 y sí pisan. */
  .offering .offering-kicker,
  .reserve .reserve-kicker,
  .kinetic .kc-eyebrow,
  .kinetic .kc-cta,
  .location .location-tab-label,
  .location .location-badge {
    font-size: 11px;
  }
}