/* 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 — v4.
   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).
   Una transición (el arco), una interacción firma (entrar por el arco de la foto de portada),
   un óculo (Bóveda azul).
   v4: una sola composición para todos los anchos — la del teléfono. En escritorio el contenido vive
   en una columna editorial de 44rem y los campos de color siguen de lado a lado.
   Voz: Newsreader cursiva para todo lo que se lee; Newsreader redonda para los títulos;
   Archivo solo para lo que se toca (navegación, botones, filtros).
   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: 'Newsreader respaldo'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic'); 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, 7.5rem);
    --t-sensorial: clamp(1.55rem, 1.1rem + 1.5vw, 2.4rem);
    --t-sub: clamp(1.75rem, 1.25rem + 1.4vw, 2.6rem);
    --t-cuerpo: 1.1875rem;

    --orilla: clamp(1.25rem, 4.5vw, 4.5rem);
    --ancho: 90rem;
    --columna: 44rem;
    --hueco: clamp(0.75rem, 1.6vw, 1.25rem);
    --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; }
  /* Temazcal + Vapor empieza en luz fría; la tinta la trae su capítulo oscuro (.tinta) */
  [data-universo="vapor"] { --fondo: #e7eaea; --fondo-2: #dce2e4; --suave: #55595c; --acento: var(--cobalto-hondo); }
  /* Bóveda azul: neutro frío; el cobalto lo ponen las fotos */
  [data-universo="boveda"] { --fondo: #e4e9ee; --fondo-2: #d5dde6; --texto-color: #0f1a2c; --suave: #46566b; --acento: var(--cobalto-hondo); --linea: rgb(15 26 44 / 0.15); --logo-guion: #6d5a3d; }
  [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(--display); font-style: italic; font-weight: 400; font-size: var(--t-cuerpo); line-height: 1.5;
    color: var(--texto-color); background: var(--fondo);
    font-kerning: normal; font-variant-numeric: lining-nums; 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; }
  /* la columna editorial: todo .marco dentro de main mide lo mismo en cualquier pantalla */
  main { padding-top: var(--cabecera); --ancho: var(--columna); }
  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.6rem; font-size: 1.05rem; line-height: 1.4; color: var(--suave); max-width: 40ch; }

  /* ── dos registros: lo que se toca va en Archivo redonda; los títulos, en Newsreader redonda ── */
  .nav a, .menu-boton, .accion, .barra a, .menu__pie a, .filtros a, .zona span, .visor__cuenta, .saltar, .visita__rotulo, .idioma {
    font-family: var(--texto); font-style: normal;
  }
  .titulo, .subtitulo, .cuarto-titulo, .seguir__titulo, .cruce__titulo, .atmosfera__nombre, .puerta-arco__nombre,
  .tv-jacuzzi__titulo, .ba-seguir__cuarto, .pd-seguir a, .opiniones__cifra, .tel-grande, .menu__lista a, .logo {
    font-style: normal;
  }

  /* ── 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-size: var(--t-sensorial); line-height: 1.22; letter-spacing: -0.005em; max-width: 26ch; text-wrap: pretty; }
  .tinta {
    --fondo: #0b0a09; --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);
    background: var(--fondo); color: var(--texto-color); color-scheme: dark;
  }
  .subtitulo { font-family: var(--display); font-weight: 400; font-size: var(--t-sub); line-height: 1.05; letter-spacing: -0.015em; }
  .nota { font-size: 1.0625rem; line-height: 1.45; color: var(--suave); }

  /* ── uso ──────────────────────────────────────────────── */
  /* enlace de lectura: cursiva subrayada con la flecha en Archivo */
  .ir {
    display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem;
    font-size: 1.25rem; line-height: 1.2;
    text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-underline-offset: 0.24em;
    color: var(--texto-color); transition: text-decoration-color .25s var(--curva), color .25s var(--curva);
  }
  .ir::after { content: '→'; content: '→' / ''; font-family: var(--texto); font-style: normal; font-weight: 300; transition: translate .3s var(--curva); }
  .ir:hover { color: var(--acento); text-decoration-color: currentColor; }
  .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: '←' / ''; font-family: var(--texto); font-style: normal; font-weight: 300; 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-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; }
  .seguir__titulo::after, .puerta-arco__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; gap: 1rem; }
  .nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 2.25rem); margin-left: auto; }
  .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); }
  /* idioma: dos letras, siempre a la vista */
  .idioma {
    display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.5rem;
    font-weight: 560; font-size: 0.85rem; letter-spacing: 0.08em; text-decoration: none; color: var(--texto-color);
  }
  .idioma:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 0.5em; }

  .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(2.5rem, 2rem + 2vw, 4rem) 0 calc(1.5rem + env(safe-area-inset-bottom)); --texto-color: var(--claro); --logo-guion: var(--ambar-claro); }
  .pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; }
  .pie__marca .logo svg { width: 8rem; }
  .pie__datos { font-size: 1.1rem; line-height: 1.55; color: var(--claro-suave); text-align: right; }
  .pie__datos a, .pie__nav a { display: inline-flex; min-height: 2.75rem; min-width: 2.75rem; justify-content: center; align-items: center; color: var(--claro); text-decoration: none; }
  .pie__datos a:hover, .pie__nav a:hover { text-decoration: underline; }
  .pie__nav { display: none; }
  .pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid rgb(236 232 225 / 0.12); font-size: 1rem; color: var(--claro-suave); }
  .pie__legal .idioma { color: var(--claro); }
  .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 + 2vw, 4rem); text-decoration: none; color: var(--texto-color); }
  .seguir a + a { border-left: 1px solid var(--linea); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
  .seguir__rotulo { font-size: 1.1rem; 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); }

  /* piezas fuera de .marco: su caja es la columna más las orillas; su foto, la columna */
  .ancho-columna { width: min(100%, var(--columna)); margin-inline: auto; }

  /* ════════════════════════════════════════════════════════
     INICIO
     ════════════════════════════════════════════════════════ */
  .entrada { display: grid; gap: 1.5rem; padding-top: clamp(1.5rem, 4svh, 3rem); width: min(100%, var(--columna) + 2 * var(--orilla)); margin-inline: auto; }
  .entrada__texto { display: grid; gap: 1.25rem; padding-inline: var(--orilla); min-width: 0; }
  .entrada__logo { width: min(62vw, 17rem); color: var(--tinta); --logo-guion: #8a6a3c; line-height: 0; }
  .entrada__logo svg { width: 100%; height: auto; overflow: visible; }
  .entrada__frase { font-size: clamp(1.9rem, 1rem + 4.2vw, 3rem); line-height: 1.04; letter-spacing: -0.015em; }
  .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; width: min(100%, var(--columna)); margin-inline: auto; 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: auto; right: 0.5rem; }
  .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(4rem, 3rem + 3vw, 6rem) clamp(5rem, 4rem + 3vw, 7rem); }
  .escena-agua__rejilla { display: grid; gap: 2rem; }
  .escena-agua__foto img { aspect-ratio: 4 / 3; }
  .escena-agua__texto { display: grid; gap: 1.25rem; justify-items: start; }

  /* umbral: sin foto. La luz se va en un campo largo, del tono del agua a la tinta del vapor */
  .umbral {
    display: grid; align-content: end; min-height: clamp(17rem, 48svh, 30rem);
    padding-block: clamp(5rem, 10svh, 8rem) clamp(3rem, 6svh, 5rem); color: var(--claro);
    background-color: var(--noche);
    background-image: linear-gradient(var(--mineral), var(--noche) 72%);
    background-image: linear-gradient(in oklab, var(--mineral), var(--noche) 72%);
  }
  .umbral__frase { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1; color: var(--claro); }

  .escena-vapor { background: var(--noche); color: var(--claro); --texto-color: var(--claro); --suave: var(--claro-suave); --acento: var(--ambar); padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(5rem, 4rem + 4vw, 8rem); }
  .escena-vapor__rejilla { display: grid; gap: 2.5rem; }
  .puerta-arco { display: block; max-width: 26rem; 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 { display: grid; gap: 1.5rem; }
  .escena-vapor__texto .sensorial { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); max-width: 22ch; }

  .detalle-lugar { padding-block: clamp(5rem, 4rem + 3vw, 7rem); }
  .detalle-lugar__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco); }
  .detalle-lugar__a { grid-column: 1 / -1; }
  .detalle-lugar__a img { aspect-ratio: 4 / 5; max-height: 80svh; object-position: 50% 30%; }
  .detalle-lugar__b img, .detalle-lugar__c img { aspect-ratio: 3 / 4; }
  .detalle-lugar__c img { object-position: 50% 60%; }
  .detalle-lugar__texto { grid-column: 1 / -1; display: grid; gap: 1.25rem; margin-top: 1.5rem; }

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

  .reserva-final { background: var(--fondo-2); padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
  .reserva-final__fila { display: grid; justify-items: start; gap: 1.5rem; }

  /* ════════════════════════════════════════════════════════
     JACUZZI — luminoso y mineral
     ════════════════════════════════════════════════════════ */
  .jz-apertura { padding-top: clamp(1.25rem, 3svh, 2.5rem); }
  .jz-apertura__rejilla { display: grid; gap: 2rem; }
  .jz-apertura__texto { display: grid; gap: 1.5rem; }
  .jz-apertura__foto img { aspect-ratio: 4 / 5; max-height: 80svh; object-position: 50% 62%; }

  .jz-diptico { padding-block: clamp(4.5rem, 3.5rem + 3vw, 7rem) clamp(3rem, 2rem + 3vw, 5rem); }
  .jz-diptico__rejilla { display: grid; gap: 1.5rem; }
  .jz-diptico__a img { aspect-ratio: 3 / 4; max-height: 80svh; object-position: 50% 60%; }
  .jz-diptico__b img { aspect-ratio: 4 / 3; }
  .jz-diptico__texto { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem); line-height: 1.4; max-width: 38ch; }

  .jz-agua { padding-top: clamp(2rem, 4vw, 4rem); }
  .jz-agua__foto img { aspect-ratio: 4 / 3; object-position: 70% 60%; }
  .jz-agua__pie { display: grid; justify-items: start; gap: 1rem; padding-top: 1.75rem; }
  .jz-agua__pie .sensorial { max-width: 30ch; }

  .jz-regaderas { padding-block: clamp(4.5rem, 3.5rem + 3vw, 7rem); }
  .jz-regaderas__rejilla { display: grid; gap: 1.25rem; }
  .jz-regaderas__texto { color: var(--suave); max-width: 30ch; }
  .jz-regaderas__a { margin-top: 1rem; }
  .jz-regaderas__a img { aspect-ratio: 3 / 4; max-height: 80svh; object-position: 50% 72%; }

  .jz-jardin { background: var(--fondo-2); padding-block: clamp(4.5rem, 3.5rem + 3vw, 7rem); }
  .jz-jardin__rejilla { display: grid; gap: 2rem; }
  .jz-jardin__a img { aspect-ratio: 4 / 3; }
  .jz-jardin__texto { display: grid; gap: 1rem; }
  .jz-jardin__texto p { max-width: 34ch; }

  .jz-otras { padding-block: clamp(4.5rem, 3.5rem + 3vw, 7rem); }
  .jz-otras__rejilla { display: grid; gap: 3rem; }
  .jz-otras__a img { aspect-ratio: 3 / 4; max-height: 80svh; }
  .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(4.5rem, 3rem + 4vw, 8rem); }
  .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__rotulo { color: var(--suave); font-size: 1.25rem; }
  .cruce__titulo { font-family: var(--display); font-size: clamp(3rem, 1rem + 9vw, 6.5rem); 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 — de la luz a la tinta.
     Jerarquía: H1 > cuartos (.cuarto-titulo) > todo lo demás. Cada foto aparece una sola vez.
     ════════════════════════════════════════════════════════ */
  .cuarto-titulo { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.6rem); line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; }
  .ir--discreto { font-size: 1.15rem; color: var(--suave); }

  .tv-entrada { display: grid; width: min(100%, var(--columna) + 2 * var(--orilla)); margin-inline: auto; }
  /* el título va primero aunque en el HTML la foto lo preceda */
  .tv-entrada__texto { grid-row: 1; display: grid; gap: 0.9rem; justify-items: start; padding: clamp(1.5rem, 4svh, 3rem) var(--orilla) 1.75rem; }
  .tv-entrada__foto { grid-row: 2; }
  .tv-entrada .titulo { font-size: clamp(3.4rem, 1rem + 12vw, 7rem); }
  .tv-entrada .titulo .menor { display: block; margin-top: 0.08em; color: var(--suave); }
  .tv-entrada__linea { font-size: var(--t-sensorial); line-height: 1.2; }
  .tv-entrada__foto { width: min(100%, var(--columna)); margin-inline: auto; }
  .tv-entrada__foto img { aspect-ratio: 4 / 5; max-height: 80svh; object-position: 50% 10%; }

  /* dos atmósferas, la tesis: la azul grande sobre la luz; la dorada contenida y en tinta */
  .tv-atmosferas { display: grid; }
  .atmosfera { display: grid; align-content: start; gap: 0.6rem; text-decoration: none; padding-inline: max(var(--orilla), (100% - var(--columna)) / 2); }
  .atmosfera:focus-visible { outline-offset: -6px; }
  .atmosfera--azul { color: var(--cobalto-hondo); padding-block: 3.5rem 3rem; }
  .atmosfera--dorada { background: #0b0a09; color: var(--ambar-claro); --acento: var(--ambar); padding-block: 3rem 3.5rem; }
  .atmosfera__foto { display: block; overflow: hidden; margin-bottom: 0.6rem; }
  .atmosfera__foto img { width: 100%; object-fit: cover; }
  .atmosfera--azul .atmosfera__foto img { aspect-ratio: 4 / 5; max-height: 80svh; object-position: 50% 45%; }
  .atmosfera--dorada .atmosfera__foto { width: 58%; justify-self: end; }
  .atmosfera--dorada .atmosfera__foto img { aspect-ratio: 2 / 3; object-position: 45% 50%; }
  .atmosfera__nombre { font-family: var(--display); font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; text-underline-offset: 0.12em; text-decoration-thickness: 1px; }
  .atmosfera--dorada .atmosfera__nombre { font-size: clamp(1.8rem, 1.1rem + 1.8vw, 2.8rem); }
  /* espacio duro: la flecha nunca queda sola en otra línea */
  .atmosfera__nombre::after { content: '\00a0↓'; content: '\00a0↓' / ''; font-family: var(--texto); font-weight: 300; font-size: 0.45em; vertical-align: 0.3em; }
  .atmosfera:hover .atmosfera__nombre { text-decoration-line: underline; }
  .atmosfera__linea { font-size: 1.2rem; line-height: 1.4; color: var(--tinta); }
  .atmosfera--dorada .atmosfera__linea { color: #d6cdbf; }

  /* Bóveda azul: eje vertical. m17 es el segundo ángulo; el óculo, pequeño y encimado */
  .tv-boveda { padding-block: clamp(4.5rem, 3.5rem + 4vw, 8rem); }
  .tv-boveda__eje { display: grid; justify-items: center; text-align: center; gap: clamp(1.5rem, 3vw, 2.25rem); }
  .tv-boveda .cuarto-titulo { color: var(--cobalto-hondo); }
  .tv-boveda__fotos { position: relative; width: min(100%, 36rem); margin-bottom: 1.5rem; }
  .tv-boveda__foto img { aspect-ratio: 3 / 4; }
  .tv-boveda__oculo { position: absolute; right: -0.25rem; bottom: -2rem; width: clamp(6.5rem, 5rem + 3vw, 8.5rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 0.35rem solid var(--fondo); }
  .tv-boveda__oculo img { height: 100%; }
  .tv-boveda .sensorial { max-width: 30ch; }

  /* Penumbra dorada: la luz se pierde antes de que llegue el contenido (campo fijo, visible sin animación).
     El cuarto ya se vio en la tesis; aquí solo la otra bóveda dorada, pequeña */
  .tv-penumbra {
    padding-block: clamp(15rem, 12rem + 8vw, 22rem) clamp(4.5rem, 3.5rem + 3vw, 7rem);
    background-color: #0b0a09;
    background-image: linear-gradient(#e7eaea, #0b0a09 clamp(11rem, 8rem + 8vw, 18rem));
    background-image: linear-gradient(in oklab, #e7eaea, #0b0a09 clamp(11rem, 8rem + 8vw, 18rem));
  }
  .tv-penumbra__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--hueco); }
  .tv-penumbra__rejilla > * { grid-column: 1 / -1; }
  .tv-penumbra .cuarto-titulo { color: var(--ambar-claro); }
  .tv-penumbra .sensorial { max-width: 24ch; }
  .tv-penumbra__rejilla > .tv-penumbra__otra { grid-column: 1; margin-top: 0.5rem; }
  .tv-penumbra__otra img { aspect-ratio: 3 / 4; }
  .tv-penumbra .ir--discreto { justify-self: start; }

  .tv-reservar { border-top: 1px solid var(--linea); padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
  .tv-reservar__fila { display: grid; justify-items: start; gap: 1.5rem; }
  .tv-reservar__fila > div:first-child { display: grid; gap: 0.4rem; }

  /* siguiente capítulo: el agua asoma */
  .tv-jacuzzi { display: block; background: #eeeeea; color: var(--tinta); text-decoration: none; padding-block: clamp(4rem, 3rem + 3vw, 6rem); }
  .tv-jacuzzi__rejilla { display: grid; gap: 1.5rem; }
  .tv-jacuzzi__texto { display: grid; gap: 0.5rem; }
  .tv-jacuzzi__rotulo { font-size: 1.25rem; color: var(--piedra-tinta); }
  .tv-jacuzzi__titulo { font-family: var(--display); font-size: clamp(3rem, 1.6rem + 4.4vw, 6rem); line-height: 0.9; letter-spacing: -0.025em; transition: color .3s var(--curva); }
  .tv-jacuzzi__titulo::after { content: ' →'; content: ' →' / ''; font-family: var(--texto); font-weight: 300; font-size: 0.45em; vertical-align: 0.3em; }
  .tv-jacuzzi:hover .tv-jacuzzi__titulo { color: var(--cobalto); }
  .tv-jacuzzi__foto { display: block; }
  .tv-jacuzzi__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 100%; }

  /* ════════════════════════════════════════════════════════
     BÓVEDA AZUL — vertical y descendente: el arco, el cuarto de frente, el óculo pequeño
     ════════════════════════════════════════════════════════ */
  .eje { display: grid; justify-items: center; text-align: center; }
  .ba-entrada { padding-block: clamp(1.5rem, 3vw, 3rem) clamp(3.5rem, 3rem + 2vw, 5rem); }
  .ba-entrada__rejilla { display: grid; gap: 1.5rem; }
  .ba-entrada__texto { display: grid; gap: 1.25rem; }
  .ba-entrada .titulo { color: var(--cobalto-hondo); font-size: clamp(3.2rem, 1.4rem + 5.4vw, 6.5rem); }
  .ba-entrada__foto img { aspect-ratio: 3 / 4; }
  .ba-cuarto { padding-bottom: clamp(5rem, 4rem + 3vw, 7rem); }
  .ba-cuarto__rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
  .ba-cuarto__foto { grid-column: 3 / -1; grid-row: 1; }
  .ba-cuarto__foto img { aspect-ratio: 1170 / 1527; }
  /* el óculo (702 px, centro quemado): pequeño, nunca a lo ancho */
  .oculo { grid-column: 1 / span 2; grid-row: 1; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
  .oculo img { height: 100%; }

  .ba-seguir { border-top: 1px solid var(--linea); padding-block: clamp(4rem, 3rem + 3vw, 6rem); }
  .ba-seguir .eje { gap: 2rem; }
  .ba-seguir__cuarto { display: inline-block; font-family: var(--display); font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.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(--acento); }

  /* ════════════════════════════════════════════════════════
     PENUMBRA DORADA — el cuarto en tinta, luego la otra bóveda dorada pequeña
     ════════════════════════════════════════════════════════ */
  .pd-escena { padding-block: clamp(1.5rem, 3vw, 3rem) clamp(5rem, 4rem + 3vw, 7rem); }
  .pd-escena__rejilla { display: grid; gap: 1.5rem; }
  .pd-escena__foto img { aspect-ratio: 4 / 5; max-height: 80svh; object-position: 50% 40%; }
  .pd-escena__texto { display: grid; gap: 1.25rem; }
  .pd-escena .titulo { color: var(--ambar-claro); font-size: clamp(3rem, 1.5rem + 4.4vw, 6rem); }
  .pd-otra { padding-bottom: clamp(5rem, 4rem + 3vw, 7rem); }
  .pd-otra__rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 1.5rem; }
  /* g04 mide 768 px: nunca más de dos tercios de la columna */
  .pd-otra__foto { grid-column: 1 / span 4; }
  .pd-otra__foto img { aspect-ratio: 3 / 4; }
  .pd-otra .nota { grid-column: 1 / -1; font-size: 1.2rem; max-width: 36ch; }
  .pd-seguir { border-top: 1px solid var(--linea); }
  .pd-seguir__fila { display: grid; }
  .pd-seguir a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); font-family: var(--display); font-size: var(--t-sub); line-height: 1.05; text-decoration: none; color: var(--texto-color); }
  .pd-seguir a + a { border-top: 1px solid var(--linea); }
  .pd-seguir a:hover { color: var(--ambar-claro); }

  /* ════════════════════════════════════════════════════════
     EL LUGAR — recorrido
     ════════════════════════════════════════════════════════ */
  .lg-cabeza { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(3.5rem, 3rem + 3vw, 6rem); }
  .lg-cabeza__rejilla { display: grid; gap: 1.5rem; }
  .recorrido { display: grid; gap: clamp(4.5rem, 3.5rem + 3vw, 7rem); padding-bottom: clamp(5rem, 4rem + 3vw, 8rem); }
  .paso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--hueco); }
  .paso > * { grid-column: 1 / -1; }
  .paso--mosaico figure { grid-column: auto; }
  .paso p { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem); line-height: 1.4; max-width: 32ch; }
  .paso--recepcion img { aspect-ratio: 4 / 5; max-height: 80svh; object-position: 50% 28%; }
  .paso--arco img { aspect-ratio: 4 / 5; max-height: 80svh; }
  .paso--agua img, .paso--jardin img { aspect-ratio: 4 / 3; }
  .paso--mosaico img { aspect-ratio: 3 / 4; }

  /* ════════════════════════════════════════════════════════
     GALERÍA — la misma rejilla de dos columnas, más ancha en escritorio
     ════════════════════════════════════════════════════════ */
  .ga-cabeza, .ga-archivo { --ancho: 56rem; }
  .ga-cabeza { padding-block: clamp(2.5rem, 2rem + 3vw, 4.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 clamp(0.7rem, 1.5vw, 1.5rem); }
  .filtros 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(--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(2, 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, .archivo__rejilla .c { aspect-ratio: 3 / 4; }
  .archivo__rejilla .h, .archivo__rejilla .ancha-movil { grid-column: span 2; aspect-ratio: 4 / 3; }
  .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: 1.1rem; color: var(--claro-suave); text-align: center; flex: 1; }

  /* ════════════════════════════════════════════════════════
     VISITA · RESERVAR · 404 — utilitarias
     ════════════════════════════════════════════════════════ */
  .visita { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(5rem, 4rem + 4vw, 8rem); }
  .visita__datos { display: grid; gap: 2.5rem; align-items: start; }
  .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.9rem; font-weight: 600; letter-spacing: 0.02em; color: var(--suave); }
  .visita address, .visita__dato { font-family: var(--display); font-style: italic; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.22; }
  .tel-grande { display: inline-block; padding-block: 0.15em; font-family: var(--display); font-size: clamp(2.2rem, 1rem + 5vw, 4.25rem); 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.4rem; }
  .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 — el arco entre páginas, la entrada, el alejarse de la Bóveda azul 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; } }
    /* Temazcal + Vapor: el arco se abre (800 ms) y el título se asienta un instante después */
    .tv-entrada__foto img { animation: arco-abre .8s var(--curva) both; }
    .tv-entrada .titulo { animation-delay: .15s; }
    @keyframes arco-abre { from { clip-path: inset(14% 14% 0 14% 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); } }

    @supports (animation-timeline: view()) {
      /* la foto azul se aleja al salir de la pantalla */
      .tv-boveda__fotos { animation: retrocede linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
      @keyframes retrocede { to { scale: 0.94; opacity: 0.45; } }
    }
  }

  @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 — la composición es la misma; aquí solo cambia el cromo
     (cabecera compacta, barra de contacto, pie apilado) y las fotos que tocan los bordes
     ════════════════════════════════════════════════════════ */
  @media (max-width: 56.24rem) {
    :root { --cabecera: 3.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; }
    .idioma { margin-left: auto; }
    .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__fila { display: grid; justify-items: start; gap: 1rem; }
    .pie__datos { text-align: left; }
    .pie__nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; border-top: 1px solid rgb(236 232 225 / 0.12); padding-top: 0.5rem; width: 100%; }
    .seguir__rejilla { grid-template-columns: 1fr; }
    .seguir a + a { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; }

    .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; }

    /* a sangre: en el teléfono estas fotos tocan los dos bordes */
    .jz-apertura__foto, .pd-escena__foto { margin-inline: calc(var(--orilla) * -1); }
    .filtros a { font-size: 0.9375rem; }
  }
}