/* ============================================================
   ÁLBUM MUNDIAL — MAIN STYLESHEET v2
   Paleta original vibrante · Mobile-first · Premium
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── VARIABLES — Paleta Mundial ─────────────────────────── */
:root {
  /* Rojo mundial */
  --coral:        #CC1A30;
  --coral-dark:   #A01122;
  --coral-light:  #E83348;
  /* Verde México */
  --turquoise:    #007A40;
  --turq-dark:    #004D25;
  --turq-light:   #00A855;
  /* Verde noche profundo — estilo estadio México */
  --night:        #000D05;
  --night-mid:    #001608;
  --night-soft:   #002410;
  /* Dorado trofeo */
  --gold:         #E0A000;
  --gold-light:   #F5C418;
  --gold-pale:    #FEE878;
  --white:        #F8FAFC;
  --gray-light:   #EEF2F7;
  --gray:         #8898AA;
  --gray-dark:    #4A5568;
  --purple:       #5B21A8;
  --purple-light: #8B5CF6;

  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Inter', sans-serif;

  --section-py:   5.5rem;
  --radius:       1rem;
  --radius-sm:    0.5rem;
  --radius-lg:    1.25rem;
  --radius-xl:    1.5rem;
  --radius-2xl:   2rem;

  --shadow-sm:    0 2px 8px rgba(0,13,5,0.35);
  --shadow-md:    0 8px 32px rgba(0,13,5,0.5);
  --shadow-lg:    0 20px 60px rgba(0,13,5,0.65);
  --shadow-coral: 0 8px 32px rgba(204,26,48,0.4);
  --shadow-turq:  0 8px 32px rgba(0,122,64,0.4);
  --shadow-gold:  0 8px 32px rgba(224,160,0,0.4);

  --transition:   0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  --transition-slow: 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: url('../FONDOS/FONDO%20PRINCIPAL.jpeg') center top / cover fixed no-repeat;
  background-color: var(--night);
  color: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; display:block; }
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }
input,select,textarea,button { font-family:var(--font-body); }

/* ─── UTILITIES ──────────────────────────────────────────── */
.container   { width:100%; max-width:1220px; margin:0 auto; padding:0 1.5rem; }
.section-py  { padding:var(--section-py) 0; }
.text-center { text-align:center; }
.text-coral  { color:var(--coral); }
.text-gold   { color:var(--gold); }
.text-turq   { color:var(--turquoise); }

/* ─── BADGES ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-coral  { background:linear-gradient(135deg,var(--coral),var(--coral-dark)); color:#fff; box-shadow:0 2px 12px rgba(204,26,48,0.4); }
.badge-gold   { background:linear-gradient(135deg,var(--gold-light),var(--gold));  color:var(--night); box-shadow:0 2px 12px rgba(224,160,0,0.4); }
.badge-turq   { background:linear-gradient(135deg,var(--turq-light),var(--turquoise)); color:#fff; box-shadow:0 2px 12px rgba(0,122,64,0.4); }
.badge-purple { background:linear-gradient(135deg,var(--purple-light),var(--purple)); color:#fff; }

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal        { opacity:0; transform:translateY(44px); transition:opacity 0.75s ease,transform 0.75s ease; }
.reveal-left   { opacity:0; transform:translateX(-50px); transition:opacity 0.75s ease,transform 0.75s ease; }
.reveal-right  { opacity:0; transform:translateX(50px);  transition:opacity 0.75s ease,transform 0.75s ease; }
.reveal.visible,.reveal-left.visible,.reveal-right.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.1s!important; }
.delay-2 { transition-delay:.2s!important; }
.delay-3 { transition-delay:.3s!important; }
.delay-4 { transition-delay:.4s!important; }
.delay-5 { transition-delay:.5s!important; }
.delay-6 { transition-delay:.6s!important; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 2rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .02em;
  text-align: center;
}
.btn::after {
  content:'';
  position:absolute; inset:0;
  background:rgba(255,255,255,.13);
  opacity:0;
  transition:opacity .2s;
}
.btn:hover::after { opacity:1; }
.btn:active       { transform:scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--coral-light), var(--coral-dark));
  color:#fff;
  box-shadow: var(--shadow-coral);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(204,26,48,.55); }

.btn-secondary {
  background: rgba(255,255,255,.06);
  color:var(--white);
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}
.btn-secondary:hover { border-color:var(--white); background:rgba(255,255,255,.12); transform:translateY(-2px); }

.btn-turq {
  background: linear-gradient(135deg, var(--turq-light), var(--turq-dark));
  color:#fff;
  box-shadow: var(--shadow-turq);
}
.btn-turq:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,122,64,.55); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-pale), var(--gold));
  color:var(--night);
  box-shadow: var(--shadow-gold);
  font-weight:900;
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(224,160,0,.55); }

.btn-whatsapp {
  background: linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
}
.btn-whatsapp:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(37,211,102,.55); }

.btn-outline-coral {
  background: transparent;
  color: var(--coral-light);
  border: 2px solid var(--coral);
}
.btn-outline-coral:hover { background: var(--coral); color:#fff; transform:translateY(-2px); }

.btn-lg   { padding:1.1rem 2.4rem; font-size:1.08rem; border-radius:var(--radius-xl); }
.btn-sm   { padding:.55rem 1.2rem; font-size:.85rem; border-radius:var(--radius-sm); }
.btn-full { width:100%; }

/* ─── SECTION HEADINGS ───────────────────────────────────── */
.section-label {
  display:inline-block;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--coral-light);
  margin-bottom:.65rem;
  position:relative;
  padding-left:1.2rem;
}
.section-label::before {
  content:'';
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:8px; height:8px;
  background:var(--coral);
  border-radius:2px;
  transform:translateY(-50%) rotate(45deg);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: .03em;
  color: var(--white);
}
.section-title span  { color:var(--coral); }
.section-title .gold { color:var(--gold); }
.section-title .turq { color:var(--turquoise); }
.section-sub {
  font-size:1.05rem;
  color:rgba(248,250,252,.65);
  max-width:580px;
  margin:.9rem auto 0;
  line-height:1.7;
}
.section-header { margin-bottom:3rem; }

/* Divider line -->
.section-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  margin:0;
}

/* ─── PROMO BAR ──────────────────────────────────────────── */
.promo-bar {
  background: linear-gradient(90deg, var(--night-mid) 0%, var(--turq-dark) 50%, var(--night-mid) 100%);
  padding: .65rem 1rem;
  text-align: center;
  position: relative;
  z-index: 1001;
  overflow: hidden;
}
.promo-bar::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);
  animation:shimmerBar 3s linear infinite;
}
.promo-bar-text {
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.06em;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}
.promo-dot { width:5px; height:5px; background:#fff; border-radius:50%; opacity:.7; }

/* ─── NAVBAR ─────────────────────────────────────────────── */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:1rem 0;
  background: linear-gradient(180deg, rgba(0,6,2,.82) 0%, rgba(0,6,2,.50) 60%, transparent 100%);
  transition:background .4s,padding .4s,box-shadow .4s;
}
.navbar.scrolled {
  background: rgba(0,10,3,.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding:.65rem 0;
  box-shadow:0 4px 40px rgba(0,0,0,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.navbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.nav-logo {
  font-family:var(--font-display);
  font-size:1.65rem;
  letter-spacing:.06em;
  color:var(--white);
  display:flex; align-items:center; gap:.5rem;
  transition:opacity .2s;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.nav-logo:hover { opacity:.88; }
.logo-icon {
  width:38px; height:38px;
  background:linear-gradient(135deg,var(--coral-light),var(--coral-dark));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
  box-shadow:var(--shadow-coral);
}
.nav-logo .brand-highlight { color:var(--coral-light); }

.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a {
  font-size:.88rem;
  font-weight:700;
  color:rgba(248,250,252,.95);
  letter-spacing:.03em;
  transition:color .2s;
  position:relative;
  padding:.2rem 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-2px; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,var(--coral),var(--turquoise));
  border-radius:2px;
  transform:scaleX(0);
  transition:transform .25s;
  transform-origin:left;
}
.nav-links a:hover           { color:var(--white); }
.nav-links a:hover::after    { transform:scaleX(1); }
.nav-cta { margin-left:.5rem; }

.nav-toggle {
  display:none;
  background:none; border:none;
  cursor:pointer;
  flex-direction:column; gap:5px;
  padding:4px;
  position:relative;
  z-index:1001;
}
.nav-toggle span { display:block; width:26px; height:2px; background:var(--white); border-radius:2px; transition:var(--transition); }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px) {
  .nav-toggle { display:flex; }
  .nav-links {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    flex-direction:column; justify-content:flex-start;
    background:rgba(0,10,3,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    gap:1.4rem;
    transform:translateX(100%);
    transition:transform .4s ease;
    z-index:999;
    padding:5.5rem 2rem 2.5rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open  { transform:translateX(0); }
  .nav-links a     { font-size:1.35rem; }
  .nav-cta { margin-top:.6rem; }
  .nav-cta .btn    { width:100%; justify-content:center; font-size:1.1rem; padding:1rem 2rem; }
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background: transparent;
  padding-top:56px; /* promo bar */
}

/* Fondo de partículas/líneas diagonales */
.hero-bg {
  position:absolute; inset:0;
  overflow:hidden; z-index:0;
}
/* Floodlight derecho — verde estadio */
.hero-bg::before {
  content:'';
  position:absolute;
  top:-20%; right:-10%;
  width:80vw; height:80vw;
  background:radial-gradient(circle,rgba(0,168,85,.30) 0%,rgba(0,122,64,.12) 40%,transparent 70%);
  border-radius:50%;
  animation:pulseBg 7s ease-in-out infinite alternate;
}
/* Floodlight izquierdo — rojo México */
.hero-bg::after {
  content:'';
  position:absolute;
  top:-15%; left:-12%;
  width:65vw; height:65vw;
  background:radial-gradient(circle,rgba(204,26,48,.28) 0%,rgba(204,26,48,.08) 45%,transparent 70%);
  border-radius:50%;
  animation:pulseBg 9s ease-in-out infinite alternate-reverse;
}

/* Grid overlay */
.hero-grid {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:70px 70px;
}

/* Líneas diagonales decorativas */
.hero-lines {
  position:absolute; inset:0; z-index:1; overflow:hidden;
}
.hero-line {
  position:absolute;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(0,168,85,.3),transparent);
  animation:lineFloat 8s ease-in-out infinite;
}
.hero-line:nth-child(1) { left:15%; height:40%; top:10%; animation-delay:0s; }
.hero-line:nth-child(2) { left:35%; height:30%; top:30%; animation-delay:1.5s; background:linear-gradient(180deg,transparent,rgba(204,26,48,.25),transparent); }
.hero-line:nth-child(3) { left:60%; height:50%; top:5%;  animation-delay:3s; background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent); }
.hero-line:nth-child(4) { left:80%; height:35%; top:20%; animation-delay:4.5s; background:linear-gradient(180deg,transparent,rgba(224,160,0,.25),transparent); }

/* Geo shapes */
.geo-shape {
  position:absolute;
  border-radius:4px;
  animation:floatShape 15s ease-in-out infinite;
}
.geo-shape:nth-child(1) { width:180px; height:180px; top:12%; left:4%; border:2px solid rgba(204,26,48,.08); transform:rotate(15deg); animation-duration:12s; }
.geo-shape:nth-child(2) { width:90px;  height:90px;  top:65%; left:78%; border:2px solid rgba(0,122,64,.1); transform:rotate(45deg); animation-duration:9s; animation-delay:-3s; }
.geo-shape:nth-child(3) { width:130px; height:130px; top:78%; left:12%; border:2px solid rgba(255,255,255,.04); transform:rotate(-20deg); animation-duration:14s; animation-delay:-5s; }
.geo-shape:nth-child(4) { width:60px;  height:60px;  top:28%; right:8%; border:2px solid rgba(224,160,0,.1); transform:rotate(30deg); animation-duration:10s; animation-delay:-7s; }

.hero-gradient {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(160deg,
    rgba(0,8,2,.78) 0%,
    rgba(0,12,3,.38) 45%,
    rgba(0,8,2,.72) 100%
  );
}
/* Resplandor de cancha — luz verde desde abajo */
.hero-floor-glow {
  position:absolute;
  bottom:0; left:0; right:0;
  height:55%;
  background:radial-gradient(ellipse 90% 60% at 50% 100%, rgba(0,168,85,.22) 0%, rgba(0,100,50,.08) 55%, transparent 80%);
  z-index:2;
  pointer-events:none;
}

.hero .container {
  position:relative; z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
  padding-top:5rem;
  padding-bottom:4rem;
}

/* Hero Content */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(204,26,48,.12);
  border:1px solid rgba(204,26,48,.35);
  border-radius:999px;
  padding:.35rem 1rem;
  font-size:.75rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral-light);
  margin-bottom:1.3rem;
  animation:fadeInDown .8s ease both;
}
.hero-eyebrow .dot {
  width:7px; height:7px;
  background:var(--coral);
  border-radius:50%;
  animation:blink 1.4s ease infinite;
  box-shadow:0 0 8px var(--coral);
}

.hero-title {
  font-family:var(--font-display);
  font-size:clamp(3.2rem,7.5vw,6rem);
  line-height:.95;
  letter-spacing:.03em;
  animation:fadeInUp .9s ease .1s both;
}
.hero-title .t-white { color:var(--white); display:block; }
.hero-title .t-coral { color:var(--coral); display:block; }
.hero-title .t-gold  { color:var(--gold-light); display:block; }
.hero-title .t-turq  { color:var(--turq-light); display:block; }

.hero-sub {
  font-size:1.08rem;
  color:rgba(248,250,252,.7);
  max-width:480px;
  line-height:1.75;
  margin-top:1.3rem;
  animation:fadeInUp .9s ease .2s both;
}

.hero-urgency {
  display:inline-flex; align-items:center; gap:.6rem;
  background:linear-gradient(135deg,rgba(224,160,0,.18),rgba(224,160,0,.06));
  border:1px solid rgba(224,160,0,.45);
  border-radius:var(--radius-sm);
  padding:.55rem 1.1rem;
  font-size:.83rem; font-weight:800;
  color:var(--gold-light);
  margin-top:1.5rem;
  animation:fadeInUp .9s ease .3s both;
}
.urgency-icon { font-size:.9rem; animation:blink 2s ease infinite; }

.hero-actions {
  display:flex; gap:1rem; flex-wrap:wrap;
  margin-top:2.2rem;
  animation:fadeInUp .9s ease .4s both;
}

.hero-stats {
  display:flex; gap:2.5rem;
  margin-top:3rem; padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.08);
  animation:fadeInUp .9s ease .5s both;
}
.stat-item {}
.stat-num {
  font-family:var(--font-display);
  font-size:2.2rem;
  color:var(--coral-light);
  line-height:1;
  text-shadow:0 0 20px rgba(204,26,48,.4);
}
.stat-label {
  font-size:.75rem;
  color:rgba(248,250,252,.45);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-top:.15rem;
}

/* Hero Visual */
.hero-visual {
  display:flex; align-items:center; justify-content:center;
  animation:fadeInRight 1s ease .3s both;
  position:relative;
}
.hero-card-stack { position:relative; width:300px; height:400px; margin:0 auto; }
.hero-card {
  position:absolute;
  width:230px; height:310px;
  border-radius:var(--radius-2xl);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  box-shadow:var(--shadow-lg);
}
.hero-card:nth-child(1) {
  background:linear-gradient(145deg,var(--night-soft),var(--night-mid));
  border:1px solid rgba(255,255,255,.07);
  left:50%; top:12%;
  transform:translateX(-50%) rotate(9deg);
  animation:floatCard 7s ease-in-out infinite 1s;
}
.hero-card:nth-child(2) {
  background:linear-gradient(145deg,#0A2A15,var(--night-mid));
  border:1px solid rgba(0,168,85,.3);
  left:50%; top:6%;
  transform:translateX(-50%) rotate(-5deg);
  animation:floatCard 7s ease-in-out infinite .5s;
}
.hero-card:nth-child(3) {
  background:linear-gradient(145deg,#2A0A0A,#1A1030);
  border:1px solid rgba(204,26,48,.3);
  left:50%; top:0;
  transform:translateX(-50%) rotate(0deg);
  z-index:3;
  animation:floatCard 7s ease-in-out infinite;
}
.card-star { font-size:2.8rem; line-height:1; filter:drop-shadow(0 0 12px currentColor); }
.card-lines { display:flex; flex-direction:column; gap:7px; width:130px; }
.card-line { height:9px; border-radius:5px; background:rgba(255,255,255,.12); }
.card-line:nth-child(1) { width:100%; }
.card-line:nth-child(2) { width:72%; }
.card-line:nth-child(3) { width:50%; background:rgba(224,160,0,.5); }
.card-number { font-family:var(--font-display); font-size:3.5rem; color:rgba(255,255,255,.07); position:absolute; bottom:10px; right:16px; }
.card-glow { position:absolute; inset:0; border-radius:var(--radius-2xl); background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.05),transparent 60%); }

/* Album cover card */
.hero-card.hero-card-album {
  padding: 0;
  overflow: hidden;
  background: var(--night-mid);
  border: 2px solid rgba(224,160,0,.55) !important;
  box-shadow: 0 0 30px rgba(224,160,0,.25), var(--shadow-lg);
}
.hero-album-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: var(--radius-2xl);
}

.hero-floating-badge {
  position:absolute;
  border-radius:var(--radius);
  padding:.75rem 1.1rem;
  font-size:.78rem; font-weight:900;
  text-align:center; line-height:1.3;
  box-shadow:var(--shadow-md);
  z-index:10;
  letter-spacing:.03em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* Verde México — Edición Especial */
.hfb-gold {
  background:linear-gradient(135deg,#00C563,#007A40);
  color:#fff;
  border:2px solid rgba(0,255,120,.35);
  box-shadow:0 0 20px rgba(0,197,99,.5), var(--shadow-md);
  top:-18px; right:-20px;
  animation:floatBadge 4s ease-in-out infinite .5s;
}
/* Blanco — Mundial 2026 */
.hfb-turq {
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(230,238,248,.9));
  color:var(--night);
  border:2px solid rgba(255,255,255,.6);
  box-shadow:0 0 20px rgba(255,255,255,.3), var(--shadow-md);
  bottom:24px; left:-28px;
  animation:floatBadge 5s ease-in-out infinite 1s;
}
/* Rojo México — Stock Limitado */
.hfb-coral {
  background:linear-gradient(135deg,#FF2B45,#CC1A30);
  color:#fff;
  border:2px solid rgba(255,60,80,.4);
  box-shadow:0 0 20px rgba(204,26,48,.55), var(--shadow-md);
  top:38%; right:-32px;
  animation:floatBadge 4.5s ease-in-out infinite 0s;
}

/* Orb detrás del visual */
.hero-orb {
  position:absolute;
  width:360px; height:360px;
  background:radial-gradient(circle,rgba(0,168,85,.2) 0%,rgba(0,122,64,.08) 50%,transparent 70%);
  border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
  animation:pulseBg 5s ease-in-out infinite;
}

@media (max-width:900px) {
  .hero .container { grid-template-columns:1fr; text-align:center; padding-top:7rem; gap:3rem; }
  .hero-sub,.hero-urgency { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .hero-stats   { justify-content:center; gap:2rem; }
  .hero-visual  { order:-1; }
  .hero-card-stack { width:240px; height:310px; }
  .hero-card { width:190px; height:260px; }
  .hero-orb { width:240px; height:240px; }
}

/* ─── PRODUCTS ───────────────────────────────────────────── */
.products {
  background:
    linear-gradient(rgba(0,6,2,.42), rgba(0,6,2,.42)),
    url('../FONDOS/FONDO%20ARTICULOS.PNG') center top / cover scroll;
  position:relative; overflow:hidden;
}
.products::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--coral),var(--turquoise),transparent);
}
/* Fondo sutil */
.products::after {
  content:''; position:absolute; bottom:-20%; right:-10%;
  width:50vw; height:50vw;
  background:radial-gradient(circle,rgba(0,122,64,.07) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
}

.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.6rem;
  position:relative; z-index:1;
}

.product-card {
  background: rgba(0,10,4,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-xl);
  padding:1.9rem 1.7rem;
  position:relative;
  transition:var(--transition), background 0.4s ease;
  display:flex; flex-direction:column; gap:1rem;
  overflow:hidden;
}
/* Brillo en hover */
.product-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(204,26,48,.08),rgba(0,122,64,.05));
  opacity:0; transition:opacity .35s;
}
/* Línea superior de color */
.product-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--coral),var(--turquoise));
  transform:scaleX(0); transition:transform .4s ease;
  transform-origin:left;
}
.product-card:hover {
  transform:translateY(-8px);
  border-color:rgba(204,26,48,.45);
  box-shadow:0 24px 60px rgba(0,13,5,.6),0 0 0 1px rgba(204,26,48,.3);
  background:
    linear-gradient(rgba(0,8,3,.58), rgba(0,8,3,.58)),
    url('../FONDOS/FONDO%20ARTICULOS.PNG') center/cover no-repeat;
}
.product-card:hover::before { opacity:1; }
.product-card:hover::after  { transform:scaleX(1); }
.product-card.featured {
  border-color:rgba(224,160,0,.5);
  background:linear-gradient(145deg,rgba(224,160,0,.18),rgba(0,10,3,.72));
}
.product-card.featured::after { background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold)); }
.product-card.featured:hover  {
  border-color:var(--gold);
  box-shadow:0 24px 60px rgba(0,13,5,.6),0 0 30px rgba(224,160,0,.3);
  background:
    linear-gradient(rgba(30,15,0,.55), rgba(0,8,3,.55)),
    url('../FONDOS/FONDO%20ARTICULOS.PNG') center/cover no-repeat;
}

.product-badge-area { display:flex; gap:.4rem; flex-wrap:wrap; min-height:24px; }
.product-icon { font-size:2.8rem; line-height:1; filter:drop-shadow(0 0 10px rgba(255,255,255,.15)); }
.product-img {
  width:100%; height:200px; overflow:hidden;
  border-radius:var(--radius-lg);
  background: transparent;
  display:flex; align-items:center; justify-content:center;
}
.product-img img {
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  transition:transform .4s ease;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}
.product-card:hover .product-img img { transform:scale(1.06); }
.product-name {
  font-family:var(--font-display);
  font-size:1.65rem;
  letter-spacing:.03em;
  color:var(--white); line-height:1.1;
}
.product-includes { font-size:.86rem; color:rgba(248,250,252,.58); line-height:1.65; }
.product-includes li { display:flex; align-items:flex-start; gap:.4rem; padding:.22rem 0; }
.product-includes li::before { content:'✦'; color:var(--coral); font-size:.55rem; margin-top:4px; flex-shrink:0; }

.product-price-area { margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,.06); }
.product-price { font-family:var(--font-display); font-size:2.5rem; color:var(--white); line-height:1; }
.product-price .currency { font-size:1.2rem; color:var(--gray); font-family:var(--font-body); font-weight:700; vertical-align:top; margin-top:5px; display:inline-block; }
.product-price .unit     { font-size:.82rem; color:var(--gray); font-family:var(--font-body); font-weight:500; margin-left:.2rem; }
.product-note { font-size:.76rem; color:rgba(248,250,252,.38); margin-top:.2rem; }

.stock-indicator { display:flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:700; margin-top:.5rem; }
.stock-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; animation:blink 2s ease infinite; }
.stock-dot.green  { background:#22C55E; box-shadow:0 0 8px #22C55E; }
.stock-dot.yellow { background:#EAB308; box-shadow:0 0 8px #EAB308; }
.stock-dot.red    { background:var(--coral); box-shadow:0 0 8px var(--coral); }
.stock-text.green  { color:#4ADE80; }
.stock-text.yellow { color:#FDE047; }
.stock-text.red    { color:var(--coral-light); }

.product-qty { display:flex; align-items:center; gap:.6rem; margin-top:.9rem; flex-wrap:wrap; }
.qty-label { font-size:.8rem; font-weight:700; color:rgba(248,250,252,.55); }
.qty-controls { display:flex; align-items:center; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-sm); overflow:hidden; }
.qty-btn {
  background:rgba(255,255,255,.06); border:none; color:var(--white);
  width:44px; height:44px; font-size:1.1rem; cursor:pointer;
  transition:background .2s; display:flex; align-items:center; justify-content:center;
}
.qty-btn:hover { background:rgba(255,255,255,.18); }
.qty-input {
  width:46px; height:44px; background:transparent; border:none;
  border-left:1px solid rgba(255,255,255,.1); border-right:1px solid rgba(255,255,255,.1);
  color:var(--white); text-align:center; font-size:.9rem; font-weight:800; outline:none;
}
.qty-input::-webkit-inner-spin-button { -webkit-appearance:none; }

.product-card .btn { margin-top:.6rem; font-size:.9rem; padding:.78rem 1.2rem; }

@media (max-width:600px) { .products-grid { grid-template-columns:1fr; } }

/* ─── HOW IT WORKS ───────────────────────────────────────── */
.how-it-works {
  background:
    linear-gradient(rgba(0,6,2,.48), rgba(0,6,2,.48)),
    url('../FONDOS/FONDO%201.PNG') center / cover scroll;
  position:relative; overflow:hidden;
}
.how-it-works::before {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:80vw; height:80vw;
  background:radial-gradient(circle,rgba(224,160,0,.05) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
}

.steps-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.5rem;
  position:relative; z-index:1;
}
.steps-connector {
  display:none; /* mostrado en desktop */
  position:absolute;
  top:55px; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--coral),var(--gold),var(--turquoise),transparent);
  z-index:0;
}
@media (min-width:900px) { .steps-connector { display:block; } }

.step-card {
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-xl);
  padding:2rem 1.6rem;
  text-align:center; position:relative; z-index:1;
  transition:var(--transition);
  overflow:hidden;
}
.step-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(204,26,48,.08),transparent 60%);
  opacity:0; transition:opacity .35s;
}
.step-card:hover { transform:translateY(-6px); border-color:rgba(204,26,48,.28); }
.step-card:hover::before { opacity:1; }

.step-number {
  width:68px; height:68px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.3rem;
  font-family:var(--font-display); font-size:1.9rem; color:#fff;
  position:relative; z-index:1;
}
.step-card:nth-child(1) .step-number { background:linear-gradient(135deg,var(--coral-light),var(--coral-dark)); box-shadow:var(--shadow-coral); }
.step-card:nth-child(2) .step-number { background:linear-gradient(135deg,var(--turq-light),var(--turq-dark)); box-shadow:var(--shadow-turq); }
.step-card:nth-child(3) .step-number { background:linear-gradient(135deg,var(--gold-pale),var(--gold)); color:var(--night); box-shadow:var(--shadow-gold); }
.step-card:nth-child(4) .step-number { background:linear-gradient(135deg,var(--purple-light),var(--purple)); box-shadow:0 8px 32px rgba(124,58,237,.4); }

.step-title { font-weight:900; font-size:1rem; color:var(--white); margin-bottom:.5rem; }
.step-desc  { font-size:.86rem; color:rgba(248,250,252,.52); line-height:1.65; }

/* ─── MID CTA ────────────────────────────────────────────── */
.mid-cta {
  background:
    linear-gradient(135deg,rgba(140,14,28,.70),rgba(180,20,40,.62),rgba(110,8,18,.70)),
    url('../FONDOS/FONDO%205.PNG') center / cover scroll;
  padding:3.8rem 0;
  text-align:center;
  position:relative; overflow:hidden;
}
.mid-cta::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:50px 50px;
}
.mid-cta .container { position:relative; z-index:1; }
.mid-cta h2 { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); color:#fff; margin-bottom:.5rem; }
.mid-cta p  { color:rgba(255,255,255,.82); margin-bottom:2rem; font-size:1.05rem; }
.mid-cta .cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.mid-cta .btn-secondary { border-color:rgba(255,255,255,.65); }
.mid-cta .btn-secondary:hover { background:rgba(255,255,255,.15); border-color:#fff; }

/* ─── ORDER SECTION ──────────────────────────────────────── */
.order-section {
  background:
    linear-gradient(rgba(0,5,2,.50), rgba(0,5,2,.50)),
    url('../FONDOS/FONDO%204.PNG') center / cover scroll;
  position:relative; overflow:hidden;
}
.order-section::before {
  content:''; position:absolute; top:-30%; right:-15%;
  width:55vw; height:55vw;
  background:radial-gradient(circle,rgba(0,122,64,.1) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
}
.order-section::after {
  content:''; position:absolute; bottom:-20%; left:-10%;
  width:40vw; height:40vw;
  background:radial-gradient(circle,rgba(204,26,48,.08) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
}

.order-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; position:relative; z-index:1; }
.order-info-title { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3rem); line-height:1.05; margin-bottom:1rem; }
.order-info-desc { color:rgba(248,250,252,.62); line-height:1.75; margin-bottom:2rem; }

.order-whatsapp-block {
  background:linear-gradient(135deg,rgba(37,211,102,.12),rgba(18,140,126,.06));
  border:1px solid rgba(37,211,102,.28);
  border-radius:var(--radius-xl); padding:1.6rem;
  margin-bottom:1.5rem;
}
.order-whatsapp-block h4 { font-weight:900; color:#25D366; margin-bottom:.4rem; display:flex; align-items:center; gap:.5rem; font-size:.98rem; }
.order-whatsapp-block p  { font-size:.88rem; color:rgba(248,250,252,.55); margin-bottom:1rem; }
.whatsapp-number { font-family:var(--font-display); font-size:1.7rem; color:#25D366; display:block; margin-bottom:.9rem; text-shadow:0 0 20px rgba(37,211,102,.35); }

/* Forms */
.order-form {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl); padding:2.2rem;
}
.form-title { font-weight:900; font-size:1.15rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:.5rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:.78rem; font-weight:800; color:rgba(248,250,252,.6); letter-spacing:.06em; text-transform:uppercase; }
.form-group input,
.form-group select,
.form-group textarea {
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm); padding:.78rem 1rem;
  color:var(--white); font-size:.93rem; transition:border-color .2s,box-shadow .2s;
  outline:none; width:100%;
}
.form-group input::placeholder,.form-group textarea::placeholder { color:rgba(248,250,252,.28); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color:var(--coral-light);
  box-shadow:0 0 0 3px rgba(204,26,48,.18);
  background:rgba(255,255,255,.08);
}
.form-group select option { background:var(--night-mid); color:var(--white); }
.form-group textarea { resize:vertical; min-height:90px; }

.form-note { font-size:.76rem; color:rgba(248,250,252,.38); margin-top:.9rem; text-align:center; line-height:1.5; }
.form-actions { display:flex; flex-direction:column; gap:.8rem; margin-top:1.3rem; }
.form-success {
  display:none;
  background:linear-gradient(135deg,rgba(0,122,64,.18),rgba(0,122,64,.06));
  border:1px solid rgba(0,122,64,.4);
  border-radius:var(--radius); padding:1rem;
  text-align:center; color:var(--turq-light); font-weight:800; font-size:.95rem;
}

@media (max-width:900px) { .order-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .form-grid { grid-template-columns:1fr; } }

/* ─── WHOLESALE ──────────────────────────────────────────── */
.wholesale {
  background:
    linear-gradient(rgba(0,5,2,.48), rgba(0,5,2,.48)),
    url('../FONDOS/FONDO%202.PNG') center / cover scroll;
  position:relative; overflow:hidden;
}
.wholesale::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.wholesale-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }

.wholesale-benefits { display:flex; flex-direction:column; gap:1rem; }
.benefit-item {
  display:flex; gap:1.1rem; padding:1.3rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  transition:var(--transition);
}
.benefit-item:hover { border-color:rgba(224,160,0,.3); background:rgba(224,160,0,.05); transform:translateX(5px); }
.benefit-icon {
  width:46px; height:46px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(224,160,0,.22),rgba(224,160,0,.06));
  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.35rem;
}
.benefit-text h4 { font-weight:900; font-size:.95rem; margin-bottom:.2rem; }
.benefit-text p  { font-size:.84rem; color:rgba(248,250,252,.52); line-height:1.55; }

.wholesale-cta-box {
  background:linear-gradient(145deg,rgba(224,160,0,.14),rgba(0,13,5,.7));
  border:1px solid rgba(224,160,0,.42);
  border-radius:var(--radius-2xl); padding:2.5rem;
}
.wholesale-cta-box h3 { font-family:var(--font-display); font-size:2.1rem; color:var(--gold-light); margin-bottom:.6rem; }
.wholesale-cta-box p  { font-size:.9rem; color:rgba(248,250,252,.58); margin-bottom:1.5rem; line-height:1.65; }

.wholesale-steps { display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem; }
.ws-step { display:flex; align-items:center; gap:.9rem; font-size:.88rem; font-weight:700; color:rgba(248,250,252,.75); }
.ws-num {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--night); display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:900; flex-shrink:0;
}

.coverage-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.8rem; }
.coverage-tag {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:999px; padding:.22rem .75rem;
  font-size:.74rem; font-weight:700; color:rgba(248,250,252,.58);
}

@media (max-width:900px) { .wholesale-inner { grid-template-columns:1fr; gap:2.5rem; } }

/* ─── TRUST ──────────────────────────────────────────────── */
.trust {
  background:
    linear-gradient(rgba(0,6,2,.48), rgba(0,6,2,.48)),
    url('../FONDOS/FONDO%203.PNG') center / cover scroll;
  position:relative; overflow:hidden;
}
.trust::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--turquoise),transparent);
}

.trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-bottom:4.5rem; }
.trust-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-xl); padding:2rem 1.5rem;
  text-align:center; transition:var(--transition); position:relative; overflow:hidden;
}
.trust-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--turquoise),var(--turq-dark));
  transform:scaleX(0); transition:transform .3s; transform-origin:center;
}
.trust-card:hover { transform:translateY(-5px); border-color:rgba(0,122,64,.3); background:rgba(0,122,64,.05); }
.trust-card:hover::before { transform:scaleX(1); }
.trust-icon { font-size:2.3rem; margin-bottom:.9rem; filter:drop-shadow(0 0 8px rgba(255,255,255,.2)); }
.trust-card h4 { font-weight:900; font-size:.95rem; margin-bottom:.4rem; }
.trust-card p  { font-size:.82rem; color:rgba(248,250,252,.5); line-height:1.55; }

/* Testimonials */
.testimonials-title { font-family:var(--font-display); font-size:2.2rem; text-align:center; margin-bottom:2.2rem; }
.testimonials-grid  { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.5rem; }
.testimonial-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-xl); padding:1.9rem; transition:var(--transition);
  position:relative; overflow:hidden;
}
.testimonial-card::before {
  content:'"'; position:absolute; top:-10px; left:15px;
  font-size:6rem; color:rgba(204,26,48,.1); font-family:Georgia,serif; line-height:1;
  pointer-events:none;
}
.testimonial-card:hover { transform:translateY(-4px); border-color:rgba(204,26,48,.2); }
.testimonial-stars  { color:var(--gold-light); font-size:.92rem; margin-bottom:.9rem; letter-spacing:2px; text-shadow:0 0 8px rgba(224,160,0,.4); }
.testimonial-text   { font-size:.88rem; color:rgba(248,250,252,.68); line-height:1.75; font-style:italic; margin-bottom:1.1rem; position:relative; z-index:1; }
.testimonial-author { display:flex; align-items:center; gap:.75rem; }
.author-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--coral),var(--night-soft)); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.9rem; flex-shrink:0; }
.author-name  { font-weight:800; font-size:.88rem; }
.author-place { font-size:.74rem; color:rgba(248,250,252,.43); }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq {
  background:
    linear-gradient(rgba(0,5,2,.50), rgba(0,5,2,.50)),
    url('../FONDOS/FONDO%205.PNG') center / cover scroll;
}
.faq-list { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:.65rem; }
.faq-item {
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.07);
  border-radius:var(--radius); overflow:hidden; transition:border-color .2s;
}
.faq-item.open { border-color:rgba(204,26,48,.35); background:rgba(204,26,48,.04); }
.faq-question {
  width:100%; background:none; border:none; color:var(--white); font-family:var(--font-body);
  font-size:.97rem; font-weight:700; padding:1.2rem 1.6rem;
  text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:1rem; transition:color .2s;
}
.faq-question:hover        { color:var(--coral-light); }
.faq-item.open .faq-question { color:var(--coral-light); }
.faq-icon {
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; line-height:1; transition:transform .3s,border-color .2s,background .2s;
}
.faq-item.open .faq-icon { transform:rotate(45deg); border-color:var(--coral); background:rgba(204,26,48,.18); color:var(--coral-light); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-answer p { padding:0 1.6rem 1.3rem; font-size:.88rem; color:rgba(248,250,252,.58); line-height:1.75; }
.faq-answer a { color:var(--coral-light); }
.faq-answer a:hover { color:var(--coral); }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
  background:
    linear-gradient(rgba(0,4,1,.88), rgba(0,4,1,.88)),
    url('../FONDOS/FONDO%205.PNG') center top / cover scroll;
  border-top:1px solid rgba(255,255,255,.06);
  padding:4.5rem 0 2rem;
  position:relative;
}
.footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--coral),var(--turquoise),var(--gold),transparent);
}

.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem; }

.footer-logo { font-family:var(--font-display); font-size:1.85rem; letter-spacing:.06em; margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem; }
.footer-logo .logo-icon { width:34px; height:34px; background:linear-gradient(135deg,var(--coral-light),var(--coral-dark)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:var(--shadow-coral); }
.footer-tagline { font-size:.86rem; color:rgba(248,250,252,.42); line-height:1.65; margin-bottom:1.6rem; max-width:290px; }

.footer-contact-items { display:flex; flex-direction:column; gap:.65rem; }
.footer-contact-item {
  display:flex; align-items:center; gap:.55rem;
  font-size:.84rem; color:rgba(248,250,252,.55); transition:color .2s;
}
.footer-contact-item:hover { color:var(--white); }
.footer-contact-item a { color:inherit; }
.footer-contact-item a:hover { color:var(--coral-light); }

.footer-col h5 { font-weight:900; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(248,250,252,.38); margin-bottom:1.1rem; }
.footer-links { display:flex; flex-direction:column; gap:.55rem; }
.footer-links a { font-size:.86rem; color:rgba(248,250,252,.55); transition:color .2s,padding-left .2s; }
.footer-links a:hover { color:var(--coral-light); padding-left:4px; }

.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:2rem; display:flex; flex-direction:column; gap:1.1rem; }
.footer-bottom-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:.78rem; color:rgba(248,250,252,.32); }
.footer-legal-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-legal-links a { font-size:.76rem; color:rgba(248,250,252,.38); transition:color .2s; }
.footer-legal-links a:hover { color:var(--coral-light); }

.footer-disclaimer {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-sm); padding:1.1rem 1.3rem;
  font-size:.7rem; color:rgba(248,250,252,.32); line-height:1.65;
}
.footer-disclaimer strong { color:rgba(248,250,252,.5); }

@media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:600px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom-row { flex-direction:column; align-items:flex-start; }
}

/* ─── FLOATING WHATSAPP ──────────────────────────────────── */
.whatsapp-float {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:2000;
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,.4);
  animation:waPulse 3s ease infinite;
  transition:transform .2s;
}
.whatsapp-float:hover { transform:scale(1.12); }
.whatsapp-float-tooltip {
  position:absolute; right:76px; top:50%; transform:translateY(-50%);
  background:rgba(0,13,5,.96); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm); padding:.4rem .85rem;
  font-size:.77rem; font-weight:800; color:var(--white);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .2s; letter-spacing:.02em;
}
.whatsapp-float:hover .whatsapp-float-tooltip { opacity:1; }

/* ─── PAGE HEADER (páginas interiores) ───────────────────── */
.page-header {
  background:linear-gradient(135deg,var(--night),var(--night-mid));
  padding:8.5rem 0 4.5rem;
  text-align:center; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.page-header::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:65px 65px;
}
.page-header::after {
  content:''; position:absolute; bottom:-10%; right:-10%;
  width:50vw; height:50vw;
  background:radial-gradient(circle,rgba(204,26,48,.1) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
}
.page-header-title { font-family:var(--font-display); font-size:clamp(2.8rem,5vw,4.5rem); position:relative; z-index:1; line-height:1.05; }
.page-header-sub   { color:rgba(248,250,252,.58); margin-top:.7rem; position:relative; z-index:1; font-size:1.05rem; }
.breadcrumb {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.8rem; color:rgba(248,250,252,.38); margin-bottom:1.1rem; position:relative; z-index:1;
}
.breadcrumb a { color:var(--coral-light); transition:color .2s; }
.breadcrumb a:hover { color:var(--coral); }

/* ─── LEGAL PAGES ────────────────────────────────────────── */
.legal-content {
  max-width:820px; margin:0 auto; padding:4.5rem 2rem;
  background:rgba(0,8,2,.92);
  border-radius:var(--radius-2xl);
  margin-top:2.5rem; margin-bottom:3rem;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  position:relative; z-index:1;
}
@media (max-width:600px) { .legal-content { padding:2.5rem 1.25rem; border-radius:var(--radius-xl); } }
.legal-content h2 { font-family:var(--font-display); font-size:1.9rem; color:var(--coral-light); margin-top:2.8rem; margin-bottom:.9rem; }
.legal-content h3 { font-size:1.08rem; font-weight:900; margin-top:1.8rem; margin-bottom:.5rem; color:var(--white); }
.legal-content p  { font-size:.93rem; color:rgba(248,250,252,.82); line-height:1.85; margin-bottom:1rem; }
.legal-content ul { margin:.5rem 0 1rem 1.5rem; list-style:disc; }
.legal-content ul li { font-size:.93rem; color:rgba(248,250,252,.82); line-height:1.8; margin-bottom:.3rem; }
.legal-content strong { color:var(--white); }
.legal-content a { color:var(--turq-light); text-decoration:underline; }
.legal-content a:hover { color:var(--white); }
.legal-date {
  display:inline-block;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-sm); padding:.4rem .9rem;
  font-size:.78rem; color:rgba(248,250,252,.38); margin-top:.5rem; margin-bottom:2.5rem;
}

/* ─── CONFETTI ────────────────────────────────────────────── */
.confetti-container {
  position:absolute; inset:0; z-index:1;
  pointer-events:none; overflow:hidden;
}
.confetti-piece {
  position:absolute;
  top:-30px;
  border-radius:2px;
  opacity:0;
  animation:confettiFall linear infinite;
  will-change:transform,opacity;
}
@keyframes confettiFall {
  0%   { transform:translateY(0)     rotate(0deg)   scaleX(1);   opacity:1; }
  80%  { opacity:.9; }
  100% { transform:translateY(115vh) rotate(720deg) scaleX(-1);  opacity:0; }
}
@keyframes confettiWiggle {
  0%,100% { margin-left:0; }
  25% { margin-left:12px; }
  75% { margin-left:-12px; }
}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:none} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(32px)}  to{opacity:1;transform:none} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(42px)}  to{opacity:1;transform:none} }
@keyframes pulseBg     { from{transform:scale(.95);opacity:.6} to{transform:scale(1.05);opacity:1} }
@keyframes floatShape  { 0%,100%{transform:translateY(0) rotate(var(--rot,15deg))} 50%{transform:translateY(-22px) rotate(calc(var(--rot,15deg)+9deg))} }
@keyframes floatCard   { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-12px)} }
@keyframes floatBadge  { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-9px) rotate(2deg)} }
@keyframes lineFloat   { 0%,100%{opacity:.6;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.3)} }
@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes shimmerBar  { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes waPulse {
  0%  { box-shadow:0 4px 24px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,.4); }
  70% { box-shadow:0 4px 24px rgba(37,211,102,.55),0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 4px 24px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,0); }
}

/* ═══════════════════════════════════════════════════════════
   MEXICO THEME — Papel Picado · Águila · Azteca
   ═══════════════════════════════════════════════════════════ */

/* ── PAPEL PICADO ──────────────────────────────────────────── */
.papel-picado-wrap {
  position: absolute;
  top: 0; left: -2%; right: -2%;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  height: 80px;
}
.papel-string {
  position: absolute;
  top: 4px; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 20%, rgba(255,255,255,.35) 80%, transparent 100%);
  z-index: 1;
}
.papel-piece {
  position: absolute;
  top: 5px;
  width: 34px;
  height: 52px;
  clip-path: polygon(8% 0, 92% 0, 100% 62%, 78% 82%, 50% 100%, 22% 82%, 0 62%);
  animation: papelSway ease-in-out infinite;
  transform-origin: top center;
  opacity: .88;
  overflow: hidden;
}
.papel-piece::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.22) 5px, transparent 5px),
    radial-gradient(circle at 25% 55%, rgba(255,255,255,.15) 3px, transparent 3px),
    radial-gradient(circle at 75% 55%, rgba(255,255,255,.15) 3px, transparent 3px),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 8px;
}
@keyframes papelSway {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  50%      { transform: rotate(5deg)  translateY(3px); }
}

/* ── EAGLE WATERMARK ────────────────────────────────────────── */
.eagle-wrap {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-48%);
  width: min(60%, 680px);
  z-index: 1;
  pointer-events: none;
}
.eagle-svg {
  width: 100%;
  height: auto;
  color: #fff;
  opacity: .045;
  filter: drop-shadow(0 0 40px rgba(0,200,100,.15));
}

/* ── AZTEC SECTION BORDER ───────────────────────────────────── */
.aztec-border {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
    #006847 0%, #006847 33.3%,
    #ffffff 33.3%, #ffffff 66.6%,
    #CC1A30 66.6%, #CC1A30 100%
  );
  opacity: .35;
}

/* ── TRICOLOR STRIPE on headings ──────────────────────────── */
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  margin-top: .5rem;
  background: linear-gradient(90deg, #006847 33%, #fff 33% 66%, #CC1A30 66%);
  border-radius: 2px;
}

/* ── PAGE HEADER festivo ────────────────────────────────────── */
.page-header {
  background: rgba(0,8,2,.82) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.page-header::after {
  background: radial-gradient(circle, rgba(0,168,85,.18) 0%, transparent 70%) !important;
}

/* ── PROMO BAR tricolor ──────────────────────────────────────── */
.promo-bar {
  background: linear-gradient(90deg, #004D25 0%, #006847 30%, #003D18 50%, #8A0F1C 70%, #CC1A30 100%) !important;
}

/* ── PRODUCT SECTION festivo ──────────────────────────────── */
/* (important override removed — FONDO ARTICULOS visible now) */

/* ── STAR SPARKLES ──────────────────────────────────────────── */
.hero-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: sparkPulse ease-in-out infinite alternate;
}
@keyframes sparkPulse {
  from { transform: scale(0.5); opacity: .15; }
  to   { transform: scale(1.8); opacity: .7; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:768px)  { :root{--section-py:3.8rem} .btn-lg{padding:1rem 1.8rem;font-size:1rem} }
@media (max-width:480px)  {
  :root{--section-py:3.2rem}
  .container{padding:0 1rem}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .cta-actions{flex-direction:column}
  .cta-actions .btn{width:100%}
}

/* background-attachment:fixed falla en móvil Safari/Chrome */
@media (max-width:900px) {
  body { background-attachment: scroll; }
}

/* ─── LANDSCAPE MOBILE ───────────────────────────────────── */
@media (max-width:900px) and (orientation:landscape) {
  .hero {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 1rem;
  }
  .hero .container {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 2rem;
  }
  .hero-visual { order: 0; }
  .hero-sub { margin-left: 0; margin-right: 0; max-width: 100%; font-size: .88rem; }
  .hero-urgency { margin-left: 0; }
  .hero-actions { justify-content: flex-start; }
  .hero-stats { justify-content: flex-start; margin-top: 1rem; padding-top: .8rem; gap: 1.5rem; }
  .hero-card-stack { width: 160px; height: 210px; }
  .hero-card { width: 125px; height: 168px; }
  .hero-orb { width: 160px; height: 160px; }
  .hero-title { font-size: clamp(2rem, 6vw, 3rem); }
  .hfb-gold  { top: -10px; right: -10px; font-size: .6rem; padding: .35rem .5rem; }
  .hfb-turq  { bottom: 6px; left: -10px; font-size: .6rem; padding: .35rem .5rem; }
  .hfb-coral { top: 30%; right: -10px; font-size: .6rem; padding: .35rem .5rem; }
  .nav-links {
    padding-top: 3.5rem;
    gap: 0.8rem;
  }
  .nav-links a { font-size: 1.1rem; }
}

/* ─── FOOTER TAGLINE en columna única ───────────────────── */
@media (max-width:600px) {
  .footer-tagline { max-width: 100%; }
}

/* ─── TABLA comparativa min-width ───────────────────────── */
.compare-table { min-width: 520px; }

/* ─── MODAL en móvil pequeño ────────────────────────────── */
@media (max-width:480px) {
  .modal-img-col { min-height: 160px; padding: 1rem; }
  .modal-img { max-height: 180px; }
  .modal-name { font-size: 1.8rem; }
}

/* ─── PRODUCT MODAL ─────────────────────────────────────── */
.product-modal {
  position:fixed; inset:0; z-index:3000;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.product-modal.open { opacity:1; pointer-events:all; }
.modal-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.modal-content {
  position:relative; z-index:1;
  background:linear-gradient(145deg,var(--night-soft),var(--night-mid));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-2xl);
  width:100%; max-width:800px; max-height:92vh;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-lg),0 0 60px rgba(0,0,0,.5);
  transform:scale(.93) translateY(24px);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
}
.product-modal.open .modal-content { transform:scale(1) translateY(0); }
.modal-close-row {
  display:flex; justify-content:flex-end;
  position:sticky; top:0; z-index:2;
  padding:.8rem .8rem 0;
  background:linear-gradient(180deg,var(--night-soft) 60%,transparent 100%);
}
.modal-close {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:50%; width:44px; height:44px;
  color:var(--white); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s; flex-shrink:0;
}
.modal-close:hover { background:rgba(255,255,255,.22); }
.modal-body {
  display:grid; grid-template-columns:1fr 1fr;
  gap:2rem; padding:0 2.5rem 2.5rem;
}
@media (max-width:620px) {
  .modal-body { grid-template-columns:1fr; padding:1.2rem 1.4rem 2rem; gap:1.2rem; }
}
.modal-img-col {
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-xl);
  padding:2rem; min-height:240px;
}
.modal-img {
  max-height:320px; width:auto; max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 32px rgba(0,0,0,.6));
  transition:transform .4s ease;
}
.modal-img:hover { transform:scale(1.04); }
.modal-info-col { display:flex; flex-direction:column; gap:.9rem; }
.modal-badge    { display:flex; gap:.4rem; flex-wrap:wrap; }
.modal-name {
  font-family:var(--font-display); font-size:2.3rem;
  color:var(--white); line-height:1.05;
}
.modal-includes {
  list-style:none; font-size:.88rem;
  color:rgba(248,250,252,.65); line-height:1.75;
}
.modal-includes li { display:flex; align-items:flex-start; gap:.4rem; padding:.1rem 0; }
.modal-includes li::before { content:'✦'; color:var(--coral); font-size:.55rem; margin-top:4px; flex-shrink:0; }
.modal-price {
  font-family:var(--font-display); font-size:2.6rem;
  color:var(--white); line-height:1;
}
.modal-price-note { font-size:.76rem; color:rgba(248,250,252,.38); margin-top:.15rem; }
.modal-stock-wrap { display:flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:700; }
.modal-cta { margin-top:auto; padding-top:.5rem; }

/* Cursor zoom en imágenes de tarjeta */
.product-img { cursor:pointer; position:relative; }
.product-img::after {
  content:'🔍';
  position:absolute; bottom:.5rem; right:.5rem;
  font-size:1.1rem; opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.8));
}
.product-img:hover::after { opacity:.85; }