/* === RESET & BASE === */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:#fff;
  color:#222;
  overflow-x:hidden;
  line-height:1.6;
}

/* === TOP BAR === */
.top-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 6%;background:#fff;border-bottom:1px solid #eee;
  position:fixed;width:100%;top:0;z-index:1000;flex-wrap:wrap;
}
.top-bar .contact-info{
  display:flex;align-items:center;gap:10px;font-size:.95rem;color:#004AAD;
}
.top-bar .contact-info i{color:#004AAD;}
.top-bar .contact-info a{color:#004AAD;font-weight:500;}
.top-bar .socials{display:flex;align-items:center;gap:15px;}
.top-bar .socials a{color:#004AAD;font-size:1.1rem;transition:.3s;}
.top-bar .socials a:hover{color:#FFCE00;}

/* === HERO === */
.hero{
  position:relative;height:100vh;
  background-image:url("https://images.pexels.com/photos/4483610/pexels-photo-4483610.jpeg?auto=compress&cs=tinysrgb&w=1600");
  background-position:center;background-size:cover;background-attachment:fixed;
  display:flex;align-items:center;justify-content:center;
}
.hero::after{
  content:"";position:absolute;inset:0;background:rgba(0,20,60,.65);z-index:1;
}
.hero .content{position:relative;text-align:center;color:#fff;z-index:2;}
.hero-logo{
  width:380px; /* ✅ ahora más grande que el del footer */
  margin-bottom:20px;
  filter:brightness(0) invert(1);
  transition:transform .3s ease;
}
.hero-logo:hover{transform:scale(1.03);}
.hero p{font-size:1.1rem;color:#FFCE00;}

/* === INTRO === */
.intro{padding:120px 10% 80px;text-align:center;background:#fff;}
.intro h2{font-family:'Poppins',sans-serif;font-size:2rem;color:#004AAD;margin-bottom:15px;}
.intro p{color:#555;max-width:750px;margin:0 auto;font-size:1rem;line-height:1.7;}

/* === BLOQUES === */
.block{display:flex;align-items:center;min-height:70vh;transition:all .5s ease-in-out;}
.block .text{flex:1;padding:80px 8%;}
.block .image{flex:1;height:100%;background-size:cover;background-position:center;background-attachment:fixed;}
.block.dark{background:#002B59;color:#fff;}
.block.light{background:#fff;color:#222;}
.block.reverse{flex-direction:row-reverse;}
.block.dark .btn{
  background:#FFCE00;color:#002B59;padding:12px 26px;border-radius:6px;
  font-weight:600;display:inline-block;transition:.3s;
}
.block.dark .btn:hover{background:#FFD94D;}
.btn-outline{
  border:2px solid #004AAD;color:#004AAD;padding:12px 26px;border-radius:6px;
  font-weight:600;display:inline-block;transition:.3s;
}
.btn-outline:hover{background:#004AAD;color:#fff;}

/* === CONTACTO === */
.contact{padding:100px 10%;text-align:center;background:#F4F6FA;}
.contact h2{font-family:'Poppins',sans-serif;color:#004AAD;font-size:1.8rem;margin-bottom:30px;}
form{max-width:600px;margin:auto;display:flex;flex-direction:column;gap:15px;}
input,textarea{
  padding:14px;border:1px solid #ccc;border-radius:5px;font-size:1rem;width:100%;
  font-family:'Inter',sans-serif;
}
button{
  background:#004AAD;color:#fff;border:none;padding:14px;border-radius:6px;
  font-size:1rem;font-weight:600;cursor:pointer;transition:.3s;
}
button:hover{background:#00337F;}

/* === FOOTER === */
footer{
  background:#111;color:#fff;text-align:center;padding:80px 10%;
}
.footer-logo{
  width:240px; /* ✅ ahora más pequeño que el hero */
  margin-bottom:25px;
  filter:brightness(0) invert(1);
  transition:transform .3s ease;
}
.footer-logo:hover{transform:scale(1.05);}
.footer-socials{display:flex;justify-content:center;gap:18px;margin-bottom:15px;}
.footer-socials a{color:#FFCE00;font-size:1.3rem;transition:.3s;}
.footer-socials a:hover{color:#fff;}
footer p{margin-top:10px;font-size:.9rem;color:#bbb;}

/* === WHATSAPP === */
.whatsapp-float{
  position:fixed;width:55px;height:55px;bottom:22px;right:22px;
  background:#25D366;color:#fff;border-radius:50%;
  display:flex;justify-content:center;align-items:center;
  font-size:1.8em;box-shadow:0 3px 10px rgba(0,0,0,.25);
  transition:transform .2s;z-index:999;
}
.whatsapp-float:hover{transform:scale(1.07);}

/* === RESPONSIVE === */
@media(max-width:900px){
  .block{flex-direction:column;}
  .block.reverse{flex-direction:column;}
  .block .image{width:100%;height:250px;background-attachment:scroll;}
  .hero-logo{width:240px;}
  .footer-logo{width:200px;}
  .top-bar{flex-direction:column;align-items:flex-start;gap:6px;}
  .top-bar .socials{justify-content:flex-start;}
  .top-bar .contact-info{flex-wrap:wrap;}
}