:root{
  --brand:#0d6efd;
  --brand-600:#0b5ed7;
  --bg:#f7f9fc;
  --text:#212529;
  --muted:#6c757d;
  --card:#ffffff;
  --border:#e7eaf0;
}

html,body{ background:var(--bg); color:var(--text); }
body{ padding-bottom:64px; } /* espacio para la CTA sticky móvil */
img{ max-width:100%; height:auto; display:block; }

/* ====== Nav ====== */
.nav-link{ color:#495057; }
.nav-link:hover, .nav-link:focus{ color:#000; }
.nav .nav-link.active{ color:var(--brand); font-weight:600; }

/* ====== Hero (poster + video lazy) ====== */
.hero{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(13,110,253,.08), transparent),
    linear-gradient(180deg,#fff, #f7f9fc 60%, #fff);
}
.hero-video-wrap{ position:relative; overflow:hidden; border-radius:1rem; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; transition:opacity .6s ease; }
.hero-overlay{ position:relative; z-index:2; }

/* ====== Bloques “glass” / badges / micro UI ====== */
.glass{
  background:#ffffffcc;
  border:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(6px);
  border-radius:1rem;
}
.badge-soft{ background: rgba(13,110,253,.12); color:#0a58ca; }
.kicker{ letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; color:#7a8699; }
.shadow-neon{ box-shadow:0 0 0 1px rgba(13,110,253,.12), 0 10px 30px rgba(13,110,253,.12); }
.feature-icon{ color:var(--brand); }

/* ====== Pasos: “Cómo funciona” ====== */
.step-badge{
  width:36px; height:36px; border-radius:999px;
  background:#e7f1ff; color:#0d6efd; display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* ====== Pricing ====== */
.py-6{ padding-top:4rem; padding-bottom:4rem; }
.card-pricing{
  background:var(--card); border:1px solid var(--border); border-radius:1rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.shadow-hover{ box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.card-pricing:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(13,110,253,.12); }
.card-pricing .price{ font-size:40px; line-height:1.1; }
.ribbon{
  position:absolute; right:1rem; top:1rem; background:var(--brand); color:#fff;
  font-size:.72rem; padding:.25rem .5rem; border-radius:.5rem;
}
.price-toggle{ display:inline-flex; gap:.25rem; border-radius:.75rem; padding:.25rem; background:#fff; border:1px solid var(--border); }
.price-toggle .btn{ border:none!important; }
.price-toggle .btn.active{ background:var(--brand); color:#fff; }

/* Lista de features sin bullets (vale para cualquier UL de planes) */
.plan-features, .card-pricing ul, .list-unstyled{ list-style:none; padding-left:0; margin-left:0; }

/* ====== Tabla de comparación ====== */
.compare th, .compare td{ vertical-align:middle; }
.compare thead th{ white-space:nowrap; }
.compare .bi{ font-size:1.1rem; }
.compare .table{ border-color:var(--border); }

/* ====== Galería / Collage ====== */
.collage{ display:grid; gap:10px; grid-template-columns:2fr 1fr; grid-auto-rows:120px; }
.collage img{ width:100%; height:100%; object-fit:cover; border-radius:.75rem; }
@media (min-width: 768px){
  .collage{ grid-template-columns:2fr 1fr; grid-auto-rows:200px; }
}

/* ====== Reveal on scroll (suave) ====== */
[data-reveal]{ opacity:0; transform: translateY(12px); transition: all .5s ease; }
[data-reveal].reveal-in{ opacity:1; transform:none; }

/* ====== Sticky CTA móvil ====== */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:var(--brand); color:#fff; display:none;
  border-top:1px solid rgba(0,0,0,.06);
}
@media (max-width: 991.98px){ .sticky-cta{ display:block; } }

/* ====== Accesibilidad y motion ====== */
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-600); border-color:var(--brand-600); }
.text-secondary{ color:var(--muted) !important; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; animation:none!important; }
}

/* ===== Coupon Toast (fix de interacción) ===== */
.coupon-toast { 
  position: fixed; inset: 0; pointer-events: none; z-index: 1080;
}

/* Por defecto NO capta eventos */
.coupon-toast .ct-card {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%) translateY(-18px);
  min-width: 280px; max-width: 92vw;
  background: #101828; color: #fff; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16,24,40,.35);
  padding: 14px 14px 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px;
  opacity: 0; 
  pointer-events: none;           /* ← ← clave: no intercepta clicks si no está visible */
  transition: transform .35s ease, opacity .35s ease;
}

/* Sólo cuando se muestra, sí capta eventos */
.coupon-toast .ct-card.show { 
  opacity: 1; 
  transform: translateX(-50%) translateY(0); 
  pointer-events: auto;           /* ← ← clave: clickable sólo visible */
}

.coupon-toast { z-index: 1; }
.coupon-toast .ct-card.show { z-index: 1080; }


/* === Centrado de anuncios en tienda (sin cambiar HTML) === */
section[aria-label^="Publicidad"] .container { text-align: center; }

/* Asegura centrado real para elementos “no inline” */
section[aria-label^="Publicidad"] .container > * {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* Casos típicos */
section[aria-label^="Publicidad"] img { display: block; margin: 0 auto; height: auto; }
section[aria-label^="Publicidad"] iframe { display: block; margin: 0 auto; border: 0; }

/* AdSense */
section[aria-label^="Publicidad"] ins.adsbygoogle {
  display: block !important;
  margin: 0 auto !important;
}

/* ===== Modern Cards ===== */
:root{
  --pc-bg:#fff;
  --pc-br:16px;
  --pc-bd:#eaeef3;
  --pc-shadow:0 10px 28px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.06);
  --pc-shadow-h:0 16px 40px rgba(2,6,23,.10), 0 4px 10px rgba(2,6,23,.06);
  --pc-pill:#0ea5e9; /* cian para pills */
  --pc-accent:#6366f1; /* indigo para énfasis */
  --pc-danger:#ef4444;
  --pc-muted:#6b7280;
}

/* Card base */
.card.product-card,
.card.coupon-card,
.card.combo-card{
  border:1px solid var(--pc-bd);
  border-radius:var(--pc-br);
  background:var(--pc-bg);
  box-shadow:var(--pc-shadow);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card.product-card:hover,
.card.coupon-card:hover,
.card.combo-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--pc-shadow-h);
  border-color:#dfe6ee;
}

/* Imagen con proporción y skeleton */
.card .media{
  position:relative; overflow:hidden; background:#f7f8fb;
  aspect-ratio: 1 / 1;
}
.card .media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, filter .35s ease;
}
.card:hover .media img{ transform:scale(1.04); }

/* Etiquetitas pill (ej. “Nuevo”, “% OFF”) */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:999px; color:#fff; background:var(--pc-pill);
}
.pill.muted{ background:#94a3b8; }
.pill.sale{ background:#22c55e; }
.pill.danger{ background:var(--pc-danger); }
.pill.dark{ background:#111827; }

/* Título y subtítulos */
.card .card-title{
  font-weight:700; letter-spacing:.01em;
}
.sub{ color:var(--pc-muted); font-size:.9rem; }

/* Precio */
.price{
  display:flex; align-items:baseline; gap:.35rem;
  font-weight:800; font-size:1.05rem;
}
.price .msym{ opacity:.9; }
.price-alt .label{ color:var(--pc-muted); font-size:.84rem; }

/* Grupo cantidad */
.qty-group .btn{ border-radius:10px; }
.qty-group input{ border-radius:10px; }

/* Botón primario full */
.btn.w-100{ border-radius:12px; font-weight:700; }

/* Rating bar */
.rating{
  display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--pc-muted);
}
.rating-bar{
  position:relative; height:6px; width:86px; border-radius:6px; background:#e5e7eb; overflow:hidden;
}
.rating-bar > i{
  position:absolute; inset:0; background:linear-gradient(90deg, #fbbf24, #f59e0b);
}

/* ——— Cupones ——— */
.coupon-card{
  background:
    radial-gradient(1200px 400px at -10% -10%, #eef6ff 0%, transparent 55%),
    radial-gradient(1200px 400px at 110% 110%, #eef2ff 0%, transparent 55%),
    #fff;
}
.coupon-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.35rem;
}
.coupon-code{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:800; font-size:1.05rem; color:#111827; background:#f3f4f6; border:1px dashed #d1d5db;
  padding:.4rem .6rem; border-radius:10px;
}
.coupon-meta{ font-size:.86rem; color:var(--pc-muted); }
.coupon-dot{ width:6px; height:6px; border-radius:999px; background:#10b981; display:inline-block; }

/* ——— Combos ——— */
.combo-card .media{ aspect-ratio: 16 / 10; }
.combo-items{
  font-size:.85rem; color:#475569; margin-bottom:.5rem;
}
.combo-items li{ list-style:disc; margin-left:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Sutil borde interior al pasar */
.card:hover .card-body{ position:relative; }
.card:hover .card-body::after{
  content:''; position:absolute; inset:0; border-radius: calc(var(--pc-br) - 1px);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.14);
  pointer-events:none;
}