/*
Theme Name: Nova XS - Tema Optimizado
Description: Tema WordPress ultra-optimizado para máxima velocidad y rendimiento. Incluye lazy loading, minificación automática, y optimizaciones avanzadas de Core Web Vitals.
Version: 1.0.0
Author: ProtonDigital
Text Domain: nova-xs
Domain Path: /languages
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   RESET Y BASE STYLES
   ========================================================================== */

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

html {
    font-size: 16px;
    line-height: 1.6;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}

/* ==========================================================================
   TIPOGRAFÍA OPTIMIZADA
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: #007cba;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #005a87;
}

.seccion-h1 {
    font-size: 50px;
}

.subseccion-p {
    font-size: 22px;
}


/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-header {
    background: #FFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem 0;
    gap: 50px;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.main-navigation a {
    font-weight: 500;
    font-size: 1.3em;
    padding: 0.5rem 0;
    color:#000;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.main-navigation a:hover {
    border-color:#C8102E;
}

/* Selector de idiomas Polylang como dropdown */
.main-navigation .pll-parent-menu-item {
    position: relative;
}

.main-navigation .pll-parent-menu-item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-bottom: 0;
}

.main-navigation .pll-parent-menu-item img {
    display: block;
}

.main-navigation .pll-parent-menu-item > .sub-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    list-style: none;
    padding: 0.5rem 0.75rem;
    margin: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border-radius: 4px;
    display: none;
    z-index: 1100;
}

.main-navigation .pll-parent-menu-item:hover > .sub-menu,
.main-navigation .pll-parent-menu-item:focus-within > .sub-menu {
    display: block;
}

.main-navigation .pll-parent-menu-item .sub-menu li {
    margin: 0;
}

.main-navigation .pll-parent-menu-item .sub-menu a {
    border-bottom: 0;
    padding: 0.25rem 0;
}

/* Polylang: mostrar solo bandera del idioma alterno (sin dropdown) */
.main-navigation .pll-parent-menu-item > a {
    display: none;
}

.main-navigation .pll-parent-menu-item > .sub-menu {
    position: static;
    display: block;
    padding: 0;
    margin: 0;
    box-shadow: none;
    background: transparent;
}

.main-navigation .pll-parent-menu-item .lang-item.current-lang {
    display: none;
}

.main-navigation .pll-parent-menu-item .lang-item:not(.current-lang) {
    display: block;
}

.main-navigation .pll-parent-menu-item .lang-item:not(.current-lang) > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
}

/* Botón hamburguesa (oculto en escritorio) */
.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
}
.menu-toggle-box { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-toggle-bar { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   CONTENIDO PRINCIPAL
   ========================================================================== */

.site-main {
    min-height: 60vh;
}

.content-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .content-area {
        grid-template-columns: 2fr 1fr;
    }
}

/* ==========================================================================
   POSTS Y ARTÍCULOS
   ========================================================================== */

.post {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 2rem;
}

.post-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-content {
    padding: 1.5rem;
}

.post-title {
    margin-bottom: 1rem;
}

.post-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.post-excerpt {
    color: #555;
    line-height: 1.6;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    height: fit-content;
}

.widget {
    margin-bottom: 2rem;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #333;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: #0A3161;
    color: #fff;
    padding: 2rem 0;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.footer-column {
    flex: 1 1 250px;
}

.footer-column-1 {
    text-align: left;
}

.footer-column-2 {
    text-align: left;
}

.footer-column-3 {
    text-align: left;
}

.footer-navigation .footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-navigation .footer-menu li a {
    color: #fff;
}

.footer-navigation .footer-menu li a:hover {
    color: #ffdd57;
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
    .header-content { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; }
    .site-branding { margin-right: auto; }
    
    .main-navigation ul { flex-direction: column; gap: 1rem; text-align: center; }
    /* Mostrar el botón en móvil */
    .menu-toggle { display: inline-flex;         font-size: 24px; }
    /* Off-canvas desde la derecha */
    .main-navigation { position: fixed; top: 0; right: 0; bottom: 0; width: 80%; max-width: 320px; background: #ff9600; box-shadow: -6px 0 20px rgba(0,0,0,0.15); transform: translateX(100%); transition: transform .3s ease; z-index: 1001; padding-top: 72px; }
    .main-navigation.menu-open { transform: translateX(0); }
    /* Overlay */
    .menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 1000; }
    .main-navigation.menu-open + .menu-overlay { opacity: 1; visibility: visible; }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-column {
        width: 100%;
    }

    .foto_portada {
        width: 100%;
    }

    .foto_portada img {
        width: 100%;
    }

    .seccion-h1 {
        font-size: 40px;
    }

    .subseccion-p {
        font-size: 20px;
    }
}

/* ==========================================================================
   OPTIMIZACIONES DE RENDIMIENTO
   ========================================================================== */

/* Preload de fuentes críticas */
@font-face {
    font-family: 'System Font';
    font-display: swap;
}

/* Optimización de imágenes */
img {
    max-width: 100%;
    height: auto;
    loading: lazy;
}

/* Animaciones optimizadas */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */

:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   UTILIDADES Generales
   ========================================================================== */

.page-section {
    margin-top: 2rem;
    margin-bottom: 6rem;
}

/* Página de contacto: centrar y limitar ancho del formulario CF7 */
.contacto-cont .wpcf7 {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .contacto-cont .wpcf7 {
        max-width: 100%;
    }
}

.page-section .wpcf7 input[type=text], .page-section .wpcf7 input[type=tel], .page-section .wpcf7 input[type=email], .page-section .wpcf7 textarea{
    background-color: #e6ecfa;
    border-radius: 10px;
    border: none;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.page-section .wpcf7 input[type=submit]{
    background-color: #0A3161;
    color: #fff;
    border-radius: 50px;
    border: none;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
}


.mision-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.mision-item-left {
    flex: 1;
    background-color: #0A3161;
    color: #fff;
    border-radius: 10px;
}

.mision-item-right {
    flex: 1;
    background-color: #006341;
    color: #fff;
    border-radius: 10px;
}

.mision-item-left h2,
.mision-item-right h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.mision-item-left p,
.mision-item-right p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.mision-item-left {
    flex: 1.2;
    position: relative;
    z-index: 1;
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 40px;
}

.mision-item-right {
    flex: 1;
    position: relative;
    z-index: 2;
    margin-left: -4rem;
    padding: 20px;
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mesa-card {
    background-color: #0A3161;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 2rem;
}

.mesa-title{
    font-size: 2rem;
    margin-bottom: 1rem;
}

.resultados-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}
/* 4 columnas por row en instituciones-cont */
.instituciones-cont {
    display: flex;
    flex-wrap: wrap;          /* Permite que hagan filas automáticamente */
    gap: 10px; 
}

.instituciones-item {
    flex: 0 0 calc(25% - 10px);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
    border-radius: 8px;
    overflow: hidden;
}

.instituciones-item img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    padding: 15px;
}

.instituciones-item img:hover {
    filter: grayscale(0%);
}

.green-box-round {
    background-color: #006341;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
}

.individuo-card {
    position: relative;
    display: inline-block;
    margin: 1rem;
    text-align: center;
}

.individuo-photo img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #B31942
}

.individuo-info {
    margin-top: 0.75rem;
}

.individuo-nombre {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.individuo-escuela {
    font-size: 0.95rem;
}

.individuo-overlay {
    position: absolute;
    inset: 0;
    background: #b31942d8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.individuo-card:hover .individuo-overlay {
    opacity: 1;
    visibility: visible;
}

.individuo-overlay-content {
    color: #fff;
    text-align: center;
}

.individuo-social {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.individuo-social .red-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: transparent;
    color: transparent; /* ocultar texto */
    font-size: 0;       /* asegurar que el texto no influya en layout */
    text-decoration: none;
    overflow: hidden;
}

/* Iconos SVG embebidos en base64 por red social */
.red-facebook {
    background-color:#1877f2;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='transparent'/%3E%3Cpath fill='%23FFF' d='M18.5 11h-1.7c-1.37 0-1.73.56-1.73 1.62v1.88H14.3V17h0v2.33h1.74V21h2.16v-1.67h2.32l.32-2.33h-2.64v-2c0-.67.18-1.05 1.05-1.05h1.58V11h-2.01z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:70%;
}

.red-instagram {
    background-color:#E4405F;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='transparent'/%3E%3Crect x='9' y='9' width='14' height='14' rx='4' ry='4' fill='none' stroke='%23FFF' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23FFF'/%3E%3Ccircle cx='21' cy='11' r='1' fill='%23FFF'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:70%;
}

.red-linkedin {
    background-color:#0A66C2;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='transparent'/%3E%3Crect x='9' y='13' width='3' height='10' fill='%23FFF'/%3E%3Ccircle cx='10.5' cy='10' r='1.5' fill='%23FFF'/%3E%3Cpath fill='%23FFF' d='M14 13h3v1.3c.4-.8 1.2-1.5 2.5-1.5 1.9 0 3.5 1.3 3.5 4.1V23h-3v-5c0-1.2-.4-2-1.5-2-1 0-1.5.7-1.5 2v5h-3V13z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:70%;
}

.red-twitter {
    background-color:#000;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='transparent'/%3E%3Cpath fill='%23FFF' d='M22.5 11.2l-2.1.3A1.5 1.5 0 0021.4 10a3.1 3.1 0 00-3.35-.9A3.1 3.1 0 0016 13.41c0 .24.03.48.09.72-3.37-.2-4.87-1.14-6.8-2.92a.94.94 0 00.43 1.28c-.47-.02-.87-.15-1.26-.34v1c0 1.46.99 2.68 2.33 2.96a.87.87 0 01-.84.63c.22.68.83 1.17 1.58 1.19a2.99 2.99 0 01-1.8.63A2.83 2.83 0 0014 22.1a2.93 2.93 0 001.6.47c3.84 0 5.94-3.34 5.94-6.23v-.28c.4-.29.74-.63 1.01-1.02z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:70%;
}

.red-web {
    background-color:#006341;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='transparent'/%3E%3Ccircle cx='16' cy='16' r='12.5' fill='none' stroke='%23FFF' stroke-width='2'/%3E%3Cpath fill='%23FFF' d='M16 4c2.2 0 4.1 2.7 5.1 6.7H10.9C11.9 6.7 13.8 4 16 4zm0 24c-2.2 0-4.1-2.7-5.1-6.7h10.2C20.1 25.3 18.2 28 16 28z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:70%;
}

.icono-blanco {
    filter: invert(1);
}

@media (max-width: 768px) {
    .mision-cont {
        flex-direction: column;
    }
    .mision-item-right{
        margin-left: 0;
    }

    .mesa-card .mesa-icon{
        text-align: center;
    }
    .mesa-card .mesa-icon img{
        height: 180px;
        width: auto;
    }
}

@media (max-width: 435px) {

    .site-branding .site-logo img{
        height: 80px;
        width: auto;
    }

    .mision-cont {
        flex-direction: column;
    }

    .mision-item-right{
        margin-left: 0;
    }

    .mesa-card .mesa-icon{
        text-align: center;
    }
    .mesa-card .mesa-icon img{
        height: 180px;
        width: auto;
    }

    .page-section {
        margin-top: 2rem;
        margin-bottom: 3rem;
    }

    .instituciones-item{
        flex: 0 0 calc(50% - 10px);
    }

    .individuo-card{
        width: 45%;
    }
}