/* ===== Reset base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;color:#111827;background:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}

/* ===== Tokens ===== */
:root{
  --color-primary:#0ea5e9;
  --text:#111827; --muted:#6b7280; --border:#e5e7eb; --bg:#ffffff; --bg-soft:#f9fafb;
  --radius:12px;
  --appbar-h:72px;
}

/* ===== Layout utilitario ===== */
.container{max-width:80rem;margin-inline:auto;padding-inline:1rem}
.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.mx-auto{margin-inline:auto}
.px-4{padding-inline:1rem}.py-12{padding-block:3rem}.py-16{padding-block:4rem}.py-20{padding-block:5rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mb-4{margin-bottom:1rem}
.text-center{text-align:center}.text-white{color:#fff}.text-blue-100{color:#dbeafe}.text-blue-600{color:#2563eb}
.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}
.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}
.font-bold{font-weight:700}.font-black{font-weight:900}.font-semibold{font-weight:600}
.bg-white{background:#fff}.bg-gray-50{background:#f9fafb}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}
.border{border:1px solid var(--border)}.border-gray-200{border-color:#e5e7eb}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.06)}
.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.gap-3{gap:.75rem}.gap-8{gap:2rem}
.sticky{position:sticky}
@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:col-span-2{grid-column:span 2}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-6xl{font-size:3.75rem;line-height:1}}
@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== Appbar ===== */
.appbar{position:fixed;inset-inline:0;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.appbar-row{height:var(--appbar-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
body{padding-top:var(--appbar-h)}
.brand{display:flex;align-items:center;gap:.5rem}
.brand img{height:48px;width:auto;object-fit:contain}
.brand-text{font-weight:900;font-size:1.125rem}

/* ===== Navegación ===== */
.nav-desktop{display:none;gap:24px;align-items:center;font-size:14px}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center}
.nav-mobile{border-top:1px solid var(--border);background:#fff}
.nav-mobile .mobile-links{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 0}
@media(min-width:768px){
  .nav-desktop{display:flex}
  .nav-toggle{display:none}
  .nav-mobile{display:none!important}
}

/* ===== Botones ===== */
.btn{display:inline-block;border-radius:.75rem;padding:.6rem 1rem;border:1px solid var(--border);background:#fff}
.btn:hover{text-decoration:none;filter:brightness(.98)}
.btn-primary{background:var(--color-primary);color:#fff;border-color:transparent}
.btn-outline{background:#fff;color:#111;border-color:var(--border)}
.btn.full{display:block;width:100%}

/* ===== Tarjetas ===== */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-1px)}
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Imagenes ===== */
.relative{position:relative}.aspect-\[16\/9]{aspect-ratio:16/9}.bg-gray-100{background:#f3f4f6}

/* ===== Badges ===== */
.live-badge{position:absolute;top:.5rem;left:.5rem;background:#ef4444;color:#fff;font-weight:700;font-size:.75rem;padding:.15rem .35rem;border-radius:.375rem}

/* ===== Efectos destacados ===== */
.ad-wrap{position:relative}
.ad-wrap::before,.ad-wrap::after{content:"";position:absolute;filter:blur(28px);opacity:.6;z-index:-1}
.ad-wrap::before{width:220px;height:220px;left:-40px;top:-30px;background:radial-gradient(closest-side,rgba(14,165,233,.45),rgba(14,165,233,0))}
.ad-wrap::after{width:260px;height:260px;right:-30px;bottom:-40px;background:radial-gradient(closest-side,rgba(34,211,238,.35),rgba(34,211,238,0))}
@media (max-width:640px){
  .ad-wrap::before{left:-20px;top:-20px;width:160px;height:160px}
  .ad-wrap::after{right:-20px;bottom:-30px;width:180px;height:180px}
}

/* ===== Botón Ver animado ===== */
.btn.view-btn{position:relative}
.btn.view-btn::after{content:"";position:absolute;inset:0;border-radius:.5rem;pointer-events:none;box-shadow:0 0 0 0 rgba(2,132,199,0);transition:box-shadow .35s ease}
.btn.view-btn:hover::after{box-shadow:0 0 0 6px rgba(2,132,199,.12)}

/* ===== Form ===== */
label{display:block;font-size:.875rem;color:#374151}
input[type=text],select{width:100%;padding:.5rem .625rem;border:1px solid var(--border);border-radius:.5rem;background:#fff}
input[type=text]:focus,select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
kbd{border:1px solid var(--border);border-radius:.25rem;padding:.05rem .3rem;background:#fff}

/* ===== Hero ===== */
.hero-bg{background:linear-gradient(180deg,#0b1220 0%,#0a0f1d 100%)}

/* ===== Dark suave ===== */
@media (prefers-color-scheme:dark){
  body{background:#0b1220;color:#e5e7eb}
  .appbar{background:rgba(15,23,42,.8);border-color:#172033}
  .nav-mobile{background:#0f172a}
  #filters-bar{background:#0f172a;border-color:#172033}
  #catalogo .border,.card{border-color:#1f2a3a!important;background:#0f172a!important;color:#e5e7eb}
  .text-gray-600{color:#9aa4b2!important}
}