/* =========================================
   HOJA DE ESTILOS - CLUB SOCIAL DOCUMENTALISTAS
   ========================================= */

/* 1. Selector Universal */
/* 2. Selector de Etiqueta (Unificado y limpio) */
html {
    background-color: #000000; /* Movemos el fondo negro a la capa más profunda */
}

body {
    font-family: 'Montserrat', sans-serif; /* Tu fuente editorial */
    background-color: transparent; /* Dejamos el body transparente para que se vea el negro */
}

* {
    /* En lugar de pintar todo azul, aplicamos una regla profesional de caja */
    box-sizing: border-box; 
}

/* 2. Selector de Etiqueta */

strong {
    color: #ff6600; /* En vez de rojo, usamos tu color naranjo para resaltar textos en negrita */
}

/* 3. Selector Múltiple 
h1, h2, h3 {*/
    /* Le damos una sombra sutil a los títulos para que resalten sobre las imágenes 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 
}*/

/* 4. Selector Descendente */
/* Afectará al párrafo que está dentro del div, que a su vez está dentro del header (Hero) */
header div p {
    font-size: 22px; 
    font-weight: 500;
} 

/* 5. Selectores de Clase */
.btn-naranjo {
    background-color: #b5500e;
    color: white;
    border: none;
}

.btn-naranjo:hover {
    background-color: #cc5200; 
    color: white;
}

.tarjeta-oscura {
    background-color: #101010;
}

/* 6. Selector de ID */
#parrafo1 {
    color: #cccccc; /* Un gris claro para texto que queramos diferenciar */
}

/* Ajustes para celulares (pantallas menores a 768px) */
@media (max-width: 768px) {
    .carousel-item img {
        height: 60vh !important; /* Obliga a que la imagen tenga una altura fija */
        object-fit: cover !important; /* Obliga a que la imagen se recorte para llenar ese espacio */
        object-position: top center !important; /* Obliga a mostrar la parte de arriba */
    }

    /* Ajustes de texto por si acaso */
    .carousel-caption h1 { font-size: 2rem !important; }
    .carousel-caption p { font-size: 1rem !important; width: 100% !important; }
/* Achicamos la barra de redes en celulares */
    .redes-flotantes {
        padding: 10px 5px;
        opacity: 0.9;
    }
    .icono-red {
        font-size: 1.2rem;
    }
}

/* Barra flotante de redes */
.redes-flotantes {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ff6600;
    padding: 15px 10px;
    border-radius: 10px 0 0 10px;
    z-index: 9999; /* Nivel altísimo para que nada lo tape */
    box-shadow: -4px 0 15px rgba(0,0,0,0.5);
}

.icono-red {
    color: white;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.icono-red:hover {
    color: #101010;
    transform: scale(1.2);
}

/* Efecto Ken Burns (Zoom lento) para el banner principal */
.carousel-item img {
    animation: zoomIn 15s ease infinite alternate;
}

@keyframes zoomIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}


/* Transición suave para las tarjetas */
.card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid #1a1a1a;
}

/* Efecto al pasar el mouse */
.card:hover {
    transform: translateY(-10px); /* La tarjeta sube un poco */
    box-shadow: 0 15px 30px rgba(255, 102, 0, 0.2); /* Sombra naranja sutil */
    border-color: #ff6600; /* El borde se pinta de naranja */
}

/* Que la imagen de la tarjeta también haga un mini zoom interno */
.card-img-top {
    transition: transform 0.5s ease;
}
.card:hover .card-img-top {
    transform: scale(1.05);
}

h1, h2, h3, .fw-bold {
    font-weight: 800 !important;
    letter-spacing: -1px; /* Junta un poquito las letras, muy estilo afiche de cine */
}

/* Personalización de la barra de desplazamiento */
::-webkit-scrollbar {
    width: 10px; /* Hace la barra un poco más delgada y elegante */
}

::-webkit-scrollbar-track {
    background: #0a0a0a; /* Fondo casi negro profundo */
}

::-webkit-scrollbar-thumb {
    background: #333333; /* Color de la barrita por defecto */
    border-radius: 10px; /* Bordes redondeados */
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6600; /* ¡Al pasar el mouse se vuelve naranja! */
}

/* Efecto de grano de película sutil para todo el fondo */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png');
    opacity: 0.04; /* Mantén una opacidad baja para que no moleste */
    pointer-events: none;
    z-index: -1; /* Un z-index bajo para que se vaya al fondo */
}