/* CONFIGURACIÓN GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
}

body {
    background-color: #ffffff;
    color: #111111;
}

.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* COLORES ENFATIZADOS */
.txt-rojo { color: #e53935; }
.txt-blanco { color: #ffffff; }

/* NAVBAR */
header {
    background-color: #111111;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 4px solid #e53935;
}

.logo { font-size: 1.4rem; font-weight: 900; letter-spacing: 1px; }

header nav a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 20px;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: color 0.3s;
}

header nav a:hover, header nav a.activo { color: #fdd835; }

/* HERO */
.hero {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../img/Logo/Inicio.jpeg');
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    border-bottom: 4px solid #e53935;
}

.hero h1 { 
    font-family: 'Times New Roman', Times, serif; /* <--- Esta es la línea clave */
    font-size: 2.8rem; 
    font-weight: 900; 
    margin-bottom: 15px; 
}

.btn-principal {
    background-color: #e53935;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background 0.3s;
}

.btn-principal:hover { background-color: #b71c1c; }

/* Regla exclusiva para el subtítulo del Hero */
.hero-content h2 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.8rem; /* Puedes ajustar el tamaño aquí */
    color: white;      /* Asegura que el color sea visible sobre el fondo */
    margin-top: 10px;
    font-weight: 400;  /* Un poco más ligero que el h1 para mayor elegancia */
    letter-spacing: 1px;
}
/* SECCIONES Y DECORACIÓN */
.seccion { padding: 70px 0; text-align: center; }
.fondo-oscuro {
    background-color: #0c0c0c; /* O el tono exacto de negro que uses */
    border-top: 4px solid #e53935;    /* Línea roja divisoria superior */
    border-bottom: 4px solid #e53935; /* Línea roja divisoria inferior */
    padding: 60px 0;
}
.titulo-seccion { font-size: 2rem; text-transform: uppercase; font-weight: 800; }
.titulo-seccion.blanco { color: white; }
.linea-decorativa { width: 50px; height: 5px; background-color: #e53935; margin: 15px auto 35px auto; }
.linea-decorativa.amarillo { background-color: #fdd835; }
.descripcion { max-width: 700px; margin: 0 auto 40px auto; font-size: 1.05rem; color: #555; line-height: 1.6; }

/* NUEVO: REJILLA DE LOS 4 CUADROS DE INSTRUMENTOS */
.grid-bloques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.bloque-instrumento {
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    overflow: hidden;
    border-bottom: 5px solid #fdd835;
    transition: transform 0.3s, border-color 0.3s;
}

.bloque-instrumento:hover {
    transform: translateY(-5px);
    border-color: #e53935;
}

.bloque-contenido {
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    width: 100%;
    padding: 20px;
    text-align: left;
    color: white;
}

.bloque-contenido h3 { font-size: 1.5rem; text-transform: uppercase; margin-bottom: 5px; }
.bloque-contenido span { font-size: 0.85rem; color: #fdd835; font-weight: bold; }

/* DETALLES DE CADA INSTRUMENTO */
.grid-detalle { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 30px; }
.tarjeta-detalle { background: #fdfdfd; border: 1px solid #e0e0e0; width: 300px; border-radius: 6px; overflow: hidden; text-align: left; }
.tarjeta-detalle img { width: 100%; height: 200px; object-fit: cover; }
.tarjeta-detalle h3 { padding: 15px 15px 5px 15px; font-size: 1.3rem; }
.tarjeta-detalle p { padding: 0 15px 15px 15px; color: #666; font-size: 0.95rem; }

/* SECCIÓN PREMIOS */
.grid-premios { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.tarjeta-premio { background: #111111; color: white; border-top: 4px solid #e53935; padding: 30px; width: 300px; border-radius: 4px; transition: background 0.3s; }
.tarjeta-premio:hover { background: #1a1a1a; }
.icono-premio { font-size: 2.5rem; color: #fdd835; margin-bottom: 15px; }
.tarjeta-premio h3 { font-size: 1.25rem; text-transform: uppercase; }
.subtitulo-premio { color: #e53935; font-size: 0.85rem; font-weight: bold; margin-bottom: 10px; }
.tarjeta-premio p { color: #b3b3b3; font-size: 0.9rem; line-height: 1.4; }

/* CARRUSEL GALERÍA */
.carrusel-contenedor { max-width: 750px; margin: 0 auto; overflow: hidden; border: 4px solid #ffffff; border-radius: 4px; }
.carrusel-track { display: flex; width: 400%; transition: transform 0.6s ease-in-out; }
.carrusel-tarjeta { width: 25%; }
.carrusel-tarjeta img { width: 100%; display: block; }

/* GALERÍA DE FOTOS GRUPALES */
.grid-fotos-grupales { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 30px; }
.grid-fotos-grupales img { width: 100%; height: 250px; object-fit: cover; border-radius: 4px; border: 2px solid #e0e0e0; transition: border-color 0.3s; }
.grid-fotos-grupales img:hover { border-color: #e53935; }

/* DONACIONES */
.destacado-rojo { background-color: #e53935; color: white; }
.metodos-recaudo { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 25px; }
.metodo { background: #111; padding: 15px 30px; border-radius: 4px; border: 1px solid #fdd835; min-width: 250px; }
.metodo i { color: #fdd835; margin-right: 10px; }
.metodo span { display: block; margin-top: 5px; font-size: 1.1rem; }

footer { background: #0a0a0a; color: #666; padding: 20px; font-size: 0.9rem; }

/* NUEVO: ESTILOS PARA LAS PÁGINAS INTERNAS DE INSTRUMENTOS */
.tarjeta-bloque {
    text-decoration: none; /* Quita el subrayado azul de los enlaces en los cuadros */
    cursor: pointer;
}

.txt-amarillo {
    color: #fdd835;
    font-size: 0.9rem;
    font-weight: bold;
    display: block;
    margin-top: 10px;
    text-transform: uppercase;
}

.grid-subseccion {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.tarjeta-subseccion {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    width: 340px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: left;
    border-top: 4px solid #e53935;
}

.tarjeta-subseccion img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.tarjeta-subseccion-info {
    padding: 20px;
}

.tarjeta-subseccion-info h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #111;
}

.tarjeta-subseccion-info p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* NUEVOS ESTILOS PARA TARJETAS EN BLOQUE NEGRO (FILAS DE 2) */
.tarjeta-institucional-negra {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 40px 30px;
    text-align: center;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-bottom: 4px solid #fdd835;
    transition: transform 0.3s, border-color 0.3s;
}

.tarjeta-institucional-negra:hover {
    transform: translateY(-5px);
    border-bottom-color: #e53935;
}

.tarjeta-institucional-negra h3 {
    color: #ffffff;
    font-size: 1.4rem;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.tarjeta-institucional-negra p {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* BOTÓN ROJO PARA REEMPLAZAR ENLACES AZULES */
.btn-rojo-bloque {
    background-color: #e53935;
    color: #ffffff;
    padding: 10px 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s;
    display: inline-block;
    margin-top: auto; /* Empuja el botón al fondo si los textos varían de tamaño */
}

.btn-rojo-bloque:hover {
    background-color: #b71c1c;
    transform: scale(1.03);
    color: #ffffff;
}

/* CUADRÍCULA EXCLUSIVA DE 2 COLUMNAS PARA EL BLOQUE INSTITUCIONAL */
.cuadricula-institucional-dos {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea exactamente dos columnas de igual tamaño */
    gap: 30px; /* Espacio de separación entre las tarjetas */
}

/* Ajuste para que en celulares no se rompa y se pongan una abajo de otra */
@media (max-width: 850px) {
    .cuadricula-institucional-dos {
        grid-template-columns: 1fr;
    }
}

/* SEPARADOR DE LÍNEA ROJA ENTRE TEXTOS */
.linea-roja {
    width: 100%;               /* Ocupa todo el ancho disponible */
    height: 4px;               /* El mismo grosor de tus bordes */
    background-color: #e53935; /* El color rojo institucional */
    margin: 30px 0;            /* Separa 30px arriba y 30px abajo del texto */
    border: none;
}

/* ESTILOS PARA LAS IMÁGENES DE LOS INSTRUMENTOS */
.img-instrumento {
    width: 100%;
    max-width: 350px;      /* Evita que la imagen se estire demasiado */
    height: 220px;         /* Altura fija para que todas las tarjetas se vean simétricas */
    object-fit: cover;     /* Hace que la imagen se adapte sin deformarse */
    border-radius: 4px;    /* Esquinas ligeramente suavizadas */
    margin: 15px 0 25px 0; /* Separación: 15px arriba (del título) y 25px abajo (del botón) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* Un pequeño reflejo de sombra para dar profundidad */
}

/* BLOQUE DE NOTA O FRASE DESTACADA EN GRIS */
/* BLOQUE DE NOTA O FRASE DESTACADA EN GRIS (MÁS OSCURO) */
.bloque-destacado-gris {
    background-color: #e0e0e0;      /* Gris un tris más oscuro para mejor contraste */
    border-left: 5px solid #fdd835;  /* Línea vertical amarilla intacta */
    padding: 20px 25px;              
    margin: 30px auto;               
    max-width: 800px;                
    font-size: 1.1rem;
    font-weight: bold;               
    color: #212121;                  /* El texto oscuro se seguirá leyendo perfecto */
    line-height: 1.6;
    border-radius: 0 4px 4px 0;      
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05); /* Ajusté la sombra interna para que acompañe el tono */
}

html {
    scroll-behavior: smooth;
}

/* Corrección para celulares */
@media (max-width: 768px) {
    .contenedor {
        width: 95%; /* Un poco más de espacio en móviles */
        padding: 0 10px;
    }

    /* Esto evita que cualquier bloque se desborde horizontalmente */
    body {
        overflow-x: clip;
    }
}

/* Estilo del menú lateral (oculto por defecto) */
#nav-menu {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    #menu-btn { display: block !important; }

    #nav-menu {
        position: fixed;
        top: 0;
        right: -250px; /* Escondido a la derecha */
        width: 250px;
        height: 100%;
        background: #111;
        flex-direction: column;
        padding-top: 80px;
        transition: 0.3s; /* Efecto suave */
        z-index: 1000;
    }

    #nav-menu.activo {
        right: 0; /* Se muestra al activar */
    }
}

.slider-contenedor {
    width: 100%;
    overflow: hidden; /* Esto oculta lo que se sale del borde */
    background: #fff;
}

.slider-track {
    display: flex;
    /* Si tienes 3 logos que miden 400px c/u, el total son 1200px. 
       Como repetiste los logos (total 6 logos), aquí debes poner 2400px */
    width: 2400px; 
    animation: scroll 15s linear infinite;
}

/* Borra cualquier otra regla que tengas de .logo-slide y pega esta: */

.logo-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px; /* Tamaño para PC */
}

@media (max-width: 768px) {
    .logo-slide img {
        width: 40% !important; /* La imagen ocupará el 100% de los 200px del contenedor */
        height: auto !important; /* Mantiene la proporción para que no se deforme */
    }
}

.logo-slide img {
    height: 100px; /* Ajusta el tamaño de tus logos */
    transition: 0.3s;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-600px); } /* Aquí mueves solo la mitad (el ancho del primer set de logos) */
}

/* Corrección para dispositivos móviles */
@media (max-width: 768px) {
    /* Ajusta el contenedor de los principios */
    .grid-principios {
        display: flex;
        flex-direction: column; /* Esto pone los bloques en fila vertical */
        width: 100%;
        padding: 0 15px; /* Un poco de aire a los lados */
    }

    /* Asegura que cada bloque ocupe el ancho disponible */
    .grid-principios > div {
        width: 100% !important; /* Fuerza a que cada tarjeta sea del ancho total */
        margin-bottom: 20px;   /* Separa un bloque de otro */
    }
}

/* --- CORRECCIONES PARA MÓVIL --- */
@media (max-width: 768px) {
    /* 1. Ajuste de las tarjetas institucionales (las de 2 en 2) */
    .cuadricula-institucional-dos {
        grid-template-columns: 1fr !important; /* Pasa de 2 columnas a 1 sola */
    }

    /* 2. Asegurar que las secciones no se salgan de la pantalla */
    .contenedor {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 3. Ajuste del menú lateral (si ya lo habías implementado) */
    #nav-menu {
        right: -100% !important; /* Oculto completamente fuera */
    }
    #nav-menu.activo {
        right: 0 !important; /* Visible */
    }

    /* 4. Ajuste del mapa de ubicación para que no se estire */
    iframe {
        width: 100% !important;
        height: 250px !important;
    }
}

/* 5. Asegurar que NADA se desborde horizontalmente */
body, html {
    overflow-x: hidden;
    width: 100%;
}

/* Estilo base para pantallas grandes (2 columnas) */
.cuadricula-institucional-dos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Regla para móviles: Pasa a 1 sola columna */
@media (max-width: 768px) {
    .cuadricula-institucional-dos {
        grid-template-columns: 1fr !important;
    }
}
/* Centrar la última tarjeta SOLO en PC */
@media (min-width: 769px) {
    .tarjeta-centrada {
        grid-column: span 2; /* Ocupa las dos columnas */
        max-width: 600px;    /* Evita que se estire demasiado */
        margin: 0 auto;      /* La centra perfectamente */
    }
}

/* Convierte el contenedor del logo en una caja flexible para alinear sus elementos */
.logo {
    display: flex;
    align-items: center; /* Centra verticalmente la imagen y el texto */
    gap: 15px; /* Crea un espacio entre la imagen redonda y las letras */
}

/* Controla el tamaño de la imagen para que no se vea gigante */
.logo-img {
    width: 60px; /* Ajusta este número si lo quieres más grande o más pequeño */
    height: auto;
    border-radius: 50%; /* Opcional: asegura que el borde sea perfectamente redondo */
}

html, body {
    overflow: visible !important;
    height: auto !important;
}

header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

/* --- SECCIÓN EMPRESAS ALIADAS (CARRUSEL INFINITO) --- */
.empresas-aliadas {
    background-color: #ffffff;
    padding: 60px 0;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.empresas-aliadas h2 { color: #111111; font-size: 2rem; text-transform: uppercase; margin-bottom: 10px; }

.linea-roja {
    width: 60px;
    height: 4px;
    background-color: #e53935;
    margin: 0 auto 40px auto;
}

.carrusel-logos {
    display: flex;
    width: max-content;
    /* La animación se encarga de todo el movimiento */
    animation: moverCarrusel 20s linear infinite;
}

@keyframes moverCarrusel {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Al desplazarse el 50%, el clon reemplaza al original perfectamente */
}

.logo-slide {
    width: 300px; /* Tamaño base en PC */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.logo-slide img {
    max-width: 200px;
    height: 150px;
    transition: 0.3s;
}

.logo-slide img:hover { filter: grayscale(0%); transform: scale(1.1); }

/* Ajuste móvil */
@media (max-width: 200px) {
    .logo-slide {
        width: 150px;
    }
    .logo-slide img {
        max-width: 100px;
            height: 150px;

    }
}

* --- SECCIÓN EMPRESAS ALIADAS --- */

.empresas-aliadas {
    background-color: #ffffff; /* Fondo blanco para que resalten los logos */
    text-align: center;
    padding: 60px 20px;
}

.empresas-aliadas h2 {
    color: #111111;
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.linea-roja {
    width: 60px;
    height: 4px;
    background-color: #e53935; /* Tu color rojo institucional */
    margin: 0 auto 40px auto; /* Centra la línea y da espacio abajo */
}

.contenedor-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que los logos bajen de línea en celulares */
    gap: 100px; /* Espacio entre logo y logo */
    max-width: 1000px;
    margin: 0 auto;
}

.logo-empresa img {
    max-width: 200px; /* Tamaño máximo para que no se vean gigantes */
    height: auto;
    transition: filter 0.3s ease, transform 0.3s ease;
}