* {margin: 0;padding: 0;box-sizing: border-box;}

body { font-family: 'Poppins', sans-serif;background-color: #68859c;}

/* HEADER BASE */
#mainHeader {display: flex;justify-content: space-between;align-items: center;padding: 15px 25px;background-color: #0a2342;color: white;position: relative;z-index: 3000;}
#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: #ff3b3f;}

.hamburger {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;}
}

 .contact-section h2{font-size:32px;margin-bottom:30px;color:#152038}
 .contact-simplificado{max-width:1280px;margin:0 auto;background:#fff;padding:30px;margin-bottom:16px;box-shadow:0 4px 12px rgba(0,0,0,.08);border-radius:12px 12px 12px 12px; text-align: center;}
 .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)}
 
 .quienes-somos{padding:80px 20px;background:#f8f9fa;text-align:center;margin-bottom:40px}
 .quienes-somos h2{font-size:2.5rem;color:#2c419c}
 .quienes-somos .descripcion{max-width:800px;margin:0 auto;font-size:1.2rem;line-height:1.6;color:#444}
 
 .footer{background-color:#0a2342;padding:2em;color:#ffffff}
 .footer-content{display:flex;flex-direction:column;align-items:flex-start;gap:1em}
 .footer-redes{display:flex;gap:1em}.icono-red{width:35px;height:35px;transition:transform .3s ease}
 .icono-red:hover{transform:scale(1.2)}.membresias{max-width:1000px;margin:50px auto;text-align:center}
 
 .membresias h2{color:#ffffff;margin-bottom:30px;font-size:2rem}
 .cards-container{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
 .card{background-color:white;border-radius:15px;padding:30px 20px;box-shadow:0 4px 12px rgba(0,0,0,.1);flex:1 1 300px;max-width:400px;transition:transform .3s}
 .card-hover{transform:translateY(-5px)}.card h3{color:#0a2342;margin-bottom:15px}
 .card .precio{font-size:1.5rem;font-weight:bold;color:#ff3b3f;margin-bottom:15px}
 .card p{color:#555;margin-bottom:20px}.icono-red2{width:50px;height:50px;transition:.3s}
 
 .icono-red2:hover{transform:scale(1.1)}
 .full-image{position:relative;width:100%;height:70vh;background:url("Images/JISAFIT/Images/JISAFIT.png") no-repeat center center/cover;display:flex;justify-content:center;align-items:center;color:white;text-align:center;font-size:2.5rem;font-weight:bold}
 
 .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:#ff3b3f}
 .promo-content p{font-size:1.1rem;margin-bottom:25px;line-height:1.6;color:#444}
 .promo-button{background-color:#ff3b3f;color:white;text-decoration:none;padding:12px 30px;border-radius:30px;font-weight:bold;transition:background-color .3s}
 .promo-button:hover{background-color:#0a2342}
 
 .map-section{padding:2em 1em;background-color:#f4f7fb;text-align:center; margin-bottom:40px}
 .map-section h3{font-size:2em;color:#1e3a8a;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}@media (max-width:992px){

.mobile-menu-icon{display:block;color:white}
.promo-container{flex-direction:column;text-align:center}
.promo-content h1{font-size:1.8rem}
.promo-content p{font-size:1rem}
.promo-image img{max-width:400px}
.full-image{font-size:2rem;height:50vh}}

@media (max-width:576px)
{#mainHeader{padding:10px 20px}
#mainHeader .logo{height:40px}
.promo-content h1{font-size:1.5rem}
.promo-content p{font-size:.95rem}
.promo-button{padding:10px 20px;font-size:.9rem}
.full-image{font-size:1.6rem;padding:0 10px}
.map-container{height:300px}
.quienes-somos h2{font-size:1.8rem}
.quienes-somos 
.descripcion{font-size:1rem}}

.animable { opacity: 0;transform: translateY(40px);transition: opacity 0.8s ease-out, transform 0.8s ease-out;will-change: opacity, transform;}
.animable.visible {opacity: 1;transform: translateY(0);}


@media (max-width: 768px) {
  .animable {transform: translateY(20px);transition: opacity 0.5s ease-out, transform 0.5s ease-out;}
}
.promo-image img.animable,
.full-image.animable {transition: opacity 0.9s ease-out, transform 0.9s ease-out; transform: translateY(50px);
}
.promo-image img.animable.visible,
.full-image.animable.visible {transform: translateY(0);}
/* Ajuste para tablets */
@media (max-width: 992px) {.full-image {height: 50vh;background-position: top center; background-size: cover;font-size: 2rem;}}
/* Ajuste para móviles */
@media (max-width: 576px) {.full-image {height: 35vh;background-position: center top;background-size: contain;   /* evita recortes */background-repeat: no-repeat;padding: 0 10px;font-size: 1.6rem;}}