/* ═══════════════════════════════════════════════
   NONWATIO — TEMA WEB PÚBLICA (estilo gsap.com)
   Se carga después de style.css solo en las páginas públicas;
   el panel de administración conserva el diseño original.
   Plano, casi negro, texto crema, tipografía grande y apretada,
   botones píldora y cian como único acento de marca.
   ═══════════════════════════════════════════════ */
/* ── FUENTES DE MARCA ──────────────────────────
   Principal: D-DIN (Datto, licencia SIL OFL) — títulos y encabezados.
   Secundaria: Neue Haas Grotesk (licencia comercial) — textos extensos.
   Se usa si está instalada; si no, cae a Inter hasta tener los .woff2
   con licencia web en assets/fonts/. */
@font-face{font-family:'D-DIN';font-style:normal;font-weight:400;font-display:swap;src:local('D-DIN'),url('fonts/D-DIN.woff') format('woff')}
@font-face{font-family:'D-DIN';font-style:italic;font-weight:400;font-display:swap;src:local('D-DIN Italic'),url('fonts/D-DIN-Italic.woff') format('woff')}
@font-face{font-family:'D-DIN';font-style:normal;font-weight:700;font-display:swap;src:local('D-DIN Bold'),url('fonts/D-DIN-Bold.woff') format('woff')}
:root{
  --navy:#0E100F;--navy-mid:#141614;--navy-deep:#0A0B0A;--navy-card:#1A1C1A;
  --blue:#171A18;--blue-mid:#00C2FF;--blue-light:rgba(0,194,255,.1);
  --cyan:#00C2FF;--cyan-soft:#00C2FF;--cyan-glow:rgba(0,194,255,.2);
  --white:#F7F6EC;--off:#F7F6EC;--text-muted:#A1A298;--text-dim:#62645D;
  --glass:rgba(247,246,236,.035);--glass-b:rgba(247,246,236,.1);
  --ink:#0E100F;--line:rgba(247,246,236,.1);--radius:20px;
  --font-display:'D-DIN';
  --font-body:'Neue Haas Grotesk Text Pro','Neue Haas Grotesk Text','Neue Haas Grotesk','NHaasGroteskTXPro-55Rg','Inter';
}
body{background:var(--navy);color:var(--white);font-size:1rem;font-family:var(--font-body),sans-serif}
::selection{background:var(--cyan);color:var(--ink)}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:#3A3C37;border-radius:3px}
#pcv{opacity:.12}

/* ── TIPOGRAFÍA ────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-display),sans-serif;letter-spacing:-.022em;line-height:1.04}
h3,h4{letter-spacing:-.02em;line-height:1.2}
.sh h2{font-size:clamp(2.2rem,4.6vw,3.8rem);font-weight:700}
.sh-desc{font-size:1.05rem;color:var(--text-muted)}
.accent{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--cyan)!important}

/* ── ETIQUETAS: píldora con punto ──────────────── */
.lbl{padding:6px 14px;border:1px solid rgba(0,194,255,.3);border-radius:999px;font-size:.66rem;letter-spacing:.14em;gap:8px;background:rgba(0,194,255,.05)}
.lbl::before{display:none}
.badge{letter-spacing:.06em}

/* ── BOTONES PÍLDORA ───────────────────────────── */
.btn-p,.btn-o,.btn-ghost{border-radius:999px;text-transform:none;letter-spacing:-.005em;font-size:.95rem;font-weight:600;padding:14px 28px;transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .35s}
.btn-p{background:var(--cyan);color:var(--ink);box-shadow:none}
.btn-p:hover{background:var(--white);color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,194,255,.25)}
.btn-o{color:var(--white);border:1px solid rgba(247,246,236,.25)}
.btn-o:hover{border-color:var(--white);background:rgba(247,246,236,.06)}
.btn-ghost{border-color:var(--line)}
.btn-sm{padding:9px 18px;font-size:.85rem}

/* ── NAVEGACIÓN: barra que se vuelve píldora flotante ── */
#nav{height:72px;transition:top .5s var(--ease),left .5s var(--ease),right .5s var(--ease),height .5s var(--ease),background .4s,border-color .4s,border-radius .5s var(--ease);border:1px solid transparent}
#nav.scrolled{top:12px;left:2.5%;right:2.5%;height:60px;padding:0 10px 0 24px;border-radius:999px;background:rgba(20,22,20,.72);border-color:var(--line);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.nav-menu{gap:6px}
.nav-menu a{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:500;color:var(--text-muted);padding:8px 12px;border-radius:999px;transition:color .25s,background .25s}
.nav-menu a::after{display:none}
.nav-menu a:hover{color:var(--white);background:rgba(247,246,236,.06)}
.nav-menu a.active{color:var(--white)}
.nav-cta{background:var(--cyan)!important;color:var(--ink)!important;border:none!important;border-radius:999px!important;padding:10px 20px!important;font-weight:600!important;margin-left:6px}
.nav-cta:hover{background:var(--white)!important;box-shadow:none!important}
.nav-cart-btn{border-radius:50%;color:var(--text-muted)}
.nav-cart-btn:hover{background:rgba(247,246,236,.06)}
.cart-badge{color:var(--ink)}

/* ── SECCIONES Y FONDOS: planos, sin brillos azules ── */
.divider{background:var(--line)}
.hero-bg,.page-hero,.blog-hero,.shop-hero,.legal-hero{background:radial-gradient(ellipse 60% 50% at 70% 10%,rgba(0,194,255,.07) 0%,transparent 70%),var(--navy)!important}
.hero-grid-lines,.page-hero-grid{opacity:.35}
.orb{opacity:.35}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.8rem);font-weight:700}

/* ── TARJETAS ──────────────────────────────────── */
.card,.svc-card,.cert-c,.cform,.cdet-item,.bcard,.product-card,.gw-card,.sidebar-card,.pd-block,.svc-feat-card,.nwb-card{border-radius:var(--radius)}
.card,.svc-card,.cert-c,.cform,.cdet-item{background:var(--navy-card);border-color:var(--line)}
.svc-card:hover,.cert-c:hover{border-color:rgba(0,194,255,.45);box-shadow:none}
.svc-card::before{display:none}
.svc-ico,.cert-ico,.cdet-icon{background:rgba(0,194,255,.08);border-color:rgba(0,194,255,.2);border-radius:14px}

/* ── FILTROS DE LA TIENDA ─────────────────────── */
.filter-bar{border-bottom-color:var(--line)!important}
.filter-tab{border-radius:999px!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important}
.filter-tab.active{background:var(--cyan)!important;color:var(--ink)!important;box-shadow:none!important}

/* ── FORMULARIOS ───────────────────────────────── */
.fg label{text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--text-muted)}
.fg input,.fg select,.fg textarea{border-radius:12px;background:rgba(247,246,236,.04);border-color:var(--line)}
.fg input:focus,.fg select:focus,.fg textarea:focus{box-shadow:0 0 0 3px rgba(0,194,255,.15)}

/* ── PIE ───────────────────────────────────────── */
#footer{background:var(--navy-deep);border-top-color:var(--line)}
.footer-col h4{text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--white)}
.footer-social{border-radius:50%}
.footer-eu{border-radius:16px}

/* ── FLOTANTES: volver arriba, chat, avisos ────── */
#btt{background:var(--navy-card);border-color:var(--line);border-radius:50%;color:var(--white)}
#btt:hover{background:var(--cyan);color:var(--ink);box-shadow:none}
#cbot-launch{background:var(--cyan);color:var(--ink);box-shadow:0 8px 30px rgba(0,0,0,.4);animation:none}
#cbot-launch:hover{box-shadow:0 12px 36px rgba(0,194,255,.35)}
#cbot-panel,.mini-cart,.ck-modal,.mtg-modal,.toast{background:var(--navy-mid);border-color:var(--line)}
#cbot-panel,.ck-modal,.mtg-modal{border-radius:24px}
.cbot-head,.mtg-head{background:var(--navy-card)}
.cbot-body{background:none}
.cbot-msg.user,.cbot-send,.mtg-slot.sel,.ck-accept{background:var(--cyan);color:var(--ink);box-shadow:none}
.cbot-msg.user strong{color:var(--ink)}
.ck-btn{border-radius:999px}
#cookie-banner{left:16px;right:16px;bottom:16px;border-radius:20px;border:1px solid var(--line);background:rgba(20,22,20,.92);transform:translateY(calc(100% + 24px))}
#cookie-banner.show{transform:translateY(0)}
.mc-item,.mc-item-img{border-radius:14px}

@media(max-width:768px){
  #nav.scrolled{left:12px;right:12px;padding:0 8px 0 18px}
  #cookie-banner{left:10px;right:10px;bottom:10px}
}