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

:root{
  --maroon: #730810;
  --maroon-dark: #560509;
  --ink: #3F3F3F;
  --ink-soft: #6b6b6b;
  --bg: #ffffff;
  --bg-alt: #F0F0F0;
  --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}
p{margin:0 0 1em}
a{color:var(--maroon); text-decoration:none}
a:hover{color:var(--maroon-dark)}
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(--maroon)}
.top-bar-inner{display:flex; align-items:center; justify-content:space-between; height:88px}
.top-bar-email{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Montserrat', sans-serif; font-weight:600; font-size:1.05rem}
.top-bar-email:hover{color:#f2d9db}
.top-bar-email img{width:24px; height:24px; object-fit:contain; filter:brightness(0) invert(1)}

/* ---------- Header (nav) ---------- */
.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border)}
.header-inner{display:flex; justify-content:center; align-items:center; height:60px; position:relative}
.main-nav{display:flex; gap:32px}
.main-nav a{color:var(--ink); font-weight:600; 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(--maroon); border-color:var(--maroon)}
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; position:absolute; right:24px}
.menu-toggle span{display:block; height:2px; width:100%; background:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  padding:110px 0;
  background:linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.75)), url('img/hero-banner.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.hero-inner{display:flex; justify-content:center}
.hero-actions{display:flex; gap:32px; flex-wrap:wrap; justify-content:center}

.btn{display:inline-block; font-family:'Roboto', sans-serif; padding:14px 30px; font-weight:500; font-size:1.2rem; border:2px solid transparent; cursor:pointer; transition:all .15s ease}
.btn-primary{background:var(--maroon); color:#fff; box-shadow:8px 8px 0 0 #fff}
.btn-primary:hover{background:var(--maroon-dark); color:#fff}
.btn-outline{background:#F7F7F7; color:var(--maroon); box-shadow:8px 8px 0 0 var(--maroon); margin-top:8px}
.btn-outline:hover{background:#eee; color:var(--maroon-dark)}
.btn.full{width:100%; text-align:center; display:block}

/* ---------- Sections ---------- */
.section{padding:80px 0}
h2.center{text-align:center; max-width:640px; margin:0 auto .3em; font-family:'Montserrat', sans-serif; font-weight:700; color:#3F3F3F; font-size:2.2rem}
.split-content h2{font-family:'Montserrat', sans-serif; font-weight:700; font-size:2.2rem}
.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(115,8,16,.15)}

/* ---------- Stats ---------- */
.stats{
  background:linear-gradient(120deg, rgba(115,8,16,.92), rgba(63,63,63,.88)), url('img/hero-banner.png');
  background-position:center;
  background-size:cover;
  padding:64px 0;
}
.stats-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; text-align:center}
.stat-number{font-family:'Raleway', sans-serif; font-size:3.2rem; font-weight:700; color:#fff; font-variant-numeric:tabular-nums}
.stat-plus{font-family:'Raleway', sans-serif; font-size:3.2rem; font-weight:700; color:#fff}
.stat-label{display:block; font-family:'Raleway', sans-serif; font-weight:500; font-size:1.1rem; color:#f0dbdc; margin-top:6px}

/* ---------- Testimonios ---------- */
.testimonials{display:grid; grid-template-columns:repeat(2, 1fr); gap:32px; margin-top:20px}
.testimonial{background:var(--bg-alt); border-radius:var(--radius); padding:32px; text-align:center}
.testimonial img{width:58px; height:58px; border-radius:50%; margin:0 auto 14px}
.testimonial p{color:var(--ink); text-align:center; font-size:.94rem}
.testimonial h3{font-family:'Poppins', sans-serif; font-weight:500; font-size:1.2rem; color:#494949; margin-bottom:0}

/* ---------- Contacto ---------- */
.contact-section{
  background:linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)), url('img/back-footer.png');
  background-position:center;
  background-size:cover;
}
.contact-inner{display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:start; margin-top:12px}
.contact-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px}
.contact-list li{display:flex; align-items:center; gap:16px; background:var(--maroon); border-radius:var(--radius); padding:20px 24px}
.contact-icon{width:30px; height:30px; fill:#fff; flex-shrink:0}
.contact-label{display:none}
.contact-list a, .contact-list span{color:#fff; font-family:'Raleway', sans-serif; font-weight:600; font-size:1.15rem}
.contact-list a:hover{color:#f2d9db}
.contact-note{font-family:'Poppins', sans-serif; font-weight:400 !important; font-size:.8rem !important; display:block; margin-top:2px}

.contact-form{background:#fff; border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; gap:16px; box-shadow:0 16px 40px rgba(115,8,16,.1)}
.field{display:flex; flex-direction:column; gap:4px}
.contact-form input, .contact-form textarea{
  font:inherit; font-size:1rem; padding:16px; border-radius:4px;
  border:2px solid var(--ink); background:transparent; resize:vertical;
}
.contact-form input{height:56px}
.contact-form textarea{min-height:100px}
.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; padding:16px 28px; font-family:'Poppins', sans-serif; font-weight:600; font-size:1.15rem; border:none; box-shadow:5px 7px 0 0 #fff; outline:1px solid rgba(0,0,0,.05)}
.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}

/* ---------- Gracias (contenido heredado de una plantilla vieja, sin editar --
   se deja igual a pedido, se va a revisar aparte más adelante) ---------- */
.gracias-hero{text-align:center; padding-top:100px}
.gracias-hero h1{font-family:'Raleway', sans-serif; font-weight:700; font-size:2.4rem}
.gracias-hero .btn{margin-top:20px}
.stat-icon{width:52px; height:52px; object-fit:contain; margin:0 auto 12px}

/* ---------- Footer ---------- */
.site-footer{background:#fff; color:var(--ink-soft); padding:36px 0; text-align:center; border-top:2px solid var(--maroon)}
.footer-brand{margin-bottom:14px; 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(2,1fr); row-gap:32px}
  .testimonials{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr}
}

@media (max-width: 760px){
  .top-bar-inner{flex-direction:column; height:auto; padding:14px 0; gap:10px}
  .main-nav{
    position:fixed; top:98px; 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; z-index:40;
  }
  .main-nav.open{transform:translateY(0)}
  .main-nav a{padding:12px 0; border-bottom:1px solid var(--border)}
  .menu-toggle{display:flex}
  .header-inner{justify-content:flex-start; padding-left:24px}
  .section{padding:56px 0}
  .hero{padding:70px 0}
  .hero-actions{flex-direction:column; align-items:center}
}