/* ═══════════════════════════════════════════════════════════════════
   AIMA · assets/aima-producto.css — LA APERTURA DE CADA PRODUCTO
   ───────────────────────────────────────────────────────────────────
   26/09/2026 · Bratney: «que cada producto lo veas y lo único que
   quieras hacer es comprarlo … respetando la estética AIMA de
   minimalismo combinado con interactivos, pero ahora con mejores
   animaciones».

   Lo que pinta este fichero, y nada más:
     · .ap        la APERTURA: la sala a oscuras con el tráiler del
                  producto en grande, su nombre, lo que cuesta, sus
                  plazas y el botón. Es la primera pantalla de la ficha.
     · .ap-escala los escalones del producto con su precio (Diseño web
                  y Tecnologías e IA), junto a la cifra de la apertura.
     · .ap-golpes los tres golpes del tráiler debajo de la pantalla,
                  como las barras de una historia: se llenan con el
                  tráiler y se tocan para saltar a ese momento.
     · body.ap-sobre   la cabecera en negro mientras está encima de la
                  apertura (la misma receta que `body.en-sistema` de la
                  portada).
     · .apd       la barra de compra de las fichas que no tienen una
                  propia (Packs ya tiene la suya: `.pk-rail`).
     · .mov-*     el movimiento de dentro: cifras que cuentan y
                  titulares que entran con máscara.
     · .aps       LA SALA: el tráiler a pantalla grande encima de una
                  página que no es su ficha (el escaparate de
                  productos.html), y .esc-tra, el botón que la abre.

   🔴 LAS DOS LLAVES DEL MOVIMIENTO, como en toda la casa: el sistema
   (`prefers-reduced-motion`) y Ajustes (`html[data-mov="poco"]`). Con
   cualquiera de las dos, lo que se anima aparece de golpe y el tráiler
   se queda en su fotograma fijo.

   🔴 EN EL MÓVIL (≤ 600 px y con dedo) NADA DE ESTO SE VE: la página
   entera se apaga y manda `aima-app-movil.js`. El tráiler, allí, entra
   en el `.mundo` de la app (ver aima-producto.js · enMundo).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ap-noche:#0B0B0D; --ap-hueso:#F2F2F0; --ap-rojo:#C1272D; --ap-rojo2:#FE3142;
  --ap-gris:#8A8D8F; --ap-grafito:#3A3A3C; --ap-ease:cubic-bezier(.22,1,.36,1);
}

/* ══ LA SALA ══════════════════════════════════════════════════════ */
.ap{
  position:relative; isolation:isolate; overflow:clip;
  min-height:640px; min-height:max(640px, 100vh); min-height:max(640px, 100svh);
  display:flex; align-items:center;
  padding:calc(var(--head-h,64px) + clamp(40px,7vh,72px)) clamp(20px,4.4vw,56px) clamp(64px,9vh,96px);
  background:var(--ap-noche); color:var(--ap-hueso);
}
/* la luz de la sala: un resplandor detrás de la pantalla y el suelo que
   la recoge. Nada de degradados de colores: noche, un punto de rojo y
   el hueso de la pantalla. */
.ap-luz{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 52% at 69% 47%, rgba(193,39,45,.16), transparent 72%),
    radial-gradient(34% 30% at 70% 46%, rgba(242,242,240,.07), transparent 70%),
    radial-gradient(90% 60% at 50% 115%, rgba(242,242,240,.05), transparent 60%);
}
/* el grano de la casa, el mismo que llevan los tráileres */
.ap-luz::after{content:""; position:absolute; inset:-50%; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:ap-grano 1.1s steps(4) infinite}
@keyframes ap-grano{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
/* la rejilla del mundo, la del Simulador, que se pierde hacia el fondo */
.ap-luz::before{content:""; position:absolute; left:-10%; right:-10%; bottom:-2%; height:46%;
  background-image:linear-gradient(rgba(242,242,240,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(242,242,240,.06) 1px, transparent 1px);
  background-size:64px 64px; transform:perspective(520px) rotateX(62deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 60%); mask-image:linear-gradient(180deg, transparent, #000 60%)}

.ap-in{position:relative; width:100%; max-width:1340px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr); gap:clamp(28px,4.2vw,72px); align-items:center}

/* ── el texto ── */
.ap-kicker{display:inline-flex; align-items:center; gap:10px; margin:0 0 18px;
  font:600 10.5px/1.4 'Poppins',sans-serif; letter-spacing:.3em; text-transform:uppercase; color:rgba(242,242,240,.58)}
.ap-kicker i{width:11px; height:10px; background:var(--ap-rojo); flex:none;
  clip-path:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%)}
/* el interlineado es el de los titulares de la casa (.94): a .88 las
   tildes de la mayúscula —DISEÑO, GRÁFICO, TECNOLOGÍAS— se metían en el
   renglón de encima y la del primero, en el rótulo.
   `--ap-h1-t` cambia el cuerpo en la ficha que lo necesita: «DISEÑO
   GRÁFICO» tiene que caber en UN renglón, porque partido en dos la
   tilde de GRÁFICO se clava en la S de DISEÑO. */
.ap-h1{margin:.06em 0 0; font:400 var(--ap-h1-t, clamp(58px,7.4vw,124px))/.94 'Anton',sans-serif; text-transform:uppercase;
  letter-spacing:.004em; color:var(--ap-hueso)}
.ap-h1 em{font-style:normal; color:var(--ap-rojo)}
.ap-h1 .l{display:block}
.ap-lema{margin:18px 0 0; font:600 clamp(22px,1.95vw,32px)/1.14 'Cormorant Garamond',serif; color:var(--ap-hueso); text-wrap:balance}
.ap-lema em{font-style:italic; color:var(--ap-rojo2)}
.ap-sub{margin:14px 0 0; max-width:46ch; font:400 clamp(14px,1.06vw,15.5px)/1.72 'Montserrat',sans-serif; color:rgba(242,242,240,.64)}
.ap-sub b{color:var(--ap-hueso); font-weight:600}

/* ── lo que cuesta y lo que queda ── */
.ap-compra{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 30px; margin:28px 0 0;
  padding-top:22px; border-top:1px solid rgba(242,242,240,.1)}
.ap-precio{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.ap-desde{font:600 10px 'Poppins',sans-serif; letter-spacing:.28em; text-transform:uppercase; color:rgba(242,242,240,.5); align-self:center}
.ap-precio b{font:600 clamp(40px,3.8vw,58px)/1 'Poppins',sans-serif; letter-spacing:-.035em; color:var(--ap-hueso); font-variant-numeric:tabular-nums}
.ap-per{font:500 12.5px 'Montserrat',sans-serif; color:rgba(242,242,240,.5)}
.ap-plazas{list-style:none; margin:0; padding:0 0 4px; display:grid; gap:7px}
.ap-plazas li{display:flex; align-items:center; gap:10px; font:600 10px 'Poppins',sans-serif;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(242,242,240,.72)}
.ap-plazas li s{text-decoration:none; color:rgba(242,242,240,.42); letter-spacing:.14em}
.ap-gemas{display:inline-flex; gap:4px}
.ap-gemas i{width:9px; height:11px; background:var(--ap-rojo2); flex:none;
  clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);
  animation:ap-gema 3.2s var(--ap-ease) infinite; animation-delay:var(--d,0s)}
@keyframes ap-gema{0%,72%,100%{transform:none; opacity:1}80%{transform:translateY(-3px) scale(1.12); opacity:1}}

/* ── la escalera: los escalones del producto, cada uno con su precio ──
   La de Diseño web copia la de su página (#niveles): las mismas cuatro
   alturas —22, 42, 64 y 86 px, aquí a escala— y el color de cada
   nivel. La de Tecnologías e IA son los cinco grados, uno por crédito.
   Las cifras son las de la ficha: si cambian allí, cambian aquí. */
.ap-escala{list-style:none; margin:0; padding:0 0 2px; display:flex; align-items:flex-end; gap:clamp(8px,1vw,14px)}
.ap-escala li{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0}
.ap-escala i{display:block; width:clamp(26px,2.4vw,34px); height:calc(var(--h,1) * 46px); border-radius:2px 2px 0 0;
  background:var(--t, rgba(242,242,240,.22)); transform-origin:50% 100%;
  animation:ap-escalon 1s var(--ap-ease) both; animation-delay:calc(.62s + var(--i,0) * .09s)}
.ap-escala b{font:600 11.5px/1 'Poppins',sans-serif; letter-spacing:-.005em; color:var(--ap-hueso); white-space:nowrap; font-variant-numeric:tabular-nums}
.ap-escala span{font:600 8.5px/1 'Poppins',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,242,240,.46); white-space:nowrap}
/* el escalón sin techo (a Medida: se tasa) va sólo en contorno */
.ap-escala li.abierto i{background:linear-gradient(180deg, rgba(242,242,240,0), rgba(242,242,240,.16));
  box-shadow:inset 0 0 0 1px rgba(242,242,240,.55);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 38%); mask-image:linear-gradient(180deg, transparent, #000 38%)}
@keyframes ap-escalon{from{transform:scaleY(0)}to{transform:none}}

/* ── los botones ── */
.ap-botones{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0}
.ap-cta{position:relative; display:inline-flex; align-items:center; gap:12px; height:56px; padding:0 26px 0 28px;
  border-radius:999px; background:var(--ap-rojo); color:#F2F2F0; overflow:hidden;
  font:600 15px 'Poppins',sans-serif; letter-spacing:.005em;
  box-shadow:0 18px 44px -18px rgba(193,39,45,.85), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .45s var(--ap-ease), box-shadow .45s var(--ap-ease), background .3s}
.ap-cta::before{content:""; position:absolute; top:0; bottom:0; left:-40%; width:36%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg);
  animation:ap-brillo 4.8s var(--ap-ease) 1.6s infinite}
@keyframes ap-brillo{0%,62%{left:-40%}82%,100%{left:120%}}
.ap-cta:hover{transform:translateY(-2px); background:#D22E35; box-shadow:0 26px 54px -18px rgba(193,39,45,.95), inset 0 1px 0 rgba(255,255,255,.22)}
.ap-cta svg{width:14px; height:14px; transition:transform .35s var(--ap-ease)}
.ap-cta:hover svg{transform:translateX(3px)}
.ap-sec{display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 24px; border-radius:999px;
  border:1px solid rgba(242,242,240,.22); color:var(--ap-hueso); font:600 15px 'Poppins',sans-serif;
  transition:border-color .3s, background .3s}
.ap-sec:hover{border-color:rgba(242,242,240,.6); background:rgba(242,242,240,.05)}
.ap-cta:focus-visible,.ap-sec:focus-visible,.ap-golpes button:focus-visible{outline:2px solid var(--ap-hueso); outline-offset:3px}

/* ══ LA PANTALLA ══════════════════════════════════════════════════ */
.ap-pantalla{margin:0; position:relative; perspective:1600px}
.ap-marco{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  background:#050507 center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(242,242,240,.1), 0 50px 120px -40px rgba(0,0,0,.9), 0 30px 90px -50px rgba(193,39,45,.55);
  transform:rotateY(calc(var(--rx,0) * 1deg)) rotateX(calc(var(--ry,0) * 1deg));
  transition:transform .8s var(--ap-ease); will-change:transform}
/* la luz que la pantalla echa al suelo: una mancha blanda debajo (el
   reflejo con -webkit-box-reflect se probó y pisaba los golpes) */
.ap-pantalla::before{content:""; position:absolute; left:8%; right:8%; top:calc(100% - 64px); height:90px; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(242,242,240,.10), transparent 70%); filter:blur(6px); pointer-events:none}
.ap-lienzo{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .5s}
.ap-marco.en-trailer .ap-lienzo{opacity:1}
/* el filo de cristal de la pantalla */
.ap-marco::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.07), transparent 28%, transparent 72%, rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
/* el sello de la esquina: «tráiler · 14 s» */
.ap-sello{position:absolute; left:14px; top:12px; z-index:2; display:flex; align-items:center; gap:8px;
  font:600 9.5px 'Poppins',sans-serif; letter-spacing:.24em; text-transform:uppercase; color:rgba(242,242,240,.7);
  pointer-events:none; opacity:0; transition:opacity .5s .4s}
.ap-marco.en-trailer .ap-sello{opacity:1}
.ap-sello i{width:6px; height:6px; border-radius:50%; background:var(--ap-rojo2); box-shadow:0 0 10px var(--ap-rojo2);
  animation:ap-vivo 1.8s ease-in-out infinite}
@keyframes ap-vivo{50%{opacity:.35}}

/* ── los golpes: las barras de la historia ── */
.ap-golpes{display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:10px; margin:18px 2px 0}
.ap-golpes button{position:relative; display:block; text-align:left; padding:12px 0 0; min-height:44px;
  font:600 11px/1.35 'Poppins',sans-serif; letter-spacing:.06em; color:rgba(242,242,240,.42); cursor:pointer;
  background:none; border:0; transition:color .3s}
.ap-golpes button b{color:inherit; font-weight:700; margin-right:8px; letter-spacing:.12em}
.ap-golpes button::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px;
  background:rgba(242,242,240,.14)}
.ap-golpes button i{position:absolute; left:0; top:0; height:2px; border-radius:2px; width:calc(var(--k,0) * 100%);
  background:var(--ap-hueso)}
.ap-golpes button.vivo{color:var(--ap-hueso)}
.ap-golpes button.vivo i{background:var(--ap-rojo2); box-shadow:0 0 12px rgba(254,49,66,.55)}
.ap-golpes button:hover{color:rgba(242,242,240,.8)}

/* ── la flecha de bajar ── */
.ap-baja{position:absolute; left:50%; bottom:clamp(14px,3vh,28px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(242,242,240,.5);
  font:600 9.5px 'Poppins',sans-serif; letter-spacing:.3em; text-transform:uppercase; transition:color .3s}
.ap-baja:hover{color:var(--ap-hueso)}
.ap-baja svg{width:16px; height:16px; animation:ap-baja 2.2s var(--ap-ease) infinite}
@keyframes ap-baja{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ── la entrada: la sala se enciende por orden ── */
.ap .ap-kicker,.ap .ap-h1 .l,.ap .ap-lema,.ap .ap-sub,.ap .ap-compra,.ap .ap-botones{
  animation:ap-sube .95s var(--ap-ease) both}
.ap .ap-kicker{animation-delay:.05s}
.ap .ap-h1 .l:nth-child(1){animation-delay:.12s}
.ap .ap-h1 .l:nth-child(2){animation-delay:.2s}
.ap .ap-lema{animation-delay:.3s}
.ap .ap-sub{animation-delay:.38s}
.ap .ap-compra{animation-delay:.46s}
.ap .ap-botones{animation-delay:.54s}
.ap .ap-pantalla{animation:ap-pantalla 1.3s var(--ap-ease) .15s both}
@keyframes ap-sube{from{opacity:0; transform:translateY(28px)}to{opacity:1; transform:none}}
@keyframes ap-pantalla{from{opacity:0; transform:translateY(34px) scale(.965)}to{opacity:1; transform:none}}
/* el título entra con máscara: cada renglón sube desde debajo de su raya */
/* (la máscara deja de sobra por arriba: las tildes sobresalen de la caja) */
.ap .ap-h1 .l{clip-path:inset(-45% -6% -20% -6%)}
@keyframes ap-mascara{from{clip-path:inset(100% -6% -20% -6%); transform:translateY(.35em)}to{clip-path:inset(-45% -6% -20% -6%); transform:none}}
.ap .ap-h1 .l{animation-name:ap-mascara; animation-duration:1.05s}

/* ══ LA CABECERA, EN NEGRO MIENTRAS ESTÁ ENCIMA DE LA SALA ═════════ */
body.ap-sobre .brandbar{background:rgba(11,11,13,.55); box-shadow:none}
body.ap-sobre .brandbar svg{color:var(--ap-hueso); fill:currentColor}
body.ap-sobre .brandbar a, body.ap-sobre .brandbar button{color:var(--ap-hueso)}
body.ap-sobre .volver-prod, main:has(> .ap) > .volver-prod{color:var(--ap-hueso)}

/* ══ TALLAS ═══════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .ap{align-items:flex-start}
  .ap-in{grid-template-columns:1fr; gap:34px}
  .ap-pantalla{order:-1}
  .ap-texto{max-width:720px}
  .ap-h1 .l{display:inline}
  .ap-h1 .l + .l::before{content:" "}
}
@media (max-width:640px){
  .ap-golpes button span{display:none}
  .ap-cta,.ap-sec{height:52px; font-size:14px}
}
@media (min-width:1700px){
  .ap-in{max-width:1560px}
}

/* ══ LA BARRA DE COMPRA · la de las fichas sin barra propia ════════
   🔴 Deja libre la esquina de abajo a la derecha: ahí vive el botón de
   AMI (#ami-widget, 64 px a clamp(16px,3vw,28px) del borde). Por eso
   la barra lleva a cada lado ese mismo hueco más 76 px: sigue centrada
   y no se le mete nunca debajo. */
.apd{position:fixed; left:0; right:0; bottom:0; z-index:90; pointer-events:none;
  padding:0 calc(clamp(16px,3vw,28px) + 76px);
  transform:translateY(110%); opacity:0; visibility:hidden;
  transition:transform .55s var(--ap-ease), opacity .4s, visibility 0s linear .55s}
.apd.viva{transform:none; opacity:1; visibility:visible; transition:transform .55s var(--ap-ease), opacity .4s}
.apd-in{pointer-events:auto; max-width:1180px; margin:0 auto 14px; display:flex; align-items:center; gap:clamp(10px,1.6vw,22px);
  height:64px; padding:0 10px 0 22px; border-radius:999px; background:rgba(11,11,13,.9); color:var(--ap-hueso);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 20px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(242,242,240,.1)}
.apd-nom{font:400 20px 'Anton',sans-serif; text-transform:uppercase; letter-spacing:.01em; white-space:nowrap}
.apd-lema{font:500 12.5px 'Montserrat',sans-serif; color:rgba(242,242,240,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.apd-hueco{flex:1 1 auto; min-width:6px}
.apd-pre{display:flex; align-items:baseline; gap:6px; white-space:nowrap}
.apd-pre small{font:600 9.5px 'Poppins',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,242,240,.5)}
.apd-pre b{font:600 22px 'Poppins',sans-serif; letter-spacing:-.03em}
.apd-pre span{font:500 11px 'Montserrat',sans-serif; color:rgba(242,242,240,.5)}
.apd-cta{display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 22px; border-radius:999px;
  background:var(--ap-rojo); color:#F2F2F0; font:600 14px 'Poppins',sans-serif; white-space:nowrap;
  transition:transform .35s var(--ap-ease), background .3s}
.apd-cta:hover{transform:translateY(-1px); background:#D22E35}
.apd-cta svg{width:12px; height:12px}
/* lo primero que se cae es la frase; luego el nombre, y el precio pasa a
   la izquierda. El precio, su «+ IVA» y el botón no se caen nunca. */
@media (max-width:1120px){ .apd-lema{display:none} }
@media (max-width:1000px){ .apd-nom{display:none} .apd-pre{order:-1} }
/* en una ventana estrecha la barra se arrima a la izquierda: la esquina
   de la derecha sigue siendo de AMI */
@media (max-width:760px){ .apd{padding-left:10px} .apd-in{margin:0 0 10px; height:58px; padding-left:16px}
  .apd-cta{padding:0 18px; font-size:13.5px} }
@media (max-width:620px){ .apd-pre small{display:none} }

/* ══ EL MOVIMIENTO DE DENTRO ══════════════════════════════════════ */
/* titulares con máscara: el texto sube desde su propia raya */
.mov-mascara{display:inline-block; clip-path:inset(0 -6% 100% -6%); transform:translateY(.42em);
  transition:clip-path 1s var(--ap-ease), transform 1s var(--ap-ease); transition-delay:var(--md,0s)}
.mov-mascara.in{clip-path:inset(-12% -6% -18% -6%); transform:none}
/* la raya roja que se dibuja debajo de la palabra en cursiva */
.mov-raya{position:relative}
.mov-raya::after{content:""; position:absolute; left:0; right:0; bottom:.02em; height:.07em; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ap-ease) .45s; opacity:.55}
.mov-raya.in::after{transform:scaleX(1)}

/* ══ LAS DOS LLAVES DEL MOVIMIENTO ═══════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .ap *, .ap::before, .ap::after, .ap-luz::after{animation:none !important}
  .ap .ap-h1 .l{clip-path:none !important}
  .ap-marco{transform:none !important; transition:none}
  .mov-mascara{clip-path:none !important; transform:none !important; transition:none !important}
  .mov-raya::after{transform:none; transition:none}
  .apd{transition:none}
}
html[data-mov="poco"] .ap *, html[data-mov="poco"] .ap-luz::after{animation:none !important}
html[data-mov="poco"] .ap .ap-h1 .l{clip-path:none !important}
html[data-mov="poco"] .ap-marco{transform:none !important}
html[data-mov="poco"] .mov-mascara{clip-path:none !important; transform:none !important; transition:none !important}

/* ══ EN EL MÓVIL · la pantalla del tráiler dentro del mundo de la app ══ */
#appm .mundo .ap-movil{position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block;
  border-radius:18px; opacity:0; transition:opacity .45s}
#appm .mundo.en-trailer .ap-movil{opacity:1}
#appm .mundo.en-trailer > svg{visibility:hidden}

/* ══ LA SALA · el tráiler a pantalla grande (productos.html) ═══════
   La misma sala que la apertura —noche, un punto de rojo, el grano—,
   pero encima de la página: se abre, se ve y se cierra. */
/* sin barra de desplazamiento pero con su hueco: la página de detrás no salta */
html.aps-abierta{overflow:hidden; scrollbar-gutter:stable}
.aps{position:fixed; inset:0; z-index:2147483100; display:grid; place-items:center;
  padding:clamp(14px,3vw,40px); color:var(--ap-hueso); opacity:0; transition:opacity .32s var(--ap-ease)}
.aps[hidden]{display:none}
.aps.abierta{opacity:1}
.aps-fondo{position:absolute; inset:0; background:rgba(8,8,10,.93);
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2)}
.aps-fondo::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 46% at 50% 44%, rgba(193,39,45,.2), transparent 72%)}
.aps-in{position:relative; width:min(1180px, 100%, calc((100vh - 300px) * 16 / 9)); min-width:min(100%, 320px);
  transform:translateY(22px) scale(.97); transition:transform .55s var(--ap-ease)}
.aps.abierta .aps-in{transform:none}
.aps-cab{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px}
.aps-kicker{display:inline-flex; align-items:center; gap:10px; margin:0;
  font:600 10.5px/1.4 'Poppins',sans-serif; letter-spacing:.3em; text-transform:uppercase; color:rgba(242,242,240,.6)}
.aps-kicker i{width:7px; height:7px; border-radius:50%; background:var(--ap-rojo2); box-shadow:0 0 10px var(--ap-rojo2);
  animation:ap-vivo 1.8s ease-in-out infinite}
.aps-x{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  background:none; color:var(--ap-hueso); border:1px solid rgba(242,242,240,.22); transition:border-color .3s, background .3s}
.aps-x:hover{border-color:rgba(242,242,240,.6); background:rgba(242,242,240,.06)}
.aps-x svg{width:16px; height:16px}
.aps-x:focus-visible,.aps-cta:focus-visible{outline:2px solid var(--ap-hueso); outline-offset:3px}
.aps-pie{display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; margin-top:20px}
.aps-nom{margin:0; font:400 clamp(26px,2.6vw,38px)/1 'Anton',sans-serif; text-transform:uppercase; letter-spacing:.01em}
.aps-precio{display:flex; align-items:baseline; gap:8px; margin:8px 0 0; font-variant-numeric:tabular-nums}
.aps-precio i{font:600 9.5px 'Poppins',sans-serif; letter-spacing:.24em; text-transform:uppercase; color:rgba(242,242,240,.5); font-style:normal}
.aps-precio b{font:600 20px/1 'Poppins',sans-serif; letter-spacing:-.02em; color:var(--ap-hueso)}
.aps-precio small{font:500 12px 'Montserrat',sans-serif; color:rgba(242,242,240,.5)}
@media (max-width:640px){ .aps-cta{height:50px} .aps-nom{font-size:24px} }

/* ── el botón del escaparate: «Ver el tráiler», encima de la escena ── */
.esc-tra{position:absolute; left:14px; top:12px; z-index:4; display:inline-flex; align-items:center; gap:9px;
  height:34px; padding:0 14px 0 12px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(11,11,13,.88); color:var(--ap-hueso);
  font:600 10px/1 'Poppins',sans-serif; letter-spacing:.2em; text-transform:uppercase;
  box-shadow:0 10px 26px -12px rgba(11,11,13,.7);
  transition:background .3s, transform .4s var(--ap-ease), opacity .3s}
.esc-tra[hidden]{display:none}
.esc-tra i{width:7px; height:7px; border-radius:50%; background:var(--ap-rojo2); box-shadow:0 0 9px var(--ap-rojo2);
  animation:ap-vivo 1.8s ease-in-out infinite}
.esc-tra svg{width:10px; height:10px; margin-left:-2px}
.esc-tra:hover{background:var(--ap-rojo); transform:translateY(-1px)}
.esc-tra:hover i{background:var(--ap-hueso); box-shadow:none}
.esc-tra:focus-visible{outline:2px solid var(--ap-rojo); outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .aps,.aps-in{transition:none}
  .aps-kicker i,.esc-tra i{animation:none}
}
html[data-mov="poco"] .aps, html[data-mov="poco"] .aps-in{transition:none}
html[data-mov="poco"] .aps-kicker i, html[data-mov="poco"] .esc-tra i{animation:none}

/* ══ LO QUE VIENE DETRÁS DE LA APERTURA ══════════════════════════ */
/* la sección que antes abría la página ya no tiene la cabecera encima:
   pierde el hueco de la cabecera y conserva el suyo */
.tras-ap{padding-top:clamp(56px,9vh,96px) !important}