/* ==========================================================================
   HOLY'S BOYS — Hoja de estilos
   Paleta: negro carbón + oro + blanco. Estética "street luxe".
   ========================================================================== */

:root{
  --negro:      #060606;
  --negro-2:    #0b0b0b;
  --carbon:     #111111;
  --carbon-2:   #171717;
  --oro:        #f5b32b;
  --oro-claro:  #ffd469;
  --oro-hondo:  #c2860f;
  --blanco:     #ffffff;
  --hueso:      #f4f1ea;
  --gris:       #9b9b9b;
  --gris-2:     #6c6c6c;
  --wa:         #25d366;
  --linea:      rgba(245,179,43,.18);
  --linea-sutil:rgba(255,255,255,.07);

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --texto:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radio:   18px;
  --radio-s: 12px;
  --max:     1240px;
  --nav-h:   76px;

  --sombra:      0 26px 60px -22px rgba(0,0,0,.9);
  --sombra-oro:  0 0 0 1px rgba(245,179,43,.28), 0 24px 50px -24px rgba(245,179,43,.42);
  --transicion:  .38s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--negro);
  color:var(--hueso);
  font-family:var(--texto);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.sin-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

::selection{ background:var(--oro); color:#000; }

/* Scrollbar --------------------------------------------------------------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:var(--oro-hondo); }

/* Textura de fondo global -------------------------------------------------- */
.textura{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('../img/patron.svg') repeat;
  background-size:150px;
  opacity:.4;
}
.grano{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TIPOGRAFÍA Y UTILIDADES
   ========================================================================== */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:.94;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}
h2{ font-size:clamp(2.15rem, 6vw, 4.1rem); }
h3{ font-size:clamp(1.35rem, 3vw, 1.85rem); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.oro{ color:var(--oro); }
.degradado-oro{
  background:linear-gradient(100deg,#fff0c9 0%,var(--oro-claro) 26%,var(--oro) 52%,var(--oro-hondo) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.contenedor{
  width:100%; max-width:var(--max);
  margin-inline:auto; padding-inline:24px;
  position:relative; z-index:2;
}
.seccion{ padding:clamp(72px,10vw,132px) 0; position:relative; }
.seccion--alt{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.022) 22%,rgba(255,255,255,.022) 78%,transparent); }

.encabezado{ max-width:760px; margin-bottom:clamp(36px,5vw,60px); }
.encabezado--centro{ margin-inline:auto; text-align:center; }

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.68rem; font-weight:800; letter-spacing:.26em; text-transform:uppercase;
  color:var(--oro); margin-bottom:20px;
}
.kicker::before{
  content:''; width:26px; height:2px; background:var(--oro); display:block;
}
.encabezado--centro .kicker::after{
  content:''; width:26px; height:2px; background:var(--oro); display:block;
}
.encabezado p{
  color:var(--gris); margin-top:20px; font-size:1.03rem; max-width:60ch;
}
.encabezado--centro p{ margin-inline:auto; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px;
  font-weight:800; font-size:.85rem; letter-spacing:.09em; text-transform:uppercase;
  transition:transform var(--transicion), box-shadow var(--transicion),
             background var(--transicion), color var(--transicion), border-color var(--transicion);
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn:active{ transform:scale(.97); }

.btn--oro{
  background:linear-gradient(135deg,var(--oro-claro),var(--oro) 45%,var(--oro-hondo));
  color:#150e00;
  box-shadow:0 12px 28px -16px rgba(245,179,43,.6);
}
.btn--oro:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -16px rgba(245,179,43,.85); }

.btn--wa{
  background:var(--wa); color:#052b13;
  box-shadow:0 12px 28px -16px rgba(37,211,102,.6);
}
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -16px rgba(37,211,102,.85); }

.btn--linea{
  border:1.5px solid rgba(255,255,255,.22); color:var(--hueso);
  backdrop-filter:blur(8px);
}
.btn--linea:hover{ border-color:var(--oro); color:var(--oro); transform:translateY(-3px); }

.btn--bloque{ width:100%; }
.btn--sm{ padding:11px 20px; font-size:.74rem; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.encabezado-sitio{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .35s ease, box-shadow .35s ease, height .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.encabezado-sitio.fijo{
  height:64px;
  background:rgba(6,6,6,.82);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--linea-sutil);
  box-shadow:0 12px 40px -20px #000;
}
.barra{ display:flex; align-items:center; justify-content:space-between; gap:22px; }

.marca-nav{ display:flex; align-items:center; gap:11px; flex:none; }
.marca-nav img{ height:34px; width:auto; transition:height .35s ease; }
.encabezado-sitio.fijo .marca-nav img{ height:28px; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,241,234,.72); position:relative; padding:6px 0;
  transition:color .25s ease;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--oro); transition:width .3s ease;
}
.nav a:hover{ color:var(--blanco); }
.nav a:hover::after{ width:100%; }

.acciones-nav{ display:flex; align-items:center; gap:12px; flex:none; }

.hamburguesa{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--linea-sutil);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.hamburguesa span{
  display:block; width:19px; height:2px; background:var(--hueso); border-radius:2px;
  transition:transform .3s ease, opacity .25s ease;
}
.hamburguesa.abierta span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa.abierta span:nth-child(2){ opacity:0; }
.hamburguesa.abierta span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menú móvil */
.menu-movil{
  position:fixed; inset:0; z-index:79;
  background:rgba(6,6,6,.97); backdrop-filter:blur(22px);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
  opacity:0; visibility:hidden; transition:opacity .34s ease, visibility .34s ease;
  padding:100px 24px 40px;
}
.menu-movil.abierto{ opacity:1; visibility:visible; }
.menu-movil a{
  font-family:var(--display); font-size:clamp(2rem,9vw,2.9rem); text-transform:uppercase;
  color:var(--hueso); padding:6px 0; transform:translateY(16px); opacity:0;
  transition:transform .4s ease, opacity .4s ease, color .2s ease;
}
.menu-movil.abierto a{ transform:none; opacity:1; }
.menu-movil a:active,.menu-movil a:hover{ color:var(--oro); }
.menu-movil .btn{ margin-top:26px; }
.menu-movil .redes-fila{ margin-top:34px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100svh; display:flex; align-items:center;
  position:relative; padding:calc(var(--nav-h) + 20px) 0 clamp(96px,14vh,132px); overflow:hidden;
}
.hero__luz{
  position:absolute; z-index:0; border-radius:50%; filter:blur(90px); pointer-events:none;
}
.hero__luz--1{
  width:min(760px,105vw); height:min(760px,105vw);
  background:radial-gradient(circle,rgba(245,179,43,.34),transparent 63%);
  top:-14%; left:50%; transform:translateX(-50%);
  animation:latido 9s ease-in-out infinite;
}
.hero__luz--2{
  width:420px; height:420px;
  background:radial-gradient(circle,rgba(245,179,43,.14),transparent 70%);
  bottom:-10%; right:-8%;
  animation:latido 11s ease-in-out infinite reverse;
}
@keyframes latido{ 0%,100%{opacity:.85; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.08);} }
.hero__luz--2{ animation-name:latido2; }
@keyframes latido2{ 0%,100%{opacity:.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.12);} }

.hero::after{
  content:''; position:absolute; inset:auto 0 0 0; height:190px; z-index:1;
  background:linear-gradient(180deg,transparent,var(--negro));
  pointer-events:none;
}
.hero .contenedor{ text-align:center; }

.hero__aviso{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px 8px 10px; border-radius:100px;
  border:1px solid var(--linea); background:rgba(245,179,43,.06);
  font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--oro-claro); margin-bottom:26px;
}
.punto{
  width:7px; height:7px; border-radius:50%; background:var(--wa); flex:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.65); animation:pulso 2.2s infinite;
}
@keyframes pulso{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.6); }
  70%{ box-shadow:0 0 0 9px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

.hero__logo{
  width:min(560px,80vw); margin:0 auto 20px;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.65)) drop-shadow(0 0 60px rgba(245,179,43,.24));
  animation:flotar 6.5s ease-in-out infinite;
}
@keyframes flotar{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-13px);} }

.hero h1{
  font-size:clamp(1.55rem,4.4vw,2.9rem);
  letter-spacing:.02em; margin-bottom:18px;
}
.hero__sub{
  max-width:54ch; margin:0 auto 32px; color:var(--gris);
  font-size:clamp(1rem,2.1vw,1.14rem);
}
.hero__botones{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hero__datos{
  margin-top:clamp(30px,4vw,48px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--linea-sutil); border:1px solid var(--linea-sutil);
  border-radius:var(--radio); overflow:hidden;
  max-width:820px; margin-inline:auto;
}
.dato{ background:rgba(11,11,11,.72); backdrop-filter:blur(6px); padding:22px 16px; }
.dato b{
  display:block; font-family:var(--display); font-size:clamp(1.4rem,3.4vw,2rem);
  color:var(--oro); line-height:1;
}
.dato span{
  display:block; margin-top:8px; font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gris-2);
}

.flecha-scroll{
  position:absolute; bottom:20px; pointer-events:none; left:50%; transform:translateX(-50%); z-index:3;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gris-2);
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.flecha-scroll i{
  display:block; width:1px; height:30px;
  background:linear-gradient(180deg,var(--oro),transparent);
  animation:bajar 2s ease-in-out infinite;
}
@keyframes bajar{ 0%,100%{opacity:.25; transform:scaleY(.55);} 50%{opacity:1; transform:scaleY(1);} }

/* ==========================================================================
   BANDA DESLIZANTE
   ========================================================================== */
.banda{
  background:linear-gradient(90deg,var(--oro-hondo),var(--oro) 32%,var(--oro-claro) 50%,var(--oro) 68%,var(--oro-hondo));
  padding:13px 0; overflow:hidden; position:relative; z-index:2;
  border-block:1px solid rgba(0,0,0,.35);
}
.banda__pista{ display:flex; width:max-content; animation:deslizar 32s linear infinite; }
.banda__grupo{ display:flex; align-items:center; gap:30px; padding-right:30px; }
.banda span{
  font-family:var(--display); font-size:1.02rem; letter-spacing:.11em;
  color:#120c00; text-transform:uppercase; white-space:nowrap;
}
.banda i{ color:#120c00; font-style:normal; font-size:.8rem; opacity:.65; }
@keyframes deslizar{ to{ transform:translateX(-50%); } }

.marcas-banda{
  overflow:hidden; padding:8px 0; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marcas-banda__pista{ display:flex; width:max-content; animation:deslizar 44s linear infinite; }
.marcas-banda__grupo{ display:flex; gap:14px; padding-right:14px; }
.marca-chip{
  display:flex; align-items:center; height:66px; padding:0 30px;
  border:1px solid var(--linea-sutil); border-radius:var(--radio-s);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  font-family:var(--display); font-size:1.05rem; letter-spacing:.07em;
  color:rgba(244,241,234,.62); white-space:nowrap;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.marcas-banda:hover .marcas-banda__pista{ animation-play-state:paused; }
.marca-chip:hover{ color:var(--oro); border-color:var(--linea); background:rgba(245,179,43,.06); }

/* ==========================================================================
   SECCIÓN MARCA / NOSOTROS
   ========================================================================== */
.nosotros{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,80px); align-items:center; }

.nosotros__visual{ position:relative; }
.marco-logo{
  position:relative; aspect-ratio:1; border-radius:var(--radio);
  border:2px solid var(--oro); background:var(--negro-2);
  display:grid; place-items:center; padding:14%;
  overflow:hidden; box-shadow:var(--sombra);
}
.marco-logo::before{
  content:''; position:absolute; inset:0;
  background:url('../img/patron.svg') repeat; background-size:150px; opacity:.85;
}
.marco-logo img{ position:relative; z-index:2; width:100%; }
.marco-logo .esquina{
  position:absolute; width:26%; height:16%; z-index:2;
  border:2px solid var(--oro); display:grid; place-items:center;
}
.marco-logo .esquina img{ width:34%; }
.marco-logo .esquina--tl{ top:5%; left:5%; }
.marco-logo .esquina--tr{ top:5%; right:5%; }
.marco-logo::after{
  content:''; position:absolute; z-index:2; left:5%; right:5%; bottom:9%;
  height:2px; background:var(--oro);
}

.sello{
  position:absolute; right:-18px; bottom:-18px; z-index:4;
  width:120px; height:120px; border-radius:50%;
  background:linear-gradient(135deg,var(--oro-claro),var(--oro-hondo));
  color:#150e00; display:grid; place-items:center; text-align:center;
  font-family:var(--display); font-size:.82rem; line-height:1.15; letter-spacing:.05em;
  box-shadow:0 18px 40px -14px rgba(245,179,43,.7);
  animation:girar 18s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
.sello span{ animation:girar 18s linear infinite reverse; display:block; padding:6px; }

.lista-ventajas{ display:grid; gap:14px; margin-top:34px; }
.ventaja{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 20px; border-radius:var(--radio-s);
  border:1px solid var(--linea-sutil); background:rgba(255,255,255,.022);
  transition:border-color var(--transicion), transform var(--transicion), background var(--transicion);
}
.ventaja:hover{ border-color:var(--linea); transform:translateX(6px); background:rgba(245,179,43,.045); }
.ventaja__icono{
  flex:none; width:42px; height:42px; border-radius:11px;
  background:rgba(245,179,43,.12); border:1px solid var(--linea);
  display:grid; place-items:center; color:var(--oro);
}
.ventaja__icono svg{ width:20px; height:20px; }
.ventaja h4{ font-family:var(--texto); font-size:.98rem; font-weight:800; text-transform:none; letter-spacing:0; margin-bottom:3px; }
.ventaja p{ font-size:.9rem; color:var(--gris); line-height:1.55; }

/* ==========================================================================
   CATÁLOGO
   ========================================================================== */
.filtros{
  display:flex; gap:9px; flex-wrap:wrap; margin-bottom:38px;
  justify-content:center;
}
.filtro{
  padding:10px 20px; border-radius:100px;
  border:1px solid var(--linea-sutil); background:rgba(255,255,255,.03);
  font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); transition:all .26s ease;
}
.filtro:hover{ color:var(--hueso); border-color:rgba(255,255,255,.2); }
.filtro.activo{
  background:linear-gradient(135deg,var(--oro-claro),var(--oro-hondo));
  color:#150e00; border-color:transparent;
  box-shadow:0 10px 26px -12px rgba(245,179,43,.75);
}

.rejilla{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}

.card{
  position:relative; border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--linea-sutil); background:var(--carbon);
  display:flex; flex-direction:column; text-align:left;
  transition:transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
  animation:aparecer .5s both;
}
@keyframes aparecer{ from{ opacity:0; transform:translateY(18px); } }
.card:hover{ transform:translateY(-8px); border-color:var(--linea); box-shadow:var(--sombra-oro); }
.card--destacado{ border-color:rgba(245,179,43,.26); }
.card--destacado:hover{ border-color:rgba(245,179,43,.5); }

.card__foto{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--negro-2); flex:none;
}
.card__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.card:hover .card__foto img{ transform:scale(1.07); }

/* Marco de marca cuando el producto todavía no tiene foto */
.marco-vacio{
  position:absolute; inset:0; display:grid; place-items:center;
  background:url('../img/patron.svg') repeat; background-size:130px;
}
.marco-vacio::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,42%),rgba(245,179,43,.22),transparent 64%);
}
.marco-vacio__interno{
  position:relative; z-index:2; text-align:center; padding:20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.marco-vacio img{ width:46px; opacity:.95; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.marco-vacio b{
  font-family:var(--display); font-size:.78rem; letter-spacing:.24em;
  color:rgba(245,179,43,.72); text-transform:uppercase;
}

.card__etiqueta{
  position:absolute; top:13px; left:13px; z-index:3;
  padding:6px 13px; border-radius:100px;
  background:linear-gradient(135deg,var(--oro-claro),var(--oro-hondo));
  color:#150e00; font-size:.61rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.9);
}
.card__cat{
  position:absolute; top:13px; right:13px; z-index:3;
  padding:6px 13px; border-radius:100px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(8px);
  border:1px solid var(--linea-sutil);
  font-size:.61rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--hueso);
}

.card__cuerpo{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; gap:9px; }
.card__nombre{
  font-family:var(--display); font-size:1.28rem; letter-spacing:.015em;
  color:var(--blanco); line-height:1.05;
}
.card__desc{
  font-size:.87rem; color:var(--gris); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__pie{
  margin-top:auto; padding-top:16px; display:flex; align-items:flex-end;
  justify-content:space-between; gap:14px;
  border-top:1px solid var(--linea-sutil);
}
.card__precio small{
  display:block; font-size:.62rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gris-2); margin-bottom:2px;
}
.card__precio b{
  font-family:var(--display); font-size:1.42rem; color:var(--oro); letter-spacing:.01em;
}
.card__precio b em{ font-style:normal; font-size:.62em; color:var(--gris-2); margin-left:3px; }
.card__ver{
  flex:none; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--linea); color:var(--oro);
  display:grid; place-items:center;
  transition:background .28s ease, transform .28s ease, color .28s ease;
}
.card:hover .card__ver{ background:var(--oro); color:#150e00; transform:rotate(-45deg); }
.card__ver svg{ width:17px; height:17px; }

.vacio-aviso{
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--gris-2);
  border:1px dashed var(--linea-sutil); border-radius:var(--radio);
}

.nota-catalogo{
  margin-top:44px; padding:26px 30px; border-radius:var(--radio);
  border:1px solid var(--linea); background:rgba(245,179,43,.05);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.nota-catalogo p{ font-size:.95rem; color:var(--hueso); max-width:56ch; }
.nota-catalogo b{ color:var(--oro); }

/* ==========================================================================
   MODAL DE PRODUCTO
   ========================================================================== */
.modal{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:20px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.modal.abierto{ opacity:1; visibility:visible; }
.modal__fondo{ position:absolute; inset:0; background:rgba(0,0,0,.86); backdrop-filter:blur(9px); }
.modal__caja{
  position:relative; z-index:2; width:min(880px,100%);
  max-height:88svh; overflow-y:auto;
  background:var(--carbon); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:var(--sombra);
  transform:translateY(24px) scale(.97); transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.modal.abierto .modal__caja{ transform:none; }
.modal__cerrar{
  position:absolute; top:14px; right:14px; z-index:5;
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  border:1px solid var(--linea-sutil); color:var(--hueso);
  display:grid; place-items:center; font-size:1.1rem;
  transition:background .25s ease, color .25s ease;
}
.modal__cerrar:hover{ background:var(--oro); color:#150e00; }

.modal__grid{ display:grid; grid-template-columns:1fr 1fr; }
.modal__foto{ position:relative; min-height:280px; background:var(--negro-2); }
.modal__foto img{ width:100%; height:100%; object-fit:cover; }
.modal__info{ padding:32px; display:flex; flex-direction:column; }
.modal__cat{
  font-size:.66rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oro); margin-bottom:10px;
}
.modal__info h3{ font-size:clamp(1.6rem,4vw,2.2rem); color:var(--blanco); margin-bottom:12px; }
.modal__info > p{ color:var(--gris); font-size:.94rem; margin-bottom:22px; }

.tabla-precios{ border:1px solid var(--linea-sutil); border-radius:var(--radio-s); overflow:hidden; margin-bottom:22px; }
.tabla-precios__fila{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:12px 17px; font-size:.9rem;
  border-bottom:1px solid var(--linea-sutil);
}
.tabla-precios__fila:last-child{ border-bottom:0; }
.tabla-precios__fila:nth-child(odd){ background:rgba(255,255,255,.02); }
.tabla-precios__fila span{ color:var(--gris); font-weight:600; letter-spacing:.04em; }
.tabla-precios__fila b{ font-family:var(--display); font-size:1.08rem; color:var(--oro); letter-spacing:.02em; }
.modal__acciones{ margin-top:auto; display:grid; gap:10px; }
.modal__aviso{ font-size:.74rem; color:var(--gris-2); text-align:center; margin-top:4px; }

/* ==========================================================================
   MENÚ / DESCARGA
   ========================================================================== */
.menu-bloque{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,5vw,64px);
  align-items:center;
  border:1px solid var(--linea); border-radius:clamp(20px,3vw,28px);
  background:linear-gradient(150deg,rgba(245,179,43,.09),rgba(255,255,255,.015) 42%,transparent);
  padding:clamp(28px,4vw,48px); position:relative; overflow:hidden;
}
.menu-bloque::before{
  content:''; position:absolute; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,179,43,.22),transparent 68%);
  filter:blur(60px); top:-42%; right:-14%; pointer-events:none;
}
.menu-portada{
  position:relative; aspect-ratio:3/4; border-radius:var(--radio);
  border:2px solid var(--oro); overflow:hidden;
  background:url('../img/patron.svg') repeat; background-size:140px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:26px; text-align:center;
  box-shadow:var(--sombra); transform:rotate(-2.4deg);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.menu-portada:hover{ transform:rotate(0) translateY(-6px); }
.menu-portada::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%,rgba(245,179,43,.2),transparent 60%);
}
.menu-portada img{ width:62%; position:relative; z-index:2; }
.menu-portada b{
  position:relative; z-index:2; font-family:var(--display);
  font-size:.84rem; letter-spacing:.34em; color:var(--oro); text-transform:uppercase;
}
.menu-portada .paginas{
  position:relative; z-index:2; font-size:.68rem; letter-spacing:.14em;
  color:var(--gris-2); text-transform:uppercase; font-weight:700;
}
.menu-bloque__texto .btn{ margin-top:6px; }
.menu-acciones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.menu-lista{ display:grid; gap:11px; margin-top:26px; }
.menu-lista li{
  display:flex; gap:12px; align-items:center; font-size:.92rem; color:var(--gris);
}
.menu-lista svg{ width:18px; height:18px; color:var(--oro); flex:none; }

/* ==========================================================================
   PASOS
   ========================================================================== */
.pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:paso; }
.paso{
  position:relative; padding:32px 24px 28px;
  border:1px solid var(--linea-sutil); border-radius:var(--radio);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
  transition:border-color var(--transicion), transform var(--transicion);
}
.paso:hover{ border-color:var(--linea); transform:translateY(-6px); }
.paso::before{
  counter-increment:paso; content:'0' counter(paso);
  font-family:var(--display); font-size:2.5rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.4px rgba(245,179,43,.5);
  display:block; margin-bottom:16px;
}
.paso h4{ font-family:var(--display); font-size:1.12rem; color:var(--blanco); margin-bottom:8px; }
.paso p{ font-size:.88rem; color:var(--gris); line-height:1.55; }

/* ==========================================================================
   ENVÍOS
   ========================================================================== */
.envios{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tarjeta-envio{
  padding:30px 26px; border-radius:var(--radio);
  border:1px solid var(--linea-sutil); background:var(--carbon);
  transition:border-color var(--transicion), transform var(--transicion);
}
.tarjeta-envio:hover{ border-color:var(--linea); transform:translateY(-6px); }
.tarjeta-envio__icono{
  width:48px; height:48px; border-radius:13px; margin-bottom:18px;
  background:rgba(245,179,43,.11); border:1px solid var(--linea);
  display:grid; place-items:center; color:var(--oro);
}
.tarjeta-envio__icono svg{ width:23px; height:23px; }
.tarjeta-envio h4{ font-family:var(--display); font-size:1.18rem; color:var(--blanco); margin-bottom:9px; }
.tarjeta-envio p{ font-size:.89rem; color:var(--gris); line-height:1.6; }
.tarjeta-envio strong{ color:var(--oro-claro); font-weight:800; }

.aviso-legal{
  margin-top:26px; padding:20px 24px; border-radius:var(--radio-s);
  border:1px solid var(--linea-sutil); background:rgba(255,255,255,.02);
  font-size:.82rem; color:var(--gris-2); line-height:1.6;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ display:grid; gap:12px; max-width:900px; margin-inline:auto; }
.faq__item{
  border:1px solid var(--linea-sutil); border-radius:var(--radio-s);
  background:rgba(255,255,255,.022); overflow:hidden;
  transition:border-color .3s ease, background .3s ease;
}
.faq__item.abierto{ border-color:var(--linea); background:rgba(245,179,43,.045); }
.faq__pregunta{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 24px; text-align:left;
  font-size:1rem; font-weight:800; color:var(--hueso);
}
.faq__pregunta i{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--linea); color:var(--oro);
  display:grid; place-items:center; font-style:normal; font-size:1.05rem;
  transition:transform .32s ease, background .3s ease, color .3s ease;
}
.faq__item.abierto .faq__pregunta i{ transform:rotate(45deg); background:var(--oro); color:#150e00; }
.faq__respuesta{ max-height:0; overflow:hidden; transition:max-height .42s cubic-bezier(.22,1,.36,1); }
.faq__respuesta p{ padding:0 24px 22px; font-size:.93rem; color:var(--gris); line-height:1.65; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta{
  position:relative; overflow:hidden; text-align:center;
  border-radius:clamp(20px,3vw,30px); border:1px solid var(--linea);
  padding:clamp(48px,7vw,86px) clamp(24px,5vw,60px);
  background:linear-gradient(155deg,rgba(245,179,43,.13),rgba(255,255,255,.02) 45%,transparent);
}
.cta::before{
  content:''; position:absolute; inset:0;
  background:url('../img/patron.svg') repeat; background-size:170px; opacity:.5; z-index:0;
}
.cta > *{ position:relative; z-index:2; }
.cta h2{ margin-bottom:18px; }
.cta p{ color:var(--gris); max-width:52ch; margin:0 auto 34px; }
.cta__botones{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.redes-fila{ display:flex; gap:11px; justify-content:center; flex-wrap:wrap; }
.red{
  width:48px; height:48px; border-radius:14px;
  border:1px solid var(--linea-sutil); background:rgba(255,255,255,.03);
  display:grid; place-items:center; color:var(--hueso);
  transition:all .28s ease;
}
.red svg{ width:20px; height:20px; }
.red:hover{ background:var(--oro); color:#150e00; border-color:transparent; transform:translateY(-4px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.pie{
  border-top:1px solid var(--linea-sutil); padding:clamp(50px,6vw,72px) 0 30px;
  position:relative; z-index:2; background:rgba(0,0,0,.4);
}
.pie__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:48px;
}
.pie__marca img{ width:190px; margin-bottom:18px; }
.pie__marca p{ font-size:.88rem; color:var(--gris-2); max-width:34ch; margin-bottom:20px; }
.pie h5{
  font-family:var(--display); font-size:.86rem; letter-spacing:.2em;
  color:var(--oro); text-transform:uppercase; margin:0 0 18px;
}
.pie__links{ display:grid; gap:11px; }
.pie__links a{ font-size:.89rem; color:var(--gris); transition:color .22s ease, padding-left .22s ease; }
.pie__links a:hover{ color:var(--oro); padding-left:5px; }
.pie__contacto{ display:grid; gap:13px; }
.pie__contacto a{ display:flex; gap:11px; align-items:center; font-size:.89rem; color:var(--gris); transition:color .22s ease; }
.pie__contacto a:hover{ color:var(--oro); }
.pie__contacto svg{ width:17px; height:17px; color:var(--oro); flex:none; }
.pie__base{
  border-top:1px solid var(--linea-sutil); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:.78rem; color:var(--gris-2);
}
.pie__base b{ color:var(--oro); font-weight:800; }

/* ==========================================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================================== */
.wa-flotante{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:flex; align-items:center; gap:12px;
  padding:13px 22px 13px 15px; border-radius:100px;
  background:var(--wa); color:#052b13;
  font-weight:800; font-size:.82rem; letter-spacing:.05em;
  box-shadow:0 16px 40px -12px rgba(37,211,102,.72);
  transform:translateY(120px); opacity:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, box-shadow .3s ease;
}
.wa-flotante.visible{ transform:none; opacity:1; }
.wa-flotante:hover{ box-shadow:0 22px 50px -12px rgba(37,211,102,.95); }
.wa-flotante svg{ width:25px; height:25px; flex:none; }
.wa-flotante::after{
  content:''; position:absolute; inset:0; border-radius:100px;
  border:2px solid var(--wa); animation:onda 2.6s ease-out infinite;
}
@keyframes onda{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.28); opacity:0; }
}

/* ==========================================================================
   VERIFICACIÓN DE EDAD
   ========================================================================== */
.edad{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(4,4,4,.97); backdrop-filter:blur(14px); padding:24px;
  transition:opacity .45s ease, visibility .45s ease;
}
.edad.oculto{ opacity:0; visibility:hidden; }
.edad__caja{
  width:min(460px,100%); text-align:center;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--carbon); padding:clamp(30px,5vw,44px);
  box-shadow:var(--sombra);
}
.edad__caja img{ width:200px; margin:0 auto 24px; }
.edad__caja h3{ font-size:1.5rem; color:var(--blanco); margin-bottom:12px; }
.edad__caja p{ font-size:.9rem; color:var(--gris); margin-bottom:26px; }
.edad__botones{ display:grid; gap:10px; }
.edad__nota{ margin-top:20px; font-size:.72rem; color:var(--gris-2); line-height:1.5; }

/* ==========================================================================
   ANIMACIÓN DE ENTRADA AL HACER SCROLL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.visto{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .pie__grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .pasos{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .nav{ display:none; }
  .acciones-nav .btn{ display:none; }
  .hamburguesa{ display:flex; }
  .nosotros{ grid-template-columns:1fr; }
  .nosotros__visual{ max-width:420px; margin-inline:auto; width:100%; }
  .menu-bloque{ grid-template-columns:1fr; }
  .menu-portada{ max-width:300px; margin-inline:auto; }
  .envios{ grid-template-columns:1fr; }
  .modal__grid{ grid-template-columns:1fr; }
  .modal__foto{ min-height:210px; max-height:240px; }
}

@media (max-width:640px){
  body{ font-size:15.5px; }
  .contenedor{ padding-inline:18px; }
  .hero__datos{ grid-template-columns:1fr; }
  .dato{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 20px; text-align:left; }
  .dato b{ font-size:1.25rem; }
  .dato span{ margin-top:0; text-align:right; }
  .rejilla{ grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:13px; }
  .card__cuerpo{ padding:15px 15px 17px; gap:7px; }
  .card__nombre{ font-size:1.02rem; }
  .card__desc{ font-size:.79rem; -webkit-line-clamp:2; }
  .card__precio b{ font-size:1.12rem; }
  .card__ver{ width:34px; height:34px; }
  .card__pie{ padding-top:12px; }
  .pasos{ grid-template-columns:1fr; }
  .pie__grid{ grid-template-columns:1fr; }
  .modal__info{ padding:24px 22px 26px; }
  .nota-catalogo{ flex-direction:column; align-items:flex-start; }
  .nota-catalogo .btn{ width:100%; }
  .wa-flotante{ right:14px; bottom:14px; padding:12px 18px 12px 13px; font-size:.76rem; }
  .btn{ padding:14px 24px; font-size:.79rem; }
  .hero__botones .btn{ width:100%; }
  .sello{ width:92px; height:92px; font-size:.68rem; right:-8px; bottom:-8px; }
  .filtros{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; margin-inline:-18px; padding-inline:18px; }
  .filtros::-webkit-scrollbar{ display:none; }
  .filtro{ flex:none; }
}