/* ==========================================================================
   MARVATOYS LANDING

   PEGA AQUI el contenido completo del bloque <style> de tu HTML actual,
   sin las etiquetas <style> ni </style>. El CSS no cambia en nada:
   todas las clases del PHP son las mismas que ya tienes.

   Borra este comentario cuando lo pegues.
   ========================================================================== */
/* ==========================================================================
   MARVATOYS v3, "VITRINA VIVA"
   Cambios de esta version:
   1. Portada de tienda: marca, giro y producto. Sin manifiesto en el hero.
   2. Productos sobre blobs de color, sin cajas rectangulares.
   3. Todo efecto de hover tiene gemelo tactil con la clase .activa.
   4. Presupuesto de pintado bajo: nada de filtros SVG por cuadro,
      nada de backdrop-filter, nada de blur() animado. Solo transform y opacity.
   5. Modo .ligero automatico para equipos lentos, medido en vivo con el
      tiempo real de cuadro. El cursor nunca se apaga, solo se adelgaza.
   ========================================================================== */
:root{
  --void:#08070A;
  --carbon:#111017;
  --humo:#1E1C26;
  --linea:#2A2733;
  --sangre:#FF1E1E;
  --sangre-2:#C10D0D;
  --amarillo:#FFD400;
  --cian:#00E5FF;
  --magenta:#FF2E9A;
  --violeta:#8B5CF6;
  --lima:#B6FF00;
  --hueso:#F5F1E8;
  --ceniza:#A79FB8;

  --f-display:'Anton','Arial Narrow',Impact,sans-serif;
  --f-cuerpo:'Space Grotesk',system-ui,sans-serif;
  --f-dato:'Space Mono',ui-monospace,monospace;
  --f-jp:'Zen Kaku Gothic New',system-ui,sans-serif;

  --e1:8px;--e2:16px;--e3:24px;--e4:36px;--e5:56px;--e6:88px;--e7:120px;
  --ancho:1280px;
  --curva:cubic-bezier(.16,1,.3,1);
  --blob-a:58% 42% 47% 53%/44% 56% 44% 56%;
  --blob-b:42% 58% 61% 39%/56% 45% 55% 44%;
  --blob-c:50% 50% 38% 62%/38% 58% 42% 62%;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void);overflow-x:hidden}
body{margin:0;background:var(--void);color:var(--hueso);font-family:var(--f-cuerpo);
  font-size:16px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.bloqueado{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:400}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px}
.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--e3)}
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.display{font-family:var(--f-display);text-transform:uppercase}
.mono{font-family:var(--f-dato);font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ==========================================================================
   CURSOR
   Tres gotas de vinil que se persiguen, una mira y una etiqueta solida.
   La etiqueta es texto negro sobre amarillo a 12.5px: se lee sobre
   cualquier fondo, a diferencia de la version anterior en modo difference.
   Aqui no hay filtro SVG, por eso sobrevive en equipos viejos.
   ========================================================================== */
html.cursor-vivo *{cursor:none}
html.cursor-vivo input,html.cursor-vivo textarea{cursor:text}
.gota{position:fixed;left:0;top:0;z-index:9993;pointer-events:none;border-radius:50%;
  width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  background:var(--c);box-shadow:0 0 16px var(--c);opacity:.95;will-change:transform}
.mira{position:fixed;left:0;top:0;z-index:9995;pointer-events:none;
  width:64px;height:64px;margin:-32px 0 0 -32px;will-change:transform}
.mira__aro{position:absolute;inset:0;border:1.6px solid var(--hueso);border-radius:50%;
  transform:scale(.5);
  transition:transform .45s var(--curva),border-color .3s,background-color .3s}
.mira__x,.mira__y{position:absolute;left:50%;top:50%;background:var(--hueso);
  transition:opacity .3s,transform .45s var(--curva)}
.mira__x{width:16px;height:1.6px;margin:-.8px 0 0 -8px}
.mira__y{width:1.6px;height:16px;margin:-8px 0 0 -.8px}
.mira.pega .mira__aro{transform:scale(1.3);border-color:var(--amarillo);
  background:rgba(255,212,0,.14)}
.mira.pega .mira__x,.mira.pega .mira__y{opacity:0;transform:scale(2.4)}
/* La etiqueta es el unico texto del cursor: amarillo solido, negro encima,
   13 px y contorno oscuro para que se lea sobre foto, blob o fondo claro. */
.etq{position:fixed;left:0;top:0;z-index:9996;pointer-events:none;
  font-family:var(--f-dato);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
  color:var(--void);background:var(--amarillo);padding:11px 16px;border-radius:999px;
  box-shadow:0 12px 28px rgba(0,0,0,.65),0 0 0 2px rgba(8,7,10,.9);opacity:0;
  transition:opacity .18s linear;will-change:transform}
.etq.ver{opacity:1}
.chispa{position:fixed;left:0;top:0;z-index:9994;pointer-events:none;border-radius:50%;
  width:6px;height:6px;margin:-3px 0 0 -3px}
@media(hover:none),(pointer:coarse){.gota,.mira,.etq{display:none}}

/* ==========================================================================
   FONDO
   ========================================================================== */
.fondo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:layout paint}
.fondo__t{position:absolute;border-radius:50%;will-change:transform;
  background:radial-gradient(circle closest-side,var(--t) 0%,rgba(0,0,0,0) 72%)}
.t1{--t:rgba(255,30,30,.55);width:70vmax;height:70vmax;left:-25vmax;top:-27vmax;
  animation:vagar1 26s ease-in-out infinite alternate}
.t2{--t:rgba(139,92,246,.32);width:56vmax;height:56vmax;right:-19vmax;top:18vh;
  animation:vagar2 34s ease-in-out infinite alternate}
.t3{--t:rgba(255,46,154,.22);width:48vmax;height:48vmax;left:24vw;bottom:-24vmax;
  animation:vagar3 40s ease-in-out infinite alternate}
@keyframes vagar1{to{transform:translate3d(12vw,10vh,0) scale(1.18)}}
@keyframes vagar2{to{transform:translate3d(-14vw,-8vh,0) scale(.84)}}
@keyframes vagar3{to{transform:translate3d(9vw,-12vh,0) scale(1.22)}}
.fondo__rejilla{position:absolute;inset:-15% -15%;opacity:.14;will-change:transform;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:74px 74px;
  animation:correrRejilla 11s linear infinite}
@keyframes correrRejilla{to{transform:translate3d(74px,74px,0)}}
#motas{position:absolute;inset:0;width:100%;height:100%}
.fondo__velo{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 34%,transparent 26%,rgba(8,7,10,.5) 62%,var(--void) 96%)}
.fondo__grano{position:absolute;inset:0;opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
main,.cab,.pie,.panel{position:relative;z-index:2}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.carga{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:transparent}
.carga__hoja{position:fixed;left:0;width:100%;height:50.5%;background:var(--void);
  transition:transform .9s var(--curva)}
.carga__hoja--a{top:0}
.carga__hoja--b{bottom:0}
.carga.fuera .carga__hoja--a{transform:translateY(-100%)}
.carga.fuera .carga__hoja--b{transform:translateY(100%)}
.carga.fuera .carga__caja{opacity:0;transform:scale(1.3);transition:opacity .4s,transform .6s var(--curva)}
.carga__caja{position:relative;z-index:2;text-align:center;width:min(70vw,280px)}
.carga__molde{position:relative}
.carga__molde svg{width:100%;height:auto;display:block}
.carga__molde .vacio{opacity:.16}
.carga__molde .lleno{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}
.carga__ola{position:absolute;left:0;right:0;height:3px;background:var(--amarillo);
  box-shadow:0 0 18px var(--amarillo);opacity:.9}
.carga__n{font-family:var(--f-display);font-size:44px;line-height:1;margin-top:var(--e3);
  color:var(--hueso)}
.carga__t{font-family:var(--f-dato);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ceniza);margin-top:10px}

/* ==========================================================================
   CABECERA
   ========================================================================== */
.cab{position:fixed;top:0;left:0;right:0;z-index:90;border-bottom:1px solid transparent;
  transition:background-color .35s,border-color .35s,transform .45s var(--curva)}
.cab.pegada{background:rgba(8,7,10,.93);border-bottom-color:var(--linea)}
.cab.escondida{transform:translateY(-105%)}
.cab__fila{display:flex;align-items:center;justify-content:space-between;height:78px;gap:var(--e2)}
.logo{display:flex;align-items:center;gap:12px}
.logo svg{width:42px;height:42px;flex:0 0 auto;
  filter:drop-shadow(0 0 12px rgba(255,30,30,.5))}
.logo__t{font-family:var(--f-display);text-transform:uppercase;font-size:24px;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:var(--e3)}
/* La tinta es una sola pastilla que viaja de enlace a enlace. Un elemento
   animado en vez de un subrayado por enlace, y se siente como un rotulador. */
.nav__lista{position:relative;display:flex;align-items:center;gap:4px}
.nav__tinta{position:absolute;left:0;top:50%;height:36px;width:0;margin-top:-18px;z-index:0;
  background:var(--sangre);border-radius:999px;opacity:0;pointer-events:none;
  box-shadow:0 10px 24px -10px var(--sangre);
  transition:transform .45s var(--curva),width .45s var(--curva),opacity .3s}
.nav__l{position:relative;z-index:1;font-family:var(--f-dato);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;padding:10px 15px;border-radius:999px;
  transition:color .3s}
.carrito{display:flex;align-items:center;gap:9px;border:2px solid var(--hueso);padding:10px 15px;
  border-radius:999px;font-family:var(--f-dato);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  transition:background-color .28s,color .28s,border-color .28s,box-shadow .28s}
.carrito:hover{background:var(--amarillo);border-color:var(--amarillo);color:var(--void);
  box-shadow:0 0 26px rgba(255,212,0,.4)}
.carrito b{background:var(--sangre);color:var(--hueso);min-width:21px;height:21px;display:grid;
  place-items:center;font-size:10px;border-radius:50%}
.carrito:hover b{background:var(--void)}
.ham{display:none;background:none;border:0;padding:11px;cursor:pointer;width:46px;height:46px}
.ham span{display:block;width:24px;height:2px;background:var(--hueso);margin:0 auto;
  transition:transform .35s var(--curva),opacity .2s}
.ham span+span{margin-top:6px}
.ham[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.ham[aria-expanded="true"] span:nth-child(2){opacity:0}
.ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.panel{position:fixed;inset:0;z-index:89;background:var(--sangre);display:grid;align-content:center;
  padding:var(--e7) var(--e3);clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .7s var(--curva)}
.panel.abierto{clip-path:circle(150% at calc(100% - 46px) 40px)}
.panel__wm{position:absolute;right:-16%;bottom:-14%;width:min(80vw,540px);z-index:0;
  opacity:.14;pointer-events:none;animation:girar 60s linear infinite}
.panel__lista{position:relative;z-index:2}
.panel a{display:flex;align-items:baseline;gap:18px;font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(32px,9.4vw,64px);line-height:1.14;padding:6px 0;color:var(--void);
  transition:transform .35s var(--curva),color .3s}
.panel a b{font-family:var(--f-dato);font-size:12px;font-weight:700;opacity:.5;
  letter-spacing:.1em}
.panel a:active{transform:translateX(16px);color:var(--hueso)}
.panel.abierto a{animation:entraLink .55s var(--curva) backwards}
.panel.abierto a:nth-child(1){animation-delay:.16s}
.panel.abierto a:nth-child(2){animation-delay:.22s}
.panel.abierto a:nth-child(3){animation-delay:.28s}
.panel.abierto a:nth-child(4){animation-delay:.34s}
.panel.abierto a:nth-child(5){animation-delay:.4s}
.panel.abierto a:nth-child(6){animation-delay:.46s}
@keyframes entraLink{from{opacity:0;transform:translate3d(0,30px,0)}}
.panel__pie{font-family:var(--f-dato);font-size:11px;color:rgba(8,7,10,.7);margin-top:var(--e5);
  letter-spacing:.14em;text-transform:uppercase}
@media(max-width:980px){.nav__lista{display:none}.ham{display:block}.nav{gap:var(--e2)}}
@media(min-width:981px){.panel{display:none}}
@media(max-width:560px){.cab__fila{height:66px}.logo svg{width:34px;height:34px}
  .logo__t{font-size:18px}.carrito{padding:8px 12px;font-size:10px;letter-spacing:.06em}
  .carrito b{min-width:18px;height:18px;font-size:9px}.ham{padding:8px;width:38px}}

/* ==========================================================================
   HERO
   Solo tres cosas: quien eres, que vendes y por donde se compra.
   La vitrina del daruma se arma con porcentajes, asi que la composicion
   es identica en escritorio y en celular, solo cambia de tamano.
   ========================================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:calc(78px + 4vh) 0 6vh}
.hero__rej{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:var(--e6);align-items:center;width:100%}
.sello{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--linea);
  background:rgba(255,255,255,.04);border-radius:999px;
  padding:9px 17px;font-family:var(--f-dato);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:min(var(--e4),3.4vh);color:#D8D2E4}
.sello i{width:9px;height:9px;background:var(--lima);display:block;border-radius:50%;
  box-shadow:0 0 12px var(--lima);animation:parpadeo 2s ease-in-out infinite}
@keyframes parpadeo{50%{opacity:.25;box-shadow:none}}
/* Lockup de marca arriba del titulo. Antes "Marvatoys" era una linea del h1
   y chocaba de nombre con la pastilla de marcas; ahora es su propio bloque. */
.marcaje{display:flex;align-items:center;gap:14px;margin-bottom:min(var(--e3),2.2vh)}
.marcaje span{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(17px,1.6vw,22px);
  letter-spacing:.22em;color:var(--sangre);line-height:1}
.marcaje i{display:block;height:2px;flex:1;max-width:80px;background:var(--sangre);opacity:.7}
.marcaje i:last-child{max-width:none;opacity:.25}
.hero h1{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,min(5.2vw,7.4vh),74px);line-height:.98;letter-spacing:-.01em}
.hero h1 .h1a{color:var(--hueso);font-size:.62em}
.hero h1 .h1b{color:var(--sangre);font-size:1.5em;line-height:.92;
  text-shadow:0 0 60px rgba(255,30,30,.45)}
.hero h1 .h1c{color:transparent;-webkit-text-stroke:1.6px var(--hueso);font-size:.62em}
.lin{display:block;overflow:hidden;padding-bottom:.05em}
.lin>i{display:block;font-style:normal;transform:translateY(108%);
  transition:transform .9s var(--curva)}
.cargada .lin>i{transform:none}
.cargada .lin:nth-child(2)>i{transition-delay:.09s}
.cargada .lin:nth-child(3)>i{transition-delay:.18s}
.hero__copy{font-size:16.5px;max-width:42ch;margin:min(var(--e4),3.2vh) 0 min(var(--e3),2.4vh);
  color:#C6C0D2;line-height:1.75}
.hero__copy b{color:var(--void);background:var(--amarillo);padding:2px 8px;font-weight:700;white-space:nowrap;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.acc{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:min(var(--e2),1.8vh)}
.confianza{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:min(var(--e4),3vh);
  font-family:var(--f-dato);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ceniza)}
.confianza li{display:flex;align-items:center;gap:7px}
.confianza li::before{content:'';width:6px;height:6px;background:var(--lima);
  border-radius:50%;display:inline-block;box-shadow:0 0 8px var(--lima)}

/* vitrina del daruma */
.vitrina{position:relative;display:grid;place-items:center;width:100%}
.vit__caja{position:relative;width:min(94%,440px);aspect-ratio:1;display:grid;place-items:center}
.vit__cono{position:absolute;inset:-8%;border-radius:50%;will-change:transform;
  background:conic-gradient(from 0deg,
    rgba(255,212,0,0) 0 54%,rgba(255,212,0,.2) 68%,
    rgba(255,30,30,.22) 78%,rgba(255,212,0,0) 90% 100%);
  animation:girar 28s linear infinite}
.vit__halo{position:absolute;inset:-10%;border-radius:50%;will-change:transform;
  background:radial-gradient(circle,rgba(255,30,30,.5) 0%,rgba(139,92,246,.2) 46%,transparent 68%);
  animation:respirar 6s ease-in-out infinite}
@keyframes respirar{50%{transform:scale(1.11);opacity:.78}}
.vit__aro{position:absolute;inset:0;will-change:transform;animation:girar 24s linear infinite}
.vit__aro--2{inset:8%;animation:girar 34s linear infinite reverse}
.vit__aro circle{fill:none;stroke-width:1.5}
@keyframes girar{to{transform:rotate(360deg)}}
.vit__texto{position:absolute;inset:-7%;will-change:transform;animation:girar 32s linear infinite}
.vit__texto text{font-family:var(--f-dato);font-size:22px;letter-spacing:.26em;
  fill:var(--ceniza);text-transform:uppercase}
.vit__piso{position:absolute;left:50%;bottom:5%;width:44%;height:7%;z-index:1;
  margin-left:-22%;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,30,30,.55),transparent 70%);
  animation:piso 6s ease-in-out infinite}
@keyframes piso{50%{transform:scale(.76);opacity:.5}}
.vit__fig{position:relative;z-index:3;width:60%;
  animation:flotar 6s ease-in-out infinite;will-change:transform}
@keyframes flotar{50%{transform:translate3d(0,-15px,0)}}
.vit__fig img{width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(255,30,30,.42))}
.vit__tag{position:absolute;top:5%;right:1%;z-index:5;
  font-family:var(--f-dato);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--void);background:var(--amarillo);
  padding:8px 12px;border-radius:3px;box-shadow:0 10px 24px rgba(255,212,0,.3);
  transform:rotate(-5deg)}
.vit__pie{font-family:var(--f-dato);font-size:10px;letter-spacing:.14em;color:var(--ceniza);
  text-align:center;margin-top:var(--e3);text-transform:uppercase;line-height:2}
.vit__pie b{color:var(--amarillo)}
@media(max-width:920px){
  .hero{min-height:auto;padding:104px 0 var(--e6)}
  .hero__rej{grid-template-columns:1fr;gap:var(--e5);justify-items:center;text-align:center}
  .hero__txt{display:flex;flex-direction:column;align-items:center;max-width:560px}
  .hero__copy{margin-left:auto;margin-right:auto}
  .acc,.confianza{justify-content:center}
  .vitrina{order:-1}
  .vit__caja{width:min(84%,380px)}
}

/* ==========================================================================
   MARQUESINA
   ========================================================================== */
.cinta{overflow:hidden;padding:14px 0;border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);background:rgba(255,255,255,.02)}
.cinta--roja{background:var(--sangre);border-color:var(--sangre);
  transform:rotate(-1.4deg) scale(1.05);position:relative;z-index:5}
.cinta__via{display:flex;width:max-content;will-change:transform;animation:correr 32s linear infinite}
.cinta--roja .cinta__via{animation-duration:24s}
.cinta__via em{font-style:normal;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(18px,2.4vw,30px);white-space:nowrap;display:flex;align-items:center;
  gap:26px;padding-right:26px;color:var(--hueso)}
.cinta--roja .cinta__via em{color:var(--void)}
.cinta__via em::after{content:'';width:11px;height:11px;background:var(--amarillo);
  transform:rotate(45deg);display:block}
.cinta--roja .cinta__via em::after{background:var(--void)}
@keyframes correr{to{transform:translate3d(-50%,0,0)}}

/* ==========================================================================
   BLOQUES
   ========================================================================== */
.bloque{position:relative;padding:var(--e7) 0}
.rotulo{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);
  margin-bottom:var(--e6);flex-wrap:wrap}
.rotulo h2{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,5.2vw,66px);line-height:1.02;letter-spacing:-.01em}
.rotulo h2 em{font-style:normal;color:var(--sangre)}
.rotulo h2 .am{color:var(--amarillo)}
.rotulo__d{font-family:var(--f-dato);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ceniza);text-align:right;line-height:2;padding-bottom:10px}
.rotulo::after{content:'';position:absolute;left:var(--e3);right:var(--e3);
  height:1px;background:linear-gradient(90deg,var(--sangre),transparent 60%);
  margin-top:76px}
.intro{color:var(--ceniza);max-width:60ch;margin:calc(var(--e6) * -1 + 14px) 0 var(--e5);
  font-size:15.5px;line-height:1.9}

/* Boton de calcomania: sombra dura de otra tinta, ligera rotacion y al
   pulsar se aplasta sobre su sombra. Nada de degradados. */
.btn{font-family:var(--f-dato);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:16px 26px;display:inline-flex;align-items:center;gap:12px;
  border:2px solid var(--void);border-radius:999px;cursor:pointer;position:relative;
  transform:rotate(-1.6deg);
  transition:transform .3s var(--curva),box-shadow .3s var(--curva),
             background-color .3s,color .3s,border-color .3s}
.btn>span{position:relative;z-index:2}
.btn i{font-style:normal;display:inline-block;transition:transform .35s var(--curva)}
.btn:hover i,.btn:active i{transform:translate3d(6px,0,0)}
.btn--rojo{background:var(--sangre);color:var(--hueso);box-shadow:6px 6px 0 var(--amarillo)}
.btn--rojo:hover,.btn--rojo:active{background:var(--amarillo);color:var(--void);
  box-shadow:2px 2px 0 var(--hueso);transform:rotate(0deg) translate3d(4px,4px,0)}
.btn--hueco{background:var(--hueso);color:var(--void);border-color:var(--void);
  box-shadow:6px 6px 0 var(--sangre);transform:rotate(1.4deg)}
.btn--hueco:hover,.btn--hueco:active{background:var(--void);color:var(--hueso);
  border-color:var(--hueso);box-shadow:2px 2px 0 var(--amarillo);
  transform:rotate(0deg) translate3d(4px,4px,0)}

/* Tira de piezas recien llegadas: cada miniatura lleva su blob de tinta
   desfasado detras, igual que las tarjetas de la rejilla. */
.tira{display:flex;align-items:center;gap:16px;margin-top:min(var(--e4),3.2vh);flex-wrap:wrap}
.tira__k{font-family:var(--f-dato);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ceniza);max-width:78px;line-height:1.7}
.tira__p{position:relative;width:80px;height:80px;flex:0 0 auto;display:block;
  transition:transform .4s var(--curva)}
.tira__p::before{content:'';position:absolute;inset:6%;background:var(--ac);
  border-radius:var(--blob-a);transform:rotate(-6deg) translate3d(7px,7px,0);
  transition:transform .45s var(--curva)}
.tira__p span{position:absolute;inset:6%;overflow:hidden;border-radius:var(--blob-b);
  background:#14131B;box-shadow:0 12px 24px -12px rgba(0,0,0,.9)}
.tira__p img{width:100%;height:100%;object-fit:cover}
.tira__p:nth-child(even) span{border-radius:var(--blob-c)}
.tira__p:hover{transform:translate3d(0,-8px,0)}
.tira__p:hover::before{transform:rotate(8deg) translate3d(-9px,8px,0)}
.tira__mas{font-family:var(--f-dato);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amarillo);border-bottom:1px solid currentColor;
  padding-bottom:3px;white-space:nowrap}
@media(max-width:920px){.tira{justify-content:center}}

.pausa:not(.viendo) *{animation-play-state:paused !important}
.rev{opacity:0;transform:translate3d(0,42px,0);
  transition:opacity .8s var(--curva),transform .8s var(--curva)}
.rev.dentro{opacity:1;transform:none}

/* ==========================================================================
   MANIFIESTO
   ========================================================================== */
.manif{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2)}
.manif__i{position:relative;padding:var(--e4);overflow:hidden;border-radius:18px;
  border:1px solid var(--linea);background:#14131B;
  transition:transform .5s var(--curva),border-color .4s,box-shadow .5s}
.manif__i::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--curva)}
.manif__i.dentro::after{transform:none}
.manif__i:hover,.manif__i.activa{transform:translate3d(0,-10px,0);border-color:var(--ac);
  box-shadow:0 16px 36px -16px var(--ac)}
.manif__n{font-family:var(--f-dato);font-size:10px;letter-spacing:.22em;color:var(--ac);
  text-transform:uppercase}
.manif__v{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(28px,3.4vw,46px);line-height:1.06;margin:var(--e3) 0 var(--e2)}
.manif__d{font-size:15px;color:#BDB6CA;max-width:34ch;line-height:1.85}
.manif__c{font-family:var(--f-display);font-size:clamp(42px,5.4vw,68px);line-height:1;
  color:var(--ac);margin-top:var(--e4)}
.manif__cd{font-family:var(--f-dato);font-size:10px;letter-spacing:.15em;color:var(--ceniza);
  text-transform:uppercase;line-height:1.9;margin-top:6px}
@media(max-width:900px){.manif{grid-template-columns:1fr}}

/* ==========================================================================
   PIEZAS SOBRE BLOBS
   Sin caja: la foto se recorta en forma organica y detras asoma un blob del
   color de la categoria. En tactil, .activa hace lo mismo que :hover.
   ========================================================================== */
.rej-p{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e5) var(--e3)}
@media(max-width:1080px){.rej-p{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.rej-p{grid-template-columns:repeat(2,1fr);gap:var(--e4) var(--e3)}}
@media(max-width:420px){.rej-p{gap:var(--e4) var(--e2)}}

.pz{position:relative;display:flex;flex-direction:column;text-align:center;contain:layout}
.pz__vit{position:relative;display:block;aspect-ratio:1;margin-bottom:var(--e3)}
/* Cuatro capas: resplandor quieto, blob de tinta desfasado (el mal registro
   de la risografia), la foto recortada en la misma forma y un aro punteado
   que solo gira cuando la pieza esta activa. La foto va a cover: la imagen
   cuadrada llena el blob y ya no quedan esquinas ni fondo suelto. */
.pz__aura{position:absolute;inset:4%;z-index:0;border-radius:50%;background:var(--ac);
  opacity:.14;transition:opacity .5s,transform .6s var(--curva)}
.pz__blob{position:absolute;inset:8%;z-index:1;background:var(--ac);
  border-radius:var(--blob-a);opacity:.95;
  transform:rotate(-5deg) translate3d(9px,9px,0);
  animation:morfa 15s ease-in-out infinite;will-change:transform;
  transition:transform .55s var(--curva)}
.pz__foto{position:absolute;inset:8%;z-index:2;overflow:hidden;background:#0E0D13;
  border-radius:var(--blob-a);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.95);
  transition:transform .55s var(--curva),border-radius .8s var(--curva)}
.pz__foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--curva),filter .4s}
.pz__err{position:absolute;inset:0;z-index:2;display:none;place-items:center;padding:16%;
  font-family:var(--f-dato);font-size:10.5px;line-height:1.75;color:var(--hueso);
  text-align:center;text-transform:uppercase;letter-spacing:.06em}
.pz--sinimg .pz__err{display:grid}
.pz--sinimg .pz__foto{background:linear-gradient(150deg,var(--ac),#0E0D13 78%)}
.pz__anillo{position:absolute;inset:1%;z-index:3;pointer-events:none;
  animation:girar 24s linear infinite;animation-play-state:paused}
.pz__anillo circle{fill:none;stroke:var(--ac);stroke-width:1;stroke-dasharray:2 10;opacity:.5}
.pz:hover .pz__anillo,.pz.activa .pz__anillo{animation-play-state:running}
.pz__fol{position:absolute;top:0;left:1%;z-index:5;font-family:var(--f-dato);font-size:9.5px;
  letter-spacing:.2em;color:var(--ceniza)}
.pz__tag{position:absolute;top:3%;right:0;z-index:5;font-family:var(--f-dato);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--void);background:var(--ac);
  padding:6px 12px;border-radius:999px;font-weight:700;transform:rotate(4deg)}
.pz__ver{position:absolute;left:50%;bottom:4%;z-index:6;
  font-family:var(--f-dato);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--void);background:var(--amarillo);
  padding:11px 20px;border-radius:999px;white-space:nowrap;
  box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 0 2px rgba(8,7,10,.85);
  transform:translate3d(-50%,26px,0);opacity:0;
  transition:transform .45s var(--curva),opacity .3s}
.pz:hover .pz__ver,.pz.activa .pz__ver{transform:translate3d(-50%,0,0);opacity:1}
.pz:hover .pz__blob,.pz.activa .pz__blob{transform:rotate(7deg) translate3d(-14px,11px,0) scale(1.02)}
.pz:hover .pz__foto,.pz.activa .pz__foto{transform:translate3d(0,-10px,0);
  border-radius:var(--blob-c)}
.pz:hover .pz__foto img,.pz.activa .pz__foto img{transform:scale(1.07)}
.pz:hover .pz__aura,.pz.activa .pz__aura{opacity:.42;transform:scale(1.12)}
.pz--fuera .pz__foto img{filter:grayscale(1);opacity:.4}
.pz--fuera .pz__blob{opacity:.32}
.pz__info{display:flex;flex-direction:column;flex:1;align-items:center;gap:9px}
.pz__cat{font-family:var(--f-dato);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ac)}
.pz--fuera .pz__cat{color:var(--ceniza)}
.pz__n{font-family:var(--f-display);text-transform:uppercase;font-size:16.5px;line-height:1.22;
  letter-spacing:.01em;flex:1;max-width:22ch}
.pz__pie{display:flex;align-items:center;justify-content:center;gap:var(--e2);flex-wrap:wrap;
  margin-top:4px}
.pz__precio{font-family:var(--f-dato);font-size:17px;font-weight:700}
.pz__precio i{font-size:9.5px;font-style:normal;color:var(--ceniza);margin-left:4px}
.pz__acc{font-family:var(--f-dato);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--amarillo);color:var(--void);border:0;
  padding:12px 18px;border-radius:999px;cursor:pointer;
  transition:background-color .25s,transform .2s,box-shadow .3s}
.pz__acc:hover{background:var(--hueso);transform:translate3d(0,-2px,0);
  box-shadow:0 10px 22px rgba(255,212,0,.28)}
.pz__acc[disabled]{background:var(--humo);color:var(--ceniza);cursor:not-allowed;transform:none}
.pz__acc.hecho{background:var(--lima);color:var(--void)}
.mas{margin-top:var(--e6);display:flex;justify-content:center}

/* ==========================================================================
   EL CATALOGO
   Banda propia: rayas que corren, dos marquesinas de titulo en direcciones
   opuestas y ocho blobs que respiran con retardos distintos.
   ========================================================================== */
.cat{position:relative;overflow:hidden;padding:var(--e7) 0;
  background:linear-gradient(180deg,transparent,rgba(255,30,30,.07) 45%,transparent)}
.cat__rayas{position:absolute;inset:-20%;z-index:0;opacity:.1;will-change:transform;
  background:repeating-linear-gradient(-45deg,var(--sangre) 0 3px,transparent 3px 29px);
  animation:rayas 9s linear infinite}
@keyframes rayas{to{transform:translate3d(41.01px,0,0)}}
.cat__mq{position:absolute;left:0;right:0;z-index:0;overflow:hidden;pointer-events:none}
.cat__mq--a{top:3%}
.cat__mq--b{bottom:3%}
.cat__mq em{font-style:normal;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(58px,12vw,168px);line-height:1;white-space:nowrap;display:block;
  width:max-content;color:transparent;-webkit-text-stroke:1.4px rgba(245,241,232,.1);
  will-change:transform;animation:correr 38s linear infinite}
.cat__mq--b em{animation-duration:46s;animation-direction:reverse;
  -webkit-text-stroke-color:rgba(255,30,30,.16)}
.cat .env{position:relative;z-index:2}
.cat__tit{text-align:center;margin-bottom:var(--e6)}
.cat__tit h2{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(38px,7vw,92px);line-height:1;letter-spacing:-.02em}
.cat__tit h2 em{font-style:normal;color:var(--sangre)}
.cat__tit p{font-family:var(--f-dato);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ceniza);margin:var(--e2) 0 0}
/* Adornos en SVG que marcan la seccion: estrella riso detras del titulo,
   destello, aro punteado y flecha manuscrita hacia la rejilla. */
.cat__estrella{position:absolute;left:50%;top:2%;width:min(56vw,460px);
  margin-left:min(-28vw,-230px);z-index:0;opacity:.5;pointer-events:none;
  animation:girar 52s linear infinite}
.cat__estrella path{fill:none;stroke:var(--sangre);stroke-width:1.2;opacity:.55}
.cat__deco{position:absolute;z-index:1;pointer-events:none}
.cat__deco--1{top:14%;left:2%;width:clamp(58px,6.4vw,104px);
  animation:flotar 9s ease-in-out infinite}
.cat__deco--2{top:30%;right:2.5%;width:clamp(62px,7vw,118px);
  animation:girar 30s linear infinite}
.cat__deco--3{bottom:14%;left:5%;width:clamp(74px,8.4vw,140px);
  animation:flotar 12s ease-in-out infinite reverse}
.cat__deco--1 path{fill:var(--amarillo)}
.cat__deco--2 circle{fill:none;stroke:var(--cian);stroke-width:1.4;stroke-dasharray:4 12}
.cat__deco--3 path{fill:none;stroke:var(--magenta);stroke-width:3;stroke-linecap:round}
@media(max-width:900px){.cat__deco--1,.cat__deco--3{display:none}}

/* Cada seccion es un blob de verdad en SVG. El contenido va centrado dentro
   del blob, no en una esquina, y por eso el texto ya no se sale al activarse. */
.stk{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3)}
@media(max-width:1000px){.stk{grid-template-columns:repeat(2,1fr)}
  .stk a{padding:var(--e4) var(--e3);min-height:210px}}
@media(max-width:420px){.stk{grid-template-columns:1fr}}
.stk a{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;min-height:248px;
  padding:var(--e5) var(--e4);isolation:isolate;
  transition:transform .5s var(--curva)}
.stk__f{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  animation:bailar 16s ease-in-out infinite;will-change:transform}
@keyframes bailar{0%,100%{transform:rotate(-2.6deg) scale(1)}
  50%{transform:rotate(2.6deg) scale(1.05)}}
.stk a:nth-child(2) .stk__f{animation-delay:-2.4s}
.stk a:nth-child(3) .stk__f{animation-delay:-4.8s}
.stk a:nth-child(4) .stk__f{animation-delay:-7.2s}
.stk a:nth-child(5) .stk__f{animation-delay:-9.6s}
.stk a:nth-child(6) .stk__f{animation-delay:-12s}
.stk a:nth-child(7) .stk__f{animation-delay:-14.4s}
.stk a:nth-child(8) .stk__f{animation-delay:-1.2s}
.stk__f .relleno{fill:var(--ac);opacity:.17;transition:opacity .45s}
.stk__f .borde{fill:none;stroke:var(--ac);stroke-width:1.6;opacity:.7;
  vector-effect:non-scaling-stroke;transition:opacity .45s}
.stk__k{position:relative;z-index:2;font-family:var(--f-dato);font-size:10px;
  letter-spacing:.24em;color:var(--ac);transition:color .35s}
.stk__c{position:relative;z-index:2;font-family:var(--f-display);
  font-size:clamp(42px,5.2vw,70px);line-height:1;color:var(--hueso);margin:10px 0 2px;
  transition:color .35s}
.stk__n{position:relative;z-index:2;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(17px,1.8vw,22px);line-height:1.16;max-width:15ch;transition:color .35s}
.stk__p{position:relative;z-index:2;font-family:var(--f-dato);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza);margin-top:9px;
  transition:color .35s}
.stk a:hover,.stk a.activa{transform:translate3d(0,-12px,0)}
.stk a:hover .stk__f .relleno,.stk a.activa .stk__f .relleno{opacity:1}
.stk a:hover .stk__f .borde,.stk a.activa .stk__f .borde{opacity:0}
.stk a:hover .stk__k,.stk a:hover .stk__c,.stk a:hover .stk__n,.stk a:hover .stk__p,
.stk a.activa .stk__k,.stk a.activa .stk__c,.stk a.activa .stk__n,.stk a.activa .stk__p{
  color:var(--void)}
.cat__mas{margin-top:var(--e6);display:flex;justify-content:center}

/* ==========================================================================
   EXPOS
   ========================================================================== */
.placas{display:grid;gap:var(--e2)}
.placa{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border:1px solid var(--linea);overflow:hidden;border-radius:20px;background:rgba(17,16,23,.72);
  transition:border-color .45s,box-shadow .5s,transform .5s var(--curva)}
.placa:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.placa:nth-child(even) .placa__img{order:2}
.placa:hover,.placa.activa{border-color:var(--ac);box-shadow:0 18px 40px -20px var(--ac);
  transform:translate3d(0,-6px,0)}
.placa__img{position:relative;overflow:hidden;background:var(--ac);min-height:300px}
.placa__img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  filter:grayscale(1) contrast(1.25);opacity:.72;
  transition:transform .8s var(--curva),filter .5s,opacity .4s}
.placa:hover .placa__img img,.placa.activa .placa__img img{transform:scale(1.07);
  filter:none;opacity:1}
.placa__cifra{position:absolute;z-index:2;right:16px;bottom:2px;font-family:var(--f-display);
  font-size:clamp(60px,8vw,116px);line-height:1;color:rgba(8,7,10,.42);
  transition:color .5s,transform .6s var(--curva)}
.placa:hover .placa__cifra,.placa.activa .placa__cifra{color:var(--amarillo);
  transform:translate3d(0,-8px,0)}
.placa__txt{padding:var(--e6) var(--e5);display:flex;flex-direction:column;justify-content:center}
.placa__meta{font-family:var(--f-dato);font-size:10px;letter-spacing:.2em;color:var(--ac);
  text-transform:uppercase}
.placa__n{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(25px,3.4vw,44px);line-height:1.04;margin:var(--e3) 0 var(--e2)}
.placa__d{color:var(--ceniza);font-size:15px;max-width:46ch;margin-bottom:var(--e4);line-height:1.9}
.placa__ir{font-family:var(--f-dato);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:11px;color:var(--amarillo)}
.placa__ir i{font-style:normal;display:inline-block;animation:empuja 1.8s ease-in-out infinite}
@keyframes empuja{50%{transform:translate3d(7px,0,0)}}
@media(max-width:880px){
  .placa,.placa:nth-child(even){grid-template-columns:1fr}
  .placa:nth-child(even) .placa__img{order:0}
  .placa__img{min-height:230px}
  .placa__txt{padding:var(--e5) var(--e3)}
}

/* ==========================================================================
   MARCAS
   ========================================================================== */
/* Marcas: misma gramatica que las tarjetas de producto, o sea placa oscura
   con el blob de tinta desfasado detras. Medidas fijas en px: dentro de un
   flex con width max-content, un padding en porcentaje se resuelve contra el
   ancho total de la hilera y revienta la ficha. */
.marq{position:relative;display:grid;gap:var(--e2);overflow:hidden;padding:var(--e2) 0}
.marq::before,.marq::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:3;
  pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,var(--void),rgba(8,7,10,0))}
.marq::after{right:0;background:linear-gradient(270deg,var(--void),rgba(8,7,10,0))}
.marq__via{display:flex;align-items:center;width:max-content;gap:var(--e3);
  will-change:transform;animation:correr 54s linear infinite}
.marq__via--b{animation-duration:66s;animation-direction:reverse}
.marq:hover .marq__via{animation-play-state:paused}
.mrc{position:relative;flex:0 0 auto;width:252px;height:100px;display:block;
  transition:transform .45s var(--curva)}
.mrc__t{position:absolute;inset:0;z-index:0;background:var(--ac);opacity:.9;
  border-radius:var(--blob-a);transform:rotate(-3deg) translate3d(9px,7px,0);
  animation:morfa 16s ease-in-out infinite;will-change:transform;
  transition:transform .5s var(--curva),opacity .4s}
.mrc:nth-child(2n) .mrc__t{animation-delay:-4.1s}
.mrc:nth-child(3n) .mrc__t{animation-delay:-8.2s}
.mrc:nth-child(5n) .mrc__t{animation-delay:-12.3s}
.mrc__p{position:absolute;inset:0;z-index:1;display:flex;align-items:center;gap:15px;
  padding:0 18px;border-radius:18px;background:#12111A;border:1px solid var(--linea);
  box-shadow:0 16px 30px -18px rgba(0,0,0,.95);
  transition:transform .5s var(--curva),border-color .4s}
.mrc__c{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--ac);color:var(--void);font-family:var(--f-display);font-size:18px;
  line-height:1;transition:transform .5s var(--curva)}
.mrc__d{min-width:0}
.mrc__n{display:block;font-family:var(--f-display);text-transform:uppercase;font-size:16px;
  line-height:1.08;letter-spacing:.01em;color:var(--hueso)}
.mrc__e{display:block;font-style:normal;font-family:var(--f-dato);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ceniza);margin-top:5px}
.mrc:hover .mrc__t{transform:rotate(4deg) translate3d(-11px,8px,0);opacity:1}
.mrc:hover .mrc__p{transform:translate3d(0,-7px,0);border-color:var(--ac)}
.mrc:hover .mrc__c{transform:rotate(-8deg) scale(1.06)}
@media(max-width:560px){.mrc{width:222px;height:94px}.mrc__n{font-size:15px}}

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
/* Quienes somos entra en una sola pantalla: texto, daruma y ficha en tres
   columnas, con el cuerpo comprimido para no obligar a hacer scroll. */
.nos-b{padding:var(--e5) 0}
.nos-b .rotulo{margin-bottom:var(--e4)}
.nos-b .rotulo::after{display:none}
.nos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr) minmax(0,.9fr);
  gap:var(--e4);align-items:center}
@media(max-width:1040px){
  .nos{grid-template-columns:1fr 1fr}
  .nos__fig{grid-column:1/-1;order:3}
}
@media(max-width:820px){.nos{grid-template-columns:1fr;gap:var(--e5)}
  .nos__fig{grid-column:auto;order:0}}
.nos h3{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(24px,2.9vw,38px);line-height:1.04;margin-bottom:var(--e3)}
.nos p{color:var(--ceniza);font-size:14.5px;margin:0 0 13px;max-width:46ch;line-height:1.8}
.nos p strong{color:var(--hueso)}
.kanji{display:flex;gap:16px;align-items:center;background:var(--sangre);
  padding:14px 18px;margin-top:var(--e3);border-radius:16px;
  box-shadow:0 20px 44px -26px var(--sangre)}
.kanji__c{font-family:var(--f-jp);font-weight:900;font-size:38px;line-height:1;color:var(--hueso)}
.kanji__t{font-family:var(--f-dato);font-size:10.5px;line-height:1.9;color:#FFF}
.kanji__t b{color:var(--amarillo);letter-spacing:.14em}
.nos__fig{position:relative;display:grid;place-items:center}
.nos__orbe{position:relative;width:min(100%,290px);aspect-ratio:1;display:grid;place-items:center}
.nos__halo{position:absolute;inset:-6%;border-radius:50%;will-change:transform;
  background:radial-gradient(circle,rgba(255,30,30,.42),rgba(139,92,246,.16) 48%,transparent 70%);
  animation:respirar 7s ease-in-out infinite}
.nos__aro{position:absolute;inset:0;will-change:transform;animation:girar 42s linear infinite}
.nos__aro circle{fill:none;stroke-width:1.4}
.nos__fig img{position:relative;z-index:2;width:64%;height:auto;
  filter:drop-shadow(0 18px 30px rgba(255,30,30,.4));
  animation:flotar 7s ease-in-out infinite;will-change:transform}
.nos__pie{font-family:var(--f-dato);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ceniza);text-align:center;margin-top:14px;line-height:1.9}
.nos__pie b{color:var(--amarillo)}
.ficha{border:1px solid var(--linea);background:rgba(17,16,23,.7);border-radius:16px;overflow:hidden}
.ficha__f{display:flex;justify-content:space-between;gap:var(--e2);padding:12px var(--e3);
  border-bottom:1px solid var(--linea);font-family:var(--f-dato);font-size:12px;line-height:1.5}
.ficha__f:last-child{border-bottom:0}
.ficha__k{color:var(--ceniza);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ficha__v{font-weight:700;text-align:right;letter-spacing:.02em;color:var(--hueso)}
.ficha__v a:hover{color:var(--amarillo)}
.legal{border:1px solid var(--sangre);padding:15px 18px;margin-top:14px;border-radius:16px;
  font-family:var(--f-dato);font-size:10.5px;line-height:1.85;color:#BDB6CA;
  background:rgba(255,30,30,.05)}
.legal b{display:block;color:#FF5A46;letter-spacing:.2em;margin-bottom:8px;font-size:10px}

/* ==========================================================================
   DROPS
   ========================================================================== */
.drops{position:relative;padding:var(--e7) 0;overflow:hidden;
  background:linear-gradient(120deg,var(--sangre-2),var(--sangre) 45%,#7A0AA8 130%)}
.drops::before{content:'';position:absolute;inset:-25%;will-change:transform;
  background:conic-gradient(from 0deg,transparent 0 42%,rgba(255,212,0,.16) 50%,transparent 58% 100%);
  animation:girar 18s linear infinite}
.drops__rej{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e6);align-items:center}
@media(max-width:880px){.drops__rej{grid-template-columns:1fr;gap:var(--e5)}}
.drops h2{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(32px,5.2vw,70px);line-height:1.04}
.drops h2 em{font-style:normal;background:var(--amarillo);color:var(--void);padding:0 12px;
  display:inline-block}
.drops p{max-width:44ch;margin:var(--e3) 0 0;color:rgba(245,241,232,.9);font-size:15.5px;line-height:1.9}
.forma{display:flex;gap:0;flex-wrap:wrap}
.forma input{flex:1;min-width:210px;background:rgba(8,7,10,.85);border:2px solid var(--void);
  border-radius:999px 0 0 999px;
  color:var(--hueso);font-family:var(--f-dato);font-size:13px;padding:19px var(--e3)}
.forma input::placeholder{color:#6E6878}
.forma input:focus{outline:none;border-color:var(--amarillo)}
.forma button{background:var(--amarillo);border:2px solid var(--amarillo);color:var(--void);
  border-radius:0 999px 999px 0;
  font-family:var(--f-dato);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:19px var(--e5);cursor:pointer;
  transition:background-color .25s,border-color .25s}
.forma button:hover{background:var(--hueso);border-color:var(--hueso)}
@media(max-width:520px){
  .forma input{border-radius:999px;min-width:100%}
  .forma button{border-radius:999px;width:100%;margin-top:10px}
}
.forma__nota{font-family:var(--f-dato);font-size:10.5px;color:rgba(8,7,10,.6);margin-top:14px;
  line-height:1.9}
.forma__ok{font-family:var(--f-dato);font-size:12px;color:var(--void);background:var(--amarillo);
  display:inline-block;padding:10px 14px;border-radius:999px;margin-top:14px}
.forma__ok[hidden]{display:none}

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{padding:var(--e6) 0 var(--e4);border-top:1px solid var(--linea)}
.pie__rej{display:flex;justify-content:space-between;gap:var(--e5);flex-wrap:wrap;margin-bottom:var(--e6)}
.pie__col h3{font-family:var(--f-dato);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:18px;color:var(--sangre);font-weight:700}
.pie__col li{margin-bottom:11px;font-size:14px;color:var(--ceniza)}
.pie__col a:hover{color:var(--amarillo)}
.pie__base{border-top:1px solid var(--linea);padding-top:var(--e3);display:flex;
  justify-content:space-between;gap:var(--e2);flex-wrap:wrap;
  font-family:var(--f-dato);font-size:10.5px;color:#59526A;letter-spacing:.12em;text-transform:uppercase}

.wa{position:fixed;right:22px;bottom:22px;z-index:88;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.5);
  transition:transform .35s var(--curva)}
.wa::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:onda 2.6s ease-out infinite}
@keyframes onda{to{transform:scale(1.9);opacity:0}}
.wa:hover{transform:scale(1.1) rotate(8deg)}
.wa svg{width:30px;height:30px;fill:#08070A;position:relative}

/* ==========================================================================
   PRESUPUESTO DE PINTADO
   Las secciones de abajo no se pintan hasta que se acercan. En equipos
   viejos esto solo vale oro: baja el costo del primer cuadro y del scroll.
   ========================================================================== */
#expos,#marcas,.pie{content-visibility:auto;contain-intrinsic-size:auto 1400px}
#nosotros{content-visibility:auto;contain-intrinsic-size:auto 760px}

@media(max-width:760px){
  .fondo__rejilla,#motas{display:none}
  .fondo__t{opacity:.55}
  .t3{display:none}
  .fondo__grano{opacity:.26}
  .cat__rayas{opacity:.07}
}

/* Modo ligero: se activa solo cuando el equipo no llega a 45 cuadros.
   Se apaga el ambiente, nunca el cursor ni la navegacion. */
html.ligero .fondo__t,
html.ligero .fondo__rejilla,
html.ligero .cat__rayas,
html.ligero .vit__cono,
html.ligero .drops::before,
html.ligero .pz__blob,
html.ligero .stk__f,
html.ligero .cat__estrella,
html.ligero .cat__deco,
html.ligero .panel__wm,
html.ligero .wa::before{animation:none}
html.ligero .fondo__grano{display:none}
html.ligero #motas{display:none}
html.ligero .vit__halo{animation-duration:9s}
html.ligero .cinta__via{animation-duration:52s}
html.ligero .cat__mq em{animation-duration:70s}
html.ligero .marq__via{animation-duration:96s}
html.ligero .placa__img img{filter:none;opacity:.9}



/* ==========================================================================
   PRECIOS EN LA LANDING
   Pegar al FINAL de assets/landing.css.

   El plugin de divisas arma el precio asi:

     .pz__precio
       ├ .marva-currency-pair
           ├ .marva-usd-price      -> $ 135
           └ .marva-mxn-approx     -> ~ $2,301 MXN <small>aprox.</small>

   Los dos van inline, por eso se pegaban en una sola linea. Aqui se
   apilan igual que en la tienda.
   ========================================================================== */

.pz .pz__precio{
  display:block;
  line-height:1.15;
  text-align:center;
  font-family:var(--f-dato);
}

/* El envoltorio del plugin es quien manda: aqui se parte en dos renglones */
.pz .pz__precio .marva-currency-pair{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}

/* Renglon 1: el importe en dolares */
.pz .pz__precio .marva-usd-price{
  display:block;
  font-family:var(--f-dato);
  font-size:19px;
  font-weight:700;
  color:var(--hueso);
  white-space:nowrap;
}
.pz .pz__precio .marva-usd-price .amount,
.pz .pz__precio .marva-usd-price bdi{
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
}

/* Renglon 2: el aproximado en pesos, mas chico y apagado */
.pz .pz__precio .marva-mxn-approx{
  display:block;
  font-family:var(--f-dato);
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--amarillo);
  opacity:.9;
  white-space:nowrap;
}
.pz .pz__precio .marva-mxn-approx small{
  font-size:inherit;
  opacity:.8;
}

/* Rebajas: tachado arriba chico, precio nuevo abajo en amarillo */
.pz .pz__precio del,
.pz .pz__precio ins{display:block;text-decoration:none}

.pz .pz__precio del{
  opacity:.45;
  margin-bottom:2px;
}
.pz .pz__precio del .marva-usd-price{
  font-size:12px;
  font-weight:400;
  text-decoration:line-through;
}
.pz .pz__precio del .marva-mxn-approx{display:none}

.pz .pz__precio ins .marva-usd-price{color:var(--amarillo)}

/* El pie de la tarjeta deja de pelearse por el espacio horizontal */
.pz .pz__pie{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* Mismo precio dentro del carrusel de expos, que en index.php usa <em> */
.xpo__cel em .marva-currency-pair,
.placa em .marva-currency-pair{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  font-style:normal;
}
.xpo__cel em .marva-mxn-approx,
.placa em .marva-mxn-approx{
  font-size:10px;
  font-weight:400;
  opacity:.62;
}

@media (max-width:640px){
  .pz .pz__precio .marva-usd-price{font-size:15px}
  .pz .pz__precio .marva-mxn-approx{font-size:10px}
  .pz .pz__pie{gap:9px}
}

/* ==========================================================================
   MARVATOYS - MENU MOVIL UNIFICADO  (v3, solo CSS)

   Mismo diseno en la landing (.panel) y en la tienda (.mv-panel).
   No necesita JavaScript. El cierre sigue siendo la hamburguesa de la
   cabecera, que ya se convierte en X sola: por eso el panel NO la tapa.

   Si pegaste una version anterior de este bloque, borrala antes.
   ========================================================================== */

body.marva-panel-abierto{overflow:hidden}

/* --------------------------------------------------------------------------
   1. El panel
      No se toca el apilado: cada panel conserva el z-index que ya tenia,
      asi la cabecera con su X queda encima y sigue cerrando el menu.
      En la tienda se pliega la cinta superior mientras esta abierto,
      que era lo que se asomaba encima del panel.
   -------------------------------------------------------------------------- */
.panel.panel,
.mv-panel.mv-panel{
  position:fixed;
  inset:0;
  background:#0B0A0F;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-content:normal;
  overflow:hidden;                  /* sin scroll: todo tiene que caber */
  padding:clamp(78px,11vh,96px) clamp(22px,6vw,44px) clamp(18px,3vh,30px);
}

/* --- TIENDA: el panel tapa la cabecera completa ---
   El panel sube por encima de la barra fija (que esta en 9000).

   OJO con el apilado: ".mv-fijo" tiene z-index propio, o sea que crea
   un contexto de apilado y nada de lo que vive dentro puede salir de el.
   Subirle el z-index solo a la hamburguesa no sirve de nada. Por eso lo
   que sube es el contenedor entero, y adentro se apaga todo menos la X.
   Asi el panel tapa la cabecera y el cierre sigue funcionando sin JS. */
.mv-panel.mv-panel{z-index:9500}

body.marva-panel-abierto .mv-fijo{
  z-index:9600;
  pointer-events:none;              /* solo la X recibe toques */
  transform:none;                   /* que no se esconda al scrollear */
}

/* La barra se vuelve invisible: queda el panel de fondo */
body.marva-panel-abierto .mv-cab,
body.marva-panel-abierto .mv-cab__caja{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Se apaga todo lo de la cabecera menos el boton de cerrar */
body.marva-panel-abierto .mv-logo,
body.marva-panel-abierto .mv-carrito,
body.marva-panel-abierto .mv-buscar,
body.marva-panel-abierto .mv-nav__lista,
body.marva-panel-abierto .mv-cab__progreso,
body.marva-panel-abierto .mv-techo{
  opacity:0;
  pointer-events:none;
}

/* La X: unica cosa viva por encima del panel */
body.marva-panel-abierto .mv-ham{
  pointer-events:auto;
  opacity:1;
}

/* Con el panel abierto la cinta de anuncios se pliega */
body.marva-panel-abierto .mv-techo{height:0}

/* Resplandores de fondo, en lugar del rojo pleno que cansaba la vista */
.panel.panel::before,
.mv-panel.mv-panel::before{
  content:"";
  position:absolute;
  left:-30%;
  top:-25%;
  width:150%;
  height:85%;
  background:radial-gradient(ellipse at 30% 30%,rgba(255,30,30,.34),transparent 62%);
  pointer-events:none;
  z-index:0;
}
.panel.panel::after,
.mv-panel.mv-panel::after{
  content:"";
  position:absolute;
  right:-40%;
  bottom:-30%;
  width:130%;
  height:70%;
  background:radial-gradient(ellipse at 70% 70%,rgba(139,92,246,.2),transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* La marca de agua se apaga: ya hay fondo */
.panel.panel .panel__wm,
.mv-panel.mv-panel .mv-panel__wm{
  right:-24%;
  bottom:-16%;
  width:min(58vw,320px);
  opacity:.05;
}

/* --------------------------------------------------------------------------
   2. Lista principal
   -------------------------------------------------------------------------- */
.panel.panel .panel__lista,
.mv-panel.mv-panel .mv-panel__lista{
  position:relative;
  z-index:2;
  width:100%;
  max-width:620px;
}

.panel.panel .panel__lista > a,
.mv-panel.mv-panel .mv-panel__lista > a{
  display:flex;
  align-items:baseline;
  gap:13px;
  padding:clamp(3px,.7vh,7px) 0;
  color:#F5F1E8;
  text-decoration:none;
  font-family:var(--f-display,'Anton',sans-serif);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(23px,5.2vh,36px);
  line-height:1.14;
  letter-spacing:-.005em;
  transition:transform .3s cubic-bezier(.16,1,.3,1),color .25s;
}

.panel.panel .panel__lista > a b,
.mv-panel.mv-panel .mv-panel__lista > a b{
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  color:#FF1E1E;
  flex:0 0 auto;
  opacity:.9;
}

.panel.panel .panel__lista > a em,
.mv-panel.mv-panel .mv-panel__lista > a em{
  font-style:normal;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  text-transform:inherit;
}

.panel.panel .panel__lista > a:hover,
.panel.panel .panel__lista > a:active,
.mv-panel.mv-panel .mv-panel__lista > a:hover,
.mv-panel.mv-panel .mv-panel__lista > a:active{
  color:#FF1E1E;
  transform:translateX(9px);
}

/* --------------------------------------------------------------------------
   3. Bloque "Mas"
      El CSS viejo de la landing usa ".panel__lista a", que pesa mas que
      ".panel__sub-l" y por eso estos enlaces salian negros y enormes.
      Repetir la clase del panel gana esa pelea sin usar !important.
   -------------------------------------------------------------------------- */
.panel.panel .panel__sub,
.mv-panel.mv-panel .mv-panel__sub{
  position:relative;
  z-index:2;
  margin-top:clamp(12px,2.4vh,20px);
  padding-top:clamp(12px,2.2vh,18px);
  border-top:1px solid rgba(245,241,232,.14);
}

.panel.panel .panel__sub-k,
.mv-panel.mv-panel .mv-panel__sub-k{
  display:block;
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:9px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(245,241,232,.45);
  margin-bottom:8px;
}

.panel.panel .panel__lista a.panel__sub-l,
.panel.panel .panel__sub .panel__sub-l,
.mv-panel.mv-panel .mv-panel__lista a.mv-panel__sub-l,
.mv-panel.mv-panel .mv-panel__sub .mv-panel__sub-l{
  display:block;
  font-family:var(--f-cuerpo,'Space Grotesk',sans-serif);
  font-weight:700;
  font-size:clamp(12.5px,1.65vh,14px);
  line-height:1.32;
  letter-spacing:0;
  text-transform:none;
  color:rgba(245,241,232,.82);
  text-decoration:none;
  padding:clamp(4px,.8vh,7px) 0 clamp(4px,.8vh,7px) 15px;
  position:relative;
  transform:none;
}

.panel.panel .panel__sub-l::before,
.mv-panel.mv-panel .mv-panel__sub-l::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  margin-top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ac,#FF1E1E);
  opacity:.85;
}

.panel.panel .panel__sub-l:hover,
.mv-panel.mv-panel .mv-panel__sub-l:hover{
  color:#F5F1E8;
  transform:translateX(4px);
}

.panel.panel .panel__lista a.panel__sub-l--ext,
.panel.panel .panel__sub .panel__sub-l--ext,
.mv-panel.mv-panel .mv-panel__lista a.mv-panel__sub-l--ext,
.mv-panel.mv-panel .mv-panel__sub .mv-panel__sub-l--ext{
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#FFD400;
  margin-top:4px;
}
.panel.panel .panel__sub-l--ext::before,
.mv-panel.mv-panel .mv-panel__sub-l--ext::before{background:#FFD400}

/* --------------------------------------------------------------------------
   4. Pie
   -------------------------------------------------------------------------- */
.panel.panel .panel__pie,
.mv-panel.mv-panel .mv-panel__pie{
  position:relative;
  z-index:2;
  margin-top:clamp(12px,2.4vh,20px);
  padding-top:clamp(11px,2vh,16px);
  border-top:1px solid rgba(245,241,232,.14);
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(245,241,232,.5);
}
.panel.panel .panel__pie a,
.mv-panel.mv-panel .mv-panel__pie a{
  color:rgba(245,241,232,.5);
  text-decoration:none;
  border-bottom:1px solid rgba(245,241,232,.28);
  padding-bottom:2px;
}
.panel.panel .panel__pie a:hover,
.mv-panel.mv-panel .mv-panel__pie a:hover{color:#FFD400;border-color:#FFD400}

/* --------------------------------------------------------------------------
   5. Pantallas muy bajas: se aprieta mas antes que aparezca scroll
   -------------------------------------------------------------------------- */
@media (max-height:680px){
  .panel.panel,
  .mv-panel.mv-panel{padding-top:clamp(68px,9.5vh,80px)}

  .panel.panel .panel__lista > a,
  .mv-panel.mv-panel .mv-panel__lista > a{font-size:clamp(20px,4.6vh,27px)}

  .panel.panel .panel__sub-l,
  .mv-panel.mv-panel .mv-panel__sub-l{font-size:12px}
}

/* El panel solo existe en movil */
@media (min-width:981px){
  .panel.panel,
  .mv-panel.mv-panel{display:none}
}

@media (prefers-reduced-motion:reduce){
  .panel.panel .panel__lista > a,
  .mv-panel.mv-panel .mv-panel__lista > a{transition:none}
}

/* "USD" junto al precio en dolares */
.marva-usd-price::after{
  content:" USD";
  font-size:.62em;
  font-weight:400;
  letter-spacing:.08em;
  opacity:.62;
  margin-left:2px;
}