/* =========================================================================
   PÁGINA PRINCIPAL — sistema de diseño
   Compartido por principal.html, obra.html, textos.html y trayectoria.html.
   No lo usa landing.html (esa tiene su propio landing.css).

   DOS PIELES. El sitio alterna secciones claras y oscuras. En vez de escribir
   cada componente dos veces, los componentes sólo usan tokens semánticos
   (--fondo, --texto, --linea…) y la clase `.piel-noche` los redefine. Un
   componente nuevo funciona en ambas pieles sin tocarlo.
   ========================================================================= */

@layer base, piel, layout, componentes, paginas, movimiento;

/* ---------------------------------------------------------------- tokens */
:root {
  /* Paleta cruda */
  --papel: #f4f0e6;
  --papel-hondo: #e8e1d0;
  --papel-alto: #fbf9f3;
  --noche: #0d0b09;
  --noche-alta: #171310;
  --noche-borde: #262019;
  --sepia: #241c12;
  --sepia-medio: #6b5c47;
  --sepia-tenue: #9c8d76;
  --oro: #b8912f;
  --oro-claro: #d8b45c;

  /* Tokens semánticos — piel clara por defecto */
  --fondo: var(--papel);
  --fondo-alto: var(--papel-alto);
  --fondo-hondo: var(--papel-hondo);
  --texto: var(--sepia);
  --texto-2: var(--sepia-medio);
  --texto-3: var(--sepia-tenue);
  --linea: rgba(36, 28, 18, 0.14);
  --linea-fuerte: rgba(36, 28, 18, 0.3);
  --acento: var(--oro);
  --trama: rgba(36, 28, 18, 0.03);

  /* Tipografía de SOPORTE, no de protagonista.
     Es un portafolio: quien manda es la obra. Una primera versión llevó el
     display a 12rem y el texto se comía la página. La escala vive contenida
     para que la fotografía tenga el peso visual. */
  --t-display: clamp(2.4rem, 0.9rem + 4.6vw, 5rem);
  --t-titulo: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  --t-seccion: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  --t-lead: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  --t-cuerpo: 0.95rem;
  --t-menor: 0.85rem;
  --t-micro: 0.68rem;

  --shell: 82rem;
  --shell-ancho: 96rem;
  --shell-lectura: 38rem;
  --aire: clamp(5rem, 2rem + 11vw, 12rem);
  --canal: clamp(1.25rem, 0.5rem + 3vw, 4rem);

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-seca: cubic-bezier(0.65, 0, 0.35, 1);
  --transicion: 0.5s var(--curva);
}

@layer piel {
  .piel-noche {
    --fondo: var(--noche);
    --fondo-alto: var(--noche-alta);
    --fondo-hondo: var(--noche-alta);
    --texto: #f2ece0;
    --texto-2: #a99d89;
    --texto-3: #6f6455;
    --linea: rgba(242, 236, 224, 0.14);
    --linea-fuerte: rgba(242, 236, 224, 0.32);
    --acento: var(--oro-claro);
    --trama: rgba(242, 236, 224, 0.028);

    background: var(--fondo);
    color: var(--texto);
  }

  /* La piel oscura necesita su propia trama; la clara la hereda del body. */
  .piel-noche { position: relative; isolation: isolate; }
  .piel-noche::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(0deg, var(--trama) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(90deg, var(--trama) 0 1px, transparent 1px 4px);
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
  }

  body {
    background: var(--papel);
    color: var(--sepia);
    font-family: "Inter", system-ui, sans-serif;
    font-size: var(--t-cuerpo);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image:
      repeating-linear-gradient(0deg, rgba(36, 28, 18, 0.028) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(90deg, rgba(36, 28, 18, 0.024) 0 1px, transparent 1px 4px);
  }

  img { display: block; max-width: 100%; height: auto; }
  button, input, textarea, select { font: inherit; color: inherit; }
  [hidden] { display: none !important; }

  h1, h2, h3, h4, blockquote {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a { color: inherit; text-decoration: none; }

  :focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
  ::selection { background: var(--acento); color: var(--noche); }

  .sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .saltar {
    position: absolute;
    top: 0; left: 0;
    z-index: 100;
    padding: 0.9rem 1.4rem;
    background: var(--sepia);
    color: var(--papel-alto);
    translate: 0 -110%;
    transition: translate 0.2s;
  }
  .saltar:focus { translate: 0; }
}

@layer layout {
  .shell { width: min(100% - (var(--canal) * 2), var(--shell)); margin-inline: auto; }
  .shell--ancho { max-width: var(--shell-ancho); }
  .shell--lectura { max-width: var(--shell-lectura); }

  .bloque { padding-block: var(--aire); }
  .bloque--corto { padding-block: calc(var(--aire) * 0.5); }
}

@layer componentes {
  /* ------------------------------------------------------------ etiqueta */
  .etiqueta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--texto-3);
  }
  .etiqueta::before {
    content: "";
    width: clamp(1.5rem, 4vw, 3rem);
    height: 1px;
    background: currentColor;
    opacity: 0.6;
  }
  .etiqueta--sola::before { display: none; }

  /* --------------------------------------------------- barra de progreso */
  .progreso {
    position: fixed;
    inset: 0 0 auto;
    height: 2px;
    z-index: 60;
    background: transparent;
    pointer-events: none;
  }
  .progreso span {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: 0 50%;
    scale: 0 1;
    background: linear-gradient(90deg, var(--oro), var(--oro-claro));
  }

  /* ------------------------------------------------------------ cabecera */
  .cabecera {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    transition: background var(--transicion), backdrop-filter var(--transicion);
  }
  .cabecera[data-desplazada] {
    background: color-mix(in srgb, var(--papel) 86%, transparent);
    backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid rgba(36, 28, 18, 0.1);
  }
  /* Cuando la cabecera flota sobre una sección oscura, se invierte sola. */
  .cabecera[data-sobre-noche] { color: #f2ece0; }
  .cabecera[data-sobre-noche][data-desplazada] {
    background: color-mix(in srgb, var(--noche) 80%, transparent);
    border-bottom-color: rgba(242, 236, 224, 0.12);
  }

  .cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.5rem;
  }

  .marca { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
  .marca img {
    width: 1.9rem; height: 1.9rem;
    object-fit: contain;
    transition: rotate 0.6s var(--curva);
  }
  .cabecera[data-sobre-noche] .marca img { filter: invert(1) brightness(1.6); }
  .marca:hover img { rotate: -8deg; }
  .marca__nombre {
    font-family: "Fraunces", serif;
    font-size: 0.95rem;
    line-height: 1.05;
  }
  .marca__alias {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: var(--t-micro);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.55;
  }

  .navegacion { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.75rem); }
  .navegacion a {
    position: relative;
    font-size: var(--t-menor);
    padding-block: 0.4rem;
    opacity: 0.72;
    transition: opacity var(--transicion);
  }
  .navegacion a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.15rem;
    height: 1px;
    background: currentColor;
    scale: 0 1;
    transform-origin: left;
    transition: scale 0.45s var(--curva);
  }
  .navegacion a:hover, .navegacion a[aria-current="page"] { opacity: 1; }
  .navegacion a:hover::after, .navegacion a[aria-current="page"]::after { scale: 1 1; }

  @media (max-width: 46rem) {
    .cabecera__interior { min-height: 3.75rem; }
    .navegacion { gap: 1.1rem; }
    .navegacion a { font-size: 0.8rem; }
    .marca__nombre { font-size: 0.85rem; }
  }

  /* ---------------------------------------------------------------- botón */
  .boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem 2rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: 100px;
    font-size: var(--t-menor);
    letter-spacing: 0.02em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    transition: color 0.45s var(--curva), border-color 0.45s var(--curva);
  }
  /* El relleno sube desde abajo en vez de aparecer de golpe. */
  .boton::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--texto);
    translate: 0 101%;
    transition: translate 0.5s var(--curva);
  }
  .boton:hover { color: var(--fondo); border-color: var(--texto); }
  .boton:hover::before { translate: 0 0; }
  .boton__flecha { transition: translate 0.5s var(--curva); }
  .boton:hover .boton__flecha { translate: 0.35rem 0; }

  .boton--solido { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
  .boton--solido::before { background: var(--acento); }
  .boton--solido:hover { color: var(--noche); border-color: var(--acento); }

  /* ------------------------------------------------------------ avisos */
  .pendiente {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--t-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-3);
  }
  .pendiente::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--acento);
  }

  .vacio {
    padding: clamp(3rem, 8vw, 6rem) 0;
    border-top: 1px solid var(--linea);
    color: var(--texto-2);
    max-width: var(--shell-lectura);
  }
  .vacio h3 { font-size: var(--t-seccion); margin-bottom: 0.9rem; color: var(--texto); }

  /* --------------------------------------------------------- pie de página */
  .pie { padding-block: clamp(4rem, 9vw, 8rem) 2.5rem; }
  .pie__marca {
    font-size: var(--t-titulo);
    line-height: 0.95;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
  }
  .pie__marca em { font-style: italic; color: var(--texto-2); }
  .pie__interior {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    padding-top: 2.5rem;
    border-top: 1px solid var(--linea);
  }
  .pie__grupo h3 {
    font-family: "Inter", sans-serif;
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--texto-3);
    margin-bottom: 1.15rem;
  }
  .pie__grupo ul { list-style: none; display: grid; gap: 0.7rem; }
  .pie__grupo a {
    font-size: var(--t-menor);
    color: var(--texto-2);
    transition: color var(--transicion);
  }
  .pie__grupo a:hover { color: var(--acento); }
  .pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(3rem, 7vw, 5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--linea);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-3);
  }
}

/* =========================================================================
   PORTADA (principal.html)
   ========================================================================= */
@layer paginas {
  /* ---------------------------------------------------------------- hero */
  .hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: 8rem 5rem;
    overflow: hidden;
  }

  /* Tres obras flotando detrás del nombre, cada una a su propia velocidad. */
  .hero__capas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .hero__capa {
    position: absolute;
    overflow: hidden;
    aspect-ratio: var(--proporcion);
    box-shadow: 0 40px 90px -50px rgba(13, 11, 9, 0.6);
  }
  .hero__capa img { display: block; width: 100%; height: 100%; object-fit: contain; }
  /* El `top` debe dejar libre la cabecera fija (~4.5rem) MÁS todo lo que el
     parallax puede subir la capa (4rem). Si no, la obra pasa por detrás de la
     navegación y el menú se vuelve ilegible sobre la imagen. */
  .hero__capa--a { top: max(10rem, 14%); right: 4%; width: clamp(12rem, 27vw, 27rem); }
  .hero__capa--b { bottom: 4%; right: 23%; width: clamp(9rem, 18vw, 17rem); }
  /* Todas las capas viven en la mitad derecha. La izquierda es del texto:
     esta capa estaba a la izquierda y pasaba por detrás de "Lilián Rivera". */
  .hero__capa--c { bottom: 7%; right: 47%; width: clamp(7rem, 12vw, 12rem); opacity: 0.55; }
  @media (max-width: 60rem) {
    .hero__capa--b, .hero__capa--c { display: none; }
    .hero__capa--a { top: auto; bottom: 6%; right: -2%; width: 46vw; opacity: 0.5; }
  }
  @media (max-width: 46rem) {
    /* `align-content: center` (heredado de arriba) con un `min-height` casi
       de pantalla completa dejaba el nombre pegado a media pantalla y un
       hueco enorme arriba. En móvil no hay cabecera fija de escritorio que
       llenar, así que el texto arranca arriba y la sección sólo mide lo que
       su contenido pide. */
    .hero { align-content: start; padding-block: 6.5rem 4rem; min-height: 0; }
    /* La obra flotante vive en la mitad derecha (bottom:6%; right:-2%;
       width:46vw — ver .hero__capa--a arriba). Sin este límite el texto
       corre a lo ancho completo y el párrafo termina escrito encima del
       cuadro. */
    .hero__contenido { max-width: 56%; }
  }

  .hero__contenido { position: relative; z-index: 1; }

  .hero__nombre {
    font-size: var(--t-display);
    line-height: 0.85;
    letter-spacing: -0.05em;
    margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
  }
  .hero__nombre em {
    display: block;
    font-style: italic;
    color: var(--texto-2);
    margin-left: clamp(1rem, 8vw, 8rem);
  }

  /* Todo el texto y el botón se agrupan a la izquierda. Con
     `justify-content: space-between` el botón se iba al extremo derecho y
     acababa encima de la obra del hero. La mitad derecha es de la obra. */
  .hero__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: min(100%, 46rem);
    margin-top: clamp(2.5rem, 6vw, 5rem);
  }
  .hero__semblanza {
    max-width: 40ch;
    font-size: var(--t-lead);
    line-height: 1.45;
    color: var(--texto-2);
  }

  /* ----------------------------------------------------------- manifiesto */
  .manifiesto { padding-block: var(--aire); }
  .manifiesto__texto {
    font-family: "Fraunces", serif;
    font-size: clamp(1.35rem, 1rem + 1.75vw, 2.5rem);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -0.028em;
    max-width: 22ch;
  }
  .manifiesto__texto b { font-weight: 300; color: var(--acento); font-style: italic; }
  .manifiesto__cierre {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 5vw, 5rem);
    margin-top: clamp(3rem, 7vw, 6rem);
    padding-top: 2rem;
    border-top: 1px solid var(--linea);
  }
  .manifiesto__cierre p { max-width: 38ch; color: var(--texto-2); }

  /* ------------------------------------------------------------ técnicas */
  .tecnicas__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }
  .tecnicas__cabeza h2 { font-size: var(--t-titulo); }

  .tecnicas { display: grid; border-top: 1px solid var(--linea); }

  .tecnica {
    position: relative;
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1.5rem, 3vw, 2.4rem);
    border-bottom: 1px solid var(--linea);
    isolation: isolate;
    transition: padding-inline 0.6s var(--curva), color 0.4s var(--curva);
  }
  .tecnica[data-vacia] { opacity: 0.42; }
  /* Fondo que barre de izquierda a derecha al pasar el cursor. */
  .tecnica::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--fondo-alto);
    scale: 0 1;
    transform-origin: left;
    transition: scale 0.6s var(--curva);
  }
  .tecnica:hover:not([data-vacia])::before { scale: 1 1; }
  .tecnica:hover:not([data-vacia]) { padding-inline: clamp(0.75rem, 2.5vw, 2rem); }

  .tecnica__codigo {
    font-size: var(--t-micro);
    letter-spacing: 0.18em;
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
  }
  .tecnica__nombre {
    font-family: "Fraunces", serif;
    font-size: clamp(1.1rem, 1rem + 0.95vw, 1.7rem);
    line-height: 1.05;
  }
  .tecnica__ramas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .tecnica__rama {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--linea);
    border-radius: 100px;
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-2);
    transition: border-color var(--transicion), color var(--transicion);
  }
  .tecnica__rama:hover { border-color: var(--acento); color: var(--acento); }
  .tecnica__cuenta {
    font-size: var(--t-menor);
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Miniatura que aparece siguiendo el cursor sobre cada técnica. */
  .tecnica__vista {
    position: absolute;
    top: 50%;
    right: clamp(6rem, 18vw, 16rem);
    width: clamp(9rem, 14vw, 14rem);
    aspect-ratio: 3/4;
    translate: 0 -50%;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    scale: 0.9;
    rotate: -3deg;
    pointer-events: none;
    transition: opacity 0.45s var(--curva), scale 0.45s var(--curva), rotate 0.45s var(--curva);
    box-shadow: 0 30px 60px -30px rgba(13, 11, 9, 0.7);
  }
  .tecnica__vista img { width: 100%; height: 100%; object-fit: cover; }
  .tecnica:hover .tecnica__vista { opacity: 1; scale: 1; rotate: 0deg; }
  @media (max-width: 60rem) { .tecnica__vista { display: none; } }
  /* El código no se parte nunca: "03 · TE" es más ancho que "01 · TI" y a
     3rem se rompía en dos líneas. */
  .tecnica__codigo { white-space: nowrap; }
  @media (max-width: 46rem) {
    .tecnica { grid-template-columns: 4rem 1fr; }
    .tecnica__cuenta { grid-column: 2; }
  }

  /* -------------------------------------------------------- obra destacada */
  .destacadas {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem);
    align-items: center;
  }
  .destacada { position: relative; }
  .destacada__marco { overflow: hidden; background: var(--fondo-alto); }
  .destacada__marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 1.2s var(--curva);
  }
  .destacada:hover .destacada__marco img { scale: 1.05; }
  .destacada__datos { margin-top: 1.25rem; display: grid; gap: 0.3rem; }
  .destacada__titulo { font-family: "Fraunces", serif; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); }
  .destacada__meta { font-size: var(--t-menor); color: var(--texto-2); }

  /* Composición asimétrica: tres piezas que no comparten línea de base. */
  .destacada--1 { grid-column: 1 / span 6; }
  .destacada--2 { grid-column: 8 / span 5; margin-top: clamp(3rem, 10vw, 10rem); }
  .destacada--3 { grid-column: 3 / span 5; margin-top: clamp(1rem, 4vw, 4rem); }
  @media (max-width: 46rem) {
    .destacadas { grid-template-columns: 1fr; }
    .destacada--1, .destacada--2, .destacada--3 { grid-column: 1; margin-top: 0; }
  }

  /* ------------------------------------------------------------- carrusel */
  .cinta {
    display: flex;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    width: max-content;
    will-change: transform;
  }
  .cinta img {
    width: clamp(13rem, 22vw, 21rem);
    aspect-ratio: 3/4;
    object-fit: cover;
    background: var(--fondo-alto);
  }
  .cinta-marco { overflow: hidden; }

  /* ------------------------------------------------------------- cifras */
  .cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 2.5rem;
    border-top: 1px solid var(--linea);
  }
  .cifra strong {
    display: block;
    font-family: "Fraunces", serif;
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.04em;
  }
  .cifra span {
    display: block;
    margin-top: 0.85rem;
    font-size: var(--t-micro);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto-3);
  }

  /* --------------------------------------------------------------- cita */
  .cita { max-width: 26ch; }
  .cita blockquote {
    font-size: clamp(1.3rem, 1rem + 1.5vw, 2.2rem);
    line-height: 1.12;
    font-style: italic;
  }
  .cita figcaption { margin-top: 2rem; font-size: var(--t-menor); color: var(--texto-3); }

  /* --------------------------------------------------------------- cierre */
  .cierre { text-align: center; padding-block: var(--aire); }
  .cierre h2 { font-size: var(--t-titulo); margin-block: 1.5rem 2.5rem; }
  .cierre .etiqueta { justify-content: center; }
}

/* =========================================================================
   OBRA (obra.html)
   ========================================================================= */
@layer paginas {
  .filtros {
    position: sticky;
    top: 4.5rem;
    z-index: 30;
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--linea);
    padding-block: 1rem;
  }
  /* En móvil deja de ser pegajosa: cabecera + filtros ocupaban el 46% de la
     pantalla y dejaban muy poca obra visible. */
  @media (max-width: 46rem) {
    .filtros { position: static; backdrop-filter: none; }
  }

  .filtros__grupo { display: flex; align-items: center; gap: 0.9rem; padding-block: 0.35rem; }
  .filtros__titulo {
    flex-shrink: 0;
    width: 4.5rem;
    font-size: var(--t-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-3);
  }

  .fichas { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.15rem; }
  .fichas::-webkit-scrollbar { display: none; }

  .ficha {
    flex-shrink: 0;
    padding: 0.45rem 1rem;
    border: 1px solid var(--linea);
    border-radius: 100px;
    background: transparent;
    font-size: var(--t-menor);
    color: var(--texto-2);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.35s var(--curva), color 0.35s var(--curva),
                border-color 0.35s var(--curva);
  }
  .ficha:hover:not(:disabled) { border-color: var(--linea-fuerte); color: var(--texto); }
  .ficha[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
  .ficha__conteo { margin-left: 0.45rem; font-size: var(--t-micro); font-variant-numeric: tabular-nums; opacity: 0.55; }
  .ficha:disabled { opacity: 0.28; cursor: not-allowed; }

  .filtros__rama { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--curva); }
  .filtros__rama[data-abierta] { grid-template-rows: 1fr; }
  .filtros__rama > div { overflow: hidden; }

  .filtros__resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 0.85rem;
    margin-top: 0.55rem;
    border-top: 1px solid var(--linea);
    font-size: var(--t-menor);
    color: var(--texto-2);
  }
  .filtros__conteo { flex-shrink: 0; }
  .filtros__conteo strong { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--texto); }

  /* El buscador ocupa el espacio libre entre el conteo y los botones (por
     eso ya no hace falta `justify-content: space-between` arriba) — y no se
     esconde con el resto de las fichas al compactar: buscar debe seguir a
     la mano mientras se recorre la galería. */
  .filtros__buscar {
    flex: 1 1 14rem;
    min-width: 8rem;
    border: 1px solid var(--linea);
    border-radius: 100px;
    padding: 0.45rem 1rem;
    background: transparent;
    font-size: var(--t-menor);
    color: var(--texto);
    transition: border-color 0.35s var(--curva);
  }
  .filtros__buscar::placeholder { color: var(--texto-3); }
  .filtros__buscar:hover { border-color: var(--linea-fuerte); }
  .filtros__buscar::-webkit-search-cancel-button { cursor: pointer; }

  @media (max-width: 46rem) {
    .filtros__buscar { flex-basis: 100%; order: 3; }
  }
  .filtros__acciones { display: flex; align-items: center; gap: 1.1rem; }
  .limpiar {
    border: 0; background: none; padding: 0;
    font-size: var(--t-menor);
    color: var(--texto-2);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
  .limpiar:hover { color: var(--acento); }

  /* --------------------------------------------------- filtros compactos */
  /* En cuanto la barra se pega arriba (ver sitio.js → filtrosAlPegarse) se
     reduce a una sola línea: contador + botón "Filtrar". Evita que tres
     filas de fichas se queden fijas comiéndose la pantalla mientras se
     recorre la galería.

     Los valores de este colapso (grid-template-rows, opacity, padding) los
     pone sitio.js directo por estilo en línea, cuadro a cuadro, ligados al
     scroll — por eso casi no hay nada aquí: sólo la base para que se vea
     bien ANTES de que el JS corra, y la variante `[data-expandida]` para el
     botón "Filtrar", que sí anima con transición normal (ver sitio.js). */
  .filtros__cuerpo { display: grid; grid-template-rows: 1fr; }
  .filtros__cuerpo-interior { overflow: hidden; }

  .filtros__alternar {
    display: none;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--linea);
    border-radius: 100px;
    padding: 0.4rem 0.9rem;
    background: transparent;
    font-size: var(--t-menor);
    color: var(--texto-2);
    cursor: pointer;
    transition: background 0.35s var(--curva), color 0.35s var(--curva),
                border-color 0.35s var(--curva);
  }
  .filtros__alternar:hover { border-color: var(--linea-fuerte); color: var(--texto); }
  .filtros__alternar-icono { display: inline-block; transition: transform 0.35s var(--curva); }
  .filtros[data-expandida] .filtros__alternar-icono { transform: rotate(180deg); }
  .filtros[data-expandida] .filtros__alternar {
    background: var(--texto); border-color: var(--texto); color: var(--fondo);
  }
  .filtros[data-compacta] .filtros__alternar { display: inline-flex; }

  /* En móvil los filtros ya no son pegajosos (ver arriba), así que sitio.js
     ni intenta compactarlos: siempre se ven completos. */
  @media (max-width: 46rem) {
    .filtros__alternar { display: none !important; }
  }

  /* ------------------------------------------------------------- galería */
  .galeria {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    width: min(100%, 64rem);
    margin-inline: auto;
    gap: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 2vw, 2rem);
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
  }
  @media (max-width: 46rem) { .galeria { grid-template-columns: 1fr; } }

  .pieza {
    content-visibility: auto;
    contain-intrinsic-size: auto 30rem;
    /* Sin esto, el ancho en `svh` de .pieza__enlace (pensado para que la
       proporción de cada obra se mantenga) empuja la columna del grid más
       ancha que la pantalla en móvil vertical, y toda la página se desborda
       horizontalmente. Es el fix estándar de "contenido que no cabe en su
       celda de grid". */
    min-width: 0;
  }

  .pieza__enlace {
    display: block;
    width: min(100%, var(--ancho-maximo, 100%));
    margin-inline: auto;
    cursor: pointer;
  }

  .pieza__marco {
    position: relative;
    display: block;
    aspect-ratio: var(--proporcion, 3 / 4);
    box-shadow: 0 1.4rem 3rem -2.4rem rgba(36, 28, 18, 0.55);
    transition: box-shadow 0.55s var(--curva), translate 0.55s var(--curva);
  }
  .pieza__montaje {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(36, 28, 18, 0.18);
    box-shadow:
      0 0.15rem 0.35rem rgba(36, 28, 18, 0.16),
      0 0.85rem 1.7rem -1.15rem rgba(36, 28, 18, 0.65);
  }
  .pieza__marco img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: scale 1.1s var(--curva), filter 0.6s var(--curva);
  }
  .galeria[data-hover-activo] .pieza__enlace:hover .pieza__marco {
    translate: 0 -0.3rem;
    box-shadow: 0 2rem 3.6rem -2.2rem rgba(36, 28, 18, 0.58);
  }
  .galeria[data-hover-activo] .pieza__enlace:hover .pieza__marco img { scale: 1.06; filter: brightness(0.82); }

  /* Ficha que sube desde el borde inferior sobre la obra. */
  .pieza__sobre {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 0.2rem;
    padding: 1.5rem 1.25rem 1.25rem;
    color: #f7f3ea;
    background: linear-gradient(transparent, rgba(13, 11, 9, 0.82));
    opacity: 0;
    translate: 0 1rem;
    transition: opacity 0.5s var(--curva), translate 0.5s var(--curva);
  }
  .galeria[data-hover-activo] .pieza__enlace:hover .pieza__sobre { opacity: 1; translate: 0 0; }
  .pieza__sobre small { font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
  /* En táctil no hay hover: la ficha se muestra siempre. */
  @media (hover: none) {
    .pieza__sobre { opacity: 1; translate: 0 0; }
  }

  .pieza__datos { display: grid; gap: 0.25rem; margin-top: 1rem; }
  .pieza__titulo { font-family: "Fraunces", serif; font-size: 1.02rem; line-height: 1.25; }
  .pieza__meta { font-size: var(--t-menor); color: var(--texto-2); }
  .pieza__tecnica { font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); }

  /* Hilos entretejidos heredados del catálogo anterior. */
  .hilo-fila {
    grid-column: 1 / -1;
    padding-block: clamp(0.25rem, 1vw, 0.75rem);
  }
  .hilo { display: block; width: 100%; height: 3.5rem; overflow: visible; }
  .hilo__cordon {
    fill: none;
    stroke: var(--oro);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.8s var(--curva);
  }
  .hilo__puntada {
    fill: none;
    stroke: #8f9a76;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.7s var(--curva) 0.9s;
  }
  .hilo__nudo {
    fill: var(--oro);
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.5s var(--curva) 0.6s, transform 0.5s var(--curva) 0.6s;
  }
  .hilo[data-activo] .hilo__cordon { stroke-dashoffset: 0; }
  .hilo[data-activo] .hilo__puntada { opacity: 0.85; }
  .hilo[data-activo] .hilo__nudo { opacity: 1; transform: scale(1); }

  @media (prefers-reduced-motion: reduce) {
    .hilo__cordon { transition: none; stroke-dashoffset: 0; }
    .hilo__puntada, .hilo__nudo { transition: none; opacity: 0.85; transform: scale(1); }
  }

  /* ------------------------------------------------------------- detalle */
  .detalle {
    width: min(calc(100vw - 2rem), 78rem);
    height: min(calc(100svh - 2rem), 58rem);
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: var(--papel-alto);
    color: var(--sepia);
    overflow: hidden;
  }
  .detalle::backdrop { background: rgba(13, 11, 9, 0.82); backdrop-filter: blur(8px); }
  .detalle[open] { animation: detalle-entra 0.5s var(--curva); }
  @keyframes detalle-entra {
    from { opacity: 0; scale: 0.97; }
    to { opacity: 1; scale: 1; }
  }

  .detalle__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }
  @media (max-width: 56rem) {
    .detalle { overflow-y: auto; }
    .detalle__cuerpo { grid-template-columns: 1fr; height: auto; min-height: 100%; }
  }

  .detalle__medio {
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 3vw, 3rem);
    background:
      radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.42), transparent 55%),
      var(--papel-hondo);
    min-height: 0;
  }
  .detalle__montaje {
    display: block;
    width: fit-content;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid rgba(36, 28, 18, 0.16);
    box-shadow:
      0 0.2rem 0.5rem rgba(36, 28, 18, 0.14),
      0 2.5rem 5rem -2.5rem rgba(13, 11, 9, 0.68);
  }
  .detalle__montaje img {
    display: block;
    max-width: 100%;
    max-height: min(70svh, 44rem);
    width: auto;
    object-fit: contain;
    border: 1px solid rgba(36, 28, 18, 0.12);
  }
  @media (max-width: 56rem) {
    .detalle__montaje img { max-height: min(52svh, 34rem); }
  }

  .detalle__texto {
    display: grid;
    align-content: start;
    gap: 1.15rem;
    padding: clamp(1.75rem, 3.5vw, 3.25rem);
    overflow-y: auto;
    min-height: 0;
  }
  .detalle__texto h2 { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem); }
  .detalle__texto p { color: var(--sepia-medio); }

  .ficha-tecnica { display: grid; margin-top: 0.5rem; font-size: var(--t-menor); }
  .ficha-tecnica > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    padding-block: 0.75rem;
    border-top: 1px solid rgba(36, 28, 18, 0.14);
  }
  .ficha-tecnica dt { color: var(--sepia-tenue); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; }
  .ficha-tecnica dd { color: var(--sepia-medio); }

  .detalle__barra { position: absolute; top: 0; right: 0; z-index: 1; display: flex; gap: 0.35rem; padding: 0.9rem; }
  /* En el layout apilado de móvil, .detalle__medio (la obra) queda primero:
     una barra `absolute` le cae encima. Aquí se vuelve parte del flujo —
     su propia franja arriba, pegajosa al hacer scroll — para no tapar la
     obra ni el borde de la obra. */
  @media (max-width: 56rem) {
    .detalle__barra {
      position: sticky;
      top: 0;
      right: auto;
      z-index: 2;
      justify-content: flex-end;
      padding: 0.6rem 0.75rem;
      background: var(--papel-alto);
      border-bottom: 1px solid rgba(36, 28, 18, 0.1);
    }
  }
  .detalle__control {
    display: grid;
    place-items: center;
    width: 2.6rem;
    aspect-ratio: 1;
    border: 1px solid rgba(36, 28, 18, 0.18);
    border-radius: 50%;
    background: color-mix(in srgb, var(--papel-alto) 80%, transparent);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.35s var(--curva), color 0.35s var(--curva);
  }
  .detalle__control:hover:not(:disabled) { background: var(--sepia); color: var(--papel-alto); }
  .detalle__control:disabled { opacity: 0.25; cursor: not-allowed; }
}

/* =========================================================================
   TEXTOS y TRAYECTORIA
   ========================================================================= */
@layer paginas {
  .encabezado-pagina { padding-block: 9rem clamp(3rem, 6vw, 5rem); }
  .encabezado-pagina h1 { font-size: var(--t-titulo); margin-block: 1.25rem 1.5rem; }
  .encabezado-pagina p { max-width: 46ch; font-size: var(--t-lead); color: var(--texto-2); }

  .textos { list-style: none; border-top: 1px solid var(--linea); }
  .texto {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 3rem);
    padding-block: clamp(2.25rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--linea);
  }
  @media (max-width: 46rem) { .texto { grid-template-columns: 1fr; gap: 0.75rem; } }
  .texto__autor { font-family: "Fraunces", serif; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); line-height: 1.1; }
  .texto__contexto {
    display: block;
    margin-top: 0.4rem;
    font-family: "Inter", sans-serif;
    font-size: var(--t-micro);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto-3);
  }
  .texto__extracto {
    font-family: "Fraunces", serif;
    font-size: var(--t-lead);
    font-style: italic;
    line-height: 1.45;
    color: var(--texto-2);
    max-width: 52ch;
  }

  .anio-grupo + .anio-grupo { margin-top: clamp(2.5rem, 5vw, 4rem); }
  .anio-grupo__marca {
    font-family: "Fraunces", serif;
    font-size: var(--t-seccion);
    color: var(--texto-3);
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--linea-fuerte);
    font-variant-numeric: tabular-nums;
  }
  .expos { list-style: none; }
  .expo {
    padding-block: 1.2rem;
    border-bottom: 1px solid var(--linea);
  }
  .expo__datos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: clamp(0.75rem, 3vw, 2.5rem);
  }
  @media (max-width: 46rem) { .expo__datos { grid-template-columns: 1fr; gap: 0.2rem; } }
  .expo__titulo { font-family: "Fraunces", serif; font-size: 1rem; }
  .expo__sede { font-size: var(--t-menor); color: var(--texto-2); }
  .expo__tipo { font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap; }
  .expo__galeria {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.15rem 0 0.6rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
  }
  .expo__imagen {
    flex: 0 0 auto;
    display: block;
    padding: 0.45rem;
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    scroll-snap-align: start;
  }
  .expo__imagen img {
    display: block;
    width: auto;
    height: clamp(10rem, 20vw, 15rem);
    max-width: none;
  }

  .cv { display: grid; gap: clamp(3rem, 7vw, 6rem); }
  .cv__seccion {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 3rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--linea-fuerte);
  }
  @media (max-width: 46rem) { .cv__seccion { grid-template-columns: 1fr; } }
  .cv__seccion h2 { font-size: var(--t-seccion); }
  .cv__lista { list-style: none; display: grid; gap: 1.1rem; }
  .cv__lista li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.25rem; font-size: var(--t-menor); }
  .cv__lista time { color: var(--texto-3); font-variant-numeric: tabular-nums; }
}

/* =========================================================================
   MOVIMIENTO

   Se usa la API de animaciones guiadas por scroll (`animation-timeline`).
   Corre en el hilo del compositor: no hay listener de scroll en JS, así que
   no se traba aunque la página tenga muchas imágenes. Donde el navegador no
   la soporte, `assets/sitio.js` hace el revelado con IntersectionObserver.
   ========================================================================= */
@layer movimiento {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      html { --scroll-nativo: 1; }

      /* Los rangos van en PÍXELES, no en porcentaje.
         Un porcentaje de `entry` o `cover` se mide contra el alto del propio
         elemento, así que una obra alta se quedaba a media opacidad durante
         cientos de píxeles de scroll: se veía como un error, no como una
         animación. Con una longitud fija, todo se revela en el mismo tramo
         sin importar su tamaño. */
      .revela {
        animation: revela-entra linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 220px;
      }
      @keyframes revela-entra {
        from { opacity: 0; translate: 0 3.5rem; }
        to   { opacity: 1; translate: 0 0; }
      }

      /* Escalonado dentro de un grupo: cada hijo entra un poco después. */
      .revela-grupo > * {
        animation: revela-entra linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 260px;
      }

      /* Titulares que entran línea por línea.

         SIN máscara de `overflow: hidden`. Se intentó y se descartó: con
         `line-height: 1.02` y una fuente variable como Fraunces, la tinta del
         texto no queda centrada en su caja de línea —se desplaza hasta 37px
         hacia abajo— y la máscara rebanaba los titulares por la mitad. El
         desfase depende de la fuente y del tamaño, así que no hay relleno fijo
         que lo resuelva. Se conserva el escalonado, que es lo que aporta el
         efecto, y se elimina lo que podía recortar. */
      .lineas span { display: block; }
      .lineas span > i {
        display: block;
        font-style: inherit;
        animation: linea-sube linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 180px;
      }
      .lineas span:nth-child(2) > i { animation-range: entry 0% entry 250px; }
      .lineas span:nth-child(3) > i { animation-range: entry 0% entry 320px; }
      .lineas span:nth-child(4) > i { animation-range: entry 0% entry 390px; }
      .lineas span:nth-child(5) > i { animation-range: entry 0% entry 460px; }
      @keyframes linea-sube {
        from { opacity: 0; translate: 0 0.8em; }
        to   { opacity: 1; translate: 0 0; }
      }

      /* EXCEPCIÓN: el hero NO se anima al entrar. Se queda visible siempre.

         El revelado por scroll dejaba el nombre cortado en móvil, porque ahí
         el titular cae a media pantalla al abrir y la animación aún no había
         terminado. La alternativa —animarlo al cargar— tiene un riesgo peor:
         el estado declarado pasa a ser el oculto, y basta con que la animación
         no llegue a correr (pestaña en segundo plano, reloj de animación
         detenido) para que el nombre quede invisible de forma permanente.

         Lo primero que ve una persona no se esconde nunca. El movimiento del
         hero lo aportan las capas de obra en parallax, que van guiadas por el
         scroll y no dependen de ningún reloj. */
      .hero .lineas span > i,
      .hero .revela {
        animation: none;
        opacity: 1;
        translate: 0 0;
      }

      /* Parallax: cada capa recorre su propia distancia mientras es visible. */
      .flota {
        animation: flota-y linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      @keyframes flota-y {
        from { translate: 0 var(--desde, 5rem); }
        to   { translate: 0 var(--hasta, -5rem); }
      }

      /* La imagen entra ampliada y se asienta. Tramo largo a propósito: aquí
         sí se busca que el movimiento acompañe todo el recorrido. */
      .acerca img {
        animation: acerca-img linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 700px;
      }
      @keyframes acerca-img {
        from { scale: 1.22; }
        to   { scale: 1; }
      }

      /* Barra de progreso de lectura */
      .progreso span {
        animation: progreso-avanza linear both;
        animation-timeline: scroll(root block);
      }
      @keyframes progreso-avanza { to { scale: 1 1; } }

      /* La cinta de obra se desplaza al hacer scroll: el movimiento
         horizontal lo produce el propio recorrido vertical de la página. */
      .cinta {
        animation: cinta-corre linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      @keyframes cinta-corre {
        from { translate: 2% 0; }
        to   { translate: -32% 0; }
      }
    }

    /* Respaldo para navegadores sin scroll-driven animations: sitio.js pone
       [data-visible] y aquí se hace la misma entrada con una transición. */
    @supports not (animation-timeline: view()) {
      .revela, .revela-grupo > * {
        opacity: 0;
        translate: 0 3rem;
        transition: opacity 0.9s var(--curva), translate 0.9s var(--curva);
      }
      .revela[data-visible], .revela-grupo[data-visible] > * { opacity: 1; translate: 0 0; }
      .revela-grupo[data-visible] > *:nth-child(2) { transition-delay: 0.08s; }
      .revela-grupo[data-visible] > *:nth-child(3) { transition-delay: 0.16s; }
      .revela-grupo[data-visible] > *:nth-child(4) { transition-delay: 0.24s; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}