/* ===========================
   Audio Sound Service — styles.css
   Paleta ampliada + componentes + móvil perfecto
   =========================== */
:root{
  --bg:#0b0b0b;
  --text:#ffffff;
  --muted:rgba(255,255,255,.7);
  --primary:rgba(20,20,20,0.95);
  --accent:rgba(255,165,0,1);
  --success:#25D366;
  --info:#3BA1FF;
  --warning:#FFB020;
  --danger:#FF4D4F;
  --grad-1:linear-gradient(120deg, rgba(255,255,255,.06), transparent);
  --grad-2:linear-gradient(135deg,#151515 0%,#0b0b0b 80%);
  --card-bg:rgba(255,255,255,.04);
  --card-bd:rgba(255,255,255,.07);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
}

/* RESET & BASE */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Arial;
  scroll-behavior:smooth;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.container{max-width:1100px;margin:0 auto;padding:20px}

/* HEADER */
.site-header{
  position:sticky;top:0;
  background:var(--primary);
  backdrop-filter:saturate(140%) blur(6px);
  z-index:20;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo-img{
  height:28px;display:block;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* NAVIGATION */
.main-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.main-nav.center{justify-content:center;margin:10px auto}
.main-nav a{
  padding:10px 12px;
  border-radius:10px;
  transition:background .2s,color .2s;
}
.main-nav a:hover{background:rgba(255,255,255,.06)}
.ad-wrap{padding:6px;text-align:center;font-size:12px;opacity:.85}
.nav-toggle{
  display:none;position:relative;width:38px;height:34px;
  border:0;background:transparent;cursor:pointer;
}
.nav-toggle span{
  position:absolute;left:6px;right:6px;height:3px;
  background:#fff;border-radius:2px;transition:.2s;
}
.nav-toggle span:nth-child(1){top:9px}
.nav-toggle span:nth-child(2){top:16px}
.nav-toggle span:nth-child(3){top:23px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg)
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg)
}

/* HERO */
.hero{background:var(--grad-1)}
.hero .container{padding:80px 20px}

/* TYPOGRAPHY */
h1,h2,h3{margin:.4em 0}
h1{font-size:40px}
h2{font-size:28px}
h3{font-size:20px}

/* GRID SYSTEM */
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* CARDS */
.card{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:16px;
  padding:18px;
  color:var(--text);
}
.card .thumb{
  width:100%;height:160px;object-fit:cover;
  border-radius:12px;margin:.5em 0;
}
.card h3{color:var(--text)}
.card p, .card li{color:var(--muted)}
.card ul{margin-left:18px}

/* TEXT UTILS */
.muted{color:var(--muted)}
.center{text-align:center}
.right{text-align:right}
.bold{font-weight:700}
.small{font-size:13px}

/* SPACING */
.p-0{padding:0}.p-10{padding:10px}.p-20{padding:20px}
.mt-10{margin-top:10px}.mt-20{margin-top:20px}
.gap-6{gap:6px}.gap-12{gap:12px}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:12px;
  font-weight:700;border:0;cursor:pointer;
  transition:transform .06s, box-shadow .2s, background .2s,color .2s;
  min-height:44px;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-sm{padding:6px 10px;border-radius:10px;font-weight:600;min-height:36px}
.btn-lg{padding:14px 22px;border-radius:18px;font-size:18px}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{box-shadow:0 8px 24px rgba(0,0,0,.35)}
.btn-ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.25)}
.btn-outline:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.04)}
.btn-success{background:#25D366;color:#042}
.btn-info{background:#3BA1FF;color:#001226}
.btn-warning{background:#FFB020;color:#4a3200}
.btn-danger{background:#FF4D4F;color:#2b0000}

/* FORMS */
input, textarea, select{
  width:100%;padding:10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:var(--text);
}
textarea{min-height:120px;resize:vertical}
label{display:block;font-size:13px;margin:6px 0 6px .5px;opacity:.9}
input:focus, textarea:focus, select:focus{outline:2px solid rgba(255,255,255,.18)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* FOOTER */
.site-footer{
  background:rgba(255,255,255,.03);
  margin-top:40px;padding:20px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.site-footer .grid{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.copy{opacity:.7;margin-top:10px;font-size:13px}

/* WHATSAPP FLOAT */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:50}
.wa-bubble{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.38),
             0 0 0 0 rgba(37,211,102,.35);
  animation:pop 2s infinite;
}
.wa-float:hover .wa-bubble{
  animation:none;
  box-shadow:0 10px 24px rgba(37,211,102,.45),
             0 0 0 8px rgba(37,211,102,.15);
}
.wa-hint{
  position:absolute;right:70px;bottom:18px;
  background:rgba(0,0,0,.7);padding:8px 12px;
  border-radius:10px;opacity:0;transition:opacity .18s;white-space:nowrap;
}
.wa-float:hover .wa-hint{opacity:1}
@keyframes pop {0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}

/* CHIPS */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.dot{width:8px;height:8px;border-radius:50%}
.dot-success{background:#25D366}
.dot-info{background:#3BA1FF}
.dot-warning{background:#FFB020}
.dot-danger{background:#FF4D4F}

/* HERO HOME */
.hero.home{
  background:radial-gradient(1200px 500px at 20% 0%, rgba(255,165,0,.18), transparent 60%),
             radial-gradient(1000px 600px at 90% 10%, rgba(37,211,102,.12), transparent 65%),
             var(--grad-2);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* KPIS */
.kpis{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.kpi{text-align:center;padding:18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.kpi .num{font-size:36px;font-weight:900}
.kpi .desc{opacity:.8}

/* RESPONSIVE FONT SIZES */
h1{font-size:clamp(26px,4.2vw,40px)}
h2{font-size:clamp(20px,3vw,28px)}
h3{font-size:clamp(16px,2.2vw,20px)}

/* RESPONSIVE */
@media (max-width:860px){
  .logo-img{height:22px}
  .nav-toggle{display:block}
  .main-nav{
    position:fixed;inset:60px 0 auto 0;
    background:var(--primary);
    display:none;flex-direction:column;
    padding:10px 14px;gap:6px;
    border-bottom:1px solid rgba(255,255,255,.06);z-index:40;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:14px;border-radius:12px}
  body.no-scroll{overflow:hidden}
  .header-inner{justify-content:space-between}
}
@media (max-width:980px){
  .form-row{grid-template-columns:1fr}
  .grid.two,.grid.three{grid-template-columns:1fr}
  .grid.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .hero .container{padding:50px 16px}
}
@media (max-width:640px){.card .thumb{height:140px}}
@media (max-width:480px){
  .wa-bubble{width:52px;height:52px}
  .wa-hint{display:none}
}

/* MODO CLARO — FIX TEXTO EN CARDS */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f7f7;
    --text:#111;
    --muted:rgba(0,0,0,.62);
    --primary:rgba(255,255,255,.9);
    --card-bg:#fff;
    --card-bd:rgba(0,0,0,.08);
  }
  .site-header{border-bottom:1px solid rgba(0,0,0,.06)}
  .main-nav a:hover{background:rgba(0,0,0,.05)}
  .card{
    background:#fff;
    border-color:rgba(0,0,0,.08);
    color:var(--text);
  }
  .card .muted{color:var(--muted)}
  .card p,.card li,.card h3{color:var(--text)}
}