/* ═══════════════════════════════════════════════════════════════════════════
   RADANTA · la casa
   La paleta sale de las fotos del local (porcelana del muro, tinta del
   wordmark, taupe de los sillones, mármol del piso, ámbar de la cornisa,
   botánico de las flores secas). La retícula sale de los paneles de moldura:
   se nota en líneas finas y límites de recorte, nunca en marcos dibujados.
   Dos familias: Tenor Sans y Hanken Grotesk. Un solo corte: 56.25rem.
   El contenido es visible sin JS; el movimiento se suma encima.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens, base, marco, componentes, paginas, 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 (ancho de una frase a 100 px y cajas de la fuente):
   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 {
    --porcelana: #f6f2ea;
    --hueso: #ece5d8;
    --marmol: #e6e7e4;
    --tinta: #1c1a17;
    --tinta-2: #2b2824;
    --taupe: #6d5f4d;
    --taupe-claro: #b3a58f;
    --ambar: #d9bd7e;
    --botanico: #6b654b;
    --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-cuerpo: 1.0625rem;
    --t-peq: .9375rem;
    --t-mini: .8125rem;
    --t-lead: clamp(1.125rem, 1rem + .5vw, 1.45rem);
    --t-h3: clamp(1.25rem, 1.08rem + .6vw, 1.7rem);
    --t-h2: clamp(1.9rem, 1.15rem + 2.6vw, 3.5rem);
    --t-frase: clamp(1.85rem, .9rem + 3.3vw, 4.1rem);
    --t-titulo: clamp(3rem, 1.25rem + 6.2vw, 7.25rem);

    --canal: clamp(1.25rem, .4rem + 3.4vw, 3.5rem);
    --medianil: clamp(1rem, .6rem + 1.6vw, 2.25rem);
    --max: 90rem;
    --alto-cab: 4.25rem;
    --aire: clamp(5rem, 3rem + 7vw, 10.5rem);

    --curva: cubic-bezier(.22, .61, .22, 1);
    --curva-marco: cubic-bezier(.7, 0, .18, 1);
  }
  @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(--porcelana); color: var(--tinta);
    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: .65rem; font-size: var(--t-mini); line-height: 1.4; color: var(--taupe); }
  ::selection { background: var(--tinta); color: var(--porcelana); }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
  br.e { display: none; }
  @media (min-width: 56.25rem) { br.e { display: inline; } br.m { display: none; } }
}

@layer marco {
  .envoltura { width: min(100% - 2 * var(--canal), var(--max)); 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; }
  /* la apertura escala la foto a 1.06: una transformación sí agranda el área desplazable */
  .apertura { overflow: clip; }
  .tinta { background: var(--tinta); color: var(--hueso); }
  .tinta figcaption { color: var(--taupe-claro); }
  .hueso { background: var(--hueso); }
}

@layer componentes {
  /* CABECERA — pegada arriba; al bajar solo aparece la línea, nada más */
  .cabecera { position: sticky; top: 0; z-index: 40; background: var(--porcelana); 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; color: var(--tinta); }
  .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); }
  /* 44 × 44 como mínimo: «Piel» mide 24 px de ancho; el relleno lateral iguala el aire entre palabras cortas y largas */
  .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; }
  /* flexbox encogía «Índice» por debajo de su mínimo en 320 px: los controles no ceden, el wordmark sí */
  .reservar--cab { margin-inline-start: auto; min-height: 2.75rem; padding: .75rem .85rem; flex-shrink: 0; }
  .cabecera .nav-abrir { flex-shrink: 0; }
  .cabecera .marca { flex-shrink: 1; min-width: 0; }
  .nav-abrir {
    appearance: none; background: none; border: 1px solid var(--linea-fuerte); border-radius: 0; cursor: pointer;
    min-height: 2.75rem; min-width: 2.75rem; padding: .7rem .75rem; font: 500 var(--t-mini)/1 var(--f-texto); letter-spacing: .04em;
  }
  /* en 320 px wordmark + Reservar + Índice sumaban 337 px: se compacta sin perder los 44 px */
  @media (max-width: 23.75rem) {
    .cabecera__in { gap: .5rem; }
    .cabecera .wordmark { width: 5.75rem; }
    .reservar--cab { padding-inline: .65rem; letter-spacing: .08em; }
  }
  @media (min-width: 56.25rem) {
    .wordmark { width: 8.5rem; }
    .nav { display: block; margin-inline-start: auto; }
    .reservar--cab { margin-inline-start: clamp(1.25rem, 2.5vw, 3rem); padding-inline: 1.35rem; }
    .cabecera .nav-abrir { display: none; }
  }

  /* índice móvil: una capa propia, no un desplegable */
  .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.5rem; border-top: 1px solid var(--linea-fuerte); }
  .indice-movil nav a { display: block; padding: .7rem 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; }

  /* BOTÓN: la precisión rectangular de la moldura; nada de píldoras */
  .reservar {
    display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .9rem 1.75rem;
    background: var(--tinta); color: var(--porcelana); border: 1px solid var(--tinta);
    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(--tinta); }
  .reservar--grande { min-height: 3.75rem; padding-inline: clamp(1.5rem, 1rem + 2vw, 2.75rem); font-size: var(--t-peq); white-space: normal; text-align: center; }
  .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 { translate: .3rem 0; }

  /* CARTA: nombre · duración · precio, con cifras tabulares */
  .filas { border-top: 1px solid var(--linea-fuerte); }
  .fila { border-bottom: 1px solid var(--linea); }
  .fila__cab, .fila summary {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nombre precio' 'dur mas';
    column-gap: 1rem; row-gap: .15rem; align-items: baseline; padding-block: 1rem;
  }
  .fila summary { list-style: none; cursor: pointer; }
  .fila summary::-webkit-details-marker { display: none; }
  /* «Microneedling» no cabía en la carta a dos columnas a 910 px: se permite el guion antes que el desborde */
  .fila__nombre { grid-area: nombre; font: 400 var(--t-h3)/1.2 var(--f-display); letter-spacing: -.005em; hyphens: auto; overflow-wrap: break-word; }
  .fila__dur { grid-area: dur; font-size: var(--t-peq); color: var(--taupe); 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__mas { grid-area: mas; justify-self: end; position: relative; width: .8rem; height: .8rem; }
  .fila__mas::before, .fila__mas::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: rotate .3s var(--curva); }
  .fila__mas::after { rotate: 90deg; }
  .fila details[open] .fila__mas::after { rotate: 0deg; }
  .fila__detalle { padding: 0 0 1.15rem; color: var(--taupe); max-width: 42ch; }
  .fila details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--curva), content-visibility .35s allow-discrete; }
  .fila details[open]::details-content { block-size: auto; }
  .filas--compacta .fila__nombre { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); }
  .filas--compacta .fila__cab, .filas--compacta summary { padding-block: .8rem; }
  @media (min-width: 56.25rem) {
    /* la columna de precio se ajusta al contenido: «En consulta» no cabía en 5.75rem a 910 px */
    .fila__cab, .fila summary { grid-template-columns: minmax(0, 1fr) 7.5rem minmax(6.5rem, auto) 1.5rem; grid-template-areas: 'nombre dur precio mas'; }
    .filas--compacta .fila__cab, .filas--compacta summary { grid-template-columns: minmax(0, 1fr) 5.5rem minmax(5.75rem, auto) 1.25rem; }
  }
  .carta__nota { margin-top: 1.25rem; font-size: var(--t-peq); color: var(--taupe); max-width: 52ch; }
  .carta__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }

  .horario div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .55rem; border-bottom: 1px solid var(--linea); }
  .horario dt { color: var(--taupe); }
  .horario dd { margin: 0; font-variant-numeric: tabular-nums; }

  .lista-simple li { padding-block: .55rem; border-bottom: 1px solid var(--linea); }
  .lista-simple { border-top: 1px solid var(--linea-fuerte); }
  .bloque__titulo { font-size: var(--t-h2); margin-bottom: 1.5rem; }

  /* PIE */
  .pie { background: var(--hueso); padding-block: 4rem 2.5rem; font-size: var(--t-peq); }
  .pie__in { display: grid; gap: 2.25rem; }
  .pie__rot { margin-bottom: .6rem; font-size: var(--t-mini); color: var(--taupe); }
  .pie address { margin-bottom: .25rem; }
  .pie__dato { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .reservar--pie { margin-top: 1rem; }
  .horario--pie div { padding-block: .3rem; }
  .pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.75rem; border-top: 1px solid var(--linea-fuerte); color: var(--taupe); }
  .pie__base ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; }
  .pie__base ul a { padding-inline-end: 1.5rem; }
  .pie__base p span { display: block; }
  @media (min-width: 56.25rem) {
    .pie__base ul { display: flex; flex-wrap: wrap; gap: 0; }
    .pie__base p span { display: inline; }
    .pie__base p span + span::before { content: ' · '; }
  }
  .pie__base a { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 2.75rem; min-width: 2.75rem; color: var(--tinta); text-decoration: none; }
  .pie__base a:hover { text-decoration: underline; }
  .pie__base p a { color: var(--taupe); }
  .pie--corto { padding-block: 2rem 1.5rem; }
  .pie--corto .pie__base { padding-top: 0; border-top: 0; }
  .pie--corto .pie__base p a { color: var(--tinta); }
  @media (min-width: 56.25rem) {
    .pie__in { grid-template-columns: 3fr 3fr 3fr 3fr; column-gap: var(--medianil); }
    .pie__base { grid-column: 1 / -1; }
  }
}

@layer paginas {
  /* ═════ INICIO ═════ */
  .portada { display: grid; }
  .portada__texto { display: flex; flex-direction: column; padding: 1.75rem var(--canal) 2.25rem; }
  .portada__lugar { font: 300 var(--t-lead)/1.3 var(--f-texto); }
  .portada__bajo { margin-top: 2.75rem; }
  /* el nombre es el logotipo real, vectorial: su «a» minúscula es lo único que no puede tener otro spa */
  .portada__nombre { margin: 0; line-height: 0; }
  .portada__nombre .nombre { display: block; width: 100%; max-width: 40rem; height: auto; color: var(--tinta); }
  .portada__caminos { display: flex; flex-wrap: wrap; margin-top: 1.75rem; border-top: 1px solid var(--linea-fuerte); }
  /* separación solo con aire: el mismo relleno final en cada camino, y «Piel» sigue midiendo 44 px */
  .portada__caminos a { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 2.75rem; min-width: 2.75rem; padding-inline-end: 1.25rem; font-size: var(--t-peq); text-decoration: none; }
  .portada__caminos a:hover { text-decoration: underline; }
  .portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 1.25rem; }
  /* en móvil «Reservar» ya vive en la cabecera: no se repite en la misma pantalla */
  .portada__acciones .reservar { display: none; }
  @media (min-width: 56.25rem) { .portada__acciones .reservar { display: inline-flex; } }
  .portada__foto { margin: 0 0 0 var(--canal); }
  .portada__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 34%; }
  .portada__foto figcaption { padding-inline-end: var(--canal); }
  @media (min-width: 56.25rem) {
    /* alto explícito: sin él la foto 4:5 estiraba la portada a 1272 px en 1920 y el nombre caía bajo el pliegue */
    /* la fila tiene que ser «minmax(0, 1fr)»: con «auto» crecía hasta el alto intrínseco de la foto 4:5
       y empujaba el nombre bajo el pliegue aunque la portada tuviera alto explícito */
    .portada {
      container-type: inline-size; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); grid-template-rows: minmax(0, 1fr);
      height: clamp(38rem, calc(100svh - var(--alto-cab)), 64rem);
    }
    /* el texto arranca en el mismo borde que el contenedor de la cabecera; la foto sigue sangrando */
    .portada__texto {
      justify-content: space-between; min-height: 0; border-right: 1px solid var(--linea);
      padding: clamp(2rem, 5vh, 4.5rem) clamp(2rem, 3vw, 3.5rem) clamp(2rem, 5vh, 3.5rem) max(var(--canal), (100cqw - var(--max)) / 2);
    }
    .portada__nombre .nombre { max-width: 44rem; }
    .portada__caminos { margin-top: 2.25rem; }
    .portada__acciones { margin-top: 1.75rem; }
    .portada__foto { margin: 0; display: flex; flex-direction: column; min-height: 0; }
    .portada__foto img { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; object-position: 58% 40%; }
    .portada__foto figcaption { padding: .7rem 0 .9rem 1.25rem; margin: 0; }
  }

  .frase { padding-block: var(--aire) calc(var(--aire) * .75); }
  .frase__texto { font: 400 var(--t-frase)/1.08 var(--f-display); letter-spacing: -.012em; max-width: 19ch; text-wrap: balance; }
  .frase__nota { margin-top: 2.25rem; max-width: 40ch; font: 300 var(--t-lead)/1.45 var(--f-texto); color: var(--taupe); }
  @media (min-width: 56.25rem) {
    .frase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); }
    .frase__texto { grid-column: 3 / 11; max-width: none; text-wrap: initial; }
    .frase__nota { grid-column: 7 / 12; margin-top: 3.5rem; }
  }

  /* ÍNDICE RADANTA — la interacción central */
  .indice { padding-block: 0 var(--aire); }
  .indice__titulo { padding-block: 0 1.1rem; font: 500 var(--t-mini)/1 var(--f-texto); letter-spacing: .02em; color: var(--taupe); }
  .indice__filas { border-top: 1px solid var(--linea-fuerte); }
  .indice__fila {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nombre mini' 'meta mini';
    column-gap: 1rem; align-items: center; padding-block: 1.1rem; border-bottom: 1px solid var(--linea-fuerte);
    text-decoration: none; transition: color .4s var(--curva);
  }
  /* en 320 px «Tecnología» a 40 px no cabía junto a la miniatura: tamaño y miniatura escalan con el ancho */
  .indice__nombre { grid-area: nombre; font: 400 clamp(1.9rem, .6rem + 7.4vw, 5.75rem)/1 var(--f-display); letter-spacing: -.02em; }
  .indice__meta { grid-area: meta; margin-top: .5rem; font-size: var(--t-peq); line-height: 1.45; color: var(--taupe); font-variant-numeric: tabular-nums; }
  .indice__mini { grid-area: mini; display: block; width: clamp(4rem, 3rem + 5vw, 5.25rem); aspect-ratio: 4 / 5; overflow: clip; }
  @media (min-width: 56.25rem) { .indice__nombre { font-size: clamp(2.5rem, 1.2rem + 5vw, 5.75rem); } }
  .indice__mini img { width: 100%; height: 100%; object-fit: cover; }
  .indice__flecha { display: none; }
  .indice__marco { display: none; }
  @media (min-width: 56.25rem) {
    .indice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
    .indice__titulo { grid-column: 1 / -1; }
    .indice__filas { grid-column: 1 / 8; }
    .indice__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nombre flecha' 'meta flecha'; padding-block: 1.6rem 1.4rem; }
    .indice__mini { display: none; }
    .indice__flecha { display: block; grid-area: flecha; font-size: 1.6rem; transition: translate .45s var(--curva); }
    .indice__marco { display: block; position: sticky; top: calc(var(--alto-cab) + 2rem); grid-column: 9 / 13; aspect-ratio: 4 / 5.3; transition: translate .7s var(--curva-marco); }
    .indice__marco figure { position: absolute; inset: 0 0 2.5rem; margin: 0; overflow: clip; clip-path: inset(0 0 0 100%); transition: clip-path .75s var(--curva-marco); }
    .indice__marco img { width: 100%; height: 100%; object-fit: cover; scale: 1.1; translate: -3% 0; transition: scale 1.1s var(--curva), translate 1.1s var(--curva); }
    .indice__leyendas { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5rem; }
    .indice__leyendas p { position: absolute; left: 0; bottom: .6rem; font-size: var(--t-mini); color: var(--taupe); opacity: 0; transition: opacity .3s var(--curva); }

    /* sin interacción, manda Piel */
    .indice:not(:has(.indice__fila:is(:hover, :focus-visible))) .indice__marco figure[data-i='piel'],
    .indice:has(.indice__fila[data-i='piel']:is(:hover, :focus-visible)) .indice__marco figure[data-i='piel'],
    .indice:has(.indice__fila[data-i='cuerpo']:is(:hover, :focus-visible)) .indice__marco figure[data-i='cuerpo'],
    .indice:has(.indice__fila[data-i='tecnologia']:is(:hover, :focus-visible)) .indice__marco figure[data-i='tecnologia'] { clip-path: inset(0); }
    .indice:not(:has(.indice__fila:is(:hover, :focus-visible))) .indice__marco figure[data-i='piel'] img,
    .indice:has(.indice__fila[data-i='piel']:is(:hover, :focus-visible)) .indice__marco figure[data-i='piel'] img,
    .indice:has(.indice__fila[data-i='cuerpo']:is(:hover, :focus-visible)) .indice__marco figure[data-i='cuerpo'] img,
    .indice:has(.indice__fila[data-i='tecnologia']:is(:hover, :focus-visible)) .indice__marco figure[data-i='tecnologia'] img { scale: 1; translate: 0 0; }
    .indice:not(:has(.indice__fila:is(:hover, :focus-visible))) .indice__leyendas [data-i='piel'],
    .indice:has(.indice__fila[data-i='piel']:is(:hover, :focus-visible)) .indice__leyendas [data-i='piel'],
    .indice:has(.indice__fila[data-i='cuerpo']:is(:hover, :focus-visible)) .indice__leyendas [data-i='cuerpo'],
    .indice:has(.indice__fila[data-i='tecnologia']:is(:hover, :focus-visible)) .indice__leyendas [data-i='tecnologia'] { opacity: 1; }
    /* el marco acompaña a la fila: composición secundaria */
    .indice:has(.indice__fila[data-i='cuerpo']:is(:hover, :focus-visible)) .indice__marco { translate: 0 2.5rem; }
    .indice:has(.indice__fila[data-i='tecnologia']:is(:hover, :focus-visible)) .indice__marco { translate: 0 5rem; }
    .indice:has(.indice__fila:is(:hover, :focus-visible)) .indice__fila:not(:hover, :focus-visible) { color: var(--taupe); }
    .indice__fila:is(:hover, :focus-visible) .indice__flecha { translate: .6rem 0; }
  }

  .espacio { display: grid; gap: 1.1rem; padding-block: 0 var(--aire); }
  .espacio__foto { margin: 0 var(--canal) 0 0; overflow: clip; }
  .espacio__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .espacio__nota { padding-inline: var(--canal); }
  .espacio__nota p { max-width: 24ch; font: 400 var(--t-h3)/1.3 var(--f-display); }
  @media (min-width: 56.25rem) {
    .espacio { container-type: inline-size; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .espacio__foto { grid-column: 1 / 10; margin: 0; }
    .espacio__foto img { aspect-ratio: 16 / 10; }
    .espacio__nota { grid-column: 10 / 13; padding: 0 max(var(--canal), (100cqw - var(--max)) / 2) 0 0; }
  }

  .autoridad { padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); }
  .autoridad__in { display: grid; gap: 3rem; }
  .autoridad__dato p:not([class]) { margin-top: .9rem; max-width: 30ch; color: var(--taupe-claro); }
  .autoridad__cifra { font: 400 clamp(4.75rem, 2rem + 9vw, 10.5rem)/.85 var(--f-display); letter-spacing: -.03em; color: var(--ambar); font-variant-numeric: tabular-nums; }
  .autoridad__cifra span { margin-inline-start: .08em; font-size: .3em; letter-spacing: 0; color: var(--taupe-claro); }
  .autoridad__marca { font: 400 var(--t-h3)/1.25 var(--f-display); color: var(--porcelana); }
  .autoridad .enlace { margin-top: .75rem; color: var(--porcelana); }
  /* dos piezas de peso distinto, sin divisores: la cifra manda, la marca acompaña */
  @media (min-width: 56.25rem) {
    .autoridad__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .autoridad__dato--nota { grid-column: 1 / 8; }
    .autoridad__dato--marca { grid-column: 9 / 13; padding-bottom: .4rem; }
  }

  .cierre { display: grid; gap: 2rem; padding-block: var(--aire); }
  .cierre__titulo { font-size: var(--t-titulo); line-height: .9; }
  .cierre__dir { font: 300 var(--t-lead)/1.4 var(--f-texto); }
  .cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
  @media (min-width: 56.25rem) {
    .cierre { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); row-gap: 2.5rem; align-items: start; }
    .cierre__titulo { grid-column: 1 / 6; grid-row: 1 / 3; }
    .cierre__dir { grid-column: 7 / 11; }
    .cierre__horario { grid-column: 7 / 11; }
    .cierre__acciones { grid-column: 7 / 13; }
  }

  /* ═════ RUTAS ═════ */
  .ruta__cab { padding-block: clamp(2.5rem, 1.5rem + 5vw, 7rem) clamp(3rem, 2rem + 4vw, 6rem); }
  .ruta__titulo { font-size: var(--t-titulo); line-height: .92; letter-spacing: -.02em; }
  .ruta__hechos { margin-top: 1.75rem; font: 300 var(--t-lead)/1.35 var(--f-texto); font-variant-numeric: tabular-nums; }
  .ruta__foto { margin: 2.75rem 0 0 auto; width: min(68%, 26rem); }
  .ruta__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .carta { padding-block: 0 var(--aire); }
  .ruta__cierre-foto { padding-block: 0 var(--aire); }
  .ruta__cierre-foto img { width: min(100%, 40rem); aspect-ratio: 4 / 3; object-fit: cover; }
  @media (min-width: 56.25rem) {
    /* la foto abarca dos filas: sin «auto 1fr» le reparte altura al título y lo separa de los hechos */
    .ruta__cab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--medianil); align-items: start; }
    .ruta__titulo { grid-column: 1 / 8; }
    .ruta__hechos { grid-column: 1 / 5; margin-top: 2.5rem; }
    .ruta__foto--piel { grid-column: 9 / 13; grid-row: 1 / 3; width: 100%; margin: 7rem 0 0; }
    .carta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); }
    .carta > * { grid-column: 1 / 10; }
    .ruta__cierre-foto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); }
    .ruta__cierre-foto img, .ruta__cierre-foto figcaption { grid-column: 6 / 12; }
  }

  /* CUERPO */
  .cuerpo-masajes { display: grid; gap: 2.5rem; padding-block: 0 var(--aire); }
  .cuerpo-masajes__foto { width: min(62%, 22rem); }
  .cuerpo-masajes__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .cuerpo-masajes__segundo { margin-top: 4rem; }
  @media (min-width: 56.25rem) {
    .cuerpo-masajes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
    .cuerpo-masajes__foto { grid-column: 1 / 4; width: 100%; margin-top: 4rem; }
    .cuerpo-masajes__carta { grid-column: 5 / 12; }
  }
  .body { padding-block: var(--aire); }
  .body__in { display: grid; gap: 2.75rem; }
  /* «Experience» a tamaño de título de ruta no cabía en su columna (555 px de palabra en 535): escala propia */
  .body__titulo { font-size: clamp(2.6rem, 1rem + 5vw, 6rem); line-height: .92; letter-spacing: -.02em; }
  .body__lead { margin: 2rem 0 1rem; font: 300 var(--t-lead)/1.35 var(--f-texto); }
  .body .lista-simple { max-width: 26rem; }
  .body__precio { margin-top: 1.25rem; color: var(--taupe); }
  .body__foto { width: min(70%, 24rem); margin-inline-start: auto; }
  .body__foto img { width: 100%; aspect-ratio: 9 / 13; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .body__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: center; }
    .body__texto { grid-column: 1 / 8; }
    .body__foto { grid-column: 9 / 12; width: 100%; }
  }
  .corporal { padding-block: var(--aire); }
  @media (min-width: 56.25rem) { .corporal > * { max-width: 52rem; } }

  /* TECNOLOGÍA */
  .tec-cab { padding-block: clamp(3.5rem, 2.5rem + 5vw, 8rem) clamp(3rem, 2rem + 4vw, 6rem); }
  .tec-cab__nota { margin-top: 1.5rem; font: 300 var(--t-lead)/1.35 var(--f-texto); color: var(--taupe-claro); }
  .tec-cab__indice { margin-top: clamp(2.5rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--linea-clara); }
  .tec-cab__indice a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1.5rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linea-clara); text-decoration: none; }
  .tec-cab__indice a > span:first-child { font: 400 var(--t-h2)/1.05 var(--f-display); color: var(--porcelana); }
  .tec-cab__dato { font-size: var(--t-peq); color: var(--taupe-claro); }
  .tec-cab__indice a:hover > span:first-child { color: var(--ambar); }
  .tec { padding-block: var(--aire) 0; }
  .tec__titulo { font-size: var(--t-h2); }
  .tec__hechos { margin: 1.25rem 0 2rem; font: 300 var(--t-lead)/1.35 var(--f-texto); }
  .tec__nota { max-width: 36ch; margin-bottom: 1rem; color: var(--taupe); }
  .tec__foto img { width: 100%; object-fit: cover; }
  /* LPG son 8 precios: manda la carta ancha; la foto documenta, chica */
  .tec--lpg { display: grid; gap: 2.5rem; }
  .tec__foto--chica { width: min(62%, 18rem); margin-top: 2rem; }
  .tec__foto--chica img { aspect-ratio: 1; }
  .tec--venus { display: grid; gap: 2.5rem; }
  .tec--venus .tec__texto { padding-inline: var(--canal); }
  .tec--venus .tec__foto { margin-inline-start: var(--canal); }
  .tec--venus .tec__foto img { aspect-ratio: 5 / 4; }
  /* Soprano no tiene precio publicado: una sola fila, no media pantalla */
  .tec--soprano {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.25rem; row-gap: .75rem; align-items: center;
    margin-block: var(--aire); padding-block: 1.5rem; border-block: 1px solid var(--linea-fuerte);
  }
  .tec__mini img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .tec__titulo--fila { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); }
  .tec__fila p { margin-top: .35rem; color: var(--taupe); }
  .tec--soprano .enlace { grid-column: 2; }
  @media (min-width: 56.25rem) {
    .tec--lpg { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
    /* «Endermologie» no cabía en cuatro columnas a 910 px */
    .tec--lpg .tec__texto { grid-column: 1 / 6; }
    .tec--lpg .tec__carta { grid-column: 7 / 13; margin-top: .6rem; }
    .tec__foto--chica { width: min(100%, 18rem); margin-top: 3rem; }
    .tec--venus { container-type: inline-size; grid-template-columns: max(var(--canal), (100cqw - var(--max)) / 2) minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); column-gap: 0; align-items: center; }
    .tec--venus .tec__texto { grid-column: 2; padding: 0; }
    .tec--venus .tec__foto { grid-column: 4; margin: 0; }
    .tec--soprano { grid-template-columns: 6rem minmax(0, 1fr) auto; column-gap: 2rem; }
    .tec--soprano .enlace { grid-column: 3; }
  }

  /* LA CASA */
  .casa-cab { display: grid; gap: 1.75rem; padding-block: clamp(2.5rem, 1.5rem + 5vw, 7rem) clamp(3rem, 2rem + 4vw, 6rem); }
  .casa-cab__lugar { font: 300 var(--t-lead)/1.35 var(--f-texto); }
  .casa-cab__cita p { font: 400 clamp(1.35rem, 1rem + 1.5vw, 2.25rem)/1.3 var(--f-display); max-width: 24ch; }
  .casa-cab__cita footer { margin-top: .9rem; font-size: var(--t-mini); color: var(--taupe); }
  @media (min-width: 56.25rem) {
    .casa-cab { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .casa-cab .ruta__titulo { grid-column: 1 / 7; }
    .casa-cab__lugar { grid-column: 1 / 5; }
    .casa-cab__cita { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; }
  }
  .casa-llegada { margin: 0; }
  .casa-llegada > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .casa-llegada { width: 82%; margin-inline-start: auto; }
    .casa-llegada > img { aspect-ratio: 16 / 9; object-position: 50% 55%; }
    .casa-llegada figcaption { width: auto; margin-inline: 0; }
  }

  .recorrido { padding-block: var(--aire); }
  .recorrido__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; margin-bottom: 1.5rem; }
  .recorrido__titulo { font-size: var(--t-h2); }
  .recorrido__ayuda { font-size: var(--t-peq); color: var(--taupe); }
  .recorrido__vista {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; cursor: grab;
    scrollbar-width: thin; scrollbar-color: var(--tinta) var(--hueso); border-block: 1px solid var(--linea-fuerte);
  }
  .recorrido__vista:focus-visible { outline-offset: -4px; }
  .recorrido__vista.arrastrando { cursor: grabbing; user-select: none; }
  .recorrido__pista { position: relative; width: max-content; height: clamp(17rem, 9rem + 26vw, 34rem); }
  .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__puntos { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: .75rem; }
  .recorrido__puntos button { appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; min-height: 2.75rem; padding: .5rem 0; font-size: var(--t-peq); font-weight: 500; color: var(--taupe); cursor: pointer; }
  .recorrido__puntos button[aria-pressed='true'] { color: var(--tinta); border-bottom-color: var(--tinta); }

  .casa-cabinas { display: grid; gap: 1.75rem; padding-block: 0 var(--aire); }
  .casa-cabinas__foto { overflow: clip; }
  .casa-cabinas__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .casa-cabinas__texto p { max-width: 30ch; font: 300 var(--t-lead)/1.4 var(--f-texto); }
  @media (min-width: 56.25rem) {
    .casa-cabinas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .casa-cabinas__foto { grid-column: 1 / 8; }
    .casa-cabinas__texto { grid-column: 9 / 13; }
  }

  .casa-detalles { display: grid; gap: 2.5rem; padding-block: 0 var(--aire); }
  .casa-detalles__a { width: min(70%, 22rem); }
  .casa-detalles__b { width: min(54%, 17rem); margin-inline-start: auto; }
  .casa-detalles img { width: 100%; object-fit: cover; }
  .casa-detalles__a img { aspect-ratio: 1; }
  .casa-detalles__b img { aspect-ratio: 4 / 5; }
  @media (min-width: 56.25rem) {
    .casa-detalles { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
    .casa-detalles .bloque__titulo { grid-column: 1 / 5; }
    .casa-detalles__a { grid-column: 5 / 9; width: 100%; }
    .casa-detalles__b { grid-column: 10 / 13; width: 100%; margin-top: 9rem; }
  }

  /* el producto se cuenta con texto; la foto es un detalle debajo, del mismo lado */
  .casa-producto { display: grid; gap: 1.75rem; padding-block: 0 var(--aire); }
  .casa-producto__texto p { max-width: 34ch; font: 300 var(--t-lead)/1.4 var(--f-texto); }
  .casa-producto__foto { width: min(70%, 20rem); }
  .casa-producto__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .casa-producto { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start; }
    .casa-producto__texto { grid-column: 2 / 7; }
    .casa-producto__foto { grid-column: 8 / 11; width: 100%; margin-top: 5rem; }
  }

  .regalo { padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); }
  .regalo__in { display: grid; gap: 2.5rem; }
  .regalo__foto { width: min(60%, 22rem); margin-inline-start: auto; }
  .regalo__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .regalo__titulo { font-size: var(--t-titulo); line-height: .92; letter-spacing: -.02em; color: var(--porcelana); }
  .regalo__texto p { margin: 1.5rem 0 .5rem; max-width: 30ch; font: 300 var(--t-lead)/1.4 var(--f-texto); color: var(--taupe-claro); }
  .regalo .enlace { color: var(--porcelana); }
  @media (min-width: 56.25rem) {
    .regalo__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: center; }
    .regalo__texto { grid-column: 1 / 7; }
    .regalo__foto { grid-column: 9 / 12; width: 100%; }
  }

  /* MENÚ */
  .menu-cab { display: grid; gap: 1.5rem; padding-block: clamp(2.5rem, 1.5rem + 5vw, 7rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
  .menu-cab__lead { font: 300 var(--t-lead)/1.35 var(--f-texto); }
  .menu-cab__saltos ul { display: flex; flex-wrap: wrap; gap: 0 1.35rem; padding-top: .5rem; border-top: 1px solid var(--linea-fuerte); }
  .menu-cab__saltos a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; font-size: var(--t-peq); color: var(--taupe); text-decoration: none; }
  .menu-cab__saltos a:hover { color: var(--tinta); text-decoration: underline; }
  @media (min-width: 56.25rem) {
    .menu-cab { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
    .menu-cab .ruta__titulo { grid-column: 1 / 7; }
    .menu-cab__lead { grid-column: 1 / 6; }
    .menu-cab__saltos { grid-column: 7 / 13; grid-row: 1 / 3; align-self: end; }
  }
  .carta-completa { display: grid; gap: 3.5rem; padding-block: 0 calc(var(--aire) * .7); }
  .grupo__titulo { margin-top: 3.5rem; padding-bottom: .75rem; font-size: var(--t-h2); }
  .carta-completa__col > .grupo__titulo:first-child { margin-top: 0; }
  .categoria { margin-top: 1.75rem; }
  .categoria__titulo { margin-bottom: .6rem; font: 500 var(--t-peq)/1.3 var(--f-texto); color: var(--taupe); }
  @media (min-width: 56.25rem) {
    .carta-completa { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 6vw, 7.5rem); align-items: start; }
  }
  .menu-pie { padding-block: 2.5rem var(--aire); border-top: 1px solid var(--linea-fuerte); }
  .menu-pie__lista li { padding-block: .3rem; color: var(--taupe); }

  /* VISITA */
  .visita-cab { padding-block: clamp(2.5rem, 1.5rem + 5vw, 7rem) 2rem; }
  .visita { display: grid; gap: 3rem; padding-block: 0 var(--aire); }
  .visita__dir { font: 400 var(--t-h2)/1.12 var(--f-display); letter-spacing: -.01em; }
  .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 { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  @media (min-width: 56.25rem) {
    .visita { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); row-gap: 4rem; align-items: start; }
    .visita__dir { grid-column: 1 / 9; }
    .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: -6rem; }
  }
}

@layer movimiento {
  @media (prefers-reduced-motion: no-preference) {
    /* A · el nombre y los títulos aparecen desde su línea base, una sola vez */
    .portada__nombre .nombre, .ruta__titulo {
      display: block; animation: levantar .95s var(--curva) both;
    }
    .portada__lugar, .portada__caminos, .portada__acciones, .ruta__hechos { animation: asentar .8s .3s var(--curva) both; }

    /* B · las fotos editoriales se abren como un marco al entrar en pantalla */
    @supports (animation-timeline: view()) {
      .apertura img { animation: abrir linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    }

    /* la cabecera: al bajar aparece la línea inferior, nada más */
    @supports (animation-timeline: scroll()) {
      .cabecera__in { animation: linea linear both; animation-timeline: scroll(root); animation-range: 0 10rem; }
    }

    /* D · transición entre páginas: la nueva se abre como un marco */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: .22s var(--curva) both desvanecer; }
    ::view-transition-new(root) { animation: .48s var(--curva-marco) both abrir-pagina; }
    ::view-transition-group(cabecera) { animation: none; }
  }

  .indice-movil:popover-open { animation: entrar-indice .35s var(--curva) both; }
  /* en inicio el logotipo grande ya es la portada: el chico de la cabecera entra cuando la portada queda atrás.
     Solo opacidad: con visibility el enlace dejaba de ser enfocable a mitad de un Tab y el foco caía a body */
  @supports (animation-timeline: scroll()) {
    .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; }
  }
  @keyframes marca-entra { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  }

  @keyframes levantar { from { clip-path: inset(0 0 100% 0); translate: 0 .35em; } 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(--linea); } }
  @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); } }
}