@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;800&family=Poppins:wght@400;500;600;700&family=Montserrat:wght@500&display=swap');

:root{
  --navy: #192B6B;
  --blue: #00427B;
  --maroon: #840A0A;
  --maroon-dark: #650707;
  --ink: #3F3F3F;
  --ink-soft: #6b6b6b;
  --bg: #ffffff;
  --bg-alt: #F5F5F5;
  --bg-cards: #EEEEEE;
  --border: #e5e5e5;
  --radius: 10px;
  --max: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  font-size:16px;
}
h1,h2,h3{margin:0 0 .5em; color:var(--ink); line-height:1.25; font-family:'Raleway', sans-serif; font-weight:800}
p{margin:0 0 1em}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--maroon)}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 24px}

.skip-link{position:absolute; left:-999px; top:auto}
.skip-link:focus{left:16px; top:16px; background:#fff; padding:8px 14px; border-radius:6px; z-index:999}

/* ---------- Top bar ---------- */
.top-bar{background:var(--bg-alt); font-size:.9rem; border-bottom:1px solid var(--border)}
.top-bar-inner{display:flex; justify-content:flex-end; align-items:center; height:38px}
.top-bar-item{display:flex; align-items:center; gap:8px; color:var(--ink); font-family:'Montserrat', sans-serif; font-weight:500}
.top-bar-item img{width:16px; height:16px; object-fit:contain}
.top-bar-item a{color:var(--blue); font-weight:700}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; gap:24px; height:80px}
.brand{margin-right:auto}
.main-nav{display:flex; gap:28px}
.main-nav a{color:var(--ink); font-weight:700; font-family:'Raleway', sans-serif; text-transform:uppercase; font-size:.9rem; padding:6px 2px; border-bottom:2px solid transparent}
.main-nav a:hover{color:var(--blue); border-color:var(--blue)}
.header-cta{background:var(--blue); color:#fff; font-family:'Poppins', sans-serif; font-weight:600; font-size:.9rem; padding:13px 22px; border-radius:6px; white-space:nowrap; text-transform:uppercase}
.header-cta:hover{background:var(--navy); color:#fff}
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer}
.menu-toggle span{display:block; height:2px; width:100%; background:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  padding:130px 0;
  background:url('img/hero-banner.png');
  background-position:center right;
  background-repeat:no-repeat;
  background-size:cover;
}
.hero-inner{max-width:520px}
.hero h1{font-size:clamp(2.2rem, 5vw, 3.75rem); color:var(--ink)}
.hero .btn{margin-top:10px}

.btn{display:inline-block; font-family:'Poppins', sans-serif; padding:14px 32px; border-radius:8px; font-weight:600; font-size:1.1rem; border:2px solid transparent; cursor:pointer; transition:all .15s ease}
.btn-primary{background:var(--maroon); color:#fff}
.btn-primary:hover{background:var(--maroon-dark); color:#fff}
.btn.full{width:100%; text-align:center; display:block}

/* ---------- Sections ---------- */
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, var(--bg-cards) 0%, #FEFEFE 100%)}
.section-kicker{color:var(--ink-soft); text-transform:uppercase; letter-spacing:.3em; font-size:.78rem; font-weight:400; margin-bottom:10px}
.section-kicker.center{text-align:center}
h2.center{text-align:center; max-width:640px; margin:0 auto .3em}
.divider{width:56px; height:3px; background:var(--maroon); margin:0 0 22px; border-radius:2px}
.divider.center{margin:0 auto 36px}

.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split-media img{border-radius:var(--radius); box-shadow:0 16px 40px rgba(25,43,107,.15)}
.split-content h2{font-size:2rem}

/* ---------- Tabs ---------- */
.tabs{background:#fff; border-radius:var(--radius); box-shadow:0 10px 30px rgba(25,43,107,.08); max-width:800px; margin:0 auto}
.tabs-nav{display:flex; border-bottom:1px solid var(--border)}
.tab-btn{
  flex:1; background:none; border:none; padding:18px 12px; font:inherit; font-weight:500; font-family:'Poppins', sans-serif;
  color:var(--ink-soft); cursor:pointer; border-bottom:3px solid transparent;
}
.tab-btn.is-active{color:var(--maroon); border-color:var(--maroon)}
.tabs-panels{padding:32px 30px}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.tab-panel p{margin:0; color:var(--ink); text-align:center}

/* ---------- Stats ---------- */
.stats{background:var(--navy); color:#fff; padding:56px 0}
.stats-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; text-align:center}
.stat-number{font-family:'Raleway', sans-serif; font-size:2.8rem; font-weight:800; font-variant-numeric:tabular-nums}
.stat-plus{font-family:'Raleway', sans-serif; font-size:2.8rem; font-weight:800}
.stat-label{display:block; font-size:1rem; color:#dfe3f0; margin-top:6px}

/* ---------- Testimonios ---------- */
.testimonials{display:grid; grid-template-columns:repeat(2, 1fr); gap:32px; margin-top:20px}
.testimonial{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:0 8px 24px rgba(25,43,107,.06); text-align:center}
.testimonial img{width:64px; height:64px; border-radius:50%; margin:0 auto 12px}
.testimonial .stars{width:90px; height:auto; border-radius:0; margin-bottom:14px}
.testimonial p{color:var(--ink); text-align:center}
.testimonial h3{font-family:'Poppins', sans-serif; font-weight:500; font-size:1.05rem; margin-bottom:0}

/* ---------- Blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:12px}
.blog-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 24px rgba(25,43,107,.06); color:var(--ink); display:block}
.blog-card:hover{color:var(--ink)}
.blog-card img{aspect-ratio:16/10; object-fit:cover}
.blog-card-body{padding:22px}
.blog-card h3{font-size:1.15rem; font-weight:700; margin-bottom:.4em}
.blog-card p{color:var(--ink-soft); font-size:.9rem; margin-bottom:0}
.blog-see-all{text-align:center; margin-top:32px}
.blog-see-all a{font-weight:600; color:var(--maroon)}

/* ---------- Contacto ---------- */
.contact-inner{display:grid; grid-template-columns:1fr 1.3fr; gap:0; align-items:stretch; margin-top:12px; border-radius:var(--radius); overflow:hidden; box-shadow:0 16px 40px rgba(25,43,107,.12)}
.contact-card{background:var(--navy); color:#fff; padding:40px 32px}
.contact-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:24px}
.contact-list li{display:flex; flex-direction:column; gap:4px}
.contact-label{font-family:'Poppins', sans-serif; font-style:italic; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:#c3cbe6}
.contact-list a, .contact-list span{color:#fff; font-family:'Poppins', sans-serif; font-weight:500; font-size:1.05rem}
.contact-list a:hover{color:#c3cbe6}
.contact-note{font-family:'Poppins', sans-serif; font-weight:400 !important; font-size:.82rem !important; color:#c3cbe6 !important}

.contact-form{background:#fff; padding:40px 32px; display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:4px}
.contact-form input, .contact-form textarea{
  font:inherit; font-size:1rem; padding:16px; border-radius:var(--radius);
  border:2px solid var(--ink); background:transparent; resize:vertical;
}
.contact-form input{height:60px}
.contact-form textarea{min-height:110px}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--maroon); background:#fff}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:var(--ink-soft)}
.field-error{display:none; color:#dc3232; font-size:.85rem; text-align:center}
.field.is-invalid input{border-color:#dc3232}
.field.is-invalid .field-error{display:block}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.btn-enviar{background:var(--maroon); color:#fff; border-radius:var(--radius); padding:16px 28px; font-family:'Poppins', sans-serif; font-weight:600; font-size:1.15rem; border:none}
.btn-enviar:hover{background:var(--maroon-dark)}
.form-summary{display:none; min-height:0; font-size:.9rem; border-radius:4px; padding:.6em 1em; margin:0}
.form-summary.pending{display:block; border:2px solid #00a0d2; color:#00627a; background:#eaf7fb}
.form-summary.error{display:block; border:2px solid #ffb900; color:#8a6d00; background:#fffbea}
.form-summary.ok{display:block; border:2px solid #46b450; color:#1b7a3d; background:#f2fbf3}

/* ---------- Blog: post individual ---------- */
.post-page{max-width:760px; margin:0 auto; padding:64px 24px}
.post-page .post-hero{width:100%; border-radius:var(--radius); margin-bottom:28px}
.post-page h1{font-size:2.2rem; margin-bottom:.3em}
.post-page .post-lead{font-size:1.1rem; color:var(--ink-soft)}
.post-page article p{font-size:1rem}
.post-nav{display:flex; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--border)}

/* ---------- Blog: listado ---------- */
.blog-index{max-width:var(--max); margin:0 auto; padding:64px 24px}
.blog-index h1{text-align:center; margin-bottom:.3em}
.blog-index .divider.center{margin-bottom:48px}

/* ---------- Footer ---------- */
.site-footer{background:#fff; color:var(--ink-soft); padding:40px 0; text-align:center; border-top:2px solid var(--navy)}
.footer-brand{margin-bottom:16px; display:flex; justify-content:center}
.footer-copy{font-size:.85rem; margin:0}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .split{grid-template-columns:1fr}
  .split-media{order:-1}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .testimonials{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr}
}

@media (max-width: 760px){
  .main-nav{
    position:fixed; top:118px; left:0; right:0; background:#fff; border-bottom:1px solid var(--border);
    flex-direction:column; padding:16px 24px; gap:4px; transform:translateY(-140%); transition:transform .2s ease;
  }
  .main-nav.open{transform:translateY(0)}
  .main-nav a{padding:12px 0; border-bottom:1px solid var(--border)}
  .header-cta{display:none}
  .menu-toggle{display:flex}
  .section{padding:56px 0}
  .hero{padding:70px 0; background-position:center}
  .stats-grid{grid-template-columns:1fr; row-gap:32px}
}