/* Paleta de azules basada en el logo provisional */
:root{
  --blue-900: #0b365a;
  --blue-700: #145a8a;
  --blue-500: #2b8bd1;
  --accent: #0d9bd6;
  --muted: #6b7280;
  --bg: #f7fafc;
  --surface: #ffffff;
}

*{box-sizing:border-box}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;left:auto;top:auto;padding:0.5rem 1rem;background:var(--blue-700);color:white;border-radius:6px;z-index:9999}
html,body{height:100%}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.5;color:var(--blue-900);background:var(--bg);margin:0}
.container{max-width:1100px;margin:0 auto;padding:1rem}

.site-header{background:linear-gradient(90deg,var(--surface),#f0f6fb);border-bottom:1px solid rgba(11,54,90,0.06)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0;position:relative}
.brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;color:inherit}
.logo{height:44px}
.main-nav{display:flex;gap:1rem}
.main-nav a{color:var(--blue-900);text-decoration:none;padding:0.5rem 0.75rem;border-radius:8px;transition:background 180ms, transform 120ms}
.main-nav a:hover{background:rgba(11,54,90,0.06);transform:translateY(-2px)}
.main-nav a:focus{outline:3px solid rgba(43,139,209,0.18);outline-offset:3px}
.nav-toggle{display:none;background:none;border:0;font-size:1.2rem}

.hero{padding:3rem 0;background:linear-gradient(180deg,rgba(11,54,90,0.03),transparent)}
.hero-inner{display:flex;gap:2rem;align-items:stretch}
.hero-text{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-text h1{font-size:2.2rem;margin:0 0 0.6rem;color:var(--blue-900);line-height:1.05}
.hero-text p{margin:0 0 1rem;color:var(--muted);max-width:56ch}
.hero-cta{display:flex;gap:0.6rem}
.hero-visual img{max-width:380px;width:100%}

/* homepage redesign */
.hero-large{position:relative;padding:0;margin-bottom:0}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{width:100%;height:420px;object-fit:cover;filter:contrast(0.95) brightness(0.55)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,54,90,0.45), rgba(11,54,90,0.15))}
.hero-wrap{position:relative;display:flex;align-items:center;gap:2rem;padding:4rem 1rem}
.hero-copy{flex:1;color:white;max-width:60%}
.hero-copy .lead{color:rgba(255,255,255,0.9);margin-bottom:1rem}
.hero-image img{width:320px;border-radius:12px;box-shadow:0 10px 30px rgba(11,54,90,0.18)}
.hero-curve{display:block;width:100%;height:80px;margin-top:-2px}

.proposal{padding:3rem 0}
.proposal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:1rem}
.pv{background:var(--surface);padding:1.2rem;border-radius:10px;box-shadow:0 8px 28px rgba(11,54,90,0.04)}

.services{padding:2.5rem 0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.service-card{background:var(--surface);padding:1.2rem;border-radius:10px;text-align:center;box-shadow:0 6px 18px rgba(11,54,90,0.04)}
.service-card img{width:70px;height:70px;object-fit:contain;margin-bottom:0.6rem}

.certs{background:#f4f7fb;padding:2rem 0}
.certs-row{display:flex;gap:2rem;align-items:center;justify-content:center}
.certs-row img{height:56px;opacity:0.9}

.contact-cta{padding:3rem 0}
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:start}

@media (max-width:880px){
  .hero-bg img{height:320px}
  .hero-wrap{flex-direction:column;padding:2.5rem 1rem}
  .hero-copy{max-width:100%}
  .hero-image img{width:220px}
  .contact-grid{grid-template-columns:1fr}
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.card{background:var(--surface);padding:1rem;border-radius:8px;box-shadow:0 6px 18px rgba(11,54,90,0.04)}
.card h3{margin:0 0 0.5rem;color:var(--blue-700)}

.services-list{list-style:none;padding:0;margin:0}
.services-list li{padding:0.4rem 0;border-bottom:1px solid rgba(11,54,90,0.04)}
/* .muted defined below as utility */

.cta{background:linear-gradient(90deg,var(--blue-700),var(--blue-500));color:white;padding:2rem;margin:2rem 0;border-radius:10px;text-align:center}
.cta a{color:white;text-decoration:none}

.btn{display:inline-block;padding:0.6rem 1rem;border-radius:8px;text-decoration:none;border:0;cursor:pointer;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--blue-700),var(--blue-500));color:white;box-shadow:0 8px 22px rgba(43,139,209,0.12);transition:transform 160ms, box-shadow 160ms}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(43,139,209,0.18)}
.btn.ghost{background:transparent;border:1px solid rgba(11,54,90,0.08);color:var(--blue-900)}
.btn.outline{background:transparent;border:1px solid white;color:white}
.btn:focus{outline:3px solid rgba(11,54,90,0.12);outline-offset:3px}

.site-footer{background:var(--surface);border-top:1px solid rgba(11,54,90,0.06);padding:2rem 0;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr 160px 1fr;gap:1rem}
.footer-grid h5{margin:0 0 0.5rem}
.small{text-align:center;color:var(--muted);margin-top:1rem}

/* Banner Sarlaft */
.sarlaft-banner{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(90deg,var(--blue-900),var(--blue-700));color:white;box-shadow:0 -6px 24px rgba(11,54,90,0.18);padding:0.6rem 0}
.sarlaft-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sarlaft-inner a{color:white;text-decoration:underline}
.banner-actions{display:flex;gap:0.6rem}

/* Banner buttons - ensure visibility on dark gradient */
.sarlaft-banner .btn{color:#fff;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:0.45rem 0.8rem;border-radius:8px;font-weight:600}
.sarlaft-banner .btn.ghost,
.sarlaft-banner .btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.18);color:#fff}
.sarlaft-banner .btn.outline{background:transparent}
.sarlaft-banner .btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,0.18)}
.sarlaft-banner .btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,0.12)}
.sarlaft-banner #banner-close{background:rgba(255,255,255,0.08)}

/* Form */
.contact-form{background:var(--surface);padding:1rem;border-radius:8px;box-shadow:0 6px 18px rgba(11,54,90,0.04)}
.contact-form label{display:block;margin-top:0.6rem;color:var(--muted)}
.contact-form input, .contact-form textarea{width:100%;padding:0.6rem;border-radius:6px;border:1px solid rgba(11,54,90,0.08);margin-top:0.25rem}
.form-actions{display:flex;gap:0.6rem;margin-top:0.8rem}
.form-status{margin-top:0.6rem;color:var(--blue-700)}

/* Responsive */
@media (max-width:880px){
  .hero-inner{flex-direction:column}
  .main-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--surface);padding:1rem;flex-direction:column;gap:0}
  .nav-toggle{display:block}
  .footer-grid{grid-template-columns:1fr;}
  .sarlaft-inner{flex-direction:column;align-items:flex-start}
}

/* small, helpful utilities */
.muted{color:var(--muted)}