/* =====================================================
   DRIVOX — Estilos comunes a todas las páginas
   ===================================================== */

/* ========== RESET + VARIABLES ========== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --azul-profundo:#0D2158;
  --azul-medio:#1A3A8F;
  --azul-electrico:#2979FF;
  --cian:#00C2FF;
  --blanco:#FFFFFF;
  --gris-claro:#F4F6FB;
  --gris-medio:#E4E9F5;
  --gris-texto:#6B7A99;
  --negro:#080E1E;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--negro);background:var(--blanco);overflow-x:hidden}

/* ========== NAV ========== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 6%;display:flex;align-items:center;justify-content:space-between;height:70px;
  background:rgba(255,255,255,0.96);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(13,33,88,0.07);
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logomark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--azul-electrico),var(--cian));
  display:flex;align-items:center;justify-content:center;
}
.nav-logomark svg{width:18px;height:18px;stroke:white;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nav-brand{font-family:'Syne',sans-serif;font-weight:800;font-size:19px;color:var(--azul-profundo);letter-spacing:-0.5px}
.nav-brand span{color:var(--azul-electrico)}
.nav-menu{display:flex;align-items:center;gap:28px;list-style:none}
.nav-menu a{font-size:14px;font-weight:400;color:var(--gris-texto);text-decoration:none;transition:color .2s}
.nav-menu a:hover{color:var(--azul-profundo)}
.nav-menu .dropdown{cursor:pointer;font-size:14px;color:var(--gris-texto)}
.nav-menu .dropdown:hover{color:var(--azul-profundo)}
.btn-nav{
  background:var(--azul-electrico);color:white!important;
  padding:9px 20px;border-radius:8px;font-weight:500!important;
  transition:background .2s,transform .15s!important;
}
.btn-nav:hover{background:var(--azul-medio)!important;transform:translateY(-1px)!important}

/* ========== FOOTER ========== */
footer{background:var(--negro);padding:60px 6% 32px}
.footer-inner{max-width:1200px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:48px}
.ft-brand-name{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:white;letter-spacing:-.5px}
.ft-brand-name span{color:var(--azul-electrico)}
.ft-brand p{font-size:13px;color:rgba(255,255,255,.75);line-height:1.75;margin-top:12px;font-weight:300;max-width:240px}
.ft-brand .ft-addr{margin-top:14px;font-size:12px;color:rgba(255,255,255,.75)}
.ft-col h5{
  font-family:'Syne',sans-serif;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.75);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px;
}
.ft-col ul{list-style:none}
.ft-col ul li{margin-bottom:9px}
.ft-col ul li a{
  font-size:13px;color:rgba(255,255,255,.75);text-decoration:none;
  transition:color .2s;font-weight:300;
}
.ft-col ul li a:hover{color:white}
.ft-div{height:1px;background:rgba(255,255,255,.06);margin-bottom:26px}
.ft-bottom{display:flex;justify-content:space-between;align-items:center}
.ft-bottom p{font-size:12px;color:rgba(255,255,255,.75);font-weight:300}
.ft-contact{display:flex;gap:22px}
.ft-contact a{font-size:12px;color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s;font-weight:300}
.ft-contact a:hover{color:var(--cian)}

/* ========== ESPACIADO TOP (nav fijo) ========== */
.page-wrap{padding-top:70px}

/* ========== BOTONES COMUNES ========== */
.btn-primary{
  background:var(--azul-electrico);color:white;
  padding:13px 26px;border-radius:9px;
  font-size:15px;font-weight:500;text-decoration:none;
  transition:background .2s,transform .15s;font-family:'DM Sans',sans-serif;
  display:inline-block;
}
.btn-primary:hover{background:var(--azul-medio);transform:translateY(-2px)}
.btn-ghost{
  background:transparent;color:var(--azul-profundo);
  padding:13px 26px;border-radius:9px;
  font-size:15px;font-weight:500;text-decoration:none;
  border:1.5px solid var(--gris-medio);
  transition:border-color .2s,color .2s;font-family:'DM Sans',sans-serif;
  display:inline-block;
}
.btn-ghost:hover{border-color:var(--azul-electrico);color:var(--azul-electrico)}
.btn-cian{
  background:var(--cian);color:var(--azul-profundo);
  padding:11px 22px;border-radius:8px;font-size:13px;font-weight:600;
  text-decoration:none;font-family:'DM Sans',sans-serif;white-space:nowrap;
  transition:opacity .2s;display:inline-block;
}
.btn-cian:hover{opacity:.85}
.btn-white{
  background:white;color:var(--azul-profundo);
  padding:13px 26px;border-radius:9px;
  font-size:15px;font-weight:600;text-decoration:none;
  font-family:'DM Sans',sans-serif;transition:all .2s;display:inline-block;
}
.btn-white:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}
.btn-outline{
  background:transparent;color:white;
  padding:13px 26px;border-radius:9px;
  font-size:15px;font-weight:400;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.28);
  font-family:'DM Sans',sans-serif;transition:all .2s;display:inline-block;
}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* ========== SECCIÓN BASE ========== */
section{padding:88px 6%}
.s-inner{max-width:1200px;margin:0 auto}
.s-eye{font-size:12px;font-weight:500;color:var(--azul-electrico);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:10px}
.s-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(36px,4vw,60px);
  font-weight:800;color:var(--azul-profundo);
  letter-spacing:-.5px;line-height:1.05;margin-bottom:14px;
  text-transform:uppercase;
}
.s-title em{font-style:normal;color:var(--azul-electrico)}
.s-desc{font-size:16px;color:var(--gris-texto);line-height:1.75;max-width:540px;font-weight:300}

/* ========== RESPONSIVE NAV Y FOOTER ========== */
@media(max-width:1024px){
  .ft-top{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  nav{padding:0 4%}
  .nav-menu{display:none}
  section{padding:64px 4%}
  .ft-top{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;gap:12px;text-align:center}
  .ft-contact{flex-direction:column;gap:8px;align-items:center}
}