/* ============================================================
   Publisitios Design System v4.0 — 20 Aniversario
   Variables globales, nav, footer, botones, tipografía
   ============================================================ */

:root {
  --dk:  #060810; --dk2: #0C0F18; --dk3: #12161F;
  --cr:  #F4F1EC; --cr2: #EBE7E0;
  --yel: #F5C200; --yel-l: #FFD60A; --yel-ll: #FDE68A;
  --rose: #E11D48; --rose-l: #FB7185;
  --fd: 'Barlow Condensed', Impact, sans-serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;overflow-x:hidden}
body{font-family:var(--fb);background:var(--dk);color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;width:100%}

/* ── PROGRESS BAR ── */
#prog{position:fixed;top:0;left:0;height:3px;z-index:9999;background:linear-gradient(90deg,var(--yel),var(--rose));transform-origin:left;transform:scaleX(0);transition:transform .1s linear;width:100%}

/* ── CURSOR ── */
#cur{position:fixed;width:8px;height:8px;background:var(--yel-l);border-radius:50%;pointer-events:none;z-index:10001;transform:translate(-50%,-50%);mix-blend-mode:screen}
#cur-r{position:fixed;width:34px;height:34px;border:1.5px solid rgba(245,194,0,.4);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .25s,height .25s}
body:has(a:hover) #cur-r{width:50px;height:50px;border-color:rgba(251,113,133,.35)}

/* ── NAV ── */
#nav{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:7000;width:calc(100% - 48px);max-width:1200px;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:14px;padding:10px 20px;display:flex;align-items:center;gap:20px;transition:all .4s var(--ease);box-shadow:0 4px 24px rgba(0,0,0,.1)}
#nav.scrolled{box-shadow:0 8px 40px rgba(0,0,0,.16)}
.nav-logo img{height:64px;width:auto;object-fit:contain;display:block}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin-left:auto}
.nav-links a{font-size:.82rem;font-weight:500;color:rgba(0,0,0,.5);padding:6px 12px;border-radius:8px;transition:color .2s,background .2s}
.nav-links a:hover{color:#0A0A0A;background:rgba(0,0,0,.05)}
.nav-cta{background:var(--yel) !important;color:#0A0A0A !important;border-radius:100px !important;font-weight:700 !important;padding:8px 18px !important}
.nav-cta:hover{background:var(--yel-l) !important;transform:scale(1.04) !important}
.nav-ham{display:none;flex-direction:column;gap:4px;cursor:pointer;margin-left:auto}
.nav-ham span{display:block;width:20px;height:2px;background:rgba(0,0,0,.5);border-radius:2px}

/* ── BOTONES ── */
.btn-p{display:inline-flex;align-items:center;gap:8px;background:var(--yel);color:#0A0A0A;font-family:var(--fb);font-size:.88rem;font-weight:700;padding:13px 28px;border-radius:100px;box-shadow:0 4px 20px rgba(245,194,0,.45);transition:background .2s,transform .2s,box-shadow .2s}
.btn-p:hover{background:var(--yel-l);transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,194,0,.45)}
.btn-g{display:inline-flex;align-items:center;gap:8px;background:transparent;color:rgba(255,255,255,.65);font-family:var(--fb);font-size:.88rem;font-weight:600;padding:13px 22px;border-radius:100px;border:1px solid rgba(255,255,255,.16);transition:all .2s}
.btn-g:hover{background:rgba(255,255,255,.07);color:#fff}

/* ── TIPOGRAFÍA DE SECCIÓN ── */
.s-eye{font-family:var(--fb);font-size:.71rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.s-eye::before{content:'';width:18px;height:2px;border-radius:2px}
.eye-l{color:var(--yel)}.eye-l::before{background:var(--yel)}
.eye-d{color:var(--yel-l)}.eye-d::before{background:var(--yel-l)}
.s-h2-l{font-family:var(--fd);font-size:clamp(2.8rem,5vw,4.5rem);font-weight:900;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:#0A0E1A;margin-bottom:12px}
.s-h2-d{font-family:var(--fd);font-size:clamp(2.8rem,5vw,4.5rem);font-weight:900;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.s-h2-d em,.s-h2-l em{font-style:italic;color:var(--yel-l)}

/* ── FOOTER ── */
footer{background:var(--dk2);border-top:1px solid rgba(255,255,255,.05);padding:56px 0 26px}
.ft-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.ft-logo{margin-bottom:20px}
.ft-logo img{height:auto;width:100%;max-width:240px;background:#fff;border-radius:12px;padding:14px 18px;display:block}
.ft-p{font-size:.79rem;color:rgba(255,255,255,.3);line-height:1.68;margin-bottom:18px;font-family:var(--fb)}
.ft-soc{display:flex;gap:8px}
.ft-sb{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.36);font-size:.75rem;transition:background .2s,color .2s}
.ft-sb:hover{background:var(--yel);color:#0A0A0A}
.ft-ct{font-family:var(--fb);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.26);margin-bottom:16px}
.ft-ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft-ul a{font-size:.79rem;color:rgba(255,255,255,.4);transition:color .2s;font-family:var(--fb)}
.ft-ul a:hover{color:#fff}
.ft-bot{max-width:1200px;margin:40px auto 0;padding:20px 40px 0;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:rgba(255,255,255,.2);font-family:var(--fb)}

/* ── BOTÓN FLOTANTE COTIZACIÓN ── */
.wa{position:fixed;bottom:22px;right:18px;z-index:6000;background:var(--yel);color:#0A0A0A;border-radius:100px;padding:11px 18px 11px 14px;display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:.8rem;font-weight:700;box-shadow:0 8px 24px rgba(245,194,0,.4);transition:transform .2s,box-shadow .2s;text-decoration:none;border:none;cursor:pointer}
.wa:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 32px rgba(245,194,0,.5);color:#0A0A0A}
.wa svg{width:17px;height:17px;flex-shrink:0}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .ft-inner{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:640px){
  .ft-inner{grid-template-columns:1fr;padding:0 22px}
  .ft-bot{padding:18px 22px 0;flex-direction:column;gap:7px;text-align:center}
  .nav-links{display:none}
  .nav-ham{display:flex}
}