:root {
    --color-vino: #5e1232; 
    --color-teal: #1e9e8f;
    --font-base: 16px;
}

body {
    font-size: var(--font-base);
    font-family: 'Noto sans', sans-serif;
    color: #333;
    transition: font-size 0.2s ease-in-out;
    background-color: #ffffff;
}

html {
    scroll-behavior: smooth;
}

section[id], [id] {
    scroll-margin-top: 100px;
}









/* UTILIDADES DE COLOR Y DISEÑO PLANO ESTRICTO */
.color-vino { color: var(--color-vino) !important; }
.text-teal { color: var(--color-teal) !important; }
.bg-vino { background-color: var(--color-vino) !important; }
.bg-teal { background-color: var(--color-teal) !important; }
.border-vino { border-color: var(--color-vino) !important; }








/* Eliminación total de sombras y degradados en todo el sitio */
* { box-shadow: none !important; }
.shadow, .shadow-sm, .shadow-lg, .shadow-none { box-shadow: none !important; }
.bg-gradient { background-image: none !important; }






/* Títulos y textos */
.section-title { font-weight: 700; color: var(--color-vino) !important; }
.section-subtext { max-width: 800px; margin-left: auto; margin-right: auto; }
.text-white { color: #ffffff !important; } 






/* Colores de fondo en secciones Home */
.events-section, #aprendizaje, #acciones { background-color: #f5f5f5 !important; }
.events-section .section-subtext, #aprendizaje .section-subtext, #acciones .section-subtext,
.events-section .text-secondary, #aprendizaje .text-secondary, #acciones .text-secondary,
.events-section .text-dark, #aprendizaje .text-dark, #acciones .text-dark {
    color: #000000 !important;
}
.events-section .bg-white .text-secondary, #aprendizaje .bg-white .text-secondary, #acciones .bg-white .text-secondary {
    color: #333333 !important;
}
.events-section .bg-white .color-vino, #aprendizaje .bg-white .color-vino, #acciones .bg-white .color-vino {
    color: var(--color-vino) !important;
}






/* CABECERA Y NAVEGACIÓN */
.main-header {
    background-color: var(--color-vino);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: 1rem;
}

.header-left { display: flex; align-items: center; gap: 1rem; }
.logo-container img { max-height: 48px; width: auto; }
.nav-controls { display: flex; align-items: center; gap: 1rem; margin-left: auto; justify-content: flex-end; }
.icon-btn { background: transparent; border: none; cursor: pointer; }

.desktop-nav { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.desktop-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.desktop-nav a:hover {
    background-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.accessibility-btn {
    width: 64px; height: 64px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; background: transparent;
    border: none; padding: 0; transition: transform 0.2s ease, opacity 0.2s ease;
}
.accessibility-btn:hover { transform: scale(1.04); opacity: 0.9; }
.accessibility-btn img { width: 36px; height: 36px; object-fit: contain; filter: brightness(0) invert(1); }











/* MENÚ DESPLEGABLE MÓVIL */
.menu-container { position: relative; }

.menu-toggle-btn {
    display: none; width: 64px; height: 64px; padding: 0; border-radius: 50%;
    border: none; background: transparent; justify-content: center;
    align-items: center; flex-direction: column; gap: 4px;
}
.menu-toggle-btn span {
    display: block; width: 26px; height: 3px; background-color: #ffffff;
    border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle-btn.active span:nth-child(2) { opacity: 0; }
.menu-toggle-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.dropdown-menu-custom {
    position: fixed; top: 0; right: -320px; width: 320px; height: 100vh;
    background-color: var(--color-vino); border: none; padding: 0;
    display: block; z-index: 1050; transition: right 0.3s ease-in-out;
}
.dropdown-menu-custom.active { right: 0; }

.nav-panel-list { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-panel-list li a {
    display: block; padding: 0.9rem 1rem; color: #ffffff;
    text-decoration: none; font-weight: 600; border-radius: 0.75rem;
    transition: background-color 0.2s ease;
}
.nav-panel-list li a:hover { background-color: rgba(255, 255, 255, 0.1); }







/* HERO SECTION (HOME Y PÁGINAS INTERIORES) */
.hero-section {
    height: 80vh; min-height: 600px; overflow: hidden; background-color: #000;
}
.hero-overlay { background: transparent; }
.hero-glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    max-width: 100%;
    border: none;
}
.hero-title {
    font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 900;
    line-height: 1.05; letter-spacing: -0.02em;
}
.hero-subtitle { font-size: 1.05rem; font-weight: 800; line-height: 1.5; }
.hero-video-bg { display: block; object-fit: cover; object-position: center; }




/* BOTONES Y CONTROLES */
button:not(.icon-btn):not(.menu-toggle-btn):not(.a11y-close-btn):not(.carousel-control-btn):not(.carousel-btn-nav),
.btn, .btn-navegar, .btn-general, .btn-outline-teal, .a11y-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem; min-height: 46px; padding: 0.8rem 1.25rem;
    border-radius: 999px; border: 2px solid transparent; font-weight: 600;
    line-height: 1.2; text-decoration: none; cursor: pointer; transition: all 0.25s ease;
}
.btn-navegar, .btn-general { background-color: var(--color-vino); color: #ffffff; }
.btn-navegar:hover, .btn-general:hover { background-color: #4a1c2c; color: #ffffff; transform: translateY(-1px); }

.btn-uniforme {
    width: 220px; height: 48px; min-width: 220px; min-height: 48px;
    padding: 0.9rem 1.5rem; font-size: 1rem; font-weight: 700;
}

.btn-outline-teal { background-color: transparent; color: var(--color-teal); border-color: var(--color-teal); }
.btn-outline-teal:hover { background-color: var(--color-teal); color: #ffffff; transform: translateY(-1px); }

.carousel-btn-nav, .carousel-control-btn {
    width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 2px solid var(--color-teal); background-color: transparent;
    color: var(--color-teal); font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease;
}
.carousel-btn-nav:hover, .carousel-control-btn:hover { background-color: var(--color-teal); color: #ffffff; }







/* TARJETAS Y RECURSOS */
.transition-all { transition: all 0.3s ease-in-out; }







/* Efecto hover (Escala plana sin alterar contornos a color teal) */
.hover-scale:hover { transform: translateY(-5px); }

.resource-panel { background-color: #f8f9fa; border: 2px solid #dee2e6; border-radius: 1.75rem; padding: 1.8rem; }
.resource-panel-header { border-bottom: 3px solid var(--color-teal); margin-bottom: 1.5rem; padding-bottom: 1rem; }
.resource-panel-title { font-size: 1.8rem; font-weight: 800; }






/* Icono de materiales con tamaño máximo reducido */
.resource-materials-image { max-height: 110px; max-width: 100%; object-fit: contain; }

.cover-container { background-color: #ffffff; border: 1px solid #dee2e6; overflow: hidden; }
.cover-container img { width: 100%; height: 100%; object-fit: cover; }






/* CARRUSEL Y TARJETAS GIRATORIAS (MEMORIAS) */
.carousel-memorias-container {
    display: flex; flex-wrap: nowrap; gap: 1.5rem; overflow-x: auto;
    scroll-behavior: smooth; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 1.5rem;
}
.carousel-memorias-container::-webkit-scrollbar { display: none; }
.carousel-memorias-container { -ms-overflow-style: none; scrollbar-width: none; }

.memory-flip-card {
    flex: 0 0 calc(33.333% - 1rem); min-width: 280px; height: 280px;
    perspective: 1000px; cursor: pointer; scroll-snap-align: start; transition: transform 0.3s ease;
}
.memory-flip-card:not(.flipped):hover { transform: scale(1.03); }

.flip-card-inner {
    position: relative; width: 100%; height: 100%; text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d;
}

.memory-flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-card-front, .flip-card-back {
    position: absolute; width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; border: none; 
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

.flip-card-front { background-color: #e9ecef; }
.flip-card-front img { width: 100%; height: 100%; object-fit: cover; }

.collage-label {
    position: absolute; bottom: 0; left: 0; width: 100%; background-color: var(--color-vino);
    color: #ffffff; padding: 0.8rem; font-weight: 700; font-size: 1rem; border-top: 2px solid var(--color-teal); margin: 0;
}

.flip-card-back {
    background-color: #f8f9fa; color: var(--color-vino); transform: rotateY(180deg);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 1.5rem; border: 2px solid #dee2e6;
}










/* ACCESIBILIDAD (PANEL) */
.accessibility-panel {
    position: fixed; top: 0; left: -320px; width: 320px; height: 100vh;
    background-color: var(--color-vino); border: none; z-index: 1050; transition: left 0.3s ease-in-out;
}
.accessibility-panel.active { left: 0; }
.a11y-header { background-color: transparent; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.a11y-header h3 { font-weight: 700; }
.a11y-close-btn { background: none; border: none; color: #ffffff; font-size: 2.5rem; cursor: pointer; line-height: 1; }
.a11y-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 15px; }

.a11y-btn { 
    background-color: #ffffff; border: none; color: var(--color-vino); 
    padding: 12px; cursor: pointer; text-align: center; font-weight: bold; 
    border-radius: 8px; transition: all 0.2s; 
}
.a11y-btn:hover, .a11y-btn.active { background-color: var(--color-teal); color: #ffffff; }

body.a11y-highlight-links a { background-color: #ffeb3b !important; color: #000000 !important; text-decoration: underline !important; border: 2px solid #000000 !important; padding: 2px 4px; }









/* MEDIA QUERIES (RESPONSIVO) */
@media (max-width: 991.98px) {
    .desktop-nav { display: none; }
    .menu-toggle-btn { display: flex; }
    .nav-controls { gap: 0.75rem; }
    #recursos .row.g-4 > .col-lg-6 { max-width: 500px; width: 100%; margin-left: auto; margin-right: auto; }
    
    .resource-panel { background-color: #ffffff; border-radius: 1.25rem; padding: 1.15rem; text-align: center; }
    .resource-panel-header { border-bottom: 0; margin-bottom: 1rem; padding-bottom: 0; }
    .resource-panel-title { font-size: 1.35rem; }
    
    .aprendizaje-grid > .col-lg-3, .aprendizaje-grid > .col-md-6,
    .acciones-grid > .col-lg-6, .acciones-grid > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    
    /* Centrar el último elemento impar en rejillas de 2 columnas (md y sm) */
    .guardianes-grid > .guardian-card:last-child:nth-child(odd),
    .acciones-grid > .accion-card:last-child:nth-child(odd),
    .agenda-grid > .agenda-card:last-child:nth-child(odd),
    .aprendizaje-grid > [class*="col-"]:last-child:nth-child(odd) {
        margin-left: auto;
        margin-right: auto;
    }

    .events-section .row.g-4 > .col-lg-4 { max-width: 500px; width: 100%; margin-left: auto; margin-right: auto; }
    .events-section .row.g-4 > .col-lg-4 > .bg-white { padding: 1rem; min-height: 200px; align-items: center; }
    .events-section .row.g-4 > .col-lg-4 > .bg-white .flex-grow-1 { flex-grow: 0; }

    .memory-flip-card { flex: 0 0 calc(50% - 0.75rem); }
}

@media (max-width: 767.98px) {
    .hero-section { height: 48vh; min-height: 350px; }
    .hero-row-mobile { justify-content: center !important; text-align: center; }
    .hero-card-mobile { text-align: center !important; margin: 0 auto; max-width: 360px; }
    .hero-glass-card { padding: 1rem 1.1rem !important; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); }
    .hero-title { font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.08; margin-bottom: 0.75rem; }
    .hero-subtitle { font-size: 0.95rem; font-weight: 800; }
    .hero-card-mobile .btn-navegar { margin-left: auto; margin-right: auto; display: block; }

    .resource-materials-image { max-height: 100px; }
    .resource-panel { padding: 0.8rem; border-radius: 0.9rem; }
    .resource-panel-title { font-size: 1.1rem; }
    
    #tanque-ideas form { padding: 0.9rem !important; }
    #tanque-ideas .form-control, #tanque-ideas .form-select, #tanque-ideas textarea { padding: 0.55rem 0.7rem; font-size: 0.92rem; }
    #tanque-ideas .form-text { font-size: 0.8rem; }
    
    .events-section .row.g-4 > .col-lg-4 { max-width: 370px; width: 100%; margin-left: auto; margin-right: auto; }
    .events-section .row.g-4 { gap: 0.9rem; }
    .events-section .row.g-4 > .col-lg-4 > .bg-white { padding: 0.9rem; }
    .events-section .row.g-4 > .col-lg-4 > .bg-white .mx-auto { width: 70px; height: 70px; }
    .events-section .row.g-4 > .col-lg-4 > .bg-white img { height: 160px; }

    .memory-flip-card { flex: 0 0 100%; min-width: 100%; }
/* ==========================================
       CARRUSELES MÓVILES (GUARDIANES Y AGENDA)
       ========================================== */
       
    /* --- 1. RED GUARDIANES (Inicio) --- */
    .guardianes-grid > .guardian-card:last-child:nth-child(odd) { margin-left: 0; margin-right: 0; }
    .guardianes-grid {
        display: flex; flex-wrap: nowrap !important; overflow-x: auto;
        scroll-snap-type: x mandatory; scroll-behavior: smooth;
        padding-left: 7.5vw; padding-right: 7.5vw; padding-bottom: 3rem; 
        margin-left: 0; margin-right: 0; --bs-gutter-x: 0; 
        -webkit-overflow-scrolling: touch; scrollbar-width: none; 
    }
    .guardianes-grid::-webkit-scrollbar { display: none; }
    .guardian-card {
        flex: 0 0 85% !important; max-width: 85% !important; scroll-snap-align: center; 
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.1), opacity 0.4s ease;
        opacity: 0.55; transform: scale(0.9); position: relative; z-index: 1;
        padding-left: 0.5rem; padding-right: 0.5rem; cursor: pointer;
    }
    .guardian-card .bg-white {
        min-height: 340px; justify-content: center; padding: 1.8rem !important; 
        overflow: hidden; border-radius: 1.5rem !important; 
    }
    .guardian-card .bg-white .mx-auto { width: 80px !important; height: 80px !important; margin-bottom: 1.5rem !important; }
    .guardian-card .bg-white .mx-auto i { font-size: 2.5rem !important; }
    .guardian-card .bg-white h4 { font-size: 1.4rem; margin-bottom: 0.75rem !important; }
    .guardian-card .bg-white p {
        font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 5; 
        -webkit-box-orient: vertical; overflow: hidden;
    }
    .guardian-card.center-focus { opacity: 1; transform: scale(1.05); z-index: 10; }

    /* --- 2. AGENDA PRÓXIMA (Página interna) --- */
    .agenda-grid > .agenda-card:last-child:nth-child(odd) { margin-left: 0; margin-right: 0; }
    .agenda-grid {
        display: flex; flex-wrap: nowrap !important; overflow-x: auto;
        scroll-snap-type: x mandatory; scroll-behavior: smooth;
        padding-left: 7.5vw; padding-right: 7.5vw; padding-bottom: 3rem; 
        margin-left: 0; margin-right: 0; --bs-gutter-x: 0; 
        -webkit-overflow-scrolling: touch; scrollbar-width: none; 
    }
    .agenda-grid::-webkit-scrollbar { display: none; }
    .agenda-card {
        flex: 0 0 85% !important; max-width: 85% !important; scroll-snap-align: center; 
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.1), opacity 0.4s ease;
        opacity: 0.55; transform: scale(0.9); position: relative; z-index: 1;
        padding-left: 0.5rem; padding-right: 0.5rem; cursor: pointer;
    }
    .agenda-card > .bg-white {
        min-height: 440px; border-radius: 1.5rem !important; display: flex; flex-direction: column;
    }
    .agenda-card .cover-container { border-radius: 1rem !important; height: 180px !important; }
    .agenda-card.center-focus { opacity: 1; transform: scale(1.05); z-index: 10; }
}