/* ---------- VARIABLES ---------- */
:root{
  --c-primary:#2A2F92;
  --c-secondary:#1A1458;
  --c-accent:#0077C8;
  --c-accent-light:#55ADFF;
  --c-dark:#001633;
  --c-teal:#003B59;
  --c-gray:#C2C5CF;
  --c-white:#FFFFFF;

  --f-title:'Futura','Open Sans',sans-serif;
  --f-body:'Open Sans',Arial,sans-serif;
}

/* ---------- RESET ---------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);line-height:1.6;
  color:var(--c-dark);background:var(--c-white);
  transition:background .3s,color .3s;
}
h1,h2,h3{font-family:var(--f-title);font-weight:600}
ul{list-style:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block;border-radius:.4rem}

/* Dark-mode */
@media (prefers-color-scheme: dark){
  body{background:var(--c-dark);color:var(--c-gray)}
  .card,.modal-content{background:#0b162e;color:var(--c-gray)}
}

/* ---------- HEADER ---------- */
.header{position:sticky;top:0;z-index:100;background:var(--c-white);
        box-shadow:0 1px 4px rgba(0,0,0,.08);}
.navbar{max-width:1140px;margin:auto;padding:.8rem 1.2rem;
        display:flex;align-items:center;justify-content:space-between}
.nav-menu{display:flex;gap:1.2rem}
.nav-menu a{font-weight:600;position:relative}
.nav-menu a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;
                   background:var(--c-accent);transition:.3s}
.nav-menu a:focus-visible,.nav-menu a:hover::after{width:100%}
.nav-toggle{display:none;background:none;border:none;cursor:pointer}
.hamburger,.hamburger::before,.hamburger::after{
  content:'';display:block;width:24px;height:3px;background:var(--c-primary);
  border-radius:2px;transition:.3s}
.hamburger::before{transform:translateY(-8px)}
.hamburger::after{transform:translateY(5px)}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(135deg,var(--c-secondary),var(--c-primary));
      color:var(--c-white);text-align:center;padding:5rem 1rem}
.hero h1{font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.1;margin-bottom:1rem}
.hero p{font-size:1.125rem;margin-bottom:2rem}
.btn-primary,.btn-secondary{
  display:inline-block;padding:.8rem 1.6rem;border-radius:.5rem;font-weight:600;
  cursor:pointer;text-align:center;transition:transform .25s}
.btn-primary{background:var(--c-accent);color:var(--c-white)}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-3px)}
.btn-secondary{background:var(--c-secondary);color:var(--c-white)}

/* ---------- ABOUT ---------- */
.about{max-width:800px;margin:4rem auto;padding:0 1rem;text-align:center}
.about-list li{margin:1rem 0;font-size:1.05rem}

/* ---------- SERVICES ---------- */
.services{padding:4rem 1rem}
.services h2{text-align:center;margin-bottom:2.5rem}
.card-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  background:var(--c-white);padding:2rem;border-radius:1rem;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:280px
}
.card-icon{color:var(--c-accent);margin-bottom:1rem}
.card h3{margin:.6rem 0}
.card p{flex:1}

/* ---------- TESTIMONIOS ---------- */
.testimonials{padding:4rem 1rem;text-align:center}
.slider{position:relative;overflow:hidden;max-width:800px;margin:auto}
.slide{min-width:100%;opacity:0;transition:opacity .6s}
.slide.active{opacity:1}
.slide blockquote{font-style:italic;margin:1.2rem 0}

/* ---------- BLOG ---------- */
.blog{padding:4rem 1rem;background:var(--c-gray, #edf0f6)}
.blog h2{text-align:center;margin-bottom:2.5rem}
.blog-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.blog article{background:var(--c-white);padding:1rem;border-radius:.8rem;
              box-shadow:0 2px 6px rgba(0,0,0,.05)}
.blog time{font-size:.875rem;color:var(--c-teal)}

/* ---------- CONTACT ---------- */
.contact{max-width:600px;margin:4rem auto;padding:0 1rem}
.contact form{display:grid;gap:1.2rem}
.contact input,.contact textarea{
  width:100%;padding:.8rem;border:1px solid var(--c-gray);border-radius:.4rem}
.contact .legal{font-size:.875rem;display:flex;gap:.5rem;align-items:center}
.contact .legal a{text-decoration:underline;color:var(--c-accent)}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;
       align-items:center;justify-content:center}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:var(--c-white);padding:2rem;border-radius:.8rem;
               max-width:500px;width:90%}

/* ---------- FOOTER ---------- */
.footer{background:var(--c-secondary);color:var(--c-white);
        padding:2rem 1rem;text-align:center}
.footer-links{display:flex;gap:1.5rem;justify-content:center;margin-bottom:1rem;
              font-size:.875rem}
.footer-links a{text-decoration:underline}
.social a{margin:0 .5rem;display:inline-flex}
.social svg{fill:currentColor}
.footer p{margin-top:1rem;font-size:.875rem}

/* ---------- RESPONSIVE NAV ---------- */
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-menu{
    position:absolute;top:100%;right:0;background:var(--c-white);
    flex-direction:column;gap:0;width:220px;box-shadow:0 4px 8px rgba(0,0,0,.08);
    max-height:0;overflow:hidden;transition:max-height .35s ease}
  .nav-menu.open{max-height:350px}
}

/* ---------- ANIMACIONES ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}
                  to{opacity:1;transform:none}}
[data-animate]{opacity:0;visibility:hidden}
[data-animate].show{opacity:1;visibility:visible;animation:fadeUp .8s forwards}