/* ═══════════════════════════════════════════════════════════════════════════
   RADANTA · la casa, en digital
   El sistema sale de la recepción: la MOLDURA es la estructura (marcos de línea
   fina separados de la foto), el ESPEJO es el acento, el WORDMARK es la
   autoridad y la LUZ cálida solo aparece como luz.
   Tres picos, nada más: la portada, el selector de Tecnología y el panorama de
   La casa. Solo la carta es densa; en las demás rutas lo exhaustivo queda a un
   clic. Registros: inicio arquitectónico, piel luminosa y precisa, cuerpo
   cálido y amplio, tecnología con un capítulo en tinta, la casa fotográfica,
   carta quieta, visita funcional.
   Dos familias. Un solo corte: 56.25rem. El contenido nunca depende de JS.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens, base, marco, componentes, escenas, rutas, movimiento;

@font-face { font-family: 'Tenor Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/tenor-sans.f0519cf5.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; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fuentes/hanken-grotesk.e9201edd.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; }
/* respaldo métrico medido contra Arial: Tenor 1.047 · asc .920 · desc .250 — Hanken .995 · asc 1.000 · desc .300 */
@font-face { font-family: 'Tenor Respaldo'; src: local('Arial'); size-adjust: 104.7%; ascent-override: 87.9%; descent-override: 23.9%; line-gap-override: 0%; }
@font-face { font-family: 'Hanken Respaldo'; src: local('Arial'); size-adjust: 99.5%; ascent-override: 100.5%; descent-override: 30.2%; line-gap-override: 0%; }

@layer tokens {
  :root {
    /* medidos sobre las fotos del local (AUDITORIA-ASSETS.md, identidad.md) */
    --porcelana: #f6f2ea;
    --hueso: #ece5d8;
    --lino: #e4d9c7;
    --marmol: #f9f7f2;
    --tinta: #1c1a17;
    --tinta-calida: #241f19;
    --grafito: #1a1b1a;
    --taupe: #6d5f4d;
    --taupe-oscuro: #54483a;
    --taupe-claro: #b3a58f;
    --luz: #d9bd7e;
    --linea: rgb(28 26 23 / .14);
    --linea-fuerte: rgb(28 26 23 / .34);
    --linea-clara: rgb(236 229 216 / .22);

    --f-display: 'Tenor Sans', 'Tenor Respaldo', Optima, Candara, sans-serif;
    --f-texto: 'Hanken Grotesk', 'Hanken Respaldo', Arial, sans-serif;

    --t-mini: .8125rem;
    --t-peq: .9375rem;
    --t-cuerpo: 1.0625rem;
    --t-lead: clamp(1.125rem, 1rem + .5vw, 1.4rem);
    --t-fila: clamp(1.2rem, 1.05rem + .45vw, 1.55rem);
    --t-frase: clamp(1.55rem, 1rem + 2vw, 2.85rem);
    --t-escena: clamp(2.3rem, 1.1rem + 4.2vw, 5.4rem);
    --t-mundo: clamp(2.7rem, 1.2rem + 4.8vw, 6.4rem);
    --t-ruta: clamp(3.4rem, 1.3rem + 7.6vw, 9rem);
    --t-cifra: clamp(7rem, 2rem + 15vw, 18rem);

    --canal: clamp(1.25rem, .4rem + 3.4vw, 3.5rem);
    --medianil: clamp(1rem, .6rem + 1.6vw, 2.25rem);
    --max: 90rem;
    /* escritorio: todas las composiciones comparten un ancho y un hueco alrededor del eje */
    --ancho: 72rem;
    --hueco: clamp(2.5rem, 1rem + 4vw, 6rem);
    --moldura: clamp(.55rem, .35rem + .6vw, 1.05rem);
    --alto-cab: 4.25rem;

    --curva: cubic-bezier(.22, .61, .22, 1);
    --curva-marco: cubic-bezier(.7, 0, .18, 1);

    --suelo: var(--porcelana);
    --texto: var(--tinta);
    --texto-2: var(--taupe);
    --trazo: var(--linea);
    --trazo-fuerte: var(--linea-fuerte);
  }
  @media (min-width: 56.25rem) { :root { --alto-cab: 5.25rem; } }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cab) + 1.5rem); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    margin: 0; background: var(--suelo); color: var(--texto);
    font: 400 var(--t-cuerpo)/1.6 var(--f-texto);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;
  }
  h1, h2, h3 { font-family: var(--f-display); font-weight: 400; margin: 0; line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
  p, li, dt, dd { text-wrap: pretty; }
  /* los nombres cortos de dos líneas: pretty no reparte, balance sí («Masaje relajante + / facial hidratante») */
  .fila__nombre, .indice-corto li > span:first-child, .prueba__dato { text-wrap: balance; }
  p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  address { font-style: normal; }
  button { font: inherit; color: inherit; }
  figcaption { margin-top: .6rem; font-size: var(--t-mini); line-height: 1.4; color: var(--texto-2); }
  ::selection { background: var(--tinta); color: var(--porcelana); }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
}

@layer marco {
  /* el canal es relleno, no margen: los sangrados deliberados caen dentro de la caja y no desbordan su contenedor */
  .envoltura { width: min(100%, var(--max) + 2 * var(--canal)); padding-inline: var(--canal); margin-inline: auto; }
  .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .saltar { position: absolute; left: .75rem; top: .75rem; z-index: 60; padding: .7rem 1rem; background: var(--tinta); color: var(--porcelana); translate: 0 -300%; }
  .saltar:focus { translate: 0 0; }
  .num { font-variant-numeric: tabular-nums lining-nums; }

  /* registros: la misma marca, otro ritmo */
  .p-piel { --suelo: var(--marmol); }
  .p-cuerpo { --suelo: var(--hueso); }
  .tinta { --suelo: var(--tinta); --texto: var(--hueso); --texto-2: var(--taupe-claro); --trazo: var(--linea-clara); --trazo-fuerte: rgb(236 229 216 / .4); background: var(--suelo); color: var(--texto); }

  /* la moldura: la foto y, separada, su línea fina. Nunca un marco dibujado alrededor de todo */
  .moldura { position: relative; padding: var(--moldura); border: 1px solid var(--trazo-fuerte); }
  .moldura > img { width: 100%; height: 100%; object-fit: cover; }
  /* los paneles de su recepción tienen doble filo: la línea interior va entre el marco y la foto */
  .moldura--doble::after { content: ''; position: absolute; inset: calc(var(--moldura) / 2); border: 1px solid var(--trazo); pointer-events: none; }
  .apertura { overflow: clip; }
}

@layer componentes {
  /* ── CABECERA ── */
  .cabecera { position: sticky; top: 0; z-index: 40; background: var(--suelo); color: var(--texto); view-transition-name: cabecera; }
  .cabecera__in { display: flex; align-items: center; gap: .75rem; min-height: var(--alto-cab); border-bottom: 1px solid transparent; }
  .marca { display: inline-flex; align-items: center; min-height: 2.75rem; flex-shrink: 1; min-width: 0; }
  .wordmark {
    display: block; width: 7rem; aspect-ratio: 919 / 267; background: currentColor;
    -webkit-mask: url('/img/wordmark.76805ab2.svg') center / contain no-repeat;
            mask: url('/img/wordmark.76805ab2.svg') center / contain no-repeat;
  }
  .nav { display: none; }
  .nav ul { display: flex; gap: clamp(.25rem, -.4rem + 1.2vw, 1.25rem); }
  .nav a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding-inline: .6rem;
    font-size: var(--t-peq); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .45em;
    transition: text-decoration-color .3s var(--curva);
  }
  .nav a:hover, .nav a[aria-current='page'] { text-decoration-color: currentColor; }
  /* con el selector de la cabecera: la regla general .reservar va después y le ganaba al display:none */
  .cabecera .reservar--cab { display: none; }
  /* en el teléfono el grupo de acciones no genera caja: la cabecera móvil queda exactamente igual */
  .cabecera__acciones { display: contents; }
  /* ES / EN: texto, sin banderas; en el teléfono vive dentro del índice, no en la cabecera */
  .idioma { display: flex; align-items: center; font: 500 var(--t-mini)/1 var(--f-texto); letter-spacing: .08em; }
  .idioma a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--texto-2); text-decoration: none; }
  .idioma a:hover { color: var(--texto); }
  .idioma a[aria-current] { color: var(--texto); text-decoration: underline; text-underline-offset: .45em; }
  .idioma span { color: var(--texto-2); }
  .cabecera .idioma { display: none; }
  .nav-abrir {
    margin-inline-start: auto; flex-shrink: 0; appearance: none; background: none; border: 1px solid var(--trazo-fuerte); border-radius: 0; cursor: pointer;
    min-height: 2.75rem; min-width: 2.75rem; padding: .7rem .8rem; font: 500 var(--t-mini)/1 var(--f-texto); letter-spacing: .04em;
  }
  @media (min-width: 56.25rem) {
    .wordmark { width: 8.5rem; }
    .cabecera__in { width: min(100%, var(--ancho) + 2 * var(--canal)); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .cabecera .marca { justify-self: start; }
    .nav { display: block; justify-self: center; }
    .cabecera__acciones { display: flex; align-items: center; justify-self: end; gap: clamp(.5rem, 1.5vw, 1.5rem); }
    .cabecera .idioma { display: flex; }
    .cabecera .reservar--cab { display: inline-flex; flex-shrink: 0; min-height: 2.75rem; padding: .75rem 1.35rem; }
    .cabecera .nav-abrir { display: none; }
  }

  /* ── ÍNDICE MÓVIL ── */
  .indice-movil { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 var(--canal) 2rem; border: 0; background: var(--porcelana); color: var(--tinta); overflow-y: auto; }
  .indice-movil:popover-open { display: flex; flex-direction: column; }
  .indice-movil__cab { display: flex; justify-content: space-between; align-items: center; min-height: var(--alto-cab); }
  .indice-movil nav { margin-top: 1.25rem; border-top: 1px solid var(--linea-fuerte); }
  .indice-movil nav a { display: block; padding: .6rem 0; border-bottom: 1px solid var(--linea); font: 400 clamp(2rem, 1.3rem + 4vw, 2.75rem)/1.15 var(--f-display); text-decoration: none; }
  .indice-movil nav a[aria-current='page'] { color: var(--taupe); }
  .indice-movil__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: auto; padding-top: 2rem; }
  .indice-movil .nav-abrir { margin: 0; }
  .indice-movil .idioma { margin-inline-start: auto; font-size: var(--t-peq); }

  /* ── ACCIONES: una principal, las demás en texto ── */
  .reservar {
    display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .9rem 1.75rem;
    background: var(--texto); color: var(--suelo); border: 1px solid var(--texto);
    font: 500 var(--t-mini)/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    transition: background-color .3s var(--curva), color .3s var(--curva);
  }
  .reservar:hover { background: transparent; color: var(--texto); }
  .reservar--grande { min-height: 3.75rem; padding-inline: clamp(1.75rem, 1rem + 2vw, 3rem); font-size: var(--t-peq); }
  /* cuando la acción es preguntar (láser), el mismo peso con otra forma: línea en vez de relleno */
  .reservar--linea { background: transparent; color: var(--texto); }
  .reservar--linea:hover { background: var(--texto); color: var(--suelo); }
  .tinta .reservar { background: var(--porcelana); color: var(--tinta); border-color: var(--porcelana); }
  .tinta .reservar:hover { background: transparent; color: var(--porcelana); }
  .enlace { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-weight: 500; font-size: var(--t-peq); text-decoration: none; }
  .enlace:hover { text-decoration: underline; }
  .flecha { display: inline-block; transition: translate .3s var(--curva); }
  .enlace:hover .flecha, a:hover > .flecha { translate: .3rem 0; }
  .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 2rem; }

  /* ── FILA DE CARTA: solo en la carta. La información es la belleza ── */
  .filas { border-top: 1px solid var(--trazo-fuerte); }
  .fila {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nombre precio' 'detalle detalle' 'dur accion';
    column-gap: 1rem; align-items: baseline; padding-block: 1rem .85rem; border-bottom: 1px solid var(--trazo);
  }
  .fila__nombre { grid-area: nombre; font: 400 var(--t-fila)/1.2 var(--f-display); letter-spacing: -.005em; hyphens: auto; overflow-wrap: break-word; }
  .fila__detalle { grid-area: detalle; margin-top: .2rem; font-size: var(--t-peq); color: var(--texto-2); }
  .fila__dur { grid-area: dur; margin-top: .35rem; font-size: var(--t-peq); color: var(--texto-2); font-variant-numeric: tabular-nums; }
  .fila__precio { grid-area: precio; text-align: right; font: 500 var(--t-cuerpo)/1.2 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  .fila__accion { grid-area: accion; justify-self: end; min-height: 2.75rem; }
  @media (min-width: 56.25rem) {
    .fila {
      grid-template-columns: minmax(0, 1fr) 7rem minmax(6.5rem, auto) 8.5rem;
      grid-template-areas: 'nombre dur precio accion' 'detalle dur precio accion';
      column-gap: 1.25rem; padding-block: 1.05rem;
    }
    .fila__dur { margin-top: 0; }
    .fila__accion { min-height: 0; }
  }
  .nota { margin-top: 1.1rem; font-size: var(--t-peq); color: var(--texto-2); max-width: 54ch; }

  /* ── ÍNDICE CORTO: nombre y precio, sin duración ni botón por renglón. Fuera de la carta, así se lista ── */
  .indice-corto { border-top: 1px solid var(--trazo-fuerte); }
  .indice-corto li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding-block: .7rem; border-bottom: 1px solid var(--trazo); }
  .indice-corto li > span:first-child { font: 400 var(--t-fila)/1.25 var(--f-display); letter-spacing: -.005em; }
  .indice-corto .num { font-size: var(--t-peq); font-weight: 500; white-space: nowrap; }


  .horario div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .55rem; border-bottom: 1px solid var(--trazo); }
  .horario dt { color: var(--texto-2); }
  .horario dd { margin: 0; font-variant-numeric: tabular-nums; }
  .lista-simple { border-top: 1px solid var(--trazo-fuerte); }
  .lista-simple li { padding-block: .55rem; border-bottom: 1px solid var(--trazo); }

  /* ── PANORAMA: el pico de La casa. La ventana ocupa casi toda la altura; nada de controles de carrusel ── */
  .panorama { padding-block: clamp(10rem, 6rem + 14vw, 22rem) clamp(4rem, 3rem + 5vw, 8rem); }
  .panorama__titulo { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); font-size: var(--t-ruta); line-height: .9; letter-spacing: -.025em; }
  .panorama__marco { position: relative; timeline-scope: --panorama; }
  .panorama__vista {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; cursor: grab;
    scrollbar-width: none; scroll-timeline: --panorama inline;
  }
  .panorama__vista::-webkit-scrollbar { display: none; }
  .panorama__vista:focus-visible { outline-offset: -4px; }
  .panorama__vista.arrastrando { cursor: grabbing; user-select: none; }
  .panorama__pista { position: relative; width: max-content; height: clamp(22rem, 64svh, 38rem); }
  .panorama__pista img { width: auto; height: 100%; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
  .panorama__rotulo {
    position: absolute; bottom: 1.25rem; left: calc(var(--x) * 100%); translate: -50% 0; padding: .35rem .6rem;
    background: rgb(246 242 234 / .74); color: var(--tinta); font: 400 var(--t-mini)/1 var(--f-texto); letter-spacing: .04em; white-space: nowrap; pointer-events: none;
  }
  .panorama__ayuda {
    position: absolute; top: 1.25rem; right: var(--canal); padding: .55rem .8rem; pointer-events: none;
    background: rgb(28 26 23 / .78); color: var(--porcelana); font: 500 var(--t-peq)/1 var(--f-texto); letter-spacing: .02em;
    transition: opacity .45s var(--curva);
  }
  .panorama__ayuda-tactil { display: none; }
  @media (pointer: coarse) { .panorama__ayuda-raton { display: none; } .panorama__ayuda-tactil { display: inline; } }
  .panorama.movido .panorama__ayuda { opacity: 0; }
  .panorama__progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--porcelana); transform-origin: left; scale: 0 1; opacity: .9; pointer-events: none; }
  .panorama__despues { margin-top: clamp(2.5rem, 1.5rem + 3vw, 5rem); font: 400 var(--t-frase)/1.12 var(--f-display); }
  @media (min-width: 56.25rem) {
    .panorama__pista { height: clamp(26rem, 80svh, 56rem); }
    .panorama > .envoltura { width: min(100%, var(--ancho) + 2 * var(--canal)); }
    .panorama__despues { width: fit-content; margin-inline: auto; }
  }

  /* ── PIE: compacto. La dirección completa y el horario viven en Visita ── */
  .pie { padding-block: 2.5rem calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--trazo); font-size: var(--t-peq); color: var(--texto-2); }
  .pie__in { display: grid; gap: 1.25rem; }
  .pie .wordmark { color: var(--texto); }
  .pie__marca p { margin-top: .2rem; }
  .pie a { color: var(--texto); text-decoration: none; }
  .pie a:hover { text-decoration: underline; }
  .pie__rutas, .pie__contacto { display: flex; flex-wrap: wrap; gap: 0 1.35rem; }
  .pie__rutas a, .pie__contacto a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
  .pie__legal { font-size: var(--t-mini); }
  @media (min-width: 56.25rem) {
    /* dos extremos arriba (marca y contacto), las rutas en el eje debajo: tres zonas no caben en una fila */
    .pie__in { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'marca contacto' 'rutas rutas' 'legal legal'; align-items: start; column-gap: var(--hueco); }
    .pie__marca { grid-area: marca; }
    .pie__contacto { grid-area: contacto; justify-content: flex-end; }
    .pie__rutas { grid-area: rutas; justify-content: center; padding-top: .5rem; border-top: 1px solid var(--trazo); }
    .pie__legal { grid-area: legal; text-align: center; }
  }

  /* ── BARRA DE RESERVA EN MÓVIL: discreta, nunca tapa contenido ── */
  .barra-reserva {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: flex; align-items: center; gap: 1rem; padding: .6rem var(--canal) calc(.6rem + env(safe-area-inset-bottom));
    background: var(--porcelana); color: var(--tinta); border-top: 1px solid var(--linea-fuerte);
  }
  .barra-reserva .reservar { flex: 1; min-height: 2.9rem; background: var(--tinta); color: var(--porcelana); border-color: var(--tinta); }
  body:has(.barra-reserva) { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
  @media (min-width: 56.25rem) {
    .barra-reserva { display: none; }
    body:has(.barra-reserva) { padding-bottom: 0; }
  }
}

@layer escenas {
  /* ═════ A · PORTADA: RADANTA, el espacio real, Juriquilla y reservar. Nada más compite ═════ */
  .portada { display: grid; gap: 1.25rem; padding: 1.25rem var(--canal) 0; }
  .portada__meta { font: 300 var(--t-lead)/1.3 var(--f-texto); }
  .portada__nombre { margin: 0; line-height: 0; }
  .portada__nombre .nombre { display: block; width: 100%; height: auto; color: var(--tinta); }
  .portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1.25rem; }
  /* overflow: clip porque la apertura escala la foto a 1.08 y una transformación sí agranda el área desplazable */
  .portada__foto { margin: .5rem calc(-1 * var(--canal)) 0 0; border-right: 0; overflow: clip; }
  .portada__foto img { aspect-ratio: 4 / 5; object-position: 50% 36%; }
  @media (min-width: 56.25rem) {
    /* escritorio: dos mitades alrededor del eje. El nombre y la acción en una; la recepción, contenida, en la otra */
    .portada {
      width: min(100%, var(--ancho) + 2 * var(--canal)); margin-inline: auto; padding: clamp(1.5rem, 4vh, 3rem) var(--canal);
      grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center;
      min-height: clamp(36rem, calc(100svh - var(--alto-cab)), 56rem);
    }
    .portada__texto { grid-column: 1; grid-row: 1; }
    .portada__nombre { margin-top: clamp(1rem, 3vh, 1.75rem); }
    .portada__acciones { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
    .portada__foto { grid-column: 2; grid-row: 1; justify-self: center; width: min(100%, 30rem); margin: 0; border-right: 1px solid var(--linea-fuerte); }
  }

  /* ═════ C · MUNDOS: la elección. La imagen pesa más que el texto ═════ */
  .mundos { padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(4rem, 2.5rem + 6vw, 9rem); }
  /* móvil: la lista va al ancho del padding y cada enlace pone el suyo, así el sangrado de la foto
     cae dentro de su enlace y ningún contenedor desborda; las líneas conservan la sangría del canal */
  .mundos__lista { margin-inline: calc(-1 * var(--canal)); background: linear-gradient(var(--linea-fuerte), var(--linea-fuerte)) top center / calc(100% - 2 * var(--canal)) 1px no-repeat; }
  .mundo__enlace { display: grid; grid-template-areas: 'foto' 'nombre' 'linea' 'precio' 'cta'; padding: 1.5rem var(--canal) 1.25rem; background: linear-gradient(var(--linea-fuerte), var(--linea-fuerte)) bottom center / calc(100% - 2 * var(--canal)) 1px no-repeat; text-decoration: none; transition: color .4s var(--curva); }
  .mundo__foto { grid-area: foto; margin: 0 calc(-1 * var(--canal)) 1.25rem 0; overflow: clip; }
  .mundo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .mundo__nombre { grid-area: nombre; font: 400 var(--t-mundo)/.95 var(--f-display); letter-spacing: -.02em; }
  .mundo__linea { grid-area: linea; margin-top: .6rem; font-size: var(--t-peq); color: var(--taupe); }
  .mundo__precio { grid-area: precio; margin-top: .35rem; font: 500 var(--t-lead)/1.3 var(--f-texto); font-variant-numeric: tabular-nums; }
  .mundo__cta { grid-area: cta; margin-top: .6rem; font-size: var(--t-peq); font-weight: 500; }
  .mundos__campo { display: none; }
  /* móvil: tres escenas verticales, cada una con su propia coreografía (no tres bloques iguales) */
  .mundos__lista li:nth-child(2) .mundo__enlace { justify-items: end; text-align: right; }
  .mundos__lista li:nth-child(2) .mundo__foto { justify-self: stretch; margin: 0 0 1.25rem calc(-1 * var(--canal)); }
  .mundos__lista li:nth-child(2) .mundo__foto img { aspect-ratio: 1; }
  .mundos__lista li:nth-child(3) .mundo__foto { margin: 0 0 1.25rem; padding: var(--moldura); border: 1px solid var(--linea-fuerte); }
  .mundos__lista li:nth-child(3) .mundo__foto img { aspect-ratio: 5 / 4; }
  .mundos__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 2rem; }
  @media (min-width: 56.25rem) {
    .mundos { width: min(100%, var(--ancho) + 2 * var(--canal)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
    .mundos__lista { grid-column: 1; grid-row: 1; margin-inline: 0; background: none; border-top: 1px solid var(--linea-fuerte); }
    .mundos__pie { grid-column: 1; grid-row: 2; }
    .mundo__enlace, .mundos__lista li:nth-child(2) .mundo__enlace { grid-template-areas: 'nombre nombre' 'linea cta' 'precio cta'; grid-template-columns: 1fr auto; padding: 1.75rem 0 1.5rem; background: none; border-bottom: 1px solid var(--linea-fuerte); justify-items: stretch; text-align: left; }
    .mundo__foto { display: none; }
    .mundo__cta { align-self: end; opacity: 0; translate: -.4rem 0; transition: opacity .35s var(--curva), translate .35s var(--curva); }
    .mundos__campo { display: block; position: relative; grid-column: 2; grid-row: 1 / 3; justify-self: center; width: min(100%, 30rem); aspect-ratio: 4 / 5; }
    .mundos__campo figure { position: absolute; inset: 0; margin: 0; overflow: clip; clip-path: inset(0 0 0 100%); transition: clip-path .5s var(--curva-marco); }
    .mundos__campo img { width: 100%; height: 100%; object-fit: cover; scale: 1.06; translate: -2.5% 0; transition: scale .9s var(--curva), translate .9s var(--curva); }
    .mundos__campo figcaption { position: absolute; left: var(--moldura); bottom: var(--moldura); margin: 0; padding: .35rem .6rem; background: var(--porcelana); color: var(--tinta); }

    .mundos:not(:has(.mundo__enlace:is(:hover, :focus-visible))) .mundos__campo [data-i='piel'],
    .mundos:has(.mundo__enlace[data-i='piel']:is(:hover, :focus-visible)) .mundos__campo [data-i='piel'],
    .mundos:has(.mundo__enlace[data-i='cuerpo']:is(:hover, :focus-visible)) .mundos__campo [data-i='cuerpo'],
    .mundos:has(.mundo__enlace[data-i='tecnologia']:is(:hover, :focus-visible)) .mundos__campo [data-i='tecnologia'] { clip-path: inset(0); }
    .mundos:not(:has(.mundo__enlace:is(:hover, :focus-visible))) .mundos__campo [data-i='piel'] img,
    .mundos:has(.mundo__enlace[data-i='piel']:is(:hover, :focus-visible)) .mundos__campo [data-i='piel'] img,
    .mundos:has(.mundo__enlace[data-i='cuerpo']:is(:hover, :focus-visible)) .mundos__campo [data-i='cuerpo'] img,
    .mundos:has(.mundo__enlace[data-i='tecnologia']:is(:hover, :focus-visible)) .mundos__campo [data-i='tecnologia'] img { scale: 1; translate: 0 0; }
    .mundos:not(:has(.mundo__enlace:is(:hover, :focus-visible))) .mundo__enlace[data-i='piel'] .mundo__cta,
    .mundo__enlace:is(:hover, :focus-visible) .mundo__cta { opacity: 1; translate: 0 0; }
    .mundos:has(.mundo__enlace:is(:hover, :focus-visible)) .mundo__enlace:not(:hover, :focus-visible) { color: var(--taupe); }
  }

  /* ═════ D · AVANCE DE LA CASA: una puerta de cabina, el espejo y la invitación ═════ */
  .avance { display: grid; padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(5rem, 3rem + 8vw, 11rem); }
  .avance__puerta { margin-inline-start: calc(-1 * var(--canal)); }
  .avance__puerta img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 42% 50%; }
  .avance__espejo {
    position: relative; z-index: 1; width: min(42vw, 11rem); aspect-ratio: 1; margin: -5.5rem var(--moldura) 0 auto; border-radius: 50%; overflow: clip;
    box-shadow: 0 0 0 var(--moldura) var(--suelo), 0 0 0 calc(var(--moldura) + 1px) var(--linea-fuerte);
  }
  .avance__espejo img { width: 100%; height: 100%; object-fit: cover; }
  .avance__texto { margin-top: 1.5rem; }
  .avance__titulo { font: 400 var(--t-frase)/1.12 var(--f-display); max-width: 17ch; }
  /* en inglés «Three treatment rooms.» no cabe en 17ch y dejaba «rooms.» sola; el español no cambia */
  html[lang='en'] .avance__titulo { max-width: 22ch; }
  .avance__texto .enlace { margin-top: 1rem; }
  @media (min-width: 56.25rem) {
    .avance { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; column-gap: var(--hueco); }
    .avance__puerta { grid-column: 1; grid-row: 1 / 3; margin: 0; align-self: center; }
    .avance__puerta img { aspect-ratio: 1500 / 1150; }
    .avance__espejo { grid-column: 2; grid-row: 1; align-self: end; width: min(100%, 12rem); margin: 0 0 0 var(--moldura); }
    .avance__texto { grid-column: 2; grid-row: 2; align-self: start; margin: 1.75rem 0 0; }
  }

  /* ═════ E · TECNOLOGÍA Y AUTORIDAD (tinta): el paso de la luz al contraste antes de entrar a Tecnología ═════ */
  .tecnica { padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); }
  .tecnica__in { display: grid; gap: 2.5rem; }
  .tecnica__lista { border-top: 1px solid var(--linea-clara); }
  .tecnica__lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1.25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linea-clara); text-decoration: none; }
  .tecnica__lista a > span:first-child { font: 400 var(--t-frase)/1.1 var(--f-display); color: var(--porcelana); }
  .tecnica__lista a > span:last-child { font-size: var(--t-peq); color: var(--taupe-claro); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tecnica__lista a:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .tecnica__natura { margin-top: 1.5rem; font-size: var(--t-peq); color: var(--taupe-claro); }
  .tecnica__natura b { font-weight: 500; color: var(--hueso); }
  .tecnica__foto { width: min(78%, 26rem); margin-inline-start: auto; }
  .tecnica__foto img { aspect-ratio: 4 / 5; }
  @media (min-width: 56.25rem) {
    .tecnica__in { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
    .tecnica__texto { grid-column: 1; }
    .tecnica__foto { grid-column: 2; justify-self: center; width: min(100%, 24rem); margin: 0; }
  }

  /* ═════ F · PRUEBA SOCIAL: la cifra dentro de un panel de moldura, con el doble filo de sus muros ═════ */
  .prueba { display: grid; gap: 2rem; padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); }
  .prueba__panel { position: relative; padding: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem); border: 1px solid var(--linea-fuerte); }
  .prueba__panel::before { content: ''; position: absolute; inset: clamp(.55rem, .4rem + .5vw, 1rem); border: 1px solid var(--linea); pointer-events: none; }
  .prueba__cifra { font: 400 var(--t-cifra)/.78 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-inline-start: -.05em; }
  .prueba__cifra span { font-size: .22em; letter-spacing: 0; color: var(--taupe); margin-inline-start: .06em; }
  .prueba__dato { margin: 1rem 0 .25rem; font: 400 var(--t-frase)/1.15 var(--f-display); }
  .prueba__panel .enlace { position: relative; }
  .prueba__lado { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
  .prueba__lado p { color: var(--taupe); }
  @media (min-width: 56.25rem) {
    .prueba { width: min(100%, 50rem + 2 * var(--canal)); }
    .prueba__panel { aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: flex-end; }
    .prueba__lado { justify-content: space-between; }
  }

  /* ═════ G · REGALO: la foto más nítida del material, a su tamaño ═════ */
  .regalo { background: var(--lino); }
  .regalo__in { display: grid; gap: 2rem; padding-block: 0 clamp(3.5rem, 2rem + 5vw, 7rem); }
  .regalo__foto { margin: 0 var(--canal) 0 0; }
  .regalo__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .regalo__texto { padding-inline: var(--canal); }
  .regalo__titulo { font-size: var(--t-escena); line-height: .95; letter-spacing: -.02em; }
  .regalo__texto p { margin: 1.1rem 0 .4rem; font: 300 var(--t-lead)/1.4 var(--f-texto); }
  @media (min-width: 56.25rem) {
    .regalo__in { width: min(100%, var(--ancho) + 2 * var(--canal)); margin-inline: auto; padding: clamp(4rem, 6vw, 7rem) var(--canal); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
    .regalo__foto { grid-column: 1; justify-self: center; width: min(100%, 28rem); margin: 0; }
    .regalo__texto { grid-column: 2; padding: 0; }
  }

  /* ═════ H · FINAL (tinta): la puerta, el nombre, reservar ═════ */
  .final { display: grid; align-content: center; min-height: min(100svh, 62rem); padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
  .final__in { display: grid; gap: 2.5rem; }
  .final__foto img { aspect-ratio: 4 / 3; }
  .final__nombre { line-height: 0; }
  .final__nombre .nombre { width: 100%; height: auto; color: var(--porcelana); }
  .final__lugar { margin-top: 1rem; font-size: var(--t-peq); color: var(--taupe-claro); }
  .final__lugar a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--hueso); }
  .final__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 2rem; }
  @media (min-width: 56.25rem) {
    .final__in { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
    .final__foto { grid-column: 1; }
    .final__texto { grid-column: 2; }
  }
}

@layer rutas {
  .ruta-titulo { font-size: var(--t-ruta); line-height: .9; letter-spacing: -.025em; }
  .lead { font: 300 var(--t-lead)/1.35 var(--f-texto); font-variant-numeric: tabular-nums; }
  .cierre-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--trazo); }
  .bloque-titulo { font-size: var(--t-frase); margin-bottom: 1.25rem; }

  /* ═════ PIEL · luminosa, precisa, cercana: la cabina primero, el inventario al final y compacto ═════ */
  .piel-apertura { display: grid; }
  .piel-apertura__foto { overflow: clip; }
  .piel-apertura__foto img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 58% 40%; }
  .piel-apertura__texto { padding: 1.5rem var(--canal) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  .piel-apertura__titulo { font-size: clamp(4.2rem, 1.2rem + 10vw, 11.5rem); line-height: .86; letter-spacing: -.03em; }
  .piel-apertura__datos { margin-top: 1.25rem; font: 300 var(--t-lead)/1.4 var(--f-texto); font-variant-numeric: tabular-nums; }
  .piel-apertura__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1.75rem; }
  @media (min-width: 56.25rem) {
    .piel-apertura {
      width: min(100%, var(--ancho) + 2 * var(--canal)); margin-inline: auto; padding: clamp(1.5rem, 4vh, 3rem) var(--canal);
      grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center;
      min-height: clamp(36rem, calc(100svh - var(--alto-cab)), 54rem);
    }
    .piel-apertura__foto { grid-column: 1; grid-row: 1; justify-self: center; width: min(100%, 30rem); }
    .piel-apertura__texto { grid-column: 2; grid-row: 1; padding: 0; }
  }

  /* la selección: tres faciales, tres composiciones. Foto y texto · solo el nombre · la duración como cifra */
  .seleccion { display: grid; gap: clamp(3.5rem, 2rem + 5vw, 7rem); padding-block: clamp(4rem, 2.5rem + 5vw, 8rem); }
  .sel__nombre { font-size: clamp(2.2rem, 1rem + 3.6vw, 4.6rem); line-height: .98; letter-spacing: -.02em; }
  .sel__x { margin-top: .6rem; color: var(--texto-2); }
  .sel__dato { margin-top: .45rem; font-weight: 500; font-variant-numeric: tabular-nums; }
  .sel .enlace { margin-top: .2rem; }
  .sel--foto { display: grid; gap: 1.5rem; }
  .sel--foto .sel__foto { width: min(86%, 30rem); }
  .sel--foto .sel__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 38% 50%; }
  .sel--tipo .sel__nombre { font-size: clamp(3.2rem, 1rem + 8vw, 9.5rem); line-height: .88; letter-spacing: -.035em; }
  .sel--tipo .sel__texto { margin-top: 1.25rem; }
  .sel--cifra { display: grid; gap: .5rem; }
  .sel__cifra { font: 400 clamp(6.5rem, 2rem + 16vw, 16rem)/.8 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; }
  .sel__cifra span { margin-inline-start: .12em; font-size: .18em; letter-spacing: 0; color: var(--taupe); }
  .sel--cifra .sel__nombre { font-size: var(--t-frase); }
  @media (min-width: 56.25rem) {
    .seleccion { width: min(100%, var(--ancho) + 2 * var(--canal)); }
    .sel--foto { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
    .sel--foto .sel__foto { grid-column: 1; justify-self: center; width: min(100%, 26rem); }
    .sel--foto .sel__texto { grid-column: 2; }
    .sel--tipo { width: fit-content; max-width: 100%; margin-inline: auto; }
    .sel--tipo .sel__texto { margin-top: 1.5rem; }
    .sel--cifra { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
    .sel__cifra { grid-column: 1; justify-self: end; }
    .sel--cifra .sel__texto { grid-column: 2; }
  }

  /* Natura Bissé: una pausa material, no un logo de patrocinio */
  .natura { display: grid; gap: 2rem; background: var(--hueso); padding: clamp(4.5rem, 3rem + 6vw, 10rem) var(--canal); }
  .natura__foto { width: min(86%, 28rem); }
  .natura__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
  .natura__nombre { font-size: clamp(3.2rem, 1.2rem + 7vw, 9rem); line-height: .86; letter-spacing: -.03em; }
  .natura__texto p { margin-top: 1.25rem; max-width: 30ch; color: var(--taupe-oscuro); }
  @media (min-width: 56.25rem) {
    .natura { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; padding-inline: max(var(--canal), (100% - var(--ancho)) / 2); }
    .natura__foto { grid-column: 1; justify-self: center; width: min(100%, 28rem); }
    .natura__texto { grid-column: 2; }
  }

  /* la pausa: una sola foto chica, aislada, con aire alrededor. El espejo no se amplía más allá de su tamaño */
  .piel-pausa { display: grid; padding-block: clamp(3.5rem, 2rem + 5vw, 8rem); }
  .piel-pausa__foto { width: min(64vw, 18rem); justify-self: end; margin-inline-end: 8%; }
  .piel-pausa__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .piel-pausa__foto { justify-self: center; width: 100%; max-width: 20rem; margin: 0; }
  }

  /* la invitación a la carta: los 13 no se listan aquí; la carta es la fuente completa */
  .piel-invitacion { display: grid; gap: 1.5rem; padding-block: clamp(3.5rem, 2rem + 5vw, 7rem) clamp(4.5rem, 3rem + 6vw, 9rem); border-top: 1px solid var(--trazo); }
  .piel-invitacion__titulo { font-size: var(--t-escena); line-height: .95; letter-spacing: -.02em; }
  .piel-invitacion__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; }
  @media (min-width: 56.25rem) {
    .piel-invitacion { width: min(100%, var(--ancho) + 2 * var(--canal)); justify-content: center; }
  }

  /* ═════ CUERPO · cálido, físico, amplio: el espacio a lo ancho y la foto antes que la lista ═════ */
  .cuerpo-apertura__cab { display: grid; gap: 1rem; padding-block: clamp(1.75rem, 1rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
  .cuerpo-apertura__titulo { font-size: clamp(4.4rem, 1rem + 12.5vw, 15.5rem); line-height: .8; letter-spacing: -.035em; }
  .cuerpo-apertura__indice { font: 400 var(--t-fila)/1.3 var(--f-display); color: var(--taupe-oscuro); }
  .cuerpo-apertura__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 60%; }
  @media (min-width: 56.25rem) {
    .cuerpo-apertura__cab { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .cuerpo-apertura__titulo { grid-column: 1 / 9; }
    .cuerpo-apertura__indice { grid-column: 9 / 13; padding-bottom: .9rem; }
    .cuerpo-apertura__foto img { aspect-ratio: auto; height: min(76svh, 48rem); object-position: 50% 62%; }
  }

  .masajes { display: grid; gap: 2rem; padding-block: clamp(4.5rem, 3rem + 6vw, 10rem); scroll-margin-top: var(--alto-cab); }
  .masajes__titulo { font-size: var(--t-mundo); line-height: .95; letter-spacing: -.02em; }
  .masajes__dato { margin-top: .75rem; font: 300 var(--t-lead)/1.35 var(--f-texto); font-variant-numeric: tabular-nums; }
  /* la bata contenida, a su tamaño: es una foto de celular, no un plano abierto */
  .masajes__fotos { width: min(88%, 30rem); margin-inline-start: auto; }
  .masajes__fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 60%; }
  @media (min-width: 56.25rem) {
    .masajes { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: start; }
    .masajes__cab { grid-column: 1; grid-row: 1; align-self: end; }
    .masajes__lista { grid-column: 1; grid-row: 2; }
    .masajes__fotos { grid-column: 2; grid-row: 1 / 3; justify-self: center; align-self: center; width: min(100%, 26rem); margin: 0; }
  }

  /* corporal: un cierre chico, sin escala artificial */
  .corporal { display: grid; gap: .75rem; padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
  .corporal__titulo { font: 500 var(--t-peq)/1.3 var(--f-texto); letter-spacing: .02em; color: var(--taupe-oscuro); }
  .corporal__item h3 { font-size: var(--t-frase); line-height: 1.08; letter-spacing: -.01em; }
  .corporal__item p { margin-top: .45rem; font-weight: 500; }
  @media (min-width: 56.25rem) {
    .corporal { width: min(100%, var(--ancho) + 2 * var(--canal)); justify-content: center; }
  }

  /* Body Experience: otra propuesta, otro mundo. El único capítulo oscuro de Cuerpo, en tinta cálida */
  .body-exp { --suelo: var(--tinta-calida); --texto: var(--hueso); --texto-2: var(--taupe-claro); --trazo: var(--linea-clara); background: var(--suelo); color: var(--texto); padding-block: clamp(5rem, 3rem + 8vw, 12rem); scroll-margin-top: var(--alto-cab); }
  .body-exp__in { display: grid; gap: 2.25rem; }
  .body-exp__titulo { font-size: clamp(3.6rem, 1rem + 10.5vw, 13.5rem); line-height: .82; letter-spacing: -.04em; color: var(--porcelana); }
  .body-exp__foto { width: min(52%, 15rem); justify-self: end; }
  .body-exp__foto img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
  .body-exp__lista li { padding-block: .2rem; font: 400 clamp(1.45rem, 1rem + 1.5vw, 2.4rem)/1.2 var(--f-display); letter-spacing: -.01em; }
  .body-exp__nota { margin-top: 1.5rem; color: var(--taupe-claro); }
  @media (min-width: 56.25rem) {
    .body-exp__in { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
    .body-exp__titulo { grid-column: 1 / -1; justify-self: center; }
    .body-exp__foto { grid-column: 1; grid-row: 2; justify-self: end; width: min(100%, 16rem); }
    .body-exp__hechos { grid-column: 2; grid-row: 2; justify-self: start; }
  }

  /* ═════ TECNOLOGÍA · el pico: un capítulo en tinta a toda la altura, índice a la izquierda, campo de imagen hasta el borde ═════ */
  .tec-escena { container-type: inline-size; transition: background-color .5s var(--curva); }
  .tec-escena:has(#tec-venus:checked) { background: var(--tinta-calida); }
  .tec-escena:has(#tec-soprano:checked) { background: var(--grafito); }
  .tec-escena__in { display: grid; grid-template-areas: 'cab' 'campo' 'indice' 'info'; gap: 1.25rem; padding: 1.5rem var(--canal) 2.5rem; }
  .tec-escena__lado { display: contents; }
  .tec-escena__cab { grid-area: cab; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; }
  .tec-escena__titulo { font-size: clamp(2.6rem, 1rem + 5vw, 6.2rem); line-height: .92; letter-spacing: -.025em; color: var(--porcelana); }
  .tec-escena__lead { font: 300 var(--t-peq)/1.35 var(--f-texto); color: var(--taupe-claro); }

  .tec-campo { grid-area: campo; position: relative; aspect-ratio: 1; margin-inline: calc(-1 * var(--canal)); overflow: clip; background: #141310; }
  /* la foto nueva entra sobre la anterior, de derecha a izquierda; la anterior se retira cuando ya quedó cubierta */
  .tec-campo figure { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: clip; clip-path: inset(0 0 0 100%); transition: clip-path 0s linear .55s; }
  .tec-campo img { width: 100%; height: 100%; object-fit: cover; scale: 1.05; transition: scale .9s var(--curva); }
  /* el Soprano es un fotograma chico: se muestra como un objeto sobre el muro oscuro, nunca ampliado */
  .tec-campo figure[data-i='soprano'] { display: grid; place-items: center; background: #141310; }
  .tec-campo figure[data-i='soprano'] img { width: min(46%, 17rem); height: auto; aspect-ratio: 4 / 5; }

  .tec-indice { grid-area: indice; border-top: 1px solid var(--linea-clara); }
  .tec-indice label {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'nombre' 'dato'; align-items: baseline;
    min-height: 3.5rem; padding-block: .9rem; border-bottom: 1px solid var(--linea-clara); color: var(--taupe-claro); cursor: pointer; transition: color .3s var(--curva);
  }
  .tec-indice__nombre { grid-area: nombre; font: 400 clamp(1.5rem, .9rem + 2.3vw, 3.1rem)/1.02 var(--f-display); letter-spacing: -.012em; }
  .tec-indice__dato { grid-area: dato; margin-top: .35rem; font: 400 var(--t-peq)/1.2 var(--f-texto); font-variant-numeric: tabular-nums; }
  .tec-indice label:hover { color: var(--hueso); }
  /* el radio cubre su renglón entero: el objetivo táctil es la fila, no un círculo de 13 px */
  .tec-indice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .tec-indice label:has(:checked) { color: var(--porcelana); }
  .tec-indice label:has(:focus-visible) { outline: 2px solid var(--hueso); outline-offset: 4px; }

  .tec-info { grid-area: info; display: grid; }
  .tec-info > div { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; visibility: hidden; opacity: 0; transition: opacity .12s var(--curva), visibility 0s linear .12s; }
  .tec-info p { font: 300 var(--t-lead)/1.35 var(--f-texto); color: var(--hueso); }

  .tec-escena:has(#tec-lpg:checked) .tec-campo [data-i='lpg'],
  .tec-escena:has(#tec-venus:checked) .tec-campo [data-i='venus'],
  .tec-escena:has(#tec-soprano:checked) .tec-campo [data-i='soprano'] { z-index: 1; clip-path: inset(0); transition: clip-path .5s var(--curva-marco); }
  .tec-escena:has(#tec-lpg:checked) .tec-campo [data-i='lpg'] img,
  .tec-escena:has(#tec-venus:checked) .tec-campo [data-i='venus'] img,
  .tec-escena:has(#tec-soprano:checked) .tec-campo [data-i='soprano'] img { scale: 1; }
  .tec-escena:has(#tec-lpg:checked) .tec-info [data-i='lpg'],
  .tec-escena:has(#tec-venus:checked) .tec-info [data-i='venus'],
  .tec-escena:has(#tec-soprano:checked) .tec-info [data-i='soprano'] { visibility: visible; opacity: 1; transition: opacity .3s var(--curva) .12s, visibility 0s; }
  /* sin :has, nada se esconde: tres fotos, tres textos y ningún control inútil */
  @supports not selector(:has(*)) {
    .tec-indice { display: none; }
    .tec-campo { aspect-ratio: auto; }
    .tec-campo figure { position: static; clip-path: none; }
    .tec-info > div { grid-area: auto; visibility: visible; opacity: 1; }
  }
  @media (min-width: 56.25rem) {
    .tec-escena__in {
      grid-template-areas: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0;
      height: clamp(40rem, calc(100svh - var(--alto-cab)), 60rem); padding: 0;
    }
    .tec-escena__lado { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; padding: clamp(1.75rem, 5vh, 3.5rem) var(--hueco) clamp(1.75rem, 5vh, 3.5rem) max(var(--canal), (100cqw - var(--ancho)) / 2); }
    .tec-escena__cab { display: block; }
    .tec-escena__lead { margin-top: 1rem; font-size: var(--t-lead); }
    .tec-indice { margin-top: auto; }
    .tec-indice label { padding-block: 1.15rem; }
    .tec-info { margin-top: 1.5rem; min-height: 2.75rem; }
    .tec-campo { grid-column: 2; grid-row: 1; aspect-ratio: auto; margin: 0; height: 100%; }
  }

  .tec-nombre { font-size: clamp(2.8rem, 1rem + 6vw, 7.5rem); line-height: .9; letter-spacing: -.028em; }

  /* LPG: el nombre, una foto con su detalle, una frase con los precios; los protocolos, a un clic */
  .tec-lpg { display: grid; gap: 2rem; padding-block: clamp(5rem, 3rem + 7vw, 11rem) clamp(4rem, 3rem + 5vw, 8rem); scroll-margin-top: var(--alto-cab); }
  .tec-lpg__fotos { position: relative; padding-bottom: 3rem; }
  .tec-lpg__foto { width: min(78%, 24rem); }
  .tec-lpg__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 40% 50%; }
  .tec-lpg__detalle { position: absolute; right: 0; bottom: 0; width: min(40%, 11rem); }
  .tec-lpg__detalle img { width: 100%; aspect-ratio: 1; object-fit: cover; outline: var(--moldura) solid var(--suelo); }
  .tec-lpg__regla { font: 300 var(--t-lead)/1.45 var(--f-texto); max-width: 36ch; }
  @media (min-width: 56.25rem) {
    .tec-lpg { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; column-gap: var(--hueco); row-gap: 2rem; }
    .tec-lpg .tec-nombre { grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(2.8rem, 1rem + 4.2vw, 6rem); }
    .tec-lpg__texto { grid-column: 1; grid-row: 2; align-self: start; }
    .tec-lpg__fotos { grid-column: 2; grid-row: 1 / 3; justify-self: center; align-self: center; width: min(100%, 26rem); }
    .tec-lpg__foto { width: 88%; margin-inline-start: auto; }
    .tec-lpg__detalle { right: auto; left: 0; width: 38%; }
  }

  /* VENUS: banda cálida, el equipo a toda la altura, su carta en frases */
  .tec-venus { background: var(--lino); scroll-margin-top: var(--alto-cab); }
  .tec-venus__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 45% 50%; }
  .tec-venus__texto { padding: 2.5rem var(--canal) clamp(4rem, 3rem + 5vw, 7rem); }
  .tec-venus__uso { margin-top: 1rem; font: 300 var(--t-lead)/1.4 var(--f-texto); }
  .tec-venus__precios { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linea-fuerte); font: 400 var(--t-fila)/1.5 var(--f-display); }
  @media (min-width: 56.25rem) {
    .tec-venus__in { container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
    .tec-venus__foto { grid-column: 1; }
    .tec-venus__foto img { aspect-ratio: auto; height: min(84svh, 50rem); }
    .tec-venus__texto { grid-column: 2; padding: 4rem max(var(--canal), (100cqw - var(--ancho)) / 2) 4rem var(--hueco); }
  }

  /* SOPRANO: sobrio y funcional; la acción es preguntar */
  .tec-soprano { display: grid; gap: 2rem; padding-block: clamp(5rem, 3rem + 7vw, 10rem); scroll-margin-top: var(--alto-cab); }
  .tec-soprano__foto { width: min(56%, 16rem); }
  .tec-soprano__foto img { aspect-ratio: 4 / 5; }
  .tec-soprano__nombre { font-size: var(--t-escena); line-height: .95; letter-spacing: -.02em; }
  .tec-soprano__texto p { margin: 1rem 0 1.75rem; font: 300 var(--t-lead)/1.4 var(--f-texto); }
  @media (min-width: 56.25rem) {
    .tec-soprano { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
    .tec-soprano__foto { grid-column: 1; justify-self: end; width: min(100%, 16rem); }
    .tec-soprano__texto { grid-column: 2; }
  }

  /* ═════ LA CASA · quieta, fotográfica: pocas fotos, cada una a su escala, y el panorama al final ═════ */
  .casa-apertura { container-type: inline-size; display: grid; }
  .casa-apertura__foto { grid-row: 1; }
  .casa-apertura__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 50%; }
  .casa-apertura__titulo { grid-row: 2; justify-self: end; padding: 1rem var(--canal) .14em; font-size: var(--t-ruta); line-height: .9; letter-spacing: -.025em; }
  @media (min-width: 56.25rem) {
    .casa-apertura__foto { width: min(100%, 96rem); justify-self: center; }
    .casa-apertura__foto img { aspect-ratio: auto; height: clamp(30rem, calc(100svh - var(--alto-cab) - 7rem), 52rem); object-position: 50% 48%; }
    .casa-apertura__titulo { padding: 1.25rem max(var(--canal), (100cqw - var(--ancho)) / 2) .14em 0; }
  }

  .casa-muro { display: grid; padding-block: clamp(5rem, 3rem + 8vw, 12rem); }
  .casa-muro__foto { width: min(52vw, 16rem); }
  .casa-muro__foto img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .casa-muro__foto { justify-self: center; width: 100%; max-width: 15rem; }
  }

  .casa-cabinas { display: grid; gap: 1.25rem; padding-block: 0 clamp(4rem, 3rem + 5vw, 9rem); }
  .casa-cabinas__arcos { margin-inline: calc(-1 * var(--canal)); }
  .casa-cabinas__arcos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; }
  .casa-cabinas__titulo { font: 400 var(--t-frase)/1.12 var(--f-display); }
  @media (min-width: 56.25rem) {
    .casa-cabinas { width: min(100%, var(--ancho) + 2 * var(--canal)); }
    .casa-cabinas__arcos { margin: 0; }
    .casa-cabinas__arcos img { aspect-ratio: 2000 / 1300; }
  }

  /* bata y pantuflas: un díptico desigual, sin pies de foto */
  .casa-objetos { display: grid; padding-block: clamp(3rem, 2rem + 4vw, 7rem) 0; }
  .casa-objetos__bata { width: min(56%, 19rem); }
  .casa-objetos__pantuflas { position: relative; width: min(78%, 32rem); margin: -4rem 0 0 auto; outline: var(--moldura) solid var(--suelo); }
  .casa-objetos__bata img, .casa-objetos__pantuflas img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .casa-objetos { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .casa-objetos__bata { grid-column: 2 / 5; grid-row: 1; width: 100%; margin-bottom: 9rem; }
    .casa-objetos__pantuflas { grid-column: 6 / 12; grid-row: 1; width: 100%; margin: 0; outline: 0; }
  }

  .regalo-tinta { padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
  .regalo-tinta__in { display: grid; gap: 2rem; }
  .regalo-tinta__foto { width: min(56%, 16rem); }
  .regalo-tinta__foto img { aspect-ratio: 5 / 4; }
  .regalo-tinta h2 { font-size: var(--t-frase); line-height: 1.05; letter-spacing: -.01em; color: var(--porcelana); }
  .regalo-tinta p { margin: 1rem 0 .4rem; font: 300 var(--t-lead)/1.4 var(--f-texto); color: var(--taupe-claro); }
  @media (min-width: 56.25rem) {
    .regalo-tinta__in { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
    .regalo-tinta__texto { grid-column: 1; justify-self: end; }
    .regalo-tinta__foto { grid-column: 2; justify-self: start; width: 100%; max-width: 16rem; }
  }

  /* ═════ CARTA · quieta ═════ */
  .carta-cab { display: grid; gap: 1rem; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) clamp(2rem, 1rem + 3vw, 4rem); }
  @media (min-width: 56.25rem) { .carta-cab { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; } .carta-cab .ruta-titulo { grid-column: 4 / 9; } .carta-cab .lead { grid-column: 9 / 13; padding-bottom: .9rem; } }
  /* minmax(0, 1fr): sin él, el índice deslizable estiraba la columna a 933 px en un teléfono */
  .carta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--medianil); padding-block: 0 clamp(4rem, 3rem + 5vw, 8rem); }
  .carta__indice { position: sticky; top: var(--alto-cab); z-index: 5; min-width: 0; margin-inline: calc(-1 * var(--canal)); padding-inline: var(--canal); background: var(--suelo); border-block: 1px solid var(--linea); }
  .categoria { padding-top: 3rem; scroll-margin-top: calc(var(--alto-cab) + 4.5rem); }
  @media (min-width: 56.25rem) { .categoria { scroll-margin-top: calc(var(--alto-cab) + 1.5rem); } }
  .carta__indice ul { display: flex; gap: 0 1.35rem; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 0 85%, transparent); mask: linear-gradient(90deg, #000 0 85%, transparent); }
  .carta__indice a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; white-space: nowrap; font-size: var(--t-peq); color: var(--taupe); text-decoration: none; }
  .carta__indice a:hover { color: var(--tinta); text-decoration: underline; }
  .categoria h2 { font-size: var(--t-frase); margin-bottom: 1rem; }
  .categoria .nota { margin-top: .9rem; }
  .carta__pie { margin-top: 3rem; font-size: var(--t-peq); color: var(--taupe); }
  @media (min-width: 56.25rem) {
    .carta { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
    .carta__indice { grid-column: 1 / 4; top: calc(var(--alto-cab) + 2rem); margin: 3rem 0 0; padding: 0; background: none; border: 0; }
    .carta__indice ul { display: block; overflow: visible; -webkit-mask: none; mask: none; border-top: 1px solid var(--linea-fuerte); }
    .carta__indice li { border-bottom: 1px solid var(--linea); }
    .carta__contenido { grid-column: 4 / 13; }
  }

  /* ═════ VISITA · funcional ═════ */
  .visita-cab { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) 2rem; }
  .visita { display: grid; gap: 3rem; padding-block: 0 clamp(4rem, 3rem + 5vw, 8rem); }
  .visita__dir { font: 400 var(--t-frase)/1.15 var(--f-display); }
  .visita__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
  .visita__tel { display: inline-flex; align-items: center; min-height: 2.75rem; font-variant-numeric: tabular-nums; }
  .visita__foto { width: min(72%, 24rem); }
  .visita__foto img { aspect-ratio: 3 / 4; }
  @media (min-width: 56.25rem) {
    .visita-cab { width: min(100%, var(--ancho) + 2 * var(--canal)); }
    .visita { width: min(100%, var(--ancho) + 2 * var(--canal)); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 3.5rem; align-items: start; }
    .visita__dir { grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(1.5rem, .8rem + 1.6vw, 2.25rem); }
    .visita__acciones { grid-column: 1; grid-row: 2; }
    .visita__foto { grid-column: 2; grid-row: 1 / 3; justify-self: center; align-self: center; width: min(100%, 18rem); }
    .visita__horario { grid-column: 1; grid-row: 3; }
    .visita__practico { grid-column: 2; grid-row: 3; }
  }
}

@layer movimiento {
  @media (prefers-reduced-motion: no-preference) {
    /* A · la portada: la línea de moldura se traza, la recepción se abre dentro, llega el nombre (≈1,1 s; todo clicable desde el inicio) */
    .portada__foto { animation: trazar .6s var(--curva) both; }
    .portada__foto img { animation: revelar .85s .18s var(--curva-marco) both; }
    .portada__nombre .nombre { animation: levantar .7s .42s var(--curva) both; }
    .portada__meta, .portada__acciones { animation: asentar .45s .65s var(--curva) both; }
    .p-inicio .nav, .p-inicio .reservar--cab { animation: asentar .45s .7s var(--curva) both; }

    /* B · apertura de marco, solo en tres o cuatro fotos editoriales */
    @supports (animation-timeline: view()) {
      .apertura img { animation: abrir linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    }

    /* D · el panorama dice cuánto falta: una línea que avanza con el desplazamiento */
    @supports (animation-timeline: scroll()) {
      .panorama__progreso { animation: progreso linear both; animation-timeline: --panorama; }
    }

    /* E · transición entre rutas */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: .22s var(--curva) both desvanecer; }
    ::view-transition-new(root) { animation: .45s var(--curva-marco) both abrir-pagina; }
    ::view-transition-group(cabecera) { animation: none; }
  }

  /* la línea bajo la cabecera aparece al bajar; en inicio el logo chico entra cuando la portada queda atrás */
  @supports (animation-timeline: scroll()) {
    .cabecera__in { animation: linea linear both; animation-timeline: scroll(root); animation-range: 0 10rem; }
    .p-inicio .cabecera .marca { animation: marca-entra linear both; animation-timeline: scroll(root); animation-range: 40vh 70vh; }
    .p-inicio .cabecera .marca:focus-visible { opacity: 1 !important; }
    /* la barra de reserva en inicio no duplica el botón de la portada */
    .p-inicio .barra-reserva { animation: barra-entra linear both; animation-timeline: scroll(root); animation-range: 60vh 90vh; }
  }

  .indice-movil:popover-open { animation: entrar-indice .35s var(--curva) both; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  }

  @keyframes trazar { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0); } }
  @keyframes revelar { from { clip-path: inset(18% 22% 18% 22%); scale: 1.08; } to { clip-path: inset(0); scale: 1; } }
  @keyframes levantar { from { clip-path: inset(0 0 100% 0); translate: 0 .5rem; } to { clip-path: inset(-20% -10% -30% -10%); translate: 0 0; } }
  @keyframes asentar { from { opacity: 0; } }
  @keyframes abrir { from { clip-path: inset(9% 7% 9% 7%); scale: 1.06; } to { clip-path: inset(0); scale: 1; } }
  @keyframes progreso { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes linea { to { border-bottom-color: var(--trazo); } }
  @keyframes marca-entra { from { opacity: 0; } }
  @keyframes barra-entra { from { opacity: 0; visibility: hidden; } }
  @keyframes desvanecer { to { opacity: 0; } }
  @keyframes abrir-pagina { from { clip-path: inset(4% 3% 4% 3%); opacity: .001; } }
  @keyframes entrar-indice { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
}