/* ============================================================
   JUGONES.ES — Sistema de diseño
   Colección Aura 01 · "El aura no se entrena. Se lleva."
   ============================================================ */

/* ---------- Tipografías (autoalojadas, licencia SIL OFL) ---------- */
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Color */
  --carbon:#101010;
  --carbon-2:#1a1a1a;
  --carbon-3:#242424;
  --hueso:#F4F1E8;
  --hueso-2:#EAE6DA;
  --aura:#B7FF35;
  --electrico:#315CFF;
  --electrico-osc:#2748CC;
  --naranja:#FF5A1F;
  --cemento:#A5A5A5;
  --grafito:#5C5C5C;      /* gris accesible sobre fondos claros */
  --linea:#D8D3C5;
  --linea-osc:#2E2E2E;
  --exito:#1F7A3D;
  --error:#C0341A;

  /* Tipografía */
  --display:'Barlow Condensed','Archivo Narrow','Arial Narrow',Helvetica,Arial,sans-serif;
  --texto:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Escala tipográfica fluida */
  --t-xs:0.75rem;   /* 12 */
  --t-sm:0.8125rem; /* 13 */
  --t-b:0.9375rem;  /* 15 */
  --t-md:1.0625rem; /* 17 */
  --t-lg:clamp(1.25rem,1.05rem + .9vw,1.6rem);
  --t-h3:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  --t-h2:clamp(2rem,1.4rem + 3vw,3.4rem);
  --t-h1:clamp(2.4rem,1.3rem + 4.4vw,4.6rem);

  /* Espaciado */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  --radio:2px;
  --radio-md:6px;
  --ancho:1320px;
  --ancho-txt:68ch;
  --cabecera:104px;
  --transicion:200ms cubic-bezier(.2,.6,.2,1);
  --sombra:0 2px 8px rgba(16,16,16,.08);
  --sombra-alta:0 12px 40px rgba(16,16,16,.16);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--hueso);color:var(--carbon);
  font-family:var(--texto);font-size:var(--t-b);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.01em;margin:0 0 var(--s4)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-lg);font-weight:700}
p{margin:0 0 var(--s4);max-width:var(--ancho-txt)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
ul,ol{padding-left:1.15rem}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--linea);margin:var(--s6) 0}
::selection{background:var(--aura);color:var(--carbon)}

/* Foco visible en todo */
:focus-visible{outline:3px solid var(--electrico);outline-offset:3px;border-radius:2px}
.oscuro :focus-visible,.tema-oscuro :focus-visible{outline-color:var(--aura)}

[hidden]{display:none!important}

/* Utilidades */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.estrecho{max-width:820px}
.vo{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:var(--s4);top:-100px;z-index:2000;background:var(--aura);color:var(--carbon);padding:.75rem 1.25rem;font-weight:700;transition:top var(--transicion)}
.saltar:focus{top:var(--s4)}
.centro{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.oscuro{background:var(--carbon);color:var(--hueso)}
.oscuro p{color:#D6D2C6}
.seccion{padding-block:clamp(3rem,7vw,6rem)}
.seccion--fina{padding-block:clamp(2rem,4vw,3.5rem)}
.eyebrow{font-family:var(--texto);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--grafito);margin:0 0 var(--s3)}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto) .eyebrow{color:var(--aura)}
.cab-seccion{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.cab-seccion h2{margin:0}
.texto-apoyo{color:var(--grafito);font-size:var(--t-md);max-width:56ch}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto) .texto-apoyo{color:#C9C5B9}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--carbon);--fg:var(--hueso);--bd:var(--carbon);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.8rem 1.6rem;border:2px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--texto);font-size:var(--t-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border-radius:var(--radio);
  transition:transform var(--transicion),background var(--transicion),color var(--transicion),border-color var(--transicion);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--aura{--bg:var(--aura);--fg:var(--carbon);--bd:var(--aura)}
.btn--aura:hover{--bg:#C8FF5C;--bd:#C8FF5C}
.btn--claro{--bg:var(--hueso);--fg:var(--carbon);--bd:var(--hueso)}
.btn--linea{--bg:transparent;--fg:var(--carbon);--bd:var(--carbon)}
.btn--linea:hover{--bg:var(--carbon);--fg:var(--hueso)}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto,.p404,.news-oscuro) .btn--linea{--fg:var(--hueso);--bd:var(--hueso)}
.hero .btn--linea{--bg:rgba(16,16,16,.55);--fg:var(--hueso);--bd:rgba(244,241,232,.85);backdrop-filter:blur(6px)}
.hero .btn--linea:hover{--bg:var(--hueso);--fg:var(--carbon)}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto,.p404,.news-oscuro) .btn--linea:hover{--bg:var(--hueso);--fg:var(--carbon)}
.btn--bloque{width:100%}
.btn--sm{min-height:40px;padding:.5rem 1rem;font-size:var(--t-xs)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;transform:none!important;
 --bg:transparent;--fg:var(--grafito);--bd:var(--linea)}
.oscuro .btn[aria-disabled="true"]{--fg:var(--cemento);--bd:var(--linea-osc)}
.enlace-flecha{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.enlace-flecha:hover{gap:.75rem}

/* ---------- Barra superior ---------- */
.barra-sup{background:var(--carbon);color:var(--hueso);font-size:var(--t-xs);letter-spacing:.06em}
.barra-sup .contenedor{display:flex;align-items:center;justify-content:center;gap:var(--s4);min-height:38px;text-align:center}
.barra-sup strong{color:var(--aura);font-weight:700}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:900;background:var(--hueso);border-bottom:1px solid var(--linea)}
.cabecera__fila{display:flex;align-items:center;gap:var(--s5);min-height:66px}
.marca{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo-img{display:block;width:auto}
.logo-img--menu{height:20px}
.sello-reserva{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-xs);line-height:1.5;border:1px solid var(--linea);padding:.6rem .7rem;margin-bottom:.8rem;background:var(--hueso)}
.sello-reserva svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--carbon);fill:none;stroke-width:1.7}
.aura-fichas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2.5rem)}
@media (max-width:800px){.aura-fichas{grid-template-columns:1fr}}
.aura-ficha{display:grid;grid-template-columns:150px 1fr;gap:1.2rem;align-items:center}
.aura-ficha__img{overflow:hidden;border:1px solid var(--linea-osc)}
.aura-ficha__img img{width:100%;height:auto;display:block}
.marca .logo-img{height:23px;width:auto}
.nav{display:flex;gap:var(--s5);margin-left:var(--s4)}
.nav a{font-family:var(--texto);font-size:var(--t-sm);font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:.5rem 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--carbon);transition:right var(--transicion)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]::after{background:var(--aura)}
.acciones{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.icono-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;border-radius:var(--radio)}
.icono-btn:hover{background:var(--hueso-2)}
.icono-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contador{position:absolute;top:5px;right:4px;min-width:18px;height:18px;padding:0 4px;background:var(--aura);color:var(--carbon);border-radius:999px;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.contador[data-vacio="true"]{display:none}
.abrir-menu{display:none}
@media (max-width:900px){.hero__contenido{max-width:100%}}
@media (max-width:760px){
  .hero__media img{object-position:22% center}
  .hero__foto img{object-position:center 40%}
  .hero{min-height:min(72vh,620px)}
  .hero__velo{background:linear-gradient(0deg,rgba(16,16,16,.95) 0%,rgba(16,16,16,.60) 46%,rgba(16,16,16,.56) 100%),linear-gradient(90deg,rgba(16,16,16,.72) 0%,rgba(16,16,16,.18) 60%,rgba(16,16,16,0) 100%)}
}
@media (max-width:960px){
  .nav{display:none}
  .abrir-menu{display:inline-flex}
  .marca .logo-img{height:19px}
}

/* Menú móvil */
.menu-movil{position:fixed;inset:0;z-index:1200;visibility:hidden}
.menu-movil[data-abierto="true"]{visibility:visible}
.menu-movil__fondo{position:absolute;inset:0;background:rgba(16,16,16,.55);opacity:0;transition:opacity var(--transicion)}
.menu-movil[data-abierto="true"] .menu-movil__fondo{opacity:1}
.menu-movil__panel{position:absolute;inset:0 0 0 auto;width:min(420px,88vw);background:var(--carbon);color:var(--hueso);padding:var(--s5);overflow-y:auto;transform:translateX(100%);transition:transform 260ms cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;gap:var(--s5)}
.menu-movil[data-abierto="true"] .menu-movil__panel{transform:none}
.menu-movil__cab{display:flex;align-items:center;justify-content:space-between}
.menu-movil nav{display:flex;flex-direction:column}
.menu-movil nav a{font-family:var(--display);font-size:1.9rem;font-weight:800;text-transform:uppercase;text-decoration:none;padding:.45rem 0;border-bottom:1px solid var(--linea-osc)}
.menu-movil nav a:hover{color:var(--aura)}
.menu-movil .sec-titulo{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--cemento);margin-bottom:var(--s2)}
.menu-movil .enlaces-min a{display:block;padding:.35rem 0;font-size:var(--t-sm);color:#D6D2C6;text-decoration:none}
.menu-movil .enlaces-min a:hover{color:var(--aura)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--carbon);color:var(--hueso);overflow:hidden;isolation:isolate;display:flex;align-items:center;min-height:min(76vh,700px)}
.hero>.contenedor{width:100%}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media svg{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,rgba(16,16,16,.94) 0%,rgba(16,16,16,.80) 24%,rgba(16,16,16,.34) 40%,rgba(16,16,16,0) 54%),linear-gradient(0deg,rgba(16,16,16,.78) 0%,rgba(16,16,16,0) 34%)}
.hero__contenido{position:relative;padding-block:clamp(3rem,8vw,6rem);max-width:min(540px,52vw)}
.hero h1{margin:0 0 var(--s5);text-transform:uppercase;text-shadow:0 2px 30px rgba(16,16,16,.55)}
.hero h1 .destello{color:var(--aura)}
.hero__texto{font-size:var(--t-md);color:#E4E0D4;max-width:38ch;text-shadow:0 1px 16px rgba(16,16,16,.7)}
.hero__botones{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);margin-top:var(--s6);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cemento)}
.hero__meta span{display:flex;align-items:center;gap:.5rem}
.hero__meta span::before{content:"";width:7px;height:7px;background:var(--aura);border-radius:50%}

/* ---------- Marquesina ---------- */
.marquesina{background:var(--aura);color:var(--carbon);border-block:2px solid var(--carbon);overflow:hidden;position:relative}
.marquesina__pista{display:flex;width:max-content;animation:desliza 34s linear infinite}
.marquesina__grupo{display:flex;align-items:center;gap:var(--s5);padding:.65rem var(--s5) .5rem}
.marquesina span{font-family:var(--display);font-size:1.3rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.marquesina span.punto{color:var(--carbon);opacity:.45}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquesina__pausa{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--carbon);color:var(--aura);border:0;width:30px;height:30px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:12px}
.marquesina[data-pausa="true"] .marquesina__pista{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .marquesina__pista{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .marquesina__grupo:nth-child(2){display:none}
}

/* ---------- Rejilla de productos ---------- */
.rejilla{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.rejilla--4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.rejilla--4,.rejilla--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rejilla--4,.rejilla--3,.rejilla--2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.rejilla--4,.rejilla--3{grid-template-columns:1fr}}

.tarjeta{position:relative;display:flex;flex-direction:column;background:transparent}
.tarjeta{--aura-rgb:183,255,53;--fondo:#EAE6DA}
.tarjeta__media{position:relative;aspect-ratio:1/1;background:var(--fondo);overflow:hidden;border:1px solid var(--linea);
 transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
 transform-style:preserve-3d;transition:transform 220ms ease,box-shadow 320ms ease;will-change:transform}
.tarjeta:hover .tarjeta__media,.tarjeta:focus-within .tarjeta__media{box-shadow:0 26px 64px -22px rgba(var(--aura-rgb),.75),0 0 0 1px rgba(var(--aura-rgb),.35)}
.tarjeta__media .capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 320ms ease,transform 600ms cubic-bezier(.2,.7,.2,1)}
.tarjeta:hover .capa,.tarjeta:focus-within .capa{transform:scale(1.045) translateZ(30px)}
.tarjeta__media .capa--b{opacity:0}
.tarjeta:hover .capa--b,.tarjeta:focus-within .capa--b{opacity:1}
.tarjeta:hover .capa--a,.tarjeta:focus-within .capa--a{opacity:0}
.tarjeta__media img,.tarjeta__media svg{width:100%;height:100%}
.tarjeta__media .tapa{position:absolute;inset:0;z-index:1;display:block}
.etiquetas{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:3;pointer-events:none}
.etiqueta{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .55rem;background:var(--carbon);color:var(--hueso)}
.etiqueta--nuevo{background:var(--aura);color:var(--carbon)}
.etiqueta--top{background:var(--naranja);color:#fff}
.etiqueta--agotado{background:var(--cemento);color:var(--carbon)}
.fav-btn{position:absolute;top:8px;right:8px;z-index:4;width:40px;height:40px;border:0;background:rgba(244,241,232,.9);border-radius:50%;display:grid;place-items:center;cursor:pointer}
.fav-btn svg{width:19px;height:19px;fill:none;stroke:var(--carbon);stroke-width:1.8}
.fav-btn[aria-pressed="true"] svg{fill:var(--naranja);stroke:var(--naranja)}
.fav-btn:hover{background:var(--hueso)}
.tarjeta__cuerpo{padding-top:var(--s3);display:flex;flex-direction:column;gap:.35rem}
.tarjeta__nombre{font-family:var(--display);font-size:1.25rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:1.05}
.tarjeta__nombre a{text-decoration:none}
.tarjeta__nombre a:hover{text-decoration:underline}

.tarjeta__tipo{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}
.tarjeta__precio{font-size:var(--t-b);font-weight:700}
.tarjeta__precio del{color:var(--grafito);font-weight:400;margin-right:.4rem}
.colores{display:flex;gap:6px;margin-top:.2rem}
.color-punto{width:15px;height:15px;border-radius:50%;border:1px solid var(--linea);position:relative;z-index:2}
.accion-rapida{position:absolute;left:0;right:0;bottom:0;z-index:4;background:rgba(16,16,16,.94);color:var(--hueso);padding:.6rem;display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap;transform:translateY(101%);transition:transform var(--transicion)}
.tarjeta:hover .accion-rapida,.tarjeta:focus-within .accion-rapida{transform:none}
@media (hover:none){.accion-rapida{position:static;transform:none;background:transparent;color:inherit;padding:.5rem 0 0;justify-content:flex-start}}
.talla-rapida{min-width:38px;height:34px;padding:0 .4rem;background:transparent;border:1px solid rgba(244,241,232,.5);color:inherit;font-size:var(--t-xs);font-weight:700;cursor:pointer;border-radius:2px}
.talla-rapida:hover{background:var(--aura);border-color:var(--aura);color:var(--carbon)}
.talla-rapida[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}
@media (hover:none){.talla-rapida{border-color:var(--linea)}}


/* ============================================================
   AURA — halos, anillos, 3D y revelados
   ============================================================ */

/* Halo de cursor: sigue el puntero por toda la web */
.aura-cursor{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;
 border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease;
 background:radial-gradient(circle,rgba(183,255,53,.16) 0%,rgba(183,255,53,.06) 38%,transparent 68%);
 transform:translate3d(var(--x,50vw),var(--y,50vh),0);mix-blend-mode:screen}
.aura-cursor[data-visible="true"]{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.aura-cursor{display:none}}

/* Anillos de aura reutilizables */
.anillos{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.anillos span{position:absolute;width:min(62vw,620px);aspect-ratio:1;border-radius:50%;
 border:1.5px solid rgba(183,255,53,.5);animation:pulsoAura 7s cubic-bezier(.2,.6,.3,1) infinite}
.anillos span:nth-child(2){animation-delay:1.75s}
.anillos span:nth-child(3){animation-delay:3.5s}
.anillos span:nth-child(4){animation-delay:5.25s}
@keyframes pulsoAura{
  0%{transform:scale(.28);opacity:0}
  12%{opacity:.85}
  100%{transform:scale(1.45);opacity:0}
}
.anillos--quieto span{animation:none;opacity:.22}
.anillos--quieto span:nth-child(1){transform:scale(.4)}
.anillos--quieto span:nth-child(2){transform:scale(.7)}
.anillos--quieto span:nth-child(3){transform:scale(1)}
.anillos--quieto span:nth-child(4){transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){
  .anillos span{animation:none;opacity:.22}
  .anillos span:nth-child(1){transform:scale(.4)}
  .anillos span:nth-child(2){transform:scale(.7)}
  .anillos span:nth-child(3){transform:scale(1)}
  .anillos span:nth-child(4){transform:scale(1.3)}
}

/* Revelado al entrar en pantalla */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
[data-reveal][data-visto="true"]{opacity:1;transform:none}
[data-reveal="escala"]{transform:scale(.94)}
[data-reveal="izq"]{transform:translate3d(-32px,0,0)}
[data-reveal="der"]{transform:translate3d(32px,0,0)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}}

/* Índice de aura */
.aura-indice{display:inline-flex;align-items:baseline;gap:.45rem;font-family:var(--display);
 font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.aura-indice small{font-family:var(--texto);font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;color:var(--grafito)}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto) .aura-indice small{color:var(--cemento)}
.aura-indice b{font-size:1.5rem;color:var(--carbon)}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto) .aura-indice b{color:var(--aura)}
.aura-barra{height:6px;background:rgba(16,16,16,.12);margin-top:.5rem;overflow:hidden;border-radius:3px;max-width:420px}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto) .aura-barra{background:rgba(244,241,232,.16)}
.aura-barra span{display:block;height:100%;width:0;border-radius:3px;transition:width 1.2s cubic-bezier(.2,.7,.2,1);
 background:linear-gradient(90deg,var(--carbon) 0%,var(--carbon) 78%,var(--aura) 78%)}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto) .aura-barra span{background:var(--aura)}
[data-visto="true"] .aura-barra span,
.aura-barra[data-visto="true"] span{width:var(--pct,90%)}

/* Etiqueta de aura sobre la tarjeta */
.etiqueta--aura{background:transparent;color:var(--carbon);border:1px solid currentColor;backdrop-filter:blur(4px)}
.tarjeta__media[data-oscuro="true"] .etiqueta--aura{color:var(--hueso)}

/* Visor 3D de producto: gira entre delante y detrás */
.visor-caja{position:relative;perspective:1400px}
.visor{position:relative;aspect-ratio:1/1;transform-style:preserve-3d;
 transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--giro,0deg) + var(--ry,0deg)));
 transition:transform 850ms cubic-bezier(.2,.75,.25,1);will-change:transform}
.visor__cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 border:1px solid var(--linea);overflow:hidden;background:var(--fondo,#EAE6DA)}
.visor__cara img{width:100%;height:100%;object-fit:cover}
.visor__cara--dorso{transform:rotateY(180deg)}
.visor-caja::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:44px;border-radius:50%;
 background:radial-gradient(ellipse,rgba(var(--aura-rgb,183,255,53),.45),transparent 70%);filter:blur(10px);z-index:-1}
.visor-btns{display:flex;gap:.5rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}
.visor-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1rem;
 background:var(--hueso);border:2px solid var(--carbon);border-radius:var(--radio);cursor:pointer;
 font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.visor-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.visor-btn:hover{background:var(--carbon);color:var(--hueso)}
.visor-btn[aria-pressed="true"]{background:var(--aura);border-color:var(--aura);color:var(--carbon)}
@media (prefers-reduced-motion:reduce){.visor{transition-duration:1ms}}

/* Selector de corte JUGÓN / JUGONA */
.cortes{display:flex;gap:0;border:2px solid var(--carbon);border-radius:var(--radio);overflow:hidden;max-width:320px}
.cortes button{flex:1;min-height:48px;padding:.6rem .8rem;background:transparent;border:0;cursor:pointer;
 font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
 transition:background var(--transicion),color var(--transicion)}
.cortes button+button{border-left:2px solid var(--carbon)}
.cortes button[aria-pressed="true"]{background:var(--carbon);color:var(--aura)}

/* Hero con capas y paralaje */
.hero__capa{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__foto{position:absolute;inset:-6%;z-index:-3;will-change:transform}
.hero__foto img{width:100%;height:100%;object-fit:cover}
.hero__grano{position:absolute;inset:0;z-index:-1;opacity:.30;pointer-events:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero__palabra{position:absolute;right:2%;bottom:-5%;z-index:-1;
 font-family:var(--display);font-weight:800;font-size:min(26vw,22rem);line-height:.8;color:transparent;
 -webkit-text-stroke:1.5px rgba(244,241,232,.10);
 letter-spacing:-.02em;pointer-events:none;user-select:none;white-space:nowrap}

/* Pieza 00 destacada */
.pieza00{position:relative;background:var(--carbon);color:var(--hueso);overflow:hidden;isolation:isolate}
.pieza00__rejilla{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;
 gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:900px){.pieza00__rejilla{grid-template-columns:1fr}}
.pieza00__fotos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.6vw,1.2rem);perspective:1200px}
.pieza00__foto{position:relative;display:block;overflow:hidden;border:1px solid var(--linea-osc);
 transform:perspective(1100px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform 240ms ease,box-shadow 320ms ease}
.pieza00__foto:hover{box-shadow:0 30px 70px -30px rgba(183,255,53,.8)}
.pieza00__foto img{width:100%;height:auto;display:block}
.pieza00__foto span{position:absolute;left:10px;bottom:10px;background:var(--carbon);color:var(--aura);
 font-family:var(--display);font-size:.9rem;font-weight:800;letter-spacing:.1em;padding:.2rem .5rem}
.pieza00__txt h2{font-size:clamp(2.2rem,1.2rem + 3.6vw,4rem)}
.pieza00__lista{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.55rem}
.pieza00__lista li{position:relative;padding-left:1.4rem;font-size:var(--t-sm);color:#D6D2C6}
.pieza00__lista li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
 background:var(--aura)}
.pieza00 .precio small{color:var(--cemento)}

/* Película de la colección */
.film{position:relative;background:var(--carbon);color:var(--hueso);overflow:hidden;isolation:isolate}
.film__rejilla{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(280px,420px);
 gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:900px){.film__rejilla{grid-template-columns:1fr}.film__marco{order:-1;margin-inline:auto;max-width:340px}}
.film__txt h2{font-size:clamp(2rem,1.2rem + 3.4vw,3.8rem)}
.film__marco{position:relative;perspective:1200px}
.film__marco video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#000;
 border:1px solid var(--linea-osc);border-radius:4px;
 transform:perspective(1200px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform 240ms ease;
 box-shadow:0 40px 90px -40px rgba(183,255,53,.55)}
.film__ctrl{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.film__ctrl .visor-btn{background:transparent;color:var(--hueso);border-color:rgba(244,241,232,.5)}
.film__ctrl .visor-btn:hover{background:var(--hueso);color:var(--carbon)}
.film__ctrl .visor-btn[aria-pressed="true"]{background:var(--aura);border-color:var(--aura);color:var(--carbon)}

/* Franja AURA de la portada */
.aura-bloque{position:relative;background:var(--carbon);color:var(--hueso);overflow:hidden;isolation:isolate}
.aura-bloque__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;position:relative;z-index:2}
@media (max-width:900px){.aura-bloque__rejilla{grid-template-columns:1fr}}
.aura-bloque__foto{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--linea-osc)}
.aura-bloque__foto img{width:100%;height:100%;object-fit:cover;
 transform:perspective(1100px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(1.04);
 transition:transform 240ms ease}
.aura-datos{display:grid;gap:1.1rem;margin-top:2rem;max-width:420px}
.aura-datos div{display:grid;gap:.2rem}
.aura-datos .fila{display:flex;justify-content:space-between;align-items:baseline;
 font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.aura-datos .fila b{font-family:var(--display);font-size:1.4rem;color:var(--aura)}

/* Carrusel 3D de la colección */
.tira{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:1rem 2rem;
 scrollbar-width:thin;perspective:1200px}
.tira>*{flex:0 0 min(78vw,340px);scroll-snap-align:center}
.tira::-webkit-scrollbar{height:6px}
.tira::-webkit-scrollbar-thumb{background:var(--cemento);border-radius:3px}

/* Fichas de la colección */
.fichas-col{display:grid;gap:clamp(1rem,2.5vw,2rem)}
.ficha-col{display:grid;grid-template-columns:180px 180px 1fr;gap:clamp(1rem,2.5vw,2rem);align-items:center;
 border:1px solid var(--linea-osc);padding:clamp(1rem,2vw,1.6rem);background:rgba(255,255,255,.02);
 transition:border-color var(--transicion),box-shadow var(--transicion)}
.ficha-col:hover{border-color:rgba(var(--aura-rgb),.6);box-shadow:0 20px 50px -30px rgba(var(--aura-rgb),.8)}
@media (max-width:900px){.ficha-col{grid-template-columns:1fr 1fr}.ficha-col__txt{grid-column:1/-1}}
.ficha-col__img{display:block;overflow:hidden;border:1px solid var(--linea-osc);
 transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform 220ms ease}
.ficha-col__img img{width:100%;height:auto;display:block}
.ficha-col h3{margin:.2rem 0 .6rem}
.ficha-col h3 a{text-decoration:none}

/* Foto de producto en contexto */
.look{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--carbon-2)}
.look img{width:100%;height:100%;object-fit:cover;transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
.look:hover img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.look:hover img{transform:none}}

/* Cinta de galería a pantalla completa */
.mosaico-look{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
@media (max-width:900px){.mosaico-look{grid-template-columns:repeat(2,1fr)}}

/* ---------- Manifiesto ---------- */
.manifiesto{background:var(--carbon);color:var(--hueso);position:relative;overflow:hidden}
.manifiesto__halo{position:absolute;width:min(760px,90vw);aspect-ratio:1;right:-10%;top:-30%;background:radial-gradient(circle,rgba(183,255,53,.16),rgba(183,255,53,0) 62%);pointer-events:none}
.manifiesto blockquote{margin:0;font-family:var(--display);font-size:clamp(1.9rem,1rem + 4.2vw,4.2rem);font-weight:800;line-height:.98;text-transform:uppercase;max-width:20ch}
.manifiesto blockquote em{font-style:normal;color:var(--aura)}
.manifiesto__pie{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center}

/* ---------- Mosaico de estilos ---------- */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media (max-width:860px){.mosaico{grid-template-columns:repeat(2,1fr)}}
.baldosa{position:relative;aspect-ratio:3/4;display:flex;align-items:end;padding:var(--s4);text-decoration:none;color:var(--hueso);overflow:hidden;background:var(--carbon-2);border:1px solid var(--linea-osc)}
.baldosa .fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 400ms ease}
.baldosa:hover .fondo{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.baldosa:hover .fondo{transform:none}}
.baldosa::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(16,16,16,.92));z-index:0;pointer-events:none}
.baldosa span{position:relative;z-index:1;font-family:var(--display);font-size:1.5rem;font-weight:800;text-transform:uppercase;line-height:1}
.baldosa small{position:relative;z-index:1;display:block;font-family:var(--texto);font-size:var(--t-xs);letter-spacing:.12em;color:var(--aura);margin-bottom:.3rem}

/* ---------- Campaña ---------- */
.campana{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch;gap:0}
@media (max-width:860px){.campana{grid-template-columns:1fr}}
.campana__img{position:relative;min-height:420px;background:var(--carbon-2)}
.campana__img img,.campana__img svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.campana__txt{background:var(--carbon);color:var(--hueso);padding:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:center}

/* ---------- Comunidad ---------- */
.aviso-demo{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--carbon);background:var(--aura);padding:.3rem .6rem;margin-bottom:var(--s4)}
.social{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media (max-width:860px){.social{grid-template-columns:repeat(2,1fr)}}
.social figure{margin:0;position:relative;aspect-ratio:1;background:var(--carbon-2);overflow:hidden;border:1px solid var(--linea-osc)}
.social figure img{width:100%;height:100%;object-fit:cover}
.social figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .6rem;background:linear-gradient(transparent,rgba(16,16,16,.85));color:var(--hueso);font-size:var(--t-xs)}

/* ---------- Newsletter ---------- */
.news{background:var(--aura);color:var(--carbon)}
.news h2{margin-bottom:var(--s3)}
.form-news{display:flex;flex-wrap:wrap;gap:var(--s3);max-width:560px;margin-top:var(--s4)}
.form-news input[type="email"]{flex:1 1 260px}
.acuerdo{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm);max-width:60ch;margin-top:var(--s3)}
.acuerdo input{margin-top:.25rem;width:20px;height:20px;flex:0 0 auto;accent-color:var(--carbon)}

/* ---------- Formularios ---------- */
label{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem}
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],input[type="password"],select,textarea{
  width:100%;min-height:48px;padding:.7rem .9rem;background:var(--hueso);color:var(--carbon);
  border:2px solid var(--carbon);border-radius:var(--radio);font:inherit;font-size:var(--t-b);
}
textarea{min-height:150px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23101010' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem}
input::placeholder,textarea::placeholder{color:var(--grafito)}
.campo{margin-bottom:var(--s4)}
.pista{font-size:var(--t-xs);color:var(--grafito);margin-top:.35rem;text-transform:none;letter-spacing:0;font-weight:400}
:is(.oscuro,.aura-bloque,.pieza00,.film,.manifiesto) .pista{color:var(--cemento)}
.msg{padding:.85rem 1rem;border-left:4px solid;font-size:var(--t-sm);margin-top:var(--s3);display:none}
.msg[data-visible="true"]{display:block}
.msg--ok{border-color:var(--exito);background:rgba(31,122,61,.1);color:#155C2C}
.msg--error{border-color:var(--error);background:rgba(192,52,26,.1);color:#8E2613}
.oscuro .msg--ok{color:#9BE8B4;background:rgba(31,122,61,.22)}
.oscuro .msg--error{color:#FFB6A5;background:rgba(192,52,26,.25)}
.form-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
@media (max-width:640px){.form-rejilla{grid-template-columns:1fr}}
.form-rejilla .ancho-total{grid-column:1/-1}

/* ---------- Ficha de producto ---------- */
.producto{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media (max-width:960px){.producto{grid-template-columns:1fr}}
.galeria{display:grid;grid-template-columns:84px 1fr;gap:var(--s3);position:sticky;top:calc(var(--cabecera) + 8px)}
@media (max-width:960px){.galeria{position:static;grid-template-columns:1fr}}
.galeria__miniaturas{display:flex;flex-direction:column;gap:var(--s2)}
@media (max-width:960px){.galeria__miniaturas{flex-direction:row;order:2;overflow-x:auto}}
.mini{width:84px;height:84px;flex:0 0 auto;border:2px solid var(--linea);background:var(--fondo,var(--hueso-2));padding:0;cursor:pointer;overflow:hidden}
.mini[aria-current="true"]{border-color:var(--carbon)}
.mini img,.mini svg{width:100%;height:100%;object-fit:cover}
.galeria__principal{position:relative;aspect-ratio:1/1;background:var(--fondo,var(--hueso-2));border:1px solid var(--linea);overflow:hidden}
.galeria__principal>div{position:absolute;inset:0;display:none}
.galeria__principal>div[data-activa="true"]{display:block}
.galeria__principal img,.galeria__principal svg{width:100%;height:100%;object-fit:cover}
.galeria__principal.zoom img,.galeria__principal.zoom svg{transform:scale(1.9);transition:transform var(--transicion)}
.zoom-btn{position:absolute;right:10px;bottom:10px;z-index:3;background:rgba(244,241,232,.92);border:1px solid var(--linea);width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.zoom-btn svg{width:20px;height:20px;fill:none;stroke:var(--carbon);stroke-width:1.8}
.hueco-360{margin-top:var(--s3);border:1px dashed var(--cemento);padding:var(--s4);font-size:var(--t-sm);color:var(--grafito);text-align:center}

.info h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);text-transform:uppercase;margin-bottom:var(--s2)}
.precio{font-size:1.6rem;font-family:var(--display);font-weight:700}
.precio small{font-family:var(--texto);font-size:var(--t-xs);font-weight:400;color:var(--grafito);display:block;letter-spacing:.04em;text-transform:none}
.variantes{margin-block:var(--s5)}
.variantes__cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s2)}
.variantes__cab a{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.opciones{display:flex;flex-wrap:wrap;gap:.5rem}
.opcion-color{width:44px;height:44px;border-radius:50%;border:2px solid var(--linea);cursor:pointer;padding:0;position:relative}
.opcion-color[aria-pressed="true"]{border-color:var(--carbon);box-shadow:0 0 0 2px var(--hueso) inset}
.opcion-talla{min-width:56px;height:48px;padding:0 .75rem;background:var(--hueso);border:2px solid var(--linea);cursor:pointer;font-weight:700;font-size:var(--t-sm);border-radius:var(--radio)}
.opcion-talla[aria-pressed="true"]{background:var(--carbon);color:var(--hueso);border-color:var(--carbon)}
.opcion-talla[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.disponible{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);font-weight:600;margin-bottom:var(--s4)}
.disponible::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--exito)}
.disponible[data-estado="agotado"]::before{background:var(--naranja)}
.compra{display:flex;gap:var(--s2);align-items:stretch}
.compra .btn{flex:1}
.fav-grande{width:56px;flex:0 0 auto;border:2px solid var(--carbon);background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:var(--radio)}
.fav-grande svg{width:22px;height:22px;fill:none;stroke:var(--carbon);stroke-width:1.8}
.fav-grande[aria-pressed="true"] svg{fill:var(--naranja);stroke:var(--naranja)}
.entrega{display:flex;flex-direction:column;gap:.5rem;margin-top:var(--s4);font-size:var(--t-sm);color:var(--grafito)}
.entrega span{display:flex;gap:.55rem;align-items:center}
.entrega svg{width:17px;height:17px;stroke:var(--carbon);fill:none;stroke-width:1.6;flex:0 0 auto}

/* Acordeón */
.acordeon{border-top:1px solid var(--linea);margin-top:var(--s5)}
.acordeon details{border-bottom:1px solid var(--linea)}
.acordeon summary{list-style:none;cursor:pointer;padding:1rem 0;font-family:var(--display);font-size:1.15rem;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+";font-size:1.5rem;font-weight:600;line-height:1}
.acordeon details[open] summary::after{content:"–"}
.acordeon__cuerpo{padding-bottom:1.2rem;font-size:var(--t-b)}
.acordeon__cuerpo ul{margin:0;padding-left:1.1rem}
.acordeon__cuerpo li{margin-bottom:.35rem}

/* Ficha técnica de diseño */
.ficha-diseno{background:var(--carbon);color:var(--hueso);padding:var(--s5);margin-top:var(--s5)}
.ficha-diseno dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--s4);margin:0;font-size:var(--t-sm)}
.ficha-diseno dt{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--aura);font-weight:700}
.ficha-diseno dd{margin:0;color:#D6D2C6}

/* ---------- Carrito lateral ---------- */
.cajon{position:fixed;inset:0;z-index:1300;visibility:hidden}
.cajon[data-abierto="true"]{visibility:visible}
.cajon__fondo{position:absolute;inset:0;background:rgba(16,16,16,.55);opacity:0;transition:opacity var(--transicion)}
.cajon[data-abierto="true"] .cajon__fondo{opacity:1}
.cajon__panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,94vw);background:var(--hueso);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 260ms cubic-bezier(.2,.7,.2,1)}
.cajon[data-abierto="true"] .cajon__panel{transform:none}
.cajon__cab{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--linea)}
.cajon__cab h2{margin:0;font-size:1.5rem}
.cajon__cuerpo{flex:1;overflow-y:auto;padding:var(--s4) var(--s5)}
.cajon__pie{border-top:1px solid var(--linea);padding:var(--s4) var(--s5);background:var(--hueso-2)}
.linea-carrito{display:grid;grid-template-columns:76px 1fr auto;gap:var(--s3);padding-block:var(--s4);border-bottom:1px solid var(--linea)}
.linea-carrito__img{width:76px;height:76px;background:var(--hueso-2);border:1px solid var(--linea);overflow:hidden}
.linea-carrito__img img,.linea-carrito__img svg{width:100%;height:100%;object-fit:cover}
.linea-carrito h3{font-family:var(--display);font-size:1.05rem;margin:0 0 .15rem;text-transform:uppercase}
.linea-carrito h3 a{text-decoration:none}
.linea-carrito .var{font-size:var(--t-xs);color:var(--grafito);letter-spacing:.06em;text-transform:uppercase}
.cantidad{display:inline-flex;align-items:center;border:1px solid var(--carbon);margin-top:.5rem}
.cantidad button{width:34px;height:34px;background:none;border:0;cursor:pointer;font-size:1.05rem;line-height:1}
.cantidad button:hover{background:var(--carbon);color:var(--hueso)}
.cantidad input{width:42px;height:34px;min-height:0;border:0;border-inline:1px solid var(--carbon);text-align:center;padding:0;font-weight:700;background:transparent}
.cantidad input::-webkit-outer-spin-button,.cantidad input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quitar{background:none;border:0;padding:0;font-size:var(--t-xs);text-decoration:underline;cursor:pointer;color:var(--grafito);margin-top:.5rem;text-transform:uppercase;letter-spacing:.08em}
.quitar:hover{color:var(--error)}
.resumen-fila{display:flex;justify-content:space-between;gap:1rem;padding-block:.35rem;font-size:var(--t-b)}
.resumen-fila--total{font-family:var(--display);font-size:1.5rem;font-weight:800;text-transform:uppercase;border-top:2px solid var(--carbon);margin-top:.6rem;padding-top:.6rem}
.envio-gratis{margin-top:var(--s3)}
.barra-progreso{height:6px;background:var(--linea);overflow:hidden;margin-top:.4rem}
.barra-progreso span{display:block;height:100%;background:var(--aura);transition:width 300ms ease}

/* ---------- Vacío / estados ---------- */
.vacio{text-align:center;padding:clamp(2.5rem,6vw,5rem) var(--s4);border:1px dashed var(--cemento)}
.vacio svg{width:64px;height:64px;margin:0 auto var(--s4);stroke:var(--cemento);fill:none;stroke-width:1.2}
.vacio h3{margin-bottom:var(--s2)}
.vacio p{margin-inline:auto;color:var(--grafito)}
.cargando{display:grid;gap:var(--s3)}
.esqueleto{background:linear-gradient(90deg,var(--hueso-2) 25%,#DFDACB 50%,var(--hueso-2) 75%);background-size:200% 100%;animation:brillo 1.4s infinite}
@keyframes brillo{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.esqueleto{animation:none}}

/* ---------- Avisos y aviso flotante ---------- */
.aviso-flotante{position:fixed;left:50%;bottom:24px;transform:translate(-50%,180%);opacity:0;visibility:hidden;z-index:1500;background:var(--carbon);color:var(--hueso);padding:.9rem 1.2rem;display:flex;align-items:center;gap:.85rem;box-shadow:var(--sombra-alta);max-width:min(520px,92vw);transition:transform 260ms cubic-bezier(.2,.7,.2,1),opacity 200ms}
.aviso-flotante[data-visible="true"]{transform:translate(-50%,0);opacity:1;visibility:visible}
.aviso-flotante svg{width:20px;height:20px;stroke:var(--aura);fill:none;stroke-width:2;flex:0 0 auto}
.aviso-flotante a{color:var(--aura)}

/* ---------- Cookies ---------- */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:1400;background:var(--carbon);color:var(--hueso);padding:var(--s5);max-width:560px;box-shadow:var(--sombra-alta);display:none}
.cookies[data-visible="true"]{display:block}
.cookies h2{font-size:1.35rem;margin-bottom:var(--s2)}
.cookies p{font-size:var(--t-sm);color:#D6D2C6}
.cookies__botones{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* ---------- Filtros de tienda ---------- */
.barra-filtros{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;padding-block:var(--s4);border-block:1px solid var(--linea);margin-bottom:var(--s6)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{padding:.45rem .9rem;border:1px solid var(--carbon);background:transparent;font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;min-height:38px}
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--carbon);color:var(--hueso)}
.orden{display:flex;align-items:center;gap:.5rem}
.orden label{margin:0}
.orden select{min-height:40px;width:auto;border-width:1px}

/* ---------- Pasos del checkout ---------- */
.pasos{display:flex;gap:var(--s4);list-style:none;padding:0;margin:0 0 var(--s6);flex-wrap:wrap;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.pasos li{color:var(--cemento);display:flex;align-items:center;gap:.5rem}
.pasos li[aria-current="step"]{color:var(--carbon)}
.pasos li span{width:26px;height:26px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-size:11px}
.pasos li[aria-current="step"] span{background:var(--aura);border-color:var(--aura);color:var(--carbon)}
.checkout{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.checkout{grid-template-columns:1fr}}
.panel{border:1px solid var(--linea);padding:var(--s5);background:#fff}
.panel+.panel{margin-top:var(--s4)}
.resumen{border:2px solid var(--carbon);padding:var(--s5);position:sticky;top:calc(var(--cabecera) + 8px);background:var(--hueso-2)}
@media (max-width:900px){.resumen{position:static}}
.pago-opciones{display:grid;gap:.5rem}
.pago-op{display:flex;align-items:center;gap:.75rem;border:2px solid var(--linea);padding:.85rem 1rem;cursor:pointer}
.pago-op:has(input:checked){border-color:var(--carbon);background:var(--hueso-2)}
.pago-op input{width:20px;height:20px;accent-color:var(--carbon)}
.pago-op .marca-pago{margin-left:auto;font-size:var(--t-xs);color:var(--grafito);letter-spacing:.08em;text-transform:uppercase}

/* ---------- Tablas ---------- */
.tabla-envoltorio{overflow-x:auto;border:1px solid var(--linea);margin-bottom:var(--s5)}
table th,table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--linea);font-size:var(--t-sm)}
table th{background:var(--carbon);color:var(--hueso);font-family:var(--texto);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;position:sticky;top:0}
table tbody tr:nth-child(even){background:var(--hueso-2)}
caption{text-align:left;padding:.6rem .9rem;font-size:var(--t-xs);color:var(--grafito)}

/* ---------- Contenido editorial ---------- */
.prosa h2{margin-top:var(--s7)}
.prosa h3{margin-top:var(--s6);font-size:var(--t-lg)}
.prosa ul,.prosa ol{max-width:var(--ancho-txt);margin-bottom:var(--s4)}
.prosa li{margin-bottom:.4rem}
.prosa a{color:var(--electrico);font-weight:600}
.aviso-legal{border-left:4px solid var(--naranja);background:rgba(255,90,31,.08);padding:var(--s4);font-size:var(--t-sm);margin-bottom:var(--s6)}
.aviso-legal strong{display:block;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-xs)}
.aviso-demo-bloque{border-left:4px solid var(--electrico);background:rgba(49,92,255,.08);padding:var(--s4);font-size:var(--t-sm);margin-bottom:var(--s5)}

/* ---------- Migas ---------- */
.migas{font-size:var(--t-xs);color:var(--grafito);padding-block:var(--s4);letter-spacing:.04em}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.migas li::after{content:"/";margin-left:.4rem;color:var(--cemento)}
.migas li:last-child::after{content:""}
.migas a{color:var(--grafito)}

/* ---------- Pie ---------- */
.pie{background:var(--carbon);color:var(--hueso);padding-block:var(--s7) var(--s5);margin-top:var(--s8)}
.pie__rejilla{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s6)}
@media (max-width:900px){.pie__rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__rejilla{grid-template-columns:1fr}}
.pie h3{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--aura);font-family:var(--texto);font-weight:700;margin-bottom:var(--s3)}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.45rem}
.pie a{font-size:var(--t-sm);color:#D6D2C6;text-decoration:none}
.pie a:hover{color:var(--aura);text-decoration:underline}
.pie__marca .logo-img{height:30px;width:auto;margin-bottom:var(--s4)}
.redes{display:flex;gap:.5rem;margin-top:var(--s4)}
.redes a{width:42px;height:42px;border:1px solid var(--linea-osc);display:grid;place-items:center;border-radius:50%}
.redes svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.redes a:hover{border-color:var(--aura);color:var(--aura)}
.pie__abajo{border-top:1px solid var(--linea-osc);margin-top:var(--s6);padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;font-size:var(--t-xs);color:var(--cemento)}
.pagos{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.pago-chip{border:1px solid var(--linea-osc);border-radius:3px;padding:.25rem .5rem;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#D6D2C6}
.selector-idioma{display:flex;align-items:center;gap:.5rem}
.selector-idioma select{min-height:38px;width:auto;color:var(--hueso);border-color:var(--linea-osc);font-size:var(--t-xs);background-color:var(--carbon);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F4F1E8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:11px;padding-right:2.4rem}

/* ---------- 404 ---------- */
.p404{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:var(--s8)}
.p404 .marcador{font-family:var(--display);font-size:clamp(5rem,20vw,14rem);font-weight:800;line-height:.85;color:var(--aura);text-shadow:0 0 60px rgba(183,255,53,.35)}

/* ---------- Admin ---------- */
.admin{display:grid;grid-template-columns:230px 1fr;gap:var(--s6);align-items:start}
@media (max-width:860px){.admin{grid-template-columns:1fr}}
.admin__nav{border:1px solid var(--linea);padding:var(--s4);position:sticky;top:calc(var(--cabecera) + 8px)}
@media (max-width:860px){.admin__nav{position:static}}
.admin__nav a{display:block;padding:.5rem 0;font-size:var(--t-sm);text-decoration:none;border-bottom:1px solid var(--linea)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:var(--s6)}
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{border:1px solid var(--linea);padding:var(--s4);background:#fff}
.kpi strong{display:block;font-family:var(--display);font-size:2rem;line-height:1}
.kpi span{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--grafito)}

/* ---------- Impresión ---------- */
@media print{
  .cabecera,.pie,.barra-sup,.cajon,.cookies,.menu-movil,.marquesina{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}