/* =========================================
   FicheroESTILS.CSS - Confraria La Salle d'Inca
   Diseño Puro, Moderno y Responsive
   v/. 2026 0406 1901

   - Estructura HTML5 semántica
   - Navegación clara y accesible
   - Contenido organizado en secciones */

    /* 1. Reset y Variables comúnes a todos los ficheros */
    :root {
        --primary: #003366;   
        --accent: #ffcc00;     /* Dorado */
        --text-dark: #1a202c;
        --text-light: #4a5568;
        --white: #ffffff;
        --bg-body: #f7fafc;
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --radius: 12px;
        --transition: all 0.3s ease;
        --celeste: #87ceeb;             /* Color Corporativo */
        --light-bg: #f4f4f4;
    }

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

    body {
        font-family: 'Inter', -apple-system, sans-serif;
        background-color: var(--bg-body);
        color: var(--text-dark);
        line-height: 1.6;
    }

    /* 2. Estructura y Contenedores */
    .main-container, .container {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px 0;
    }

    /* 3. Navegación (Navbar) */
    .navbar {    
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 5%;
        position: sticky;
        top: 0;
        z-index: 9999;
        box-shadow: var(--shadow);    
    }

    .logo img {
        height: 50px;
        width: auto;
        transition: var(--transition);
    }

    .menu-toggle{ display: none; }


    .nav-links {
        display: flex;
        list-style: none;
        gap: 20px;
    }

    .nav-links a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }

    .nav-links a:hover, .submenu li a:hover {
        border: 1px solid var(--celeste);
        border-radius: 10px;
        background-color: var(--light-bg);
        color: var(--primary);       
    }

    /* Dropdown Menu */
    .dropdown {
        position: relative;
    }

    .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--white);
        min-width: 200px;
        box-shadow: var(--shadow);
        list-style: none;
        border-radius: 0 0 8px 8px;
        padding: 10px 0;
    }

    .submenu li a {
        color: var(--text-dark);
        padding: 10px 20px;
        display: block;
        text-transform: none;
    }

    .dropdown:hover .submenu {
        display: block;
    }

     /* Estilo general para los iconos FECABOOK INSTAGRAM */
    .fa-square-facebook, .fa-square-instagram {
        font-size: 1.75rem;
        color: var(--primary);
        transition: var(--transition);
    }

    .fa-square-facebook:hover, .fa-square-instagram:hover {
        border: 1px solid var(--celeste);
        border-radius: 10px;
        background-color: var(--light-bg);
        color: var(--primary);
        padding: 5px 10px;
    }
  
    .social-link {
        font-size: 24px; /* Tamaño del icono */
        text-decoration: none;
        transition: transform 0.3s ease, color 0.3s ease;
        display: inline-block;
    }

    /* Color original (gris o el que prefieras) */
    .social-link i {
        color: #555; 
    }

    /* Efecto al pasar el ratón (Hover) */
    .social-link:hover {
        transform: scale(1.2); /* Se agranda un poco */
    }

    /* Color específico de Facebook al pasar el ratón */
    .fb:hover i {
        color: #1877F2;
    }

    /* Color específico de Instagram al pasar el ratón */
    .ig:hover i {
        color: #E4405F;
    }

    /* Quitar los puntos de la lista si es necesario */
    li {
        list-style: none;
        display: inline-block;
        margin-right: 15px;
    }

    /* Estilo base para el botón (oculto por defecto) */
    .menu-toggle {
        display: none;
        background: none;
        border: none;
        color: #333; /* Cambia según el color de tu diseño */
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* Media Query para móviles (normalmente 768px o menos) */
    @media (max-width: 768px) {
        .menu-toggle {
            display: block; /* Mostrar botón en móvil */
        }

        .nav-links {
            display: none; /* Ocultar menú por defecto en móvil */
            flex-direction: column;
            position: absolute;
            top: 60px; /* Ajusta según la altura de tu navbar */
            left: 0;
            width: 100%;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        /* Clase que añadiremos con JS para mostrar el menú */
        .nav-links.active {
            display: flex;
        }
    }

    /* 4. Footer */
    footer {
        background-color: var(--primary);
        color: var(--white);
        text-align: center;
        padding: 40px 20px;
        margin-top: 40px;
    }

    /* 5. h1 h2 */
    h1, h2 {
    color: var(--primary);
    text-align: left;
    margin-bottom: 1.5rem;
    }

    .btn-ir-arriba { 
        position: fixed; 
        bottom: 115px; 
        right: 20px; 
        z-index: 100; 
    }

    .back-to-top { 
        background: var(--accent); 
        color: var(--primary); 
        padding: 15px; 
        border-radius: 50%; 
        box-shadow: var(--shadow); 
    }

    .fa-arrow-up{ font-size: 1rem; }

    /* 6. Componentes de Contenido a varios ficheros */
    .section-card {
        background: var(--white);
        padding: 30px;
        margin-bottom: 30px;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

    .img-historia-wrapper { 
        text-align: center; 
        margin-bottom: 30px; 
    }

    .img-responsive-historia { 
        max-width: 90%; 
        height: auto; 
        border-radius: 10px;
        margin-left: 10%;
     }

    /* 7. --- NATIVE CAROUSEL --- */
    .custom-carousel {
        position: relative;
        width: 100%;
        max-width: 750px; /* Ajusta según tu diseño */
        margin: 0 auto;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: var(--shadow);
        cursor: pointer;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        height: 550px; /* Altura del slider */
    }

    .carousel-track img {
        width: 100%;
        flex-shrink: 0;
        object-fit: cover;
        user-select: none;
    }

    /* Botones */
    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.4);
        color: white;
        border: none;
        padding: 15px;
        cursor: pointer;
        font-size: 24px;
        z-index: 10;
        transition: background 0.3s;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-btn:hover { background: var(--color_LaSalle); }
    .prev { left: 15px; }
    .next { right: 15px; }

    /* Indicador de pausa */
    .carousel-status {
        position: absolute;
        bottom: 15px;
        right: 20px;
        color: white;
        background: rgba(0,0,0,0.5);
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .custom-carousel.paused .carousel-status { opacity: 1; }

    

    /* 8. Estilos página index.html - Sección Qui som? */
    .container-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 30px;
    }

    .texto-historico p {
        text-align: justify;
    }

    .col-img, .col-text {
        flex: 1;
        min-width: 300px;
    }

    .img-responsive {
        width: 100%;
        height: auto;
        border-radius: 8px;    
    }

    
    /* 9. Estilos CONTACTO y FORMULARIO */   

    .section-contacto{
        display: flex;
        flex-direction: column; 
    }
    
    .contacto-container{
        display: flex;
        gap: 40px;  
    }
    .contacto-info{
    flex: 1;
    max-width: 50%;
    }

    .contacto-form-container{
        flex: 1;
        max-width: 40%;
    }

    .form-group { 
        margin-bottom: 15px; 
        text-align: left; 
    }

    .form-group label { 
        display: block; 
        margin-bottom: 5px; 
        font-weight: 600; 
    }

    .form-group input, .form-group textarea {
        width: 100%; padding: 12px; 
        border: 1px solid #ddd; 
        border-radius: 8px; 
        font-family: inherit;
    }
    
    .btn-leer-mas, .btn-tornar, .btn-enviar {
        display: inline-block;
        padding: 10px 20px;
        background: var(--primary);
        color: white;
        text-decoration: none;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        transition: var(--transition);
    }
    .btn-leer-mas:hover, .btn-enviar:hover, .btn-tornar:hover { 
        background: var(--celeste); 
    }

   .junta-grid, .programas-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    }

    .junta-item {
        background: white; 
        border-bottom: 4px solid var(--accent);
        padding: 20px; 
        text-align: center; 
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .cargo { 
        color: var(--primary); 
        font-weight: bold; 
        text-transform: uppercase; 
        font-size: 0.8rem; 
    }
    
    .nombre { 
        font-size: 1.2rem; 
        margin-top: 5px; 
    }

    .tamborer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        padding: 20px;
    }

    .tamborer-item {
        background: white; 
        border-bottom: 4px solid var(--accent);
        padding: 20px; 
        text-align: center; 
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .tamborer-cargo { 
        color: var(--primary); 
        font-weight: bold; 
        text-transform: uppercase; 
        font-size: 0.8rem; 
    }

    .tamborer-nom { 
        color: var(--primary); 
        font-weight: bold; 
        font-size: 1.1rem; 
    } 

    .container-flex { 
        display: flex; 
        gap: 20px; 
        flex-wrap: wrap;
        flex-direction: row;
     }

    .col-img, .col-text { 
        flex: 1; 
        min-width: 300px; 
    }

    .img-responsive { 
        width: 100%; 
        border-radius: 8px; 
    }

   /* .section-card  */
   .col-text p {
        margin-bottom: 1.5rem;
        text-align: justify;
        color: #333;
        line-height: 1.8;
    }

    h1 { 
        color: var(--primary); 
        border-left: 5px solid var(--accent); 
        padding-left: 15px; 
    } 

    .nombre-quisom { 
        color: var(--primary); 
        font-weight: bold; 
        font-size: 1.1rem; 
    }

    /* --- LOGOS ESQUINAS --- */
    .corner-logo img { 
        position: absolute; 
        height: 250px;
        top: 150px; 
        width: 250px; 
        z-index: 10; 
        opacity: 0.9; 
    }
    .left-top img { left: 150px; }
    .right-top img { right: 150px; }
    
    .galeria-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    .presidents-galeria-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 15px;
    }

    .card-foto {
        overflow: hidden; 
        border-radius: 8px;
        transition: transform 0.3s ease;
    }

    .card-foto img { 
        width: 100%; 
        display: block; 
        /* filter: grayscale(50%);  */
        transition: 0.3s; 
    }

    .card-foto:hover img { 
        filter: grayscale(0%); 
        transform: scale(1.05); 
    }    

    .cita-textual {
        font-style: italic;
        background: #fff9e6;
        padding: 20px;
        border-left: 4px solid var(--accent);
        margin: 20px 0;
    }

    .btn-leer-mas {
        display: inline-block;
        background: var(--primary);
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 4px;
    }    

    .junta-info i { 
        display: block; 
        margin-bottom: 10px; 
    }

/* ESTILOS PARA RESPONSIVE DESIGN */

    @media (max-width: 992px) {
        .container-flex {
            flex-direction: column;
        }
        
        .col-img, .col-text {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .carousel-track { height: 300px; }
        .carousel-btn { width: 40px; height: 40px; font-size: 18px; }
    }


    .corner-header {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        align-items: center;
        gap: 20px;
        text-align: center;
        padding: 20px 0;
    }

    .corner-logo {
        max-width: 100px;
        justify-self: center;
    }

    .center-img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

/*** Fin del fichero ESTILS.CSS ***/