/* ==========================================================================
   Portada cinemática (solo index.html; se carga con EXTRAS de construir.py).
   Por defecto se ve la versión quieta: imagen final, titular, frase y botones.
   La versión con recorrido solo se activa con JS (.js) y sin «reducir movimiento»;
   js/portada.js añade .ap-estatica si hay ahorro de datos o falta GSAP.
   Solo se anima transform y opacity.
   Debajo de la apertura (clases v-): hojas de hueso y de tinta que se superponen; ver «Portada rediseñada» en ESTADO.md.
   ========================================================================== */

:root { --ap-mesa: 236, 232, 222; --ap-r: 1.7917; }
@media (max-aspect-ratio: 3/4) { :root { --ap-r: .5625; } }

.boton--luz { --bg: var(--luz); --fg: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 14px 34px -14px rgba(47,91,255,.7); }
.boton--luz .boton__icono { background: rgba(255,255,255,.2); }
.boton--luz:hover .boton__icono { background: #fff; color: var(--luz); }

/* ---------- Apertura, versión quieta ---------- */
.apertura { position: relative; padding: clamp(112px, 13vw, 156px) 0 clamp(56px, 8vw, 96px); }
.apertura__fija { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.apertura__escena { order: 2; position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: rgb(var(--ap-mesa)); box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -36px rgba(13,13,15,.35); }
.apertura__escena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .apertura__escena picture { display: none; }
.apertura__lienzo, .apertura__sombra, .apertura__progreso, .ap-baja { display: none; }
.apertura__textos { order: 1; }
.apertura .titular { margin: 0; }
.ap-autoridad { margin: 18px 0 0; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; color: var(--tinta); text-wrap: balance; }
.ap-frase { margin: 28px 0 0; font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.ap-frase--remate { margin-top: 6px; color: #1d43d6; }
.ap-sub { margin: 6px 0 0; font-size: clamp(18px, 1.8vw, 22px); color: var(--tinta-2); letter-spacing: -0.015em; }
.ap-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ap-acciones .boton { min-height: 54px; }
.ap-nota { margin: 14px 0 0; font-size: 14px; color: var(--tinta-2); }
@media (max-width: 1080px) {
  .apertura__fija { grid-template-columns: minmax(0, 1fr); }
  .apertura__escena { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .apertura__escena { aspect-ratio: 4 / 5; }
  .ap-acciones .boton { width: 100%; justify-content: space-between; }
}

/* ---------- Apertura, versión con recorrido ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.ap-estatica) .apertura { padding: 0; height: 460vh; }
  .js:not(.ap-estatica) .apertura__fija {
    --ap-w: max(100vw, calc(100vh * var(--ap-r))); --ap-h: max(100vh, calc(100vw / var(--ap-r)));
    position: sticky; top: 0; height: 100vh; max-width: none; padding: 0; display: block; overflow: hidden;
    background: rgb(var(--ap-mesa));
  }
  .js:not(.ap-estatica) .apertura__escena,
  .js:not(.ap-estatica) .apertura__textos {
    position: absolute; left: calc(50% - var(--ap-w) / 2); top: calc(50% - var(--ap-h) / 2);
    width: var(--ap-w); height: var(--ap-h);
  }
  .js:not(.ap-estatica) .apertura__escena { aspect-ratio: auto; border-radius: 0; box-shadow: none; will-change: transform; }
  .js:not(.ap-estatica) .apertura__lienzo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
  .js:not(.ap-estatica) .apertura__lienzo.ap-ver { opacity: 1; }
  .js:not(.ap-estatica) .apertura__nitida { opacity: 0; transition: opacity .35s linear; }
  .js:not(.ap-estatica) .apertura__nitida.ap-ver { opacity: 1; }
  .js:not(.ap-estatica) .apertura__sombra { display: block; position: absolute; inset: 0; background: var(--noche); opacity: 0; pointer-events: none; z-index: 3; }

  /* Tres momentos, colocados sobre la imagen (en % de la imagen, no de la pantalla) */
  .js:not(.ap-estatica) .ap-m {
    --ap-mw: min(calc(100vw - 32px), 780px);
    position: absolute; left: calc(50% - var(--ap-mw) / 2); width: var(--ap-mw);
    transform: translateY(-50%); text-align: center; z-index: 2;
  }
  .js:not(.ap-estatica) .ap-m__i { position: relative; will-change: transform, opacity; }
  .js:not(.ap-estatica) .ap-m__i::before {
    content: ""; position: absolute; inset: -34% -12%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--ap-mesa), .94) 0%, rgba(var(--ap-mesa), .86) 52%, rgba(var(--ap-mesa), 0) 100%);
  }
  .js:not(.ap-estatica) .ap-m--a { top: 47%; }
  .js:not(.ap-estatica) .ap-m--b { top: 50%; }
  .js:not(.ap-estatica) .ap-m--c1 { top: 30.5%; }
  .js:not(.ap-estatica) .ap-m--c2 { top: 71.5%; }
  .js:not(.ap-estatica) .ap-m--b .ap-m__i,
  .js:not(.ap-estatica) .ap-m--c1 .ap-m__i,
  .js:not(.ap-estatica) .ap-m--c2 .ap-m__i { opacity: 0; }
  .js:not(.ap-estatica) .ap-m--c2 { pointer-events: none; }
  .js:not(.ap-estatica) .ap-m--c2.ap-activa { pointer-events: auto; }
  .js:not(.ap-estatica) .ap-m--a .ap-m__i::before { inset: -22% -6%; }
  .js:not(.ap-estatica) .ap-m--c1 .ap-m__i::before { inset: -60% 8%; }
  .js:not(.ap-estatica) .ap-m--c2 .ap-m__i::before { display: none; }

  .js:not(.ap-estatica) .apertura .titular { font-size: clamp(46px, 6.6vw, 96px); }
  /* El titular se pinta entero desde el primer fotograma (es lo primero que se lee y cuenta para el LCP) */
  .js:not(.ap-estatica) .apertura .titular .linea > span { animation: none; transform: none; }
  .js:not(.ap-estatica) .ap-frase { margin: 0; font-size: clamp(38px, 5.6vw, 76px); letter-spacing: -0.045em; line-height: .98; }
  .js:not(.ap-estatica) .ap-frase--remate { font-size: clamp(34px, 4.6vw, 62px); color: var(--tinta); }
  .js:not(.ap-estatica) .ap-sub { margin-top: 14px; font-size: clamp(19px, 2vw, 26px); color: var(--tinta); font-weight: 500; }
  .js:not(.ap-estatica) .ap-acciones { justify-content: center; margin-top: 0; }
  .js:not(.ap-estatica) .ap-nota { display: inline-block; margin-top: 10px; padding: 5px 14px; border-radius: 999px; color: var(--tinta); font-weight: 500; background: rgba(var(--ap-mesa), .9); }

  .js:not(.ap-estatica) .ap-baja { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; padding: 10px 12px 10px 18px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--tinta); background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px var(--linea); opacity: 0; animation: aparecer 1s .6s var(--salida) forwards; }
  .js:not(.ap-estatica) .ap-baja svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--luz); color: #fff; animation: ap-bote 1.8s 1.6s var(--muelle) infinite; }
  .js:not(.ap-estatica) .ap-baja.ap-fuera svg { animation: none; }

  .js:not(.ap-estatica) .apertura__progreso { display: block; position: absolute; right: max(14px, env(safe-area-inset-right)); top: 50%; width: 3px; height: 112px; margin-top: -56px; border-radius: 3px; background: rgba(13,13,15,.14); overflow: hidden; z-index: 2; }
  .js:not(.ap-estatica) .apertura__progreso i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--luz); transform-origin: top; transform: scaleY(0); }

  /* La hoja oscura sube sobre la mesa, que sigue fija debajo */
  .js:not(.ap-estatica) .v-quien { margin-top: -100vh; }

  @media (max-aspect-ratio: 3/4) {
    .js:not(.ap-estatica) .ap-m--a { top: 49%; }
    .js:not(.ap-estatica) .ap-m--c1 { top: 29%; }
    .js:not(.ap-estatica) .ap-m--c2 { top: 76%; }
    .js:not(.ap-estatica) .ap-m--b .ap-frase { font-size: clamp(30px, 8.6vw, 48px); }
    .js:not(.ap-estatica) .ap-m--a .ap-m__i::before { inset: -14% -10%; }
    .js:not(.ap-estatica) .ap-m--c1 .ap-m__i::before { inset: -50% -10%; }
    .js:not(.ap-estatica) .ap-acciones { flex-direction: column; align-items: center; gap: 10px; }
    .js:not(.ap-estatica) .ap-acciones .boton { width: min(100%, 330px); justify-content: space-between; }
  }
}
@keyframes ap-bote { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }

/* ---------- Acción fija del móvil ---------- */
.ap-barra { display: none; }
@media (max-width: 1080px) {
  .js .ap-barra {
    display: flex; gap: 8px; position: fixed; z-index: 30; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
    width: max-content; max-width: calc(100vw - 24px); padding: 6px; border-radius: 999px;
    background: rgba(244,244,241,.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 0 0 1px var(--linea), 0 16px 36px -18px rgba(13,13,15,.5);
    transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
    transition: transform .6s var(--muelle), opacity .4s, visibility 0s .6s;
  }
  .js .ap-barra.ap-ver { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .6s var(--muelle), opacity .4s; }
  .ap-barra .boton { min-height: 46px; padding: 0 18px; font-size: 15px; box-shadow: none; }
  .ap-barra .boton--blanco { box-shadow: inset 0 0 0 1px var(--linea); }
  .menu-abierto .ap-barra { opacity: 0 !important; visibility: hidden !important; }
}

/* ==========================================================================
   Debajo de la apertura (11-11). Hojas que se superponen: tinta, hueso, tinta, hueso, tinta y la mesa del cierre.
   Todo se ve y se usa sin JS. js/portada.js pone .v-mov en <html> cuando hay GSAP y no se pide «reducir movimiento»:
   solo entonces la galería de escritorio se vuelve una sección fija que avanza en horizontal.
   ========================================================================== */
:root { --v-hueso: #eeeae1; --v-r: clamp(24px, 3vw, 40px); --v-aire: clamp(88px, 11vw, 168px); }

.v-hoja { position: relative; z-index: 2; margin-top: calc(-1 * var(--v-r)); border-radius: var(--v-r) var(--v-r) 0 0; padding: var(--v-aire) 0 calc(var(--v-aire) + var(--v-r)); }
.v-hoja--tinta { background: var(--noche); color: #f2f2f4; }
.v-hoja--hueso { background: var(--v-hueso); color: var(--tinta); }

.v-titulo { margin: 0; max-width: 13ch; font-size: clamp(40px, 6vw, 88px); line-height: .98; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; }
.v-entra { margin: 24px 0 0; max-width: 40ch; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.42; letter-spacing: -0.015em; color: var(--tinta-2); }
.v-hoja--tinta .v-entra { color: rgba(255,255,255,.7); }
.v-enlaces { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 22px 0 0; }
.v-enlaces .enlace { min-height: 44px; font-size: 17px; }
.v-enlaces .enlace svg { width: 15px; height: 15px; flex: none; }
.v-hoja--tinta .enlace { color: #fff; }
.v-hoja--tinta .enlace:hover { color: #b9c7ff; }
.v-hoja :focus-visible { outline-offset: 4px; }
.v-hoja--tinta :focus-visible { outline-color: #9fb4ff; }

/* ---------- 2. Quién llega a tu empresa ---------- */
.v-quien { min-height: 100vh; }
.v-dicho { margin: 0; max-width: 23ch; font-size: clamp(31px, 4.7vw, 68px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; text-wrap: pretty; }
.v-dicho__no { color: rgba(255,255,255,.52); }
.v-dicho__si { color: #fff; }
.pf { display: inline-block; }
.v-quien__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 112px); align-items: center; margin-top: clamp(56px, 8vw, 120px); }
.v-garantias { list-style: none; margin: 0; padding: 0; }
.v-garantias li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 16px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.16); }
.v-garantias li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.v-garantias svg { grid-row: 1 / span 2; width: 26px; height: 26px; margin-top: 1px; color: #6f8cff; }
.v-garantia__t { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 650; }
.v-garantia__d { margin: 0; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.68); }
.v-quien .demo { margin: 0; }
.v-quien .marco { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--noche-linea); }
.v-quien .demo .nucleo { background: #121216; }
.v-quien .demo__nota { color: rgba(255,255,255,.62); }

/* Sin JS no hay demo que mover: se quita la caja vacía */
html:not(.js) .v-quien__demo { display: none; }
html:not(.js) .v-quien__rejilla { grid-template-columns: minmax(0, 560px); }

/* ---------- 3. Qué te quito de encima ---------- */
.v-encima__pista { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.v-encima__intro { margin-bottom: clamp(36px, 5vw, 72px); }
.v-encima__avance { display: none; }
.v-galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.v-pieza figure { margin: 0 0 22px; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #e6e1d8; }
.v-pieza img { width: 100%; height: 100%; object-fit: cover; }
.v-pieza h3 { margin: 0; font-size: clamp(23px, 2vw, 29px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; }
.v-pieza p { margin: 10px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.45; color: var(--tinta-2); }
.v-pieza .v-pieza__tu { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-weight: 600; color: var(--tinta); }
.v-pieza__tu svg { flex: none; width: 21px; height: 21px; margin-top: 1px; color: var(--luz); }

/* ---------- 4. Míralo trabajar ---------- */
.v-mira { overflow: clip; }
.v-mira__cab { display: flex; flex-direction: column; align-items: center; text-align: center; }
.v-mira .v-titulo { max-width: none; }
.v-mira .pestanas { margin-top: 32px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--noche-linea); }
.v-mira .pestanas button { min-height: 44px; color: rgba(255,255,255,.72); }
.v-mira .pestanas button[aria-selected="true"] { background: #fff; color: var(--tinta); }
.v-mira .prueba__rejilla { max-width: 1080px; margin: clamp(36px, 4vw, 56px) auto 0; gap: 20px; color: var(--tinta); }
.v-mira .papel { border-radius: 6px; will-change: transform; }
.v-mira .marco { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--noche-linea); will-change: transform; }
.v-mira #destino { margin: 0; }
.v-mira .etiqueta-demo { display: flex; justify-content: center; margin-top: 26px; font-size: 13px; color: rgba(255,255,255,.62); }

/* Sin JS la pieza no funciona (el papel lo escribe js/app.js): la sección entera no se enseña */
html:not(.js) .v-mira { display: none; }

/* ---------- 5. Cómo empezamos: fichas con pestaña que se apilan ---------- */
.v-empezar__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.v-pila { --v-pestana: 42px; list-style: none; margin: 0; padding: var(--v-pestana) 0 0; display: flex; flex-direction: column; gap: calc(var(--v-pestana) + 28px); }
.v-ficha { position: relative; display: flex; flex-direction: column; min-height: clamp(300px, 25vw, 348px); padding: clamp(26px, 3vw, 44px); border-radius: 22px; background: #fff; box-shadow: 0 -18px 36px -30px rgba(13,13,15,.4), 0 26px 44px -36px rgba(13,13,15,.3); }
.v-ficha:first-child { border-top-left-radius: 0; }
.v-ficha:last-child { border-top-right-radius: 0; }
.v-ficha__pestana { position: absolute; left: 0; top: calc(1px - var(--v-pestana)); width: 32%; height: var(--v-pestana); margin: 0; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-radius: 14px 14px 0 0; background: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.v-ficha__pestana b { font-weight: 700; font-variant-numeric: tabular-nums; }
.v-ficha:nth-child(2) .v-ficha__pestana { left: 34%; }
.v-ficha:nth-child(3) .v-ficha__pestana { left: 68%; background: var(--luz); color: #fff; }
.v-ficha h3 { margin: 0; font-size: clamp(29px, 3.1vw, 46px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; }
.v-ficha__texto { margin: 16px 0 24px; max-width: 42ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.48; color: var(--tinta-2); }
.v-ficha__dato { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--linea-2); font-size: 15px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .v-pila { padding-bottom: 26vh; }
  .v-ficha { position: sticky; top: calc(98px + var(--v-pestana)); }
}

/* ---------- 6. Por qué fiarte ---------- */
.v-fiar .v-titulo { max-width: 15ch; }
.v-reparto { margin: clamp(48px, 7vw, 104px) 0 0; }
.v-reparto__fila { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 10px 32px; align-items: baseline; padding: clamp(24px, 3vw, 40px) 0; }
.v-reparto__fila::before, .v-hechos::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.26); transform-origin: left; transform: scaleX(var(--trazo, 1)); }
.v-reparto dt { font-size: clamp(32px, 4.2vw, 60px); line-height: 1; letter-spacing: -0.045em; font-weight: 700; }
.v-reparto dd { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.42; letter-spacing: -0.015em; color: rgba(255,255,255,.76); }
.v-hechos { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(32px, 7vw, 112px); padding-top: clamp(32px, 4vw, 56px); }
.v-hecho h3 { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 650; }
.v-hecho h3 svg { flex: none; width: 26px; height: 26px; margin-top: 2px; color: #6f8cff; }
.v-hecho p { margin: 10px 0 0 38px; max-width: 40ch; font-size: 16px; line-height: 1.48; color: rgba(255,255,255,.7); }
.v-fiar .v-enlaces { margin-top: clamp(28px, 4vw, 48px); }

/* ---------- 7. Cierre: la mesa ordenada ---------- */
.v-cierre { padding: 0; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #efebe5; color: var(--tinta); }
.v-cierre__foto { position: absolute; inset: -10% 0 0 0; }
.v-cierre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.v-cierre__texto { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(118px, 15vh, 176px); padding-bottom: 46vh; }
.v-cierre .v-titulo { max-width: 15ch; font-size: clamp(38px, 5.4vw, 80px); }
.v-cierre .v-entra { max-width: 38ch; text-wrap: balance; color: var(--tinta); }
.v-cierre__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.v-cierre__acciones .boton { min-height: 54px; }
.v-cierre__nota { margin: 14px 0 0; font-size: 14px; color: var(--tinta-2); }

/* ---------- Escritorio con movimiento: la galería avanza en horizontal mientras se baja ---------- */
@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
  .v-mov .v-encima { height: 330vh; padding: 0; }
  .v-mov .v-encima__fija { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; border-radius: inherit; }
  .v-mov .v-encima__pista { --v-pw: min(29vw, 400px, calc((100vh - 348px) * .8)); max-width: none; margin: 0; padding: 64px var(--gutter) 0 max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); display: flex; align-items: center; gap: clamp(48px, 6vw, 104px); width: max-content; will-change: transform; }
  .v-mov .v-encima__intro { flex: none; width: min(36vw, 520px); margin: 0; }
  .v-mov .v-galeria { display: flex; gap: 28px; }
  .v-mov .v-pieza { flex: none; width: var(--v-pw); }
  .v-mov .v-encima__avance { display: block; position: absolute; left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); bottom: 44px; width: 168px; height: 3px; border-radius: 3px; background: rgba(13,13,15,.14); overflow: hidden; }
  .v-mov .v-encima__avance i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--luz); transform-origin: left; transform: scaleX(0); }
}
@media (min-width: 1081px) {
  .v-mira .papel { transform: rotate(-1.2deg); }
}
@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
  .v-empezar__lado { position: sticky; top: 140px; }
}

/* ---------- Tableta y móvil ---------- */
@media (max-width: 1080px) {
  .v-quien__rejilla, .v-empezar__rejilla { grid-template-columns: minmax(0, 1fr); }
  .v-empezar__rejilla { gap: 44px; }
  /* La galería se desliza con el dedo: scroll nativo con paradas */
  .v-galeria { display: flex; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .v-galeria::-webkit-scrollbar { display: none; }
  .v-pieza { flex: none; width: min(78vw, 360px); scroll-snap-align: start; }
  .v-pila { --v-pestana: 40px; }
  .v-ficha { min-height: 316px; }
}
@media (max-width: 767px) {
  .v-hoja { --gutter: 20px; --v-aire: 80px; }
  .v-reparto__fila { grid-template-columns: minmax(0, 1fr); }
  .v-hechos { grid-template-columns: minmax(0, 1fr); }
  .v-ficha__pestana { padding: 0 12px; gap: 8px; font-size: 14px; }
  .v-cierre__acciones { width: 100%; flex-direction: column; align-items: center; }
  .v-cierre__acciones .boton { width: min(100%, 330px); justify-content: space-between; }
  .v-cierre__foto img { object-position: 90% 100%; }
  .v-cierre__texto { padding-top: 108px; padding-bottom: 36vh; }
}

/* ---------- Fluidez (11-11): nada de desenfoque de fondo encima de la animación.
   Un vidrio esmerilado sobre un lienzo que cambia en cada fotograma obliga a recalcular el desenfoque 60 veces por segundo. */
body[data-pagina="index"] .ap-barra { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(244,244,241,.96); }
body[data-pagina="index"] .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(244,244,241,.95); }
.js:not(.ap-estatica) .apertura__lienzo { will-change: contents; transform: translateZ(0); }