:root{
  --legal-green:#004247;
  --neutral-silver:#E4E8EC;
  --trust-navy:#192B3E;
  --white:#FFFFFF;
  --premium-gold:#C7A569;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--white);background:#0b141a;line-height:1.6}
h1,h2,h3,h4{font-family:"Montserrat",system-ui,Arial,sans-serif;margin:0 0 .5rem;letter-spacing:.2px}
a{color:var(--premium-gold);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.site-header{background:linear-gradient(90deg,var(--legal-green),#022f32);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--white)} .brand-logo{height:36px;width:auto;filter:grayscale(100%) brightness(200%)} .brand-text{font-weight:800;letter-spacing:.5px}
.nav a{margin:0 .6rem;color:#EAF1F5}
.btn{padding:.5rem .9rem;border:1px solid var(--premium-gold);border-radius:6px;color:var(--premium-gold)}
/* Hero with banner image + overlay */
.hero{position:relative;padding:2rem 0 2rem;background-image:url('/assets/img/hero.jpg');background-size:cover;background-position:center;background-repeat:no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 80% -200px, rgba(199,165,105,.12), transparent),
  linear-gradient(180deg, rgba(25,43,62,.92), rgba(11,20,26,.60) 50%);
pointer-events:none}
.hero > .container{position:relative;z-index:1}
.hero h1{font-size:2.2rem}
.hero p{max-width:780px;color:#d6dde4}
.grid{display:grid;gap:1rem} .grid-3{grid-template-columns:repeat(auto-fit,minmax(512px,1fr))}
.card{background:#111a22;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:1rem}
.section{padding:2.5rem 0;border-top:1px solid rgba(255,255,255,.06);background:#0d1620}
.section.alt{background:#0b141a}
.section h2{color:#f0f4f8}
.badge{display:inline-block;background:rgba(199,165,105,.12);color:var(--premium-gold);padding:.2rem .5rem;border-radius:999px;border:1px solid rgba(199,165,105,.4);font-size:.85rem}
.kicker{color:#c9d3dc;font-weight:600;letter-spacing:.5px}
.cta{display:flex;gap:1rem;margin-top:1rem}
.cta .btn.primary{background:var(--premium-gold);color:#1a1a1a;border-color:var(--premium-gold)}
.list{margin:.5rem 0 0 0;padding-left:1.2rem}
.site-footer{background:#0b1218;border-top:1px solid rgba(255,255,255,.06);margin-top:2rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 0;color:#cbd5df}
.mini{font-size:.9rem;color:#9fb0bf}
.form{background:#0f1720;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1rem}
.form label{display:block;margin:.6rem 0 .2rem;color:#dbe7f0}
.form input,.form textarea{width:100%;padding:.7rem;border-radius:8px;border:1px solid #304050;background:#0b141a;color:#eaf2f7}
.form button{margin-top:.8rem}
.alert{padding:.8rem;border-radius:8px;margin:1rem 0}
.alert.ok{background:rgba(0,200,120,.12);border:1px solid rgba(0,200,120,.4);color:#a6f3c7}
.alert.err{background:rgba(200,0,0,.12);border:1px solid rgba(200,0,0,.4);color:#ffb3b3}
.table{width:100%;border-collapse:collapse} .table td{border-top:1px solid rgba(255,255,255,.06);padding:.4rem .2rem;color:#d6dde4}
blockquote{border-left:3px solid var(--premium-gold);padding-left:1rem;color:#d6dde4}
@media (max-width:700px){.nav a{display:none} .nav .btn{display:inline-block}}

/* Services section with background image and overlay */
.section.services{
  position:relative;
  background:transparent;
}
.section.services::before{
  content:"";
  position:absolute; inset:0;
  background-image:url('/assets/img/services.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.section.services::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,20,26,.55), rgba(11,20,26,.88) 60%);
  pointer-events:none;
}
.section.services > .container{ position:relative; z-index:1 }

/* ===== Footer fijo + padding seguro ===== */
:root{
  --footer-h: 72px; /* ajusta según tu footer en desktop */
}

.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: #0b1218; /* ya lo tienes; opaco para legibilidad */
  border-top: 1px solid rgba(255,255,255,.06);
  min-height: var(--footer-h);
  /* soporte safe-area en iOS */
  padding-bottom: max(1.2rem, env(safe-area-inset-bottom));
}

/* Empuja el contenido para que no quede debajo del footer */
body{
  padding-bottom: calc(var(--footer-h) + max(4rem, env(safe-area-inset-bottom)));
}

/* Ajuste de padding lateral en el footer (más cómodo en móvil) */
.site-footer .container{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* En móvil aumenta un poco más */
@media (max-width:700px){
  :root{ --footer-h: 84px; } /* suele crecer porque el texto salta de línea */
  .site-footer .container{
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}