/* ══════════════════════════════════════════════════════════════════
   AMI · HOJA DE ESCENAS  (assets/ami-escenas.css)
   ------------------------------------------------------------------
   Los dioramas de píxeles y las tarjetas de producto. Está en un solo
   archivo a propósito: la usan productos.html y las cuatro páginas de
   producto, así que un retoque aquí se ve en toda la web de golpe.

   Depende de las variables de la página anfitriona:
     --ink  --bone  --red  --gray  --graphite  --hair  --ease
   y del motor de píxeles assets/ami-pixel.js, que es quien deja los
   disfraces disponibles como <symbol id="ami-…">.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   PRODUCTOS v3 · LAS ESCENAS DE AMI
   ------------------------------------------------------------------
   Cada producto tiene su propio diorama de píxeles sobre la misma
   rejilla que la mascota. Las escenas son SVG puro: pesan poco,
   se ven nítidas en cualquier pantalla y se animan con CSS.
   ══════════════════════════════════════════════════════════════════ */

/* ── títulos de bloque ── */
.bloque{padding:clamp(30px,5vh,54px) 0 clamp(50px,8vh,86px)}
.bloque-cab{max-width:760px; margin:0 auto clamp(28px,4.5vh,46px); text-align:center}
.bloque-cab .kicker{display:inline-flex; align-items:center; gap:9px; font:600 10.5px 'Poppins',sans-serif;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gray); margin-bottom:14px}
.bloque-cab .kicker i{width:11px; height:10px; background:var(--red); flex:none;
  clip-path:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%)}
.bloque-cab h2{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(30px,4.6vw,52px); line-height:1.05}
.bloque-cab h2 em{font-style:italic; color:var(--red)}
.bloque-cab p{margin:14px auto 0; max-width:560px; color:var(--graphite); font-size:14.5px; line-height:1.72}

/* ══ EL DIORAMA ══ */
.dio{position:relative; border-radius:20px; overflow:hidden; background:var(--bone);
  border:1px solid var(--hair); --px:0; --py:0}
.dio svg{display:block; width:100%; height:auto}
.dio .dio-ami{transition:transform .5s var(--ease)}
.dio-globo{position:absolute; left:50%; top:14%; z-index:4; pointer-events:none;
  background:var(--ink); color:#fff; font:600 11.5px 'Poppins',sans-serif;
  padding:7px 11px; white-space:nowrap; opacity:0;
  transform:translate(-50%,-40%) scale(.9);
  transition:opacity .26s var(--ease), transform .34s var(--ease);
  box-shadow:4px 0 var(--ink),-4px 0 var(--ink),0 4px var(--ink),0 -4px var(--ink)}
.tarjeta:hover .dio-globo,.tarjeta:focus-within .dio-globo{opacity:1; transform:translate(-50%,-52%) scale(1)}
/* En táctil no hay hover: el globo se queda puesto para que no se pierda. */
@media (hover:none){
  .dio-globo{opacity:1; transform:translate(-50%,-52%) scale(1)}
}
.dio-globo::after{content:""; position:absolute; left:50%; margin-left:-6px; top:calc(100% + 4px);
  width:4px; height:4px; background:var(--ink);
  box-shadow:4px 0 0 var(--ink),8px 0 0 var(--ink),4px 4px 0 var(--ink)}

/* profundidad: las capas se mueven a distinta velocidad con el ratón */
.dio>svg>g[id^=al-],.dio>svg>g[id^=dm-],.dio>svg>g[id^=ss-],.dio>svg>g[id^=crm-]{
  transition:transform .55s var(--ease)}
#al-aro    {transform:translate(calc(var(--px)*2px),  calc(var(--py)*.9px))}
#al-movil  {transform:translate(calc(var(--px)*3.4px),calc(var(--py)*1.3px))}
#al-cal    {transform:translate(calc(var(--px)*5px),  calc(var(--py)*1.8px))}
#ss-tira   {transform:translate(calc(var(--px)*2.2px),calc(var(--py)*.8px))}
#ss-claqueta{transform:translate(calc(var(--px)*4.4px),calc(var(--py)*1.6px))}
#crm-cartel{transform:translate(calc(var(--px)*3px),  calc(var(--py)*1.1px))}
.dio .dio-ami{transform:translate(calc(var(--px)*6px),calc(var(--py)*2.2px))}

/* ── 1 · Alcance: el plató ── */
.al-luz{animation:alLuz 3.6s ease-in-out infinite}
@keyframes alLuz{0%,100%{opacity:1}46%{opacity:.55}52%{opacity:1}}
.al-rec{animation:alRec 1.4s steps(1) infinite}
@keyframes alRec{0%,54%{opacity:1}55%,100%{opacity:.15}}
.al-feed{animation:alFeed 7s linear infinite}
@keyframes alFeed{from{transform:translateY(0)}to{transform:translateY(-36px)}}
.al-dia{animation:alDia 3s steps(1) infinite}
@keyframes alDia{0%,60%{opacity:1}61%,74%{opacity:.2}75%,100%{opacity:1}}
.al-nota{animation:alNota 5.2s var(--ease) infinite; animation-delay:var(--d,0s); opacity:0}
@keyframes alNota{0%{opacity:0;transform:translateY(10px) scale(.85)}
  14%{opacity:1;transform:translateY(0) scale(1)}72%{opacity:1;transform:translateY(-12px)}
  100%{opacity:0;transform:translateY(-24px) scale(.9)}}

/* ── 2 · Dominación: el podio ── */
.dm-luz{animation:dmLuz 4.6s steps(1) infinite; animation-delay:var(--d,0s)}
@keyframes dmLuz{0%,47%{opacity:.75}48%,63%{opacity:.12}64%,100%{opacity:.75}}
.dm-foco{animation:dmFoco 7.5s ease-in-out infinite}
.dm-foco.f2{animation-direction:reverse}
@keyframes dmFoco{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(11deg)}}
.dm-plaza{animation:dmPlaza 3.2s var(--ease) infinite; animation-delay:var(--d,0s)}
@keyframes dmPlaza{0%,100%{transform:translateY(0)}42%{transform:translateY(-4px)}}
.dm-chispa{opacity:0; animation:dmChispa 4.4s var(--ease) infinite; animation-delay:var(--d,0s);
  transform-box:fill-box; transform-origin:center}
@keyframes dmChispa{0%,72%{opacity:0;transform:scale(.4)}82%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.4)}}

/* ── 3 · Landing: la página que se monta sola ── */
.lp-bloque{opacity:0; animation:lpMonta 9s var(--ease) infinite; animation-delay:var(--d,0s);
  transform-box:fill-box; transform-origin:left center}
@keyframes lpMonta{0%{opacity:0;transform:translateY(6px) scaleX(.9)}
  6%{opacity:1;transform:none}88%{opacity:1}96%,100%{opacity:0}}
.lp-cursor{animation:lpCursor 9s var(--ease) infinite}
@keyframes lpCursor{0%,58%{transform:translate(150px,98px)}
  70%,78%{transform:translate(108px,78px)}90%,100%{transform:translate(150px,98px)}}
.lp-carga{animation:lpCarga 9s var(--ease) infinite; transform-box:fill-box; transform-origin:left center}
@keyframes lpCarga{0%{transform:scaleX(0)}84%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* ── 4 · Automatizaciones: la sala de máquinas ── */
.au-eng{animation:auGiro 4.6s linear infinite}
.au-eng-b{animation-duration:3.1s; animation-direction:reverse}
.au-eng-c{animation-duration:2.3s}
@keyframes auGiro{to{transform:rotate(360deg)}}
.au-led{animation:auLed 2.6s steps(1) infinite; animation-delay:var(--d,0s)}
@keyframes auLed{0%,42%{opacity:1}43%,66%{opacity:.16}67%,100%{opacity:1}}
.au-tacos{animation:auCinta 1.1s linear infinite}
@keyframes auCinta{to{transform:translateX(8px)}}
.au-burbuja{animation:auBurbuja 9.6s linear infinite; animation-delay:var(--d,0s)}
@keyframes auBurbuja{from{transform:translateX(60px)}to{transform:translateX(252px)}}
.au-credito{animation:auCredito 3.3s var(--ease) infinite; animation-delay:var(--d,0s); opacity:0}
@keyframes auCredito{0%{opacity:0;transform:translate(205px,-14px)}
  18%{opacity:1}64%{opacity:1;transform:translate(205px,14px)}
  72%,100%{opacity:0;transform:translate(205px,20px)}}
.au-boton{animation:auBoton 3.3s var(--ease) infinite; transform-box:fill-box; transform-origin:center}
@keyframes auBoton{0%,58%{transform:translateY(0)}66%,74%{transform:translateY(3px)}100%{transform:translateY(0)}}

/* ── 5 · Sesión única: el rodaje ── */
.ss-haz{animation:ssHaz 5.4s ease-in-out infinite}
@keyframes ssHaz{0%,100%{opacity:1}40%{opacity:.55}46%{opacity:1}}
.ss-foto{opacity:0; animation:ssFoto 7.4s var(--ease) infinite; animation-delay:var(--d,0s)}
@keyframes ssFoto{0%{opacity:0;transform:scale(.8)}8%{opacity:1;transform:none}
  86%{opacity:1}96%,100%{opacity:0}}
.ss-palo{animation:ssPalo 2.9s var(--ease) infinite}
@keyframes ssPalo{0%,54%{transform:rotate(0)}64%{transform:rotate(-19deg)}
  76%,80%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}

/* ── 6 · Identidad: el taller de marca ── */
.id-traz{opacity:0; animation:idTraz 8.2s var(--ease) infinite; animation-delay:var(--d,0s);
  transform-box:fill-box; transform-origin:left center}
@keyframes idTraz{0%{opacity:0;transform:scaleX(0)}6%{opacity:1;transform:scaleX(1)}
  88%{opacity:1}96%,100%{opacity:0}}
.id-muestra{opacity:0; animation:idMuestra 8.2s var(--ease) infinite; animation-delay:var(--d,0s);
  transform-box:fill-box; transform-origin:center bottom}
@keyframes idMuestra{0%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:none}
  88%{opacity:1}96%,100%{opacity:0}}
.id-gota{opacity:0; animation:idGota 3.4s var(--ease) infinite; animation-delay:var(--d,0s)}
@keyframes idGota{0%{opacity:0;transform:translate(var(--gx,0),0)}
  20%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* ── 7 · CRM: la puerta cerrada ── */
#crm-cartel{animation:crmCartel 5.6s ease-in-out infinite}
@keyframes crmCartel{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
#crm-llave{animation:crmLlave 4.2s var(--ease) infinite}
@keyframes crmLlave{0%,100%{transform:rotate(0) translateY(0)}
  30%{transform:rotate(-16deg) translateY(-4px)}62%{transform:rotate(12deg) translateY(2px)}}
#crm-candado{animation:crmCandado 4.2s var(--ease) infinite; transform-box:fill-box; transform-origin:center top}
@keyframes crmCandado{0%,66%{transform:rotate(0)}74%{transform:rotate(-6deg)}
  82%{transform:rotate(4deg)}90%,100%{transform:rotate(0)}}

/* al pasar por encima, todo se acelera un 40 % */
.tarjeta:hover .dio *{animation-duration:calc(var(--vel,1) * 1s)}
.tarjeta:hover .au-eng{animation-duration:2s}
.tarjeta:hover .au-eng-b{animation-duration:1.4s}
.tarjeta:hover .au-eng-c{animation-duration:1s}
.tarjeta:hover .au-tacos{animation-duration:.5s}
.tarjeta:hover .al-feed{animation-duration:3.2s}

/* ══ TARJETAS DE PRODUCTO ══ */
.rejilla{display:grid; gap:clamp(18px,2.4vw,26px)}
.rejilla.dos{grid-template-columns:repeat(2,1fr)}
.rejilla.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.rejilla.dos,.rejilla.tres{grid-template-columns:1fr}}

.tarjeta{position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--hair); border-radius:26px; padding:14px 14px 26px;
  opacity:0; transform:translateY(26px);
  transition:box-shadow .5s var(--ease), border-color .5s, transform .5s var(--ease)}
.tarjeta.in{opacity:1; transform:none;
  transition:opacity .85s var(--ease) var(--d,0s), transform .85s var(--ease) var(--d,0s),
             box-shadow .5s var(--ease), border-color .5s}
.tarjeta.in:hover{transform:translateY(-4px); border-color:rgba(11,11,13,.2);
  box-shadow:0 34px 66px -40px rgba(11,11,13,.38)}
.tarjeta .cuerpo{padding:22px 12px 0; display:flex; flex-direction:column; flex:1}
.tarjeta .nivel{font:600 10px 'Poppins',sans-serif; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gray); display:flex; align-items:center; gap:9px}
.tarjeta .nivel .punto{width:7px; height:7px; border-radius:50%; background:var(--red); flex:none}
.tarjeta h3{margin-top:11px; font:400 clamp(27px,3.4vw,38px)/1 'Anton',sans-serif;
  text-transform:uppercase; letter-spacing:.012em}
.tarjeta .paraquien{margin-top:11px; font:400 13px/1.68 'Montserrat'; color:var(--graphite)}
.tarjeta .paraquien b{font-weight:600; color:var(--ink)}

/* precio: el real tachado y el de fundador en grande */
.precio-caja{margin-top:20px; padding-top:20px; border-top:1px solid var(--hair)}
.precio-caja .fila{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.precio-caja s{font:500 17px 'Poppins',sans-serif; color:var(--gray);
  text-decoration-thickness:2px; text-decoration-color:var(--red)}
.precio-caja b{font:600 clamp(33px,4.2vw,44px) 'Poppins',sans-serif; letter-spacing:-.03em; line-height:1}
.precio-caja .mes{font:500 12.5px 'Montserrat'; color:var(--gray)}
.precio-caja .sello{display:inline-flex; align-items:center; gap:7px; margin-top:11px;
  font:600 10.5px 'Poppins',sans-serif; letter-spacing:.13em; text-transform:uppercase;
  color:var(--red); background:rgba(193,39,45,.08); border-radius:99px; padding:6px 13px}
.precio-caja .sello i{width:9px; height:8px; background:var(--red); flex:none;
  clip-path:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%)}

/* lista de lo que entra */
.entra{margin-top:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.entra li{display:flex; gap:11px; font:400 13px/1.55 'Montserrat'; color:var(--graphite)}
.entra li .tic{flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%;
  background:rgba(193,39,45,.1); display:grid; place-items:center}
.entra li .tic::after{content:""; width:6px; height:3px; border-left:1.6px solid var(--red);
  border-bottom:1.6px solid var(--red); transform:rotate(-45deg) translate(.5px,-1px)}
.entra li b{color:var(--ink); font-weight:600}
.entra li.gris{color:var(--gray)}
.entra li.gris .tic{background:rgba(11,11,13,.06)}
.entra li.gris .tic::after{border-color:var(--gray)}

.plazas{margin-top:22px; display:flex; align-items:center; gap:9px;
  font:600 11px 'Poppins',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--ink)}
.plazas .gemas{display:flex; gap:4px}
.plazas .gemas i{width:11px; height:13px; background:var(--red);
  clip-path:polygon(28% 0,72% 0,100% 32%,50% 100%,0 32%)}
.plazas .gemas i.off{background:rgba(11,11,13,.14)}

.tarjeta .cta{margin-top:24px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--ink); color:#fff; border-radius:99px; padding:15px 26px;
  font:600 13px 'Poppins',sans-serif;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.tarjeta .cta:hover{transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(11,11,13,.55)}
.tarjeta .cta svg{width:14px; height:14px; transition:transform .3s var(--ease)}
.tarjeta .cta:hover svg{transform:translateX(3px)}
.tarjeta .cta.linea{background:none; color:var(--ink); border:1.5px solid var(--ink)}
.tarjeta .cta.linea:hover{background:var(--bone); box-shadow:none}

/* la tarjeta oscura de Dominación */
.tarjeta.oscura{background:var(--ink); border-color:var(--ink); color:var(--bone)}
.tarjeta.oscura .dio{background:#141417; border-color:rgba(242,242,240,.12)}
.tarjeta.oscura .nivel{color:rgba(242,242,240,.5)}
.tarjeta.oscura .nivel .punto{background:var(--gold,#C9A24B)}
.tarjeta.oscura .paraquien{color:rgba(242,242,240,.72)}
.tarjeta.oscura .paraquien b{color:#fff}
.tarjeta.oscura .precio-caja{border-top-color:rgba(242,242,240,.14)}
.tarjeta.oscura .precio-caja s{color:rgba(242,242,240,.45)}
.tarjeta.oscura .precio-caja .mes{color:rgba(242,242,240,.55)}
.tarjeta.oscura .precio-caja .sello{color:#F0E2BC; background:rgba(201,162,75,.16)}
.tarjeta.oscura .precio-caja .sello i{background:#C9A24B}
.tarjeta.oscura .entra li{color:rgba(242,242,240,.78)}
.tarjeta.oscura .entra li b{color:#fff}
.tarjeta.oscura .entra li .tic{background:rgba(201,162,75,.18)}
.tarjeta.oscura .entra li .tic::after{border-color:#C9A24B}
.tarjeta.oscura .plazas{color:#fff}
.tarjeta.oscura .plazas .gemas i.off{background:rgba(242,242,240,.2)}
.tarjeta.oscura .cta{background:var(--bone); color:var(--ink)}
.tarjeta.oscura .cta.linea{background:none; color:var(--bone); border-color:rgba(242,242,240,.4)}
.tarjeta.oscura .cta.linea:hover{background:rgba(242,242,240,.08)}
.tarjeta.oscura .dio-globo{background:var(--bone); color:var(--ink);
  box-shadow:4px 0 var(--bone),-4px 0 var(--bone),0 4px var(--bone),0 -4px var(--bone)}
.tarjeta.oscura .dio-globo::after{background:var(--bone);
  box-shadow:4px 0 0 var(--bone),8px 0 0 var(--bone),4px 4px 0 var(--bone)}

/* la cinta del argumento de Dominación */
.remate{margin-top:20px; padding:16px 18px; border-radius:16px;
  background:rgba(201,162,75,.12); border:1px solid rgba(201,162,75,.28);
  font:500 12.5px/1.62 'Montserrat'; color:rgba(242,242,240,.9)}
.remate b{color:#F0E2BC; font-weight:600}

/* ── tarjetas de proyecto suelto (más compactas) ── */
.tarjeta.suelto h3{font-size:clamp(22px,2.6vw,28px)}
.tarjeta.suelto .precio-caja b{font-size:clamp(24px,3vw,32px)}
.tarjeta.suelto .cuerpo{padding-top:20px}
.tarjeta.bloqueada{background:var(--bone)}
.tarjeta.bloqueada .dio{filter:grayscale(.55) opacity(.86)}
.tarjeta.bloqueada h3,.tarjeta.bloqueada .precio-caja b{color:var(--graphite)}
.etiqueta-pronto{position:absolute; top:26px; right:26px; z-index:5;
  font:600 10px 'Poppins',sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--ink); border-radius:99px; padding:7px 14px}

/* nota de IVA */
.nota-iva{margin-top:26px; text-align:center; font:400 12px/1.7 'Montserrat'; color:var(--gray);
  max-width:640px; margin-left:auto; margin-right:auto}

@media (max-width:560px){
  .tarjeta{padding:11px 11px 22px; border-radius:22px}
  .tarjeta .cuerpo{padding:18px 7px 0}
  .dio-globo{font-size:10px; padding:6px 9px; white-space:normal; max-width:70%; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .dio *{animation:none !important}
  .dio>svg>g[id]{transform:none !important}
  .lp-bloque,.ss-foto,.id-traz,.id-muestra,.al-nota,.au-credito,.dm-chispa{opacity:1 !important}
}

/* ══════════════════════════════════════════════════════════════════
   EL ESCAPARATE — una sola escena que cambia
   ------------------------------------------------------------------
   En la portada de productos no hay siete escenarios sueltos: hay un
   escaparate y dentro va pasando el que toca. Así la página vuelve a
   ser un índice ordenado y los dibujos siguen luciendo, pero de uno
   en uno y sin robarle protagonismo a la lista.
   ══════════════════════════════════════════════════════════════════ */
/* Ni pequeño ni invasivo: lo justo para que se vea el dibujo y la
   lista de productos siga entrando en pantalla sin bajar medio metro. */
.escaparate{max-width:720px; width:100%; margin:clamp(24px,4vh,38px) auto 0}
.esc-lienzo{
  position:relative; aspect-ratio:260/140; border-radius:24px; overflow:hidden;
  background:var(--bone); border:1px solid var(--hair);
  --px:0; --py:0; cursor:grab; touch-action:pan-y;
}
.esc-lienzo:active{cursor:grabbing}
/* Un degradado a los lados insinúa que el mundo sigue más allá del marco. */
.esc-lienzo::before,.esc-lienzo::after{
  content:""; position:absolute; top:0; bottom:0; width:46px; z-index:3; pointer-events:none;
  opacity:0; transition:opacity .4s var(--ease);
}
.esc-lienzo::before{left:0;  background:linear-gradient(90deg,rgba(11,11,13,.07),transparent)}
.esc-lienzo::after {right:0; background:linear-gradient(270deg,rgba(11,11,13,.07),transparent)}
.esc-lienzo:hover::before,.esc-lienzo:hover::after{opacity:1}

/* Flechas para movar la cámara a mano. */
.esc-flecha{
  position:absolute; top:50%; z-index:5; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.9); color:var(--ink);
  box-shadow:0 8px 22px -10px rgba(11,11,13,.4);
  transform:translateY(-50%) scale(.86); opacity:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s;
}
.esc-flecha svg{width:14px; height:14px}
.esc-flecha.izq{left:14px}
.esc-flecha.der{right:14px}
.esc-lienzo:hover .esc-flecha,.esc-flecha:focus-visible{opacity:1; transform:translateY(-50%) scale(1)}
.esc-flecha:hover{background:#fff; transform:translateY(-50%) scale(1.08)}
/* En el primer y el último escenario, la flecha de ese lado se apaga. */
.esc-flecha.tope{opacity:0 !important; pointer-events:none}
@media (hover:none){ .esc-flecha{opacity:1; transform:translateY(-50%) scale(1)} }
/* ── El mundo ──
   Las siete escenas no se funden una encima de otra: van en fila, con el
   suelo enlazado de una a la siguiente, y lo que se mueve es la cámara.
   Por eso el recorrido se siente como un sitio, no como un carrusel. */
.esc-mundo{
  position:absolute; inset:0; display:flex; will-change:transform;
  transform:translate3d(calc(var(--i,0) * -100%),0,0);
  transition:transform .78s cubic-bezier(.66,0,.2,1);
}
.esc-lienzo.arrastrando .esc-mundo{transition:none}
.esc-item{flex:0 0 100%; position:relative}
.esc-item>svg{display:block; width:100%; height:100%}
/* Solo se anima lo que está en pantalla o a punto de entrar. */
.esc-item:not(.viva) *{animation-play-state:paused !important}
.esc-item .dio-ami{transition:transform .5s var(--ease);
  transform:translate(calc(var(--px)*6px),calc(var(--py)*2.2px))}
.esc-item>svg>g[id]{transition:transform .55s var(--ease)}

/* El globo de AMI: aquí lo enciende el JS, no el :hover, porque el
   escaparate cambia de escena y la clase tiene que viajar con él. */
.esc-lienzo .dio-globo.on{opacity:1; transform:translate(-50%,-52%) scale(1)}

/* El pie: qué estás viendo, dicho en corto. */
.esc-pie{
  margin-top:18px; min-height:44px; display:flex; flex-direction:column;
  align-items:center; gap:5px; text-align:center;
}
.esc-nom{font:600 10.5px 'Poppins',sans-serif; letter-spacing:.3em;
  text-transform:uppercase; color:var(--red)}
.esc-txt{font:400 13.5px/1.6 'Montserrat'; color:var(--graphite); max-width:460px}
.esc-nom,.esc-txt{transition:opacity .22s var(--ease)}
.esc-pie.cambiando .esc-nom,.esc-pie.cambiando .esc-txt{opacity:0}

/* Los puntitos de debajo: cuántos productos hay y en cuál vas. */
.esc-puntos{margin-top:16px; display:flex; justify-content:center; gap:7px}
.esc-puntos button{
  width:7px; height:7px; border-radius:50%; background:rgba(11,11,13,.16);
  transition:background .3s, transform .3s var(--ease);
}
.esc-puntos button:hover{background:rgba(11,11,13,.34); transform:scale(1.25)}
.esc-puntos button.on{background:var(--red); transform:scale(1.25)}

/* La fila activa de la lista se marca sin gritar. */
.barra.mirando{border-color:rgba(11,11,13,.24); box-shadow:0 20px 44px -32px rgba(11,11,13,.28)}
.barra.mirando .masc{background:rgba(193,39,45,.09)}
/* La fila que aún está en obras se nota apagada, sin dejar de ser legible. */
.barra.candado .masc{filter:grayscale(.7)}
.barra.candado .precio b{color:var(--graphite)}
.barra.candado:hover .masc,.barra.candado.mirando .masc{filter:none}

@media (max-width:640px){
  .esc-lienzo{border-radius:18px}
  .esc-txt{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .esc-item{transition:none}
  .esc-item .dio-ami,.esc-item>svg>g[id]{transform:none !important}
}

/* Precio de referencia tachado dentro de una fila de la lista: sirve de
   ancla para lo que ya va incluido (el pack identidad, por ejemplo). */
.barra .precio s{display:inline-block; margin-bottom:2px;
  font:500 12px 'Poppins',sans-serif; color:var(--gray);
  text-decoration-thickness:2px; text-decoration-color:var(--red)}
.barra .precio s + br + b{color:var(--red)}

/* ══════════════════════════════════════════════════════════════
   ESCENA "portafolio" — la pared de pantallas
   Los móviles se van encendiendo por turnos, como una pared de
   vídeos reproduciéndose; y las cinco estrellas entran una detrás
   de otra, que es el gesto de alguien puntuando. Esa es la idea de
   la página: las notas no las ponemos nosotros, las pone el cliente.
   ══════════════════════════════════════════════════════════════ */
.po-pantalla{opacity:0; animation:po-enciende 3.2s ease-in-out infinite; animation-delay:var(--d,0s)}
@keyframes po-enciende{0%,72%{opacity:0}18%,54%{opacity:.55}}
.po-estrella{opacity:0; transform-origin:center; animation:po-punto 4s ease-out infinite; animation-delay:var(--d,0s)}
@keyframes po-punto{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.15)}20%,86%{opacity:1;transform:scale(1)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .po-pantalla{opacity:.55; animation:none}
  .po-estrella{opacity:1; animation:none}
}