:root{
  --card-media-ratio: 3/2;
  --card-media-h-mobile: 190px;
  --card-media-h-desktop: 220px;
  --wave-color: rgba(255,255,255,.06);

  /* Gradiente del logo */
  --logo-g1:#ff3b30; /* rojo */
  --logo-g2:#ff9500; /* naranja */
  --logo-g3:#ffd60a; /* amarillo */
  --logo-g4:#34c759; /* verde */
  --logo-g5:#32ade6; /* celeste */
  --logo-g6:#5856d6; /* azul */
}

.grid{display:grid}
.gap-8{gap:2rem}
.text-3xl{font-size:1.875rem;line-height:1.3}
.text-muted{color:var(--muted)}
.text-white{color:#fff}
.text-gray-400{color:#9ca3af}
.text-green-400{color:#4ade80}
.text-red-400{color:#f87171}
.max-w-7xl{max-width:80rem;margin-left:auto;margin-right:auto}

/* ================= Buttons ================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem .9rem;border-radius:.7rem;font-weight:700;font-size:.9rem;border:1px solid transparent;cursor:pointer;transition:transform .05s,background-color .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-600)}
.btn-accent{background:#334155;color:var(--text)}
.btn-accent:hover{background:#3b465a}
.btn-cart{background:#f59e0b;color:#111827}
.btn-cart:hover{background:#d97706}
.btn-danger{background:#ef4444;color:#fff}
.btn-outline{background:transparent;border-color:#334155;color:#e2e8f0}
.btn-outline:hover{background:#1f2937}

/* ================= Card base ================ */
.card{border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:var(--bg-soft);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;min-width:0}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.22)}

.card-media{position:relative; isolation:isolate; background:#0b1220; aspect-ratio:16/9; height:clamp(160px, 22vw, 220px); min-height:auto;}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.card-media::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:24px; z-index:1; background: radial-gradient(18px 12px at 9px -2px, var(--wave-color) 98%, transparent 100%) repeat-x; background-size:36px 24px;}

.card-body{padding:1rem;display:flex;flex-direction:column;flex:1}
.card-content{flex:1;min-height:4.5rem;display:flex;flex-direction:column;gap:.4rem}
.card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:1rem;border-top:1px solid var(--border);padding-top:1rem}
.card.selected{outline:2px solid var(--color-primary);box-shadow:0 0 0 3px var(--ring)}

/* ================= Categories ================ */
.category-card{border-radius:.75rem;overflow:hidden;position:relative;cursor:pointer}
.category-card img{transition:transform .3s ease;display:block;width:100%}
.category-card:hover img{transform:scale(1.05)}
.category-card .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 60%)}
.category-card .title{position:absolute;bottom:1rem;left:1rem;color:white;font-weight:700;font-size:1.25rem}

/* ================= Filters ================ */
#filters-panel{background:var(--bg-soft);padding:1.5rem;border-radius:.75rem;border:1px solid var(--border)}
#filters-panel label{display:block;margin-bottom:.5rem;font-weight:500;font-size:.875rem}
#filters-panel input,#filters-panel select{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:.375rem;background:var(--bg);color:var(--text)}
#filters-panel input::placeholder{color:var(--muted)}
#filters-panel input:focus,#filters-panel select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--ring)}
#filters-panel button{width:100%;background:var(--color-primary);color:white;padding:.75rem 1rem;border:none;border-radius:.375rem;font-weight:700;cursor:pointer;transition:background-color .2s;font-size:1rem}
@media (min-width:768px){#filters-panel button{width:auto}}
#filters-panel button:hover{background:var(--color-primary-600)}

/* ================= Live badge ================ */
.live-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(239,68,68,.12);color:#fecaca;border:1px solid rgba(239,68,68,.35);padding:.25rem .5rem;border-radius:9999px;font-size:.7rem;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.live-dot{width:8px;height:8px;border-radius:9999px;background:#ef4444;position:relative}
.live-dot::after{content:"";position:absolute;inset:-6px;border-radius:9999px;border:2px solid rgba(239,68,68,.6);animation:pulse 1.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:1}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.6);opacity:0}}

/* ================= Pager ================ */
#pager{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;margin-top:1rem}
.page-btn{background:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:.375rem;padding:.4rem .7rem;cursor:pointer}
.page-btn[disabled]{opacity:.45;cursor:not-allowed}
.page-btn.active{background:var(--color-primary);border-color:var(--color-primary)}
.page-size{margin-left:auto;background:#0f172a;border:1px solid #334155;border-radius:.375rem;color:#e2e8f0;padding:.35rem .5rem}

/* ================= FAB/Toast ================ */
.fab,.fab-wa{position:fixed;right:16px;z-index:999;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:9999px;box-shadow:0 10px 20px rgba(0,0,0,.35);color:#fff;background:var(--color-primary)}
.fab{bottom:16px}.fab-wa{bottom:84px;background:#22c55e}
.fab svg,.fab-wa svg{width:26px;height:26px}
.fab-badge{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;width:22px;height:22px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:2px solid #0b1220}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:.5rem;padding:.6rem 1rem;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.show{opacity:1}

/* ================= Featured (compact Ads) ================ */
.featured-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: clamp(220px, 26vw, 300px); /* más pequeño */
  gap:1rem;
  overflow-x:auto;
  padding-bottom:.5rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.featured-row .card{
  scroll-snap-align:start;
  border-radius:18px;
  background:#0f172a;
  border:1px solid #1f2937;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  min-width:unset;
}
.featured-row .card-media{
  aspect-ratio:1/1;             /* cuadrado */
  height:auto;                  /* usa el ratio */
  border-radius:16px;
  overflow:hidden;
}
.featured-row .card-media img{width:100%;height:100%;object-fit:cover;display:block}
.featured-row .card-body{padding:10px 12px}
.featured-row .card-content h3{
  font-size:.95rem;line-height:1.15;max-height:2.3em;overflow:hidden;
}
.featured-row .card-content p{font-size:.75rem;opacity:.85}
/* Oculta meta extra para look publicitario */
.featured-row .card-content p.text-gray-400,
.featured-row .card-content p.text-sm{display:none}
.featured-row .card-actions{
  margin-top:.35rem;display:flex;flex-wrap:wrap;gap:.4rem;border-top:none;padding-top:0;
}
.featured-row .card-actions .btn{
  padding:.35rem .6rem;font-size:.75rem;border-radius:9999px;
}
.featured-row .live-badge{transform:scale(.85);transform-origin:right center}

/* Variante opcional por clase (si JS marca .card--ads) */
.card.card--ads .card-media{aspect-ratio:1/1;height:auto;border-radius:16px}
.card.card--ads .card-content p.text-gray-400,
.card.card--ads .card-content p.text-sm{display:none}
.card.card--ads .card-actions{margin-top:.35rem;border-top:none;padding-top:0}
.card.card--ads .card-actions .btn{padding:.35rem .6rem;font-size:.75rem;border-radius:9999px}

/* ================= Responsive grids ================ */
@media (min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (prefers-reduced-motion: reduce){
  .card:hover{transform:none;box-shadow:none}
  .live-dot::after{animation:none}
}

/* ================= Hero banner ================ */
.hero-banner{position:relative;margin:0;max-width:100%;border:none;border-radius:0;overflow:hidden;background:#0b1220;color:white;display:flex;align-items:center;justify-content:center;text-align:center;height:60vh;min-height:400px}
.hero-media{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-banner::after{content:'';position:absolute;inset:0;background-color:rgba(0,0,0,.5);z-index:2}
.hero-text-content{position:relative;z-index:3;padding:1rem;max-width:800px}

/* === H1 nuevo: dos líneas y colores por palabra === */
.h1-hero{margin:0 0 1rem;text-align:center}
.h1-hero .h1-top{
  display:block;color:#fff;font-weight:900;
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.05;
}
.h1-hero .h1-bottom{
  display:block;font-weight:900;
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.05;
}
.h1-bottom span{display:inline-block}

/* “Publicidad” = rojo→naranja→amarillo→verde */
.h1-publicidad{
  margin-right:.35rem;
  background:linear-gradient(90deg,
    var(--logo-g1) 0%,
    var(--logo-g2) 25%,
    var(--logo-g3) 55%,
    var(--logo-g4) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* “Exterior” = verde→celeste→azul */
.h1-exterior{
  background:linear-gradient(90deg,
    var(--logo-g4) 0%,
    var(--logo-g5) 50%,
    var(--logo-g6) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Subtítulo y CTA */
.hero-sub{
  font-size:clamp(1rem,1.6vw,1.25rem);
  margin:.8rem auto 1.4rem;max-width:900px;
  color:#e5e7eb;text-align:center;opacity:.95;
}
.btn-hero{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.4rem;border-radius:9999px;font-weight:800;
  background:#2563eb;border:1px solid transparent;
}
.btn-hero:hover{background:#1e40af}