/* Magma Tech Store: la caja del equipo. Un solo CSS para portada, terminos y privacidad.
   Leyes de color: turquesa = lo caliente y tocable (accion, llama). Coral = solo sellos. Blanco etiqueta = solo la etiqueta.
   Forma: paneles y botones a 6px; sellos circulares; tira de abrir recta (es carton). */
@import url('assets/fuentes.css');

:root{
  --carton:#09162A;      /* tapa, carton mate azul marino; con el grano en overlay se ve ~#0B1B33 */
  --carton-2:#0F2141;    /* paneles; con el grano se ve ~#13294F */
  --carton-3:#1C3767;    /* pliegues, bordes */
  --pliegue:rgba(158,184,222,.22);
  --texto:#EEF3F9;
  --texto-2:#A9BAD3;     /* secundario sobre carton: 8:1 */
  --llama:#4FC7B2;
  --llama-viva:#7DE6D3;
  --coral:#FF6B4A;
  --etiqueta:#F4F6FA;
  --tinta:#0E1830;
  --azul-logo:#8DB7E2;
  --curva:cubic-bezier(.16,1,.3,1);
  --curva-resorte:cubic-bezier(.34,1.3,.64,1);
  --display:'Archivo',system-ui,sans-serif;
  --cuerpo:'Figtree',system-ui,sans-serif;
  --dato:'Azeret Mono',ui-monospace,monospace;
  --r:6px;
  --gutter:clamp(16px,4vw,48px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grano) var(--carton);background-blend-mode:overlay;color:var(--texto);font:400 17px/1.6 var(--cuerpo)}
main{overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px}
::selection{background:var(--llama);color:var(--carton)}
:focus-visible{outline:2px solid var(--llama-viva);outline-offset:3px;border-radius:4px}
html{scrollbar-color:var(--carton-3) var(--carton)}
.envoltura{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Fibra del carton: textura de los fondos de carton (tapa, cuerpo, paneles, tira); nunca en la etiqueta ni la cinta. */
:root{--grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------------- solapa (cabecera) */
.solapa{position:sticky;top:0;z-index:30;background:rgba(13,27,54,.86);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px dashed var(--pliegue)}
.solapa .envoltura{display:flex;align-items:center;gap:24px;min-height:64px}
.marca-chica{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.marca-chica svg{width:40px;height:34px}
.marca-chica span{font:800 15px/1 var(--display);font-stretch:125%;letter-spacing:.06em}
.solapa nav{display:flex;gap:24px}
.solapa nav a{font:600 14px/1 var(--cuerpo);color:var(--texto-2);text-decoration:none;padding:8px 0;position:relative}
.solapa nav a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--llama);transform:scaleX(0);transform-origin:left;transition:transform .26s var(--curva)}
.solapa nav a:hover{color:var(--texto)}
.solapa nav a:hover::after{transform:scaleX(1)}

/* Boton de WhatsApp en su forma corta (solapa, cierre, movil). Misma etiqueta en toda la pagina. */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--r);
  background:var(--llama);color:var(--carton);font:700 15px/1 var(--cuerpo);text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(3,8,20,.8);transition:transform .22s var(--curva),background-color .22s var(--curva),box-shadow .22s var(--curva)}
.boton svg{width:20px;height:20px}
.boton:hover{background:var(--llama-viva);transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(3,8,20,.9)}
.boton:active{transform:translateY(0) scale(.98);transition-duration:.12s}
.boton-borde{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 1.5px var(--carton-3)}
.boton-borde:hover{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1.5px var(--texto-2)}

/* ---------------------------------------------------------------- tapa (primera vista) */
.tapa{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100dvh - 64px);display:grid;grid-template-rows:1fr auto;
  background:var(--grano),radial-gradient(120% 90% at 78% 30%,#1A3466 0%,var(--carton) 58%);background-blend-mode:overlay,normal}
/* Luz que barre el carton: el reflejo de la lampara de la tienda sobre la tapa. */
.tapa::before{content:'';position:absolute;inset:-20% -60%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(160,200,255,.07) 48%,rgba(160,200,255,.12) 50%,rgba(160,200,255,.07) 52%,transparent 60%);
  animation:barrido 11s var(--curva) infinite}
@keyframes barrido{0%{transform:translateX(-35%)}60%,100%{transform:translateX(35%)}}
.chispas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
/* Plantilla de corte: pliegues reales de la tapa (margen de solapa y lomo). */
.corte{position:absolute;inset:18px;z-index:-1;pointer-events:none;border:1px dashed var(--pliegue);border-radius:2px}
.corte::before{content:'';position:absolute;top:-10px;bottom:-10px;width:1px;border-left:1px dashed var(--pliegue)}
.corte::before{left:58%}
.registro{position:absolute;width:22px;height:22px;color:rgba(158,184,222,.45)}
.registro::before,.registro::after{content:'';position:absolute;background:currentColor}
.registro::before{left:10px;top:0;width:1.5px;height:22px}.registro::after{top:10px;left:0;height:1.5px;width:22px}
.registro i{position:absolute;inset:5px;border:1.5px solid currentColor;border-radius:50%}
.registro.r1{top:-12px;left:-12px}.registro.r2{top:-12px;right:-12px}.registro.r3{bottom:-12px;left:-12px}.registro.r4{bottom:-12px;right:-12px}
/* Pliegue doble entre paneles: el limite real entre secciones de la caja */
.pliegue{height:9px;border-block:1px dashed var(--pliegue);margin:0}

.tapa-cuerpo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:clamp(24px,4vw,64px);
  padding-block:clamp(40px,7vh,88px) clamp(28px,5vh,56px)}
.distribuidor{position:absolute;z-index:3;top:11px;left:calc(var(--gutter) + 18px);margin:0;padding:0 10px;background:var(--carton);color:var(--texto-2);font:500 12px/1.3 var(--dato);letter-spacing:.04em;white-space:nowrap}
.distribuidor b{font-weight:600;color:var(--texto)}
.marcas-dist{display:inline-flex;align-items:center;gap:26px;margin-left:20px;vertical-align:middle}
.marcas-dist img{width:auto;opacity:.92}
.marcas-dist .lg-samsung{height:13px}.marcas-dist .lg-moto{height:19px}.marcas-dist .lg-oukitel{height:11px;filter:brightness(0) invert(.94)}
.tapa h1{margin:0;font:800 clamp(40px,6.2vw,96px)/.92 var(--display);font-stretch:116%;white-space:nowrap;letter-spacing:-.035em;text-transform:uppercase}
.tapa h1 span{display:block}
.tapa h1 .caliente{color:var(--llama)}
.tapa .bajada{margin:clamp(18px,3vh,28px) 0 0;max-width:34ch;font-size:clamp(17px,1.5vw,20px);color:var(--texto-2)}

.tapa-cuerpo>div:first-child{position:relative;z-index:2;max-width:min(700px,56%)}
/* El volcan impreso en grande: sangra por la derecha y queda cortado por la tira de abrir. */
.tapa-marca{position:absolute;z-index:0;right:-5vw;bottom:clamp(78px,12vh,120px);width:min(52vw,840px);aspect-ratio:530/440}

.logo-grande{width:100%;height:100%;overflow:visible;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .6s var(--curva)}
/* La llama del volcan respira: se mece desde la base, con el brillo encima. */
.llama-viva{transform-box:fill-box;transform-origin:70% 100%;animation:llama 3.2s ease-in-out infinite}
@keyframes llama{0%,100%{transform:rotate(0) scale(1,1)}25%{transform:rotate(-3deg) scale(1.02,1.06) skewX(-2deg)}50%{transform:rotate(1.5deg) scale(.99,.97)}75%{transform:rotate(-1deg) scale(1.01,1.04) skewX(1.5deg)}}
.logo-grande .brillo{transform:translateX(-120%);animation:brillo 6.5s var(--curva) 1.2s infinite}
@keyframes brillo{0%{transform:translateX(-120%)}35%,100%{transform:translateX(160%)}}

/* Sellos troquelados pegados en la tapa */
.sello{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;border-radius:50%;
  font:800 12px/1.1 var(--display);font-stretch:112%;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6),inset 0 -2px 0 rgba(0,0,0,.12);
  transform:translate3d(var(--px,0),var(--py,0),0) rotate(var(--giro,0deg))}
.sello b{font:inherit}
.sello em{white-space:nowrap;font:800 13px/1 var(--display);font-style:normal;letter-spacing:.02em;text-transform:none;padding:3px 7px;border-radius:3px;background:var(--tinta);color:var(--coral)}
.sello small{display:block;max-width:12ch;font:600 12px/1.2 var(--cuerpo);letter-spacing:0;text-transform:none}
.sello img{width:72%;height:auto;filter:brightness(0);opacity:.88}
.sello-nuevo{width:156px;height:156px;top:2%;left:14%;--giro:-12deg;background:var(--etiqueta);color:var(--tinta);font-size:24px;border-radius:0;clip-path:polygon(50.0% 0.0%,55.9% 4.9%,62.9% 1.7%,67.4% 8.0%,75.0% 6.7%,77.7% 13.9%,85.4% 14.6%,86.1% 22.3%,93.3% 25.0%,92.0% 32.6%,98.3% 37.1%,95.1% 44.1%,100.0% 50.0%,95.1% 55.9%,98.3% 62.9%,92.0% 67.4%,93.3% 75.0%,86.1% 77.7%,85.4% 85.4%,77.7% 86.1%,75.0% 93.3%,67.4% 92.0%,62.9% 98.3%,55.9% 95.1%,50.0% 100.0%,44.1% 95.1%,37.1% 98.3%,32.6% 92.0%,25.0% 93.3%,22.3% 86.1%,14.6% 85.4%,13.9% 77.7%,6.7% 75.0%,8.0% 67.4%,1.7% 62.9%,4.9% 55.9%,0.0% 50.0%,4.9% 44.1%,1.7% 37.1%,8.0% 32.6%,6.7% 25.0%,13.9% 22.3%,14.6% 14.6%,22.3% 13.9%,25.0% 6.7%,32.6% 8.0%,37.1% 1.7%,44.1% 4.9%)}
.sello-nuevo::before{display:none}
.sello-garantia{width:146px;height:146px;bottom:24%;left:0;--giro:9deg;background:var(--coral);color:var(--tinta);padding:16px;font-size:17px}
.sello-credigo{width:136px;height:136px;top:22%;right:16%;--giro:14deg;background:var(--coral);color:var(--tinta);padding:16px;font-size:12px;gap:7px}
.sello-garantia::before,.sello-credigo::before,.sello-nuevo::before{content:'';position:absolute;inset:6px;border-radius:50%;border:1.5px dashed currentColor;opacity:.35}

/* La tira de abrir: la accion principal. Perforada arriba y abajo; al pasar, se rasga y aparece el turquesa. */
.tira{position:relative;z-index:3;display:flex;align-items:center;gap:clamp(12px,3vw,32px);min-height:clamp(72px,10vh,96px);
  padding:0 var(--gutter);background:var(--grano) var(--carton-2);background-blend-mode:overlay;color:var(--texto);text-decoration:none;overflow:hidden;isolation:isolate}
.tira::before,.tira::after{content:'';position:absolute;left:0;right:0;height:6px;
  background:radial-gradient(circle at 3px 3px,var(--carton) 2px,transparent 2.4px) 0 0/12px 6px repeat-x}
.tira::before{top:0}.tira::after{bottom:0}
.tira .rasgado{position:absolute;inset:6px -14px 6px 0;z-index:-1;background:var(--llama);transform:translateX(-101%);transition:transform .5s var(--curva);
  -webkit-mask:linear-gradient(#000,#000) left/calc(100% - 14px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16'%3E%3Cpath d='M0 0h4l10 8-10 8H0z'/%3E%3C/svg%3E") right/14px 16px repeat-y;
  mask:linear-gradient(#000,#000) left/calc(100% - 14px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16'%3E%3Cpath d='M0 0h4l10 8-10 8H0z'/%3E%3C/svg%3E") right/14px 16px repeat-y}
.tira .flecha-abrir{font:500 12px/1 var(--dato);letter-spacing:.12em;color:var(--texto-2);white-space:nowrap;transition:color .3s var(--curva)}
.tira .accion{min-width:0;display:flex;align-items:center;gap:12px;font:800 clamp(20px,2.6vw,34px)/1 var(--display);font-stretch:118%;letter-spacing:-.01em;text-transform:uppercase}
.tira .accion svg{width:clamp(26px,3vw,36px);height:auto;flex:0 0 auto}
.tira .pestana{flex:0 0 auto;margin-left:auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--carton-3);transition:transform .5s var(--curva),border-color .3s var(--curva)}
.tira .pestana svg{width:22px;height:22px}
.tira:hover .rasgado,.tira:focus-visible .rasgado,.tira.presionada .rasgado{transform:translateX(0)}
.tira:hover,.tira:focus-visible,.tira.presionada{color:var(--carton)}
.tira:hover .flecha-abrir,.tira:focus-visible .flecha-abrir,.tira.presionada .flecha-abrir{color:var(--carton)}
.tira:hover .pestana,.tira:focus-visible .pestana,.tira.presionada .pestana{transform:translateX(6px) rotate(-45deg);border-color:var(--carton)}
.tira:active .accion{transform:scale(.985)}
.tira:focus-visible{outline-offset:-4px}

/* ---------------------------------------------------------------- cinta de embalaje */
.cinta{position:relative;z-index:4;margin:34px -4vw -18px;transform:rotate(-2.2deg);background:var(--etiqueta);color:var(--tinta);overflow:hidden;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7);border-block:1px solid rgba(14,24,48,.12)}
.cinta-pista{display:flex;width:max-content;animation:cinta 46s linear infinite}
.cinta-pista ul{display:flex;align-items:center;gap:28px;margin:0;padding:14px 14px 14px 28px;list-style:none;white-space:nowrap;
  font:800 clamp(15px,1.5vw,20px)/1 var(--display);font-stretch:118%;text-transform:uppercase;letter-spacing:.01em}
.cinta-pista svg{width:16px;height:22px;flex:0 0 auto}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- dorso (lo que trae) */
.seccion{padding-block:clamp(72px,11vw,140px)}
.seccion h2{margin:0;font:800 clamp(30px,4.2vw,58px)/.98 var(--display);font-stretch:118%;letter-spacing:-.025em;text-transform:uppercase;max-width:16ch}
.dorso-reja{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start}
.contenido{margin:clamp(32px,5vw,56px) 0 0;border-block:3px solid var(--texto)}
.contenido-cab{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--texto);font:600 12px/1 var(--dato);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}
.contenido dl{margin:0}
.contenido .fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--pliegue)}
.contenido .fila:last-child{border-bottom:0}
.contenido dt{font:700 clamp(17px,1.5vw,20px)/1.25 var(--display);font-stretch:108%}
.contenido dd{margin:0;color:var(--texto-2);font:400 14px/1.5 var(--dato)}
/* Ventana troquelada: el acetato por donde se ve el equipo */
.ventana{margin:0;aspect-ratio:3/4;outline:1px dashed var(--pliegue);outline-offset:8px}
/* Escenario: panel de carton con foco turquesa en el piso; cada .pieza es un producto oficial con su rotulo impreso.
   data-rota cambia de pieza cada 4.5 s. Esqueleto con brillo mientras baja la primera imagen. */
.escenario{position:relative;overflow:hidden;border-radius:var(--r);
  background:radial-gradient(55% 16% at 50% 86%,rgba(79,199,178,.30),transparent 72%),radial-gradient(80% 70% at 50% 40%,#183363 0%,transparent 70%),var(--grano) var(--carton-2);
  background-blend-mode:normal,normal,overlay;box-shadow:inset 0 0 0 1px rgba(158,184,222,.14)}
.pieza{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4%,40px) clamp(16px,6%,48px) 52px;opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .9s var(--curva),transform .9s var(--curva);pointer-events:none}
.pieza.activa{opacity:1;transform:none;pointer-events:auto}
.js .pieza.activa:not(.cargada){opacity:0}
.pieza>img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 28px 26px rgba(3,8,20,.55));
  animation:flota 6s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pieza.foto{padding:0}
.pieza.foto>img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none;animation:none;transform:scale(1.04);transition:transform 7s cubic-bezier(.25,1,.5,1)}
.pieza.foto.activa>img{transform:scale(1)}
.rotulo{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:4px;
  background:rgba(9,22,42,.72);backdrop-filter:blur(6px);font:500 12px/1 var(--dato);letter-spacing:.04em;color:var(--texto)}
.rotulo img{width:auto;height:12px;filter:brightness(0) invert(.94)}
.rotulo .lg-moto{height:16px}.rotulo .lg-highpro{height:15px}
.js .media:not(.lista)::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(158,184,222,.14) 50%,transparent 70%) 0 0/220% 100%;animation:esqueleto 1.4s linear infinite}
@keyframes esqueleto{from{background-position:120% 0}to{background-position:-120% 0}}
.media .puntos{position:absolute;z-index:2;right:14px;bottom:18px;display:flex;gap:6px}
.media .puntos i{width:14px;height:3px;border-radius:2px;background:rgba(238,243,249,.35);transition:background-color .3s var(--curva),width .3s var(--curva)}
.media .puntos i.on{width:24px;background:var(--llama)}

/* Vitrina: celulares alto a la izquierda; accesorios y electrodomesticos apilados a la derecha. Sin huecos. */
.vitrina{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(240px,1fr));gap:clamp(14px,2vw,24px);
  margin-top:clamp(56px,8vw,104px)}
.vitrina figure{margin:0;display:grid;grid-template-rows:1fr auto;min-height:0}
.v-cel{grid-row:span 2}
.vitrina .escenario{min-height:240px}
.v-cel .escenario{min-height:520px}
.vitrina figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 2px 0;font:400 14px/1.4 var(--cuerpo);color:var(--texto-2)}
.vitrina figcaption b{font:700 18px/1.25 var(--display);font-stretch:108%;color:var(--texto)}

/* ---------------------------------------------------------------- marcas */
.reja-marcas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,5vw,56px);border-top:1px dashed var(--pliegue);border-left:1px dashed var(--pliegue)}
.celda{display:flex;flex-direction:column;gap:18px;min-height:210px;padding:clamp(20px,2.4vw,30px);border-right:1px dashed var(--pliegue);border-bottom:1px dashed var(--pliegue);
  transition:background-color .3s var(--curva)}
.celda:hover{background:rgba(158,184,222,.04)}
.c-ancha{grid-column:span 2}
.celda h3{margin:0;font:600 12px/1.2 var(--dato);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;min-height:52px}
.logos img{width:auto;height:28px;filter:brightness(0) invert(.94);transition:filter .3s var(--curva),transform .3s var(--curva)}
.celda:hover .logos img{filter:none;transform:translateY(-2px)}
.logos .lg-samsung{height:20px}.logos .lg-moto{height:36px}.logos .lg-oukitel{height:20px}.logos .lg-highpro{height:38px}
.logos .lg-1hora{height:28px}.logos .lg-compaq{height:46px}.logos .lg-unit{height:46px}.logos .lg-credigo{height:26px}
.celda:hover .logos .lg-samsung,.celda:hover .logos .lg-moto,.celda:hover .logos .lg-credigo{filter:brightness(0) invert(.94)}
.lg-texto{font:800 clamp(22px,2.2vw,28px)/1 var(--display);font-stretch:125%;letter-spacing:.06em;color:var(--texto)}
.celda p{margin:0;color:var(--texto-2);font-size:15px;line-height:1.55;max-width:44ch}
.celda p b{color:var(--texto);font-weight:600}
.c-mayor .boton{align-self:flex-start;margin-top:auto}

/* ---------------------------------------------------------------- instrucciones de apertura */
.instrucciones{background:var(--grano) var(--carton-2);background-blend-mode:overlay}
.pasos{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative;counter-reset:paso}
.pasos::before{content:'';position:absolute;left:0;right:0;top:27px;border-top:2px dashed var(--carton-3)}
.pasos::after{content:'';position:absolute;left:0;right:0;top:26px;height:2px;background:var(--llama);transform:scaleX(var(--avance,1));transform-origin:left;transition:transform 1.4s var(--curva) .2s}
.pasos li{position:relative;z-index:1;padding-right:clamp(16px,3vw,40px);counter-increment:paso}
.pasos .nodo{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--carton);border:2px solid var(--llama);margin-bottom:22px}
.pasos .nodo::before{content:counter(paso);font:800 20px/1 var(--display);font-stretch:118%;color:var(--llama)}
.pasos b{display:block;font:800 clamp(22px,2.4vw,30px)/1.1 var(--display);font-stretch:115%;text-transform:uppercase;margin-bottom:10px}
.pasos span{color:var(--texto-2);max-width:30ch;display:block}

/* ---------------------------------------------------------------- etiqueta lateral (legal) */
.etiqueta-zona{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.etiqueta-zona p.intro{color:var(--texto-2);max-width:40ch;margin:18px 0 28px}
.etiqueta-zona .acciones{display:flex;flex-wrap:wrap;gap:12px}
.etiqueta{position:relative;background:var(--etiqueta);color:var(--tinta);border-radius:8px;padding:clamp(22px,3vw,36px);
  transform:rotate(-1.2deg);box-shadow:0 2px 0 rgba(0,0,0,.08),0 40px 70px -40px rgba(0,0,0,.8);transition:transform .6s var(--curva)}
.etiqueta:hover{transform:rotate(0)}
.etiqueta-cabeza{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--tinta)}
.etiqueta-cabeza strong{font:800 clamp(18px,2vw,24px)/1.1 var(--display);font-stretch:118%;letter-spacing:.01em}
.etiqueta-cabeza svg{width:54px;height:46px;flex:0 0 auto}
.etiqueta dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:18px 0;font:400 14px/1.45 var(--dato)}
.etiqueta dt{font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px;padding-top:3px;color:#4A5772}
.etiqueta dd{margin:0}
.etiqueta dd a{color:var(--tinta)}
.codigo{position:relative;display:flex;align-items:flex-end;gap:16px;padding-top:16px;border-top:1px dashed #B9C3D3;overflow:hidden}
.codigo .barras{width:min(260px,62%);height:58px;fill:var(--tinta)}
.codigo span{font:500 13px/1.3 var(--dato);letter-spacing:.08em}
.codigo::after{content:'';position:absolute;left:0;top:16px;width:min(260px,62%);height:2px;background:var(--coral);opacity:0;transform:translateY(0)}
.visto .codigo::after{animation:escaneo 1.6s var(--curva) .5s 1 both}
@keyframes escaneo{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1;transform:translateY(56px)}100%{opacity:0;transform:translateY(56px)}}

/* ---------------------------------------------------------------- cierre y fondo */
.cierre{text-align:left}
.cierre .envoltura{padding-block:clamp(72px,10vw,128px) clamp(40px,5vw,64px)}
.tira-cierre{min-height:clamp(96px,14vh,140px)}
.tira-cierre .accion{font-size:clamp(24px,3.6vw,52px)}
.cierre p{color:var(--texto-2);margin:16px 0 0;max-width:40ch}
.fondo{border-top:1px dashed var(--pliegue);padding-block:32px 40px;color:var(--texto-2);font-size:14px}
.fondo .envoltura{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.fondo .legal-razon{margin-right:auto;font:500 13px/1.5 var(--dato)}
.fondo a{color:var(--texto);text-decoration-color:var(--carton-3)}
.fondo a:hover{color:var(--llama-viva)}

/* WhatsApp fijo en movil */
.barra-movil{display:none}
.barra-movil{transition:transform .32s var(--curva),opacity .32s var(--curva)}
.barra-movil.oculta{transform:translateY(140%);opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- aparicion al hacer scroll (solo con JS) */
.js .revela{opacity:0;transform:translateY(26px);transition:opacity .8s var(--curva),transform .8s var(--curva);transition-delay:calc(var(--i,0) * 90ms)}
.js .revela.visto{opacity:1;transform:none}
.js .pasos{--avance:0}
.js .pasos.visto{--avance:1}
/* Entrada de la tapa: los sellos se pegan, el titular sube */
.js .tapa h1 span{clip-path:inset(0 -100% 100% 0);transform:translateY(40%);animation:sube .9s var(--curva) both;animation-delay:calc(.1s + var(--i,0) * .1s)}
@keyframes sube{to{clip-path:inset(-20% -100% -20% 0);transform:none}}
.js .sello{animation:pega .7s var(--curva-resorte) both;animation-delay:calc(.6s + var(--i,0) * .12s)}
@keyframes pega{from{opacity:0;transform:translate3d(0,0,0) rotate(var(--giro)) scale(1.35)}to{opacity:1}}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1024px){
  .solapa nav{display:none}
  .tapa-cuerpo{grid-template-columns:1fr;padding-top:32px}
  .tapa-cuerpo>div:first-child{max-width:none}
  .tapa-marca{position:relative;right:auto;bottom:auto;justify-self:end;width:min(108%,680px);margin:8px -12% -18px 0}
  .corte::before{display:none}
  .dorso-reja,.etiqueta-zona{grid-template-columns:1fr}
  .reja-marcas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vitrina{grid-template-columns:1fr 1fr}
  .ventana{max-width:520px;aspect-ratio:4/5}
}
@media (max-width:720px){
  body{font-size:16px}
  .tapa h1{font-size:min(10.4vw,64px)}
  .solapa .boton{display:none}
  .tapa{min-height:auto}
  .tapa-marca{width:118%;margin-right:-24%}
  .sello-nuevo{width:92px;height:92px;font-size:16px;left:6%}
  .sello-garantia{width:112px;height:112px;left:-2%;font-size:13px;padding:12px}
  .sello-credigo{width:104px;height:104px;font-size:10px;padding:10px;right:20%;gap:5px}
  .sello small{font-size:12px}
  .sello em{font-size:10.5px;padding:3px 5px}
  .cinta{margin-top:22px}
  .tira .flecha-abrir{display:none}
  .tapa{grid-template-rows:auto auto auto}
  .distribuidor{position:relative;top:auto;left:auto;order:1;margin:22px var(--gutter) 14px;padding:0;background:none;white-space:normal;line-height:1.5}
  .tapa .tira{order:2}
  .tira .accion,.tira-cierre .accion{font-size:clamp(15px,4.6vw,22px);white-space:nowrap;gap:10px}
  .tira .accion svg{width:24px}
  .tira .pestana{width:44px;height:44px}
  .contenido .fila{grid-template-columns:1fr;gap:4px}
  .vitrina{grid-template-columns:1fr;grid-template-rows:none}
  .v-cel{grid-row:auto}
  .v-cel .escenario{min-height:380px}
  .vitrina .escenario{min-height:260px}
  .reja-marcas{grid-template-columns:1fr}
  .c-ancha{grid-column:auto}
  .celda{min-height:0}
  .marcas-dist{display:flex;flex-wrap:wrap;align-items:center;margin:10px 0 0;gap:12px 24px}
  .pasos{grid-template-columns:1fr;gap:32px}
  .pasos::before,.pasos::after{left:27px;right:auto;top:0;bottom:0;width:0;height:auto;border-top:0;border-left:2px dashed var(--carton-3)}
  .pasos::after{border:0;width:2px;background:var(--llama);transform:scaleY(var(--avance,1));transform-origin:top}
  .pasos li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding-right:0}
  .pasos .nodo{grid-row:span 2;margin:0}
  .etiqueta{transform:none}
  .etiqueta dl{grid-template-columns:1fr;gap:2px}
  .etiqueta dd{margin-bottom:10px}
  .fondo{padding-bottom:104px}
  .barra-movil{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:35;min-height:52px;font-size:16px;
    box-shadow:0 16px 36px -12px rgba(0,0,0,.7)}
}

@media (prefers-reduced-motion:reduce){
  .tapa::before,.logo-grande .brillo,.visto .codigo::after,.cinta-pista,.llama-viva,.js .media:not(.lista)::before,.pieza>img{animation:none}
  .js .revela{opacity:1;transform:none;transition:none}
  .pieza,.pieza.foto>img{transition:none;transform:none}
  .js .tapa h1 span{opacity:1;transform:none;clip-path:none;animation:none;transition:none}
  .js .sello{opacity:1;animation:none}
  .sello{transform:rotate(var(--giro))}
  .js .pasos{--avance:1}
  .pasos::after,.tira .rasgado,.barra-movil,.logo-grande,.etiqueta{transition:none}
}

/* ---------------------------------------------------------------- paginas legales */
.legal{padding-block:clamp(48px,7vw,96px)}
.legal .envoltura{max-width:760px}
.legal h1{margin:0 0 8px;font:800 clamp(34px,5vw,56px)/1 var(--display);font-stretch:118%;letter-spacing:-.025em;text-transform:uppercase}
.legal .vigencia{font:400 13px/1.5 var(--dato);color:var(--texto-2);margin:0 0 40px}
.legal h2{font:700 20px/1.3 var(--display);font-stretch:108%;margin:40px 0 10px}
.legal p,.legal li{color:#C9D5E6;max-width:68ch}
.legal ul{padding-left:22px}
.legal a{color:var(--llama-viva)}

/* ---------------------------------------------------------------- logo (simbolo #marca): dos tintas segun el fondo */
.m-izq{fill:var(--c-izq)}.m-der{fill:var(--c-der)}.m-llama{fill:var(--c-llama)}.m-letras{stroke:var(--c-letras)}
.logo-claro{--c-izq:var(--azul-logo);--c-der:var(--texto);--c-llama:var(--llama);--c-letras:var(--texto)}
.logo-oscuro{--c-izq:#3E6FA8;--c-der:#28306A;--c-llama:#3FB7A3;--c-letras:#28306A}
.cierre h2{margin:0;font:800 clamp(30px,4.2vw,58px)/.98 var(--display);font-stretch:118%;letter-spacing:-.025em;text-transform:uppercase;max-width:18ch}