/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/newsreader-400-italica.ad6c35ec.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/newsreader-400.0a3e35db.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fuentes/archivo.e3a28ead.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jacuzzi Temazcal Puebla — v3.
   Universos que salen de las fotos: el agua (mineral, luminosa), el vapor (oscuro, ámbar),
   la Bóveda azul (campo cobalto, eje vertical) y la Penumbra dorada (negro, franjas horizontales).
   Una transición (el arco), una interacción firma (entrar por el arco de la foto de portada),
   un óculo (Bóveda azul). Dos familias: Newsreader (voz; cursiva solo en lo oscuro) y Archivo (uso).
   Un solo corte: 56.25rem. Todo dentro de @layer base. */

@layer base {

  @font-face { font-family: 'Newsreader respaldo'; src: local('Georgia'); size-adjust: 94%; }
  @font-face { font-family: 'Archivo respaldo'; src: local('Arial'); size-adjust: 102%; }

  /* ── materiales ───────────────────────────────────────── */
  :root {
    --tinta: #121113;
    --negro: #090807;
    --mineral: #eceae6;
    --piedra-tinta: #5d564e;
    --cobalto: #2f5597;
    --cobalto-hondo: #203c70;
    --cobalto-noche: #121d31;
    --ambar: #cf9d5f;
    --ambar-claro: #e6c393;
    --claro: #ece8e1;
    --claro-suave: #aaa49b;
    --noche: #0f0e10;

    --display: 'Newsreader', 'Newsreader respaldo', Georgia, serif;
    --texto: 'Archivo', 'Archivo respaldo', Arial, sans-serif;

    --t-titulo: clamp(3.4rem, 1.3rem + 7.6vw, 9.25rem);
    --t-sensorial: clamp(1.45rem, 1.05rem + 1.4vw, 2.3rem);
    --t-sub: clamp(1.65rem, 1.2rem + 1.3vw, 2.5rem);
    --t-cuerpo: 1.0625rem;

    --orilla: clamp(1.25rem, 4.5vw, 4.5rem);
    --ancho: 90rem;
    --hueco: clamp(1rem, 2.2vw, 2rem);
    --curva: cubic-bezier(.22, .72, .18, 1);
    --cabecera: 4.5rem;
    --barra: 3.75rem;
    --arco: 50% 50% 0 0 / 36% 36% 0 0;

    --fondo: var(--mineral);
    --fondo-2: #dfdcd6;
    --texto-color: var(--tinta);
    --suave: var(--piedra-tinta);
    --acento: var(--cobalto);
    --accion-fondo: var(--cobalto);
    --accion-texto: #fff;
    --linea: rgb(18 17 19 / 0.14);
    --logo-guion: #8a6a3c;
    color-scheme: light;
  }

  [data-universo="jacuzzi"] { --fondo: #eeeeea; --fondo-2: #e0e1dc; }
  [data-universo="vapor"] {
    --fondo: var(--noche); --fondo-2: #1a181b; --texto-color: var(--claro); --suave: var(--claro-suave);
    --acento: var(--ambar); --accion-fondo: var(--ambar); --accion-texto: var(--tinta);
    --linea: rgb(236 232 225 / 0.14); --logo-guion: var(--ambar-claro); color-scheme: dark;
  }
  [data-universo="boveda"] {
    --fondo: var(--cobalto); --fondo-2: var(--cobalto-hondo); --texto-color: #f4f2ee; --suave: #cdd7ea;
    --acento: #fff; --accion-fondo: #f4f2ee; --accion-texto: var(--cobalto-hondo);
    --linea: rgb(244 242 238 / 0.22); --logo-guion: var(--ambar-claro); color-scheme: dark;
  }
  [data-universo="penumbra"] {
    --fondo: var(--negro); --fondo-2: #151210; --texto-color: #e9e2d6; --suave: #a79d8f;
    --acento: var(--ambar); --accion-fondo: var(--ambar); --accion-texto: var(--tinta);
    --linea: rgb(233 226 214 / 0.13); --logo-guion: var(--ambar); color-scheme: dark;
  }
  [data-universo="lugar"] { --fondo: #e6e2dc; --fondo-2: #d8d2c9; --suave: #58514a; }

  /* ── base ─────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 1rem); }
  body {
    margin: 0; min-height: 100svh;
    font-family: var(--texto); font-size: var(--t-cuerpo); line-height: 1.6;
    color: var(--texto-color); background: var(--fondo);
    font-kerning: normal; overflow-x: clip;
  }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  ::selection { background: var(--acento); color: var(--fondo); }
  :focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
  main { padding-top: var(--cabecera); }
  main:focus { outline: none; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .saltar { position: fixed; left: var(--orilla); top: 0.75rem; z-index: 60; padding: 0.75rem 1rem; background: var(--tinta); color: #fff; translate: 0 -200%; }
  .saltar:focus { translate: 0 0; }
  .marco { width: min(100% - 2 * var(--orilla), var(--ancho)); margin-inline: auto; }
  figure img { width: 100%; object-fit: cover; }
  figcaption { padding-top: 0.7rem; font-size: 0.9rem; line-height: 1.45; color: var(--suave); max-width: 40ch; }

  /* ── voz ──────────────────────────────────────────────── */
  .titulo {
    font-family: var(--display); font-weight: 400; font-size: var(--t-titulo);
    line-height: 0.9; letter-spacing: -0.025em; text-wrap: balance;
  }
  .titulo .menor { font-style: italic; font-size: 0.5em; letter-spacing: -0.01em; white-space: nowrap; }
  .titulo--util { font-size: clamp(2.8rem, 1.6rem + 4vw, 5.5rem); }
  .sensorial { font-family: var(--display); font-weight: 400; font-size: var(--t-sensorial); line-height: 1.22; letter-spacing: -0.005em; max-width: 26ch; text-wrap: pretty; }
  /* la cursiva es la voz de lo oscuro: vapor, penumbra y el tramo oscuro de la portada */
  [data-universo="vapor"] .sensorial, [data-universo="penumbra"] .sensorial, .escena-vapor .sensorial { font-style: italic; }
  .subtitulo { font-family: var(--display); font-weight: 400; font-size: var(--t-sub); line-height: 1.05; letter-spacing: -0.015em; }
  .nota { font-size: 0.9rem; line-height: 1.5; color: var(--suave); }

  /* ── uso ──────────────────────────────────────────────── */
  .ir {
    display: inline-flex; align-items: center; gap: 0.55em; min-height: 2.75rem;
    font-family: var(--texto); font-weight: 560; font-size: 1rem; letter-spacing: 0.005em;
    text-decoration: none; color: var(--texto-color);
  }
  .ir::after { content: '→'; content: '→' / ''; transition: translate .3s var(--curva); }
  .ir:hover { color: var(--acento); }
  .ir:hover::after, .ir:focus-visible::after { translate: 0.3em 0; }
  .ir--baja::after { content: '↓'; content: '↓' / ''; }
  .ir--baja:hover::after { translate: 0 0.2em; }
  .ir--atras::after { content: none; }
  .ir--atras::before { content: '←'; content: '←' / ''; transition: translate .3s var(--curva); }
  .ir--atras:hover::before { translate: -0.3em 0; }

  .accion {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.7rem;
    font-family: var(--texto); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none;
    color: var(--accion-texto); background: var(--accion-fondo); border: 1px solid var(--accion-fondo);
    transition: background-color .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva);
  }
  .accion:hover { background: color-mix(in srgb, var(--accion-fondo) 82%, var(--texto-color)); border-color: color-mix(in srgb, var(--accion-fondo) 82%, var(--texto-color)); }
  .accion--linea { background: transparent; color: var(--texto-color); border-color: currentColor; }
  .accion--linea:hover { background: var(--texto-color); color: var(--fondo); border-color: var(--texto-color); }
  .accion svg, .barra svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
  .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
  .enlaces { display: flex; flex-wrap: wrap; gap: 0 2rem; }
  .flecha::after, .seguir__titulo::after, .puerta-arco__nombre::after, .cuarto__nombre::after, .ba-seguir__cuarto::after, .pd-seguir a::after {
    content: ' →'; content: ' →' / ''; font-family: var(--texto); font-weight: 300;
  }

  .logo { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--texto-color); text-decoration: none; }
  .logo svg { width: 7.4rem; height: auto; overflow: visible; }

  /* ── cabecera ─────────────────────────────────────────── */
  .cabecera {
    position: fixed; inset: 0 0 auto; z-index: 40; height: var(--cabecera);
    color: var(--texto-color); background: var(--fondo);
    border-bottom: 1px solid var(--linea); view-transition-name: cabecera;
  }
  .cabecera .marco { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
  .nav a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem;
    font-weight: 500; font-size: 0.95rem; text-decoration: none; color: var(--texto-color);
  }
  .nav a:hover { color: var(--acento); }
  .nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.55em; }
  .nav .nav__reservar { padding: 0 1.15rem; margin-left: 0.4rem; background: var(--accion-fondo); color: var(--accion-texto); font-weight: 600; }
  .nav .nav__reservar:hover { color: var(--accion-texto); background: color-mix(in srgb, var(--accion-fondo) 82%, var(--texto-color)); }
  .menu-boton { display: none; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid currentColor; font-weight: 560; font-size: 0.95rem; text-decoration: none; color: var(--texto-color); }

  .menu { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--tinta); color: var(--claro); }
  .menu[open] { display: grid; grid-template-rows: auto 1fr auto; }
  .menu::backdrop { background: transparent; }
  .menu__cabeza { height: var(--cabecera); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--orilla); --texto-color: var(--claro); --logo-guion: var(--ambar-claro); border-bottom: 1px solid rgb(236 232 225 / 0.12); }
  .menu__cierra { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border: 1px solid rgb(236 232 225 / 0.5); }
  .menu__cierra svg { width: 1rem; height: 1rem; stroke: var(--claro); stroke-width: 1.8; fill: none; }
  .menu__lista { padding: 1.5rem var(--orilla) 2rem; overflow-y: auto; display: grid; align-content: start; }
  .menu__lista a { display: flex; align-items: center; min-height: 3.4rem; color: var(--claro); text-decoration: none; font-family: var(--display); font-size: clamp(2rem, 8.5vw, 2.9rem); line-height: 1.05; letter-spacing: -0.015em; }
  .menu__lista a[aria-current] { color: var(--ambar-claro); font-style: italic; }
  .menu__pie { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgb(236 232 225 / 0.12); padding-bottom: env(safe-area-inset-bottom); }
  .menu__pie a { display: flex; align-items: center; justify-content: center; min-height: var(--barra); background: var(--tinta); color: var(--claro); text-decoration: none; font-weight: 600; }
  .menu__pie a:first-child { background: var(--cobalto); color: #fff; }
  html:has(.menu[open]) { overflow: hidden; }

  /* ── pie ──────────────────────────────────────────────── */
  .pie { background: var(--tinta); color: var(--claro); padding: clamp(4rem, 3rem + 4vw, 7rem) 0 calc(2rem + env(safe-area-inset-bottom)); --texto-color: var(--claro); --logo-guion: var(--ambar-claro); }
  .pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }
  .pie__marca .logo svg { width: 9rem; }
  .pie__titulo { font-size: 0.9rem; font-weight: 500; color: var(--claro-suave); margin-bottom: 0.75rem; }
  .pie li a, .pie p a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: none; }
  .pie li a:hover, .pie p a:hover { text-decoration: underline; }
  .pie p { line-height: 1.65; }
  .pie__legal { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(236 232 225 / 0.12); font-size: 0.9rem; color: var(--claro-suave); }
  .barra { display: none; }

  .volver { padding-top: clamp(1rem, 2vw, 1.75rem); }
  .seguir { border-top: 1px solid var(--linea); }
  .seguir__rejilla { display: grid; grid-template-columns: 1fr 1fr; }
  .seguir a { display: grid; gap: 0.35rem; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); text-decoration: none; color: var(--texto-color); }
  .seguir a + a { border-left: 1px solid var(--linea); padding-left: clamp(1.5rem, 4vw, 4rem); }
  .seguir__rotulo { font-size: 0.95rem; color: var(--suave); }
  .seguir__titulo { font-family: var(--display); font-size: var(--t-sub); line-height: 1.05; transition: color .25s var(--curva); }
  .seguir a:hover .seguir__titulo { color: var(--acento); }

  /* ════════════════════════════════════════════════════════
     INICIO
     ════════════════════════════════════════════════════════ */
  .entrada {
    --pad: clamp(1.25rem, 3.5svh, 2.75rem);
    min-height: calc(100svh - var(--cabecera));
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: clamp(1.5rem, 3.5vw, 4rem);
    padding: var(--pad) var(--orilla);
    width: min(100%, var(--ancho) + 2 * var(--orilla)); margin-inline: auto;
  }
  .entrada__texto { display: grid; grid-template-rows: auto 1fr auto; gap: 2rem; min-width: 0; }
  .entrada__logo { width: clamp(13rem, 21vw, 23rem); color: var(--tinta); --logo-guion: #8a6a3c; line-height: 0; }
  .entrada__logo svg { width: 100%; height: auto; overflow: visible; }
  .entrada__frase { align-self: end; font-family: var(--display); font-size: clamp(1.7rem, 0.6rem + 2vw, 3.3rem); line-height: 1.02; letter-spacing: -0.02em; }
  .entrada__pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--linea); padding-top: 0.5rem; }
  .entrada__pie p { color: var(--suave); }
  .entrada__foto {
    position: relative; align-self: center;
    width: min(58vw, var(--ancho) * 0.6, 100vw - 2 * var(--orilla) - clamp(1.5rem, 3.5vw, 4rem) - 21rem, (100svh - var(--cabecera) - 2 * var(--pad)) * 4 / 3); aspect-ratio: 4 / 3;
    background: var(--fondo-2);
  }
  .entrada__foto img { width: 100%; height: 100%; object-fit: cover; }

  /* la interacción firma: la foto es el mapa. Tina → Jacuzzi. Arco → Temazcal + Vapor */
  .zona { position: absolute; display: block; color: #fff; text-decoration: none; }
  .zona--agua { left: 0; top: 56%; width: 68%; height: 40%; }
  .zona--arco { left: 72%; top: 24%; width: 27.5%; height: 72%; }
  .zona::before { content: ''; position: absolute; inset: 0; border: 1.5px solid rgb(255 255 255 / 0); transition: border-color .3s var(--curva); }
  .zona--arco::before { border-radius: 50% 50% 0 0 / 24% 24% 0 0; }
  .zona:hover::before, .zona:focus-visible::before { border-color: rgb(255 255 255 / 0.92); }
  .zona:focus-visible { outline: none; }
  .zona span {
    position: absolute; left: 0.75rem; bottom: 0.75rem; display: inline-flex; gap: 0.45em; align-items: center; white-space: nowrap;
    padding: 0.5rem 0.75rem; background: rgb(18 17 19 / 0.84); color: #fff; font-weight: 560; font-size: 0.95rem; line-height: 1.2;
    transition: background-color .3s var(--curva), color .3s var(--curva);
  }
  .zona span::after { content: '→'; content: '→' / ''; }
  .zona--arco span { left: 50%; translate: -50% 0; }
  .zona--agua:hover span, .zona--agua:focus-visible span { background: var(--cobalto); }
  .zona--arco:hover span, .zona--arco:focus-visible span { background: var(--ambar); color: var(--tinta); }

  .escena-agua { padding-block: clamp(5rem, 3rem + 8vw, 11rem); }
  .escena-agua__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: end; }
  .escena-agua__foto { grid-column: 1 / span 7; }
  .escena-agua__foto img { aspect-ratio: 4 / 3; }
  .escena-agua__texto { grid-column: 9 / span 4; display: grid; gap: 1.5rem; justify-items: start; padding-bottom: 1rem; }

  /* umbral: una composición fija; sin soporte o con movimiento reducido, un bloque oscuro quieto */
  .umbral { background: var(--noche); color: var(--claro); }
  .umbral__fijo { position: relative; display: grid; place-items: center; padding-block: clamp(4rem, 8vw, 8rem); }
  .umbral__foto { width: min(84vw, 80rem); }
  .umbral__foto img { aspect-ratio: 16 / 9; object-position: 40% 50%; }
  .umbral__frase { position: absolute; left: var(--orilla); bottom: clamp(1.5rem, 6svh, 4rem); font-family: var(--display); font-style: italic; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 5rem); line-height: 1; color: var(--claro); text-shadow: 0 0 2rem rgb(9 8 7 / 0.6); }

  .escena-vapor { background: var(--noche); color: var(--claro); --texto-color: var(--claro); --suave: var(--claro-suave); --acento: var(--ambar); padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(6rem, 4rem + 8vw, 12rem); }
  .escena-vapor__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2.5rem; align-items: center; }
  .puerta-arco { grid-column: 2 / span 4; display: block; color: var(--claro); text-decoration: none; }
  .puerta-arco img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--arco); }
  .puerta-arco__nombre { display: block; margin-top: 1.1rem; font-family: var(--display); font-size: var(--t-sub); line-height: 1.05; transition: color .25s var(--curva); }
  .puerta-arco:hover .puerta-arco__nombre { color: var(--ambar-claro); }
  .escena-vapor__texto { grid-column: 7 / span 5; display: grid; gap: 1.75rem; }
  .escena-vapor__texto .sensorial { font-size: clamp(1.7rem, 1.1rem + 2vw, 3.1rem); max-width: 22ch; }

  .detalle-lugar { padding-block: clamp(6rem, 4rem + 7vw, 12rem); }
  .detalle-lugar__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 3rem; align-items: start; }
  .detalle-lugar__a { grid-column: 1 / span 4; }
  .detalle-lugar__a img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .detalle-lugar__b { grid-column: 6 / span 3; margin-top: clamp(3rem, 8vw, 9rem); }
  .detalle-lugar__b img { aspect-ratio: 9 / 16; }
  .detalle-lugar__c { grid-column: 10 / span 3; }
  .detalle-lugar__c img { aspect-ratio: 3 / 4; object-position: 50% 60%; }
  .detalle-lugar__texto { grid-column: 1 / span 5; grid-row: 2; align-self: start; display: grid; gap: 1.25rem; margin-top: -2rem; }

  .opiniones { border-top: 1px solid var(--linea); padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
  .opiniones__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.5rem, 4vw, 4rem); }
  .opiniones__cifra { font-family: var(--display); font-size: clamp(4.5rem, 2.5rem + 6vw, 9rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--acento); }
  .opiniones__texto { font-family: var(--texto); font-weight: 400; font-size: 1.15rem; line-height: 1.4; margin-bottom: 0.25rem; }

  .reserva-final { background: var(--fondo-2); padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); }
  .reserva-final__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }

  /* ════════════════════════════════════════════════════════
     JACUZZI — luminoso y mineral
     ════════════════════════════════════════════════════════ */
  .jz-apertura { padding-top: clamp(1.25rem, 3svh, 2.5rem); }
  .jz-apertura__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: end; }
  .jz-apertura__texto { grid-column: 1 / span 6; display: grid; gap: 1.75rem; padding-bottom: clamp(1rem, 4svh, 3rem); }
  .jz-apertura__foto { grid-column: 7 / span 6; }
  .jz-apertura__foto img { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--cabecera) - 3rem); object-position: 50% 62%; }

  .jz-diptico { padding-block: clamp(6rem, 4rem + 7vw, 11rem) clamp(4rem, 3rem + 4vw, 7rem); }
  .jz-diptico__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 1.5rem; }
  .jz-diptico__a { grid-column: 2 / span 4; grid-row: 1 / span 2; }
  .jz-diptico__a img { aspect-ratio: 3 / 4; object-position: 50% 60%; }
  .jz-diptico__b { grid-column: 7 / span 6; grid-row: 1; align-self: end; }
  .jz-diptico__b img { aspect-ratio: 4 / 3; }
  .jz-diptico__texto { grid-column: 7 / span 5; grid-row: 2; font-size: 1.15rem; line-height: 1.5; max-width: 38ch; }

  .jz-agua { padding-top: clamp(2rem, 4vw, 4rem); }
  .jz-agua__foto img { aspect-ratio: 21 / 9; object-position: 50% 68%; }
  .jz-agua__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.25rem 3rem; padding-top: 1.75rem; }
  .jz-agua__pie .sensorial { max-width: 30ch; }

  .jz-regaderas { padding-block: clamp(5rem, 3rem + 6vw, 10rem); }
  .jz-regaderas__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--hueco); row-gap: 1.25rem; }
  .jz-regaderas h2 { grid-column: 2 / span 4; grid-row: 1; align-self: end; }
  .jz-regaderas__texto { grid-column: 2 / span 4; grid-row: 2; color: var(--suave); max-width: 30ch; }
  .jz-regaderas__a { grid-column: 7 / span 4; grid-row: 1 / span 2; }
  .jz-regaderas__a img { aspect-ratio: 3 / 4; object-position: 50% 72%; }

  .jz-jardin { background: var(--fondo-2); padding-block: clamp(5rem, 3rem + 6vw, 10rem); }
  .jz-jardin__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: end; }
  .jz-jardin__a { grid-column: 1 / span 8; }
  .jz-jardin__a img { aspect-ratio: 4 / 3; }
  .jz-jardin__texto { grid-column: 9 / span 4; display: grid; gap: 1rem; }
  .jz-jardin__texto p { max-width: 34ch; }

  .jz-otras { padding-block: clamp(5rem, 3rem + 6vw, 10rem); }
  .jz-otras__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 3rem; align-items: end; }
  .jz-otras__a { grid-column: 2 / span 4; }
  .jz-otras__a img { aspect-ratio: 3 / 4; }
  .jz-otras__b { grid-column: 7 / span 5; }
  .jz-otras__b img { aspect-ratio: 4 / 3; }

  /* cruce hacia el otro universo */
  .cruce__reservar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-block: 2.25rem; border-top: 1px solid var(--linea); }
  .cruce__reservar p { color: var(--suave); }
  .cruce__enlace { display: block; text-decoration: none; padding-block: clamp(5rem, 3rem + 8vw, 11rem); }
  .cruce__enlace > .marco { display: grid; gap: 1rem; }
  .cruce--a-vapor .cruce__enlace { background: var(--noche); color: var(--claro); --suave: var(--claro-suave); --hover: var(--ambar-claro); }
  .cruce--a-agua .cruce__enlace { background: #eeeeea; color: var(--tinta); --suave: var(--piedra-tinta); --hover: var(--cobalto); }
  .cruce__rotulo { color: var(--suave); font-size: 1rem; }
  .cruce__titulo { font-family: var(--display); font-size: var(--t-titulo); line-height: 0.9; letter-spacing: -0.025em; transition: color .3s var(--curva); }
  .cruce__titulo::after { content: ' →'; content: ' →' / ''; font-family: var(--texto); font-weight: 300; font-size: 0.5em; vertical-align: 0.3em; }
  .cruce__enlace:hover .cruce__titulo { color: var(--hover); }

  /* ════════════════════════════════════════════════════════
     TEMAZCAL + VAPOR — oscuro, la página más fuerte
     ════════════════════════════════════════════════════════ */
  .tv-apertura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--cabecera)); }
  .tv-apertura__foto { position: relative; min-height: 32rem; }
  .tv-apertura__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 58% 28%; }
  .tv-apertura__texto { align-self: end; display: grid; gap: 2rem; padding: 3rem var(--orilla) clamp(2.5rem, 8svh, 6rem) clamp(2rem, 5vw, 5rem); }
  .tv-apertura .titulo { font-size: clamp(3.6rem, 1rem + 8.4vw, 10.5rem); }
  .tv-apertura .titulo .menor { display: block; color: var(--ambar-claro); margin-top: 0.1em; }

  .tv-cuartos { padding-block: clamp(6rem, 4rem + 8vw, 12rem); }
  .tv-cuartos__frase { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 1.1rem + 2.3vw, 3.4rem); line-height: 1.15; max-width: 28ch; margin-bottom: clamp(3.5rem, 7vw, 7rem); text-wrap: pretty; }
  .tv-cuartos__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 3rem; align-items: start; }
  .cuarto { display: block; color: var(--texto-color); text-decoration: none; }
  .cuarto__marco { display: block; overflow: hidden; }
  .cuarto__marco img { width: 100%; object-fit: cover; }
  .cuarto__nombre { display: block; margin-top: 1.1rem; font-family: var(--display); font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.05; transition: color .25s var(--curva); }
  .cuarto:hover .cuarto__nombre { color: var(--ambar-claro); }
  .cuarto--azul { grid-column: 1 / span 5; }
  .cuarto--azul .cuarto__marco { border-radius: var(--arco); }
  .cuarto--azul img { aspect-ratio: 3 / 4; object-position: 50% 40%; }
  .cuarto--dorado { grid-column: 6 / span 7; margin-top: clamp(5rem, 16vw, 15rem); }
  .cuarto--dorado img { aspect-ratio: 4 / 5; object-position: 40% 50%; }

  .tv-humeda { padding-block: 0 clamp(6rem, 4rem + 6vw, 10rem); }
  .tv-humeda__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: end; }
  .tv-humeda__foto { grid-column: 1 / span 6; }
  .tv-humeda__foto img { aspect-ratio: 4 / 5; object-position: 50% 60%; }
  .tv-humeda__texto { grid-column: 8 / span 4; display: grid; gap: 1rem; padding-bottom: 1rem; }
  .tv-humeda__texto p { max-width: 34ch; }

  /* ════════════════════════════════════════════════════════
     BÓVEDA AZUL — campo cobalto, un eje vertical, el óculo
     ════════════════════════════════════════════════════════ */
  .eje { display: grid; justify-items: center; text-align: center; }
  .ba-escena { padding-block: clamp(1.5rem, 3vw, 3rem) clamp(5rem, 3rem + 6vw, 9rem); }
  .ba-escena .eje { gap: clamp(2rem, 4vw, 3.5rem); }
  .ba-escena__foto { width: min(100%, 34rem); }
  .ba-escena__foto img { aspect-ratio: 3 / 4; border-radius: var(--arco); }

  .ba-oculo { background: var(--cobalto-noche); color: var(--claro); padding-block: clamp(6rem, 4rem + 8vw, 12rem); }
  .ba-oculo .eje { gap: clamp(2.5rem, 5vw, 4rem); }
  .oculo { width: min(82vw, 34rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
  .oculo img { height: 100%; }
  .ba-oculo .sensorial { max-width: 24ch; }

  .ba-regadera { padding-block: clamp(6rem, 4rem + 6vw, 10rem); }
  .ba-regadera figure { width: min(100%, 26rem); }
  .ba-regadera img { aspect-ratio: 3 / 4; object-position: 50% 20%; }
  .ba-regadera figcaption { margin-inline: auto; }

  .ba-seguir { border-top: 1px solid var(--linea); padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
  .ba-seguir .eje { gap: 2rem; }
  .ba-seguir__cuarto { display: inline-block; font-family: var(--display); font-size: clamp(2.4rem, 1.4rem + 3.4vw, 5rem); line-height: 1; letter-spacing: -0.02em; text-decoration: none; color: var(--texto-color); padding-block: 0.15em; }
  .ba-seguir__cuarto:hover { color: var(--ambar-claro); }

  /* ════════════════════════════════════════════════════════
     PENUMBRA DORADA — negro, franjas horizontales, ámbar
     ════════════════════════════════════════════════════════ */
  .pd-banda { margin-top: clamp(1rem, 2vw, 1.75rem); }
  .pd-banda img { aspect-ratio: 21 / 9; max-height: 60svh; object-position: 50% 72%; }
  .pd-titulo { padding-block: clamp(2rem, 1.5rem + 2vw, 4rem) clamp(4rem, 3rem + 5vw, 8rem); }
  .pd-titulo__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: end; }
  .pd-titulo .titulo { grid-column: 1 / span 6; color: var(--ambar-claro); }
  .pd-titulo .sensorial { grid-column: 8 / span 5; max-width: 30ch; padding-bottom: 0.4rem; }
  .pd-ranuras { padding-bottom: clamp(4rem, 3rem + 5vw, 8rem); }
  .pd-ranuras__fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 1rem; align-items: end; }
  .pd-ranuras figure { grid-column: 1 / span 7; }
  .pd-ranuras img { aspect-ratio: 21 / 8; object-position: 30% 55%; }
  .pd-ranuras .nota { grid-column: 9 / span 3; }
  .pd-detalles { padding-bottom: clamp(5rem, 4rem + 5vw, 9rem); }
  .pd-detalles__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hueco); align-items: start; }
  .pd-detalles img { aspect-ratio: 16 / 10; }
  .pd-detalles figure:nth-child(1) img { object-position: 50% 35%; }
  .pd-detalles figure:nth-child(2) img { object-position: 50% 50%; }
  .pd-seguir { border-top: 1px solid var(--linea); }
  .pd-seguir__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 3rem; }
  .pd-seguir a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); font-family: var(--display); font-size: var(--t-sub); line-height: 1.05; text-decoration: none; color: var(--texto-color); }
  .pd-seguir a:hover { color: var(--ambar-claro); }

  /* ════════════════════════════════════════════════════════
     EL LUGAR — recorrido
     ════════════════════════════════════════════════════════ */
  .lg-cabeza { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(4rem, 3rem + 5vw, 8rem); }
  .lg-cabeza__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 1.5rem; align-items: end; }
  .lg-cabeza .titulo { grid-column: 1 / span 6; }
  .lg-cabeza .sensorial { grid-column: 8 / span 5; padding-bottom: 0.4rem; }
  .recorrido { display: grid; gap: clamp(5rem, 3rem + 7vw, 11rem); padding-bottom: clamp(6rem, 4rem + 6vw, 10rem); }
  .paso { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 1.25rem; align-items: end; }
  .paso p { font-size: 1.15rem; line-height: 1.5; max-width: 32ch; }
  .paso--recepcion figure { grid-column: 1 / span 5; }
  .paso--recepcion img { aspect-ratio: 4 / 5; object-position: 50% 28%; }
  .paso--recepcion p { grid-column: 7 / span 4; }
  .paso--arco figure { grid-column: 8 / span 3; grid-row: 1; }
  .paso--arco img { aspect-ratio: 9 / 16; }
  .paso--arco p { grid-column: 4 / span 4; grid-row: 1; align-self: end; justify-self: end; text-align: right; }
  .paso--agua figure { grid-column: 1 / span 8; }
  .paso--agua img { aspect-ratio: 4 / 3; }
  .paso--agua p { grid-column: 10 / span 3; }
  .paso--mosaico figure:nth-child(1) { grid-column: 2 / span 4; grid-row: 1 / span 2; }
  .paso--mosaico figure:nth-child(2) { grid-column: 7 / span 3; grid-row: 1; }
  .paso--mosaico img { aspect-ratio: 3 / 4; }
  .paso--mosaico p { grid-column: 7 / span 5; grid-row: 2; align-self: start; }
  .paso--jardin figure { grid-column: 3 / span 7; }
  .paso--jardin img { aspect-ratio: 4 / 3; }
  .paso--jardin p { grid-column: 3 / span 5; }

  /* ════════════════════════════════════════════════════════
     GALERÍA
     ════════════════════════════════════════════════════════ */
  .ga-cabeza { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) 1rem; }
  .ga-cabeza__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; border-bottom: 1px solid var(--linea); padding-bottom: 1.25rem; }
  .filtros { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .filtros a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; font-weight: 500; text-decoration: none; color: var(--suave); }
  .filtros a:hover, .filtros [aria-pressed="true"] { color: var(--texto-color); text-decoration: underline; text-underline-offset: 0.5em; }
  .archivo__grupo { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
  .archivo__grupo[hidden] { display: none; }
  .archivo__grupo h2 { margin-bottom: 1.5rem; }
  .archivo__rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(0.6rem, 1.2vw, 1.1rem); }
  .archivo__rejilla a { display: block; overflow: hidden; background: var(--fondo-2); }
  .archivo__rejilla img { width: 100%; height: 100%; object-fit: cover; }
  .archivo__rejilla a:focus-visible { outline-offset: 3px; }
  .archivo__rejilla .v { grid-column: span 2; grid-row: span 2; aspect-ratio: 3 / 4; }
  .archivo__rejilla .h { grid-column: span 3; grid-row: span 2; aspect-ratio: 4 / 3; }
  .archivo__rejilla .c { grid-column: span 1; aspect-ratio: 3 / 4; }
  .ga-procedencia { padding-block: 3rem clamp(5rem, 4rem + 4vw, 8rem); }

  .visor { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(12 11 13 / 0.97); color: var(--claro); }
  .visor[open] { display: grid; grid-template-rows: auto 1fr auto; }
  .visor::backdrop { background: rgb(12 11 13 / 0.9); }
  .visor__barra { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem var(--orilla); min-height: 4.5rem; }
  .visor__cuenta { font-size: 0.9rem; color: var(--claro-suave); font-variant-numeric: tabular-nums; }
  .visor__lienzo { display: grid; place-items: center; padding: 0 clamp(0.5rem, 5vw, 5rem); min-height: 0; touch-action: pan-y; }
  .visor__lienzo img { max-width: 100%; max-height: calc(100svh - 11rem); width: auto; height: auto; object-fit: contain; }
  .visor__pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem var(--orilla) calc(1rem + env(safe-area-inset-bottom)); }
  .visor button { width: 2.9rem; height: 2.9rem; display: inline-grid; place-items: center; border: 1px solid rgb(236 232 225 / 0.45); }
  .visor button:hover { border-color: var(--ambar-claro); color: var(--ambar-claro); }
  .visor button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .visor__texto { font-size: 0.9rem; color: var(--claro-suave); text-align: center; flex: 1; }

  /* ════════════════════════════════════════════════════════
     VISITA · RESERVAR · 404 — utilitarias
     ════════════════════════════════════════════════════════ */
  .visita { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(5rem, 4rem + 4vw, 8rem); }
  .visita__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
  .visita__datos > .titulo { grid-column: 1 / -1; }
  .visita__datos section { display: grid; gap: 0.6rem; justify-items: start; border-top: 1px solid var(--linea); padding-top: 1.25rem; }
  .visita__rotulo { font-size: 0.95rem; font-weight: 600; color: var(--suave); }
  .visita address, .visita__dato { font-style: normal; font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.25; }
  .tel-grande { display: inline-block; padding-block: 0.15em; font-family: var(--display); font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.75rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; text-decoration: none; white-space: nowrap; }
  .tel-grande:hover { color: var(--acento); }

  .reservar-pantalla { min-height: calc(100svh - var(--cabecera)); display: grid; align-content: center; padding-block: 3rem; }
  .reservar-pantalla__caja { display: grid; gap: 1.5rem; justify-items: start; }
  .reservar-pantalla__horario { font-size: 1.2rem; }
  .reservar-pantalla .nota { margin-top: 1rem; }

  .perdida { min-height: 70svh; display: grid; place-content: center; justify-items: center; gap: 1.5rem; text-align: center; padding-block: 5rem; }

  /* ════════════════════════════════════════════════════════
     MOVIMIENTO — cuatro familias: el arco entre páginas, la entrada,
     el umbral con el scroll y los estados de hover/foco.
     ════════════════════════════════════════════════════════ */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--curva); }
  html:active-view-transition-type(arco)::view-transition-old(root) { animation: none; }
  html:active-view-transition-type(arco)::view-transition-new(root) { animation: vt-arco .46s var(--curva) both; }
  @keyframes vt-arco {
    from { clip-path: inset(var(--vt-t, 38%) var(--vt-r, 34%) var(--vt-b, 0px) var(--vt-l, 34%) round var(--vt-rad, 16vw) var(--vt-rad, 16vw) 0 0); }
    to { clip-path: inset(0 0 0 0 round 0 0 0 0); }
  }
  ::view-transition-group(cabecera) { animation: none; }
  ::view-transition-old(cabecera) { display: none; }
  ::view-transition-new(cabecera) { animation: none; }

  @media (prefers-reduced-motion: no-preference) {
    .entrada__foto img { animation: marco-abre .72s var(--curva) both; }
    .zona span { animation: aparece .4s .5s var(--curva) both; }
    @keyframes marco-abre { from { clip-path: inset(10% 8% 0 62% round 50% 50% 0 0 / 30% 30% 0 0); } to { clip-path: inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0); } }
    @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
    main .titulo { animation: titulo-entra .55s var(--curva) both; }
    @keyframes titulo-entra { from { opacity: 0; translate: 0 0.12em; } to { opacity: 1; translate: 0 0; } }

    @supports (animation-timeline: view()) {
      .umbral { height: 210svh; view-timeline: --umbral block; }
      .umbral__fijo { position: sticky; top: 0; height: 100svh; padding-block: 0; }
      .umbral__foto img { animation: umbral-luz linear both; animation-timeline: --umbral; animation-range: contain 0% contain 70%; }
      .umbral__frase { animation: aparece linear both; animation-timeline: --umbral; animation-range: contain 30% contain 60%; }
      @keyframes umbral-luz { from { clip-path: inset(0 60% 0 10%); } to { clip-path: inset(0 0 0 0); } }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }

  /* ════════════════════════════════════════════════════════
     EL CORTE: 56.25rem — en móvil, un eje: toda foto al ancho de la columna
     ════════════════════════════════════════════════════════ */
  @media (max-width: 56.24rem) {
    :root { --cabecera: 3.75rem; --hueco: 0.75rem; }
    body { padding-bottom: calc(var(--barra) + 1px + env(safe-area-inset-bottom)); }
    html { scroll-padding-bottom: calc(var(--barra) + 1.5rem); }
    .nav { display: none; }
    .menu-boton { display: inline-flex; }
    .logo svg { width: 6.2rem; }

    .barra { display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0; z-index: 35; padding-bottom: env(safe-area-inset-bottom); background: var(--tinta); border-top: 1px solid rgb(255 255 255 / 0.1); }
    .barra a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--barra); color: var(--claro); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
    .barra a:first-child { background: var(--cobalto); color: #fff; }

    .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    .pie__marca { grid-column: 1 / -1; }
    .seguir__rejilla { grid-template-columns: 1fr; }
    .seguir a + a { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; }

    /* rejillas de 12 → una columna; lo que no se nombra abajo ocupa todo el ancho */
    .escena-agua__rejilla, .escena-vapor__rejilla, .detalle-lugar__rejilla, .jz-apertura__rejilla, .jz-diptico__rejilla,
    .jz-regaderas__rejilla, .jz-jardin__rejilla, .jz-otras__rejilla, .tv-cuartos__rejilla, .tv-humeda__rejilla,
    .pd-titulo__rejilla, .pd-ranuras__fila, .lg-cabeza__rejilla, .paso { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    /* :nth-child(n) sube la especificidad a (0,2,0) para ganarle a las colocaciones de escritorio como .pd-titulo .sensorial */
    .escena-agua__rejilla > :nth-child(n), .escena-vapor__rejilla > :nth-child(n), .detalle-lugar__rejilla > :nth-child(n), .jz-apertura__rejilla > :nth-child(n), .jz-diptico__rejilla > :nth-child(n),
    .jz-regaderas__rejilla > :nth-child(n), .jz-jardin__rejilla > :nth-child(n), .jz-otras__rejilla > :nth-child(n), .tv-cuartos__rejilla > :nth-child(n), .tv-humeda__rejilla > :nth-child(n),
    .pd-titulo__rejilla > :nth-child(n), .pd-ranuras__fila > :nth-child(n), .lg-cabeza__rejilla > :nth-child(n), .paso > :nth-child(n) { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }

    /* inicio */
    .entrada { grid-template-columns: 1fr; min-height: 0; padding: 1.5rem 0 0; gap: 1.5rem; }
    .entrada__texto { padding-inline: var(--orilla); gap: 1.25rem; grid-template-rows: auto auto auto; }
    .entrada__logo { width: min(62vw, 16rem); }
    .entrada__frase { font-size: clamp(1.9rem, 8.4vw, 2.7rem); }
    .entrada__foto { width: 100%; }
    .zona span { font-size: 0.875rem; padding: 0.45rem 0.6rem; left: 0.5rem; bottom: 0.5rem; }
    .zona--arco span { left: auto; right: 0.3rem; translate: none; }

    .escena-agua { padding-block: 4rem 5rem; }
    .escena-agua__texto { padding: 0; }
    .umbral__foto { width: 100%; }
    .umbral__foto img { aspect-ratio: 4 / 5; object-position: 32% 50%; }
    .escena-vapor { padding-block: 3rem 5rem; }
    .puerta-arco { max-width: 26rem; }

    .detalle-lugar { padding-block: 5rem; }
    .detalle-lugar__rejilla { row-gap: 0.75rem; }
    .detalle-lugar__rejilla > .detalle-lugar__b { grid-column: 1 / span 3; }
    .detalle-lugar__rejilla > .detalle-lugar__c { grid-column: 4 / span 3; }
    .detalle-lugar__b img, .detalle-lugar__c img { aspect-ratio: 3 / 4; }
    .detalle-lugar__rejilla > .detalle-lugar__texto { margin-top: 1.5rem; }
    .opiniones__cifra { font-size: 4.5rem; }
    .reserva-final__fila { display: grid; justify-items: start; }

    /* jacuzzi */
    .jz-apertura__texto { padding-bottom: 0; }
    .jz-apertura__foto { margin-inline: calc(var(--orilla) * -1); }
    .jz-apertura__foto img { max-height: 72svh; }
    .jz-diptico { padding-block: 4.5rem 3rem; }
    .jz-diptico__texto { font-size: 1.05rem; }
    .jz-agua__foto img { aspect-ratio: 4 / 3; object-position: 70% 60%; }
    .jz-regaderas, .jz-jardin, .jz-otras { padding-block: 4.5rem; }
    .jz-regaderas__rejilla > .jz-regaderas__a { margin-top: 1rem; }
    .cruce__enlace { padding-block: 4.5rem; }
    .cruce__titulo { font-size: clamp(3rem, 13vw, 4.5rem); }

    /* temazcal */
    .tv-apertura { grid-template-columns: 1fr; min-height: 0; }
    .tv-apertura__foto { min-height: 0; }
    .tv-apertura__foto img { position: static; aspect-ratio: 4 / 5; height: auto; max-height: 72svh; }
    .tv-apertura__texto { padding: 2rem var(--orilla) 1rem; gap: 1.25rem; }
    .tv-apertura .titulo { font-size: clamp(3.4rem, 16vw, 5.5rem); }
    .tv-cuartos { padding-block: 4.5rem; }
    .cuarto--azul { max-width: 26rem; }
    .tv-humeda { padding-bottom: 4.5rem; }

    /* bóveda y penumbra */
    .ba-escena { padding-bottom: 4rem; }
    .ba-oculo, .ba-regadera { padding-block: 4.5rem; }
    .pd-banda img { aspect-ratio: 4 / 5; max-height: 70svh; object-position: 50% 70%; }
    .pd-ranuras img { aspect-ratio: 4 / 3; object-position: 30% 50%; }
    .pd-detalles__fila { grid-template-columns: 1fr; row-gap: 2rem; }
    .pd-seguir__fila { display: grid; }
    .pd-seguir a + a { border-top: 1px solid var(--linea); }

    /* el lugar */
    .recorrido { gap: 4.5rem; }
    .paso p { font-size: 1.05rem; text-align: left; justify-self: start; }
    .paso--arco img { aspect-ratio: 4 / 5; }
    .paso--mosaico figure:nth-child(1) { grid-column: 1 / span 3; grid-row: auto; }
    .paso--mosaico figure:nth-child(2) { grid-column: 4 / span 3; }

    /* galería y utilitarias */
    .filtros { gap: 0 0.7rem; }
    .filtros a { font-size: 0.9375rem; }
    .archivo__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .archivo__rejilla .v, .archivo__rejilla .c { grid-column: span 1; grid-row: auto; }
    .archivo__rejilla .h, .archivo__rejilla .ancha-movil { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
    .visita__datos { grid-template-columns: 1fr; gap: 2.5rem; }
    .tel-grande { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  }
}