/* ═══════════════════════════════════════════════════════════════════════════
   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, proporciones 5:7), el ESPEJO es el acento (un solo
   círculo en todo el sitio), el WORDMARK es la autoridad (el logotipo real es el
   título de la portada) y la LUZ cálida solo aparece como luz.
   Registros por ruta: inicio arquitectónico, piel luminosa, cuerpo cálido,
   tecnología 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;
    --taupe: #6d5f4d;
    --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;
    --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; }
  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; }
  br.e { display: none; }
  @media (min-width: 56.25rem) { br.e { display: inline; } br.m { display: none; } }
}

@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, .p-tecnologia { --suelo: var(--tinta); --texto: var(--hueso); --texto-2: var(--taupe-claro); --trazo: var(--linea-clara); --trazo-fuerte: rgb(236 229 216 / .4); }
  .tinta { 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; }
  .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; }
    .nav { display: block; margin-inline-start: auto; }
    .cabecera .reservar--cab { display: inline-flex; flex-shrink: 0; margin-inline-start: clamp(1.25rem, 2.5vw, 3rem); 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; }

  /* ── 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); }
  .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; }

  /* ── FILA DE 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; }

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

  /* ── RECORRE RADANTA: la firma. El viewport es una ventana, no una foto recortada ── */
  .recorrido { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
  .recorrido__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; margin-bottom: 1.25rem; }
  .recorrido__titulo { font-size: var(--t-frase); }
  .recorrido__ayuda { font-size: var(--t-peq); color: var(--texto-2); }
  .recorrido__vista {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; cursor: grab;
    scrollbar-width: thin; scrollbar-color: var(--texto) transparent;
  }
  .recorrido__vista:focus-visible { outline-offset: -4px; }
  .recorrido__vista.arrastrando { cursor: grabbing; user-select: none; }
  .recorrido__pista { position: relative; width: max-content; height: clamp(20rem, 58svh, 44rem); }
  .recorrido__pista img { width: auto; height: 100%; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
  .recorrido__marca { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: .7rem; height: .7rem; translate: -50% -50%; border-radius: 50%; background: var(--porcelana); box-shadow: 0 0 0 1px var(--tinta), 0 0 0 7px rgb(246 242 234 / .35); pointer-events: none; }
  .recorrido__pie { display: grid; gap: .75rem 2rem; margin-top: 1rem; }
  .recorrido__puntos { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
  .recorrido__puntos button { appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; min-height: 2.75rem; min-width: 3rem; padding: .5rem 0; font-size: var(--t-peq); font-weight: 500; color: var(--texto-2); cursor: pointer; }
  .recorrido__puntos button[aria-pressed='true'] { color: var(--texto); border-bottom-color: currentColor; }
  .recorrido__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; min-height: 2.75rem; color: var(--texto-2); }
  @media (min-width: 56.25rem) {
    .recorrido__pista { height: clamp(24rem, 66svh, 46rem); }
    .recorrido__pie { grid-template-columns: auto 1fr; align-items: center; }
    .recorrido__info { justify-content: flex-end; }
  }

  /* ── PIE: discreto ── */
  .pie { padding-block: 3rem calc(2.5rem + 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.75rem; }
  .pie .wordmark { color: var(--texto); }
  .pie a { color: var(--texto); }
  .pie__lineas p + p { margin-top: .2rem; }
  .pie__contacto { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .pie__contacto a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .pie__enlaces { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .pie__enlaces a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; text-decoration: none; }
  .pie__enlaces a:hover { text-decoration: underline; }
  @media (min-width: 56.25rem) {
    .pie__in { grid-template-columns: 3fr 5fr 4fr; align-items: start; }
    .pie__enlaces { justify-content: flex-end; }
  }

  /* ── 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(--suelo); color: var(--texto); border-top: 1px solid var(--trazo-fuerte);
  }
  .barra-reserva .reservar { flex: 1; min-height: 2.9rem; }
  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: marco de moldura, la recepción dentro, el nombre cruzando la línea ═════ */
  .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__meta span { display: block; font-size: var(--t-peq); color: var(--taupe); }
  .portada__nombre { margin: 0; line-height: 0; }
  .portada__nombre .nombre { display: block; width: 100%; height: auto; color: var(--tinta); }
  .portada__caminos { display: flex; flex-wrap: wrap; }
  .portada__caminos a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; padding-inline-end: 1.25rem; font: 400 var(--t-fila)/1 var(--f-display); text-decoration: none; }
  .portada__caminos a:hover { text-decoration: underline; }
  .portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
  /* 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) {
    .portada {
      container-type: inline-size; gap: 0; column-gap: var(--medianil);
      grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr);
      height: clamp(40rem, calc(100svh - var(--alto-cab)), 62rem);
      padding: 0 max(var(--canal), (100cqw - var(--max)) / 2);
    }
    .portada__texto { grid-column: 1 / 8; grid-row: 1; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding-block: clamp(1.5rem, 4vh, 3.5rem) clamp(1.75rem, 5vh, 3.5rem); pointer-events: none; }
    .portada__texto a, .portada__texto .portada__meta { pointer-events: auto; }
    .portada__nombre .nombre { width: min(100%, 52rem); }
    .portada__caminos, .portada__acciones { max-width: calc(41cqw - var(--canal) - 1.5rem); }
    .portada__caminos { margin-top: clamp(1rem, 2.5vh, 1.75rem); }
    .portada__acciones { margin-top: clamp(.75rem, 2vh, 1.25rem); }
    .portada__foto { grid-column: 6 / 13; grid-row: 1; margin: 1rem 0 clamp(1.5rem, 4vh, 2.5rem); border-right: 1px solid var(--linea-fuerte); display: flex; min-height: 0; }
    .portada__foto img { aspect-ratio: auto; min-height: 0; flex: 1; object-position: 50% 38%; }
  }

  /* ═════ B · UN DETALLE: el espejo (el único círculo del sitio) ═════ */
  .detalle { display: grid; gap: 1.75rem; padding-block: clamp(4rem, 2.5rem + 6vw, 9rem) clamp(3rem, 2rem + 4vw, 6rem); }
  .detalle__espejo { width: min(62vw, 20rem); aspect-ratio: 1; border-radius: 50%; overflow: clip; box-shadow: 0 0 0 var(--moldura) var(--suelo), 0 0 0 calc(var(--moldura) + 1px) var(--linea-fuerte); margin-inline-start: var(--moldura); }
  .detalle__espejo img { width: 100%; height: 100%; object-fit: cover; }
  .detalle__texto { font: 400 var(--t-frase)/1.15 var(--f-display); max-width: 20ch; }
  .detalle__texto small { display: block; margin-top: 1rem; font: 400 var(--t-peq)/1.5 var(--f-texto); color: var(--taupe); }
  @media (min-width: 56.25rem) {
    .detalle { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: center; }
    .detalle__espejo { grid-column: 2 / 5; width: 100%; }
    .detalle__texto { grid-column: 6 / 12; max-width: none; }
  }

  /* ═════ 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 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
    .mundos__lista { grid-column: 1 / 6; margin-inline: 0; background: none; border-top: 1px solid var(--linea-fuerte); }
    .mundos__pie { grid-column: 1 / 6; }
    .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: sticky; top: calc(var(--alto-cab) + 1.5rem); grid-column: 7 / 13; grid-row: 1 / 3; aspect-ratio: 4 / 4.6; }
    .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); }
  }

  /* ═════ E · TECNOLOGÍA Y AUTORIDAD (tinta) ═════ */
  .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 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .tecnica__texto { grid-column: 1 / 7; }
    .tecnica__foto { grid-column: 8 / 12; width: 100%; margin-bottom: -4rem; }
  }

  /* ═════ 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 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .prueba__panel { grid-column: 2 / 9; aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: flex-end; }
    .prueba__lado { grid-column: 10 / 13; flex-direction: column; align-items: flex-start; padding-bottom: 1rem; }
  }

  /* ═════ 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 { container-type: inline-size; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; padding-block: 0; }
    .regalo__foto { grid-column: 1 / 8; margin: 0; }
    .regalo__texto { grid-column: 9 / 13; padding: 0 max(var(--canal), (100cqw - var(--max)) / 2) clamp(3rem, 6vw, 6rem) 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 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .final__foto { grid-column: 1 / 8; }
    .final__texto { grid-column: 8 / 13; padding-bottom: var(--moldura); }
    .final__nombre { margin-inline-start: calc(-1 * clamp(3rem, 8vw, 9rem)); position: relative; z-index: 1; }
  }
}

@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 ═════ */
  .piel-apertura { display: grid; gap: 1.75rem; padding-block: 1.5rem clamp(3rem, 2rem + 4vw, 6rem); }
  .piel-apertura__foto { margin: 0 calc(-1 * var(--canal)) 0 0; overflow: clip; }
  .piel-apertura__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 40%; }
  @media (min-width: 56.25rem) {
    .piel-apertura { container-type: inline-size; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; padding-block: 0 clamp(4rem, 6vw, 7rem); }
    .piel-apertura__texto { grid-column: 1 / 6; grid-row: 1; z-index: 1; padding-bottom: 2.5rem; }
    .piel-apertura__foto { grid-column: 5 / 13; grid-row: 1; margin: 0 calc(-1 * max(var(--canal), (100vw - var(--max)) / 2)) 0 0; }
    .piel-apertura__foto img { aspect-ratio: auto; height: min(78svh, 50rem); }
    .piel-apertura .ruta-titulo { margin-inline-end: -8rem; }
  }
  .piel-apertura .lead { margin-top: 1.5rem; }
  .piel-apertura .reservar { margin-top: 1.75rem; }

  .piel-carta { padding-block: 0 clamp(4rem, 2.5rem + 6vw, 8rem); }
  .piel-carta__sub { margin: 2.5rem 0 .6rem; font: 500 var(--t-peq)/1.3 var(--f-texto); color: var(--taupe); }
  @media (min-width: 56.25rem) { .piel-carta { display: grid; grid-template-columns: 3fr 9fr; column-gap: var(--medianil); } .piel-carta .bloque-titulo { position: sticky; top: calc(var(--alto-cab) + 1.5rem); align-self: start; } }

  .natura { display: grid; gap: 1.5rem; padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--linea); }
  .natura__foto { width: min(78%, 28rem); }
  .natura__foto img { aspect-ratio: 5 / 4; }
  .natura__texto p:first-child { font: 400 var(--t-fila)/1.2 var(--f-display); }
  .natura__texto p + p { margin-top: .5rem; color: var(--taupe); max-width: 36ch; }
  @media (min-width: 56.25rem) {
    .natura { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: center; }
    .natura__foto { grid-column: 3 / 7; width: 100%; }
    .natura__texto { grid-column: 8 / 12; }
  }

  /* ═════ CUERPO · cálido ═════ */
  .cuerpo-apertura { display: grid; gap: 1.5rem; padding-block: clamp(2rem, 1rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem); }
  .cuerpo-apertura .lead { margin-top: 1.25rem; }
  .cuerpo-apertura__bata { width: min(84%, 34rem); margin-inline-start: auto; }
  .cuerpo-apertura__bata img { aspect-ratio: 1; }
  .cuerpo-apertura__manos { width: min(46%, 15rem); margin-top: -5rem; position: relative; }
  .cuerpo-apertura__manos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .cuerpo-apertura { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
    .cuerpo-apertura__texto { grid-column: 1 / 6; padding-top: 3rem; }
    .cuerpo-apertura__bata { grid-column: 7 / 12; grid-row: 1 / 3; width: 100%; }
    .cuerpo-apertura__manos { grid-column: 3 / 6; width: 100%; margin-top: 2rem; }
  }
  .cuerpo-carta { padding-block: 0 clamp(4rem, 2.5rem + 6vw, 8rem); }
  .cuerpo-carta__grupo + .cuerpo-carta__grupo { margin-top: 3.5rem; }
  @media (min-width: 56.25rem) { .cuerpo-carta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); } .cuerpo-carta > * { grid-column: 3 / 12; } }

  .body-exp { background: var(--lino); padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); }
  .body-exp__in { display: grid; gap: 2rem; }
  .body-exp__titulo { font-size: clamp(3rem, 1rem + 7vw, 8.25rem); line-height: .88; letter-spacing: -.03em; }
  .body-exp__lista { border-top: 1px solid var(--linea-fuerte); }
  .body-exp__lista li { padding-block: .8rem; border-bottom: 1px solid var(--linea); font: 400 var(--t-fila)/1.25 var(--f-display); }
  /* sobre lino el taupe da 4.43:1: aquí el texto secundario va un escalón más oscuro */
  .body-exp__nota { margin-top: 1.25rem; color: #54483a; }
  .body-exp__foto { width: min(55%, 18rem); }
  .body-exp__foto img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .body-exp__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .body-exp__titulo { grid-column: 1 / 13; }
    .body-exp__foto { grid-column: 2 / 4; width: 100%; }
    .body-exp__texto { grid-column: 6 / 12; }
  }

  /* ═════ TECNOLOGÍA · en tinta ═════ */
  .p-tecnologia .cabecera { background: var(--tinta); }
  .tec-apertura { display: grid; gap: 1rem; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
  .tec-apertura .lead { color: var(--taupe-claro); }
  @media (min-width: 56.25rem) { .tec-apertura { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; } .tec-apertura .ruta-titulo { grid-column: 1 / 9; } .tec-apertura .lead { grid-column: 9 / 13; padding-bottom: .8rem; } }

  .tec-selector { padding-block: 0 clamp(4rem, 3rem + 5vw, 8rem); }
  /* sin selector (móvil o sin :has) los radios no existen: nada que enfocar sin efecto visible */
  .tec-selector > input { display: none; }
  .tec-selector__opciones { display: none; }
  .tec-panel { display: grid; gap: 1.5rem; padding-block: 2.5rem; border-top: 1px solid var(--linea-clara); }
  .tec-panel__nombre { font-size: clamp(2.2rem, 1rem + 3.4vw, 4.2rem); line-height: .95; letter-spacing: -.02em; color: var(--porcelana); }
  .tec-panel__foto img { width: 100%; object-fit: cover; }
  .tec-panel--lpg .tec-panel__foto img, .tec-panel--venus .tec-panel__foto img { aspect-ratio: 1; }
  .tec-panel--soprano .tec-panel__foto { width: min(52%, 17rem); }
  .tec-panel--soprano .tec-panel__foto img { aspect-ratio: 4 / 5; }
  .tec-panel__hechos { margin-top: .75rem; font: 300 var(--t-lead)/1.35 var(--f-texto); }
  .tec-panel .filas { margin-top: 1.5rem; }
  .tec-panel .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 1.75rem; }
  .p-tecnologia .reservar, .tinta .reservar { background: var(--porcelana); color: var(--tinta); border-color: var(--porcelana); }
  .p-tecnologia .reservar:hover, .tinta .reservar:hover { background: transparent; color: var(--porcelana); }

  @media (min-width: 56.25rem) {
    @supports selector(:has(*)) {
      .tec-selector { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
      .tec-selector > input { display: block; }
      .tec-selector__opciones { display: block; grid-column: 1 / 4; position: sticky; top: calc(var(--alto-cab) + 2rem); border-top: 1px solid var(--linea-clara); }
      .tec-selector__opciones label { display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--linea-clara); font: 400 var(--t-fila)/1.2 var(--f-display); color: var(--taupe-claro); cursor: pointer; transition: color .3s var(--curva); }
      .tec-selector__opciones label span { display: block; margin-top: .25rem; font: 400 var(--t-mini)/1.3 var(--f-texto); font-variant-numeric: tabular-nums; }
      .tec-selector__opciones label:hover { color: var(--hueso); }
      .tec-selector__paneles { grid-column: 4 / 13; display: grid; }
      /* foto y nombre arriba; la carta abajo, a todo lo ancho del panel: en 4 columnas los nombres se partían letra a letra */
      .tec-panel {
        grid-area: 1 / 1; padding-block: 0; border-top: 0;
        grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--medianil); row-gap: 2.25rem; align-items: end;
        visibility: hidden; clip-path: inset(0 0 0 100%);
        transition: clip-path .5s var(--curva-marco), visibility 0s linear .5s;
      }
      .tec-panel__foto { grid-column: 1 / 5; grid-row: 1; }
      .tec-panel__cab { grid-column: 5 / 10; grid-row: 1; padding-bottom: .4rem; }
      .tec-panel__cuerpo { grid-column: 1 / 10; grid-row: 2; }
      .tec-panel--soprano .tec-panel__foto { grid-column: 2 / 4; width: 100%; }
      .tec-selector:has(#tec-lpg:checked) .tec-panel--lpg,
      .tec-selector:has(#tec-venus:checked) .tec-panel--venus,
      .tec-selector:has(#tec-soprano:checked) .tec-panel--soprano { visibility: visible; clip-path: inset(0); transition: clip-path .5s var(--curva-marco), visibility 0s; }
      .tec-selector:has(#tec-lpg:checked) label[for='tec-lpg'],
      .tec-selector:has(#tec-venus:checked) label[for='tec-venus'],
      .tec-selector:has(#tec-soprano:checked) label[for='tec-soprano'] { color: var(--porcelana); }
      .tec-selector:has(#tec-lpg:focus-visible) label[for='tec-lpg'],
      .tec-selector:has(#tec-venus:focus-visible) label[for='tec-venus'],
      .tec-selector:has(#tec-soprano:focus-visible) label[for='tec-soprano'] { outline: 2px solid var(--hueso); outline-offset: 4px; }
    }
  }

  /* ═════ LA CASA · fotográfica, casi sin texto ═════ */
  .casa-entrada { display: grid; gap: 1.25rem; padding-block: clamp(1.5rem, 1rem + 3vw, 4rem) 0; }
  .casa-entrada figure { margin: 0; }
  .casa-entrada img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .casa-entrada { container-type: inline-size; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; padding-inline: max(var(--canal), (100cqw - var(--max)) / 2) 0; }
    .casa-entrada .ruta-titulo { grid-column: 1 / 5; grid-row: 1; align-self: start; }
    .casa-entrada figure { grid-column: 4 / 13; grid-row: 1; }
    .casa-entrada img { aspect-ratio: auto; height: min(88svh, 56rem); }
    .casa-entrada figcaption { padding-inline-start: .1rem; }
  }
  .casa-recepcion { padding-block: clamp(4rem, 3rem + 5vw, 8rem) clamp(3rem, 2rem + 4vw, 6rem); }
  .casa-recepcion .moldura img { aspect-ratio: 1476 / 770; }
  @media (min-width: 56.25rem) { .casa-recepcion { width: min(100% - 2 * var(--canal), 78rem); margin-inline-end: var(--canal); margin-inline-start: auto; } }

  .casa-par { display: grid; gap: 2rem; padding-block: 0 clamp(4rem, 3rem + 5vw, 8rem); }
  .casa-par__muro { width: min(52%, 17rem); }
  .casa-par__muro img { aspect-ratio: 9 / 16; object-fit: cover; }
  .casa-par__mostrador { width: min(70%, 24rem); margin-inline-start: auto; }
  .casa-par__mostrador img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 75% 50%; }
  @media (min-width: 56.25rem) {
    .casa-par { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
    .casa-par__muro { grid-column: 2 / 5; width: 100%; }
    .casa-par__mostrador { grid-column: 7 / 11; width: 100%; margin-top: 9rem; }
  }

  .casa-cabinas { display: grid; gap: 1rem; padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-block: 1px solid var(--linea); }
  .casa-cabinas__titulo { font: 400 var(--t-frase)/1.15 var(--f-display); }
  .casa-cabinas__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--moldura); margin-top: 1rem; }
  .casa-cabinas__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .casa-cabinas__pasillo img { aspect-ratio: 16 / 10; }
  @media (min-width: 56.25rem) {
    .casa-cabinas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .casa-cabinas__titulo { grid-column: 1 / 5; }
    .casa-cabinas__pasillo { grid-column: 5 / 13; }
    .casa-cabinas__fotos { grid-column: 5 / 11; }
  }

  .casa-detalle { display: grid; gap: 2rem; padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
  .casa-detalle__bata { width: min(62%, 22rem); }
  .casa-detalle__bata img, .casa-detalle__pantuflas img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .casa-detalle { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .casa-detalle__bata { grid-column: 1 / 5; width: 100%; margin-bottom: 6rem; }
    .casa-detalle__pantuflas { grid-column: 6 / 12; }
  }

  .casa-frase { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
  .casa-frase blockquote p { font: 400 var(--t-frase)/1.2 var(--f-display); max-width: 26ch; }
  .casa-frase footer { margin-top: 1rem; font-size: var(--t-mini); color: var(--taupe); }
  @media (min-width: 56.25rem) { .casa-frase blockquote { margin-inline-start: calc(100% / 12 * 4); } }

  .regalo-tinta { padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); }
  .regalo-tinta__in { display: grid; gap: 2rem; }
  .regalo-tinta__foto { width: min(70%, 24rem); }
  .regalo-tinta__foto img { aspect-ratio: 5 / 4; }
  .regalo-tinta h2 { font-size: var(--t-escena); line-height: .95; letter-spacing: -.02em; 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 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: center; }
    .regalo-tinta__texto { grid-column: 2 / 7; }
    .regalo-tinta__foto { grid-column: 8 / 12; width: 100%; }
  }

  /* ═════ 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 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; } .carta-cab .ruta-titulo { grid-column: 1 / 8; } .carta-cab .lead { grid-column: 8 / 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 { 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 { padding-top: 3rem; }
  .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 { 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 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); row-gap: 3.5rem; align-items: start; }
    .visita__dir, .visita__acciones { grid-column: 1 / 9; }
    .visita__horario { grid-column: 1 / 6; }
    .visita__practico { grid-column: 7 / 12; }
    .visita__foto { grid-column: 10 / 13; grid-row: 1 / 3; width: 100%; margin-top: -5rem; }
  }
}

@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__caminos, .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 fotos editoriales */
    @supports (animation-timeline: view()) {
      .apertura img { animation: abrir linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    }

    /* 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 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); } }
}