/* Configuración básica */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Contenedor de la barra superior */
.top-bar {
    width: 100%;
    /* Degradado de azul a blanco */
    background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 40%, #ffffff 100%);
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.container-top {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Parte izquierda: Fecha */
.top-left {
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Parte derecha: YouTube */
.top-right {
    color: #333; /* Texto oscuro porque el fondo aquí ya es blanco */
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-right i {
    color: #ff0000; /* El rojo clásico de YouTube */
    font-size: 18px;
}

/* Efecto del botón Suscribite */
.btn-subscribe {
    text-decoration: none;
    color: #1e3a8a;
    font-weight: bold;
    margin-left: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease; /* Para que el efecto sea suave */
    display: inline-block;
}

.btn-subscribe:hover {
    background-color: #ff0000;
    color: white;
    transform: scale(1.1); /* Se agranda un poquito */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- HEADER --- */
.main-header {
    background-color: #ffffff;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky; /* Se queda pegado arriba al hacer scroll */
    top: 0;
    z-index: 1000;
}

.container-header {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Logo */
.logo img {
    height: 120px; /* Ajusta según el tamaño del LOGO */
    width: auto;
    display: block;
    transition: all 0.3s ease; /* Un efectito suave */
}

/* Menú */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #3b82f6; /* El azul del degradado */
}

/* Acciones (Iconos y Botón) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Estilo para los botones de icono (Luna y Lupa) */
#dark-mode-toggle, .search-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #555;
    cursor: pointer;
    transition: transform 0.2s;
}

#dark-mode-toggle:hover, .search-btn:hover {
    color: #3b82f6;
    transform: translateY(-2px);
}

/* Botón Campanita */
.btn-cta-bell {
    background-color: #1e3a8a; /* Azul Profe */
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-cta-bell:hover {
    background-color: #ff0000; /* Rojo YouTube al pasar el mouse */
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.btn-cta-bell i {
    animation: ring 2s infinite; /* Efecto de movimiento en la campana */
}

@keyframes ring {
    0% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

/* --- CLASES PARA MODO OSCURO (Preparación) --- */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-mode .main-header {
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}

body.dark-mode .nav-menu a { color: #fff; }
body.dark-mode #dark-mode-toggle, body.dark-mode .search-btn { color: #bbb; }

/* --- TICKER DE HISTORIAS --- */
.ticker-section {
    width: 100%;
    background-color: #f9f9f9; /* Fondo muy suave fuera del botón */
    padding: 20px 0;
}

.container-ticker {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* Parte Izquierda: Botón 3/4 */
.ticker-label-left {
    background-color: #1e3a8a; /* Azul Profe */
    color: white;
    padding: 10px 25px;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 30px 0 0 30px; /* Redondeado solo a la izquierda */
    flex-shrink: 0; /* Que no se achique en móviles */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    z-index: 2;
}

/* Parte Derecha: Botón 1/4 */
.ticker-label-right {
    background-color: #1e3a8a;
    color: white;
    padding: 10px 15px;
    border-radius: 0 30px 30px 0; /* Redondeado solo a la derecha */
    flex-shrink: 0;
    z-index: 2;
}

/* Contenedor del movimiento */
.ticker-content {
    background-color: #ffffff;
    height: 40px; /* Misma altura que los botones */
    flex-grow: 1; /* Ocupa todo el espacio restante */
    display: flex;
    align-items: center;
    overflow: hidden; /* Esconde lo que sale del carril */
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

/* La cinta que se desplaza */
.ticker-track {
    display: flex;
    gap: 50px;
    padding-left: 20px;
    animation: scroll-ticker 25s linear infinite; /* Animación constante */
}

.ticker-track:hover {
    animation-play-state: paused; /* Se detiene al pasar el mouse */
}

.ticker-track a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s;
}

.ticker-track a:hover {
    color: #3b82f6;
}

/* Animación del movimiento */
@keyframes scroll-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- MODO OSCURO PARA TICKER --- */
body.dark-mode .ticker-section { background-color: #121212; }
body.dark-mode .ticker-content { background-color: #222; border-color: #444; }
body.dark-mode .ticker-track a { color: #ccc; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .ticker-label-left span {
        display: none; /* En móviles ocultamos el texto largo */
    }
    .ticker-label-left::before {
        content: "Top"; /* Ponemos un texto corto */
    }
    .ticker-track {
        animation-duration: 15s; /* Un poco más rápido en pantallas chicas */
    }
}



/* --- HERO SLIDER --- */

/* --- BARRA DE TÍTULO H1 --- */
.site-title-bar {
    background-color: #f8f9fa; /* Un gris casi blanco, muy sutil */
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid #e2e8f0; /* Una línea finita para separar del slider */
}

.site-title-bar h1 {
    color: #1e3a8a; /* Azul oscuro corporativo */
    font-size: 2rem; /* Grande pero no gigante */
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajuste para celulares (para que no ocupe media pantalla) */
@media (max-width: 768px) {
    .site-title-bar h1 {
        font-size: 1.4rem;
        padding: 0 15px;
        line-height: 1.3;
    }
    .site-title-bar {
        padding: 15px 0;
    }
}
/* --- FIN BARRA DE TÍTULO H1 --- */

.hero-slider {
    padding: 40px 0;
    background-color: #fff;
}

.container-hero {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.slider-card {
    display: flex;
    align-items: center; /* Alineación vertical perfecta */
    gap: 40px;
    padding: 20px;
}

/* Imagen 1:1 con presencia */
.slider-img {
    flex: 0 0 450px; /* Tamaño fijo en PC */
    aspect-ratio: 1 / 1; /* Fuerza el formato cuadrado */
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.slider-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la imagen se estire */
    transition: transform 0.5s ease;
}

.slider-img:hover img {
    transform: scale(1.05);
}

/* Información del Slide */
.slider-info {
    flex: 1;
}

.category-tag {
    background-color: #3b82f6;
    color: white;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}


/* --- ESTILO PARA LOS TÍTULOS DEL SLIDER (H2) --- */
.hero-slider h2 {
    color: #1e3a8a; /* El azul corporativo que veníamos usando */
    font-size: 2.0rem; /* Título con mucha presencia */
    font-weight: 600;  /* Para que se vea bien negrita */
    margin-bottom: 15px;
    margin: 20px 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Un toque de relieve sutil */
    line-height: 1.1;
}

/* Ajuste para que en celulares no quede gigante */
@media (max-width: 768px) {
    .hero-slider h2 {
        font-size: 1.8rem;
    }
}


.slider-info p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Botón Seguir Leyendo */
.btn-read-more {
    text-decoration: none;
    color: #1e3a8a;
    font-weight: bold;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 5px;
    transition: all 0.3s;
}

.btn-read-more:hover {
    gap: 20px; /* Efecto de la flecha moviéndose */
    color: #3b82f6;
}

/* --- RESPONSIVE SLIDER --- */
@media (max-width: 992px) {
    .slider-card {
        flex-direction: column; /* Se apila en tablets y celulares */
        text-align: center;
    }
    .slider-img {
        flex: 0 0 100%;
        max-width: 400px; /* No tan gigante en móvil */
    }
    .slider-info h1 {
        font-size: 2rem;
    }
}

/* Modo Oscuro */
body.dark-mode .slider-info h1 { color: #fff; }
body.dark-mode .slider-info p { color: #bbb; }
body.dark-mode .hero-slider { background-color: #121212; }

/* --- SECCIÓN SOBRE MÍ & PROMO --- */
.about-promo {
    padding: 60px 0;
    background-color: #f0f4f8; /* Un azul muy lavadito para separar secciones */
}

.container-about {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    padding: 0 20px;
}

/* Caja Perfil */
.about-box {
    flex: 2;
    background: white;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.profile-img img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #3b82f6;
}

.profile-text h2 {
    color: #1e3a8a;
    margin-bottom: 10px;
}

.profile-text p {
    color: #555;
    line-height: 1.6;
    font-size: 15px;
}

.social-mini {
    margin-top: 15px;
    display: flex;
    gap: 15px;
}

.social-mini a {
    color: #1e3a8a;
    font-size: 20px;
    transition: color 0.3s;
}

.social-mini a:hover { color: #3b82f6; }

/* Caja Promo (El gancho comercial) */
.promo-box {
    flex: 1;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: white;
    padding: 30px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.promo-content i {
    font-size: 40px;
    opacity: 0.2;
    position: absolute;
    top: 20px;
    right: 20px;
}

.promo-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.promo-list {
    list-style: none;
    margin: 20px 0;
}

.promo-list li {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-promo {
    display: block;
    text-align: center;
    background: white;
    color: #1e3a8a;
    text-decoration: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    transition: transform 0.3s;
}

.btn-promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* MODO OSCURO */
body.dark-mode .about-promo { background-color: #1a1a1a; }
body.dark-mode .about-box { background-color: #252525; }
body.dark-mode .profile-text p { color: #ccc; }

/* RESPONSIVE */
@media (max-width: 992px) {
    .container-about { flex-direction: column; }
    .about-box { flex-direction: column; text-align: center; }
}

/* --- GRILLA DE NOTICIAS --- */
.news-section { padding: 60px 0; background: #fff; }
.section-title { text-align: center; color: #1e3a8a; margin-bottom: 40px; font-size: 2rem; }

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.news-card:hover { transform: translateY(-10px); }

.card-img { width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }

.card-content { padding: 20px; }
.card-tag { font-size: 10px; background: #3b82f6; color: #fff; padding: 3px 8px; border-radius: 3px; font-weight: bold; }
.card-content h3 { margin: 15px 0 10px; color: #1e3a8a; font-size: 18px; }
.card-content p { font-size: 14px; color: #666; margin-bottom: 15px; }
.read-link { text-decoration: none; color: #3b82f6; font-weight: bold; font-size: 13px; }

/* --- CONTACTO Y TESTIMONIOS --- */
.contact-feedback { padding: 60px 0; background: #f9f9f9; }
.container-flex { display: flex; gap: 50px; align-items: flex-start; }

.map-box, .testimonials-box { flex: 1; }
.map-box h3, .testimonials-box h3 { color: #1e3a8a; margin-bottom: 20px; }
.map-container { border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

.testimonial { background: #fff; padding: 20px; border-radius: 10px; margin-bottom: 15px; border-left: 4px solid #3b82f6; }
.stars { color: #f1c40f; margin-bottom: 5px; }
.testimonial p { font-style: italic; font-size: 14px; color: #444; }
.testimonial span { display: block; margin-top: 10px; font-weight: bold; font-size: 12px; color: #1e3a8a; }

.btn-google { display: inline-block; margin-top: 10px; color: #3b82f6; text-decoration: none; font-weight: bold; font-size: 14px; }

/* --- CONFIGURACIÓN DE TAMAÑO PRO (Sentencia para regular) --- */
:root {
    --footer-icon-size: 350%; /* <--- CAMBIÁ ESTE % PARA AGRANDAR TODO EL FOOTER */
}

/* --- FOOTER PRO --- */
.footer-pro {
    background: linear-gradient(135deg, #1e3a8a 0%, #162a61 100%); /* Degradado profundo */
    color: #fff;
    padding: 70px 0 30px;
    border-top: 4px solid #3b82f6;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 50px;
    align-items: center; /* Centrado vertical absoluto */
}

/* Columna 1 */
.footer-logo img {
    width: 100px;
    margin-bottom: 20px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

/* Columna 2: Contacto con Iconos Box */
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #cbd5e1;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.icon-box {

    background: transparent;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.contact-item:hover .icon-box {
    transform: scale(1.2) rotate(10deg);
    background: transparent;
    color: white;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.contact-item:hover span { color: #fff; }




/* --- AJUSTE COLUMNA CENTRAL --- */
.footer-contact {
    text-align: center;
}

.contact-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: left; /* Esto es lo que lo trae al medio */
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #cbd5e1;
    margin-bottom: 20px;
    justify-content: left; /* Refuerza el centrado */
}


/* --- TÍTULOS CON MÁS AIRE --- */

.footer-contact h4, 
.footer-social h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--footer-spacing); /* Aplica el aire regulable */
    --footer-spacing: 25px;    /* <--- SUBÍ ESTO PARA DAR MÁS AIRE ENTRE TÍTULO E ICONOS */
}


/* Columna 3: Redes Sociales */
.footer-social { text-align: right; }
.social-icons {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.social-btn {
    width: calc(50px * (var(--footer-icon-size) / 100));
    height: calc(50px * (var(--footer-icon-size) / 100));
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: var(--footer-icon-size);
    text-decoration: none;
    backdrop-filter: blur(5px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hovers con Colores Reales y Brillo */
.social-btn:hover {
    transform: translateY(-10px) scale(1.1);
    border: none;
}

.contact-item:hover .icon-box.whatsapp { color: #25d366; } /* Color original WA */
.contact-item:hover .icon-box.email { color: #ea4335; }    /* Color original Gmail */

.social-btn.youtube:hover { 
    background: #ff0000; 
    box-shadow: 0 10px 25px rgba(255, 0, 0, 0.5); 
}
.social-btn.instagram:hover { 
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    box-shadow: 0 10px 25px rgba(220, 39, 67, 0.5); 
}
.social-btn.facebook:hover { 
    background: #1877f2; 
    box-shadow: 0 10px 25px rgba(24, 119, 242, 0.5); 
}

/* Botón final STOREpro */
.footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.store-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.store-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #fff;
    text-shadow: 0 0 10px #3b82f6;
}

/* Responsive */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .social-icons { justify-content: center; }
    .footer-social { text-align: center; }
    .contact-item { justify-content: center; }
}

/* Responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-social, .social-icons {
        text-align: center;
        justify-content: center; /* En celular vuelven al medio */
    }
}


/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .container-flex { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .social-icons { justify-content: center; }
}
@media (max-width: 600px) {
    .news-grid { grid-template-columns: 1fr; }
}

/* EL MOLDE QUE CENTRA TODO EL SITIO */
.container {
    max-width: 1200px; /* El mismo ancho que usamos en el Header y el Hero */
    margin: 0 auto;    /* Centra el bloque horizontalmente */
    padding: 0 20px;   /* Deja un aire a los costados en celulares */
    width: 100%;
}

/* --- AGREGADO: MODO OSCURO PARA SECCIONES NUEVAS --- */

/* 1. Grilla de Noticias en Oscuro */
body.dark-mode .news-section {
    background-color: #121212; /* Fondo negro */
}
body.dark-mode .section-title {
    color: #ffffff; /* Título blanco */
}
body.dark-mode .news-card {
    background-color: #1e1e1e; /* Tarjeta gris oscuro */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Sombra más fuerte */
}
body.dark-mode .card-content h3 {
    color: #3b82f6; /* Título de la entrada en celeste */
}
body.dark-mode .card-content p {
    color: #cccccc; /* Texto descriptivo gris claro */
}

/* 2. Contacto y Mapa en Oscuro */
body.dark-mode .contact-feedback {
    background-color: #0a0a0a; /* Fondo casi negro */
}
body.dark-mode .map-box h3, 
body.dark-mode .testimonials-box h3 {
    color: #ffffff;
}

/* 3. Testimonios en Oscuro */
body.dark-mode .testimonial {
    background-color: #1e1e1e; /* Fondo gris oscuro */
    border-left-color: #3b82f6;
}
body.dark-mode .testimonial p {
    color: #ddd;
}
body.dark-mode .testimonial span {
    color: #3b82f6;
}

/* El Footer NO lo tocamos acá para que siga siendo Azul en ambos modos */

/* --- FIX DEFINITIVO PARA SACAR EL FONDO CUADRADO --- */

/* 1. Hacemos transparente la caja del icono en estado normal */
.icon-box {
    background-color: transparent !important; /* Fuerza transparencia */
    background: none !important; /* Asegura que no queden rastros */
    border: none !important; /* Elimina cualquier borde */
    box-shadow: none !important; /* Elimina sombras */
    border-radius: 0 !important; /* Elimina las esquinas redondeadas */
    width: auto !important; /* Deja que el icono defina su ancho */
    height: auto !important; /* Deja que el icono defina su alto */
    padding-right: 10px; /* Un poquito de aire extra antes del texto */
}

/* 2. Aseguramos que el icono tenga el tamaño y color base correctos */
.icon-box i {
    font-size: var(--footer-icon-size); /* Usa la variable de tamaño que definimos arriba */
    color: #cbd5e1; /* Color gris clarito inicial */
    transition: color 0.3s ease;
}

/* 3. Ajustamos el HOVER (Cuando pasas el mouse) */
/* IMPORTANTE: Esto evita que el cuadrado vuelva a aparecer al pasar el mouse */
.contact-item:hover .icon-box {
    background: transparent !important; 
    transform: none !important; /* Evita que se mueva o salte */
    box-shadow: none !important;
    color: white; /* El icono se pone blanco */
}

/* Opcional: Si querés que tomen sus colores originales al pasar el mouse, usá esto: */
.contact-item:hover .icon-box.whatsapp i { color: #25d366; }
.contact-item:hover .icon-box.email i { color: #ea4335; }


/* ===================================================
   CONTROL TOTAL: COLUMNA REDES SOCIALES (DERECHA)
   =================================================== */

/* 1. La columna entera: Forzamos el centrado base */
.footer-social {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centra todo horizontalmente */
    text-align: center !important;
    position: relative;
    top: 0px;   /* <--- Mover toda la columna arriba/abajo */
    left: 0px;  /* <--- Mover toda la columna izq/der */
}

/* 2. El Título (H2) */
.footer-social h2 {
    position: relative;
    display: inline-block;
    margin: 0 !important; 
    padding: 0 !important;

    /* CONTROLES DE MOVIMIENTO QUIRÚRGICO: */
    top: -40px;  /* Ajustalo para subir o bajar solo el título */
    left: 0px;  /* Ajustalo para centrarlo visualmente si lo ves desalineado */
    
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 20px !important; /* Espacio fijo con los iconos */
}

/* 3. El contenedor de los Iconos */
.social-icons {
    display: flex !important;
    justify-content: center !important; /* IMPORTANTE: Esto anula el flex-end anterior */
    gap: 25px;
    position: relative; /* CORREGIDO: Antes decía 'right' */
    
    /* CONTROLES DE MOVIMIENTO QUIRÚRGICO: */
    top: 10px;   /* Subí o bajá los iconos respecto al título */
    left: 0px;  /* Movelos lateralmente para que "calcen" con el texto */
}

/* 4. Los botones de las redes (el círculo) */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px !important; 
    height: 50px !important;
    margin: 0 !important; /* Evita que márgenes viejos los empujen */
}

/* --- RESPONSIVE MOBILE (Máximo 768px) --- */
@media (max-width: 768px) {
    /* Mostramos el botón hamburguesa */
    .menu-toggle {
        display: block !important;
        background: none;
        border: none;
        color: #1e3a8a; /* Tu azul */
        font-size: 1.8rem;
        cursor: pointer;
    }

    /* Escondemos el menú original y lo preparamos para ser desplegable */
    .nav-menu {
        display: none; /* Se oculta por defecto */
        position: absolute;
        top: 70px; /* Ajustá según el alto de tu header */
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* Clase que activaremos con JS para mostrar el menú */
    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        margin: 15px 0;
    }
}

/* En PC el botón siempre está oculto */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}

/* ===================================================
   RESPONSIVE: MENÚ PARA CELULARES
   =================================================== */

@media (max-width: 992px) { /* Bajamos a 992px para cubrir tablets y el A70 */
    
    /* 1. Mostramos la hamburguesa */
    .menu-toggle {
        display: block !important;
        background: #1e3a8a; /* Color azul para que se vea bien */
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 1.5rem;
        cursor: pointer;
        order: 2; /* Lo posiciona bien en el flex */
    }

    /* 2. El menú deja de ser horizontal y se oculta */
    .nav-menu {
        display: none; /* ESTO evita que se vea largo */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Aparece justo debajo del header */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 999;
    }

    /* 3. Cuando tocamos el botón, esta clase lo muestra */
    .nav-menu.active {
        display: flex !important;
    }

    .nav-menu li {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }

    /* 4. Ajuste del contenedor para que no se amontone todo */
    .container-header {
        position: relative;
        justify-content: space-between;
    }

    .header-actions {
        order: 3;
    }
}

/* En PC escondemos el botón */
@media (min-width: 993px) {
    .menu-toggle {
        display: none !important;
    }
}

/* ARREGLO MAPA PARA EL A70 */
iframe {
    width: 100% !important;
    max-width: 100%;
}

/* --- FIX RESPONSIVE TOTAL --- */
@media (max-width: 992px) {
    /* 1. Forzamos que el menú de PC desaparezca */
    .nav-menu {
        display: none !important; /* Esto evita que veas "Inicio" al lado del ícono */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* 2. Clase que activa el JS */
    .nav-menu.active {
        display: flex !important;
    }

    /* 3. Estilo del botón Hamburguesa */
    .menu-toggle {
        display: block !important;
        background: #1e3a8a;
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
        font-size: 1.4rem;
        cursor: pointer;
    }

    /* 4. El mapa de Google ahora sí se ajusta al ancho */
    .map-container iframe, iframe {
        width: 100% !important;
        height: 300px !important;
        border: 0;
    }

    /* 5. Ajustes de espacio para que no se encime el logo */
    .logo img {
        height: 80px !important; /* Más chico en móvil */
    }
    
    .btn-cta-bell span {
        display: none; /* Escondemos el texto "Suscribite" para ganar espacio */
    }
}

/* En monitores grandes escondemos la hamburguesa */
@media (min-width: 993px) {
    .menu-toggle {
        display: none !important;
    }
}

/* =======================================================
   CORRECCIONES FINALES PARA MÓVIL (Samsung A70 y otros)
   Pegar esto al FINAL de style.css
   ======================================================= */

@media (max-width: 992px) {

    /* --- 1. ARREGLO DEL MENÚ HAMBURGUESA --- */
    
    /* Aseguramos que el header sea la referencia para el menú absoluto */
    .container-header {
        position: relative; 
    }

    .nav-menu {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Justo debajo del header */
        left: 0;
        width: 100%; /* Ancho total */
        background-color: #ffffff; /* Fondo blanco sólido imperativo */
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.2); /* Sombra para que flote */
        z-index: 9999; /* Por encima de todo */
        border-top: 1px solid #eee;
    }

    /* Clase que agrega JS para mostrarlo */
    .nav-menu.active {
        display: flex !important; 
    }

    /* Estilo de los items del menú en celular */
    .nav-menu li {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .nav-menu li a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 18px; /* Letra más grande para dedos */
    }

    /* Soporte para MODO OSCURO en el menú desplegable */
    body.dark-mode .nav-menu {
        background-color: #1e1e1e;
        border-top: 1px solid #333;
    }
    body.dark-mode .nav-menu li a {
        color: #fff;
        border-bottom: 1px solid #333;
    }

    /* Botón Hamburguesa visible */
    .menu-toggle {
        display: block !important;
        font-size: 24px;
        padding: 5px 10px;
        z-index: 10000; /* Asegura que el botón se pueda tocar */
    }

    /* --- 2. ARREGLO DEL MAPA DE GOOGLE --- */

    /* El contenedor del mapa se fuerza al 100% del ancho disponible */
    .map-box {
        width: 100%;
        overflow: hidden; /* Corta cualquier sobrante */
    }

    .map-container {
        width: 100%;
        display: block;
    }

    /* Forzamos al iframe a obedecer el ancho de pantalla */
    .map-container iframe {
        width: 100% !important; /* Pisa el width="600" del HTML */
        max-width: 100% !important;
        height: 350px !important; /* Altura fija cómoda para el A70 */
    }
}