/*
====================================================================
 DRUPAL NODE CSS FRAMEWORK
====================================================================

 Framework CSS reutilizable para micrositios Drupal.

 PRINCIPIOS
 - Scopeado mediante .node-scope
 - Sin reset global
 - Desktop First
 - Compatible con Drupal + Bootstrap
 - Componentes reutilizables
 - Variables CSS para tematización
 - Responsive organizado por breakpoints
 - Los overrides específicos de cada nodo quedan al final

====================================================================
 ÍNDICE
====================================================================

 01. CONFIGURACIÓN
 02. VARIABLES / DESIGN TOKENS
 03. CONTEXTO DRUPAL
 04. TIPOGRAFÍA
 05. CONTENEDORES
 06. UTILIDADES
 07. COLORES
 08. LISTAS
 09. FLEXBOX
 10. GRID

 11. NAVEGACIÓN
 12. HERO IMAGE
 13. BANNERS
 14. IMÁGENES
 15. FEATURES
 16. CARDS
 17. PARTNERS / LOGOS
 18. LISTADOS / PROGRAMACIÓN
 19. EVENTOS
 20. TIMELINE

 21. MENSAJES
 22. READ MORE
 23. TABS
 24. ACORDEONES
 25. GALERÍA
 26. TICKER
 27. CONTACTO
 28. TABLAS
 29. MODALES

 30. BOTONES
 31. FORMULARIOS
 32. INSTAGRAM / EMBEDS

 33. RESPONSIVE
     33.1 Desktop XL
     33.2 Desktop
     33.3 Laptop
     33.4 Tablet
     33.5 Mobile
     33.6 Mobile pequeño

 34. OVERRIDES ESPECÍFICOS DE NODO
 35. INFO RELEVANTE / STATS
 36. EXPLORA POR CATEGORÍA
 37. PUBLICACIONES RECIENTES
 38. BANNER DESAFÍO TERRITORIAL
 39. PROYECTOS
 40. BARRA EQUIPO (CTA)
 41. PROCESS STEPS
 42. ICON CARD
 43. CONTACT ASIDE
 44. MODAL PERFIL DE EQUIPO


====================================================================
*/

/* ================================================================
   01. CONFIGURACIÓN
================================================================ */

/*
 * Importación de fuentes.
 * Si Drupal ya carga estas fuentes globalmente, esta línea puede
 * eliminarse para evitar una segunda petición.
 */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* ================================================================
   02. VARIABLES / DESIGN TOKENS
================================================================ */

.node-scope {
    /* ---------- Colores ---------- */

    --color-primary: #841D66;
    /* Los tokens "-dark" / "-extra-dark" de abajo existen para que todo
       boton de relleno tenga un hover con token propio: el hover es el
       mismo tono con L* x 0.85, no un hex suelto. Siguen el sufijo que
       ya usaba --color-gray-extra-light. */
    --color-primary-dark: #701957;
    --color-secondary: #FACAFB;
    --color-accent: #E1A4B1;

    --color-text: #323232;
    --color-text-dark: #2A2A2A;
    --color-muted: #6B7280;
    --color-muted-dark: #5B616D;
    --color-border: #E5E7EB;

    --color-bg: linear-gradient(180deg,
            rgba(32, 39, 53, 1) 69%,
            rgba(76, 96, 121, 1) 100%);

    --color-subtitle: #594727;
    --color-subtitle-dark: #4C3C21;

    --color-red-light: #DEA6AE;
    --color-red-dark: #AC0000;
    --color-red-extra-dark: #920000;

    --color-purple: #C8127C;
    --color-purple-light: #EBE1FA;
    --color-purple-dark: #870d54;
    --color-purple-extra-dark: #730B47;

    --color-green-light: #F2F7F4;
    --color-green-dark: #006A31;
    --color-green-extra-dark: #005A2A;
    --color-green-forest: #0A3909;
    --color-green-forest-dark: #093008;
    --color-green-leaf: #2D5A27;
    --color-green-leaf-dark: #264C21;
    --color-green-fresh: #BCF0AE;
    --color-green-pale: #E1EDDE;

    --color-blue-green: #3FAE95;
    --color-blue-green-light: #8ECBB8;
    /* #2E8F78 cae justo entre --color-blue-green (#3FAE95) y
       --color-blue-green-dark (#0F685E): es el eslabon que le
       faltaba a la escala. El nombre sin sufijo sigue siendo el
       ancla, como en gray, purple, brown y gold. */
    --color-blue-green-medium: #2E8F78;
    --color-blue-green-dark: #0F685E;
    --color-blue-green-extra-dark: #0D5850;

    --color-gray-light: #EEEEEE;
    --color-gray-dark: #575757;
    --color-gray-extra-light: #F9F9F9;
    --color-gray-extra-dark: #4A4A4A;

    --color-blue-dark: #18294C;
    --color-blue-extra-dark: #142341;

    --color-white: #FFFFFF;

    --color-cream: #FCF5F0;
    --color-gray: #707070;
    --color-brown: #8C5E35;
    --color-brown-dark: #4B2803;
    --color-brown-extra-dark: #402203;
    --color-peach-light: #FFEEE2;
    --color-off-white: #F9F9F7;
    --color-charcoal: #2F3130;
    --color-charcoal-dark: #282A29;
    --color-gold: #F2B705;
    --color-gold-dark: #3F2E00;
    --color-gold-extra-dark: #362700;
    --color-cream-light: #FFEFD4;


    /* ---------- Tipografía ---------- */

    --font-base: 'Carlito', sans-serif;
    --font-heading: 'Roboto', sans-serif;
    --font-display: 'Bodoni Moda', serif;

    --fs-base: 1rem;
    --fs-xs: 20px;
    --fs-sm: 24px;
    --fs-lg: 28px;
    --fs-xl: 2rem;
    --fs-2xl: 40px;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;


    /* ---------- Espaciado ---------- */

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* ---------- Margenes ---------- */

    --margin-xs: 0.25rem;
    --margin-sm: 0.5rem;
    --margin-md: 1rem;
    --margin-lg: 2rem;
    --margin-xl: 3rem;

    /* ---------- Bordes ---------- */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;


    /* ---------- Layout ---------- */

    --container-max: 1200px;


    /* ---------- Base ---------- */

    font-family: var(--font-base);
    font-size: var(--fs-base);
    color: var(--color-text);
}


/* ================================================================
   03. CONTEXTO DRUPAL
================================================================ */

/*
 * Estos estilos afectan únicamente al contexto del nodo.
 * No utilizar selectores globales para componentes del micrositio.
 */

/* Carousel flechas */
.carousel-control-next,
.carousel-control-prev {
    position: absolute !important;

}

.node-scope hr {
    margin: .5rem 0;
    color: inherit;
    background-color: var(--color-gold);
    border: 0;
    opacity: 1;
    height: 3px;
}

.node-scope hr:not([size]) {
    height: 3px;
}

.node-scope {
    width: 100%;
}

.main,
.main-fluid {
    margin-top: 111px;

    background-size: 90% !important;
    background-position: left center !important;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
}


/* Layouts Drupal */

.node-scope.layout-twocol.layout-twocol-33-67 .layout-content {
    grid-template-columns: 31% 69%;
}

@media (min-width: 768px) {
    .node-scope.layout-twocol.layout-twocol-67-33 .layout-content {
        grid-template-columns: 63% 37%;
    }
}


/* Scroll offset para navegación interna */

.node-scope .layout[id] {
    scroll-margin-top: 500px;
}

.node-scope #requisitos {
    scroll-margin-top: 400px;
}


/* ================================================================
   04. TIPOGRAFÍA
================================================================ */

.node-scope h1,
.node-scope h2,
.node-scope h3,
.node-scope h4,
.node-scope h5,
.node-scope h6,
.node-scope .h1,
.node-scope .h2,
.node-scope .h3,
.node-scope .h4,
.node-scope .h5,
.node-scope .h6 {
    font-family: var(--font-heading);
    margin-bottom: .5rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

.node-scope h1 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    /* ~32–40px */
}

.node-scope h2 {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    /* ~24–30px */
}

.node-scope h3 {
    font-size: 1.25rem;
    /* 20px: canonico en este proyecto */
}

.node-scope h4,
.node-scope .h4 {
    font-size: 1.125rem;
    /* 18px */
}

.node-scope h5,
.node-scope .h5 {
    font-size: 1rem;
    /* 16px */
}

.node-scope h6,
.node-scope .h6 {
    font-size: 0.875rem;
    /* 14px */
}

.node-scope p {
    color: var(--color-text);
    line-height: 1.2;
    font-size: 1.125rem;
}

.node-scope small {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.node-scope .title {
    font-size: clamp(2rem, 5vw, 50px) !important;
    margin-bottom: 0;
}

.node-scope .subtitle {
    font-size: clamp(2rem, 5vw, 25px) !important;
    font-family: var(--font-base) !important;
}

.node-scope .cta-title {
    font-family: var(--font-display);
}

.node-scope .strong-primary {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}


/* ================================================================
   05. CONTENEDORES
================================================================ */


.node-scope .section {
    padding-block: var(--space-lg);
}

.node-scope .bg-gray-extra-light {
    background-color: #F9F9F9 !important;
}

.node-scope .bgc-white .layout-content,
.bgc-white .layout-content {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    padding: 1rem;
}


/* ================================================================
   06. UTILIDADES
================================================================ */

/* ---------- Margenes (estilo Bootstrap, scoped) ---------- */
/* Tamagnos: 0=0 . 1=.25 . 2=.5 . 3=1 . 4=2 . 5=3rem . auto (tokens --margin-*) */
/* Propiedades: m, mt, me (inline-end), mb, ms (inline-start), mx, my */
/* Breakpoints (min-width): base + sm 576 . md 768 . lg 992 . xl 1200 . xxl 1400 */

.node-scope .m-0 {
    margin: 0 !important;
}

.node-scope .m-1 {
    margin: var(--margin-xs) !important;
}

.node-scope .m-2 {
    margin: var(--margin-sm) !important;
}

.node-scope .m-3 {
    margin: var(--margin-md) !important;
}

.node-scope .m-4 {
    margin: var(--margin-lg) !important;
}

.node-scope .m-5 {
    margin: var(--margin-xl) !important;
}

.node-scope .m-auto {
    margin: auto !important;
}

.node-scope .mt-0 {
    margin-top: 0 !important;
}

.node-scope .mt-1 {
    margin-top: var(--margin-xs) !important;
}

.node-scope .mt-2 {
    margin-top: var(--margin-sm) !important;
}

.node-scope .mt-3 {
    margin-top: var(--margin-md) !important;
}

.node-scope .mt-4 {
    margin-top: var(--margin-lg) !important;
}

.node-scope .mt-5 {
    margin-top: var(--margin-xl) !important;
}

.node-scope .mt-auto {
    margin-top: auto !important;
}

.node-scope .me-0 {
    margin-inline-end: 0 !important;
}

.node-scope .me-1 {
    margin-inline-end: var(--margin-xs) !important;
}

.node-scope .me-2 {
    margin-inline-end: var(--margin-sm) !important;
}

.node-scope .me-3 {
    margin-inline-end: var(--margin-md) !important;
}

.node-scope .me-4 {
    margin-inline-end: var(--margin-lg) !important;
}

.node-scope .me-5 {
    margin-inline-end: var(--margin-xl) !important;
}

.node-scope .me-auto {
    margin-inline-end: auto !important;
}

.node-scope .mb-0 {
    margin-bottom: 0 !important;
}

.node-scope .mb-1 {
    margin-bottom: var(--margin-xs) !important;
}

.node-scope .mb-2 {
    margin-bottom: var(--margin-sm) !important;
}

.node-scope .mb-3 {
    margin-bottom: var(--margin-md) !important;
}

.node-scope .mb-4 {
    margin-bottom: var(--margin-lg) !important;
}

.node-scope .mb-5 {
    margin-bottom: var(--margin-xl) !important;
}

.node-scope .mb-auto {
    margin-bottom: auto !important;
}

.node-scope .ms-0 {
    margin-inline-start: 0 !important;
}

.node-scope .ms-1 {
    margin-inline-start: var(--margin-xs) !important;
}

.node-scope .ms-2 {
    margin-inline-start: var(--margin-sm) !important;
}

.node-scope .ms-3 {
    margin-inline-start: var(--margin-md) !important;
}

.node-scope .ms-4 {
    margin-inline-start: var(--margin-lg) !important;
}

.node-scope .ms-5 {
    margin-inline-start: var(--margin-xl) !important;
}

.node-scope .ms-auto {
    margin-inline-start: auto !important;
}

.node-scope .mx-0 {
    margin-inline: 0 !important;
}

.node-scope .mx-1 {
    margin-inline: var(--margin-xs) !important;
}

.node-scope .mx-2 {
    margin-inline: var(--margin-sm) !important;
}

.node-scope .mx-3 {
    margin-inline: var(--margin-md) !important;
}

.node-scope .mx-4 {
    margin-inline: var(--margin-lg) !important;
}

.node-scope .mx-5 {
    margin-inline: var(--margin-xl) !important;
}

.node-scope .mx-auto {
    margin-inline: auto !important;
}

.node-scope .my-0 {
    margin-block: 0 !important;
}

.node-scope .my-1 {
    margin-block: var(--margin-xs) !important;
}

.node-scope .my-2 {
    margin-block: var(--margin-sm) !important;
}

.node-scope .my-3 {
    margin-block: var(--margin-md) !important;
}

.node-scope .my-4 {
    margin-block: var(--margin-lg) !important;
}

.node-scope .my-5 {
    margin-block: var(--margin-xl) !important;
}

.node-scope .my-auto {
    margin-block: auto !important;
}

@media (min-width: 576px) {
    .node-scope .m-sm-0 {
        margin: 0 !important;
    }

    .node-scope .m-sm-1 {
        margin: var(--margin-xs) !important;
    }

    .node-scope .m-sm-2 {
        margin: var(--margin-sm) !important;
    }

    .node-scope .m-sm-3 {
        margin: var(--margin-md) !important;
    }

    .node-scope .m-sm-4 {
        margin: var(--margin-lg) !important;
    }

    .node-scope .m-sm-5 {
        margin: var(--margin-xl) !important;
    }

    .node-scope .m-sm-auto {
        margin: auto !important;
    }

    .node-scope .mt-sm-0 {
        margin-top: 0 !important;
    }

    .node-scope .mt-sm-1 {
        margin-top: var(--margin-xs) !important;
    }

    .node-scope .mt-sm-2 {
        margin-top: var(--margin-sm) !important;
    }

    .node-scope .mt-sm-3 {
        margin-top: var(--margin-md) !important;
    }

    .node-scope .mt-sm-4 {
        margin-top: var(--margin-lg) !important;
    }

    .node-scope .mt-sm-5 {
        margin-top: var(--margin-xl) !important;
    }

    .node-scope .mt-sm-auto {
        margin-top: auto !important;
    }

    .node-scope .me-sm-0 {
        margin-inline-end: 0 !important;
    }

    .node-scope .me-sm-1 {
        margin-inline-end: var(--margin-xs) !important;
    }

    .node-scope .me-sm-2 {
        margin-inline-end: var(--margin-sm) !important;
    }

    .node-scope .me-sm-3 {
        margin-inline-end: var(--margin-md) !important;
    }

    .node-scope .me-sm-4 {
        margin-inline-end: var(--margin-lg) !important;
    }

    .node-scope .me-sm-5 {
        margin-inline-end: var(--margin-xl) !important;
    }

    .node-scope .me-sm-auto {
        margin-inline-end: auto !important;
    }

    .node-scope .mb-sm-0 {
        margin-bottom: 0 !important;
    }

    .node-scope .mb-sm-1 {
        margin-bottom: var(--margin-xs) !important;
    }

    .node-scope .mb-sm-2 {
        margin-bottom: var(--margin-sm) !important;
    }

    .node-scope .mb-sm-3 {
        margin-bottom: var(--margin-md) !important;
    }

    .node-scope .mb-sm-4 {
        margin-bottom: var(--margin-lg) !important;
    }

    .node-scope .mb-sm-5 {
        margin-bottom: var(--margin-xl) !important;
    }

    .node-scope .mb-sm-auto {
        margin-bottom: auto !important;
    }

    .node-scope .ms-sm-0 {
        margin-inline-start: 0 !important;
    }

    .node-scope .ms-sm-1 {
        margin-inline-start: var(--margin-xs) !important;
    }

    .node-scope .ms-sm-2 {
        margin-inline-start: var(--margin-sm) !important;
    }

    .node-scope .ms-sm-3 {
        margin-inline-start: var(--margin-md) !important;
    }

    .node-scope .ms-sm-4 {
        margin-inline-start: var(--margin-lg) !important;
    }

    .node-scope .ms-sm-5 {
        margin-inline-start: var(--margin-xl) !important;
    }

    .node-scope .ms-sm-auto {
        margin-inline-start: auto !important;
    }

    .node-scope .mx-sm-0 {
        margin-inline: 0 !important;
    }

    .node-scope .mx-sm-1 {
        margin-inline: var(--margin-xs) !important;
    }

    .node-scope .mx-sm-2 {
        margin-inline: var(--margin-sm) !important;
    }

    .node-scope .mx-sm-3 {
        margin-inline: var(--margin-md) !important;
    }

    .node-scope .mx-sm-4 {
        margin-inline: var(--margin-lg) !important;
    }

    .node-scope .mx-sm-5 {
        margin-inline: var(--margin-xl) !important;
    }

    .node-scope .mx-sm-auto {
        margin-inline: auto !important;
    }

    .node-scope .my-sm-0 {
        margin-block: 0 !important;
    }

    .node-scope .my-sm-1 {
        margin-block: var(--margin-xs) !important;
    }

    .node-scope .my-sm-2 {
        margin-block: var(--margin-sm) !important;
    }

    .node-scope .my-sm-3 {
        margin-block: var(--margin-md) !important;
    }

    .node-scope .my-sm-4 {
        margin-block: var(--margin-lg) !important;
    }

    .node-scope .my-sm-5 {
        margin-block: var(--margin-xl) !important;
    }

    .node-scope .my-sm-auto {
        margin-block: auto !important;
    }
}

@media (min-width: 768px) {
    .node-scope .m-md-0 {
        margin: 0 !important;
    }

    .node-scope .m-md-1 {
        margin: var(--margin-xs) !important;
    }

    .node-scope .m-md-2 {
        margin: var(--margin-sm) !important;
    }

    .node-scope .m-md-3 {
        margin: var(--margin-md) !important;
    }

    .node-scope .m-md-4 {
        margin: var(--margin-lg) !important;
    }

    .node-scope .m-md-5 {
        margin: var(--margin-xl) !important;
    }

    .node-scope .m-md-auto {
        margin: auto !important;
    }

    .node-scope .mt-md-0 {
        margin-top: 0 !important;
    }

    .node-scope .mt-md-1 {
        margin-top: var(--margin-xs) !important;
    }

    .node-scope .mt-md-2 {
        margin-top: var(--margin-sm) !important;
    }

    .node-scope .mt-md-3 {
        margin-top: var(--margin-md) !important;
    }

    .node-scope .mt-md-4 {
        margin-top: var(--margin-lg) !important;
    }

    .node-scope .mt-md-5 {
        margin-top: var(--margin-xl) !important;
    }

    .node-scope .mt-md-auto {
        margin-top: auto !important;
    }

    .node-scope .me-md-0 {
        margin-inline-end: 0 !important;
    }

    .node-scope .me-md-1 {
        margin-inline-end: var(--margin-xs) !important;
    }

    .node-scope .me-md-2 {
        margin-inline-end: var(--margin-sm) !important;
    }

    .node-scope .me-md-3 {
        margin-inline-end: var(--margin-md) !important;
    }

    .node-scope .me-md-4 {
        margin-inline-end: var(--margin-lg) !important;
    }

    .node-scope .me-md-5 {
        margin-inline-end: var(--margin-xl) !important;
    }

    .node-scope .me-md-auto {
        margin-inline-end: auto !important;
    }

    .node-scope .mb-md-0 {
        margin-bottom: 0 !important;
    }

    .node-scope .mb-md-1 {
        margin-bottom: var(--margin-xs) !important;
    }

    .node-scope .mb-md-2 {
        margin-bottom: var(--margin-sm) !important;
    }

    .node-scope .mb-md-3 {
        margin-bottom: var(--margin-md) !important;
    }

    .node-scope .mb-md-4 {
        margin-bottom: var(--margin-lg) !important;
    }

    .node-scope .mb-md-5 {
        margin-bottom: var(--margin-xl) !important;
    }

    .node-scope .mb-md-auto {
        margin-bottom: auto !important;
    }

    .node-scope .ms-md-0 {
        margin-inline-start: 0 !important;
    }

    .node-scope .ms-md-1 {
        margin-inline-start: var(--margin-xs) !important;
    }

    .node-scope .ms-md-2 {
        margin-inline-start: var(--margin-sm) !important;
    }

    .node-scope .ms-md-3 {
        margin-inline-start: var(--margin-md) !important;
    }

    .node-scope .ms-md-4 {
        margin-inline-start: var(--margin-lg) !important;
    }

    .node-scope .ms-md-5 {
        margin-inline-start: var(--margin-xl) !important;
    }

    .node-scope .ms-md-auto {
        margin-inline-start: auto !important;
    }

    .node-scope .mx-md-0 {
        margin-inline: 0 !important;
    }

    .node-scope .mx-md-1 {
        margin-inline: var(--margin-xs) !important;
    }

    .node-scope .mx-md-2 {
        margin-inline: var(--margin-sm) !important;
    }

    .node-scope .mx-md-3 {
        margin-inline: var(--margin-md) !important;
    }

    .node-scope .mx-md-4 {
        margin-inline: var(--margin-lg) !important;
    }

    .node-scope .mx-md-5 {
        margin-inline: var(--margin-xl) !important;
    }

    .node-scope .mx-md-auto {
        margin-inline: auto !important;
    }

    .node-scope .my-md-0 {
        margin-block: 0 !important;
    }

    .node-scope .my-md-1 {
        margin-block: var(--margin-xs) !important;
    }

    .node-scope .my-md-2 {
        margin-block: var(--margin-sm) !important;
    }

    .node-scope .my-md-3 {
        margin-block: var(--margin-md) !important;
    }

    .node-scope .my-md-4 {
        margin-block: var(--margin-lg) !important;
    }

    .node-scope .my-md-5 {
        margin-block: var(--margin-xl) !important;
    }

    .node-scope .my-md-auto {
        margin-block: auto !important;
    }
}

@media (min-width: 992px) {
    .node-scope .m-lg-0 {
        margin: 0 !important;
    }

    .node-scope .m-lg-1 {
        margin: var(--margin-xs) !important;
    }

    .node-scope .m-lg-2 {
        margin: var(--margin-sm) !important;
    }

    .node-scope .m-lg-3 {
        margin: var(--margin-md) !important;
    }

    .node-scope .m-lg-4 {
        margin: var(--margin-lg) !important;
    }

    .node-scope .m-lg-5 {
        margin: var(--margin-xl) !important;
    }

    .node-scope .m-lg-auto {
        margin: auto !important;
    }

    .node-scope .mt-lg-0 {
        margin-top: 0 !important;
    }

    .node-scope .mt-lg-1 {
        margin-top: var(--margin-xs) !important;
    }

    .node-scope .mt-lg-2 {
        margin-top: var(--margin-sm) !important;
    }

    .node-scope .mt-lg-3 {
        margin-top: var(--margin-md) !important;
    }

    .node-scope .mt-lg-4 {
        margin-top: var(--margin-lg) !important;
    }

    .node-scope .mt-lg-5 {
        margin-top: var(--margin-xl) !important;
    }

    .node-scope .mt-lg-auto {
        margin-top: auto !important;
    }

    .node-scope .me-lg-0 {
        margin-inline-end: 0 !important;
    }

    .node-scope .me-lg-1 {
        margin-inline-end: var(--margin-xs) !important;
    }

    .node-scope .me-lg-2 {
        margin-inline-end: var(--margin-sm) !important;
    }

    .node-scope .me-lg-3 {
        margin-inline-end: var(--margin-md) !important;
    }

    .node-scope .me-lg-4 {
        margin-inline-end: var(--margin-lg) !important;
    }

    .node-scope .me-lg-5 {
        margin-inline-end: var(--margin-xl) !important;
    }

    .node-scope .me-lg-auto {
        margin-inline-end: auto !important;
    }

    .node-scope .mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .node-scope .mb-lg-1 {
        margin-bottom: var(--margin-xs) !important;
    }

    .node-scope .mb-lg-2 {
        margin-bottom: var(--margin-sm) !important;
    }

    .node-scope .mb-lg-3 {
        margin-bottom: var(--margin-md) !important;
    }

    .node-scope .mb-lg-4 {
        margin-bottom: var(--margin-lg) !important;
    }

    .node-scope .mb-lg-5 {
        margin-bottom: var(--margin-xl) !important;
    }

    .node-scope .mb-lg-auto {
        margin-bottom: auto !important;
    }

    .node-scope .ms-lg-0 {
        margin-inline-start: 0 !important;
    }

    .node-scope .ms-lg-1 {
        margin-inline-start: var(--margin-xs) !important;
    }

    .node-scope .ms-lg-2 {
        margin-inline-start: var(--margin-sm) !important;
    }

    .node-scope .ms-lg-3 {
        margin-inline-start: var(--margin-md) !important;
    }

    .node-scope .ms-lg-4 {
        margin-inline-start: var(--margin-lg) !important;
    }

    .node-scope .ms-lg-5 {
        margin-inline-start: var(--margin-xl) !important;
    }

    .node-scope .ms-lg-auto {
        margin-inline-start: auto !important;
    }

    .node-scope .mx-lg-0 {
        margin-inline: 0 !important;
    }

    .node-scope .mx-lg-1 {
        margin-inline: var(--margin-xs) !important;
    }

    .node-scope .mx-lg-2 {
        margin-inline: var(--margin-sm) !important;
    }

    .node-scope .mx-lg-3 {
        margin-inline: var(--margin-md) !important;
    }

    .node-scope .mx-lg-4 {
        margin-inline: var(--margin-lg) !important;
    }

    .node-scope .mx-lg-5 {
        margin-inline: var(--margin-xl) !important;
    }

    .node-scope .mx-lg-auto {
        margin-inline: auto !important;
    }

    .node-scope .my-lg-0 {
        margin-block: 0 !important;
    }

    .node-scope .my-lg-1 {
        margin-block: var(--margin-xs) !important;
    }

    .node-scope .my-lg-2 {
        margin-block: var(--margin-sm) !important;
    }

    .node-scope .my-lg-3 {
        margin-block: var(--margin-md) !important;
    }

    .node-scope .my-lg-4 {
        margin-block: var(--margin-lg) !important;
    }

    .node-scope .my-lg-5 {
        margin-block: var(--margin-xl) !important;
    }

    .node-scope .my-lg-auto {
        margin-block: auto !important;
    }
}

@media (min-width: 1200px) {
    .node-scope .m-xl-0 {
        margin: 0 !important;
    }

    .node-scope .m-xl-1 {
        margin: var(--margin-xs) !important;
    }

    .node-scope .m-xl-2 {
        margin: var(--margin-sm) !important;
    }

    .node-scope .m-xl-3 {
        margin: var(--margin-md) !important;
    }

    .node-scope .m-xl-4 {
        margin: var(--margin-lg) !important;
    }

    .node-scope .m-xl-5 {
        margin: var(--margin-xl) !important;
    }

    .node-scope .m-xl-auto {
        margin: auto !important;
    }

    .node-scope .mt-xl-0 {
        margin-top: 0 !important;
    }

    .node-scope .mt-xl-1 {
        margin-top: var(--margin-xs) !important;
    }

    .node-scope .mt-xl-2 {
        margin-top: var(--margin-sm) !important;
    }

    .node-scope .mt-xl-3 {
        margin-top: var(--margin-md) !important;
    }

    .node-scope .mt-xl-4 {
        margin-top: var(--margin-lg) !important;
    }

    .node-scope .mt-xl-5 {
        margin-top: var(--margin-xl) !important;
    }

    .node-scope .mt-xl-auto {
        margin-top: auto !important;
    }

    .node-scope .me-xl-0 {
        margin-inline-end: 0 !important;
    }

    .node-scope .me-xl-1 {
        margin-inline-end: var(--margin-xs) !important;
    }

    .node-scope .me-xl-2 {
        margin-inline-end: var(--margin-sm) !important;
    }

    .node-scope .me-xl-3 {
        margin-inline-end: var(--margin-md) !important;
    }

    .node-scope .me-xl-4 {
        margin-inline-end: var(--margin-lg) !important;
    }

    .node-scope .me-xl-5 {
        margin-inline-end: var(--margin-xl) !important;
    }

    .node-scope .me-xl-auto {
        margin-inline-end: auto !important;
    }

    .node-scope .mb-xl-0 {
        margin-bottom: 0 !important;
    }

    .node-scope .mb-xl-1 {
        margin-bottom: var(--margin-xs) !important;
    }

    .node-scope .mb-xl-2 {
        margin-bottom: var(--margin-sm) !important;
    }

    .node-scope .mb-xl-3 {
        margin-bottom: var(--margin-md) !important;
    }

    .node-scope .mb-xl-4 {
        margin-bottom: var(--margin-lg) !important;
    }

    .node-scope .mb-xl-5 {
        margin-bottom: var(--margin-xl) !important;
    }

    .node-scope .mb-xl-auto {
        margin-bottom: auto !important;
    }

    .node-scope .ms-xl-0 {
        margin-inline-start: 0 !important;
    }

    .node-scope .ms-xl-1 {
        margin-inline-start: var(--margin-xs) !important;
    }

    .node-scope .ms-xl-2 {
        margin-inline-start: var(--margin-sm) !important;
    }

    .node-scope .ms-xl-3 {
        margin-inline-start: var(--margin-md) !important;
    }

    .node-scope .ms-xl-4 {
        margin-inline-start: var(--margin-lg) !important;
    }

    .node-scope .ms-xl-5 {
        margin-inline-start: var(--margin-xl) !important;
    }

    .node-scope .ms-xl-auto {
        margin-inline-start: auto !important;
    }

    .node-scope .mx-xl-0 {
        margin-inline: 0 !important;
    }

    .node-scope .mx-xl-1 {
        margin-inline: var(--margin-xs) !important;
    }

    .node-scope .mx-xl-2 {
        margin-inline: var(--margin-sm) !important;
    }

    .node-scope .mx-xl-3 {
        margin-inline: var(--margin-md) !important;
    }

    .node-scope .mx-xl-4 {
        margin-inline: var(--margin-lg) !important;
    }

    .node-scope .mx-xl-5 {
        margin-inline: var(--margin-xl) !important;
    }

    .node-scope .mx-xl-auto {
        margin-inline: auto !important;
    }

    .node-scope .my-xl-0 {
        margin-block: 0 !important;
    }

    .node-scope .my-xl-1 {
        margin-block: var(--margin-xs) !important;
    }

    .node-scope .my-xl-2 {
        margin-block: var(--margin-sm) !important;
    }

    .node-scope .my-xl-3 {
        margin-block: var(--margin-md) !important;
    }

    .node-scope .my-xl-4 {
        margin-block: var(--margin-lg) !important;
    }

    .node-scope .my-xl-5 {
        margin-block: var(--margin-xl) !important;
    }

    .node-scope .my-xl-auto {
        margin-block: auto !important;
    }
}

@media (min-width: 1400px) {
    .node-scope .m-xxl-0 {
        margin: 0 !important;
    }

    .node-scope .m-xxl-1 {
        margin: var(--margin-xs) !important;
    }

    .node-scope .m-xxl-2 {
        margin: var(--margin-sm) !important;
    }

    .node-scope .m-xxl-3 {
        margin: var(--margin-md) !important;
    }

    .node-scope .m-xxl-4 {
        margin: var(--margin-lg) !important;
    }

    .node-scope .m-xxl-5 {
        margin: var(--margin-xl) !important;
    }

    .node-scope .m-xxl-auto {
        margin: auto !important;
    }

    .node-scope .mt-xxl-0 {
        margin-top: 0 !important;
    }

    .node-scope .mt-xxl-1 {
        margin-top: var(--margin-xs) !important;
    }

    .node-scope .mt-xxl-2 {
        margin-top: var(--margin-sm) !important;
    }

    .node-scope .mt-xxl-3 {
        margin-top: var(--margin-md) !important;
    }

    .node-scope .mt-xxl-4 {
        margin-top: var(--margin-lg) !important;
    }

    .node-scope .mt-xxl-5 {
        margin-top: var(--margin-xl) !important;
    }

    .node-scope .mt-xxl-auto {
        margin-top: auto !important;
    }

    .node-scope .me-xxl-0 {
        margin-inline-end: 0 !important;
    }

    .node-scope .me-xxl-1 {
        margin-inline-end: var(--margin-xs) !important;
    }

    .node-scope .me-xxl-2 {
        margin-inline-end: var(--margin-sm) !important;
    }

    .node-scope .me-xxl-3 {
        margin-inline-end: var(--margin-md) !important;
    }

    .node-scope .me-xxl-4 {
        margin-inline-end: var(--margin-lg) !important;
    }

    .node-scope .me-xxl-5 {
        margin-inline-end: var(--margin-xl) !important;
    }

    .node-scope .me-xxl-auto {
        margin-inline-end: auto !important;
    }

    .node-scope .mb-xxl-0 {
        margin-bottom: 0 !important;
    }

    .node-scope .mb-xxl-1 {
        margin-bottom: var(--margin-xs) !important;
    }

    .node-scope .mb-xxl-2 {
        margin-bottom: var(--margin-sm) !important;
    }

    .node-scope .mb-xxl-3 {
        margin-bottom: var(--margin-md) !important;
    }

    .node-scope .mb-xxl-4 {
        margin-bottom: var(--margin-lg) !important;
    }

    .node-scope .mb-xxl-5 {
        margin-bottom: var(--margin-xl) !important;
    }

    .node-scope .mb-xxl-auto {
        margin-bottom: auto !important;
    }

    .node-scope .ms-xxl-0 {
        margin-inline-start: 0 !important;
    }

    .node-scope .ms-xxl-1 {
        margin-inline-start: var(--margin-xs) !important;
    }

    .node-scope .ms-xxl-2 {
        margin-inline-start: var(--margin-sm) !important;
    }

    .node-scope .ms-xxl-3 {
        margin-inline-start: var(--margin-md) !important;
    }

    .node-scope .ms-xxl-4 {
        margin-inline-start: var(--margin-lg) !important;
    }

    .node-scope .ms-xxl-5 {
        margin-inline-start: var(--margin-xl) !important;
    }

    .node-scope .ms-xxl-auto {
        margin-inline-start: auto !important;
    }

    .node-scope .mx-xxl-0 {
        margin-inline: 0 !important;
    }

    .node-scope .mx-xxl-1 {
        margin-inline: var(--margin-xs) !important;
    }

    .node-scope .mx-xxl-2 {
        margin-inline: var(--margin-sm) !important;
    }

    .node-scope .mx-xxl-3 {
        margin-inline: var(--margin-md) !important;
    }

    .node-scope .mx-xxl-4 {
        margin-inline: var(--margin-lg) !important;
    }

    .node-scope .mx-xxl-5 {
        margin-inline: var(--margin-xl) !important;
    }

    .node-scope .mx-xxl-auto {
        margin-inline: auto !important;
    }

    .node-scope .my-xxl-0 {
        margin-block: 0 !important;
    }

    .node-scope .my-xxl-1 {
        margin-block: var(--margin-xs) !important;
    }

    .node-scope .my-xxl-2 {
        margin-block: var(--margin-sm) !important;
    }

    .node-scope .my-xxl-3 {
        margin-block: var(--margin-md) !important;
    }

    .node-scope .my-xxl-4 {
        margin-block: var(--margin-lg) !important;
    }

    .node-scope .my-xxl-5 {
        margin-block: var(--margin-xl) !important;
    }

    .node-scope .my-xxl-auto {
        margin-block: auto !important;
    }
}


/* ---------- Border-radius (estilo Bootstrap, scoped) ---------- */
/* Escala: 0=0 . 1=--radius-sm . 2=--radius-md . 3=--radius-lg . 4=--radius-xl */
/* Adicionales: rounded-circle (50%), rounded-pill, rounded-none */
/* Direccionales: rounded-top . rounded-end . rounded-bottom . rounded-start */
/* Aplican a cualquier contenedor dentro del scope (cards, inputs, imagenes, modales) */

.node-scope .rounded {
    border-radius: var(--radius-md) !important;
}

.node-scope .rounded-0 {
    border-radius: 0 !important;
}

.node-scope .rounded-1 {
    border-radius: var(--radius-sm) !important;
}

.node-scope .rounded-2 {
    border-radius: var(--radius-md) !important;
}

.node-scope .rounded-3 {
    border-radius: var(--radius-lg) !important;
}

.node-scope .rounded-4 {
    border-radius: var(--radius-xl) !important;
}

/* Igual que rounded-0, alias explicito para cuando se busca "sin radio" */
.node-scope .rounded-none {
    border-radius: 0 !important;
}

/* Escala de puntos */
.node-scope .rounded-circle {
    border-radius: 50% !important;
}

/* Pastilla: extremo a extremo, ideal para botones, chips y avatares */
.node-scope .rounded-pill {
    border-radius: var(--radius-pill) !important;
}

/* ---------- Border-radius direccionales ---------- */

.node-scope .rounded-top {
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
}

.node-scope .rounded-end {
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

.node-scope .rounded-bottom {
    border-bottom-left-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

.node-scope .rounded-start {
    border-top-left-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
}

/* ---------- Combinaciones frequas ---------- */

/* Solo dos esquinas: superior izquierda + inferior derecha */
.node-scope .rounded-top-start {
    border-top-left-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

/* Solo dos esquinas: superior derecha + inferior izquierda */
.node-scope .rounded-top-end {
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
}


/* ---------- Alineacion (flex/grid, scoped) ---------- */
/* Propiedades: align-self, align-items, justify-content, justify-self */
/* Breakpoints (min-width): base + sm 576 . md 768 . lg 992 . xl 1200 . xxl 1400 */

.node-scope .align-self-auto {
    align-self: auto !important;
}

.node-scope .align-self-start {
    align-self: flex-start !important;
}

.node-scope .align-self-end {
    align-self: flex-end !important;
}

.node-scope .align-self-center {
    align-self: center !important;
}

.node-scope .align-self-baseline {
    align-self: baseline !important;
}

.node-scope .align-self-stretch {
    align-self: stretch !important;
}

.node-scope .align-items-start {
    align-items: flex-start !important;
}

.node-scope .align-items-end {
    align-items: flex-end !important;
}

.node-scope .align-items-center {
    align-items: center !important;
}

.node-scope .align-items-baseline {
    align-items: baseline !important;
}

.node-scope .align-items-stretch {
    align-items: stretch !important;
}

.node-scope .justify-content-start {
    justify-content: flex-start !important;
}

.node-scope .justify-content-end {
    justify-content: flex-end !important;
}

.node-scope .justify-content-center {
    justify-content: center !important;
}

.node-scope .justify-content-between {
    justify-content: space-between !important;
}

.node-scope .justify-content-around {
    justify-content: space-around !important;
}

.node-scope .justify-content-evenly {
    justify-content: space-evenly !important;
}

.node-scope .justify-self-auto {
    justify-self: auto !important;
}

.node-scope .justify-self-start {
    justify-self: flex-start !important;
}

.node-scope .justify-self-end {
    justify-self: flex-end !important;
}

.node-scope .justify-self-center {
    justify-self: center !important;
}

.node-scope .justify-self-baseline {
    justify-self: baseline !important;
}

.node-scope .justify-self-stretch {
    justify-self: stretch !important;
}

@media (min-width: 576px) {
    .node-scope .align-self-sm-auto {
        align-self: auto !important;
    }

    .node-scope .align-self-sm-start {
        align-self: flex-start !important;
    }

    .node-scope .align-self-sm-end {
        align-self: flex-end !important;
    }

    .node-scope .align-self-sm-center {
        align-self: center !important;
    }

    .node-scope .align-self-sm-baseline {
        align-self: baseline !important;
    }

    .node-scope .align-self-sm-stretch {
        align-self: stretch !important;
    }

    .node-scope .align-items-sm-start {
        align-items: flex-start !important;
    }

    .node-scope .align-items-sm-end {
        align-items: flex-end !important;
    }

    .node-scope .align-items-sm-center {
        align-items: center !important;
    }

    .node-scope .align-items-sm-baseline {
        align-items: baseline !important;
    }

    .node-scope .align-items-sm-stretch {
        align-items: stretch !important;
    }

    .node-scope .justify-content-sm-start {
        justify-content: flex-start !important;
    }

    .node-scope .justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .node-scope .justify-content-sm-center {
        justify-content: center !important;
    }

    .node-scope .justify-content-sm-between {
        justify-content: space-between !important;
    }

    .node-scope .justify-content-sm-around {
        justify-content: space-around !important;
    }

    .node-scope .justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

    .node-scope .justify-self-sm-auto {
        justify-self: auto !important;
    }

    .node-scope .justify-self-sm-start {
        justify-self: flex-start !important;
    }

    .node-scope .justify-self-sm-end {
        justify-self: flex-end !important;
    }

    .node-scope .justify-self-sm-center {
        justify-self: center !important;
    }

    .node-scope .justify-self-sm-baseline {
        justify-self: baseline !important;
    }

    .node-scope .justify-self-sm-stretch {
        justify-self: stretch !important;
    }
}

@media (min-width: 768px) {
    .node-scope .align-self-md-auto {
        align-self: auto !important;
    }

    .node-scope .align-self-md-start {
        align-self: flex-start !important;
    }

    .node-scope .align-self-md-end {
        align-self: flex-end !important;
    }

    .node-scope .align-self-md-center {
        align-self: center !important;
    }

    .node-scope .align-self-md-baseline {
        align-self: baseline !important;
    }

    .node-scope .align-self-md-stretch {
        align-self: stretch !important;
    }

    .node-scope .align-items-md-start {
        align-items: flex-start !important;
    }

    .node-scope .align-items-md-end {
        align-items: flex-end !important;
    }

    .node-scope .align-items-md-center {
        align-items: center !important;
    }

    .node-scope .align-items-md-baseline {
        align-items: baseline !important;
    }

    .node-scope .align-items-md-stretch {
        align-items: stretch !important;
    }

    .node-scope .justify-content-md-start {
        justify-content: flex-start !important;
    }

    .node-scope .justify-content-md-end {
        justify-content: flex-end !important;
    }

    .node-scope .justify-content-md-center {
        justify-content: center !important;
    }

    .node-scope .justify-content-md-between {
        justify-content: space-between !important;
    }

    .node-scope .justify-content-md-around {
        justify-content: space-around !important;
    }

    .node-scope .justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

    .node-scope .justify-self-md-auto {
        justify-self: auto !important;
    }

    .node-scope .justify-self-md-start {
        justify-self: flex-start !important;
    }

    .node-scope .justify-self-md-end {
        justify-self: flex-end !important;
    }

    .node-scope .justify-self-md-center {
        justify-self: center !important;
    }

    .node-scope .justify-self-md-baseline {
        justify-self: baseline !important;
    }

    .node-scope .justify-self-md-stretch {
        justify-self: stretch !important;
    }
}

@media (min-width: 992px) {
    .node-scope .align-self-lg-auto {
        align-self: auto !important;
    }

    .node-scope .align-self-lg-start {
        align-self: flex-start !important;
    }

    .node-scope .align-self-lg-end {
        align-self: flex-end !important;
    }

    .node-scope .align-self-lg-center {
        align-self: center !important;
    }

    .node-scope .align-self-lg-baseline {
        align-self: baseline !important;
    }

    .node-scope .align-self-lg-stretch {
        align-self: stretch !important;
    }

    .node-scope .align-items-lg-start {
        align-items: flex-start !important;
    }

    .node-scope .align-items-lg-end {
        align-items: flex-end !important;
    }

    .node-scope .align-items-lg-center {
        align-items: center !important;
    }

    .node-scope .align-items-lg-baseline {
        align-items: baseline !important;
    }

    .node-scope .align-items-lg-stretch {
        align-items: stretch !important;
    }

    .node-scope .justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .node-scope .justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .node-scope .justify-content-lg-center {
        justify-content: center !important;
    }

    .node-scope .justify-content-lg-between {
        justify-content: space-between !important;
    }

    .node-scope .justify-content-lg-around {
        justify-content: space-around !important;
    }

    .node-scope .justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

    .node-scope .justify-self-lg-auto {
        justify-self: auto !important;
    }

    .node-scope .justify-self-lg-start {
        justify-self: flex-start !important;
    }

    .node-scope .justify-self-lg-end {
        justify-self: flex-end !important;
    }

    .node-scope .justify-self-lg-center {
        justify-self: center !important;
    }

    .node-scope .justify-self-lg-baseline {
        justify-self: baseline !important;
    }

    .node-scope .justify-self-lg-stretch {
        justify-self: stretch !important;
    }
}

@media (min-width: 1200px) {
    .node-scope .align-self-xl-auto {
        align-self: auto !important;
    }

    .node-scope .align-self-xl-start {
        align-self: flex-start !important;
    }

    .node-scope .align-self-xl-end {
        align-self: flex-end !important;
    }

    .node-scope .align-self-xl-center {
        align-self: center !important;
    }

    .node-scope .align-self-xl-baseline {
        align-self: baseline !important;
    }

    .node-scope .align-self-xl-stretch {
        align-self: stretch !important;
    }

    .node-scope .align-items-xl-start {
        align-items: flex-start !important;
    }

    .node-scope .align-items-xl-end {
        align-items: flex-end !important;
    }

    .node-scope .align-items-xl-center {
        align-items: center !important;
    }

    .node-scope .align-items-xl-baseline {
        align-items: baseline !important;
    }

    .node-scope .align-items-xl-stretch {
        align-items: stretch !important;
    }

    .node-scope .justify-content-xl-start {
        justify-content: flex-start !important;
    }

    .node-scope .justify-content-xl-end {
        justify-content: flex-end !important;
    }

    .node-scope .justify-content-xl-center {
        justify-content: center !important;
    }

    .node-scope .justify-content-xl-between {
        justify-content: space-between !important;
    }

    .node-scope .justify-content-xl-around {
        justify-content: space-around !important;
    }

    .node-scope .justify-content-xl-evenly {
        justify-content: space-evenly !important;
    }

    .node-scope .justify-self-xl-auto {
        justify-self: auto !important;
    }

    .node-scope .justify-self-xl-start {
        justify-self: flex-start !important;
    }

    .node-scope .justify-self-xl-end {
        justify-self: flex-end !important;
    }

    .node-scope .justify-self-xl-center {
        justify-self: center !important;
    }

    .node-scope .justify-self-xl-baseline {
        justify-self: baseline !important;
    }

    .node-scope .justify-self-xl-stretch {
        justify-self: stretch !important;
    }
}

@media (min-width: 1400px) {
    .node-scope .align-self-xxl-auto {
        align-self: auto !important;
    }

    .node-scope .align-self-xxl-start {
        align-self: flex-start !important;
    }

    .node-scope .align-self-xxl-end {
        align-self: flex-end !important;
    }

    .node-scope .align-self-xxl-center {
        align-self: center !important;
    }

    .node-scope .align-self-xxl-baseline {
        align-self: baseline !important;
    }

    .node-scope .align-self-xxl-stretch {
        align-self: stretch !important;
    }

    .node-scope .align-items-xxl-start {
        align-items: flex-start !important;
    }

    .node-scope .align-items-xxl-end {
        align-items: flex-end !important;
    }

    .node-scope .align-items-xxl-center {
        align-items: center !important;
    }

    .node-scope .align-items-xxl-baseline {
        align-items: baseline !important;
    }

    .node-scope .align-items-xxl-stretch {
        align-items: stretch !important;
    }

    .node-scope .justify-content-xxl-start {
        justify-content: flex-start !important;
    }

    .node-scope .justify-content-xxl-end {
        justify-content: flex-end !important;
    }

    .node-scope .justify-content-xxl-center {
        justify-content: center !important;
    }

    .node-scope .justify-content-xxl-between {
        justify-content: space-between !important;
    }

    .node-scope .justify-content-xxl-around {
        justify-content: space-around !important;
    }

    .node-scope .justify-content-xxl-evenly {
        justify-content: space-evenly !important;
    }

    .node-scope .justify-self-xxl-auto {
        justify-self: auto !important;
    }

    .node-scope .justify-self-xxl-start {
        justify-self: flex-start !important;
    }

    .node-scope .justify-self-xxl-end {
        justify-self: flex-end !important;
    }

    .node-scope .justify-self-xxl-center {
        justify-self: center !important;
    }

    .node-scope .justify-self-xxl-baseline {
        justify-self: baseline !important;
    }

    .node-scope .justify-self-xxl-stretch {
        justify-self: stretch !important;
    }
}

.node-scope .divider {
    position: relative;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.node-scope .divider::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    background-color: var(--color-purple);
}

/* Unico lugar del framework donde se declara el ancho de un boton.
   Las bases de la seccion 30 no llevan width a proposito: asi estas
   dos clases mandan siempre, sin depender del orden de fuente. */
.node-scope .btn-block {
    width: 100%;
}

.node-scope .btn-fit {
    width: fit-content;
}

/* ================================================================
   06.1 ANIMACIONES
================================================================ */

/* Flotado vertical suave (útil para imágenes o iconos) */
.node-scope .float {
    animation: float-y 3s ease-in-out infinite;
}

.node-scope .float--slow {
    animation-duration: 6s;
}

.node-scope .float--fast {
    animation-duration: 2s;
}

.node-scope .float--pause {
    animation-play-state: paused;
}

@keyframes float-y {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* Accesibilidad: si el usuario pide menos movimiento, el flotado se
   detiene por completo. Sin esto, una animación infinita sigue
   corriendo en segundo plano durante toda la sesion. */
@media (prefers-reduced-motion: reduce) {

    .node-scope .float {
        animation: none;
    }
}


/* ================================================================
   07. COLORES
================================================================ */

.node-scope .color-primary {
    color: var(--color-primary) !important;
}

.node-scope .color-gray-dark {
    color: var(--color-gray-dark) !important;
}

.node-scope .color-white {
    color: var(--color-white) !important;
}

.node-scope .color-blue-dark {
    color: var(--color-blue-dark) !important;
}

.node-scope .color-purple-dark {
    color: var(--color-purple-dark) !important;
}

.node-scope .color-blue-green {
    color: var(--color-blue-green) !important;
}

.node-scope .color-blue-green-light {
    color: var(--color-blue-green-light) !important;
}

.node-scope .color-blue-green-medium {
    color: var(--color-blue-green-medium) !important;
}

.node-scope .color-blue-green-dark {
    color: var(--color-blue-green-dark) !important;
}

.node-scope .color-brown {
    color: var(--color-brown) !important;
}

.node-scope .color-brown-dark {
    color: var(--color-brown-dark) !important;
}

.node-scope .color-gray {
    color: var(--color-gray) !important;
}

.node-scope .color-charcoal {
    color: var(--color-charcoal) !important;
}

.node-scope .color-gold {
    color: var(--color-gold) !important;
}

.node-scope .color-gold-dark {
    color: var(--color-gold-dark) !important;
}

.node-scope .color-green-forest {
    color: var(--color-green-forest) !important;
}

.node-scope .color-green-leaf {
    color: var(--color-green-leaf) !important;
}

.node-scope .color-green-fresh {
    color: var(--color-green-fresh) !important;
}

.node-scope .color-green-pale {
    color: var(--color-green-pale) !important;
}

.node-scope .color-cream {
    color: var(--color-cream) !important;
}

.node-scope .color-peach-light {
    color: var(--color-peach-light) !important;
}

.node-scope .color-off-white {
    color: var(--color-off-white) !important;
}

.node-scope .color-cream-light {
    color: var(--color-cream-light) !important;
}

.node-scope .color-secondary {
    color: var(--color-secondary) !important;
}

.node-scope .color-accent {
    color: var(--color-accent) !important;
}

.node-scope .color-purple {
    color: var(--color-purple) !important;
}

.node-scope .color-green-dark {
    color: var(--color-green-dark) !important;
}

.node-scope .color-red-light {
    color: var(--color-red-light) !important;
}

.node-scope .color-gray-extra-light {
    color: var(--color-gray-extra-light) !important;
}

.node-scope .color-gray-light {
    color: var(--color-gray-light) !important;
}

/* ---------- Tonos para hover de botones ---------- */

.node-scope .color-primary-dark {
    color: var(--color-primary-dark) !important;
}

.node-scope .color-text-dark {
    color: var(--color-text-dark) !important;
}

.node-scope .color-muted-dark {
    color: var(--color-muted-dark) !important;
}

.node-scope .color-subtitle-dark {
    color: var(--color-subtitle-dark) !important;
}

.node-scope .color-red-extra-dark {
    color: var(--color-red-extra-dark) !important;
}

.node-scope .color-purple-extra-dark {
    color: var(--color-purple-extra-dark) !important;
}

.node-scope .color-green-extra-dark {
    color: var(--color-green-extra-dark) !important;
}

.node-scope .color-green-forest-dark {
    color: var(--color-green-forest-dark) !important;
}

.node-scope .color-green-leaf-dark {
    color: var(--color-green-leaf-dark) !important;
}

.node-scope .color-blue-green-extra-dark {
    color: var(--color-blue-green-extra-dark) !important;
}

.node-scope .color-gray-extra-dark {
    color: var(--color-gray-extra-dark) !important;
}

.node-scope .color-blue-extra-dark {
    color: var(--color-blue-extra-dark) !important;
}

.node-scope .color-brown-extra-dark {
    color: var(--color-brown-extra-dark) !important;
}

.node-scope .color-charcoal-dark {
    color: var(--color-charcoal-dark) !important;
}

.node-scope .color-gold-extra-dark {
    color: var(--color-gold-extra-dark) !important;
}


/* ---------- Links ---------- */
/* Convención <color>-link: enlace con el color del token + subrayado.
   Espejo de la familia .color-* (mismos nombres de color). Sobrescribe
   el color de cualquier <a> dentro de .node-scope. Ojo con el fondo:
   los tonos claros (white, cream, off-white, green-pale, secondary…) solo
   se leen sobre fondos oscuros. */

.node-scope .primary-link {
    color: var(--color-primary);
    text-decoration: underline;
}

.node-scope .secondary-link {
    color: var(--color-secondary);
    text-decoration: underline;
}

.node-scope .accent-link {
    color: var(--color-accent);
    text-decoration: underline;
}

.node-scope .purple-link {
    color: var(--color-purple);
    text-decoration: underline;
}

.node-scope .purple-dark-link {
    color: var(--color-purple-dark);
    text-decoration: underline;
}

.node-scope .blue-green-link {
    color: var(--color-blue-green);
    text-decoration: underline;
}

.node-scope .blue-green-light-link {
    color: var(--color-blue-green-light);
    text-decoration: underline;
}

.node-scope .blue-green-medium-link {
    color: var(--color-blue-green-medium);
    text-decoration: underline;
}

.node-scope .blue-green-dark-link {
    color: var(--color-blue-green-dark);
    text-decoration: underline;
}

.node-scope .green-dark-link {
    color: var(--color-green-dark);
    text-decoration: underline;
}

.node-scope .green-forest-link {
    color: var(--color-green-forest);
    text-decoration: underline;
}

.node-scope .green-leaf-link {
    color: var(--color-green-leaf);
    text-decoration: underline;
}

.node-scope .green-fresh-link {
    color: var(--color-green-fresh);
    text-decoration: underline;
}

.node-scope .green-pale-link {
    color: var(--color-green-pale);
    text-decoration: underline;
}

.node-scope .red-light-link {
    color: var(--color-red-light);
    text-decoration: underline;
}

.node-scope .red-dark-link {
    color: var(--color-red-dark);
    text-decoration: underline;
}

.node-scope .blue-dark-link {
    color: var(--color-blue-dark);
    text-decoration: underline;
}

.node-scope .gray-extra-light-link {
    color: var(--color-gray-extra-light);
    text-decoration: underline;
}

.node-scope .gray-light-link {
    color: var(--color-gray-light);
    text-decoration: underline;
}

.node-scope .gray-dark-link {
    color: var(--color-gray-dark);
    text-decoration: underline;
}

.node-scope .gray-link {
    color: var(--color-gray);
    text-decoration: underline;
}

.node-scope .charcoal-link {
    color: var(--color-charcoal);
    text-decoration: underline;
}

.node-scope .white-link {
    color: var(--color-white);
    text-decoration: underline;
}

.node-scope .cream-link {
    color: var(--color-cream);
    text-decoration: underline;
}

.node-scope .cream-light-link {
    color: var(--color-cream-light);
    text-decoration: underline;
}

.node-scope .peach-light-link {
    color: var(--color-peach-light);
    text-decoration: underline;
}

.node-scope .off-white-link {
    color: var(--color-off-white);
    text-decoration: underline;
}

.node-scope .brown-link {
    color: var(--color-brown);
    text-decoration: underline;
}

.node-scope .brown-dark-link {
    color: var(--color-brown-dark);
    text-decoration: underline;
}

.node-scope .gold-link {
    color: var(--color-gold);
    text-decoration: underline;
}

.node-scope .gold-dark-link {
    color: var(--color-gold-dark);
    text-decoration: underline;
}

.node-scope .primary-dark-link {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.node-scope .text-dark-link {
    color: var(--color-text-dark);
    text-decoration: underline;
}

.node-scope .muted-dark-link {
    color: var(--color-muted-dark);
    text-decoration: underline;
}

.node-scope .subtitle-dark-link {
    color: var(--color-subtitle-dark);
    text-decoration: underline;
}

.node-scope .red-extra-dark-link {
    color: var(--color-red-extra-dark);
    text-decoration: underline;
}

.node-scope .purple-extra-dark-link {
    color: var(--color-purple-extra-dark);
    text-decoration: underline;
}

.node-scope .green-extra-dark-link {
    color: var(--color-green-extra-dark);
    text-decoration: underline;
}

.node-scope .green-forest-dark-link {
    color: var(--color-green-forest-dark);
    text-decoration: underline;
}

.node-scope .green-leaf-dark-link {
    color: var(--color-green-leaf-dark);
    text-decoration: underline;
}

.node-scope .blue-green-extra-dark-link {
    color: var(--color-blue-green-extra-dark);
    text-decoration: underline;
}

.node-scope .gray-extra-dark-link {
    color: var(--color-gray-extra-dark);
    text-decoration: underline;
}

.node-scope .blue-extra-dark-link {
    color: var(--color-blue-extra-dark);
    text-decoration: underline;
}

.node-scope .brown-extra-dark-link {
    color: var(--color-brown-extra-dark);
    text-decoration: underline;
}

.node-scope .charcoal-dark-link {
    color: var(--color-charcoal-dark);
    text-decoration: underline;
}

.node-scope .gold-extra-dark-link {
    color: var(--color-gold-extra-dark);
    text-decoration: underline;
}

/* Alias heredado: .red-link equivale a .red-dark-link */
.node-scope .red-link {
    color: var(--color-red-dark);
    text-decoration: underline;
}


/* ---------- Backgrounds - contenedores (bloque Drupal) ---------- */
/* Variacion .node-scope.bg-color-* para el fondo del bloque completo */

.node-scope.bg-color-primary {
    background-color: var(--color-primary) !important;
}

.node-scope.bg-color-secondary {
    background-color: var(--color-secondary) !important;
}

.node-scope.bg-color-accent {
    background-color: var(--color-accent) !important;
}

.node-scope.bg-color-blue-green {
    background-color: var(--color-blue-green) !important;
}

.node-scope.bg-color-blue-green-light {
    background-color: var(--color-blue-green-light) !important;
}

.node-scope.bg-color-blue-green-medium {
    background-color: var(--color-blue-green-medium) !important;
}

.node-scope.bg-color-blue-green-dark {
    background-color: var(--color-blue-green-dark) !important;
}

.node-scope.bg-color-green-dark {
    background-color: var(--color-green-dark) !important;
}

.node-scope.bg-color-purple {
    background-color: var(--color-purple) !important;
}

.node-scope.bg-color-purple-dark {
    background-color: var(--color-purple-dark) !important;
}

.node-scope.bg-color-red-light {
    background-color: var(--color-red-light) !important;
}

.node-scope.bg-color-white {
    background-color: var(--color-white) !important;
}

.node-scope.bg-color-blue-dark {
    background-color: var(--color-blue-dark) !important;
}

.node-scope.bg-color-gray-extra-light {
    background-color: var(--color-gray-extra-light) !important;
}

.node-scope.bg-color-gray {
    background-color: var(--color-gray) !important;
}

.node-scope.bg-color-cream {
    background-color: var(--color-cream) !important;
}

.node-scope.bg-color-brown {
    background-color: var(--color-brown) !important;
}

.node-scope.bg-color-brown-dark {
    background-color: var(--color-brown-dark) !important;
}

.node-scope.bg-color-peach-light {
    background-color: var(--color-peach-light) !important;
}

.node-scope.bg-color-off-white {
    background-color: var(--color-off-white) !important;
}

.node-scope.bg-color-charcoal {
    background-color: var(--color-charcoal) !important;
}

.node-scope.bg-color-gold {
    background-color: var(--color-gold) !important;
}

.node-scope.bg-color-gold-dark {
    background-color: var(--color-gold-dark) !important;
}

.node-scope.bg-color-cream-light {
    background-color: var(--color-cream-light) !important;
}

.node-scope.bg-color-green-forest {
    background-color: var(--color-green-forest) !important;
}

.node-scope.bg-color-green-leaf {
    background-color: var(--color-green-leaf) !important;
}

.node-scope.bg-color-green-fresh {
    background-color: var(--color-green-fresh) !important;
}

.node-scope.bg-color-green-pale {
    background-color: var(--color-green-pale) !important;
}

.node-scope.bg-color-red-dark {
    background-color: var(--color-red-dark) !important;
}

.node-scope.bg-color-purple-light {
    background-color: var(--color-purple-light) !important;
}

.node-scope.bg-color-green-light {
    background-color: var(--color-green-light) !important;
}

.node-scope.bg-color-gray-light {
    background-color: var(--color-gray-light) !important;
}

.node-scope.bg-color-gray-dark {
    background-color: var(--color-gray-dark) !important;
}

/* Elementos internos (descendientes) */

.node-scope .bg-color-primary {
    background-color: var(--color-primary) !important;
}

.node-scope .bg-color-secondary {
    background-color: var(--color-secondary) !important;
}

.node-scope .bg-color-accent {
    background-color: var(--color-accent) !important;
}

.node-scope .bg-color-blue-green {
    background-color: var(--color-blue-green) !important;
}

.node-scope .bg-color-blue-green-light {
    background-color: var(--color-blue-green-light) !important;
}

.node-scope .bg-color-blue-green-medium {
    background-color: var(--color-blue-green-medium) !important;
}

.node-scope .bg-color-blue-green-dark {
    background-color: var(--color-blue-green-dark) !important;
}

.node-scope .bg-color-green-dark {
    background-color: var(--color-green-dark) !important;
}

.node-scope .bg-color-purple {
    background-color: var(--color-purple) !important;
}

.node-scope .bg-color-purple-dark {
    background-color: var(--color-purple-dark) !important;
}

.node-scope .bg-color-red-light {
    background-color: var(--color-red-light) !important;
}

.node-scope .bg-color-white {
    background-color: var(--color-white) !important;
}

.node-scope .bg-color-blue-dark {
    background-color: var(--color-blue-dark) !important;
}

.node-scope .bg-color-gray-extra-light {
    background-color: var(--color-gray-extra-light) !important;
}

.node-scope .bg-color-gray {
    background-color: var(--color-gray) !important;
}

.node-scope .bg-color-cream {
    background-color: var(--color-cream) !important;
}

.node-scope .bg-color-brown {
    background-color: var(--color-brown) !important;
}

.node-scope .bg-color-brown-dark {
    background-color: var(--color-brown-dark) !important;
}

.node-scope .bg-color-peach-light {
    background-color: var(--color-peach-light) !important;
}

.node-scope .bg-color-off-white {
    background-color: var(--color-off-white) !important;
}

.node-scope .bg-color-charcoal {
    background-color: var(--color-charcoal) !important;
}

.node-scope .bg-color-gold {
    background-color: var(--color-gold) !important;
}

.node-scope .bg-color-gold-dark {
    background-color: var(--color-gold-dark) !important;
}

.node-scope .bg-color-cream-light {
    background-color: var(--color-cream-light) !important;
}

.node-scope .bg-color-green-forest {
    background-color: var(--color-green-forest) !important;
}

.node-scope .bg-color-green-leaf {
    background-color: var(--color-green-leaf) !important;
}

.node-scope .bg-color-green-fresh {
    background-color: var(--color-green-fresh) !important;
}

.node-scope .bg-color-green-pale {
    background-color: var(--color-green-pale) !important;
}

.node-scope .bg-color-green-light {
    background-color: var(--color-green-light) !important;
}

.node-scope .bg-color-purple-light {
    background-color: var(--color-purple-light) !important;
}

.node-scope .bg-color-red-dark {
    background-color: var(--color-red-dark) !important;
}

.node-scope .bg-color-gray-light {
    background-color: var(--color-gray-light) !important;
}

.node-scope .bg-color-gray-dark {
    background-color: var(--color-gray-dark) !important;
}

/* ---------- Tonos para hover de botones (descendiente) ---------- */

.node-scope .bg-color-primary-dark {
    background-color: var(--color-primary-dark) !important;
}

.node-scope .bg-color-text-dark {
    background-color: var(--color-text-dark) !important;
}

.node-scope .bg-color-muted-dark {
    background-color: var(--color-muted-dark) !important;
}

.node-scope .bg-color-subtitle-dark {
    background-color: var(--color-subtitle-dark) !important;
}

.node-scope .bg-color-red-extra-dark {
    background-color: var(--color-red-extra-dark) !important;
}

.node-scope .bg-color-purple-extra-dark {
    background-color: var(--color-purple-extra-dark) !important;
}

.node-scope .bg-color-green-extra-dark {
    background-color: var(--color-green-extra-dark) !important;
}

.node-scope .bg-color-green-forest-dark {
    background-color: var(--color-green-forest-dark) !important;
}

.node-scope .bg-color-green-leaf-dark {
    background-color: var(--color-green-leaf-dark) !important;
}

.node-scope .bg-color-blue-green-extra-dark {
    background-color: var(--color-blue-green-extra-dark) !important;
}

.node-scope .bg-color-gray-extra-dark {
    background-color: var(--color-gray-extra-dark) !important;
}

.node-scope .bg-color-blue-extra-dark {
    background-color: var(--color-blue-extra-dark) !important;
}

.node-scope .bg-color-brown-extra-dark {
    background-color: var(--color-brown-extra-dark) !important;
}

.node-scope .bg-color-charcoal-dark {
    background-color: var(--color-charcoal-dark) !important;
}

.node-scope .bg-color-gold-extra-dark {
    background-color: var(--color-gold-extra-dark) !important;
}


/* ---------- Tonos para hover de botones (raiz) ---------- */

.node-scope.bg-color-primary-dark {
    background-color: var(--color-primary-dark) !important;
}

.node-scope.bg-color-text-dark {
    background-color: var(--color-text-dark) !important;
}

.node-scope.bg-color-muted-dark {
    background-color: var(--color-muted-dark) !important;
}

.node-scope.bg-color-subtitle-dark {
    background-color: var(--color-subtitle-dark) !important;
}

.node-scope.bg-color-red-extra-dark {
    background-color: var(--color-red-extra-dark) !important;
}

.node-scope.bg-color-purple-extra-dark {
    background-color: var(--color-purple-extra-dark) !important;
}

.node-scope.bg-color-green-extra-dark {
    background-color: var(--color-green-extra-dark) !important;
}

.node-scope.bg-color-green-forest-dark {
    background-color: var(--color-green-forest-dark) !important;
}

.node-scope.bg-color-green-leaf-dark {
    background-color: var(--color-green-leaf-dark) !important;
}

.node-scope.bg-color-blue-green-extra-dark {
    background-color: var(--color-blue-green-extra-dark) !important;
}

.node-scope.bg-color-gray-extra-dark {
    background-color: var(--color-gray-extra-dark) !important;
}

.node-scope.bg-color-blue-extra-dark {
    background-color: var(--color-blue-extra-dark) !important;
}

.node-scope.bg-color-brown-extra-dark {
    background-color: var(--color-brown-extra-dark) !important;
}

.node-scope.bg-color-charcoal-dark {
    background-color: var(--color-charcoal-dark) !important;
}

.node-scope.bg-color-gold-extra-dark {
    background-color: var(--color-gold-extra-dark) !important;
}

/* ---------- Grosor de borde ----------
   Bootstrap ya trae .border-1 ... .border-5, pero SOLO declaran
   border-width: sin border-style no se dibuja, asi que hoy para
   tener un borde de 2px hay que encadenar .border + .border-2.
   Estas si ponen el shorthand completo, de modo que una sola clase
   basta y el grosor y el estilo nunca se separan.

   Usa el shorthand a proposito, y por eso van ANTES que
   .border-color-*: las dos familias son !important y tienen la
   misma especificidad, asi que gana la que aparece despues en este
   archivo. Con este orden el color siempre le gana al grosor, sin
   importar el orden de las clases en el markup. Si alguien mueve
   este bloque, hay que comprobar que .border-color-* siga debajo.

   El borde sin .border-color-* sale del color de texto
   (currentColor), igual que los componentes que declaran
   "border: 1px solid" sin color (.info-relevante, .chip).

   !important tambien para poder pisar al .border de Bootstrap,
   que es !important y solo tiene especificidad (0,1,0). */

.node-scope .border-1 {
    border: solid 1px !important;
}

.node-scope .border-2 {
    border: solid 2px !important;
}

.node-scope .border-3 {
    border: solid 3px !important;
}

.node-scope .border-4 {
    border: solid 4px !important;
}

.node-scope .border-5 {
    border: solid 5px !important;
}

/* .border-0 va AL FINAL a proposito: si fuera el primero ganaria
   .border-1 ... .border-5 por orden de fuente (misma especificidad,
   los dos !important) y "border-1 border-0" NO quitarian el borde.
   Aqui va ultimo para poder quitar cualquier grosor, y aun asi
   .border-color-* -que viene despues- le sigue gana el color. */

.node-scope .border-0 {
    border: 0 !important;
}

/* ---------- Colores de borde ---------- */

.node-scope .border-color-primary {
    border-color: var(--color-primary) !important;
}

.node-scope .border-color-secondary {
    border-color: var(--color-secondary) !important;
}

.node-scope .border-color-accent {
    border-color: var(--color-accent) !important;
}

.node-scope .border-color-blue-green {
    border-color: var(--color-blue-green) !important;
}

.node-scope .border-color-blue-green-light {
    border-color: var(--color-blue-green-light) !important;
}

.node-scope .border-color-blue-green-medium {
    border-color: var(--color-blue-green-medium) !important;
}

.node-scope .border-color-blue-green-dark {
    border-color: var(--color-blue-green-dark) !important;
}

.node-scope .border-color-green-dark {
    border-color: var(--color-green-dark) !important;
}

.node-scope .border-color-purple {
    border-color: var(--color-purple) !important;
}

.node-scope .border-color-purple-dark {
    border-color: var(--color-purple-dark) !important;
}

.node-scope .border-color-red-light {
    border-color: var(--color-red-light) !important;
}

.node-scope .border-color-blue-dark {
    border-color: var(--color-blue-dark) !important;
}

.node-scope .border-color-gray-extra-light {
    border-color: var(--color-gray-extra-light) !important;
}

.node-scope .border-color-gray {
    border-color: var(--color-gray) !important;
}

.node-scope .border-color-cream {
    border-color: var(--color-cream) !important;
}

.node-scope .border-color-brown {
    border-color: var(--color-brown) !important;
}

.node-scope .border-color-brown-dark {
    border-color: var(--color-brown-dark) !important;
}

.node-scope .border-color-peach-light {
    border-color: var(--color-peach-light) !important;
}

.node-scope .border-color-off-white {
    border-color: var(--color-off-white) !important;
}

.node-scope .border-color-charcoal {
    border-color: var(--color-charcoal) !important;
}

.node-scope .border-color-gold {
    border-color: var(--color-gold) !important;
}

.node-scope .border-color-gold-dark {
    border-color: var(--color-gold-dark) !important;
}

.node-scope .border-color-cream-light {
    border-color: var(--color-cream-light) !important;
}

.node-scope .border-color-green-forest {
    border-color: var(--color-green-forest) !important;
}

.node-scope .border-color-green-leaf {
    border-color: var(--color-green-leaf) !important;
}

.node-scope .border-color-green-fresh {
    border-color: var(--color-green-fresh) !important;
}

.node-scope .border-color-green-pale {
    border-color: var(--color-green-pale) !important;
}

.node-scope .border-color-red-dark {
    border-color: var(--color-red-dark) !important;
}

.node-scope .border-color-purple-light {
    border-color: var(--color-purple-light) !important;
}

.node-scope .border-color-green-light {
    border-color: var(--color-green-light) !important;
}

.node-scope .border-color-gray-light {
    border-color: var(--color-gray-light) !important;
}

.node-scope .border-color-gray-dark {
    border-color: var(--color-gray-dark) !important;
}

.node-scope .border-color-white {
    border-color: var(--color-white) !important;
}

/* ---------- Tonos para hover de botones ---------- */

.node-scope .border-color-primary-dark {
    border-color: var(--color-primary-dark) !important;
}

.node-scope .border-color-text-dark {
    border-color: var(--color-text-dark) !important;
}

.node-scope .border-color-muted-dark {
    border-color: var(--color-muted-dark) !important;
}

.node-scope .border-color-subtitle-dark {
    border-color: var(--color-subtitle-dark) !important;
}

.node-scope .border-color-red-extra-dark {
    border-color: var(--color-red-extra-dark) !important;
}

.node-scope .border-color-purple-extra-dark {
    border-color: var(--color-purple-extra-dark) !important;
}

.node-scope .border-color-green-extra-dark {
    border-color: var(--color-green-extra-dark) !important;
}

.node-scope .border-color-green-forest-dark {
    border-color: var(--color-green-forest-dark) !important;
}

.node-scope .border-color-green-leaf-dark {
    border-color: var(--color-green-leaf-dark) !important;
}

.node-scope .border-color-blue-green-extra-dark {
    border-color: var(--color-blue-green-extra-dark) !important;
}

.node-scope .border-color-gray-extra-dark {
    border-color: var(--color-gray-extra-dark) !important;
}

.node-scope .border-color-blue-extra-dark {
    border-color: var(--color-blue-extra-dark) !important;
}

.node-scope .border-color-brown-extra-dark {
    border-color: var(--color-brown-extra-dark) !important;
}

.node-scope .border-color-charcoal-dark {
    border-color: var(--color-charcoal-dark) !important;
}

.node-scope .border-color-gold-extra-dark {
    border-color: var(--color-gold-extra-dark) !important;
}

/* ---------- Colores de texto ---------- */

.node-scope .text-color-white {
    color: var(--color-white) !important;
}

.node-scope .text-color-primary {
    color: var(--color-primary) !important;
}

.node-scope .text-color-secondary {
    color: var(--color-secondary) !important;
}

.node-scope .text-color-accent {
    color: var(--color-accent) !important;
}

.node-scope .text-color-blue-green {
    color: var(--color-blue-green) !important;
}

.node-scope .text-color-blue-green-light {
    color: var(--color-blue-green-light) !important;
}

.node-scope .text-color-blue-green-medium {
    color: var(--color-blue-green-medium) !important;
}

.node-scope .text-color-blue-green-dark {
    color: var(--color-blue-green-dark) !important;
}

.node-scope .text-color-green-dark {
    color: var(--color-green-dark) !important;
}

.node-scope .text-color-purple {
    color: var(--color-purple) !important;
}

.node-scope .text-color-purple-dark {
    color: var(--color-purple-dark) !important;
}

.node-scope .text-color-red-light {
    color: var(--color-red-light) !important;
}

.node-scope .text-color-blue-dark {
    color: var(--color-blue-dark) !important;
}

.node-scope .text-color-gray-extra-light {
    color: var(--color-gray-extra-light) !important;
}

.node-scope .text-color-gray {
    color: var(--color-gray) !important;
}

.node-scope .text-color-cream {
    color: var(--color-cream) !important;
}

.node-scope .text-color-brown {
    color: var(--color-brown) !important;
}

.node-scope .text-color-brown-dark {
    color: var(--color-brown-dark) !important;
}

.node-scope .text-color-peach-light {
    color: var(--color-peach-light) !important;
}

.node-scope .text-color-off-white {
    color: var(--color-off-white) !important;
}

.node-scope .text-color-charcoal {
    color: var(--color-charcoal) !important;
}

.node-scope .text-color-gold {
    color: var(--color-gold) !important;
}

.node-scope .text-color-gold-dark {
    color: var(--color-gold-dark) !important;
}

.node-scope .text-color-cream-light {
    color: var(--color-cream-light) !important;
}

.node-scope .text-color-green-forest {
    color: var(--color-green-forest) !important;
}

.node-scope .text-color-green-leaf {
    color: var(--color-green-leaf) !important;
}

.node-scope .text-color-green-fresh {
    color: var(--color-green-fresh) !important;
}

.node-scope .text-color-green-pale {
    color: var(--color-green-pale) !important;
}

/* ---------- Tonos para hover de botones ---------- */

.node-scope .text-color-primary-dark {
    color: var(--color-primary-dark) !important;
}

.node-scope .text-color-text-dark {
    color: var(--color-text-dark) !important;
}

.node-scope .text-color-muted-dark {
    color: var(--color-muted-dark) !important;
}

.node-scope .text-color-subtitle-dark {
    color: var(--color-subtitle-dark) !important;
}

.node-scope .text-color-red-extra-dark {
    color: var(--color-red-extra-dark) !important;
}

.node-scope .text-color-purple-extra-dark {
    color: var(--color-purple-extra-dark) !important;
}

.node-scope .text-color-green-extra-dark {
    color: var(--color-green-extra-dark) !important;
}

.node-scope .text-color-green-forest-dark {
    color: var(--color-green-forest-dark) !important;
}

.node-scope .text-color-green-leaf-dark {
    color: var(--color-green-leaf-dark) !important;
}

.node-scope .text-color-blue-green-extra-dark {
    color: var(--color-blue-green-extra-dark) !important;
}

.node-scope .text-color-gray-extra-dark {
    color: var(--color-gray-extra-dark) !important;
}

.node-scope .text-color-blue-extra-dark {
    color: var(--color-blue-extra-dark) !important;
}

.node-scope .text-color-brown-extra-dark {
    color: var(--color-brown-extra-dark) !important;
}

.node-scope .text-color-charcoal-dark {
    color: var(--color-charcoal-dark) !important;
}

.node-scope .text-color-gold-extra-dark {
    color: var(--color-gold-extra-dark) !important;
}

/* ================================================================
   08. LISTAS
================================================================ */

.node-scope ul {
    margin-left: 2rem;
    padding-left: 0;
}

.node-scope ul li {
    padding-left: 0;
}

.node-scope ::marker {
    font-size: 16px;
}

.node-scope .marker-primary li::marker {
    color: var(--color-primary);
}


/* ================================================================
   09. FLEXBOX
================================================================ */

.node-scope .flex {
    display: flex;
    gap: var(--space-md);
}

.node-scope .flex--center {
    align-items: center;
    justify-content: center;
}

.node-scope .flex--between {
    justify-content: space-between;
}

.node-scope .flex--column {
    flex-direction: column;
}

.node-scope .flex--wrap {
    flex-wrap: wrap;
}


/* ================================================================
   10. GRID
================================================================ */

.node-scope .grid {
    display: grid;
    gap: var(--space-md);
}

.node-scope .grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.node-scope .grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.node-scope .grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* ================================================================
   11. NAVEGACIÓN
================================================================ */

.node-scope .cont-menu {
    position: fixed;
    z-index: 5;
    width: 100%;
    top: 120px;
    left: 0;
}

.node-scope .cont-menu .navbar {
    background-color: #E5E7EB;
}

.node-scope .cont-menu .navbar .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.node-scope .cont-menu .navbar .nav-link {
    color: var(--color-text);
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 16px;
    text-decoration: none;
    padding: 12px 20px;
    font-family: var(--font-base);
}

.node-scope .cont-menu .navbar .nav-link:hover {
    color: var(--color-blue-green);
}

.node-scope .cont-menu .navbar .btn-outline-gray:hover {
    color: var(--color-blue-green);
}

/* Menu con indicador de pagina activa (linea 1px #3FAE95, fondo blanco) */

.node-scope .cont-menu--linea .navbar {
    background-color: var(--color-white);
}

.node-scope .cont-menu--linea .nav-link {
    position: relative;
}

.node-scope .cont-menu--linea .nav-link.active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background-color: #3FAE95;
}

/* navegacion Miga de pan */

.node-scope .breadcrumb {
    list-style: none;
    background-color: transparent;
    padding: 0rem 0rem 0rem;
    margin-top: 0 !important;
    margin-bottom: 0;
}

.node-scope .breadcrumb-item a {
    text-decoration: underline;
}



/* ================================================================
   12. HERO IMAGE
================================================================

   Estructura:

   .hero-image
   ├── img
   └── .hero-image__content-wrapper
       └── .hero-image__body
           ├── h1
           ├── h2
           └── p

================================================================ */

.node-scope .hero-image {
    width: 100%;
}

.node-scope .hero-image img {
    flex-grow: 1;
    max-width: 100%;
    height: auto;
    object-position: center center;
    object-fit: cover;
}

.node-scope .hero-image__buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.node-scope .hero-image__content-wrapper {
    width: 100%;
    max-width: 1280px;
    padding-inline: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.node-scope .hero-image__img {
    max-width: 30%;
    object-fit: contain;
}

.node-scope .hero-image__body {
    max-width: 100%;
}

.node-scope .hero-image__body h1 {
    text-align: left;

    font-size: 40px !important;
    line-height: 1;
    color: var(--color-white);
}

.node-scope .hero-image__body h2 {
    font-size: 24px;
    font-weight: var(--fw-regular);
    color: var(--color-cream);
}

.node-scope .hero-image__body p {
    font-size: 16px;
    color: var(--color-text);
    text-align: start;
    margin-top: .5rem;
}


/* ================================================================
   13. BANNERS
================================================================ */

/* ---------- Base ---------- */

.node-scope .banner {
    width: 100%;
    min-height: fit-content;
    padding: 1.5rem 2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 1.5rem;

    text-align: center;

    border-radius: var(--radius-xl);
    background-color: var(--color-white);
}

/* ---------- Info Banner ---------- */

.node-scope .banner--info {
    background-color: var(--color-white);
}

.node-scope .banner__icon i {
    font-size: 3rem;
    color: var(--color-primary);
}

.node-scope .banner__content {
    position: relative;
}

.node-scope .banner__text {
    max-width: 600px;
    margin: 0;

    font-size: 1rem;
    line-height: 1.2;

    color: var(--color-text);
}

/* ---------- CTA Banner ---------- */

.node-scope .banner--cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    padding: 2rem 3rem;

    text-align: left;

    background-color: var(--color-accent);
}

.node-scope .banner--cta .banner__content {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.node-scope .banner--cta .banner__title {
    margin: 0;
    color: var(--color-white);
    font-size: 2rem;
    font-weight: var(--fw-bold);
    line-height: 1.1;
}

.node-scope .banner--cta .banner__text {
    color: rgba(255, 255, 255, .9);
}

.node-scope .banner--cta .banner__action {
    flex-shrink: 0;
}

.node-scope .btn--white {
    display: inline-flex;
    align-items: center;
    gap: .75rem;

    padding: .85rem 1.5rem;

    border-radius: var(--radius-pill);

    background-color: var(--color-white);
    color: var(--color-accent);

    text-decoration: none;
    font-size: .95rem;
    font-weight: var(--fw-semibold);

    transition: transform .3s ease, box-shadow .3s ease;
}

.node-scope .btn--white:hover {
    color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}


/* ================================================================
   14. IMÁGENES
================================================================ */

.node-scope .img-container {
    position: relative;
    height: fit-content;
    max-height: 680px;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.node-scope .img-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.node-scope .img-nota,
.node-scope .img-nota__mob {
    padding: 1.6rem;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 1rem;
}

.node-scope .img-nota {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 100%;
    max-width: 365px;
    box-shadow: 0 8px 32px rgba(78, 78, 79, .37);
}

.node-scope .img-nota__mob {
    position: relative;
    width: 90%;
    margin: 1rem auto;
    box-shadow: 0 -2px 4px rgba(78, 78, 79, .37);
}

.node-scope .img-nota h5,
.node-scope .img-nota__mob h5 {
    margin: 0;
    font-size: 1rem;
}


/* ================================================================
   15. FEATURES
================================================================ */

.node-scope .feature-item {
    width: 100%;
    flex-shrink: 0;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 16px;

    margin-bottom: 1rem;
    padding: 1rem;

    background: var(--color-white);
    border: 1px solid #C8C5D2;
    border-radius: 12px;
}

.node-scope .feature__icon {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--color-green-light);
    border-radius: 50%;
}

.node-scope .feature__icon i {
    color: var(--color-blue-green);
}

.node-scope .feature__content {
    margin: 0;
    font-size: 1rem;
    line-height: 19px;
    text-align: start;
}

.node-scope .feature__content p {
    margin: 0;
}

.node-scope .feature__content p strong {
    color: var(--color-primary);
}


/* -------- Icon features (icono + título) -------- */

.node-scope .icon-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 86px;
    text-align: center;
}

.node-scope .icon-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.node-scope .icon-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 96px;
    line-height: 1;
    color: var(--color-green-forest);
}

.node-scope .icon-feature__title {
    margin: 0;
    font-size: 20px;
}


/* ================================================================
   16. CARDS
================================================================ */

/*------ Cards noticias ------*/

.node-scope .card-revista-hover--horizontal {
    flex-direction: row;
    gap: 1rem;
}

.node-scope .card-revista-hover {
    margin-bottom: 0rem;
    position: relative;
    background: none;
    padding: 0;
}

.node-scope .card-revista-hover--horizontal .card-revista-hover__img a img {
    height: auto;
    max-height: 260px;
    max-width: 200px;
}

.node-scope .card-revista-hover__img {
    max-width: 200px;
}

.node-scope .card-revista-hover__content {
    padding: 0px 0 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
}


/*Card hover modal - drupal*/

.node-scope .card_hover--modal .card_hover__heading {
    border-left: none !important;
    position: absolute;
    bottom: 0;
    padding-left: 10px;
    padding-bottom: 10px;
    z-index: 1;
}

.card_hover--modal .modal-header .modal-title {
    color: #fff;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 1.25em;
}

/* ==========================================
   CARROUSEL - CARDS
========================================== */
.node-scope .splide__slide img {
    vertical-align: bottom;
    border-radius: 8px;
}

.card-modal__content {
    cursor: pointer;
    position: relative;
    background-color: var(--color-purple-dark);
}

.node-scope .card-modal__content {
    border-radius: 8px;
}

.node-scope .card-modal__content-heading {
    position: absolute;
    padding: .75rem;
    min-height: 15%;
    width: 100%;
    text-align: left;
    background-color: var(--color-white);
    bottom: 0;
    right: 0;
    display: flex;
    align-items: start;
    border-radius: 0 0px 8px 8px;
    backdrop-filter: blur(10px);

}

.node-scope .card-modal__heading {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin: 0;
}

.node-scope .h4,
.node-scope h4 {
    font-size: 1.125rem;
}



/* ==========================================
   HISTORIAL - CARDS
========================================== */

.node-scope .history-grid {
    margin-bottom: 30px;
}


/* ==========================================
   CARD
========================================== */

.node-scope .history-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}


.node-scope .history-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}


/* ==========================================
   IMAGEN
========================================== */

.node-scope .history-card__image {
    position: relative;
    width: 100%;
    height: 190px;
    overflow: hidden;
}


.node-scope .history-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* ==========================================
   BADGE AÑO
========================================== */

.node-scope .history-card__year {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    background: var(--color-purple);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    z-index: 2;
}


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

.node-scope .history-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px;
}


.node-scope .history-card__title {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-text);
}


.node-scope .history-card__description {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: var(--color-text);
}


/* ==========================================
   BOTÓN
========================================== */

.node-scope .history-card__button {
    align-self: flex-end;
    margin-top: auto;
    padding: 5px 14px;
    border: 0;
    border-radius: 20px;
    background: var(--color-purple);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease,
        transform 0.2s ease;
}


.node-scope .history-card__button:hover {
    background: var(--color-purple-dark);
    transform: translateY(-1px);
}


/* ==========================================
   PAGINACIÓN
========================================== */

.node-scope .history-pagination {
    margin-top: 25px;
}


.node-scope .history-pagination .page-link {
    color: var(--color-purple);
    border: 0;
    font-size: 13px;
    margin: 0 2px;
    border-radius: 50%;
}


.node-scope .history-pagination .page-item.active .page-link {
    background: var(--color-purple);
    color: #fff;
}


.node-scope .history-pagination .page-item.disabled .page-link {
    color: #aaa;
    background: transparent;
}


/* ==========================================
   MODAL
========================================== */

.node-scope .history-modal {
    border: 0;
    border-radius: 8px;
    overflow: hidden;
}


.node-scope .history-modal .modal-header {
    border-bottom: 1px solid #eee;
}


.node-scope .history-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
}


/* ==========================================
   IMAGEN MODAL
========================================== */

.node-scope .history-modal__image {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}


.node-scope .history-modal__image img {
    width: 100%;
    max-height: 400px;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}


.node-scope .history-modal__year {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 4px 16px;
    background: var(--color-purple);
    color: var(--color-white);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid var(--color-purple);
}


.node-scope .history-modal__content {
    font-size: 18px;
    line-height: 1.6;
    white-space: pre-line;
    color: #444;
    display: flex;
    align-items: flex-start;
}

/* ================================================================
   CONTACT CARD
================================================================ */

/* ===== CONTENEDOR ===== */

.node-scope .contact-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 110px;
    background-color: var(--color-white);
    border: 1px solid #eeeeee;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
    overflow: hidden;
    transition: transform .3s ease,
        box-shadow .3s ease;
}


/* ===== HOVER ===== */

.node-scope .contact-card:hover {
    transform: translateY(-2px);

    box-shadow: 0 6px 14px rgba(0, 0, 0, .16);
}


/* ===== ICONO ===== */

.node-scope .contact-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-width: 58px;
    align-self: stretch;
    border-right: 1px solid #e5e5e5;
    color: var(--color-primary);
    font-size: 20px;
}


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

.node-scope .contact-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px 16px;
    min-width: 0;
}


/* ===== TÍTULO ===== */

.node-scope .contact-card__title {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}


/* ===== DESCRIPCIÓN ===== */

.node-scope .contact-card__description {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: var(--fw-regular);
    line-height: 1.3;
}


/* ===== ACCIÓN / CORREO ===== */

.node-scope .contact-card__action {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .3s ease;
    margin-top: 8px;
}


.node-scope .contact-card__action:hover {
    background-color: var(--color-purple-dark);
    color: var(--color-white);
}


/* ================================================================
   SOCIAL
================================================================ */

.node-scope .contact-card__socials {
    display: flex;
    align-items: center;

    gap: 10px;
}


.node-scope .contact-card__social-link {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);

    font-size: 22px;

    line-height: 1;

    text-decoration: none;

    transition: color .3s ease,
        transform .3s ease;
}


.node-scope .contact-card__social-link:hover {
    color: var(--color-accent);

    transform: translateY(-2px);
}


/* Card hover - boton drupal */
.node-scope .card_hover__subheading {
    color: white !important;
    opacity: 0;
    text-align: center;
    background: var(--color-purple);
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 8px 1.5rem;
    border-radius: 30px;
    position: absolute;
    top: 50% !important;
    left: 0px !important;
    right: 0px !important;
    transform: translateY(-50%) !important;
    transition: all .35s;
    z-index: 3;
    font-weight: normal;
}

.node-scope .card_hover__subheading p {
    color: var(--color-white) !important;
    margin: 0;
    font-size: 16px;
}

.node-scope .card_hover:hover .card_hover__subheading {
    opacity: 1;
}

.node-scope .card_hover:hover .card_hover__subheading p {
    color: white !important;
    margin: 0;
    font-size: 16px;
}


/* ---------- Card Hover - drupal ---------- */
.node-scope .card_hover {
    border-radius: 8px;
}


.node-scope .card_hover::before {
    background-image: linear-gradient(to bottom, rgb(0 0 0 / 2%) 10%, rgb(0 0 0 / 60%) 100%);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    opacity: 1;
    z-index: 1;
}

.node-scope .card_hover:hover::before {
    background-image: linear-gradient(180deg, #0f685e00 10%, #032823c9 70%);
    transition: all .8s ease-in-out;
}

.node-scope .card_hover__content-title {
    padding: .5rem;
    border-left: none;

}

.node-scope .card_hover:hover::after {
    background-image: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    opacity: 1;
    z-index: 2;
    transition: all .3s ease-in-out;
}


/* ---------- Card horizontal basica ---------- */
.node-scope .card-horizontal {
    display: flex;
    align-items: start;
    justify-content: space-between;
    background-color: transparent;
    transition: transform .3s ease, box-shadow .3s ease;
    border-bottom: 1px solid var(--color-gray-light);
    padding: 2rem 0;
    min-height: fit-content;

}

.node-scope .card-horizontal p {
    line-height: 1.2;

}


/* ---------- Card general ---------- */

.node-scope .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.node-scope .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.node-scope .card .card__body {
    margin: 0;
}

.node-scope .card .card__body p {
    margin-bottom: 0;
}

.node-scope .card__text {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.1;
}

.node-scope .card .card__icon i {
    font-size: 2.5rem !important;
}


/* ---------- Card general con imagen ---------- */

.node-scope .card-general {
    width: 100%;
    max-width: 456px;
    display: flex;
    flex-direction: column;
    border: 1px solid #E2E2E2;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    height: 100%;
    justify-content: space-between;
}

.node-scope .card-general:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .10);
}

.node-scope .card-general__image {
    width: 100%;
    height: 297px;
    overflow: hidden;
}

.node-scope .card-general__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.node-scope .card-general__content {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.5rem;
}

.node-scope .card-general__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--color-green-leaf);
}

.node-scope .card-general__description {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
}

.node-scope .card-general .card-general__button {
    width: 100%;
    margin-top: auto;
}


/* ---------- Topic Card ---------- */

.node-scope .card--topic {
    min-height: 90px;
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1rem;
    height: 100%;
    padding: 1rem 1.25rem;
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}

.node-scope .card--topic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.node-scope .card--topic .card__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0px;
}

.node-scope .card--topic .card__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.4rem;
}

.node-scope .card--topic .card__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.node-scope .card--topic .card__body h3 {
    margin: 0;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--color-primary);
}

.node-scope .card__eyebrow {
    color: var(--color-primary);
    font-size: .85rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.node-scope .card--topic .card__title {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: var(--fw-medium);
    line-height: 1.3;
}

/* ---------- Topic list (listado agrupado horizontal) ---------- */

.node-scope .topic-list {
    display: flex;
    flex-wrap: wrap;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.node-scope .topic-list__item {
    flex: 1 1 0;
    min-width: 220px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
    padding: 1.25rem 1.5rem;
}

.node-scope .topic-list__item>.box-icon {
    flex-shrink: 0;
}

.node-scope .topic-list__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.node-scope .topic-list__item+.topic-list__item {
    border-left: 1px solid var(--color-border);
}

.node-scope .topic-list__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
}

.node-scope .topic-list__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.node-scope .topic-list__link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: color .3s ease;
}

.node-scope .topic-list__link:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .node-scope .topic-list__item {
        flex: 1 1 100%;
    }

    .node-scope .topic-list__item+.topic-list__item {
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
}

/* -------- Topic list vertical -------- */

.node-scope .topic-list--vertical {
    flex-direction: column;
    align-items: stretch;
}

.node-scope .topic-list--vertical .topic-list__item {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.node-scope .topic-list--vertical .topic-list__item+.topic-list__item {
    border-left: none;
    border-top: 1px solid var(--color-border);
}

/* ---------- Education stats (datos destacados) ---------- */

.node-scope .education-stats__item {
    height: 100%;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background-color: var(--color-green-pale);
    border: 1px solid var(--color-green-fresh);
    border-radius: 10px;
}

.node-scope .education-stats__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green-forest);
    font-size: 1.7rem;
    gap: .5rem;
    padding: .5rem 0px;
}

.node-scope .education-stats__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

.node-scope .education-stats__value {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--color-green-forest);
}

.node-scope .education-stats__label {
    margin: 0;
    font-size: .95rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-green-dark);
}

/* Variante: icono inline dentro del valor */

.node-scope .education-stats--value-icon .education-stats__value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* ------ card perfil ------- */

.node-scope .card-profile-person img {
    border-radius: 100%;
    max-width: 140px;
    border: solid 7px var(--color-green-fresh);
    width: 100%;
    max-height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0px;
    -o-object-fit: cover;
    object-fit: cover;
    height: 140px;
}

.node-scope .card-profile-person {
    position: relative;
    display: flex;
    background: #fff;
    color: #222;
    width: 100%;
    border: 1px solid #dadae5;
    padding: 1.5rem .6rem 1.5rem .6rem;
    min-height: 100%;
    border-radius: 8px;
}

/* ---------- Card outlined ---------- */

.node-scope .card.card--outlined {
    border: 1px solid #E2E2E2;
    border-radius: 12px;
    padding: 26px 23px;
}

.node-scope .card--outlined .card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.node-scope .card--outlined .card__header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--color-text);
}

/* ---------- Card CTA Observatorio ---------- */

.node-scope .card-cta.card-cta--observatorio {
    border-radius: 8px;
}

.node-scope .card-cta--observatorio .card-cta__image img {
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0px 0px;
}

.node-scope .card-cta--observatorio .card-cta__image {
    border-bottom: none;
}

.node-scope .card-cta--observatorio .card-cta__heading {
    color: var(--color-text);
    text-align: start;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
}

.node-scope .card-cta__content {
    min-height: 230px;
}



.node-scope .card-cta--observatorio .card-cta__body {
    font-size: 1.2rem;
    min-height: 100px;
    line-height: 1.2;
}


.node-scope .card-cta--observatorio .card-cta__link-content .card-cta__link {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-primary);
    padding: 8px 16px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    transition: .2s;
    border-radius: 30px;
}

.node-scope .card-cta--observatorio .card-cta__link-content .card-cta__link {
    border: solid 2px var(--color-primary);
    padding: 7px 16px 7px 16px;
    text-decoration: none;
    font-weight: 400;
    display: inline-block;
}

.node-scope .card-cta--observatorio .card-cta__link-content .card-cta__link::after {
    color: var(--color-white);
    margin-left: 5px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    content: "";
}

/* Card list - drupal - card cta observatorio */

.node-scope .card-list {
    margin-bottom: 30px;
}

.node-scope .card-cta {
    background-color: #fff;
    margin-top: 0px;
    box-shadow: 0 0 14px #c5c5c5;
    height: 100%;
}

/* ---------- Testimonial Card ---------- */

.node-scope .cards-testimonios {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    gap: 10px;
}

.node-scope .card-testimonio {
    width: 100%;
    max-width: 416px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    background-color: var(--color-white);
    border-radius: 16px 16px 0 0;
}

.node-scope .card-testimonio__image {
    position: relative;
    width: 100%;
}

.node-scope .card-testimonio__image img {
    width: 100%;
    height: auto;
}

.node-scope .card-testimonio__wrapper {
    position: absolute;
    inset: 0;

    display: flex;

    z-index: 2;

    border-radius: 16px 16px 0 0;
    background-color: rgba(55, 55, 55, .6);
}

.node-scope .card-testimonio__shape i {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    cursor: pointer;

    z-index: 3;

    font-size: 5rem;
    color: var(--color-white);
}

.node-scope .card-testimonio__image .badge-purple-light {
    position: absolute;
    left: 10px;
    bottom: 10px;

    z-index: 4;

    padding: .5rem 1.5rem;

    border: 1px solid var(--color-purple);
    border-radius: 2rem;

    background-color: var(--color-purple-light);
    color: var(--color-purple);
}

.node-scope .card-testimonio__content {
    width: 100%;
    max-width: 416px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;

    padding: 10px 20px;

    background-color: var(--color-white);
    border-radius: 0 0 16px 16px;

    color: var(--color-purple);
}

.node-scope .card-testimonios__content--header h3 {
    margin: 0;
    color: var(--color-purple);
    font-family: var(--font-heading);
    font-size: 1.3em;
    line-height: 1.2;
}

.node-scope .card-testimonios__content--header p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}


/* ================================================================
   17. PARTNERS / LOGOS
================================================================

   Componente reutilizable para:
   - Organizaciones
   - Patrocinadores
   - Aliados
   - Universidades
   - Convenios

   El título queda fuera del componente y lo administra Drupal/CMS.

================================================================ */

.node-scope .partners-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 2rem;

    align-items: center;
}

.node-scope .partners-grid__item {
    min-height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;
}

.node-scope .partners-grid__logo {
    width: 100%;
    max-width: 180px;
    height: auto;

    object-fit: contain;

    opacity: .9;

    transition: transform .3s ease, opacity .3s ease;
}

.node-scope .partners-grid__item:hover .partners-grid__logo {
    opacity: 1;
    transform: scale(1.05);
}


/* ================================================================
   18. LISTADOS / PROGRAMACIÓN
================================================================ */

.node-scope .list-invitados {
    height: fit-content;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    list-style: none;

    padding: 0;
    margin: 0;
}

.node-scope .list-invitados .item-invitado {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-bottom: 1rem;
    padding-left: 20px;
}

.node-scope .list-invitados .item-invitado::before {
    content: "";

    position: absolute;
    top: 7px;
    left: 0;

    width: 10px;
    height: 10px;

    margin-right: 10px;

    border-radius: 50%;
    background-color: var(--color-primary);
}

.node-scope .list-invitados .item-invitado span {
    color: var(--color-primary);
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 24px;
}

.node-scope .programacion-item {
    padding: 10px 0;
    border-bottom: 1px solid #E2E2E2;
}

.node-scope .programacion-item h5,
.node-scope .programacion-item p {
    margin: 0;
}

.node-scope .programacion-item ul {
    margin: 0;
    padding-left: 20px;
}

.node-scope .programacion-item ul li {
    margin-bottom: 5px;
    padding-left: 0;

    color: var(--color-text);
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 24px;
}


/* ================================================================
   19. EVENTOS
================================================================ */

.node-scope .events {
    width: 100%;
}

.node-scope .event-card {
    display: flex;
    gap: 24px;

    padding: 24px 0;

    border-bottom: 1px solid #E4E4E4;
}

.node-scope .event-date {
    width: 72px;
    min-width: 72px;
    height: 72px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid #7AC6C6;
    border-radius: 8px;

    background-color: var(--color-blue-green-light);
    color: var(--color-blue-green);

    text-align: center;
}

.node-scope .event-date .day {
    font-size: 34px;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.node-scope .event-date .month {
    margin-top: 6px;
    font-size: 12px;
    text-transform: capitalize;
}

.node-scope .event-content {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.node-scope .event-title {
    margin: 0 0 12px;

    color: #283583;

    font-size: 22px;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.node-scope .event-description {
    margin: 0;

    color: #555;

    font-size: 1rem;
    line-height: 1.7;
}

.node-scope .event-footer {
    margin-top: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.node-scope .event-location {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #0C9AA4;
    font-size: 14px;
}

.node-scope .event-location svg {
    flex-shrink: 0;
}

.node-scope .event-button {
    padding: 10px 20px;

    border-radius: 50px;

    background: #0C9AA4;
    color: var(--color-white);

    text-decoration: none;

    font-size: 14px;
    font-weight: var(--fw-semibold);

    transition: background-color .25s ease;
}

.node-scope .event-button:hover {
    background: #087E85;
}

/* ---------- Paginador ---------- */

.node-scope .events-pagination {
    margin-top: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}

.node-scope .events-pagination button {
    cursor: pointer;

    padding: 10px 18px;

    border: none;
    border-radius: 30px;

    background: #F4F4F4;

    transition: .3s ease;
}

.node-scope .events-pagination button:hover:not(:disabled) {
    background: #0C9AA4;
    color: var(--color-white);
}

.node-scope .events-pagination button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.node-scope .pages {
    display: flex;
    gap: 8px;
}

.node-scope .page-btn {
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
}

.node-scope .page-btn.active {
    background: #0C9AA4 !important;
    color: var(--color-white);
}


/* ================================================================
   20. TIMELINE
================================================================ */

.node-scope .timeline-wrapper {
    position: relative;
    width: 100%;
}

.node-scope .timeline-track-wrapper {
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.node-scope .timeline-track {
    position: relative;

    width: max-content;

    display: flex;
    align-items: flex-start;

    gap: 2rem;

    padding: 20px 0 32px;

    transition: transform .4s ease;
}

.node-scope .timeline-track::before {
    content: "";

    position: absolute;
    top: 112px;
    left: 0;

    width: 500%;
    height: 2px;

    z-index: 1;

    background: #C9C9C9;
}

.node-scope .timeline-item {
    position: relative;

    flex: 0 0 248px;

    z-index: 2;
}

.node-scope .timeline-card {
    margin-bottom: 28px;
}

.node-scope .timeline-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 18px;

    background: var(--color-blue-green-light);
    color: var(--color-blue-green);

    font-size: 20px;
    font-weight: var(--fw-bold);

    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.node-scope .timeline-date svg {
    width: 20px;
    height: 20px;
}

.node-scope .timeline-dot {
    position: relative;

    width: 18px;
    height: 18px;

    margin-bottom: 24px;

    z-index: 3;

    border-radius: 50%;

    background: var(--color-blue-green);
}

.node-scope .timeline-title {
    margin: 0;

    color: #6B6B6B;

    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.node-scope .timeline-controls {
    margin-top: 10px;

    display: flex;
    justify-content: center;

    gap: 18px;
}

.node-scope .timeline-btn {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: var(--color-blue-green);
    color: var(--color-white);

    cursor: pointer;

    transition: transform .25s ease;
}

.node-scope .timeline-btn:hover {
    transform: scale(1.05);
}

.node-scope .timeline-btn.disabled {
    opacity: .35;
    pointer-events: none;
}


/* ================================================================
   21. MENSAJES
================================================================ */

.node-scope .mensaje-primary {
    padding: 1.5rem;

    border-left: 10px solid var(--color-primary);
    border-radius: 0 16px 16px 0;

    background-color: var(--color-red-light);

    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
}

.node-scope .mensaje-primary h4 {
    color: var(--color-primary);
}

.node-scope .mensaje-primary ul {
    margin: 0 auto 28px;
    padding-left: 16px;
}

.node-scope .mensaje-primary li {
    margin: 0;
    padding: 0;
}

.node-scope .mensaje-primary li::marker {
    color: var(--color-primary);
    font-size: 20px;
}


/* ================================================================
   22. READ MORE
================================================================ */

.node-scope .read-more {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.node-scope .read-more__content {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;

    transition: all .4s ease;
}

/* Nº de líneas visibles al colapsar. Sobrescribir por instancia:
   .read-more { --lines: 3; } */
.node-scope .read-more {
    --lines: 2;
}

.node-scope .read-more.collapsed .read-more__content {
    -webkit-line-clamp: var(--lines);
}

.node-scope .read-more.collapsed::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 30px;

    width: 100%;
    height: 60px;

    background: linear-gradient(to bottom, transparent, white);

    pointer-events: none;
}

.node-scope .read-more__btn {
    margin-top: 10px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    border: none;
    background: none;

    color: var(--color-primary);

    cursor: pointer;
    font-weight: var(--fw-regular);
}


/* ================================================================
   23. TABS
================================================================ */

.node-scope .tab-bootstap .nav {
    flex-wrap: nowrap;
    margin-bottom: 10px;
    box-shadow: none;
    display: flex;
    gap: 10px;
}

.node-scope .tab-bootstap .tab-content {
    width: 100%;
    padding: 0px;
    max-width: 1280px;
    background: var(--color-white);
    border-radius: 16px;
    margin: 0 auto;
}

.node-scope .nav-tabs {
    margin-left: 0px !important;
}

.node-scope .tab-bootstap .nav-link.active {
    color: var(--color-text);
    background-color: transparent;
}

.node-scope .tab-bootstap .nav-link span {
    margin-right: 5px;
    color: #475569;
    font-size: 1.2rem;
}

.node-scope .tab-bootstap .nav-link.active span {
    color: var(--color-primary);
}

.node-scope .tab-bootstap .nav-link.active a {
    color: var(--color-blue-green-medium);
    margin-left: 0px;
    position: relative;
    font-weight: var(--fw-bold) !important;
}

.node-scope .tab-bootstap .nav-link.active a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-blue-green-medium);
}

@media (max-width: 767px) {
    .tab-bootstap .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 55px;
        height: auto;
        padding: 10px;
        border: none;
        border-radius: 0;
        color: var(--color-blue-green-medium);
        font-weight: 400;
        box-shadow: none;
        transform: none;
    }
}

.node-scope .tab-bootstap .nav-link a {
    color: #475569;
    margin-left: 0px;
}

/* ---------- Vertical ---------- */

.node-scope .tab-bootstap--vertical .nav-item,
.node-scope .tab-bootstap--horizontal .nav-item {
    width: fit-content;
    margin-bottom: 10px;
    background-color: transparent;
}

.node-scope .tab-bootstap--vertical .nav-link,
.node-scope .tab-bootstap--horizontal .nav-link {
    min-height: fit-content;
    padding: 0px;
    border: none;
    border-radius: 0px;
    transition: all .2s;
}

.node-scope .tab-bootstap--vertical .nav-link.active,
.node-scope .tab-bootstap--horizontal .nav-link.active {
    box-shadow: none;
    transform: none;
}

.node-scope .tab-bootstap--vertical .nav .link,
.node-scope .tab-bootstap--horizontal .nav .link {
    min-height: fit-content;
    text-align: left !important;
    justify-content: flex-start !important;
    font-family: var(--font-base);
    font-size: 1rem !important;
    font-weight: var(--fw-regular);
    text-decoration: none;
}

.node-scope .tab-content .card {
    border: none;
}

.node-scope .tab-content .card-body {
    flex: 1 1 auto;
    padding: 1rem 0;
}

/* ---------- Variante subrayado (--linea) ----------
   Pestañas sin relleno: separador de 1px bajo la barra y marcador
   de 2px (::after) bajo la pestaña activa.
   Reutiliza el mismo ::after que .cont-menu--linea.
   IMPORTANTE: declarar DESPUÉS de las reglas base. Tiene la misma
   especificidad que ellas, así que gana únicamente por orden. */

.node-scope .tab-bootstap--linea .nav {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-gray-light);
}

.node-scope .tab-bootstap--linea .nav-link {
    position: relative;
    padding: 12px 16px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: #475569;
    font-family: var(--font-base);
    font-weight: var(--fw-regular);
}

.node-scope .tab-bootstap--linea .nav-link span {
    color: var(--color-gray-light);
    font-size: 1rem;
    margin-right: 8px;
}

.node-scope .tab-bootstap--linea .nav-link.active {
    background-color: transparent;
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

.node-scope .tab-bootstap--linea .nav-link.active span {
    color: var(--color-primary);
}

.node-scope .tab-bootstap--linea .nav-link.active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background-color: var(--color-blue-green);
}

/* el contenido deja de ser una caja: superficie continua bajo la barra */
.node-scope .tab-bootstap--linea .tab-content {
    padding: 32px 0 0;
    background: transparent;
    border-radius: 0;
}


/* ================================================================
   24. ACORDEONES
================================================================ */

.node-scope.preguntas .container-default,
.node-scope .content-container-default,
.node-scope.formulario .layout-content {
    padding: 1rem;
    border-radius: 16px;
}

.node-scope.preguntas .accordion-item__heading {
    margin: 0;

    font-family: var(--font-base);
    font-size: 16px;
    font-weight: var(--fw-bold);
}

.node-scope .accordion-button {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    margin-bottom: 1rem;

    text-align: left;

    border-left: none;
}

.node-scope .accordion-item:last-of-type .accordion-button.collapsed {
    border: 1px solid var(--color-blue-green);
    border-radius: 8px;

    background-color: var(--color-blue-green-light);
    color: var(--color-blue-dark);

    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

.node-scope .accordion-button:not(.collapsed) {
    margin-bottom: 0;

    border-radius: 8px;

    background-color: var(--color-blue-green-dark);
    color: var(--color-white);

    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .13);
}

.node-scope .accordion-item__content .accordion-header .accordion-button {
    display: flex;
    justify-content: flex-start;
    gap: .6rem;

    border-left: none;
}

.node-scope .accordion-item__content .accordion-header .accordion-button .accordion-item__heading {
    width: 100%;
    margin-bottom: 0;

    font-family: var(--font-base);
    font-size: 16px;
}


/* ---------- Tabs mobile / accordion ---------- */

.node-scope .tab-accordion-mobile .accordion-header:not(.collapsed) {
    padding: 0;

    border: 1px solid var(--color-primary);
    border-radius: 8px;

    background-color: var(--color-green-light);
}

.node-scope .tab-accordion-mobile .accordion-header:not(.collapsed)>a {
    margin-bottom: 0;
    color: var(--color-primary);
}

.node-scope .tab-accordion-mobile .accordion-header a {
    color: #475569;
    font-size: 1.1rem;
    font-weight: var(--fw-regular);
    text-decoration: none;
}

.node-scope .tab-accordion-mobile .accordion-item {
    padding: 0;
    border: none;
    background-color: var(--color-white);
}


/* ================================================================
   25. GALERÍA
================================================================ */

.node-scope .gallery {
    max-width: 900px;
    margin-inline: auto;
}

.node-scope .gallery-main {
    position: relative;
    overflow: hidden;
}

.node-scope .gallery-main img {
    width: 100%;
    height: 400px;

    object-fit: cover;

    border-radius: 10px;

    opacity: 1;
    transform: translateX(0);

    transition: all .4s ease;
}

.node-scope .gallery-main img.fade-out-left {
    opacity: 0;
    transform: translateX(-30px);
}

.node-scope .gallery-main img.fade-out-right {
    opacity: 0;
    transform: translateX(30px);
}

.node-scope .gallery-main img.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.node-scope .nav-gallery {
    position: absolute;
    top: 50%;

    z-index: 10;

    padding: 10px 15px;

    transform: translateY(-50%);

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, .4);
    color: var(--color-white);

    cursor: pointer;

    font-size: 20px;
}

.node-scope .gallery-main .prev {
    left: 10px;
}

.node-scope .gallery-main .next {
    right: 10px;
}

.node-scope .gallery-thumbs-wrapper {
    position: relative;

    display: flex;
    align-items: center;
}

.node-scope .gallery-thumbs {
    width: 100%;

    display: flex;

    gap: 10px;

    overflow: hidden;

    scroll-behavior: smooth;
}

.node-scope .gallery-thumbs img {
    width: 120px;
    min-width: 120px;
    height: 80px;
    flex-shrink: 0;

    object-fit: cover;

    border-radius: 8px;

    cursor: pointer;

    opacity: .6;

    transition: .3s;
}

.node-scope .gallery-thumbs img:hover,
.node-scope .gallery-thumbs img.active {
    opacity: 1;
}

.node-scope .gallery-thumbs img.active {
    border: 2px solid var(--color-green-light);
}

.node-scope .thumb-nav {
    position: absolute;

    bottom: 0;

    z-index: 2;

    height: 80px;

    padding: 8px 12px;

    border: none;
    border-radius: 0;

    background: rgba(0, 0, 0, .4);
    color: var(--color-white);

    cursor: pointer;
}

.node-scope .thumb-nav.prev {
    left: 0;
}

.node-scope .thumb-nav.next {
    right: 0;
}


/* ================================================================
   26. TICKER
================================================================ */


/* ===== CONTENEDOR ===== */

.node-scope .ticker {
    width: 100%;
    overflow: hidden;
    padding: .65rem 0;
}


/* ===== TRACK ===== */

.node-scope .ticker-track {
    display: flex;
    width: max-content;

    will-change: transform;

    animation: ticker-left 30s linear infinite;
}


/* ===== TRACK INVERSO ===== */

.node-scope .ticker-track--reverse {
    animation: ticker-right 30s linear infinite;
}


/* ===== GRUPO ===== */

.node-scope .ticker-group {
    display: flex;
    align-items: center;

    gap: 4rem;

    flex-shrink: 0;

    padding-right: 4rem;
}


/* ===== ITEM ===== */

.node-scope .ticker-group span {
    display: flex;
    align-items: center;
    gap: 1rem;

    flex-shrink: 0;

    padding: 16px;

    border-radius: 12px;

    background-color: var(--color-white);
    color: var(--color-primary);

    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);

    font-family: var(--font-base);
    font-size: 18px;
    font-weight: var(--fw-bold);

    line-height: 1;

    white-space: nowrap;
    text-transform: uppercase;
}


/* ===== ICONO ===== */

.node-scope .ticker-group span i {
    flex-shrink: 0;
    color: var(--color-primary);
}


/* ================================================================
   ANIMACIONES
================================================================ */


/* Fila superior
   ← ← ← ← ←
*/

@keyframes ticker-left {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* Fila inferior
   → → → → →
*/

@keyframes ticker-right {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }

}

/* ================================================================
   27. CONTACTO
================================================================ */

.node-scope.bgc-contact .layout-content {
    width: 100%;
    min-height: 180px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 20px;

    border-radius: 16px;

    background-image: url("https://urosario.edu.co/sites/default/files/2026-05/fondo-contacto_0.webp") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.node-scope .redes-contacto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0;

    margin-top: 1.5rem;
    margin-bottom: 0;

    padding-left: 0;

    list-style: none;
}

.node-scope .redes-contacto-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;
}

.node-scope .redes-contacto-item i,
.node-scope .redes-contacto-item a {
    color: var(--color-white);
    font-size: 20px;
}


/* ---------- Pilares ---------- */

.node-scope .pilar {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}


/* ================================================================
   28. TABLAS
================================================================ */

.node-scope table {
    width: 100%;

    border: 1px solid #E2E2E2;
    border-collapse: collapse;
    border-radius: 16px;

    background-color: var(--color-white);

    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

.node-scope table thead {
    background-color: var(--color-green-light);
    color: var(--color-primary);
    font-size: 20px;
    font-weight: var(--fw-bold);
}

.node-scope table thead th {
    padding: 12px 20px;

    font-family: var(--font-base);
    font-size: 16px;
    font-weight: var(--fw-extrabold);
    line-height: 24px;

    text-align: center;
}

.node-scope table tbody {
    background-color: var(--color-white);
}

.node-scope table tbody td {
    padding: 12px 20px;

    border-bottom: 1px solid #E2E2E2;

    font-family: var(--font-base);
    font-size: 16px;
    font-weight: var(--fw-medium);
    line-height: 24px;
}

.node-scope table tbody tr td:first-child {
    border-right: 1px solid #E2E2E2;
}

.node-scope table tr td:last-child {
    text-align: center;
}


/* ================================================================
   29. MODALES
================================================================ */


.node-scope .modal-profile__image {
    border-radius: 0 !important;
    max-width: none;
    border: solid 7px var(--color-green-fresh);
    width: 100%;
    max-height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0px;
    -o-object-fit: cover;
    object-fit: cover;
    height: auto;
}


/* Modal perfil */

.node-scope .card-profile-person .modal .modal-body {
    padding: 2rem 2rem;
}

.node-scope .card-profile-person__content {
    cursor: pointer;
    width: 100%;
    text-align: start
}


/* modal paginado */

.node-scope .modal-header h2 {
    margin-bottom: 0;
    font-size: 1.25rem;
}


.node-scope .card-carousel .splide__arrow.splide__arrow--prev:hover::before,
.node-scope .card-carousel .splide__arrow.splide__arrow--next:hover::before {
    color: var(--color-primary);
}

.modal-carousel .modal-content {
    padding: 0px;
}

.node-scope .modal-carousel .modal-header button {
    position: absolute;
    margin: 0;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
}

.node-scope .btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #fff;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
}

.node-scope .modal-carousel .row-1 {
    max-width: 100%;
    width: auto;

}

.node-scope .imgModal {
    display: none;
}

.node-scope .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.node-scope .modal-header {
    background-color: var(--color-gold-dark);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.node-scope .modal-header h5 {
    margin: 0;

    color: var(--color-white);

    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}


/* ================================================================
   30. BOTONES
================================================================ */

/* ---------- Icon redes ---------- */
.node-scope .box-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;

    font-family: var(--font-base);
    font-size: 20px;
    font-weight: var(--fw-bold);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all .3s ease;
}

.node-scope .box-icon:hover {
    border-color: var(--color-red-light);
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ---------- Variantes de color ----------

   Mismo criterio que la familia .btn-icon: el color del icono lo
   decide el contraste del relleno.
   - Rellenos oscuros (19): icono --color-white.
   - Rellenos claros (3): icono --color-text.
   El hover es el token -dark / -extra-dark de la misma familia, con
   icono blanco. El icono hereda el color de la caja: no se declara
   color por token sobre el <i>.

   Una caja de icono no lleva texto, asi que el umbral aplicable es el
   de elemento grafico (WCAG 1.4.11, 3:1). Esta matriz llega ademas a
   4.5:1 en los 22 casos, que es el liston que usa .btn-icon.

   Los selectores son compuestos (dos clases) a proposito:
   asi el hover de la variante gana siempre al hover generico de la
   base, que aplica en cualquier .box-icon.
   ------------------------------------------------------------ */

/* Rellenos oscuros: icono blanco */

.node-scope .box-icon.box-icon--primary,
.node-scope .box-icon.box-icon--red,
.node-scope .box-icon.box-icon--red-dark,
.node-scope .box-icon.box-icon--purple,
.node-scope .box-icon.box-icon--purple-dark,
.node-scope .box-icon.box-icon--green-forest,
.node-scope .box-icon.box-icon--green-dark,
.node-scope .box-icon.box-icon--green-leaf,
.node-scope .box-icon.box-icon--blue-green-dark,
.node-scope .box-icon.box-icon--gray,
.node-scope .box-icon.box-icon--gray-dark,
.node-scope .box-icon.box-icon--blue-dark,
.node-scope .box-icon.box-icon--brown,
.node-scope .box-icon.box-icon--brown-dark,
.node-scope .box-icon.box-icon--charcoal,
.node-scope .box-icon.box-icon--gold-dark,
.node-scope .box-icon.box-icon--muted,
.node-scope .box-icon.box-icon--subtitle,
.node-scope .box-icon.box-icon--text {
    color: var(--color-white);
}

.node-scope .box-icon.box-icon--primary,
.node-scope .box-icon.box-icon--red {
    background-color: var(--color-primary);
}

.node-scope .box-icon.box-icon--primary:hover,
.node-scope .box-icon.box-icon--red:hover {
    background-color: var(--color-primary-dark);
}

.node-scope .box-icon.box-icon--red-dark {
    background-color: var(--color-red-dark);
}

.node-scope .box-icon.box-icon--red-dark:hover {
    background-color: var(--color-red-extra-dark);
}

.node-scope .box-icon.box-icon--purple {
    background-color: var(--color-purple);
}

.node-scope .box-icon.box-icon--purple:hover {
    background-color: var(--color-purple-dark);
}

.node-scope .box-icon.box-icon--purple-dark {
    background-color: var(--color-purple-dark);
}

.node-scope .box-icon.box-icon--purple-dark:hover {
    background-color: var(--color-purple-extra-dark);
}

.node-scope .box-icon.box-icon--green-forest {
    background-color: var(--color-green-forest);
}

.node-scope .box-icon.box-icon--green-forest:hover {
    background-color: var(--color-green-forest-dark);
}

.node-scope .box-icon.box-icon--green-dark {
    background-color: var(--color-green-dark);
}

.node-scope .box-icon.box-icon--green-dark:hover {
    background-color: var(--color-green-extra-dark);
}

.node-scope .box-icon.box-icon--green-leaf {
    background-color: var(--color-green-leaf);
}

.node-scope .box-icon.box-icon--green-leaf:hover {
    background-color: var(--color-green-leaf-dark);
}

.node-scope .box-icon.box-icon--blue-green-dark {
    background-color: var(--color-blue-green-dark);
}

.node-scope .box-icon.box-icon--blue-green-dark:hover {
    background-color: var(--color-blue-green-extra-dark);
}

.node-scope .box-icon.box-icon--gray {
    background-color: var(--color-gray);
}

.node-scope .box-icon.box-icon--gray:hover {
    background-color: var(--color-gray-dark);
}

.node-scope .box-icon.box-icon--gray-dark {
    background-color: var(--color-gray-dark);
}

.node-scope .box-icon.box-icon--gray-dark:hover {
    background-color: var(--color-gray-extra-dark);
}

.node-scope .box-icon.box-icon--blue-dark {
    background-color: var(--color-blue-dark);
}

.node-scope .box-icon.box-icon--blue-dark:hover {
    background-color: var(--color-blue-extra-dark);
}

.node-scope .box-icon.box-icon--brown {
    background-color: var(--color-brown);
}

.node-scope .box-icon.box-icon--brown:hover {
    background-color: var(--color-brown-dark);
}

.node-scope .box-icon.box-icon--brown-dark {
    background-color: var(--color-brown-dark);
}

.node-scope .box-icon.box-icon--brown-dark:hover {
    background-color: var(--color-brown-extra-dark);
}

.node-scope .box-icon.box-icon--charcoal {
    background-color: var(--color-charcoal);
}

.node-scope .box-icon.box-icon--charcoal:hover {
    background-color: var(--color-charcoal-dark);
}

.node-scope .box-icon.box-icon--gold-dark {
    background-color: var(--color-gold-dark);
}

.node-scope .box-icon.box-icon--gold-dark:hover {
    background-color: var(--color-gold-extra-dark);
}

.node-scope .box-icon.box-icon--muted {
    background-color: var(--color-muted);
}

.node-scope .box-icon.box-icon--muted:hover {
    background-color: var(--color-muted-dark);
}

.node-scope .box-icon.box-icon--subtitle {
    background-color: var(--color-subtitle);
}

.node-scope .box-icon.box-icon--subtitle:hover {
    background-color: var(--color-subtitle-dark);
}

.node-scope .box-icon.box-icon--text {
    background-color: var(--color-text);
}

.node-scope .box-icon.box-icon--text:hover {
    background-color: var(--color-text-dark);
}

/* Rellenos claros: icono oscuro, y en hover icono blanco */

.node-scope .box-icon.box-icon--gold,
.node-scope .box-icon.box-icon--blue-green,
.node-scope .box-icon.box-icon--blue-green-light {
    color: var(--color-text);
}

.node-scope .box-icon.box-icon--gold {
    background-color: var(--color-gold);
}

.node-scope .box-icon.box-icon--gold:hover {
    background-color: var(--color-gold-dark);
}

.node-scope .box-icon.box-icon--blue-green {
    background-color: var(--color-blue-green);
}

.node-scope .box-icon.box-icon--blue-green:hover {
    background-color: var(--color-blue-green-dark);
}

.node-scope .box-icon.box-icon--blue-green-light {
    background-color: var(--color-blue-green-light);
}

.node-scope .box-icon.box-icon--blue-green-light:hover {
    background-color: var(--color-blue-green-dark);
}

.node-scope .box-icon.box-icon--gold:hover,
.node-scope .box-icon.box-icon--blue-green:hover,
.node-scope .box-icon.box-icon--blue-green-light:hover {
    color: var(--color-white);
}

/* ================================================================
   Base compartida de los botones de color

   La metrica canonica sale de .btn-blue-green-dark (la que usa el
   hero, que es el CTA mas visible del sitio): 9px 25px, radio 30px
   y 16px. Se declara UNA sola vez como selector agrupado para que
   el markup siga siendo de una clase: class="btn-primary".
   Todos los tokens de fondo dan >= 4.5:1 contra --color-white,
   asi que el texto blanco cumple WCAG AA en toda la matriz.
   El hover es el token "-dark" de la misma familia: ni un hex
   suelto ni un filtro brightness(), que romperian el tono.

   NINGUNA de estas bases declara width. El ancho se decide en el
   markup con .btn-block (width: 100%) o .btn-fit (width:
   fit-content), que viven en la seccion de utilidades. Asi una
   sola pareja de clases manda para relleno y outline en vez de
   dos reglas que se pisan por orden de fuente.

   El box-sizing va explicito porque el framework no pone un
   border-box global. Los <button> ya lo traen del navegador, pero
   un <a> es content-box: sin esto, btn-block sobre un enlace
   mediria 100% del contenedor MAS el padding y el borde, y
   desbordaria. Igual que en .process-step e .icon-card.
   ============================================================ */

/* ---------- Base de relleno ---------- */

.node-scope .btn-red,
.node-scope .btn-primary,
.node-scope .btn-blue-dark,
.node-scope .btn-blue-green-dark,
.node-scope .btn-brown,
.node-scope .btn-brown-dark,
.node-scope .btn-charcoal,
.node-scope .btn-gold-dark,
.node-scope .btn-gray,
.node-scope .btn-gray-dark,
.node-scope .btn-green-dark,
.node-scope .btn-green-forest,
.node-scope .btn-green-leaf,
.node-scope .btn-muted,
.node-scope .btn-purple,
.node-scope .btn-purple-dark,
.node-scope .btn-red-dark,
.node-scope .btn-subtitle,
.node-scope .btn-text {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 25px;
    border: none;
    border-radius: 30px;
    color: var(--color-white);

    font-family: var(--font-base);
    font-size: 16px;
    font-weight: var(--fw-regular);

    text-decoration: none;
    cursor: pointer;

    transition: all .3s ease;
}

.node-scope .btn-red,
.node-scope .btn-primary {
    background-color: var(--color-primary);
}

/* .btn-red es el nombre heredado de .btn-primary: los dos pintan
   --color-primary. Su hover antes saltaba a --color-red-dark, un
   rojo de otra familia; ahora ambos van a --color-primary-dark. */
.node-scope .btn-red:hover,
.node-scope .btn-primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* ---------- Relleno: un color por token ---------- */

.node-scope .btn-blue-dark {
    background-color: var(--color-blue-dark);
}

.node-scope .btn-blue-dark:hover {
    background-color: var(--color-blue-extra-dark);
    color: var(--color-white);
}

.node-scope .btn-blue-green-dark {
    background-color: var(--color-blue-green-dark);
}

.node-scope .btn-blue-green-dark:hover {
    background-color: var(--color-blue-green-extra-dark);
    color: var(--color-white);
}

.node-scope .btn-brown {
    background-color: var(--color-brown);
}

.node-scope .btn-brown:hover {
    background-color: var(--color-brown-dark);
    color: var(--color-white);
}

.node-scope .btn-brown-dark {
    background-color: var(--color-brown-dark);
}

.node-scope .btn-brown-dark:hover {
    background-color: var(--color-brown-extra-dark);
    color: var(--color-white);
}

.node-scope .btn-charcoal {
    background-color: var(--color-charcoal);
}

.node-scope .btn-charcoal:hover {
    background-color: var(--color-charcoal-dark);
    color: var(--color-white);
}

.node-scope .btn-gold-dark {
    background-color: var(--color-gold-dark);
}

.node-scope .btn-gold-dark:hover {
    background-color: var(--color-gold-extra-dark);
    color: var(--color-white);
}

.node-scope .btn-gray {
    background-color: var(--color-gray);
}

.node-scope .btn-gray:hover {
    background-color: var(--color-gray-dark);
    color: var(--color-white);
}

.node-scope .btn-gray-dark {
    background-color: var(--color-gray-dark);
}

.node-scope .btn-gray-dark:hover {
    background-color: var(--color-gray-extra-dark);
    color: var(--color-white);
}

.node-scope .btn-green-dark {
    background-color: var(--color-green-dark);
}

.node-scope .btn-green-dark:hover {
    background-color: var(--color-green-extra-dark);
    color: var(--color-white);
}

.node-scope .btn-green-forest {
    background-color: var(--color-green-forest);
}

.node-scope .btn-green-forest:hover {
    background-color: var(--color-green-forest-dark);
    color: var(--color-white);
}

.node-scope .btn-green-leaf {
    background-color: var(--color-green-leaf);
}

.node-scope .btn-green-leaf:hover {
    background-color: var(--color-green-leaf-dark);
    color: var(--color-white);
}

.node-scope .btn-muted {
    background-color: var(--color-muted);
}

.node-scope .btn-muted:hover {
    background-color: var(--color-muted-dark);
    color: var(--color-white);
}

.node-scope .btn-purple {
    background-color: var(--color-purple);
}

.node-scope .btn-purple:hover {
    background-color: var(--color-purple-dark);
    color: var(--color-white);
}

.node-scope .btn-purple-dark {
    background-color: var(--color-purple-dark);
}

.node-scope .btn-purple-dark:hover {
    background-color: var(--color-purple-extra-dark);
    color: var(--color-white);
}

.node-scope .btn-red-dark {
    background-color: var(--color-red-dark);
}

.node-scope .btn-red-dark:hover {
    background-color: var(--color-red-extra-dark);
    color: var(--color-white);
}

.node-scope .btn-subtitle {
    background-color: var(--color-subtitle);
}

.node-scope .btn-subtitle:hover {
    background-color: var(--color-subtitle-dark);
    color: var(--color-white);
}

.node-scope .btn-text {
    background-color: var(--color-text);
}

.node-scope .btn-text:hover {
    background-color: var(--color-text-dark);
    color: var(--color-white);
}

/* ---------- Foco de teclado ---------- */

.node-scope .btn-primary:focus-visible,
.node-scope .btn-blue-dark:focus-visible,
.node-scope .btn-blue-green-dark:focus-visible,
.node-scope .btn-brown:focus-visible,
.node-scope .btn-brown-dark:focus-visible,
.node-scope .btn-charcoal:focus-visible,
.node-scope .btn-gold-dark:focus-visible,
.node-scope .btn-gray:focus-visible,
.node-scope .btn-gray-dark:focus-visible,
.node-scope .btn-green-dark:focus-visible,
.node-scope .btn-green-forest:focus-visible,
.node-scope .btn-green-leaf:focus-visible,
.node-scope .btn-muted:focus-visible,
.node-scope .btn-purple:focus-visible,
.node-scope .btn-purple-dark:focus-visible,
.node-scope .btn-red-dark:focus-visible,
.node-scope .btn-subtitle:focus-visible,
.node-scope .btn-red:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* ================================================================
   Botones outline

   Fondo transparent en los 19: el color vive en el borde y en el
   texto. El hover si pasa a relleno y el texto se va a blanco.
   Conservan su propia metrica mas pequena (5px 20px, radio 32px,
16px) porque son controles secundarios.

   Tampoco declaran width: manda .btn-block o .btn-fit, igual que
   en la base de relleno. Ojo con <a>: display: flex es block-level,
   asi que un outline suelto en un contenedor de bloque se estira al
   100% y hay que anadirle .btn-fit. Los <button> no, porque tienen
   ancho intrinseco. El box-sizing: border-box de arriba es lo que
   hace que btn-block sobre un <a> no desborde.
   ============================================================ */

/* ---------- Base outline ---------- */

.node-scope .btn-outline-primary,
.node-scope .btn-outline-blue-dark,
.node-scope .btn-outline-blue-green-dark,
.node-scope .btn-outline-brown,
.node-scope .btn-outline-brown-dark,
.node-scope .btn-outline-charcoal,
.node-scope .btn-outline-gold-dark,
.node-scope .btn-outline-gray,
.node-scope .btn-outline-gray-dark,
.node-scope .btn-outline-green-dark,
.node-scope .btn-outline-green-forest,
.node-scope .btn-outline-green-leaf,
.node-scope .btn-outline-muted,
.node-scope .btn-outline-purple,
.node-scope .btn-outline-purple-dark,
.node-scope .btn-outline-red-dark,
.node-scope .btn-outline-subtitle,
.node-scope .btn-outline-text,
.node-scope .btn-outline-blue-green-medium {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 20px;
    border: 1px solid;
    border-radius: 32px;
    background-color: transparent;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease;
}

/* El icono hereda el color del texto y el hover lo lleva a blanco,
   para no repetirlo en cada variante. */
.node-scope .btn-outline-primary i,
.node-scope .btn-outline-blue-dark i,
.node-scope .btn-outline-blue-green-dark i,
.node-scope .btn-outline-brown i,
.node-scope .btn-outline-brown-dark i,
.node-scope .btn-outline-charcoal i,
.node-scope .btn-outline-gold-dark i,
.node-scope .btn-outline-gray i,
.node-scope .btn-outline-gray-dark i,
.node-scope .btn-outline-green-dark i,
.node-scope .btn-outline-green-forest i,
.node-scope .btn-outline-green-leaf i,
.node-scope .btn-outline-muted i,
.node-scope .btn-outline-purple i,
.node-scope .btn-outline-purple-dark i,
.node-scope .btn-outline-red-dark i,
.node-scope .btn-outline-subtitle i,
.node-scope .btn-outline-text i,
.node-scope .btn-outline-blue-green-medium i {
    color: inherit;
    font-size: 16px;
}

.node-scope .btn-outline-primary svg,
.node-scope .btn-outline-blue-dark svg,
.node-scope .btn-outline-blue-green-dark svg,
.node-scope .btn-outline-brown svg,
.node-scope .btn-outline-brown-dark svg,
.node-scope .btn-outline-charcoal svg,
.node-scope .btn-outline-gold-dark svg,
.node-scope .btn-outline-gray svg,
.node-scope .btn-outline-gray-dark svg,
.node-scope .btn-outline-green-dark svg,
.node-scope .btn-outline-green-forest svg,
.node-scope .btn-outline-green-leaf svg,
.node-scope .btn-outline-muted svg,
.node-scope .btn-outline-purple svg,
.node-scope .btn-outline-purple-dark svg,
.node-scope .btn-outline-red-dark svg,
.node-scope .btn-outline-subtitle svg,
.node-scope .btn-outline-text svg,
.node-scope .btn-outline-blue-green-medium svg {
    fill: currentColor;
}

/* ---------- Outline: borde y texto por color ---------- */

.node-scope .btn-outline-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.node-scope .btn-outline-blue-dark {
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

.node-scope .btn-outline-blue-green-dark {
    border-color: var(--color-blue-green-dark);
    color: var(--color-blue-green-dark);
}

.node-scope .btn-outline-brown {
    border-color: var(--color-brown);
    color: var(--color-brown);
}

.node-scope .btn-outline-brown-dark {
    border-color: var(--color-brown-dark);
    color: var(--color-brown-dark);
}

.node-scope .btn-outline-charcoal {
    border-color: var(--color-charcoal);
    color: var(--color-charcoal);
}

.node-scope .btn-outline-gold-dark {
    border-color: var(--color-gold-dark);
    color: var(--color-gold-dark);
}

.node-scope .btn-outline-gray {
    border-color: var(--color-gray);
    color: var(--color-gray);
}

.node-scope .btn-outline-gray-dark {
    border-color: var(--color-gray-dark);
    color: var(--color-gray-dark);
}

.node-scope .btn-outline-green-dark {
    border-color: var(--color-green-dark);
    color: var(--color-green-dark);
}

.node-scope .btn-outline-green-forest {
    border-color: var(--color-green-forest);
    color: var(--color-green-forest);
}

.node-scope .btn-outline-green-leaf {
    border-color: var(--color-green-leaf);
    color: var(--color-green-leaf);
}

.node-scope .btn-outline-muted {
    border-color: var(--color-muted);
    color: var(--color-muted);
}

.node-scope .btn-outline-purple {
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.node-scope .btn-outline-purple-dark {
    border-color: var(--color-purple-dark);
    color: var(--color-purple-dark);
}

.node-scope .btn-outline-red-dark {
    border-color: var(--color-red-dark);
    color: var(--color-red-dark);
}

.node-scope .btn-outline-subtitle {
    border-color: var(--color-subtitle);
    color: var(--color-subtitle);
}

.node-scope .btn-outline-text {
    border-color: var(--color-text);
    color: var(--color-text);
}

.node-scope .btn-outline-blue-green-medium {
    border-color: var(--color-blue-green-medium);
    color: var(--color-blue-green-medium);
}

/* ---------- Outline: hover a relleno ---------- */

.node-scope .btn-outline-primary:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.node-scope .btn-outline-blue-dark:hover {
    border-color: var(--color-blue-dark);
    background-color: var(--color-blue-dark);
    color: var(--color-white);
}

.node-scope .btn-outline-blue-green-dark:hover {
    border-color: var(--color-blue-green-dark);
    background-color: var(--color-blue-green-dark);
    color: var(--color-white);
}

.node-scope .btn-outline-brown:hover {
    border-color: var(--color-brown);
    background-color: var(--color-brown);
    color: var(--color-white);
}

.node-scope .btn-outline-brown-dark:hover {
    border-color: var(--color-brown-dark);
    background-color: var(--color-brown-dark);
    color: var(--color-white);
}

.node-scope .btn-outline-charcoal:hover {
    border-color: var(--color-charcoal);
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

.node-scope .btn-outline-gold-dark:hover {
    border-color: var(--color-gold-dark);
    background-color: var(--color-gold-dark);
    color: var(--color-white);
}

.node-scope .btn-outline-gray:hover {
    border-color: var(--color-gray);
    background-color: var(--color-gray);
    color: var(--color-white);
}

.node-scope .btn-outline-gray-dark:hover {
    border-color: var(--color-gray-dark);
    background-color: var(--color-gray-dark);
    color: var(--color-white);
}

.node-scope .btn-outline-green-dark:hover {
    border-color: var(--color-green-dark);
    background-color: var(--color-green-dark);
    color: var(--color-white);
}

.node-scope .btn-outline-green-forest:hover {
    border-color: var(--color-green-forest);
    background-color: var(--color-green-forest);
    color: var(--color-white);
}

.node-scope .btn-outline-green-leaf:hover {
    border-color: var(--color-green-leaf);
    background-color: var(--color-green-leaf);
    color: var(--color-white);
}

.node-scope .btn-outline-muted:hover {
    border-color: var(--color-muted);
    background-color: var(--color-muted);
    color: var(--color-white);
}

.node-scope .btn-outline-purple:hover {
    border-color: var(--color-purple);
    background-color: var(--color-purple);
    color: var(--color-white);
}

.node-scope .btn-outline-purple-dark:hover {
    border-color: var(--color-purple-dark);
    background-color: var(--color-purple-dark);
    color: var(--color-white);
}

.node-scope .btn-outline-red-dark:hover {
    border-color: var(--color-red-dark);
    background-color: var(--color-red-dark);
    color: var(--color-white);
}

.node-scope .btn-outline-subtitle:hover {
    border-color: var(--color-subtitle);
    background-color: var(--color-subtitle);
    color: var(--color-white);
}

.node-scope .btn-outline-text:hover {
    border-color: var(--color-text);
    background-color: var(--color-text);
    color: var(--color-white);
}

.node-scope .btn-outline-blue-green-medium:hover {
    border-color: var(--color-blue-green-medium);
    background-color: var(--color-blue-green-medium);
    color: var(--color-white);
}

.node-scope .btn-outline-primary:focus-visible,
.node-scope .btn-outline-blue-dark:focus-visible,
.node-scope .btn-outline-blue-green-dark:focus-visible,
.node-scope .btn-outline-brown:focus-visible,
.node-scope .btn-outline-brown-dark:focus-visible,
.node-scope .btn-outline-charcoal:focus-visible,
.node-scope .btn-outline-gold-dark:focus-visible,
.node-scope .btn-outline-gray:focus-visible,
.node-scope .btn-outline-gray-dark:focus-visible,
.node-scope .btn-outline-green-dark:focus-visible,
.node-scope .btn-outline-green-forest:focus-visible,
.node-scope .btn-outline-green-leaf:focus-visible,
.node-scope .btn-outline-muted:focus-visible,
.node-scope .btn-outline-purple:focus-visible,
.node-scope .btn-outline-purple-dark:focus-visible,
.node-scope .btn-outline-red-dark:focus-visible,
.node-scope .btn-outline-subtitle:focus-visible,
.node-scope .btn-outline-text:focus-visible,
.node-scope .btn-outline-blue-green-medium:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* Tokens que NO generan boton de relleno porque ningun texto blanco
   sobre ellos llega a 4.5:1: --color-accent, --color-border,
   --color-cream, --color-cream-light, --color-gray-extra-light,
   --color-gray-light, --color-green-fresh, --color-green-light,
   --color-green-pale, --color-off-white, --color-peach-light,
   --color-purple-light, --color-red-light y --color-secondary.
   Como outline solo entran los que llegan a 3:1 contra el fondo de
   pagina. Ver docs/botones-formularios.html#catalogo-botones.

   Excepcion: .btn-icon si usa tres tokens claros como relleno
   (--color-gold, --color-blue-green y --color-blue-green-light) porque
   su texto e icono pasan a --color-text y cumplen 4.5:1. El hover los
   lleva a un token -dark de la familia con texto blanco. */


/* ---------- Icon ---------- */

.node-scope .btn-icon {
    box-sizing: border-box;
    width: 100%;
    min-height: 153px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 25px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: var(--fw-extrabold);
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* ===== ICONO ===== */

.node-scope .btn-icon i,
.node-scope .btn-icon svg {
    font-size: 50px;
    transition: color 0.3s ease,
        transform 0.3s ease;
}


/* ---------- Variantes de color ----------

   El color del texto y del icono depende del contraste del relleno:
   - Rellenos oscuros: >= 4.5:1 contra --color-white -> blanco.
   - Rellenos claros: >= 4.5:1 contra --color-text -> --color-text.
   El hover usa el token -dark / -extra-dark de la misma familia, que
   siempre supera 4.5:1 con texto blanco. El icono y el <p> heredan el
   color del boton: no se declara color por token.

   Las clases se reutilizan de la familia .btn-* (base de relleno), pero
   el fondo se declara aqui de forma explicita para que .btn-icon no
   dependa del orden de esa base.
   ------------------------------------------------------------ */

/* Rellenos oscuros: texto e icono blancos */

.node-scope .btn-icon.btn-primary,
.node-scope .btn-icon.btn-red,
.node-scope .btn-icon.btn-red-dark,
.node-scope .btn-icon.btn-purple,
.node-scope .btn-icon.btn-purple-dark,
.node-scope .btn-icon.btn-green-forest,
.node-scope .btn-icon.btn-green-dark,
.node-scope .btn-icon.btn-green-leaf,
.node-scope .btn-icon.btn-blue-green-dark,
.node-scope .btn-icon.btn-gray,
.node-scope .btn-icon.btn-gray-dark,
.node-scope .btn-icon.btn-blue-dark,
.node-scope .btn-icon.btn-brown,
.node-scope .btn-icon.btn-brown-dark,
.node-scope .btn-icon.btn-charcoal,
.node-scope .btn-icon.btn-gold-dark,
.node-scope .btn-icon.btn-muted,
.node-scope .btn-icon.btn-subtitle,
.node-scope .btn-icon.btn-text {
    color: var(--color-white);
}

.node-scope .btn-icon.btn-primary,
.node-scope .btn-icon.btn-red {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.node-scope .btn-icon.btn-primary:hover,
.node-scope .btn-icon.btn-red:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.node-scope .btn-icon.btn-red-dark {
    background-color: var(--color-red-dark);
    border-color: var(--color-red-dark);
}

.node-scope .btn-icon.btn-red-dark:hover {
    background-color: var(--color-red-extra-dark);
    border-color: var(--color-red-extra-dark);
}

.node-scope .btn-icon.btn-purple {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
}

.node-scope .btn-icon.btn-purple:hover {
    background-color: var(--color-purple-dark);
    border-color: var(--color-purple-dark);
}

.node-scope .btn-icon.btn-purple-dark {
    background-color: var(--color-purple-dark);
    border-color: var(--color-purple-dark);
}

.node-scope .btn-icon.btn-purple-dark:hover {
    background-color: var(--color-purple-extra-dark);
    border-color: var(--color-purple-extra-dark);
}

.node-scope .btn-icon.btn-green-forest {
    background-color: var(--color-green-forest);
    border-color: var(--color-green-forest);
}

.node-scope .btn-icon.btn-green-forest:hover {
    background-color: var(--color-green-forest-dark);
    border-color: var(--color-green-forest-dark);
}

.node-scope .btn-icon.btn-green-dark {
    background-color: var(--color-green-dark);
    border-color: var(--color-green-dark);
}

.node-scope .btn-icon.btn-green-dark:hover {
    background-color: var(--color-green-extra-dark);
    border-color: var(--color-green-extra-dark);
}

.node-scope .btn-icon.btn-green-leaf {
    background-color: var(--color-green-leaf);
    border-color: var(--color-green-leaf);
}

.node-scope .btn-icon.btn-green-leaf:hover {
    background-color: var(--color-green-leaf-dark);
    border-color: var(--color-green-leaf-dark);
}

.node-scope .btn-icon.btn-blue-green-dark {
    background-color: var(--color-blue-green-dark);
    border-color: var(--color-blue-green-dark);
}

.node-scope .btn-icon.btn-blue-green-dark:hover {
    background-color: var(--color-blue-green-extra-dark);
    border-color: var(--color-blue-green-extra-dark);
}

.node-scope .btn-icon.btn-gray {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}

.node-scope .btn-icon.btn-gray:hover {
    background-color: var(--color-gray-dark);
    border-color: var(--color-gray-dark);
}

.node-scope .btn-icon.btn-gray-dark {
    background-color: var(--color-gray-dark);
    border-color: var(--color-gray-dark);
}

.node-scope .btn-icon.btn-gray-dark:hover {
    background-color: var(--color-gray-extra-dark);
    border-color: var(--color-gray-extra-dark);
}

.node-scope .btn-icon.btn-blue-dark {
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}

.node-scope .btn-icon.btn-blue-dark:hover {
    background-color: var(--color-blue-extra-dark);
    border-color: var(--color-blue-extra-dark);
}

.node-scope .btn-icon.btn-brown {
    background-color: var(--color-brown);
    border-color: var(--color-brown);
}

.node-scope .btn-icon.btn-brown:hover {
    background-color: var(--color-brown-dark);
    border-color: var(--color-brown-dark);
}

.node-scope .btn-icon.btn-brown-dark {
    background-color: var(--color-brown-dark);
    border-color: var(--color-brown-dark);
}

.node-scope .btn-icon.btn-brown-dark:hover {
    background-color: var(--color-brown-extra-dark);
    border-color: var(--color-brown-extra-dark);
}

.node-scope .btn-icon.btn-charcoal {
    background-color: var(--color-charcoal);
    border-color: var(--color-charcoal);
}

.node-scope .btn-icon.btn-charcoal:hover {
    background-color: var(--color-charcoal-dark);
    border-color: var(--color-charcoal-dark);
}

.node-scope .btn-icon.btn-gold-dark {
    background-color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}

.node-scope .btn-icon.btn-gold-dark:hover {
    background-color: var(--color-gold-extra-dark);
    border-color: var(--color-gold-extra-dark);
}

.node-scope .btn-icon.btn-muted {
    background-color: var(--color-muted);
    border-color: var(--color-muted);
}

.node-scope .btn-icon.btn-muted:hover {
    background-color: var(--color-muted-dark);
    border-color: var(--color-muted-dark);
}

.node-scope .btn-icon.btn-subtitle {
    background-color: var(--color-subtitle);
    border-color: var(--color-subtitle);
}

.node-scope .btn-icon.btn-subtitle:hover {
    background-color: var(--color-subtitle-dark);
    border-color: var(--color-subtitle-dark);
}

.node-scope .btn-icon.btn-text {
    background-color: var(--color-text);
    border-color: var(--color-text);
}

.node-scope .btn-icon.btn-text:hover {
    background-color: var(--color-text-dark);
    border-color: var(--color-text-dark);
}


/* Rellenos claros: texto e icono oscuros */

.node-scope .btn-icon.btn-gold,
.node-scope .btn-icon.btn-blue-green,
.node-scope .btn-icon.btn-blue-green-light {
    color: var(--color-text);
}

.node-scope .btn-icon.btn-gold {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.node-scope .btn-icon.btn-gold:hover {
    background-color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}

.node-scope .btn-icon.btn-blue-green {
    background-color: var(--color-blue-green);
    border-color: var(--color-blue-green);
}

.node-scope .btn-icon.btn-blue-green:hover {
    background-color: var(--color-blue-green-dark);
    border-color: var(--color-blue-green-dark);
}

.node-scope .btn-icon.btn-blue-green-light {
    background-color: var(--color-blue-green-light);
    border-color: var(--color-blue-green-light);
}

.node-scope .btn-icon.btn-blue-green-light:hover {
    background-color: var(--color-blue-green-dark);
    border-color: var(--color-blue-green-dark);
}


/* ===== TEXTO ===== */

.node-scope .btn-icon p {
    color: inherit;
    transition: color 0.3s ease;
    margin-bottom: 0;
}


/* ===== HOVER ===== */

.node-scope .btn-icon:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}


.node-scope .btn-icon:hover i,
.node-scope .btn-icon:hover svg {
    color: var(--color-white);
    transform: scale(1.05);
}


/* ===== FOCUS ===== */

.node-scope .btn-icon:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}


/* ===== ACTIVE ===== */

.node-scope .btn-icon:active {
    transform: translateY(0);
}


/* ===== DISABLED ===== */

.node-scope .btn-icon:disabled,
.node-scope .btn-icon.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Enlace ---------- */

.node-scope .btn-enlace {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: .4em 1.2em;

    border: 1px solid var(--color-primary);
    border-radius: 32px;

    background-color: var(--color-primary);
    color: var(--color-white);

    font-size: 20px;
    font-weight: var(--fw-regular);

    text-decoration: none;

    cursor: pointer;
}

.node-scope .btn-enlace:hover {
    border-color: var(--color-primary);

    background-color: var(--color-secondary);
    color: var(--color-primary);
}


/* ---------- Enlace Green Forest ---------- */

.node-scope .btn-enlace--green-forest {
    border-color: var(--color-green-forest);
    background-color: var(--color-green-forest);
    color: var(--color-white);
}

.node-scope .btn-enlace--green-forest:hover {
    border-color: var(--color-green-forest);
    background-color: var(--color-white);
    color: var(--color-green-forest);
}


/* ================================================================
   31. FORMULARIOS
================================================================ */

.node-scope .form-item__label {
    color: var(--color-text);
    font-family: var(--font-base);
    font-weight: var(--fw-light);
}

.node-scope legend.h2 {
    margin: 1rem 0 .5rem;

    color: var(--color-text);

    font-family: var(--font-base);
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

.node-scope .js-form-item-title .form-item__label {
    display: none;
}

.node-scope .form-text,
.node-scope [type="email"],
.node-scope [type="tel"],
.node-scope [type="number"] {
    width: 100%;
}

.node-scope .form-fieldset .form-item {
    max-width: 100%;
    margin-left: 1em;
}

.node-scope .form-item__textfield.form-submit {
    width: 100%;

    border: 1px solid var(--color-primary);
    border-radius: 12px;

    background-color: var(--color-primary);
    color: var(--color-white);
}

.node-scope .form-item__textfield.form-submit:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.node-scope .form-select,
.node-scope .form-select option {
    color: var(--color-text);
    background-color: var(--color-white);
}


/* ================================================================
   32. INSTAGRAM / EMBEDS
================================================================ */

.node-scope .instagram-video {
    width: 100%;
    aspect-ratio: 9 / 14;
}

.node-scope .instagram-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* ================================================================
   33. RESPONSIVE
================================================================

   Desktop First

   XL Desktop       > 1600px
   Desktop          1401px - 1600px
   Large desktop    1202px - 1400px
   Laptop           1024px - 1201px
   Tablet           768px - 1023px
   Mobile           436px - 767px
   Mobile pequeño   <= 435px

================================================================ */


/* ---------- 33.1 Desktop XL ---------- */

@media (min-width: 1601px) {
    /* Reservado para ajustes XL */
}


/* ---------- 33.2 Desktop ---------- */

@media (min-width: 1401px) and (max-width: 1600px) {
    /* Reservado para ajustes desktop */
}


/* ---------- 33.3 Large desktop ---------- */

@media (min-width: 1202px) and (max-width: 1400px) {

    .node-scope .cont-menu {
        top: clamp(80px, 10vh, 120px);
    }



    .node-scope .card-redes-movilidad {
        min-width: 320px;
    }
}


/* ---------- 33.4 Laptop ---------- */

@media (min-width: 1024px) and (max-width: 1201px) {

    .node-scope .hero-image__body p {
        width: 70%;
    }


    .node-scope .card-redes-movilidad {
        min-width: 320px;
    }
}


/* ---------- 33.5 Tablet ---------- */

@media (min-width: 768px) and (max-width: 1023px) {

    .node-scope .cont-menu {
        top: 80px;
    }

    .node-scope .hero-image__body h1 {
        font-size: 32px !important;
    }

    .node-scope .hero-image__body p {
        width: 70%;
        line-height: 1;
    }



    .node-scope .card-redes-movilidad {
        min-width: 220px;
    }

    .node-scope .grid--3 {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }

    .node-scope .banner--cta {
        gap: 1.5rem;
    }

    .node-scope .timeline-track {
        gap: 24px;
    }
}


/* ---------- 33.6 Mobile ---------- */

@media (min-width: 436px) and (max-width: 767px) {

    .node-scope .cont-menu {
        top: 80px;
    }

    .node-scope .hero-image__body h1 {
        width: 100%;
        margin-top: 51%;

        font-size: 24px !important;
        line-height: 1;
    }

    .node-scope .hero-image__body p {
        line-height: 1.2;
    }

    .node-scope .grid--3 {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }

    .node-scope .banner {
        padding: 2rem 1.5rem;
    }

    .node-scope .banner__icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .node-scope .banner__text {
        font-size: 1.1rem;
    }

    .node-scope .banner--cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
    }

    .node-scope .card--topic {
        padding: 1rem;
    }

    .node-scope .card--topic .card__icon {
        width: 44px;
        height: 44px;
    }

    .node-scope .event-card {
        gap: 16px;
    }

    .node-scope .event-footer {
        align-items: flex-start;
    }

    .node-scope .redes-contacto-item {
        width: 100%;

        display: flex;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 10px;

        flex-wrap: nowrap;
    }

    .node-scope .redes-contacto-item a {
        display: flex;
        flex-wrap: wrap;

        line-height: 1;
        overflow-wrap: anywhere;
    }

    .node-scope .timeline-track {
        gap: 24px;
        padding-bottom: 60px;
    }

    .node-scope .timeline-item {
        flex: 0 0 calc(100% - 70px);
    }

    .node-scope .timeline-date {
        padding: 10px 16px;
        font-size: 18px;
    }

    .node-scope .timeline-title {
        font-size: 18px;
    }

    .node-scope .timeline-track::before {
        top: 108px;
    }

    .node-scope .card {
        padding: 1.5rem;
        border-radius: 20px;
    }

    .node-scope .card__title {
        font-size: 1.5rem;
    }

    .node-scope .card__text {
        font-size: 1rem;
    }
}


/* ---------- 33.7 Mobile pequeño ---------- */

@media (max-width: 435px) {

    .node-scope .grid--3 {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
        width: 100%;
    }

    .node-scope .hero-image__content-wrapper {
        align-items: flex-end;
    }

    .node-scope .hero-image__body {
        max-width: 100%;

        display: flex;
        flex-direction: column;

        gap: 1rem;
    }

    .node-scope .hero-image__body h1 {
        width: 100%;

        font-size: 20px !important;
        line-height: 1;
    }

    .node-scope .hero-image__body p {
        line-height: 1.2;
    }

    .node-scope .event-card {
        flex-direction: column;
    }

    .node-scope .event-date {
        width: 90px;
    }

    .node-scope .event-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .node-scope .event-button {
        width: 100%;
        text-align: center;
    }

    .node-scope .banner--cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
    }

    .node-scope .redes-contacto-item {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;

        flex-wrap: nowrap;
    }

    .node-scope .redes-contacto-item a {
        display: flex;
        flex-wrap: wrap;

        line-height: 1;
        overflow-wrap: anywhere;
    }

    .node-scope .card--topic {
        padding: 1rem;
    }

    .node-scope .card--topic .card__icon {
        width: 44px;
        height: 44px;
    }

    .node-scope .timeline-track {
        gap: 24px;
        padding-bottom: 60px;
    }

    .node-scope .timeline-item {
        flex: 0 0 calc(100% - 40px);
    }
}


/* ================================================================
   34. OVERRIDES ESPECÍFICOS DE NODO
================================================================

   IMPORTANTE:
   Este bloque queda reservado para reglas que dependan de:
   - una página concreta
   - un ID generado por Drupal
   - una clase de nodo
   - un layout específico

   Ejemplo:

   .node-scope.home .hero-image__body h1 {
       ...
   }

   .node-scope #acId686373429 {
       ...
   }

   Evitar introducir aquí componentes reutilizables.

================================================================ */

/* ===== EJEMPLOS ===== */

/*
.node-scope.home .hero h1 {
    ...
}

.node-scope.preguntas #acId686373429 {
    ...
}
*/


/* ================================================================
   35. INFO RELEVANTE / STATS
=============================================================== */

/* ---------- Contenedor centrado ---------- */

/* Barra flotante de estadísticas: se superpone al bloque anterior
   (margin-top negativo + z-index) y se apoya sobre box-shadow.
   IMPORTANTE: la base NO fija fondo ni color de borde. El fondo se
   aplica con .bg-color-* y el color del borde con .border-color-*
   (mismo contrato que .chip). Sin esas utilidades el borde cae a
   currentColor, por eso hay que combinarlas siempre. */
.node-scope .info-relevante {
    width: 100%;
    max-width: 1020px;
    margin-inline: auto;
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .10);
    margin-top: -2rem;
    z-index: 2;
    border: 1px solid;
    position: relative;
}

/* ---------- Grid (5 items) ---------- */

.node-scope .info-relevante__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;

    gap: 1.5rem;
}

/* ---------- Item ---------- */

.node-scope .info-relevante__item {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 1.25rem;
}

.node-scope .info-relevante__item+.info-relevante__item {
    padding-left: 2rem;
    border-left: 1px solid var(--color-border);
}

/* ---------- Icono ---------- */

.node-scope .info-relevante__icon {
    color: var(--color-blue-green);
    font-size: 1.4rem;
}

/* ---------- Contenido ---------- */

.node-scope .info-relevante__content {
    display: flex;
    flex-direction: column;
}

.node-scope .info-relevante__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    color: var(--color-text);
}

.node-scope .info-relevante__description {
    margin: 0;

    font-size: 1rem;
    line-height: 1.2;
    color: var(--color-text);
}


/* ---------- Responsive Info Relevante ---------- */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {

    .node-scope .info-relevante {
        padding: 1.5rem;
    }

    .node-scope .info-relevante__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .node-scope .info-relevante__item {
        justify-content: flex-start;

        padding: 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
    }

    .node-scope .info-relevante__item+.info-relevante__item {
        padding-left: 1rem;
        border-left: 1px solid var(--color-border);
    }
}


/* Mobile */
@media (min-width: 436px) and (max-width: 767px) {

    .node-scope .info-relevante {
        padding: 1.5rem;
    }

    .node-scope .info-relevante__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .node-scope .info-relevante__item {
        justify-content: flex-start;

        padding: 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
    }

    .node-scope .info-relevante__item+.info-relevante__item {
        padding-left: 1rem;
        border-left: 1px solid var(--color-border);
    }
}


/* Mobile pequeño */
@media (max-width: 435px) {

    .node-scope .info-relevante {
        padding: 1.5rem;
    }

    .node-scope .info-relevante__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .node-scope .info-relevante__item {
        justify-content: flex-start;

        padding: 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
    }

    .node-scope .info-relevante__item+.info-relevante__item {
        padding-left: 1rem;
        border-left: 1px solid var(--color-border);
    }
}


/* ---------- Variación: 6 items verticales ---------- */

.node-scope .info-relevante--items {
    margin-top: 0;

    /* Ancho completo: el base esta capado a 1020px, aqui se libera
       para que la franja de 6 items ocupe todo el ancho disponible. */
    width: 100%;
    max-width: none;
}

.node-scope .info-relevante--items .info-relevante__grid {
    grid-template-columns: repeat(6, 1fr);
    align-items: start;

    gap: 1.5rem;
}

.node-scope .info-relevante--items .info-relevante__item {
    flex-direction: column;
    align-items: center;
    text-align: center;

    gap: .6rem;
}

.node-scope .info-relevante--items .info-relevante__item+.info-relevante__item {
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-border);
}

.node-scope .info-relevante--items .info-relevante__icon {
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-blue-green);
    font-size: 1.6rem;
}

.node-scope .info-relevante--items .info-relevante__title {
    font-size: 1.1rem;
}

.node-scope .info-relevante--items .info-relevante__description {
    font-size: .95rem;
    color: var(--color-muted);
}

/* ---------- Responsive Variación Items ---------- */

/* Tablet */
@media (max-width: 1023px) {

    .node-scope .info-relevante--items .info-relevante__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* Mobile */
@media (max-width: 767px) {

    .node-scope .info-relevante--items .info-relevante__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile pequeño */
@media (max-width: 435px) {

    .node-scope .info-relevante--items .info-relevante__grid {
        grid-template-columns: 1fr;
    }
}


/* ---------- Variación: aliados estratégicos ---------- */

.node-scope .info-relevante--aliados {
    margin-top: 0;

    /* Ancho completo: el base esta capado a 1020px, aqui se libera
       para que la franja de logos ocupe todo el ancho disponible. */
    width: 100%;
    max-width: none;
}

.node-scope .info-relevante--aliados .info-relevante__grid {
    grid-template-columns: repeat(6, 1fr);
    align-items: start;

    gap: 1.5rem;
}

.node-scope .info-relevante--aliados .info-relevante__item {
    flex-direction: column;
    align-items: center;
    text-align: center;

    gap: .75rem;
}

.node-scope .info-relevante--aliados .info-relevante__item+.info-relevante__item {
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-border);
}

.node-scope .info-relevante--aliados .info-relevante__logo {
    width: 100%;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);

    color: var(--color-border);
    font-size: 1.8rem;
}

.node-scope .info-relevante--aliados .info-relevante__logo img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

.node-scope .info-relevante--aliados .info-relevante__title {
    font-size: .9rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

/* ---------- Responsive Variación Aliados ---------- */

/* Tablet */
@media (max-width: 1023px) {

    .node-scope .info-relevante--aliados .info-relevante__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* Mobile */
@media (max-width: 767px) {

    .node-scope .info-relevante--aliados .info-relevante__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile pequeño */
@media (max-width: 435px) {

    .node-scope .info-relevante--aliados .info-relevante__grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   36. EXPLORA POR CATEGORÍA
=============================================================== */

/* ---------- Contenedor ---------- */

.node-scope .explora-categoria {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.node-scope .explora-categoria__header {
    margin-bottom: var(--space-lg);
}

/* ---------- Grid (5 cards) ---------- */

.node-scope .explora-categoria__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 1rem;
}

/* ---------- Card ---------- */

.node-scope .explora-categoria__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2.5rem .9rem .8rem .9rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.node-scope .explora-categoria__card:hover {
    transform: translateY(-4px);
    border-color: var(--color-blue-green-dark);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

/* ---------- Icono ---------- */

.node-scope .explora-categoria__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-green-dark);
    font-size: 2.5rem;
}

/* ---------- Título ---------- */

.node-scope .explora-categoria__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    line-height: 1;
}

/* ---------- Descripción ---------- */

.node-scope .explora-categoria__description {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text);
    flex-grow: 1;
}

/* ---------- Botón ---------- */

.node-scope .explora-categoria__button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    padding: 0.438rem 1.25rem;
    border: 1px solid var(--color-blue-green-dark);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    color: var(--color-blue-green-dark);
    font-family: var(--font-base);
    font-size: 1rem;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
    width: 100%;
}

.node-scope .explora-categoria__button:hover {
    background-color: var(--color-blue-green-dark);
    color: var(--color-white);
}


/* ---------- Responsive Explora por Categoría ---------- */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {

    .node-scope .explora-categoria__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* Mobile */
@media (min-width: 436px) and (max-width: 767px) {

    .node-scope .explora-categoria__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Mobile pequeño */
@media (max-width: 435px) {

    .node-scope .explora-categoria__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}


/* ================================================================
   37. PUBLICACIONES RECIENTES
=============================================================== */

/* ---------- Contenedor ---------- */

.node-scope .publicaciones-recientes {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.node-scope .publicaciones-recientes__header {
    margin-bottom: var(--space-lg);
}

/* ---------- Card horizontal ---------- */

.node-scope .publicaciones-recientes__card {
    height: 100%;
    display: flex;
    gap: 1.5rem;
    background-color: var(--color-white);

}

/* ---------- Imagen ---------- */

.node-scope .publicaciones-recientes__image {
    width: 200px;
    height: 260px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* ---------- Contenido ---------- */

.node-scope .publicaciones-recientes__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
}

/* ---------- Título ---------- */

.node-scope .publicaciones-recientes__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;

}

/* ---------- Fecha ---------- */

.node-scope .publicaciones-recientes__date {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
}

.node-scope .publicaciones-recientes__date i {
    margin-right: .4rem;

}



/* ---------- Responsive Publicaciones Recientes ---------- */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {

    .node-scope .publicaciones-recientes__card {
        gap: 1.5rem;
    }

    .node-scope .publicaciones-recientes__image {
        width: 180px;
        height: 240px;
    }
}

/* Mobile */
@media (min-width: 436px) and (max-width: 767px) {

    .node-scope .publicaciones-recientes__card {
        gap: 1rem;
    }

    .node-scope .publicaciones-recientes__image {
        width: 150px;
        height: 200px;
    }
}

/* Mobile pequeño */
@media (max-width: 435px) {

    .node-scope .publicaciones-recientes__card {
        flex-direction: column;
    }

    .node-scope .publicaciones-recientes__image {
        width: 100%;
        height: 220px;
    }

    .node-scope .publicaciones-recientes__button {
        align-self: flex-start;
    }
}


/* ================================================================
   38. BANNER DESAFÍO TERRITORIAL
=============================================================== */

/* ---------- Fondo blue-green (manual en bloque Drupal) ---------- */

/* ---------- Contenedor del banner ---------- */

.node-scope .banner-desafio {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;

    padding: 3rem var(--space-md);
}

/* ---------- Contenido (título + subtítulo) ---------- */

.node-scope .banner-desafio__content {
    display: flex;
    flex-direction: column;

    gap: .75rem;
}

.node-scope .banner-desafio__title {
    margin: 0;

    color: var(--color-white);

    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

.node-scope .banner-desafio__subtitle {
    margin: 0;

    color: rgba(255, 255, 255, .9);

    font-size: 1.125rem;
    line-height: 1.4;
}

/* ---------- Botón ---------- */

.node-scope .banner-desafio__button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: .75rem;

    padding: .85rem 1.5rem;

    border-radius: var(--radius-pill);

    background-color: var(--color-white);
    color: var(--color-text);

    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: var(--fw-semibold);

    text-decoration: none;

    transition: transform .3s ease,
        box-shadow .3s ease;
}

.node-scope .banner-desafio__button i {
    color: var(--color-blue-green);
}

.node-scope .banner-desafio__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}

/* ---------- Redes sociales ---------- */

.node-scope .banner-desafio__social-row {
    margin-top: 2rem;
    padding-top: 1.5rem;

    border-top: 1px solid rgba(255, 255, 255, .3);
}

.node-scope .banner-desafio__socials {
    display: flex;
    align-items: center;
    justify-content: end;

    gap: .75rem;
}

.node-scope .banner-desafio__socials-label {
    color: var(--color-white);

    font-family: var(--font-base);
    font-size: 1rem;
}

.node-scope .banner-desafio__social-link {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: var(--color-white);
    color: var(--color-blue-green);

    font-size: 1rem;

    text-decoration: none;

    transition: transform .3s ease;
}

.node-scope .banner-desafio__social-link:hover {
    transform: translateY(-2px);
}


/* ---------- Responsive Banner Desafío ---------- */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {

    .node-scope .banner-desafio {
        padding-block: 2.5rem;
    }
}

/* Mobile */
@media (min-width: 436px) and (max-width: 767px) {

    .node-scope .banner-desafio {
        padding-block: 2rem;
    }
}

/* Mobile pequeño */
@media (max-width: 435px) {

    .node-scope .banner-desafio {
        padding-block: 2rem;
    }
}


/* ================================================================
   39. PROYECTOS
=============================================================== */

/* ---------- Intro ---------- */

.node-scope .proyectos-intro {
    text-align: center;
}

.node-scope .proyectos-intro .title {
    color: var(--color-text);
}

.node-scope .proyectos-intro p {
    max-width: 720px;
    margin-inline: auto;
    color: var(--color-muted);
}

/* ---------- Filtros ---------- */

.node-scope .proyectos-filtros {
    background-color: var(--color-white);
    border: 1px solid #EEEEEE;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.node-scope .proyectos-filtros__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;

    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 1.05rem;
    color: var(--color-text);
}

.node-scope .proyectos-filtros__titulo i {
    color: var(--color-primary);
}

.node-scope .proyectos-filtros label {
    display: block;
    margin-bottom: .3rem;

    font-weight: var(--fw-semibold);
    font-size: .85rem;
    color: var(--color-text);
}

.node-scope .proyectos-filtros .form-select,
.node-scope .proyectos-filtros .form-control {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: .55rem .85rem;
    font-family: var(--font-base);
    font-size: .95rem;
}

.node-scope .proyectos-filtros__acciones {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ---------- Información ---------- */

.node-scope .proyectos-info {
    margin-bottom: 1rem;
    color: var(--color-muted);
    font-size: .9rem;
}

/* ---------- Card de proyecto ---------- */

.node-scope .proyecto-card {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.node-scope .proyecto-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #EEEEEE;
}

.node-scope .proyecto-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.node-scope .proyecto-card:hover .proyecto-card__media img {
    transform: scale(1.04);
}

.node-scope .proyecto-card__pill {
    position: absolute;
    top: 12px;
    left: 12px;

    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    padding: .3rem .85rem;

    font-size: .8rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
}

.node-scope .proyecto-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.25rem;
}

.node-scope .proyecto-card__year {
    margin: 0;

    color: var(--color-blue-green-dark);
    font-weight: var(--fw-bold);
    font-size: .9rem;
    letter-spacing: .3px;
}

.node-scope .proyecto-card__year i {
    margin-right: .35rem;
    color: var(--color-blue-green);
}

.node-scope .proyecto-card__title {
    margin: 0;

    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--color-text);
}

.node-scope .proyecto-card__text {
    margin: 0;
    flex-grow: 1;

    color: var(--color-muted);
    font-size: .95rem;
    line-height: 1.45;
}

.node-scope .proyecto-card__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;

    margin-top: .3rem;

    color: var(--color-primary);
    font-weight: var(--fw-bold);
    font-size: .95rem;
    text-decoration: none;

    transition: color .2s ease;
}

.node-scope .proyecto-card__link i {
    transition: transform .2s ease;
}

.node-scope .proyecto-card__link:hover {
    color: var(--color-purple-dark);
}

.node-scope .proyecto-card__link:hover i {
    transform: translateX(3px);
}

/* ---------- Estado vacío ---------- */

.node-scope .proyectos-vacio {
    grid-column: 1 / -1;

    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-muted);
}

.node-scope .proyectos-vacio i {
    display: block;
    margin-bottom: .75rem;
    font-size: 2.5rem;
    color: var(--color-border);
}



/* ---------- Modal proyecto ---------- */

.node-scope .proyecto-modal__anio {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    margin-top: .4rem;
    padding: .25rem .8rem;

    background-color: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: var(--radius-pill);

    color: var(--color-white);
    font-family: var(--font-base);
    font-size: .85rem;
    font-weight: var(--fw-regular);
    line-height: 1.2;
}

.node-scope .proyecto-modal__img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    display: block;

    margin-bottom: 1.25rem;

    border-radius: var(--radius-md);
}

.node-scope .proyecto-modal-block {
    margin-bottom: 1.4rem;
}

.node-scope .proyecto-modal-block:last-child {
    margin-bottom: 0;
}

.node-scope .proyecto-modal-block h4 {
    display: flex;
    align-items: center;
    gap: .5rem;

    margin: 0 0 .6rem;

    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-primary);
}

.node-scope .proyecto-modal-block h4 i {
    color: var(--color-blue-green);
    font-size: 1rem;
}

.node-scope .proyecto-modal-block p {
    margin: 0;
}

/* ---------- Lista horizontal (productos) ---------- */

.node-scope .proyecto-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.node-scope .proyecto-horizontal a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    padding: .5rem 1rem;

    background-color: var(--color-green-light);
    border: 1px solid var(--color-green-dark);
    border-radius: var(--radius-pill);

    color: var(--color-green-dark);
    font-size: .9rem;
    text-decoration: none;

    transition: background-color .2s ease, color .2s ease;
}

.node-scope .proyecto-horizontal a:hover {
    background-color: var(--color-green-dark);
    color: var(--color-white);
}

/* ---------- Tags (temarios) ---------- */

.node-scope .proyecto-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.node-scope .proyecto-tags li {
    padding: .35rem .9rem;

    background-color: var(--color-purple-light);
    border: 1px solid var(--color-purple);
    border-radius: var(--radius-pill);

    color: var(--color-purple-dark);
    font-size: .85rem;
    line-height: 1.2;
}

/* ---------- Chips / Pills (base neutra + utilities de color) ---------- */

.node-scope .chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.node-scope .chips li,
.node-scope .chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .9rem;
    border: 1px solid;
    border-radius: var(--radius-pill);
    font-size: .85rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.node-scope .chips li i,
.node-scope .chip i {
    font-size: .95rem;
}

/* Chips clicables (button / a) */

.node-scope button.chip {
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.node-scope a.chip {
    text-decoration: none;
    color: inherit;
}

/* ---------- Aliados ---------- */

.node-scope .proyecto-aliados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.node-scope .proyecto-aliado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 110px;
}

.node-scope .proyecto-aliado img {
    width: 64px;
    height: 64px;
    object-fit: contain;

    padding: .3rem;

    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.node-scope .proyecto-aliado span {
    color: var(--color-muted);
    font-size: .8rem;
    line-height: 1.2;
    text-align: center;
}

/* ---------- Archivos y enlaces ---------- */

.node-scope .proyecto-archivos {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.node-scope .proyecto-archivos a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;

    color: var(--color-blue-green-dark);
    font-weight: var(--fw-semibold);
    font-size: .95rem;
    text-decoration: none;
}

.node-scope .proyecto-archivos a:hover {
    text-decoration: underline;
}

.node-scope .proyecto-archivos i {
    color: var(--color-blue-green);
    font-size: 1.1rem;
}

/* ---------- Resultados clave ---------- */

.node-scope .proyecto-resultados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.node-scope .proyecto-resultado {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    padding: .9rem;

    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

.node-scope .proyecto-resultado__cantidad {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    font-size: 1.4rem;
    line-height: 1;
}

.node-scope .proyecto-resultado__desc {
    color: var(--color-muted);
    font-size: .85rem;
    line-height: 1.35;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
    .node-scope .proyecto-modal__img {
        height: 200px;
    }
}


/* ================================================================
   40. BARRA EQUIPO (CTA)

============================================================== */

.node-scope .barra-equipo {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    padding: 38px 50px;

    background-color: var(--color-blue-green);
}

.node-scope .barra-equipo__texto {
    margin: 0;

    color: var(--color-white);

    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 1.5rem;
    line-height: 1.3;
}

.node-scope .barra-equipo__button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: .75rem;

    padding: .85rem 1.5rem;

    border-radius: var(--radius-pill);

    background-color: var(--color-white);
    color: var(--color-text);

    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: var(--fw-semibold);

    text-decoration: none;

    transition: transform .3s ease, box-shadow .3s ease;
}

.node-scope .barra-equipo__button i {
    color: var(--color-blue-green);
    font-size: .9rem;
}

.node-scope .barra-equipo__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}

/* ---------- Responsive Barra Equipo ---------- */

@media (max-width: 991px) {

    .node-scope .barra-equipo {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 575px) {

    .node-scope .barra-equipo {
        padding: 38px 25px;
    }
}


/* ================================================================
   41. PROCESS STEPS
   ------------------------------------------------------------
   Proceso/metodologia en pasos encadenados, con conector opcional.

   Dos bloques, igual que el resto de items del framework
   (.feature-item, .timeline-card, .proyecto-card):

     .process-steps   raiz de la seccion
     .process-step    cada paso (card)

   Lo que se REUTILIZA de otras secciones:
   - .card__eyebrow        para el antetitulo (seccion 12)
   - .section              padding vertical (seccion 06)
   - .container            de Bootstrap (regla 3 del proyecto)
   - .explora-categoria__card  como referencia visual: misma piel
                             (fondo, borde, radio, hover) para que
                             ambas cards se lean como familia

   Lo que es NUEVO:
   - el conector .process-steps__arrow, que no existia en ninguna
     seccion. Solo se muestra a partir de 1024px; por debajo la
     secuencia la comunican los numeros del titulo.

   Notas de maquetacion:
   - height: 100% en el paso es lo que iguala la altura de las cards
     dentro de la misma fila.
   - min-width: 0 evita que una palabra larga reviente el flex.
   ================================================================ */

.node-scope .process-steps__header {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.node-scope .process-steps__title {
    margin: 0 0 .75rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-text);
}

.node-scope .process-steps__description {
    max-width: 68ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-muted);
}

/* ---------- Fila de pasos ---------- */

.node-scope .process-steps__list {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

/* ---------- Card del paso ---------- */

.node-scope .process-step {
    /* El padding y el borde van dentro del ancho: sin esto el
       flex-basis de tablet (calc(50% - .5rem)) se mide sobre el
       contenido, dos cards no caben y el 2x2 cae a una columna.
       No se debe al reboot de Bootstrap. */
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem .9rem 2rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.node-scope .process-step:hover {
    transform: translateY(-4px);
    border-color: var(--color-blue-green-dark);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.node-scope .process-step__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    line-height: 1;
}

.node-scope .process-step__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-text);
}

.node-scope .process-step__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
}

/* ---------- Conector ---------- */

.node-scope .process-steps__arrow {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-green-dark);
    font-size: 1.25rem;
    line-height: 1;
}


/* ---------- Responsive Process Steps ---------- */

/* Tablet: dos columnas. El conector deja de tener sentido en horizontal
   entre cards apiladas, asi que se oculta; el orden lo marcan los
   numeros de cada titulo. */
@media (min-width: 768px) and (max-width: 1023px) {

    .node-scope .process-steps__list {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .node-scope .process-step {
        flex: 1 1 calc(50% - .5rem);
    }

    .node-scope .process-steps__arrow {
        display: none;
    }
}

/* Mobile y mobile pequeno: una columna, conector oculto. */
@media (max-width: 767px) {

    .node-scope .process-steps__list {
        flex-direction: column;
        gap: 1rem;
    }

    .node-scope .process-step {
        flex: 0 0 auto;
    }

    .node-scope .process-steps__arrow {
        display: none;
    }
}


/* ================================================================
   42. ICON CARD

   ------------------------------------------------------------
   Card de icono centrado + titulo + texto. Es un bloque
   GENERICO, no de una seccion concreta: lo usan varias.

   Por que es nuevo y no un cuarto nombre para la misma piel:
   .explora-categoria__card (seccion 36) y .process-step (seccion 41)
   ya tenian exactamente esta anatomia y esta piel, cada uno con su
   nombre de dominio. Este bloque es la version reutilizable, para que
   las secciones nuevas no repitan la piel por tercera vez.

   REUTILIZA, no dupliques:
     .section         padding vertical del framework (seccion 06)
     .container       de Bootstrap, que ya es dependencia del proyecto
     .row/.col-*      grid de Bootstrap: no hace falta CSS propio para
                     hea colocar las cards, solo el markup

   Lo que es NUEVO:
     nada de layout: el contenedor de cards lo pone Bootstrap. Aqui
     solo esta la piel de la card.

   Notas de maquetacion:
   - height: 100% hace que las cards de una misma fila midan lo mismo
     aunque los textos tengan distinto largo. El grid de Bootstrap ya
     estira los .col, asi que basta con la card al 100%.
   - min-width: 0 evita que una palabra larga reviente el flex.
   - box-sizing va explicito porque el flex-basis de otras secciones
     se mide sobre la caja de contenido y eso rompe el reparto.
   ================================================================ */

/* ---------- Card ---------- */

.node-scope .icon-card {
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem .9rem 2rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.node-scope .icon-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-blue-green-dark);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

/* ---------- Icono ---------- */

.node-scope .icon-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-green-dark);
    font-size: 2.5rem;
    line-height: 1;
}

/* ---------- Titulo ---------- */

.node-scope .icon-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-text);
}

/* ---------- Texto ---------- */

.node-scope .icon-card__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
}


/* ================================================================
   43. CONTACT ASIDE
   ------------------------------------------------------------
   Panel de datos de contacto para la columna lateral de una
   pagina (va dentro de un <aside>).

   Bloque: .contact-aside (raiz) + __title / __description /
   __list / __item / __icon / __body / __label / __value

   SIN FONDO Y SIN BORDE, a proposito: el bloque no pinta ninguna de
   las dos cosas. Quien lo usa decide el acabado con las utilidades
   que ya existen en el framework, por ejemplo

       <aside class="contact-aside bg-color-gray-light rounded-3
                      border border-color-gray-light">

   Del bloque solo son el padding, el radio por defecto y la
   estructura. Asi el panel sirve igual sobre un fondo claro, sobre
   uno de color o sin fondo, sin tener que tocar el CSS.

   REUTILIZA, no dupliques (contrato utility-first):
     - .bg-color-*             el fondo
     - .border + .border-color-*   el borde (.border es de Bootstrap)
     - .rounded-*              para cambiar el radio si hace falta
     - .color-*                el color del titulo
     - .row / .col-*           el reparto de columnas es de
                               Bootstrap; el panel no define grid

   Lo que es NUEVO:
     el item de dos lineas: icono a la izquierda y, a su derecha,
     la etiqueta arriba y el valor abajo.

   SIN COLOR PROPIO EN EL TITULO: .contact-aside__title NO declara
   color, lo hereda de .node-scope (--color-text). Es el mismo
   criterio que el fondo y el borde: el color lo elige el markup con
   una utilidad .color-* (hay 29 en la seccion 07). Los otros tres
   elementos de texto si lo fijan, porque si no perderian el
   contraste con el fondo: __description y __label con
   --color-muted, y __value con --color-text.

   POR QUE no reutiliza .redes-contacto (seccion 27):
     ese bloque pone icono y texto en la MISMA linea y los tine de
     blanco, porque esta pensado para el fondo con imagen de
     .bgc-contact. Aqui cada dato ocupa dos lineas, asi que
     reutilizarlo obligaria a pelear sus colores.

   Notas de maquetacion:
   - min-width: 0 en __body para que un correo largo no desborde.
   - overflow-wrap: anywhere en __value para que un correo o un
     telefono partido no genere scroll horizontal en la columna.
   ================================================================ */

.node-scope .contact-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
}

.node-scope .contact-aside__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

.node-scope .contact-aside__description {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-muted);
}

.node-scope .contact-aside__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.node-scope .contact-aside__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}

.node-scope .contact-aside__icon {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 1.25rem;
    line-height: 1.5;
}

.node-scope .contact-aside__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.node-scope .contact-aside__label {
    font-size: .8rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-muted);
}

.node-scope .contact-aside__value {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.node-scope a.contact-aside__value:hover {
    color: var(--color-blue-green-dark);
    text-decoration: underline;
}


/* ================================================================
   44. MODAL PERFIL DE EQUIPO
   ================================================================ */

/* Ficha modal de un integrante del equipo.
   Plantilla unica: el markup es estatico, cada miembro duplica el
   bloque y cambia el contenido. No hay nucleo dinamico: abrir/cerrar
   lo resuelve Bootstrap con data-bs-toggle / data-bs-dismiss.

   Ancho: 60-70vw con tope en 1000px (el markup pedia 65vw sin tope).
   Alto: alto completo de la ventana con scroll interno, para que el
   bloque de publicaciones/proyectos no se corte en pantallas cortas. */



/* ---------- Encabezado ---------- */

/* Reafirma el fondo del header: el global de .modal-header queda en
   --color-gold-dark y esta variante es turquesa.
   --color-blue-green-dark (6.64:1 con blanco) y no --color-blue-green
   (2.73:1), que no cumplia AA para el texto del titulo. */

.node-scope .team-profile-modal .modal-header {
    background: var(--color-blue-green-dark);
    color: var(--color-white);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 16px 16px 0px 0px;
    padding: 25px 34px;
}

.node-scope .team-profile-modal .modal-header p {
    margin-bottom: 0px !important;
}

.node-scope .team-profile-modal .modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: var(--color-white);
}

.node-scope .modal__img-profile {
    width: 100% !important;
    border-radius: 8px !important;
    border-color: none !important;
    max-width: 100% !important;
    height: auto !important;
}

.node-scope .team-profile-modal .modal-content {
    border-radius: 16px;
}

.node-scope .team-profile-modal .btn-close {
    opacity: 1;
}

/* ---------- Biografia ---------- */

.node-scope .team-profile-modal__role {
    margin: 0 0 .5rem;
    color: inherit;
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.node-scope .team-profile-modal__social {
    margin: 0 0 .9rem;
}

.node-scope .team-profile-modal__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-blue-green-dark);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.node-scope .team-profile-modal__social a:hover {
    background: var(--color-blue-green-dark);
    color: var(--color-white);
}

.node-scope .team-profile-modal__label {
    margin: 0 0 .5rem;
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    letter-spacing: .5px;
    color: var(--color-text);
    margin-top: 10px;
}

.node-scope .team-profile-modal__bio {
    margin: 0;
    font-size: 1.125rem;
    text-align: justify;
    color: var(--color-text);
}

/* ---------- Contenido relacionado ---------- */

/* Pie pegado al borde inferior del body: sin padding propio, lo
   aporta .modal-body. El borde superior separa los bloques. */

.node-scope .team-profile-modal__related {
    padding: 1rem 0 0;
    border-top: 1px solid var(--color-gray-light);
    background: var(--color-white);
}

/* NO sobrescribir --bs-gutter-x aqui. Bootstrap compensa con margenes
   negativos en el .row y padding en sus columnas, y ese margen negativo
   solo lo absorbe el padding del contenedor padre: el .modal-body aporta
   16px, o sea un --bs-gutter-x maximo de 2rem (mitad = 16px). Con
   2.5rem el .row se salia 20px por la derecha y aparecia una barra
   horizontal de 15px que empujaba el bloque hacia abajo. Con el gutter
   por defecto (1.5rem) las columnas quedan al ras del contenido de
   arriba y no hay desborde. */

.node-scope .team-profile-modal__heading {
    margin: 0 0 .9rem;
    font-size: .95rem;
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

/* ---------- Movil ---------- */

/* Bootstrap apila las columnas solo en col-lg-*, asi que el breakpoint
   del grid ya hace el colapso. Aqui se ajusta el texto justificado,
   que en una columna estrecha deja rivers de espacio. */

@media (max-width: 991.98px) {
    .node-scope .team-profile-modal .modal-dialog {
        width: 92vw;
    }

    .node-scope .team-profile-modal__bio {
        text-align: left;
    }
}


/* ================================================================
   FIN DEL FRAMEWORK
   ================================================================ */