/* ===== Tipografías ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Playfair+Display:wght@700&family=Poppins:wght@600&display=swap');

/* ===== Tokens ===== */
:root{
  --bg-1:#09080F; --bg-2:#130F20;
  --layer:#120E1C;
  --panel:#0F0F1C; --panel2:#13132A;
  --text:#F7F7FF; --muted:#C8CBEA;
  --violet:#7B2AFF; --violet-2:#9E54FF;
  --card:#171222; --stroke:#2a2142;
  --fg:#F5F2FF; --primary:#7A28FF; --primary-600:#651ee0;
  --glow:0 0 32px rgba(122,40,255,.35);
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ overflow-x:hidden }   /* quita scroll horizontal */
body{
  background:
    radial-gradient(1100px 600px at 25% -5%, rgba(155,84,255,.20), transparent 60%),
    radial-gradient(900px 520px at 100% -10%, rgba(122,40,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3{ font-family:"Playfair Display",serif; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ opacity:.9 }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* ===== Navbar ===== */
.navbar-dark{ background:var(--layer); border-bottom:1px solid var(--stroke) }

/* No forzar position en todas las navbars */
.navbar{ z-index:1030 }  /* mismo z-index que usa Bootstrap para fixed */

/* Cuando la barra tenga .fixed-top, asegúrate que quede fija */
.navbar.fixed-top{
  position: fixed;
  top: 0; left: 0; right: 0;
}

/* ===== Botones ===== */
.btn-primary{
  background:linear-gradient(180deg,var(--violet) 0%,var(--violet-2) 100%);
  border:1px solid #A777FF55; color:#fff; font-weight:800; border-radius:12px;
  box-shadow:0 10px 34px rgba(123,42,255,.45)
}
.btn-primary:hover{ filter:brightness(1.06) }

/* ===== HERO ===== */
.hero{ position:relative; padding:48px 0 1px; z-index:0 }
.hero-hand{
  position: fixed;        /* mano fija */
  right: -60px;
  top: 60px;              /* debajo de los botones */
  width: 620px;
  max-width: 50vw;
  opacity: .92;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.5));
  pointer-events: none;
  z-index: -1;            /* queda detrás del navbar */
}

.brand-row{ display:flex; align-items:center; gap:14px; color:#EDE7FF; font-weight:800; letter-spacing:.12em }
.brand-row img{ height:34px; width:auto }
.hero h1{ color:var(--text); font-weight:900; line-height:1.08; margin-top:8px }
.hero p{ color:var(--muted) }
.trust-icons{ display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; color:#EAE9FF }
.trust-icons div{ display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid #33336A; border-radius:999px; background:rgba(255,255,255,.03) }

/* --- Degradado sutil esquina superior izquierda (HERO) --- */
.hero{
  position: relative;            /* ya lo tienes, lo repito por claridad */
  isolation: isolate;            /* asegura capas seguras */
  /* Controles (ajústalos a tu gusto) */
  --hero-grad-rx: 76%;           /* tamaño horizontal del degradado */
  --hero-grad-ry: 58%;           /* tamaño vertical del degradado */
  --hero-grad-alpha: .18;        /* intensidad (0–1) */
  --hero-grad-blur:48px;        /* suavidad/desenfoque */
  --hero-grad-hue: 268;          /* color (H en HSL — 268≈violeta Zague) */
  --hero-grad-sat: 90%;          /* saturación del color */
  --hero-grad-lit: 60%;          /* luminosidad del color */
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;                    /* detrás del contenido */
  pointer-events:none;
  /* Degradado radial en la esquina superior izquierda */
  background:
    radial-gradient(
      var(--hero-grad-rx) var(--hero-grad-ry) at 0% 0%,
      hsla(var(--hero-grad-hue), var(--hero-grad-sat), var(--hero-grad-lit), var(--hero-grad-alpha)) 0%,
      hsla(var(--hero-grad-hue), var(--hero-grad-sat), var(--hero-grad-lit), calc(var(--hero-grad-alpha)*.5)) 38%,
      rgba(0,0,0,0) 72%
    );
  filter: blur(var(--hero-grad-blur));
}

/* ===== Cards ===== */
.gcard{ position:relative; border-radius:18px; background:var(--panel); border:1px solid transparent; transition:transform .25s, box-shadow .25s }
.gcard::before{
  content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:linear-gradient(135deg, rgba(155,84,255,.75), rgba(85,45,190,.35) 35%, rgba(255,255,255,.06) 60%, rgba(155,84,255,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* ===== GRID (solo #tendencia, se mantiene) ===== */
#tendencia .cards-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-end;   /* <-- alinea todas las cards por abajo */
  justify-content:center;
}
#tendencia .card-item{ flex:0 0 220px; width:220px }
#tendencia .kit-item{ flex:0 0 260px; width:260px }

/* ===== Product Card ===== */
.product-card{
  height:420px; min-height:420px; max-height:420px;
  display:flex; flex-direction:column; background:var(--panel2); padding:14px; border-radius:18px;
}
/* Normalizar tamaño de todas las imágenes */
.product-card .thumb {
  height: 200px;          /* ajusta la altura estándar para todas */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;       /* o transparente si prefieres */
  border-radius: 12px;
  overflow: hidden;
}

.product-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* se recorta para llenar todo */
}

.product-card .stretched-link{ position:absolute; inset:0; z-index:1 }
.product-card .btn{ position:relative; z-index:3; margin-top:auto }
.product-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.35), 0 0 18px rgba(122,40,255,.15) }
.product-card:hover .thumb img{ transform:scale(1.02) }
.p-name{ color:#fff; font-weight:700; font-size:1rem; margin:2px 0; min-height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.p-cat{ color:#B9BEEA; font-size:.9rem }
.stars{ color:#FFD56A; font-size:.95rem; letter-spacing:.08em }
.price{ color:#fff; font-weight:800 }
.old{ color:#C9CFF5; text-decoration:line-through; margin-right:6px; font-weight:600 }
.badge-moq{ background:rgba(255,255,255,.06); color:#D7D9FF; padding:.18rem .55rem; border-radius:999px }

/* ===== KIT Card ===== */
.kit-card{
  background:linear-gradient(180deg, rgba(20,20,35,.58), rgba(20,20,35,.28));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(122,40,255,.45); border-radius:18px; padding:16px;
  height:610px; display:flex; flex-direction:column;
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 14px rgba(122,40,255,.22);
}
.kit-card .kit-img{ width:100%; height:190px; object-fit:cover; border-radius:12px; background:#000; margin-bottom:12px }
.kit-card .note{ color:#D5D3F8; font-size:.9rem }
.kit-card .kit-features{ list-style:none; padding:0; margin:10px 0 0; color:#EDE7FF; font-size:.9rem }
.kit-card .kit-features li{ display:flex; gap:8px; align-items:flex-start; margin:.25rem 0 }
.kit-card .kit-features .check{ font-weight:800; color:#9E54FF; margin-top:1px }
.kit-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 18px rgba(122,40,255,.30) }

/* ===== Responsive ===== */
/* No muevas el section en ningún tamaño */
#tendencia { margin-top: 0 !important; }

/* Desktop: subir SOLO las cards, no el título */
@media (min-width: 1200px) {
  #tendencia .cards-row {
    margin-top: -122px;          /* ajusta -40 / -64 / -122 según veas */
  }
  #tendencia .section-title {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
  }
}

/* ========================================================= */
/* ==========  BLOQUE GLOBAL REUTILIZABLE (AÑADIDO)  ======= */
/* ========================================================= */

/* (antes: #tendencia .cards-row) */
.cards-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-end;
  justify-content:center;
}

/* (antes: #tendencia .card-item) */
.card-item{ flex:0 0 220px; width:220px }

/* (antes: #tendencia .kit-item) */
.kit-item{ flex:0 0 260px; width:260px }

/* Para tablets (hasta 991px) */
@media (max-width: 991.98px){
  .card-item, .kit-item{
    flex: 0 0 46%;   /* casi 2 columnas completas */
    max-width: 46%;
  }
}

/* Para móviles pequeños (hasta 575px) */
@media (max-width: 575.98px){
  .card-item, .kit-item{
    flex: 0 0 46%;   /* exacto 2 columnas */
    max-width: 46%;
  }
}

/* en tu CSS global */
.price { font-weight: 600; }
.price .old {
  margin-right: .4rem;
  opacity: .6;
  text-decoration: line-through;
}

.season-bar{background-size:cover;background-position:center;}
.season-bar__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.35));}

/* Bloque de temporada con banner de fondo en toda la sección */
.season-block{
  position:relative;
  border-radius:16px;
  padding:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(122,40,255,.10), rgba(122,40,255,.05)); /* fallback sin banner */
  border:1px solid rgba(122,40,255,.25);
}
.season-block::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--season-bg);
  background-size:cover;
  background-position:center;
  opacity:.28; /* visibilidad fondo */
  filter:saturate(1.05) brightness(.9);
}
.season-block::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 400px at 20% 0%, rgba(0,0,0,.45), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}
.season-block > *{ position:relative; z-index:1; }

/* Encabezado */
.season-thumb{
  width:180px; height:64px; object-fit:cover;
  border:1px solid rgba(255,255,255,.25);
}

/* Cards sobre banner: integrar con transparencia sutil */
.season-on-bg{
  background: rgba(15,11,28,.82);
  border-color: rgba(122,40,255,.35);
  backdrop-filter: blur(2px) saturate(1.05);
}

/* (Opcional) efecto parallax ligero – puede no aplicar en móviles
.season-block::before{ background-attachment: fixed; }
*/

/* =======================
   Badges premium en KITS
   ======================= */

/* Badge superior: "Súper accesible" */
.kit-card > .d-flex .badge {
  background: linear-gradient(180deg, var(--violet) 0%, var(--violet-2) 100%);
  color: #fff;
  border: 1px solid rgba(167,119,255,.45);
  box-shadow: 0 8px 22px rgba(122,40,255,.35), 0 0 12px rgba(122,40,255,.25);
  font-weight: 800;
  letter-spacing: .02em;
}

/* Badges dentro del checklist (Membresía) */
.kit-card .kit-features .badge {
  background: rgba(70, 8, 170, 0.18);
  color: #EDE7FF;
  border: 1px solid rgba(167,119,255,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  font-weight: 700;
}

/* Píldoras más elegantes */
.kit-card .badge {
  border-radius: 999px;
  padding: .25rem .6rem;
  backdrop-filter: blur(4px);
}

/* Opcional: ligero brillo al pasar el mouse */
.kit-card .badge:hover {
  filter: brightness(1.06);
}

/* =======================
   CUPONES — Premium look
   ======================= */

#cupones .gcard{
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(20,20,35,.65), rgba(20,20,35,.35));
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 14px rgba(122,40,255,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Borde degradado tipo cristal */
#cupones .gcard::before{
  content: "";
  position: absolute; inset: 0; border-radius: 18px; padding: 1px;
  background: linear-gradient(135deg, rgba(155,84,255,.8), rgba(85,45,190,.35) 40%, rgba(255,255,255,.06) 60%, rgba(155,84,255,.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

#cupones .gcard:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(0,0,0,.45), 0 0 18px rgba(122,40,255,.28);
}

/* Título del cupón */
#cupones .gcard .h5{
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: .25rem;
}

/* Línea de descuento (“20% OFF” o monto) */
#cupones .gcard > .mt-2{
  color: #F5F2FF;
  font-weight: 800;
  font-size: 1.15rem;           /* sube tamaño sin cambiar el HTML */
  letter-spacing: .01em;
}

/* Meta / fechas */
#cupones .gcard .small{
  color: #C8CBEA;
}

/* Badge premium (Combinable/No combinable) */
#cupones .gcard .badge{
  background: linear-gradient(180deg, var(--violet) 0%, var(--violet-2) 100%);
  color: #fff;
  border: 1px solid rgba(167,119,255,.45);
  box-shadow: 0 8px 22px rgba(122,40,255,.35), 0 0 12px rgba(122,40,255,.25);
  border-radius: 999px;
  padding: .22rem .55rem;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Píldora sutil si quieres diferenciar “No combinable” */
#cupones .gcard .badge:has(+ .no-combinable),
#cupones .gcard .badge.no-combinable{
  background: linear-gradient(180deg, #3a334e 0%, #2b2740 100%);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
}

#cupones .coupon-card {
  border: 1px solid rgba(155,84,255,.35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,20,35,.8), rgba(20,20,35,.5));
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 12px rgba(122,40,255,.25);
  color: #EDE7FF;
}

#cupones .coupon-card .copy-btn {
  font-size: .8rem;
  padding: 2px 10px;
  border-radius: 8px;
  border: 1px solid var(--violet-2);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
}
#cupones .coupon-card .copy-btn:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}

#cupones .badge-combinable {
  background: linear-gradient(135deg, #7B2AFF, #9E54FF);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .75rem;
}
#cupones .badge-no-combinable {
  background: linear-gradient(135deg, #FF4B4B, #D72638);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .75rem;
}

.event-card .ev-cover{ position:relative; height:160px; background:#0b0b16 }
.event-card .ev-cover img{ width:100%; height:100%; object-fit:cover; display:block }
.ev-badge{
  position:absolute; top:10px; left:10px; padding:.25rem .6rem; border-radius:999px;
  font-weight:800; color:#fff; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px rgba(122,40,255,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.badge-violet{ background:linear-gradient(180deg,#7B2AFF,#9E54FF) }
.badge-amber{ background:linear-gradient(180deg,#ffb200,#ff7a00) }
.badge-sky{ background:linear-gradient(180deg,#2bb8ff,#6ac8ff) }
.badge-soft{
  background:rgba(255,255,255,.06); color:#EDE7FF; border:1px solid rgba(167,119,255,.25);
  border-radius:999px; padding:.18rem .55rem; font-weight:700
}
.live-dot{ color:#ff4b4b; font-weight:800; letter-spacing:.02em }