a{text-decoration-thickness:1px!important;text-underline-offset:.1em}:where(.wp-site-blocks :focus){outline-width:2px;outline-style:solid}.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child){margin-bottom:3px}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content{outline-offset:4px}.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content{outline-offset:0}blockquote,caption,figcaption,h1,h2,h3,h4,h5,h6,p{text-wrap:pretty}.more-link{display:block}:where(pre){overflow-x:auto}

/* --- ESTILOS PARA EL LISTADO DE PUBLICACIONES (ACORDEONES) --- */

/* Contenedor general */
.itagra-grid-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Los "cuadrados" de cada publicación */
.caja-publicacion {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Bordes redondeados */
    margin-bottom: 15px; /* Separación entre cajas */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra suave */
    overflow: hidden;
}

/* El título clicable (siempre visible) */
.caja-publicacion summary {
    padding: 20px;
    font-size: 1.2em;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
    list-style: none; /* Quita la flechita fea por defecto en algunos navegadores */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fcfcfc;
}

.caja-publicacion summary:hover {
    background-color: #f5f5f5;
    color: #2c5234;
}

/* Añadir un indicador visual de desplegable (+) */
.caja-publicacion summary::after {
    content: "▼";
    font-size: 0.8em;
    color: #666;
}
.caja-publicacion[open] summary::after {
    content: "▲";
}

/* El contenido del resumen (oculto hasta hacer clic) */
.contenido-desplegable {
    padding: 20px;
    border-top: 1px solid #eeeeee;
    line-height: 1.6;
    color: #555555;
}

/* Zona de botones dentro del desplegable */
.botones-sci {
    margin-top: 25px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Estilo de los botones */
.botones-sci a.btn-doi, 
.botones-sci a.btn-pdf {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: background 0.3s;
}

.botones-sci a.btn-doi {
    background-color: #0073aa;
    color: #ffffff;
}
.botones-sci a.btn-doi:hover {
    background-color: #005a88;
}

.botones-sci a.btn-pdf {
    background-color: #d9534f;
    color: #ffffff;
}
.botones-sci a.btn-pdf:hover {
    background-color: #c9302c;
}

/* --- NUEVO DISEÑO PREMIUM PARA EL DESPLEGABLE DE AÑOS --- */

/* Contenedor de cada año - REDUCIDO EL MARGEN INFERIOR AL MÍNIMO */
.itagra-grid-container .caja-ano {
    margin-bottom: 8px; /* Hueco pequeño y elegante entre años */
    border: none;
}

/* LA BARRA DEL AÑO (summary) - Convertida en un botón sólido */
.itagra-grid-container summary.ano-titulo {
    background-color: #2c5234; /* Verde ITAGRA */
    color: #ffffff; /* Texto blanco */
    padding: 15px 25px; /* Espaciado interno */
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px; /* Bordes redondeados */
    list-style: none; /* Quita flecha por defecto */
    display: flex;
    justify-content: space-between; /* Año izquierda, flecha derecha */
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
    transition: background-color 0.3s, transform 0.2s; /* Animación suave */
}

/* Evitar flecha fea en Safari/Chrome */
.itagra-grid-container summary.ano-titulo::-webkit-details-marker {
    display: none;
}

/* Efecto al pasar el ratón por encima (Hover) */
.itagra-grid-container summary.ano-titulo:hover {
    background-color: #3d7047; /* Un verde un poco más claro */
}

/* Efecto al hacer clic (Active) */
.itagra-grid-container summary.ano-titulo:active {
    transform: scale(0.98); /* Se hunde un poquito */
}

/* LA FLECHA PERSONALIZADA (usando ::after) */
.itagra-grid-container summary.ano-titulo::after {
    content: "\25BC"; /* Triángulo hacia abajo en Unicode */
    font-size: 0.7em;
    color: rgba(255,255,255,0.7); /* Blanco semitransparente */
    transition: transform 0.3s; /* Animación de rotación */
}

/* Cuando el año está ABIERTO [open] */
.itagra-grid-container .caja-ano[open] summary.ano-titulo {
    border-radius: 8px 8px 0 0; /* Redondeamos solo esquinas superiores */
}

/* Rotar la flecha hacia arriba cuando está abierto */
.itagra-grid-container .caja-ano[open] summary.ano-titulo::after {
    transform: rotate(180deg);
    color: #ffffff;
}

/* EL CONTENIDO INTERIOR (donde están las publicaciones) */
.itagra-grid-container .contenido-ano {
    background-color: #f9f9f9; /* Fondo gris muy clarito */
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-top: none; /* Engancha con la barra verde de arriba */
    border-radius: 0 0 8px 8px; /* Redondeamos esquinas inferiores */
}

/* --- ESTILOS PARA EL GRID DEL BLOG (TARJETAS) --- */
.itagra-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
}
.tarjeta-blog {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}
.tarjeta-blog:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.imagen-blog img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.contenido-tarjeta-blog {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.titulo-blog { margin: 0 0 10px 0; font-size: 1.2em; line-height: 1.3; }
.titulo-blog a { color: #333333; text-decoration: none; font-weight: bold; }
.titulo-blog a:hover { color: #58ad17; }
.fecha-blog { color: #999999; font-size: 0.9em; margin: 0 0 15px 0; text-transform: uppercase; }
.extracto-blog { color: #666666; font-size: 0.95em; line-height: 1.5; margin-bottom: 20px; flex-grow: 1; }
.leer-mas-blog { color: #58ad17; font-weight: bold; text-transform: uppercase; text-decoration: none; font-size: 0.9em; display: inline-block; margin-top: auto; }
.leer-mas-blog:hover { color: #3d7047; }

/* Obligar a la Fila a ser 50/50 y que las cajas tengan el mismo tamaño */
.fila-mitad-mitad {
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

.fila-mitad-mitad > * {
    flex: 1 1 50% !important;
    width: 50% !important;
    box-sizing: border-box;
}

/* Pa' que en celulares se ponga una arriba de la otra y no se aplasten */
@media (max-width: 768px) {
    .fila-mitad-mitad {
        flex-direction: column !important;
    }
    .fila-mitad-mitad > * {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}
/* Igualar tamaño y centrar los logos de ITAGRA */
.logos-itagra img {
    max-height: 75px !important; /* Fija un tope de altura para que ninguno destaque */
    width: auto !important; /* Respeta la proporción para que no se deformen */
    object-fit: contain; /* Encaja la foto perfectamente */
    margin: 0 auto !important; /* Fuerza el centrado horizontal absoluto */
    display: block;
}

/* Fuerza a las columnas a centrar todo verticalmente */
.logos-itagra .wp-block-column {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 1. La caja del submenú: fondo BLANCO y línea verde superior */
ul.wp-block-navigation__submenu-container {
    background-color: #ffffff !important; /* Fondo blanco limpio */
    border-top: 3px solid #8cc63f !important; /* Línea verde corporativa */
    box-shadow: 0 8px 15px rgba(0,0,0,0.08) !important; /* Sombra mucho más suave y elegante */
    border-radius: 0 0 4px 4px !important; 
    padding: 10px 0 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    min-width: 220px !important; 
}

/* 1.5 Aseguramos que los "huecos" de cada enlace ocupen todo el ancho */
ul.wp-block-navigation__submenu-container li.wp-block-navigation-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 2. Los enlaces por dentro: texto OSCURO y sin subrayado */
ul.wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
    color: #333333 !important; /* Gris oscuro casi negro para máxima legibilidad */
    padding: 12px 25px !important; 
    font-size: 0.95rem !important;
    text-decoration: none !important; 
    display: block !important; 
    width: 100% !important;
    box-sizing: border-box !important; 
    transition: all 0.3s ease-in-out !important; 
}

/* 3. El efecto hover al pasar el ratón: Letra verde y fondito sutil */
ul.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
    color: #8cc63f !important; /* La letra pasa a ser verde */
    background-color: #f8f9fa !important; /* Un gris muuuy clarito para resaltar el hover sin ser agresivo */
    text-decoration: none !important; 
    transform: translateX(6px) !important; /* Se mantiene el deslizamiento premium */
}
/* 4. Quitar el subrayado negro del menú principal al pasar el ratón o estar activo */
.wp-block-navigation-item__content,
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus,
.wp-block-navigation-item__content:active {
    text-decoration: none !important;
    outline: none !important; /* Quita también el recuadrito si haces clic */
}

/* Sombra para que el título se lea sobre CUALQUIER fondo */
.titulo-todoterreno {
    color: #ffffff !important; /* Mantenemos la letra blanca */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8) !important; 
    -webkit-text-stroke: 1.5px #ffffff !important; /* Engorda la letra pintándole un borde blanco de 1.5 píxeles */
    text-stroke: 1.5px #ffffff !important;
}
/* =======================================================
   CABECERA PROYECTOS: LOGO Y FECHAS (ACABADO PULIDO)
   ======================================================= */

/* 1. EL ANCLA: Obligamos a la cabecera a tener altura mínima siempre */
.itagra-hero-proyecto {
    position: relative !important;
    min-height: 400px !important; /* Ajusta este número según cuánta foto de fondo quieras ver */
}

/* 2. LA LLAVE: Textos en static para que la caja de fechas pueda bajar hasta el fondo real */
.itagra-hero-textos {
    position: static !important; 
    padding-right: 30px;
    margin-top: 80px !important;
}

/* 3. PROTECCIÓN ANTIFANTASMAS: Neutraliza los párrafos ocultos de WordPress */
.itagra-hero-textos p:has(.itagra-hero-fechas) {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === RECUADRO BLANCO EXTERIOR DEL LOGO === */
.itagra-hero-logo {
    background-color: #ffffff;
    padding: 15px !important; 
    width: 100%;
    max-width: 340px;
    margin: 80px auto 0 auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    border-radius: 12px !important; 
    transition: all 0.3s ease;
    border: none !important;
    position: relative; /* Mantiene el logo por encima del fondo */
}

/* === IMAGEN DEL LOGO === */
.itagra-hero-logo img {
    margin: 0 !important;
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 8px !important; 
}

/* Oculta la caja blanca entera si no hay logo */
.itagra-hero-logo:not(:has(img)) {
    display: none !important;
}

/* === CAJA EXTERIOR DE FECHAS (LIMPIA Y REDONDEADA) === */
.itagra-hero-fechas {
    position: absolute !important;
    bottom: 0 !important; /* Pegada abajo del todo */
    right: 0 !important;  /* Pegada a la derecha */
    z-index: 10;
    margin: 0 !important;
    
    background-color: #61a60e !important; 
    padding: 22px 35px !important; 
    box-shadow: -5px -5px 20px rgba(0,0,0,0.2);
    border-radius: 12px 0 0 0 !important; 
    border: none !important;
}

/* COMPORTAMIENTO DE LOS TEXTOS DE DENTRO */
.itagra-hero-fechas div,
.itagra-hero-fechas p,
.itagra-hero-fechas span {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important; 
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 16px !important;
    display: block !important;
}

/* Separación entre líneas de fecha */
.itagra-hero-fechas div:first-of-type {
    margin-bottom: 12px !important;
}

/* =======================================================
   RESPONSIVE (Móviles)
   ======================================================= */
@media (max-width: 768px) {
    .itagra-hero-proyecto {
        min-height: auto !important; /* En móvil dejamos que se adapte natural */
    }
    .itagra-hero-textos {
        margin-top: 40px !important;
    }
    .itagra-hero-logo {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    .itagra-hero-fechas {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 20px !important;
        display: flex;
        justify-content: flex-end;
        border-radius: 8px !important; 
    }
}

/* =======================================================
   DESTRUCTOR DE JAULAS DE GUTENBERG (Fondo de Cabecera)
   ======================================================= */

/* Quitamos el position: relative al contenedor invisible de Gutenberg 
   para que la caja de fechas pase de largo y caiga hasta el fondo de la foto */
.itagra-hero-proyecto .wp-block-cover__inner-container,
.itagra-hero-proyecto .wp-block-group__inner-container,
.wp-block-columns {
    position: static !important;
}

/* =======================================================
   EL BAZUCA: FORZAR A GUTENBERG A NO ENCOGERSE
   ======================================================= */

/* 1. Nos aseguramos de que el bloque Cover principal sea flexible */
.itagra-hero-proyecto {
    display: flex !important;
    min-height: 450px !important; /* Ajusta este valor a tu gusto */
}

/* 2. Obligamos a la "jaula" invisible de Gutenberg a estirarse al 100% de la altura.
   Así, el bottom: 0 de tu caja verde tocará el suelo de verdad. */
.itagra-hero-proyecto .wp-block-cover__inner-container,
.itagra-hero-proyecto .wp-block-group__inner-container {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    position: static !important;
}

/* 3. Aseguramos que la caja contenedora de los shortcodes no sea el problema */
.itagra-hero-proyecto .wp-block-group {
    position: static !important;
}

/* =======================================================
   SOLUCIÓN DEFINITIVA GUTENBERG (Caja de Fechas al fondo)
   ======================================================= */

/* 1. Al bloque Fondo (Cover) que contenga la caja de fechas, lo usamos de ancla maestra */
.wp-block-cover:has(.itagra-hero-fechas) {
    position: relative !important;
    min-height: 400px !important; /* Mantiene la foto estirada sin logo */
}

/* 2. Destruimos la "jaula" del contenedor interno de Gutenberg */
.wp-block-cover:has(.itagra-hero-fechas) .wp-block-cover__inner-container {
    position: static !important;
}

/* 3. Si por un casual los shortcodes están metidos en bloques Grupo o Columnas, los volvemos estáticos también */
.wp-block-group:has(.itagra-hero-fechas),
.wp-block-columns:has(.itagra-hero-fechas),
.wp-block-column:has(.itagra-hero-fechas) {
    position: static !important;
}

/* =======================================================
   SECCIÓN 2: FINANCIACIÓN (NUEVAS CAJAS DE LOGOS)
   ======================================================= */

/* Contenedor principal de toda la zona blanca */
.itagra-seccion-financiacion {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    background-color: #ffffff;
}

/* Ristra de logos centrados (flexbox mágico para alinearlos) */
.itagra-logos-financiacion {
    margin: 40px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Reducido de 40px a 20px para que las cajas queden más unidas */
}

/* TRUCO VITAL: WordPress mete etiquetas <p> o <a> alrededor de las fotos. 
   'display: contents' hace que Flexbox las ignore y alinee directo las cajas de imagen. */
.itagra-logos-financiacion p,
.itagra-logos-financiacion a {
    display: contents !important; 
}

/* LAS CAJITAS BLANCAS DE LOS LOGOS */
.itagra-logos-financiacion img {
    display: block !important;
    background-color: #ffffff !important; 
    padding: 15px !important; 
    border-radius: 8px !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; 
    border: 1px solid #f0f0f0 !important; 
    
    /* El tamaño fijo de la tarjeta (modifícalo a tu gusto) */
    width: 160px !important;
    height: 85px !important;
    
    /* Adapta la foto a la caja sin aplastarla ni estirarla */
    object-fit: contain !important; 
    
    margin: 0 !important;
    transition: transform 0.2s ease !important;
}

/* Efecto al pasar el ratón por los logos */
.itagra-logos-financiacion img:hover {
    transform: scale(1.05) !important;
}

/* Texto del Tipo de Convocatoria */
.itagra-texto-convocatoria {
    font-size: 16px;
    color: #444444;
    max-width: 1000px;
    margin: 0 auto 60px auto;
    line-height: 1.6;
}

/* Contenedor de las dos columnas para que no se estiren al 100% de la pantalla */
.itagra-financiacion-columnas {
    max-width: 800px; 
    margin: 0 auto !important;
}

/* Las cajitas blancas de los dineros con la sombra suave */
.itagra-caja-dinero {
    background-color: #ffffff !important;
    padding: 50px 20px !important; 
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important; 
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* --- AJUSTES PARA EL EFECTO HOVER --- */
    border: 0 !important; 
    border-top: 4px solid transparent !important; 
    transition: all 0.3s ease !important; 
}

/* Efecto al pasar el ratón (Hover) */
.itagra-caja-dinero:hover {
    border-top: 4px solid #61a60e !important; 
    box-shadow: 0 15px 45px rgba(0,0,0,0.1) !important; 
    transform: translateY(-2px); 
}

/* La clase para los números que suelta el shortcode */
.itagra-cifra {
    font-size: 16px;
    color: #333333;
    display: block;
    margin-top: 15px;
}

/* =======================================================
   RESPONSIVE (Móviles)
   ======================================================= */
@media (max-width: 768px) {
    .itagra-logos-financiacion {
        gap: 15px;
    }
    /* En móvil reducimos un poco el tamaño de las tarjetas de logo */
    .itagra-logos-financiacion img {
        width: 130px !important;
        height: 70px !important;
        padding: 10px !important;
    }
    .itagra-financiacion-columnas {
        display: block;
    }
    .itagra-caja-dinero {
        margin-bottom: 30px;
    }
}

/* =======================================================
   MAGIA PARA OCULTAR CAJAS VACÍAS
   ======================================================= */

/* 1. Si la ristra de logos no tiene ninguna imagen dentro, desaparece del todo */
.itagra-logos-financiacion:not(:has(img)) {
    display: none !important;
    margin: 0 !important;
}

/* 2. Si la caja de dinero no recibe el número (la clase .itagra-cifra), se oculta entera */
.itagra-caja-dinero:not(:has(.itagra-cifra)) {
    display: none !important;
}

/* 3. Si el tipo de convocatoria está vacío, no deja huecos en blanco */
.itagra-texto-convocatoria:empty {
    display: none !important;
    margin: 0 !important;
}

/* =======================================================
   SECCIÓN 3: DESCRIPCIÓN DEL PROYECTO (COMPACTO Y BLINDADO)
   ======================================================= */

/* Contenedor principal (Fondo crema, menos padding) */
.itagra-seccion-descripcion {
    background-color: #f5f4ef;
    padding: 60px 20px; 
    text-align: center; 
}

/* El contenedor del texto (Más ancho para que ocupe menos alto) */
.itagra-contenido-descripcion {
    max-width: 900px; 
    margin: 30px auto 0 auto; 
    text-align: left; 
}

/* Estilo para los párrafos (Más juntos, compactos y oscuros) */
.itagra-contenido-descripcion p {
    color: #444444 !important; 
    font-size: 15px !important; /* Tamaño compacto premium */
    line-height: 1.5 !important; 
    margin-bottom: 14px !important; 
    font-weight: 400; 
}

/* CORRECCIÓN EXCLUSIVA: Listas oscuras y compactas solo en la descripción */
.itagra-contenido-descripcion ul li,
.itagra-contenido-descripcion ol li {
    color: #444444 !important; 
    font-size: 15px !important; /* Letra más pequeña y elegante */
    line-height: 1.4 !important; /* Líneas más juntas */
    margin-bottom: 4px !important; /* Puntos de lista más compactos */
}

/* CORRECCIÓN EXCLUSIVA: Centrar imágenes sueltas solo dentro de la descripción */
.itagra-contenido-descripcion p img {
    display: block !important;
    margin: 30px auto !important; 
    max-width: 100% !important;   
    height: auto !important;
    border-radius: 8px !important; 
}

.itagra-contenido-descripcion p:has(img) {
    text-align: center !important;
}

/* MAGIA PARA OCULTAR LA SECCIÓN SI ESTÁ VACÍA */
.itagra-seccion-descripcion:not(:has(.itagra-contenido-descripcion p, .itagra-contenido-descripcion ul, .itagra-contenido-descripcion ol)) {
    display: none !important;
}

/* RESPONSIVE (Móviles) */
@media (max-width: 768px) {
    .itagra-seccion-descripcion {
        padding: 40px 20px;
    }
    .itagra-contenido-descripcion {
        margin-top: 25px;
    }
}


/* =======================================================
   SECCIÓN 4: OBJETIVOS Y RESULTADOS (TEXTOS BLANCOS)
   ======================================================= */

/* Contenedor principal (El padding para el fondo oscuro) */
.itagra-seccion-metas {
    padding: 80px 20px !important;
    text-align: center;
}

/* Limitamos el ancho del texto para que no sea infinito */
.itagra-contenido-metas {
    max-width: 900px;
    margin: 0 auto;
    text-align: left; 
}

/* Estilo para los Títulos Verdes ("OBJETIVOS" / "RESULTADOS ESPERADOS") */
.itagra-bloque-objetivos h2,
.itagra-bloque-resultados h2,
.itagra-bloque-objetivos h3,
.itagra-bloque-resultados h3 {
    color: #61a60e !important; 
    text-align: center !important;
    text-transform: uppercase !important;
    font-size: 22px !important; 
    font-weight: 800 !important; 
    letter-spacing: 1.5px !important; 
    margin-bottom: 30px !important; 
    margin-top: 50px !important; 
}

/* Estilos para el texto blanco y las listas que suelta el shortcode en el fondo oscuro */
.itagra-bloque-objetivos p,
.itagra-bloque-resultados p,
.itagra-bloque-objetivos ul,
.itagra-bloque-resultados ul,
.itagra-bloque-objetivos li,
.itagra-bloque-resultados li {
    color: #ffffff !important; /* Totalmente blanco para legibilidad */
    font-size: 16px;
    line-height: 1.8;
}

/* Estilo específico para separar las viñetas */
.itagra-bloque-objetivos ul,
.itagra-bloque-resultados ul {
    margin-bottom: 30px;
    padding-left: 20px;
}

.itagra-bloque-objetivos li,
.itagra-bloque-resultados li {
    margin-bottom: 12px; 
}

/* MAGIA PARA OCULTAR BLOQUES VACÍOS */
.itagra-bloque-objetivos:not(:has(p, ul, ol)) {
    display: none !important;
}

.itagra-bloque-resultados:not(:has(p, ul, ol)) {
    display: none !important;
}

.itagra-seccion-metas:not(:has(p, ul, ol)) {
    display: none !important;
}

/* RESPONSIVE (Móviles) */
@media (max-width: 768px) {
    .itagra-seccion-metas {
        padding: 50px 20px !important;
    }
    .itagra-bloque-objetivos h2,
    .itagra-bloque-resultados h2 {
        font-size: 16px !important;
    }
}

/* =======================================================
   SECCIÓN 5: SOCIOS DEL PROYECTO (CENTRADO)
   ======================================================= */

.itagra-seccion-socios {
    padding: 80px 20px;
    background-color: #ffffff; 
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; /* Títulos centrados */
}

/* El contenedor flexbox */
.itagra-logos-socios {
    margin-top: 40px;
    display: flex !important;
    flex-wrap: wrap !important;
    /* VOLVEMOS AL CENTRO */
    justify-content: center !important; 
    align-items: center !important;
    gap: 20px !important;
}

/* Enlaces limpios */
.itagra-logos-socios a {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* Tarjetas */
.itagra-logos-socios img {
    display: block !important;
    background-color: #ffffff !important;
    padding: 15px 20px !important; 
    border-radius: 8px !important; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important; 
    
    width: 180px !important; 
    height: 90px !important; 
    object-fit: contain !important; 
    
    margin: 0 !important;
    border: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.itagra-logos-socios img:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
}

/* Ocultar sección si está vacía */
.itagra-seccion-socios:not(:has(.itagra-logos-socios img)) {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .itagra-seccion-socios {
        padding: 50px 20px;
    }
    .itagra-logos-socios {
        gap: 15px !important;
    }
    .itagra-logos-socios img {
        width: calc(50% - 10px) !important;
        height: 80px !important;
        padding: 10px !important;
    }
}

/* =======================================================
   SECCIÓN 6: MÁS INFORMACIÓN (URL)
   ======================================================= */

.itagra-seccion-info {
    background-color: #f5f4ef; /* Mismo crema de la descripción */
    padding: 60px 20px;
    text-align: center;
}

/* El bloque del enlace */
.itagra-link-info {
    margin-top: 30px !important;
}

/* Estilo para que la URL se vea profesional */
.itagra-link-info a {
    color: #61a60e !important;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 10px 20px;
    border: 2px solid #61a60e;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Efecto hover */
.itagra-link-info a:hover {
    background-color: #61a60e;
    color: #ffffff !important;
}

/* =======================================================
   MAGIA PARA OCULTAR LA SECCIÓN SI NO HAY URL
   ======================================================= */

/* Si el bloque del link está vacío, oculta toda la sección */
.itagra-seccion-info:not(:has(.itagra-link-info a)) {
    display: none !important;
}

/* =======================================================
   SECCIÓN 6: MÁS INFORMACIÓN (EXTREMADAMENTE COMPACTO)
   ======================================================= */

.itagra-seccion-info {
    background-color: #f5f4ef; 
    padding: 20px 20px !important; /* Mínimo relleno exterior */
    text-align: center;
}

/* Eliminamos el margen inferior por defecto del título para que no empuje el botón */
.itagra-seccion-info h2,
.itagra-seccion-info h3 {
    margin-bottom: 10px !important; 
}

/* El bloque del enlace prácticamente pegado al título */
.itagra-link-info {
    margin-top: 5px !important; 
}

/* Estilo para que la URL se vea profesional */
.itagra-link-info a {
    color: #61a60e !important;
    font-size: 16px; 
    font-weight: 600;
    text-decoration: none !important;
    padding: 6px 14px; /* Botón aún más recogido */
    border: 2px solid #61a60e;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Efecto hover */
.itagra-link-info a:hover {
    background-color: #61a60e;
    color: #ffffff !important;
}

/* =======================================================
   MAGIA PARA OCULTAR LA SECCIÓN SI NO HAY URL
   ======================================================= */
.itagra-seccion-info:not(:has(.itagra-link-info a)) {
    display: none !important;
}

/* =======================================================
   SECCIÓN 7: GALERÍA DE IMÁGENES (DISEÑO BLINDADO)
   ======================================================= */

.itagra-seccion-galeria {
    padding: 80px 20px;
    background-color: #ffffff; 
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.itagra-seccion-galeria h2,
.itagra-seccion-galeria h3 {
    color: #61a60e; 
    margin-bottom: 40px !important;
}

/* EL CONTENEDOR DEL GRID */
.itagra-galeria-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 25px !important; 
    justify-content: center !important; 
}

/* EL TRUCO DEFINITIVO: Borramos visualmente los envoltorios que mete WordPress.
   Esto obliga al Grid a actuar directamente sobre las imágenes, saltándose 
   los divs, figures y enlaces que rompen el diseño. */
.itagra-galeria-grid div,
.itagra-galeria-grid figure,
.itagra-galeria-grid dl,
.itagra-galeria-grid dt,
.itagra-galeria-grid dd,
.itagra-galeria-grid a,
.itagra-galeria-grid p {
    display: contents !important;
}

/* ESTILO DEFINITIVO DE LAS IMÁGENES */
.itagra-galeria-grid img {
    width: 100% !important;
    height: 200px !important; 
    object-fit: cover !important; 
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    margin: 0 !important; /* Quitamos márgenes residuales de WP */
}

.itagra-galeria-grid img:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.itagra-seccion-galeria:not(:has(.itagra-galeria-grid img)) {
    display: none !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .itagra-galeria-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 15px !important;
    }
    .itagra-galeria-grid img {
        height: 150px !important; 
    }
}

.boton-iteaf {
    background-color: transparent !important;
    color: #61a60e !important;
    /* Borde invisible para que el botón no cambie de tamaño al hacer hover */
    border: 1px solid transparent !important;
    border-radius: 10px; 
    transition: border-color 0.3s ease !important;
}

.boton-iteaf:hover {
    /* Al pasar el ratón, el borde invisible se vuelve verde */
    border-color: #61a60e !important; 
}

/* 1. La caja principal (Estado cerrado) */
.acordeon-verde {
    background-color: #333333 !important;
    border-top: 2px solid #61a60e !important;
    border-bottom: 2px solid #61a60e !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
    border-radius: 4px !important;

    /* El freno: altura fija inicial y ocultar el resto */
    max-height: 90px !important; 
    overflow: hidden !important;
    transition: max-height 0.5s ease-in-out !important; 
}

/* 2. La caja principal (Estado abierto) */
.acordeon-verde[open] {
    max-height: 1000px !important; /* Espacio gigante para que baje el fondo */
}

/* 3. El título interactivo */
.acordeon-verde summary {
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    outline: none !important;
}

/* 4. Separación del texto interior */
.acordeon-verde[open] div, 
.acordeon-verde[open] p, 
.acordeon-verde[open] ul {
    margin-top: 15px !important;
}
.texto-intro {
    color: #ffffff !important;
    font-weight: 700 !important; /* Letra bien gordita para que destaque el borde */
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
    /* LA PISTA: Desplazamiento Horizontal, Desplazamiento Vertical, Difuminado, Color */
    text-shadow: 3px 3px 0px #61a60e !important;
}
/* 1. Transformar los enlaces del pie de foto en botones */
.galeria-equipo figcaption a {
    display: inline-block !important; 
    width: auto !important; 
    background-color: #61a60e !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px !important; 
    padding: 8px 16px !important; 
    border-radius: 3px !important; 
    margin: 4px !important; 
    transition: background-color 0.3s ease !important;
}

/* 2. El efecto al pasar el ratón (Hover) */
.galeria-equipo figcaption a:hover {
    background-color: #333333 !important;
}

/* 1. Volvemos transparente la caja externa para quitar el cuadrado verde feo */
.boton-verde-ancho {
    background-color: transparent !important;
    padding: 0 !important;
}

/* 2. Le aplicamos tu diseño directamente al enlace (el botón real) */
.boton-verde-ancho a,
.boton-verde-ancho .wp-block-button__link {
    display: inline-block !important;
    background-color: #61a60e !important; /* Tu verde corporativo */
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 12px 30px !important; 
    border-radius: 6px !important; 
    font-size: 18px !important;
    font-weight: normal !important; 
    border: none !important;
    text-align: center !important;
    transition: background-color 0.3s ease !important;
}

/* 3. Efecto hover */
.boton-verde-ancho a:hover,
.boton-verde-ancho .wp-block-button__link:hover {
    background-color: #333333 !important;
}

/* 1. Forzamos a que todas las cajas de la galería sean idénticas */
.galeria-logos .wp-block-image {
    height: 140px !important; /* Altura fija para que todas las filas sean iguales */
    display: flex !important;
    align-items: center !important; /* Centra el logo verticalmente */
    justify-content: center !important; /* Centra el logo horizontalmente */
    background-color: #ffffff !important; /* Fondo blanco para homogeneizar */
    border: 1px solid #eeeeee !important; /* Un bordecito gris muy suave opcional */
    padding: 15px !important; /* Margen interior para que el logo respire */
    border-radius: 8px !important;
}

/* 2. Evitamos el recorte y obligamos a la imagen a encajar entera */
.galeria-logos .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* LA CLAVE: Muestra la imagen entera sin importar su forma */
    margin: 0 !important;
}