*{margin:0;padding:0;box-sizing:border-box}
 body{font-family:Arial,sans-serif;background-color:#3a455c;color:#fff;line-height:1.6;padding-top:70px}
 
#mainHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background-color: #0a2050;
  color: white;
  z-index: 1000;
}

#mainHeader .logo {height: 50px;}

.desktop-nav ul {display: flex;list-style: none;gap: 25px;}
.desktop-nav ul li a {color: white;text-decoration: none;font-weight: 600;transition: .3s;}
.desktop-nav ul li a:hover {color: #78f1f1;}

.hamburger {margin-left: auto; width: 35px;height: 25px;display: none;flex-direction: column;justify-content: space-between;cursor: pointer;z-index: 3100;}
.hamburger span {height: 4px;width: 100%;background: white;border-radius: 4px;transition: all 0.4s ease;}
.hamburger.active span:nth-child(1) {transform: rotate(45deg) translateY(10px);}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3) {transform: rotate(-45deg) translateY(-10px);}

.mobile-menu {position: fixed;top: 0;right: -100%;width: 70%;height: 100vh;background: #0a2342;display: flex;flex-direction: column;padding-top: 120px;gap: 25px;transition: right 0.4s ease;padding-left: 30px;}
.mobile-menu a {color: white;font-size: 1.2rem;text-decoration: none;font-weight: 600;}
.mobile-menu.show {right: 0;}

@media (max-width: 992px) {
  .desktop-nav {display: none;}
  .hamburger {display: flex;}
}

  .logo-box{background-color:white;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:10px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
  .hero{position:relative;height:90vh;background:url("Images/imagesNuevas/image3.jpg")center/cover no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:white;margin-bottom:20px;overflow:hidden}
  .hero::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1}
  .hero h1,.hero p{position:relative;z-index:2}
  .hero h1{font-size:2.9rem;background:rgba(0,0,0,.6);padding:10px 20px;border-radius:10px}
  .hero p{margin-top:25px;background:rgba(0,0,0,.6);font-size:1.5rem}
 
  #servicios{padding:50px 20px;background:#f5f5f5;text-align:center}
  #servicios h2{color:#191e4b;font-size:2.2rem;font-weight:bold;text-align:center;margin-bottom:30px}
  .grid-servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:30px}
  .card{background:#191e4b;padding:20px;border-radius:10px;transition:transform .3s}
  .card:hover{transform:translateY(-5px)}
  .card i{font-size:40px;color:#1e2369;margin-bottom:15px}
  .nosotros{display:flex;align-items:center;justify-content:space-between;padding:50px 20px;gap:30px;flex-wrap:wrap}
  .nosotros-texto{flex:1;min-width:300px}.nosotros-img{flex:1;display:flex;justify-content:center;align-items:center}
  .nosotros-img img{max-width:90%;height:auto;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
  .nosotros-texto h2{font-size:2.5rem;margin-bottom:20px;color:#e7e7e7}
  
  .nosotros-texto p{font-size:1.6rem;line-height:1.8;color:#e7e7e7}
  .contacto{padding:50px 20px;background:#111;text-align:center}
  .btn-whatsapp{display:inline-block;margin-top:15px;padding:10px 20px;background:#e10600;color:white;text-decoration:none;border-radius:5px;transition:background .3s}
  .btn-whatsapp:hover{background:#b00000}
  
  .promo-section{padding:80px 20px;background-color:#f8f8f8;margin-top:20px}
  .promo-container{display:flex;align-items:center;justify-content:center;max-width:1100px;margin:0 auto;gap:40px;flex-wrap:wrap}
  .promo-image img{width:100%;max-width:500px;border-radius:15px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
  .promo-content{flex:1;min-width:280px}
  .promo-content h1{font-size:2.2rem;margin-bottom:20px;color:#0a2342}
  .promo-content .highlight{color:#162180}
  .promo-content p{font-size:1.1rem;margin-bottom:25px;line-height:1.6;color:#444}
  .promo-button{background-color:#1a33bd;color:white;text-decoration:none;padding:12px 30px;border-radius:30px;font-weight:bold;transition:background-color .3s}
  .promo-button:hover{background-color:#0a2342}
  .promo-content a{display:flex;justify-content:center;margin-top:20px;text-decoration:none}
  .icono-red2{width:45px;height:45px;transition:transform .3s ease}
 
  .icono-red2:hover{transform:scale(1.1)}
  .map-section{padding:2em 1em;background-color:#e9e9e9;text-align:center;margin-bottom:30px}
  .map-section h3{font-size:2em;color:#191e4b;margin-bottom:1.5em}
  .map-container{height:400px;max-width:1200px;margin:0 auto;border-radius:1em;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1)}
  .map-container iframe{width:100%;height:100%;border:0}.contact-section{text-align:center}
  
  .contact-section h2{font-size:32px;margin-bottom:30px;color:#152038}
  .contact-simplificado{max-width:900px;margin:0 auto;background:#fff;padding:30px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
  .contact-info h3{font-size:24px;margin-bottom:15px;color:#152038}
  .contact-info h4{margin-top:25px;font-size:18px;color:#444}
  .contact-info p{font-size:18px;margin:10px 0;color:#333}
  .contact-info a{color:#1d72b8;text-decoration:none}
  .contact-info a:hover{text-decoration:underline}
  .footer-redes{display:flex;justify-content:center;gap:20px;margin-top:20px}
  .icono-red{width:36px;height:36px;transition:transform .3s ease}
  
  .icono-red:hover{transform:scale(1.15)}
  footer{background:#1c2b5c;text-align:center;padding:15px;font-size:.9rem;margin-top:25px}
  
  @media (max-width:768px)
  {
  .hero h1{font-size:2rem;padding:8px 15px}
  .hero p{font-size:1.1rem;margin-top:15px;padding:6px 12px}
  .nosotros{flex-direction:column;text-align:center}
  .nosotros-texto h2{font-size:2rem}
  .nosotros-texto p{font-size:1.2rem}
  .nosotros-img img{max-width:100%}
  .promo-container{flex-direction:column;gap:20px;text-align:center}
  .promo-content h1{font-size:1.8rem}.promo-content p{font-size:1rem}
  .map-container{height:300px}}
  
  @media (max-width:480px)
  {
  .hero{height:70vh}
  .hero h1{font-size:1.6rem}
  .hero p{font-size:1rem}
  #servicios h2{font-size:1.6rem}
  .card{padding:15px}
  .card i{font-size:30px}
  .contact-simplificado{padding:20px}
  .contact-info h3{font-size:20px}
  .contact-info p{font-size:16px}
  .icono-red,.icono-red2{width:40px;height:40px}}