/*
 * Estilos propios del portal institucional (no forman parte de Tabler).
 * Aquí viven los pequeños ajustes de diseño que no son utilidades genéricas:
 * los colores de marca, el header con el logo en diagonal, el hero diagonal
 * de la portada y el botón angular.
 */

/*
 * Colores de marca (tomados del logo oficial: public/assets/img/logo_ccpp.png).
 * Se sobreescribe --tblr-primary y sus derivados: Tabler recalcula
 * automáticamente los tonos claros/oscuros (-lt, -darken) a partir de esta
 * variable, así que también cambian los botones y estados activos del panel
 * administrativo, no solo el sitio público.
 */
:root {
    --ccpp-navy: #2c3a5d;
    --ccpp-green: #1c8a4b;

    --tblr-brand: var(--ccpp-navy);
    --tblr-primary: var(--ccpp-navy);
    --tblr-primary-rgb: 44, 58, 93;
    --tblr-primary-lt-rgb: 234, 235, 239;
}

/*
 * Tabler agrega `margin-left: calc(100vw - 100%)` al :root para "compensar"
 * el ancho de la barra de scroll. El efecto real es empujar TODO el contenido
 * ~15px a la derecha en las páginas que tienen scroll (y 0 en las que no), lo
 * que se veía como un espacio en blanco a la izquierda y como una diferencia
 * de posición entre páginas. Lo anulamos para que el contenido quede siempre
 * pegado al borde izquierdo.
 */
:root {
    margin-left: 0;
    margin-right: 0;
}

/* El header público queda sticky/fijo; sin esto, un enlace con ancla
   (ej. /servicios#arbitraje) dejaría el destino tapado debajo del menú. */
[id] {
    scroll-margin-top: 100px;
}

/*
 * El sitio público NO usa el andamiaje .page/.page-wrapper/.page-body de
 * Tabler (que es para el panel admin con sidebar y arrastra reglas de
 * height:100% que causaban un doble scroll y un gap de ~15px). Usa una
 * estructura simple: topbar + main + footer, con el body creciendo natural.
 */
body.public-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.public-layout main {
    flex: 1 0 auto;
}

.btn-ccpp-green {
    background-color: #008360;
    color: #fff;
    border: 0;
}

.btn-ccpp-green:hover {
    background-color: #107153;
    color: #fff;
    border: 0;
}

/* Sidebar del panel administrativo: mismo azul institucional que el
   header del sitio público, en vez del gris oscuro por defecto de Tabler. */
.navbar-vertical.navbar-dark {
    background-color: var(--ccpp-navy);
    /* Tabler resuelve el hover del menú con --tblr-body-color (oscuro): sobre
       el azul institucional el enlace quedaba negro sobre azul, es decir
       ilegible. Se fijan aquí los colores del menú en claro. */
    --tblr-navbar-color: rgba(255, 255, 255, .85);
    --tblr-navbar-hover-color: #fff;
    --tblr-navbar-active-color: #fff;
    --tblr-navbar-active-bg: rgba(255, 255, 255, .12);
}

/* Realce del elemento bajo el puntero y del módulo activo. */
.navbar-vertical.navbar-dark .navbar-nav .nav-link:hover,
.navbar-vertical.navbar-dark .navbar-nav .nav-link:focus,
.navbar-vertical.navbar-dark .navbar-nav .nav-item.active .nav-link {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
}

/* Logo dentro del sidebar oscuro del panel administrativo */
.admin-brand-logo {
    height: 40px;
    width: auto;
    background: #fff;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Franja superior de contacto */
.site-topbar {
    background: #0d1526;
    color: rgba(255, 255, 255, .75);
    font-size: .8rem;
}

.site-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    padding: .5rem clamp(1rem, 4vw, 3rem);
}

.site-topbar__item {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.site-topbar__item i {
    color: var(--ccpp-green);
}

.site-topbar__item a {
    color: inherit;
    text-decoration: none;
}

.site-topbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
}

.site-topbar__social {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.site-topbar__social a {
    display: flex;
    color: rgba(255, 255, 255, .75);
    font-size: .95rem;
    transition: color .2s ease;
}

.site-topbar__social a:hover {
    color: var(--ccpp-green);
}

.site-topbar__item a:hover {
    color: #fff;
}

/* Header */
.site-header {
    background: linear-gradient(100deg, #0d1526 0%, var(--ccpp-navy) 55%, #4a5f8f 100%);
    min-height: 84px;
    /* En páginas internas (sin hero) esto ya alcanza para que el menú quede
       fijo arriba al hacer scroll, ocultando la franja de contacto de
       arriba; no requiere JS. En la portada (overlay) se desactiva más abajo
       y el "fijado" lo maneja un pequeño script al pasar el hero. */
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Variante "flotante": el header queda transparente sobre la imagen del
   hero (portada). Como el header es position:absolute, el <main> (con el
   slider) arranca pegado arriba y el header flota encima. */
.hero-stack {
    position: relative;
}

.site-header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    /* Degradado negro de arriba hacia abajo (en vez de transparente puro)
       para que el menú se pueda leer sin importar qué imagen quede detrás. */
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, 0) 100%);
    border: 0 !important;
    box-shadow: none !important;
}

/* Una vez que el usuario baja del hero, un pequeño script le agrega esta
   clase: el header pasa de "flotar transparente sobre la foto" a "fijo con
   fondo sólido", igual que en las páginas internas. */
.site-header--overlay.site-header--stuck {
    position: fixed;
    background: linear-gradient(100deg, #0d1526 0%, var(--ccpp-navy) 55%, #4a5f8f 100%);
}

/* Mientras el menú móvil está abierto: la franja de arriba (logo + botón
   hamburguesa/cerrar) pasa al mismo difuminado oscuro que el panel
   desplegado, en vez del degradado normal. Se activa por JS al mostrar u
   ocultar #site-nav (ver navbar_public.php). */
.site-header--overlay.site-header--menu-open {
    background: rgba(10, 16, 28, .45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site-header--overlay .navbar-collapse {
    border: 0 !important;
    box-shadow: none !important;
}

.site-header__logo {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 1rem 3rem 1rem 1.5rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - 38px) 100%, 0 100%);
    margin-right: -1.75rem;
    position: relative;
    z-index: 2;
}

.site-header__logo img {
    height: 48px;
    width: auto;
    display: block;
}

.site-header__nav-area {
    padding: 0 0 0 2rem;
    gap: 1.25rem;
    align-items: stretch;
}

.site-header__nav {
    gap: 1.35rem;
    /* Tabler dibuja la línea de "página activa" bajo el ítem del menú con
       .nav-item.active::after (ver tabler.min.css); esta variable controla
       su color, por defecto un gris/azul discreto. La ponemos en el verde
       institucional en vez de tocar el pseudo-elemento directamente. */
    --tblr-navbar-active-border-color: var(--ccpp-green);
}

.site-header__nav .nav-link {
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
    padding: .5rem 0;
    background: transparent !important;
    border: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}

.site-header__nav .nav-item.active .nav-link,
.site-header__nav .nav-link:hover,
.site-header__nav .nav-link:focus {
    color: #fff;
    background: transparent !important;
}

.site-header__nav .dropdown-menu {
    background: rgba(10, 16, 28, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
}

.site-header__nav .dropdown-item {
    color: rgba(255, 255, 255, .7);
    font-weight: 300;
}

.site-header__nav .dropdown-item:hover,
.site-header__nav .dropdown-item:focus {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* Submenú anidado dentro de un dropdown (ej. Servicios > Centro de
   Capacitación > ...). Bootstrap 5 no trae esto de fábrica -- patrón
   clásico: <li class="dropdown-submenu"> con un <ul class="dropdown-menu">
   anidado, mostrado por hover en escritorio y por click en táctil/mobile
   (clase .show añadida por JS, ver navbar_public.php). */
.site-header__nav .dropdown-submenu {
    position: relative;
}

.site-header__nav .dropdown-submenu>.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header__nav .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -.5rem;
}

@media (min-width: 992px) {

    .site-header__nav .dropdown-submenu:hover>.dropdown-menu,
    .site-header__nav .dropdown-submenu>.dropdown-menu.show {
        display: block;
    }

    /* Dropdown raíz (Nosotros, Servicios, Publicaciones, Descubre Puno):
       en vez de depender del toggle de Bootstrap JS (que intercepta TODO
       el click en el <a> incluso teniendo href real, impidiendo navegar a
       la página de la sección), se abre por :hover en CSS -- así el <a>
       conserva su comportamiento normal de enlace y el usuario puede
       hacer click para ir a la página raíz de la sección, igual que
       hace hover para desplegar el submenú. Ver navbar_public.php: esos
       enlaces ya NO llevan data-bs-toggle/role=button.
       :focus-within mantiene el menú accesible con teclado (Tab), que el
       hover por sí solo no cubre. */
    .site-header__nav .nav-item.dropdown:hover>.dropdown-menu,
    .site-header__nav .nav-item.dropdown:focus-within>.dropdown-menu {
        display: block;
    }

    /* Anclaje del panel bajo su ítem del menú. Es OBLIGATORIO fijarlo aquí:
       Bootstrap/Tabler solo dan `top:100%; left:0` vía `.dropdown-menu
       [data-bs-popper]`, es decir cuando Popper abre el menú por JS. Como
       arriba lo abrimos por CSS, ese atributo nunca existe y el panel queda
       en `position:absolute` sin top/left; su posición estática la decide
       entonces el `li`, que Tabler define como `display:flex;
       flex-direction:column; justify-content:center` -- o sea el panel se
       centraba verticalmente sobre el ítem y se desbordaba por encima del
       header (mitad del menú fuera de la pantalla). */
    .site-header__nav>.nav-item.dropdown>.dropdown-menu {
        top: 100%;
        bottom: auto;
        left: 0;
        right: auto;
        margin-top: 0;
    }

    /* Último ítem del menú (Descubre Puno): se alinea por su borde derecho
       y su submenú anidado se abre hacia la izquierda, para no salirse por
       el costado derecho de la ventana. */
    .site-header__nav>.nav-item.dropdown:last-child>.dropdown-menu {
        left: auto;
        right: 0;
    }

    .site-header__nav>.nav-item.dropdown:last-child .dropdown-submenu>.dropdown-menu {
        left: auto;
        right: 100%;
    }
}

@media (max-width: 991.98px) {
    .site-header__nav .dropdown-submenu>.dropdown-menu {
        position: static;
        left: 0;
        margin-top: 0;
        padding-left: 1rem;
        display: none;
        box-shadow: none;
        background: rgba(255, 255, 255, .04);
    }

    .site-header__nav .dropdown-submenu>.dropdown-menu.show {
        display: block;
    }
}

/* Caja en ángulo con el teléfono y el botón, en contraste con los links del
   menú (que quedan transparentes). El fondo azul va en una capa ::before para
   que el ícono de audífonos pueda quedar montado sobre el borde diagonal sin
   recortarse (clip-path sobre la caja recortaría también su contenido). */
.site-header__cta-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem clamp(.9rem, 2vw, 1.75rem) .85rem 0;
}

.site-header__cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--ccpp-navy) 0%, #0d1526 100%);
    /* El borde izquierdo diagonal pasa por el centro del ícono (~19px):
       de 38px arriba a 0px abajo -> en el medio queda en ~19px. */
    clip-path: polygon(38px 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
}

.site-header__cta-box>* {
    position: relative;
    z-index: 1;
}

.site-header__phone {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
}

.site-header__phone-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ccpp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.site-header__phone-number {
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    white-space: nowrap;
}

.site-header__phone-label {
    font-size: .72rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.2;
    white-space: nowrap;
}

/* Botón angular (recorte en paralelogramo), usado en el header y otras
   páginas internas (Servicios, Nosotros, etc.) */
.btn-angular {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 2.25rem;
    background: var(--ccpp-green);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .03em;
    text-decoration: none;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
    transition: background-color .2s ease;
}

.btn-angular:hover,
.btn-angular:focus {
    background: #156b3a;
    color: #fff;
}

.btn-angular--sm {
    padding: .5rem 1.2rem;
    font-size: .72rem;
}

/* Franja ajustada: el header completo (logo + menú + teléfono + botón) necesita
   unos 1250px de viewport. El corte está en 1260 y no más arriba porque una
   pantalla FullHD con el escalado de Windows al 150% -- la combinación más
   común en los equipos de la oficina -- reporta 1272px de viewport CSS, no
   1920: con un límite mayor esas pantallas nunca verían el header completo. */
@media (min-width: 1260px) and (max-width: 1420px) {
    .site-header__nav {
        gap: 1rem;
    }

    .site-header__nav-area {
        padding-left: 1.25rem;
        gap: .75rem;
    }

    .site-header__cta-box {
        gap: .6rem;
    }
}

/* Por debajo de ese ancho ya no caben las dos cosas: se ocultan la franja azul
   y el teléfono, y queda solo el botón. Aplica entre el menú de escritorio
   (>=992px) y el punto donde pasa a hamburguesa. */
@media (min-width: 992px) and (max-width: 1259.98px) {
    .site-header__phone {
        display: none;
    }

    .site-header__cta-box::before {
        display: none;
    }

    .site-header__cta-box {
        padding-right: 1.25rem;
    }
}

@media (max-width: 991.98px) {
    .site-header__logo {
        clip-path: none;
        margin-right: 0;
        padding: .75rem 1.25rem;
    }

    .site-header__logo img {
        height: 44px;
    }

    .site-header__nav-area {
        padding: 1rem 1.25rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        /* Sin fondo propio: el difuminado oscuro ya lo aporta el <header>
           completo (.site-header--menu-open), que crece para cubrir tanto
           la franja del logo/botón como este panel. Ponerle aquí otro fondo
           encima duplicaba la capa y se veía más oscuro/azulado que la
           franja de arriba. */
        box-shadow: 0 12px 20px rgba(0, 0, 0, .25);
    }

    .site-header__nav {
        flex-direction: column;
        gap: .5rem;
    }

    .site-header__cta-box {
        width: 100%;
        justify-content: space-between;
        padding: .85rem 1.25rem;
    }

    .site-header__cta-box::before {
        clip-path: none;
    }
}

/* Slider de portada (carrusel con imágenes subidas desde el admin).
   Altura FIJA (no min-height): así el tamaño de la sección no cambia según
   la imagen o el largo del texto de cada slide, evitando que empuje el
   resto de la página al pasar de una a otra. */
.hero-carousel .carousel-item {
    height: 560px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--ccpp-navy);
}

.hero-carousel .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(4, 8, 20, .65) 0%, rgba(13, 21, 38, .4) 35%, rgba(44, 58, 93, .18) 65%, rgba(74, 95, 143, 0) 100%);
}

.hero-carousel__slide-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 560px;
    overflow: hidden;
}

.hero-carousel .carousel-indicators {
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {

    .hero-carousel .carousel-item,
    .hero-carousel__slide-inner {
        height: 460px;
        padding: 3rem 0;
    }
}

/* Hero de la portada (respaldo cuando no hay slides configurados) */
.hero-diagonal {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #0d1526 0%, var(--ccpp-navy) 45%, #4a5f8f 100%);
}

.hero-diagonal__icon {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

/* Texto del hero directo sobre la foto, sin panel/caja detrás. */
.hero-content {
    position: relative;
    max-width: 640px;
}

.hero-content__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ccpp-green);
    margin-bottom: .75rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.hero-content__title {
    color: #fff;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.hero-content__subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 1.75rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.hero-content__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Botones del hero (rectos, no en ángulo, para no competir con el logo/CTA
   del header que sí usan el corte diagonal) */
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.75rem;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .03em;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.btn-hero--primary {
    background: var(--ccpp-green);
    color: #fff;
}

.btn-hero--primary:hover,
.btn-hero--primary:focus {
    background: #156b3a;
    color: #fff;
}

.btn-hero--outline {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-hero--outline:hover,
.btn-hero--outline:focus {
    background: #fff;
    color: var(--ccpp-navy);
}

@media (max-width: 767.98px) {
    .hero-diagonal {
        min-height: 0;
        padding: 3rem 0;
    }

    .hero-diagonal__icon {
        display: none;
    }

    .hero-content__title {
        font-size: 1.75rem;
    }
}

/* Fila de accesos rápidos: tarjeta blanca que se monta sobre el borde
   inferior del hero (margin-top negativo). */
.quick-access {
    position: relative;
    z-index: 5;
    margin-top: -70px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(4, 8, 20, .18);
    padding: 1.75rem 1.5rem;
}

.quick-access__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem 1rem;
}

.quick-access__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 1rem .5rem;
    border-radius: 10px;
    transition: background-color .2s ease;
}

.quick-access__item:hover,
.quick-access__item:focus {
    text-decoration: none;
    background-color: rgba(28, 138, 75, .08);
}

.quick-access__icon {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--ccpp-green);
    margin-bottom: .6rem;
}

.quick-access__title {
    font-weight: 700;
    color: var(--ccpp-navy);
    font-size: .95rem;
    margin-bottom: .2rem;
    transition: color .2s ease;
}

.quick-access__item:hover .quick-access__title {
    color: var(--ccpp-green);
}

.quick-access__desc {
    font-size: .78rem;
    color: rgba(0, 0, 0, .55);
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .quick-access {
        margin-top: -40px;
    }

    .quick-access__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575.98px) {
    .quick-access {
        margin-top: -20px;
    }

    .quick-access__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Link verde reutilizable ("Ver todos los servicios", "Más información") */
.link-servicios {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ccpp-green);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}

.link-servicios:hover,
.link-servicios:focus {
    color: #156b3a;
    text-decoration: none;
}

/* Tarjetas de "Nuestros servicios" en el inicio */
.home-service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(4, 8, 20, .08);
    transition: box-shadow .2s ease, transform .2s ease;
}

.home-service-card:hover {
    box-shadow: 0 8px 20px rgba(4, 8, 20, .14);
    transform: translateY(-2px);
}

.home-service-card__media {
    position: relative;
    height: 110px;
    background-color: var(--ccpp-navy);
    background-image: linear-gradient(120deg, var(--ccpp-navy) 0%, #0d1526 100%);
    background-size: cover;
    background-position: center;
}

/* Velo oscuro sobre la franja: cuando el servicio tiene una foto de fondo
   subida desde el admin (que reemplaza el degradado vía style inline),
   mantiene el contraste para que el chip del logo siga destacando. */
.home-service-card__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, .35);
}

/* Chip blanco centrado con el logo del servicio (object-fit:contain evita
   que se recorte o deforme, sea cual sea su proporción original). Si aún
   no hay logo subido, muestra el ícono genérico en su lugar. */
.home-service-card__logo-chip {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .6rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    font-size: 1.6rem;
    color: var(--ccpp-green);
}

.home-service-card__logo-chip img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.home-service-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.25rem 1.25rem 1.25rem;
}

.home-service-card__title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    margin-bottom: .4rem;
}

.home-service-card__desc {
    font-size: .78rem;
    color: rgba(0, 0, 0, .6);
    margin-bottom: .85rem;
    flex: 1;
    display: flex;
    align-items: center;
}

.home-service-card__body .link-servicios {
    font-size: .8rem;
    margin-top: auto;
}

/* Carrusel horizontal de "Nuestros servicios" (scroll con snap + flechas) */
.services-carousel {
    position: relative;
}

.services-carousel__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .25rem .25rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.services-carousel__track::-webkit-scrollbar {
    height: 6px;
}

.services-carousel__track::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 3px;
}

/* Ancho de cada tarjeta calculado para que se vean exactamente N por vez,
   según el ancho disponible, y el resto se recorra con scroll/flechas. */
.services-carousel__item {
    flex: 0 0 78%;
    scroll-snap-align: start;
}

@media (min-width: 576px) {
    .services-carousel__item {
        flex-basis: calc((100% - 1rem) / 2);
    }
}

@media (min-width: 768px) {
    .services-carousel__item {
        flex-basis: calc((100% - 2rem) / 3);
    }
}

@media (min-width: 992px) {
    .services-carousel__item {
        flex-basis: calc((100% - 3rem) / 4);
    }
}

@media (min-width: 1200px) {
    .services-carousel__item {
        flex-basis: calc((100% - 4rem) / 5);
    }
}

.services-carousel__nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(4, 8, 20, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: var(--ccpp-navy);
    font-size: 1.1rem;
}

.services-carousel__nav:hover {
    background: var(--ccpp-green);
    color: #fff;
}

.services-carousel__nav--prev {
    left: -18px;
}

.services-carousel__nav--next {
    right: -18px;
}

@media (max-width: 575.98px) {
    .services-carousel__nav {
        display: none;
    }
}

/* Módulo de "Últimas noticias" del inicio: una destacada grande (foto +
   título + resumen) a la izquierda, y una lista de titulares sin imagen a
   la derecha — mismo patrón que muchos portales de noticias. */
.news-split {
    display: flex;
    gap: 1.75rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.news-featured {
    display: block;
    flex: 0 1 44%;
    min-width: 260px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(4, 8, 20, .08);
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
}

.news-featured:hover {
    box-shadow: 0 10px 24px rgba(4, 8, 20, .16);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.news-featured__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--ccpp-navy);
    background-image: linear-gradient(120deg, var(--ccpp-navy) 0%, #0d1526 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .5);
    font-size: 2rem;
}

.news-featured__badge {
    position: absolute;
    left: .75rem;
    top: .75rem;
    background: rgba(4, 8, 20, .75);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: 4px;
}

.news-featured__info {
    padding: .85rem 1rem 1rem;
}

.news-featured__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    line-height: 1.3;
    margin: 0 0 .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-featured:hover .news-featured__title {
    color: var(--ccpp-green);
}

.news-featured__meta {
    font-size: .74rem;
    color: #8891a0;
    margin-bottom: .5rem;
}

.news-featured__excerpt {
    font-size: .84rem;
    color: #667085;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lista de titulares (sin imagen) a la derecha de la destacada */
.news-headlines {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    min-width: 260px;
}

.news-headlines__item {
    display: flex;
    flex: 1;
    gap: 1rem;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(4, 8, 20, .08);
    text-decoration: none;
}

.news-headlines__item:first-child {
    padding-top: 0;
}

.news-headlines__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Miniatura apaisada: con la columna de noticias más ancha, el titular gana
   sitio para el texto y la imagen solo acompaña. */
.news-headlines__thumb {
    flex: 0 0 118px;
    height: 68px;
    border-radius: 8px;
    background-color: var(--ccpp-navy);
    background-image: linear-gradient(120deg, var(--ccpp-navy) 0%, #0d1526 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .5);
    font-size: 1.4rem;
    overflow: hidden;
}

.news-headlines__body {
    min-width: 0;
}

.news-headlines__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    line-height: 1.35;
    margin: 0 0 .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-headlines__item:hover .news-headlines__title {
    color: var(--ccpp-green);
}

.news-headlines__date {
    font-size: .72rem;
    color: #8891a0;
}

/* Lista de "Próximos eventos" (columna derecha del inicio) */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.events-list__item {
    display: flex;
    gap: 1rem;
    background: #fff;
    border-radius: 10px;
    padding: .85rem;
    box-shadow: 0 2px 8px rgba(4, 8, 20, .06);
}

.events-list__date {
    flex: 0 0 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--ccpp-green);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.events-list__day {
    font-weight: 700;
    font-size: 1.1rem;
}

.events-list__month {
    font-size: .65rem;
    font-weight: 600;
}

.events-list__body {
    min-width: 0;
}

.events-list__title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    margin: 0 0 .4rem;
}

.events-list__meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .78rem;
    color: rgba(0, 0, 0, .6);
}

.events-list__meta i {
    color: var(--ccpp-green);
    margin-right: .3rem;
}

/* ─────────────────────────────────────────────────────────────
   Estado de los eventos.

   La sección mezcla eventos propios y cursos del Centro de Capacitación
   (ver CapacitacionExternaService). Los que tienen inscripción abierta van
   en verde y son clicables hacia el portal de capacitaciones; los ya
   realizados se dejan atenuados, solo para que la sección no quede vacía
   entre convocatorias.
   ───────────────────────────────────────────────────────────── */
.evento-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .18rem .5rem;
    border-radius: 999px;
    line-height: 1.4;
}

.evento-badge--abierto {
    background: var(--ccpp-green, #2f9e44);
    color: #fff;
}

.evento-badge--proximo {
    background: rgba(4, 8, 20, .06);
    color: var(--ccpp-navy, #16324f);
}

/* Los eventos ya realizados conservan su afiche a color (en gris se veían
   apagados): lo que los distingue es una cinta roja en diagonal sobre la
   esquina superior derecha, que no tapa el contenido del afiche. */
.evento-badge--pasado {
    background: #d63939;
    color: #fff;
}


/* Item de la portada: clicable cuando enlaza al portal de capacitaciones. */
a.events-list__item {
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

a.events-list__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(4, 8, 20, .12);
    color: inherit;
}

.events-list__item--pasado {
    opacity: .75;
}

/* ─────────────────────────────────────────────────────────────
   Carrusel de afiches de eventos (portada).

   Solo se muestra la imagen: el afiche del Centro de Capacitación ya lleva
   impresos fecha, hora, ponente y modalidad. El clic abre la inscripción
   (o el detalle, si ya cerró) en el portal de capacitaciones.
   ───────────────────────────────────────────────────────────── */
/* El carrusel conserva la proporción cuadrada del afiche en lugar de estirarse
   a la altura de la columna de noticias: cuando esa columna queda más baja que
   ancha (pasa en FHD o mayor), el afiche solo llenaba el alto y dejaba franjas
   blancas a los lados. */
.events-carousel {
    position: relative;
    /* La altura sale del ancho, no de la columna. */
    flex: 0 1 auto;
    aspect-ratio: 1 / 1;
}

.events-carousel__track {
    /* Sacado del flujo para que las imágenes no impongan su altura natural. */
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 10px;
}

.events-carousel__track::-webkit-scrollbar {
    display: none;
}

.events-carousel__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(4, 8, 20, .06);
    display: block;
    text-decoration: none;
}

.events-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

a.events-carousel__slide:hover img {
    transform: scale(1.02);
}

.events-carousel__vacio {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2rem;
    text-align: center;
    background: var(--tblr-primary-lt, #e7f5ff);
    color: var(--ccpp-navy, #16324f);
    font-weight: 600;
}

.events-carousel__vacio i {
    font-size: 2.5rem;
}

.events-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ccpp-navy, #16324f);
    box-shadow: 0 2px 10px rgba(4, 8, 20, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background .2s ease;
}

.events-carousel__nav:hover {
    background: #fff;
}

.events-carousel__nav--prev {
    left: .5rem;
}

.events-carousel__nav--next {
    right: .5rem;
}

/* Tarjeta del listado /eventos.

   Las portadas son afiches (texto, fechas, ponentes): recortarlas con
   object-fit:cover deja fuera justo la información. Se muestran completas
   sobre un fondo neutro, como en el portal de capacitaciones. */
.evento-card__media {
    position: relative;
    /* Los afiches son cuadrados o casi (algunos traen unos píxeles de más y
       salen ligeramente rectangulares): un marco 1:1 con contain los muestra
       enteros y sin franjas apreciables. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: #eef1f4;
}

.evento-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.evento-card__media--vacio {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tblr-primary-lt, #e7f5ff);
    font-size: 2.5rem;
    color: var(--ccpp-navy, #16324f);
}

/* Cinta de estado sobre el afiche: misma forma para todos los estados
   (banda horizontal pegada al borde derecho, con la esquina superior
   izquierda biselada como los banderines del propio afiche) y solo cambia
   el color — verde si la inscripción está abierta, rojo si ya finalizó.
   Va después de las reglas de color de .evento-badge--* porque comparte
   especificidad y debe ganarles la posición. */
.evento-card__media .evento-badge,
.events-carousel__slide .evento-badge {
    position: absolute;
    top: 25px;
    left: auto;
    right: 0;
    width: auto;
    justify-content: center;
    border-radius: 0;
    /* El padding izquierdo extra deja el texto fuera del bisel. */
    clip-path: polygon(1.3rem 0, 100% 0, 100% 100%, 0 100%);
    padding: .28rem 1rem .28rem 2rem;
    font-size: .95rem;
    letter-spacing: .02em;
    color: #fff;
    /* box-shadow se recortaría junto con la forma: la sombra se pinta con
       drop-shadow, que sí sigue el contorno del clip-path. */
    box-shadow: none;
    filter: drop-shadow(-3px 5px 4px rgba(4, 8, 20, .55));
}

.evento-card__media .evento-badge--proximo,
.events-carousel__slide .evento-badge--proximo {
    background: var(--ccpp-navy, #16324f);
    color: #fff;
}

.events-carousel__slide .evento-badge {
    top: 27px;
}

.evento-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    font-size: .78rem;
    color: rgba(0, 0, 0, .6);
}

.evento-card__meta i {
    color: var(--ccpp-green);
    margin-right: .25rem;
}

/* Fila de "Aliados estratégicos": todos los logos en una sola fila,
   sin carrusel (se encogen para que quepan; en pantallas chicas pasan
   a la siguiente línea). */
.allies-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2rem;
}

.allies-row__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 70px;
}

.allies-row__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .2s ease;
}

.allies-row__logo:hover img {
    transform: scale(1.15);
}

/* Página "Quiénes somos": hero con foto de la sede + insignia flotante */
.nosotros-hero__title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.nosotros-hero__media {
    position: relative;
    margin-bottom: 1.5rem;
}

.nosotros-hero__photo {
    display: block;
    width: 100%;
    height: 285px;
    object-fit: cover;
    border-radius: 12px;
}

.nosotros-hero__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f4;
    color: #c1c9d2;
}

.nosotros-hero__photo--placeholder i {
    font-size: 4rem;
}

.nosotros-hero__badge {
    position: absolute;
    right: 1rem;
    bottom: -1.5rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 230px;
    background: var(--ccpp-green);
    color: #fff;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.nosotros-hero__badge i {
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* Sección "Valores institucionales": tarjetas claras, ícono a la
   izquierda y texto a la derecha para mantener poca altura. */
.value-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 32px rgba(0, 0, 0, .1);
    border-color: var(--ccpp-green);
}

.value-card__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ccpp-green);
    color: #fff;
    font-size: 1.4rem;
}

.value-card__title {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .015em;
    color: var(--ccpp-navy);
    margin-bottom: .4rem;
}

.value-card__desc {
    color: #8a94a3;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
}

/* Página "Misión y Visión": tarjetas claras con ícono + título en la
   misma fila y una ilustración decorativa de fondo, tono sobre tono. */
.mv-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 2.25rem;
    border: 1px solid rgba(0, 0, 0, .05);
}

.mv-card--green {
    background: #eef8f2;
}

.mv-card--navy {
    background: #eef1f7;
}

.mv-card__art {
    position: absolute;
    bottom: -1rem;
    right: -.5rem;
    font-size: 7rem;
    z-index: 0;
}

.mv-card--green .mv-card__art {
    color: var(--ccpp-green);
    opacity: .12;
}

.mv-card--navy .mv-card__art {
    color: var(--ccpp-navy);
    opacity: .12;
}

.mv-card__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.mv-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.mv-card--green .mv-card__icon {
    background: var(--ccpp-green);
}

.mv-card--navy .mv-card__icon {
    background: var(--ccpp-navy);
}

.mv-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ccpp-navy);
    margin: 0;
}

.mv-card__text {
    position: relative;
    z-index: 1;
    font-size: .95rem;
    line-height: 1.7;
    color: #5b6572;
    margin: 0;
}

/* Página "Historia": línea de tiempo vertical en vez de párrafos sueltos
   dentro de una tarjeta genérica. */
.historia-timeline__item {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 2.25rem;
}

.historia-timeline__item--last {
    padding-bottom: 0;
}

.historia-timeline__year {
    position: relative;
    flex: 0 0 90px;
    text-align: right;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ccpp-green);
    padding-top: .2rem;
}

.historia-timeline__year::before {
    content: '';
    position: absolute;
    top: .3rem;
    right: -1.55rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ccpp-green);
    z-index: 1;
}

.historia-timeline__year::after {
    content: '';
    position: absolute;
    top: .3rem;
    bottom: -2.25rem;
    right: -1.3rem;
    width: 2px;
    background: #dde3ea;
}

.historia-timeline__item--last .historia-timeline__year::after {
    display: none;
}

.historia-timeline__body {
    flex: 1;
    min-width: 0;
}

.historia-timeline__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    margin-bottom: .5rem;
}

@media (max-width: 575.98px) {
    .historia-timeline__year {
        flex-basis: 60px;
        font-size: .8rem;
    }
}

/* Página "Consejo Directivo": tarjeta destacada tipo "spotlight" para el
   presidente + tarjetas más discretas para el resto del consejo. */
.presidente-spotlight {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    background: #f4f6f8;
    border-radius: 20px;
    padding: 2.5rem;
}

.presidente-spotlight__photo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 257px;
    height: 257px;
}

.presidente-spotlight__photo-wrap::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: var(--ccpp-green);
    opacity: .15;
}

.presidente-spotlight__photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 257px;
    height: 257px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.presidente-spotlight__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--ccpp-green);
    font-size: 5.5rem;
}

.presidente-spotlight__body {
    position: relative;
    z-index: 1;
}

.presidente-spotlight__nombre {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    margin-bottom: .2rem;
}

.presidente-spotlight__eyebrow {
    display: block;
    color: var(--ccpp-green);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

.presidente-spotlight__text {
    color: #5b6572;
    font-style: italic;
    font-size: .95rem;
    line-height: 1.6;
    max-width: 52ch;
}

.presidente-spotlight__text i {
    color: var(--ccpp-green);
    font-style: normal;
    margin-right: .3rem;
}

@media (max-width: 575.98px) {
    .presidente-spotlight {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }
}

/* Banda de llamado a la acción "Hazte socio" */
.cta-socio {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    background: linear-gradient(120deg, var(--ccpp-navy), #103322 130%);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 2rem 2.5rem;
    color: #fff;
}

.cta-socio__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .3);
    font-size: 1.5rem;
}

.cta-socio__body {
    flex: 1;
    min-width: 0;
}

.cta-socio__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.cta-socio__text {
    color: rgba(255, 255, 255, .75);
    font-size: .95rem;
    max-width: 60ch;
}

.cta-socio__btn {
    flex-shrink: 0;
    background: var(--ccpp-green);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    padding: .65rem 1.4rem;
}

.cta-socio__btn:hover {
    background: #156b3a;
    color: #fff;
}

@media (max-width: 767.98px) {
    .cta-socio {
        flex-direction: column;
        text-align: center;
    }
}

.section-underline {
    width: 48px;
    height: 3px;
    background: var(--ccpp-green);
    border-radius: 2px;
}

/* Fila del resto del consejo: todos en una sola línea (se encogen para
   caber), en vez de envolver en varias filas como una cuadrícula normal. */
.directivo-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
}

.directivo-row .directivo-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 1.5rem 1rem;
}

.directivo-row .directivo-card__photo {
    width: 132px;
    height: 132px;
}

.directivo-row .directivo-card .fw-bold {
    font-size: .9rem;
}

@media (max-width: 575.98px) {
    .directivo-row {
        flex-wrap: wrap;
    }

    .directivo-row .directivo-card {
        flex: 1 1 45%;
    }
}

.directivo-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.directivo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
    border-color: var(--ccpp-green);
}

.directivo-card__photo {
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    object-fit: cover;
}

.directivo-card__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.directivo-card__cargo {
    color: var(--ccpp-green);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: .3rem;
}

/* Submenú de la sección "Nosotros": más delgado que un nav-pills normal y
   con fondo propio para distinguirlo del resto del contenido. */
.nosotros-subnav-wrapper {
    width: 100%;
    background: #eaf3ee;
    padding: .6rem 0;
}

.nosotros-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.nosotros-subnav .nav-link {
    padding: .25rem .9rem;
    font-size: .8rem;
    border-radius: 999px;
    color: var(--ccpp-navy);
}

.nosotros-subnav .nav-link.active {
    background: var(--ccpp-green);
    color: #fff;
}

/* Bootstrap solo trae utilidades de espaciado hasta *-5 (3rem); esta
   extiende la escala para dejar más aire antes del footer. */
.pb-6 {
    padding-bottom: 4.5rem;
}

/* Página "Quiénes somos": cada sección con su propio fondo para
   diferenciarlas visualmente, con bastante aire entre ambas. */
.nosotros-hero-section {
    background: #fff;
    padding: 3rem 0 4.5rem;
}

.valores-section {
    background: #f6f8fa;
    padding: 4.5rem 0 5rem;
}

/* Footer institucional: panel izquierdo de color sólido (contacto) +
   panel derecho con la foto de la fachada y una capa oscura transparente
   encima, separados por un corte en diagonal (mismo lenguaje visual del
   logo/hero en diagonal usado en el resto del sitio). */
.site-footer {
    position: relative;
    background: var(--ccpp-navy);
    color: rgba(255, 255, 255, .75);
    /* Tabler define su propia regla para la etiqueta <footer> "pelada"
       (sin clase): margin-top:auto, padding, border-top, etc., pensada
       para su propio patrón de página de escritorio. La neutralizamos
       explícitamente para no heredar nada de eso aquí. */
    margin-top: 0;
    padding: 0;
    border-top: 0;
    flex-shrink: 0;
}

.site-footer__bg,
.site-footer__bg-overlay {
    position: absolute;
    inset: 0;
    /* La diagonal cae en el hueco vacío entre el logo y la columna
       "Servicios", sin invadir ningún texto (como en el sitio original).
       Se ancla al borde izquierdo de la caja centrada (container-xl, máx.
       ventana. La columna del logo ocupa el 50%, así que el corte arranca
       algo antes de esa marca y su vértice superior queda holgadamente a
       la izquierda de "Servicios", que empieza en el 50% más el gap. */
    left: 34%;
    /* Inclinación suave (4%): con un ángulo pronunciado, la esquina superior
       invadía "Servicios" aunque la base estuviera bien colocada. Verificado
       de 1024px a 3440px de ancho: el vértice superior siempre queda a la
       izquierda del texto. */
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);
}

.site-footer__bg {
    background-size: cover;
    background-position: center;
}

.site-footer__bg-overlay {
    background: rgba(10, 16, 28, .68);
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1.5rem;
    /* A ancho completo (no en container-xl): en el sitio original la franja
       diagonal llega hasta los bordes y el bloque de enlaces arranca pasada
       la mitad de la pantalla, algo imposible dentro de una caja centrada
       de 1140px, donde el margen izquierdo siempre lo empuja antes del
       centro. El padding derecho deja libre la franja donde viven los
       botones flotantes, para que no tapen el copyright. */
    padding-right: 5.5rem;
}

.site-footer__left {
    /* La mitad del ancho de la ventana: así el bloque de enlaces arranca
       siempre pasada la mitad de la pantalla, como en el sitio original,
       en lugar de quedar anclado a un valor fijo que en pantallas grandes
       lo dejaba muy a la izquierda. El logo se mantiene alineado a la
       derecha de esta columna para no quedar pegado al borde. */
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    /* El contenido (logo + datos) es más angosto que la media pantalla que
       ocupa la columna, así que se centra en ella: contra el borde izquierdo
       dejaba un hueco muerto junto a la diagonal, y contra la diagonal
       (flex-end) lo dejaba en el borde opuesto. Centrado, el sobrante se
       reparte parejo a ambos lados. */
    align-items: center;
    text-align: left;
    padding: 3rem 1.5rem;
}

/* Los bloques internos conservan su alineación a la izquierda: solo se
   reposiciona el conjunto dentro de la columna. El ancho común hace que el
   logo arranque en el mismo borde que los datos de contacto de abajo. */
.site-footer__left>* {
    width: 100%;
    max-width: 330px;
}


.site-footer__right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    padding: 3rem 0;
    /* Tope de ancho: ocupa la mitad derecha, pero en monitores muy grandes
       las columnas se separarían demasiado entre sí. */
    max-width: 700px;
}

.site-footer__col {
    flex: 1 1 160px;
    min-width: 150px;
}

/* La columna de redes/boletín/copyright necesita más ancho que las de
   enlaces: el formulario y el aviso legal se ven apretados en 160px. */
.site-footer__col--ancha {
    flex: 1 1 230px;
    min-width: 190px;
}

/* Copyright: vive dentro de la última columna desde que se retiró la banda
   verde inferior, siguiendo el patrón del sitio original. */
.site-footer__copyright {
    /* Los botones flotantes (asistente, WhatsApp, Facebook, volver arriba)
       ocupan la franja derecha inferior: el texto se estrecha para pasar por
       delante de ellos sin quedar oculto detrás. */
    margin: 1.5rem 3rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .6);
    font-size: .8rem;
    line-height: 1.5;
}

.site-footer__copyright strong {
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
}


/* Tablet: el logo baja a su propia fila y las columnas se reparten el ancho,
   en vez de apretarse las cuatro en una sola línea. */
@media (max-width: 1199.98px) {

    .site-footer__inner {
        flex-wrap: wrap;
        padding-right: 1.5rem;
    }

    .site-footer__left {
        flex: 1 1 100%;
        /* Ya no comparte fila con las columnas: vuelve a alinearse a la
           izquierda, en vez de quedar pegado a la diagonal. */
        align-items: flex-start;
        padding: 2.5rem 1.5rem 0;
    }

    .site-footer__right {
        max-width: none;
        flex-wrap: wrap;
        padding: 2rem 1.5rem 0 1.5rem;
    }

    .site-footer__col {
        flex: 1 1 200px;
    }

    /* En una fila propia el bloque ya no necesita el tope que lo mantenía
       compacto junto a la diagonal. */
    .site-footer__left>* {
        max-width: none;
    }
}

/* Móvil: la diagonal desaparece (no hay ancho para que se lea) y todo pasa a
   una sola columna. */

.site-footer__heading {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 1rem;
}

.site-footer__info {
    margin: 0 0 .75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 10px;
}

.site-footer__info i {
    color: var(--ccpp-green);
    width: 1.1rem;
    display: inline-block;
    text-align: center;
}

.site-footer__info a {
    color: inherit;
    text-decoration: none;
}

.site-footer__info a:hover {
    color: #fff;
}

.site-footer__maps-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: .75rem;
}

.site-footer__maps-link:hover {
    color: var(--ccpp-green);
}

/* El mapa se adapta al ancho de la columna izquierda del footer y mantiene
   una proporción fija, para que el iframe no imponga los 600x450 del embed. */
.site-footer__mapa {
    margin-top: .85rem;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    height: 150px;
}

.site-footer__mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.site-footer__links {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.site-footer__links a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    font-size: .92rem;
}

.site-footer__links a:hover {
    color: #fff;
}

.site-footer__soon {
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
    font-style: italic;
}

.site-footer__social {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.1rem;
    transition: background .2s ease, color .2s ease;
}

.site-footer__social a:hover {
    background: var(--ccpp-green);
    color: #fff;
}


.site-footer__logo {
    width: 100%;
    max-width: 230px;
}

/* Móvil: sin espacio para la diagonal ni para varias columnas, el footer
   pasa a una sola columna centrada, con padding lateral propio (antes iba a
   cero y el contenido quedaba pegado al borde de la pantalla). */
@media (max-width: 767.98px) {

    .site-footer__bg,
    .site-footer__bg-overlay {
        left: 0;
        clip-path: none;
    }

    .site-footer__inner {
        flex-direction: column;
        gap: 0;
        padding: 0 1.25rem;
        text-align: center;
    }

    .site-footer__left {
        align-items: center;
        text-align: center;
        padding: 2.5rem 0 1.5rem;
    }

    /* El tope de 330px que mantenía compacto el bloque junto a la diagonal
       se sustituye por uno propio, centrado en la pantalla. */
    .site-footer__left>* {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .site-footer__logo {
        align-self: center;
        margin-right: -6%;
    }

    /* Los datos de contacto se centran como bloque, pero cada línea conserva
       el icono junto a su texto en vez de quedar suelto. */
    .site-footer__info {
        align-items: center;
        text-align: left;
    }

    .site-footer__info li {
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    .site-footer__maps-link {
        justify-content: center;
        width: 100%;
    }

    .site-footer__mapa {
        margin-left: auto;
        margin-right: auto;
    }

    .site-footer__right {
        flex-direction: column;
        gap: 2rem;
        padding: 0 0 2.5rem;
    }

    .site-footer__col,
    .site-footer__col--ancha {
        flex-basis: auto;
        min-width: 0;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* Las listas de enlaces ("Servicios" tiene 12 ítems) se reparten en dos
       columnas: en una sola, el footer se alargaba demasiado y obligaba a
       un scroll largo hasta el boletín. */
    .site-footer__links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .55rem 1rem;
        text-align: center;
    }

    .site-footer__social {
        justify-content: center;
    }

    /* En una sola columna centrada, el copyright ya no necesita esquivar los
       botones flotantes por el costado: se separa por debajo. */
    .site-footer__copyright {
        margin: 1.5rem 0 4.5rem;
        text-align: center;
    }
}


/* Botón "volver arriba" */
.btn-flotante {
    position: fixed;
    right: 1.25rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    z-index: 40;
    transition: transform .2s ease, background .2s ease;
}

.btn-flotante:hover {
    transform: translateY(-3px);
    color: #fff;
}

.btn-flotante--whatsapp {
    bottom: 5.75rem;
    background: #25d366;
}

.btn-flotante--facebook {
    bottom: 9.25rem;
    background: #1877f2;
}

.btn-volver-arriba {
    bottom: 12.75rem;
    background: var(--ccpp-navy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    border: #008360 2px solid !important;
}

.btn-volver-arriba.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-volver-arriba:hover {
    background: #156b3a;
    transform: translateY(0);
}

/* Banner de cabecera de páginas internas (imagen configurable desde
   admin/banners, por página) */
.page-banner {
    position: relative;
    min-height: 230px;
    display: flex;
    align-items: flex-end;
    background-color: var(--ccpp-navy);
    background-size: cover;
    background-position: center;
    padding-bottom: 2rem;
    overflow: hidden;
}

.page-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(13, 21, 38, .88) 0%,
            rgba(44, 58, 93, .8) 45%,
            rgba(44, 58, 93, .35) 80%,
            rgba(44, 58, 93, 0) 96%);
}

.page-banner__content {
    position: relative;
    z-index: 1;
    color: #fff;
}

.page-banner__title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.page-banner__subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .page-banner {
        min-height: 180px;
    }

    .page-banner__title {
        font-size: 1.6rem;
    }
}

/* Página "Área de Placas" (y futuras páginas de servicios individuales) */
.placas-offer {
    background: var(--ccpp-navy);
    color: #fff;
    padding: 2.5rem 0;
}

.placas-offer__title {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.placas-offer__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
}

.placas-offer__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    max-width: 220px;
    text-align: center;
    font-weight: 500;
}

.placas-offer__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    font-size: 1.5rem;
}

.numbered-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.numbered-list__item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.numbered-list__num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ccpp-navy);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.numbered-list__num--green {
    background: var(--ccpp-green);
}

.numbered-list__num--navy {
    background: var(--ccpp-navy);
}

/* Banda de color con grid de íconos (ej. "Beneficios" de Quiero Asociarme) */
.beneficios-banda {
    background: linear-gradient(120deg, var(--ccpp-navy) 0%, #1a2440 100%);
}

.beneficio-icono {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
}

.cost-card {
    height: 100%;
    background: var(--ccpp-navy);
    color: #fff;
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.cost-card--tiempo {
    background: #1c6e8c;
}

.cost-card__icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, .8);
    margin-bottom: .5rem;
}

.cost-card__precio {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.cost-card__desc {
    font-size: .85rem;
    color: rgba(255, 255, 255, .75);
}

.tabla-placas thead th {
    background: var(--ccpp-green);
    color: #fff;
    border-bottom: 0;
}

.mapa-embed {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 12px;
    overflow: hidden;
}

.mapa-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* "Boletines Semanales" en el inicio: cada boletín como una hoja A4 */
.boletines-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--ccpp-green, #2f9e44) #e9ecef;
}

/* Sin desborde real (el contenido cabe entero) -> se centra. Con
   desborde, se queda en flex-start para no cortar la primera/última
   tarjeta (justify-content:center + overflow recorta simétrico por
   ambos lados en vez de permitir scroll completo desde el inicio). La
   clase la decide JS comparando scrollWidth vs clientWidth. */
.boletines-row--centrado {
    justify-content: center;
}

.boletines-row::-webkit-scrollbar {
    height: 10px;
}

.boletines-row::-webkit-scrollbar-track {
    background: #e9ecef;
    border-radius: 6px;
}

.boletines-row::-webkit-scrollbar-thumb {
    background: var(--ccpp-green, #2f9e44);
    border-radius: 6px;
}

/* Listados completos (ej. /publicaciones/boletin): grilla de varias filas en
   vez del carrusel horizontal de la portada. 5 columnas en escritorio. */
.boletines-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    justify-items: center;
}

@media (min-width: 576px) {
    .boletines-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .boletines-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .boletines-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.boletines-grid .boletin-card {
    flex: none;
    width: 100%;
    max-width: 180px;
}

.boletin-card {
    flex: 0 0 160px;
    width: 160px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease;
}

.boletin-card:hover {
    transform: translateY(-4px);
    color: inherit;
}

.boletin-card__hoja {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1.4142;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 14px rgba(4, 8, 20, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(0, 0, 0, .15);
    margin-bottom: .75rem;
}

/* La imagen va en una capa aparte que sobresale un poco (-2px) por fuera
   de la tarjeta; al estar recortada por el overflow:hidden del padre, no
   deja ninguna costura/línea entre el borde redondeado y la imagen (algo
   que sí pasaba al poner el background-image directo en el elemento con
   border-radius + border). */
.boletin-card__hoja-bg {
    position: absolute;
    inset: -2px;
    background-size: cover;
    background-position: center;
}

/* Portadas que deben verse enteras (capturas de PDF de proporción variable,
   como los pronunciamientos migrados): se ajustan dentro de la hoja en vez
   de llenarla, aunque queden franjas del fondo blanco a los lados. Lo marca
   el contenedor, no la tarjeta, para que el partial siga sin estado. */
.boletines-row--completa .boletin-card__hoja-bg,
.boletines-grid--completa .boletin-card__hoja-bg {
    background-size: contain;
    background-repeat: no-repeat;
}

.boletin-card:hover .boletin-card__hoja {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 22px rgba(4, 8, 20, .18);
}

.boletin-card__badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: var(--ccpp-navy);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .2rem .5rem;
    border-radius: 4px;
}

.boletin-card__titulo {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    margin-bottom: .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.boletin-card__fecha {
    font-size: .75rem;
    color: rgba(0, 0, 0, .55);
    text-transform: capitalize;
}

/* Página "Personal Administrativo": tarjetas en cuadrícula, varias por
   fila, con foto o (si no hay) un ícono que representa el área. */
.personal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 16px;
    padding: 1.75rem 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.personal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
    border-color: var(--ccpp-green);
}

.personal-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--ccpp-navy);
    color: #fff;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.personal-card__avatar--foto {
    object-fit: cover;
}

.personal-card__nombre {
    font-weight: 700;
    color: var(--ccpp-navy);
    font-size: .95rem;
    margin-bottom: .2rem;
}

.personal-card__area {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ccpp-green);
}

.personal-card__contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    width: 100%;
}

.personal-card__contacto-linea {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    color: var(--ccpp-navy);
    font-size: .8rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personal-card__contacto-linea i {
    flex-shrink: 0;
    color: var(--ccpp-green);
}

.personal-card__contacto-linea:hover {
    color: var(--ccpp-green);
}

/* Página "Alquiler de Ambientes" */
.ambientes-hero__title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.ambientes-hero__media {
    position: relative;
    margin-bottom: 1.5rem;
}

.ambientes-hero__photo {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 12px;
}

.ambientes-hero__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f4;
    color: #c1c9d2;
    font-size: 4rem;
}

.ambientes-hero__catalogo {
    position: absolute;
    right: 1rem;
    bottom: -1.5rem;
    max-width: 240px;
    background: var(--ccpp-green);
    color: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.ambientes-hero__catalogo-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.ambientes-hero__catalogo-desc {
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: .9rem;
}

.ambientes-galeria {
    background: var(--ccpp-navy);
    padding: 2.5rem 0;
}

.ambientes-galeria__titulo {
    text-align: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.ambientes-galeria__item {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.ambientes-galeria__item img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.ambientes-galeria__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: #eef1f4;
    color: #c1c9d2;
    font-size: 2.5rem;
}

.ambientes-galeria__nombre {
    padding: .75rem 1rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    text-align: center;
    font-size: .9rem;
}

@media (max-width: 575.98px) {
    .ambientes-hero__catalogo {
        position: static;
        max-width: none;
        margin-top: 1rem;
    }
}

/* =========================================================
   Galería de publicaciones (Noticias / Artículos / etc.)
   ========================================================= */

.galeria-publicaciones {
    row-gap: 1.75rem;
}

.publicacion-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(4, 8, 20, .06);
    border: 1px solid rgba(4, 8, 20, .06);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
}

.publicacion-card:hover {
    box-shadow: 0 12px 28px rgba(4, 8, 20, .14);
    transform: translateY(-3px);
    color: inherit;
    text-decoration: none;
}

.publicacion-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

/* Galería de artículos: miniatura cuadrada en vez del 16/10 por defecto. */
.galeria-publicaciones--cuadrada .publicacion-card__media {
    aspect-ratio: 1 / 1;
}

.publicacion-card__img {
    position: absolute;
    inset: -2px;
    background-size: cover;
    background-position: center;
    transition: transform .35s ease;
}

.publicacion-card:hover .publicacion-card__img {
    transform: scale(1.05);
}

.publicacion-card__img--vacio {
    background: linear-gradient(135deg, #eef1f4, #e3e8ee);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: #b9c2cc;
}

/* Cintillo de fecha en forma de bandera, sobre la esquina inferior
   izquierda de la imagen (referencia visual pedida por el cliente). */
.publicacion-card__fecha {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1.1;
    min-width: 108px;
    padding: .5rem 1.5rem .5rem .9rem;
    background: var(--ccpp-navy);
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

.publicacion-card__dia {
    font-size: 1.35rem;
    font-weight: 700;
}

.publicacion-card__mes-anio {
    display: flex;
    flex-direction: column;
}

.publicacion-card__mes {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.publicacion-card__anio {
    font-size: .66rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .75);
}

.publicacion-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.1rem 1.25rem 1.25rem;
}

.publicacion-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #8891a0;
    margin-bottom: .6rem;
}

.publicacion-card__meta i {
    color: var(--ccpp-navy);
    margin-right: .2rem;
}

.publicacion-card__titulo {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    line-height: 1.35;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
}

.publicacion-card:hover .publicacion-card__titulo {
    color: #1c2b4d;
}

.publicacion-card__resumen {
    font-size: .88rem;
    color: #667085;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bloque "Objetivo" de Junta de Prevención y Resolución de Disputas */
.jprd-objetivo {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: #eaf3ee;
    border-left: 4px solid var(--ccpp-green);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
}

.jprd-objetivo__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--ccpp-green);
    font-size: 1.4rem;
}

.jprd-objetivo__label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ccpp-green);
    margin-bottom: .35rem;
}

@media (max-width: 575.98px) {
    .jprd-objetivo {
        flex-direction: column;
    }
}

/* Contenido de noticia/artículo escrito con el editor TinyMCE (HTML real):
   tipografía básica para que encabezados, listas, enlaces e imágenes
   insertadas se vean consistentes con el resto del sitio. */
.noticia-contenido {
    white-space: normal;
}

.noticia-contenido :where(h1, h2, h3, h4) {
    color: var(--ccpp-navy);
    font-weight: 700;
    margin: 1.5rem 0 .75rem;
}

.noticia-contenido p {
    margin-bottom: 1rem;
}

.noticia-contenido a {
    color: var(--ccpp-green);
}

.noticia-contenido ul,
.noticia-contenido ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.noticia-contenido img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: .5rem 0;
}

.noticia-contenido blockquote {
    border-left: 3px solid var(--ccpp-green);
    padding-left: 1rem;
    color: #667085;
    font-style: italic;
    margin: 1rem 0;
}

.noticia-contenido table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .92rem;
}

.noticia-contenido table td,
.noticia-contenido table th {
    border: 1px solid rgba(4, 8, 20, .15);
    padding: .5rem .75rem;
}

.noticia-contenido table th {
    background: #f6f8fa;
    color: var(--ccpp-navy);
    font-weight: 700;
}

.noticia-contenido iframe,
.noticia-contenido video {
    max-width: 100%;
    border-radius: 8px;
    margin: .5rem 0;
}

.noticia-contenido pre {
    background: #f6f8fa;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    font-size: .85rem;
}

.noticia-contenido details {
    border: 1px solid rgba(4, 8, 20, .12);
    border-radius: 8px;
    padding: .75rem 1rem;
    margin: 1rem 0;
}

.noticia-contenido summary {
    font-weight: 700;
    color: var(--ccpp-navy);
    cursor: pointer;
}

/* Encabezado de la noticia (imagen junto al título en vez de arriba, para
   no dejar espacio vacío al lado si la imagen es angosta/vertical). */
.noticia-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}

.noticia-header__img {
    flex: 0 0 240px;
    width: 240px;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    cursor: zoom-in;
}

.noticia-header__info {
    flex: 1;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .noticia-header {
        flex-direction: column;
    }

    .noticia-header__img {
        width: 100%;
        height: auto;
        max-height: 240px;
    }
}

/* Encabezado del boletín: portada tipo "hoja" (A4) junto al título. */
.boletin-header {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}

.boletin-header__portada {
    flex: 0 0 150px;
    width: 150px;
    aspect-ratio: 1 / 1.4142;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(4, 8, 20, .15);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .15);
    font-size: 2.5rem;
}

.boletin-header__portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.boletin-header__info {
    flex: 1;
    min-width: 0;
    padding-top: .25rem;
}

.boletin-visor {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(4, 8, 20, .08);
    background: #eef1f4;
}

.boletin-visor iframe {
    width: 100%;
    height: 85vh;
    min-height: 600px;
    border: 0;
    display: block;
}

@media (max-width: 575.98px) {
    .boletin-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .boletin-header__portada {
        width: 130px;
    }
}

/* =========================================================
   Columna lateral de la página de detalle (noticia/artículo):
   más noticias, otras publicaciones y un CTA de socios.
   ========================================================= */

.sidebar-box {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(4, 8, 20, .06);
    margin-bottom: 1.5rem;
}

.sidebar-box__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--ccpp-green);
}

.sidebar-box__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    margin-top: .75rem;
}

.sidebar-news {
    display: flex;
    flex-direction: column;
}

.sidebar-news__item {
    display: flex;
    gap: .85rem;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(4, 8, 20, .08);
    text-decoration: none;
}

.sidebar-news__item:first-child {
    padding-top: 0;
}

.sidebar-news__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.sidebar-news__thumb {
    flex: 0 0 64px;
    height: 64px;
    border-radius: 8px;
    background-color: var(--ccpp-navy);
    background-image: linear-gradient(120deg, var(--ccpp-navy) 0%, #0d1526 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .5);
    font-size: 1.2rem;
    overflow: hidden;
}

.sidebar-news__body {
    min-width: 0;
}

.sidebar-news__title {
    font-size: .78rem;
    font-weight: 400;
    color: var(--ccpp-navy);
    line-height: 1.32;
    margin: 0 0 .3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-news__item:hover .sidebar-news__title {
    color: var(--ccpp-green);
}

.sidebar-news__date {
    font-size: .72rem;
    color: #8891a0;
}

.sidebar-doclist {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.sidebar-doclist__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    background: #f6f8fa;
    text-decoration: none;
    transition: background-color .15s ease;
}

.sidebar-doclist__item:hover {
    background: #edf2f7;
}

.sidebar-doclist__icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: #d63939;
}

.sidebar-doclist__thumb {
    flex-shrink: 0;
    width: 40px;
    height: 56px;
    border-radius: 4px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(4, 8, 20, .1);
}

.sidebar-doclist__thumb--vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef1f4;
    color: #d63939;
    font-size: 1.1rem;
}

.sidebar-doclist__title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ccpp-navy);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.titulo-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lightbox genérico (ver publicacion_show.php) */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 8, 20, .92);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox-overlay.show {
    display: flex;
}

.lightbox-overlay__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.lightbox-overlay__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}

.lightbox-overlay__close:hover {
    background: rgba(255, 255, 255, .22);
}

/* ─────────────────────────────────────────────────────────────
   Portada: franja de publicaciones por categoría
   Cuatro columnas (Boletines, Revistas, Comercio Exterior, Data e
   Indicadores), cada una con su encabezado y su enlace "Ver todos".
   El ancho de cada columna lo fija la vista con --col-ancho, porque
   "Boletines" muestra 3 portadas y las demás 2.
   ───────────────────────────────────────────────────────────── */
.publicaciones-franja {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 1.75rem;
    align-items: flex-start;
}

.publicaciones-franja__col {
    /* --col-ancho es el número de portadas que muestra la columna, y actúa
       como su peso al repartir el ancho: "Boletines" (3) recibe una vez y
       media lo de una columna de 2. La base 0 hace que el reparto dependa
       solo del peso y no del contenido, de modo que las cuatro columnas
       entran en una misma fila en vez de desbordar. */
    flex: var(--col-ancho, 2) 1 0;
    min-width: 0;
}

.publicaciones-franja__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(44, 58, 93, .12);
}

/* "Ver todos" no se parte en dos líneas: es el título el que dispone del
   ancho sobrante. */
.publicaciones-franja__head .link-servicios {
    flex: none;
    white-space: nowrap;
    font-size: .8rem;
}

.publicaciones-franja__titulo {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ccpp-navy);
    line-height: 1.25;
}

.publicaciones-franja__items {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Las tarjetas de portada se reparten el ancho de su columna por igual. */
.publicaciones-franja__items>.boletin-card {
    flex: 1 1 0;
    min-width: 0;
}

.publicaciones-franja__items .boletin-card__titulo {
    font-size: .78rem;
    line-height: 1.3;
    -webkit-line-clamp: 3;
}

.publicaciones-franja__items .boletin-card__fecha {
    font-size: .7rem;
}

/* Tablet: dos columnas por fila; con cuatro no queda ancho legible para las
   portadas. */
@media (max-width: 1199.98px) {
    .publicaciones-franja__col {
        flex: 1 1 calc(50% - 1rem);
    }
}

@media (max-width: 767.98px) {
    .publicaciones-franja__col {
        flex-basis: 100%;
    }
}

@media (max-width: 575.98px) {
    .publicaciones-franja__items {
        gap: .75rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   Portada: tarjetas de "Otras publicaciones" y "Pronunciamientos"
   ───────────────────────────────────────────────────────────── */
.articulo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(44, 58, 93, .1);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.articulo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
    color: inherit;
}

.articulo-card__media {
    position: relative;
    height: 190px;
    background-color: #eef1f5;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa4b2;
    font-size: 2rem;
}

/* Los pronunciamientos son documentos escaneados: se muestran completos
   (contain) en vez de recortados, para que el texto siga siendo legible. */
.articulo-card__media--documento {
    /* Misma altura que las tarjetas de artículo vecinas, para que la columna
       no sobresalga de la fila. `contain` mantiene legible el documento
       escaneado en vez de recortarlo. */
    height: 190px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: top center;
}

/* La columna de pronunciamientos no se estira a la altura de la fila: se
   ajusta a su contenido, de modo que su enlace "Más pronunciamientos" queda
   junto a la tarjeta y no pegado a la sección siguiente. */
.articulo-card--documento {
    height: auto;
}

/* Fecha sobre la imagen, como en el sitio de referencia. */
.articulo-card__fecha {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .75rem;
    background: var(--ccpp-navy);
    color: #fff;
    line-height: 1.1;
}

.articulo-card__fecha strong {
    font-size: 1.35rem;
    font-weight: 700;
}

.articulo-card__fecha span {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}

.articulo-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
}

.articulo-card__tipo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #7a8699;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.articulo-card__tipo--badge {
    align-self: flex-start;
    padding: .2rem .6rem;
    border-radius: 12px;
    background: rgba(44, 58, 93, .1);
    color: var(--ccpp-navy);
    font-weight: 600;
}

.articulo-card__titulo {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ccpp-navy);
    /* Títulos largos: se cortan a 3 líneas para que las tarjetas de una
       misma fila conserven la misma altura. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.articulo-card__resumen {
    margin: 0;
    color: #6b7684;
    font-size: .84rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   Asistente virtual (widget flotante del portal público)
   Encabeza la columna derecha, pegado al borde inferior: es el elemento
   más visible de la pila. Por encima van los flotantes de redes sociales
   (WhatsApp 5.75rem, Facebook 9.25rem, volver arriba 12.75rem), que se
   desplazaron hacia arriba para cederle esa posición.
   ───────────────────────────────────────────────────────────── */
.asistente-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 45;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--ccpp-navy);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.asistente-fab:hover {
    transform: translateY(-3px);
    background: var(--ccpp-green);
    animation: none;
}

/* Latido tipo corazón (doble pulso y pausa) para llamar la atención sobre
   el asistente. Se detiene al pasar el cursor y mientras el chat está
   abierto, cuando el botón ya cumplió su función de atraer la mirada. */
.asistente-fab--latiendo {
    animation: asistenteLatido 2.4s ease-in-out infinite;
}

.asistente-fab--latiendo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ccpp-green);
    animation: asistenteOnda 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes asistenteLatido {

    0%,
    55%,
    100% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.14);
    }

    22% {
        transform: scale(1);
    }

    34% {
        transform: scale(1.14);
    }
}

@keyframes asistenteOnda {
    0% {
        opacity: .65;
        transform: scale(1);
    }

    45% {
        opacity: 0;
        transform: scale(1.55);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

/* Respeta a quien pidió menos animación en su sistema. */
@media (prefers-reduced-motion: reduce) {

    .asistente-fab--latiendo,
    .asistente-fab--latiendo::after {
        animation: none;
    }
}

.asistente-fab__punto {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ccpp-green);
    border: 2px solid #fff;
}

.asistente-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 5.5rem;
    z-index: 46;
    width: 360px;
    max-width: calc(100vw - 2.5rem);
    height: 520px;
    max-height: calc(100vh - 7.5rem);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.asistente-panel.abierto {
    display: flex;
}

.asistente-panel__cabecera {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem .875rem;
    background: var(--ccpp-navy);
    color: #fff;
}

.asistente-panel__avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.asistente-panel__titulo {
    margin: 0;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.15;
}

.asistente-panel__subtitulo {
    margin: 0;
    font-size: .6875rem;
    opacity: .8;
}

.asistente-panel__acciones {
    margin-left: auto;
    display: flex;
    gap: .125rem;
}

.asistente-panel__acciones button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s ease;
}

.asistente-panel__acciones button:hover {
    background: rgba(255, 255, 255, .15);
}

.asistente-panel__acciones button.activo {
    background: rgba(255, 255, 255, .28);
}

.asistente-panel__ajustes {
    display: none;
    padding: .75rem .875rem;
    background: #eef1f5;
    border-bottom: 1px solid #dfe4ea;
}

.asistente-panel__ajustes.abierto {
    display: block;
}

.asistente-panel__etiqueta {
    display: block;
    margin-bottom: .1875rem;
    font-size: .7rem;
    font-weight: 600;
    color: #47555e;
}

.asistente-panel__cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: .875rem;
    background: #f4f6f8;
}

.asistente-mensaje {
    display: flex;
    margin-bottom: .75rem;
}

.asistente-mensaje--usuario {
    justify-content: flex-end;
}

.asistente-mensaje__burbuja {
    max-width: 82%;
    padding: .5625rem .75rem;
    border-radius: 12px;
    font-size: .84rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.asistente-mensaje--bot .asistente-mensaje__burbuja {
    background: #fff;
    color: #333;
    border: 1px solid #e6ebee;
    border-bottom-left-radius: 3px;
}

.asistente-mensaje--usuario .asistente-mensaje__burbuja {
    background: var(--ccpp-navy);
    color: #fff;
    border-bottom-right-radius: 3px;
}

.asistente-mensaje--bot a {
    color: var(--ccpp-navy);
    font-weight: 600;
}

.asistente-resultado-tipo {
    display: inline-block;
    margin-right: .25rem;
    padding: .0625rem .375rem;
    border-radius: 10px;
    background: #eef1f5;
    color: #5a6673;
    font-size: .68rem;
    font-weight: 600;
}

.asistente-sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: .25rem 0 .75rem;
}

.asistente-sugerencia {
    border: 1px solid var(--ccpp-navy);
    border-radius: 16px;
    padding: .3125rem .6875rem;
    background: #fff;
    color: var(--ccpp-navy);
    font-size: .75rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.asistente-sugerencia:hover {
    background: var(--ccpp-navy);
    color: #fff;
}

.asistente-escribiendo span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 1px;
    border-radius: 50%;
    background: #90a4ae;
    animation: asistenteParpadeo 1.2s infinite;
}

.asistente-escribiendo span:nth-child(2) {
    animation-delay: .2s;
}

.asistente-escribiendo span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes asistenteParpadeo {

    0%,
    60%,
    100% {
        opacity: .3;
    }

    30% {
        opacity: 1;
    }
}

.asistente-panel__nota {
    margin: 0;
    padding: .3125rem .75rem;
    background: #f4f6f8;
    border-top: 1px solid #e6ebee;
    color: #90a4ae;
    font-size: .66rem;
    line-height: 1.3;
    text-align: center;
}

.asistente-panel__pie {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem;
    background: #fff;
    border-top: 1px solid #e6ebee;
}

.asistente-panel__pie .form-control {
    border-radius: 20px;
    font-size: .84rem;
}

.asistente-panel__boton {
    flex: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    font-size: .95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asistente-panel__boton--mic {
    background: #eef1f5;
    color: var(--ccpp-navy);
}

.asistente-panel__boton--mic.grabando {
    background: #d63939;
    color: #fff;
    animation: asistentePulso 1s infinite;
}

.asistente-panel__boton--enviar {
    background: var(--ccpp-navy);
    color: #fff;
}

.asistente-panel__boton--enviar:hover {
    background: var(--ccpp-green);
}

@keyframes asistentePulso {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(214, 57, 57, .5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(214, 57, 57, 0);
    }
}

@media (max-width: 480px) {
    .asistente-panel {
        left: .75rem;
        right: .75rem;
        bottom: 5rem;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 7rem);
    }
}


/* ─────────────────────────────────────────────────────────
   Aviso de bienvenida (popup de portada)
   ───────────────────────────────────────────────────────── */

.popup-bienvenida {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    transition: opacity .25s ease;
}

.popup-bienvenida.is-visible {
    opacity: 1;
}

.popup-bienvenida__fondo {
    position: absolute;
    inset: 0;
    background: rgba(15, 22, 40, .72);
    backdrop-filter: blur(2px);
}

.popup-bienvenida__caja {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    background: #fff;
    border-radius: .9rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    transform: translateY(12px) scale(.98);
    transition: transform .25s ease;
}

.popup-bienvenida.is-visible .popup-bienvenida__caja {
    transform: translateY(0) scale(1);
}

/* Sobre la imagen el botón necesita su propio fondo para no perderse. */
.popup-bienvenida__cerrar {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 22, 40, .55);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .2s ease;
}

.popup-bienvenida__cerrar:hover {
    background: rgba(15, 22, 40, .8);
}

.popup-bienvenida__imagen {
    display: block;
    line-height: 0;
}

.popup-bienvenida__imagen img {
    width: 100%;
    height: auto;
    border-radius: .9rem .9rem 0 0;
}

/* Sin cuerpo de texto, la imagen redondea también abajo. */
.popup-bienvenida__imagen:last-child img {
    border-radius: .9rem;
}

.popup-bienvenida__cuerpo {
    padding: 1.5rem;
    text-align: center;
}

.popup-bienvenida__titulo {
    margin: 0 0 .5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ccpp-navy);
}

.popup-bienvenida__texto {
    margin: 0;
    color: #5b6478;
    font-size: .98rem;
    line-height: 1.6;
}

.popup-bienvenida__boton {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.15rem;
    padding: .6rem 1.35rem;
    border-radius: 2rem;
    background: var(--ccpp-green);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.popup-bienvenida__boton:hover {
    background: #15703c;
    color: #fff;
    transform: translateY(-1px);
}

/* Con el aviso abierto, el fondo no debe desplazarse. */
body.popup-abierto {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .popup-bienvenida__cuerpo {
        padding: 1.15rem;
    }

    .popup-bienvenida__titulo {
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup-bienvenida,
    .popup-bienvenida__caja {
        transition: none;
    }
}

/* Galería con carrusel dentro del aviso */
.popup-bienvenida__galeria {
    position: relative;
    overflow: hidden;
    border-radius: .9rem .9rem 0 0;
}

.popup-bienvenida__pistas {
    display: flex;
    transition: transform .35s ease;
}

.popup-bienvenida__lamina {
    flex: 0 0 100%;
    min-width: 100%;
    line-height: 0;
}

.popup-bienvenida__lamina img {
    width: 100%;
    height: auto;
    display: block;
}

.popup-bienvenida__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 22, 40, .5);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .2s ease;
}

.popup-bienvenida__flecha:hover {
    background: rgba(15, 22, 40, .8);
}

.popup-bienvenida__flecha--anterior { left: .5rem; }
.popup-bienvenida__flecha--siguiente { right: .5rem; }

.popup-bienvenida__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.popup-bienvenida__puntos button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.popup-bienvenida__puntos button.is-activo {
    background: #fff;
    transform: scale(1.25);
}

/* Contenido enriquecido: el HTML viene del panel ya sanitizado, así que
   aquí solo se le pone freno al ancho para que no rompa la caja. */
.popup-bienvenida__html {
    margin-top: .9rem;
    color: #5b6478;
    font-size: .97rem;
    line-height: 1.6;
    text-align: left;
}

.popup-bienvenida__html :first-child { margin-top: 0; }
.popup-bienvenida__html :last-child { margin-bottom: 0; }

.popup-bienvenida__html img,
.popup-bienvenida__html iframe,
.popup-bienvenida__html table {
    max-width: 100%;
}

.popup-bienvenida__html img {
    height: auto;
    border-radius: .4rem;
}

/* El video incrustado conserva su proporción en cualquier ancho. */
.popup-bienvenida__html iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: .4rem;
}

.popup-bienvenida__html table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.popup-bienvenida__html th,
.popup-bienvenida__html td {
    border: 1px solid #e4e7ee;
    padding: .35rem .5rem;
}

.popup-bienvenida__html a {
    color: var(--ccpp-green);
}

@media (prefers-reduced-motion: reduce) {
    .popup-bienvenida__pistas {
        transition: none;
    }
}


/* ==========================================================================
   Página de Contacto
   Tarjetas de datos con bloque diagonal, panel de formulario y mapa alto.
   ========================================================================== */

.contacto-datos {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .contacto-datos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.contacto-dato {
    display: flex;
    align-items: stretch;
    min-height: 76px;
    background: #fff;
    border: 2px solid var(--ccpp-navy);
    color: inherit;
    text-decoration: none;
}

/* El corte diagonal se hace con clip-path sobre el propio bloque: el
   triángulo recortado deja ver el blanco de la tarjeta, sin capas extra.
   El padding derecho compensa el recorte para que el icono quede centrado
   en la zona que sí se ve. */
.contacto-dato__icono {
    flex: 0 0 100px;
    display: grid;
    place-items: center;
    padding-right: 24px;
    background: var(--ccpp-navy);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
}

.contacto-dato__cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: .55rem 1.1rem;
    min-width: 0;
}

.contacto-dato__linea {
    color: var(--ccpp-navy);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.contacto-dato__linea a {
    color: inherit;
    text-decoration: none;
}

.contacto-dato__linea a:hover {
    color: var(--ccpp-green);
}

.contacto-dato__linea--suave {
    font-weight: 400;
    color: rgba(4, 8, 20, .6);
    font-size: .82rem;
}

.contacto-intro {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.contacto-intro__titulo {
    color: var(--ccpp-navy);
    font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.contacto-intro__texto {
    color: rgba(4, 8, 20, .6);
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* El formulario y el mapa comparten altura: en escritorio el mapa se estira
   hasta donde llegue el panel del formulario. */
.contacto-panel {
    background: #f1f3f7;
    padding: 2rem;
    height: 100%;
}

.contacto-panel .form-control,
.contacto-panel .form-select {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    padding: .85rem 1rem;
    box-shadow: none;
}

.contacto-panel .form-control:focus,
.contacto-panel .form-select:focus {
    border-color: var(--ccpp-navy);
    box-shadow: none;
}

.contacto-panel .form-control.is-invalid,
.contacto-panel .form-select.is-invalid {
    border-color: var(--tblr-danger, #d63939);
}

.contacto-mapa {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 460px;
    overflow: hidden;
}

.contacto-mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* A la derecha a propósito: el embed de Google pinta su propia ficha del
   lugar en la esquina superior izquierda y ahí el botón se perdería. */
.contacto-mapa__abrir {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    color: var(--ccpp-navy);
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem .85rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(4, 8, 20, .18);
}

.contacto-mapa__abrir:hover {
    color: var(--ccpp-green);
}

/* Botón de dos tonos con cortes diagonales, al estilo del resto de la
   identidad (mismo gesto que el bloque de icono de las tarjetas). */
.btn-diagonal {
    display: inline-flex;
    align-items: stretch;
    border: 0;
    padding: 0;
    background: var(--ccpp-navy);
    color: #fff;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
    transition: filter .2s ease;
}

.btn-diagonal:hover {
    filter: brightness(1.12);
    color: #fff;
}

.btn-diagonal__texto {
    background: var(--ccpp-green);
    padding: .95rem 2rem .95rem 2.6rem;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}

.btn-diagonal__flecha {
    display: grid;
    place-items: center;
    padding: 0 1.9rem 0 1.1rem;
    font-size: 1.15rem;
}

@media (max-width: 575.98px) {
    .contacto-dato__icono {
        flex-basis: 82px;
        padding-right: 20px;
        font-size: 1.5rem;
    }

    .contacto-panel {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   Comentarios de publicaciones
   ========================================================================== */

.comentarios {
    margin-top: 3rem;
}

.comentarios__titulo {
    color: var(--ccpp-navy);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.25;
    margin-bottom: 2rem;
}

.comentarios__lista {
    margin-bottom: 3rem;
}

.comentario {
    display: flex;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(4, 8, 20, .08);
}

/* Un solo nivel de sangría: las respuestas de una respuesta se pintan a la
   misma altura que su hermana, para que el hilo no se escape de ancho. */
.comentario--respuesta {
    margin-left: 3.5rem;
}

.comentario__avatar {
    flex: 0 0 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ccpp-navy);
    color: #fff;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .02em;
}

.comentario__cuerpo {
    flex: 1;
    min-width: 0;
}

.comentario__autor {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ccpp-green);
    margin: 0 0 .15rem;
}

.comentario__autor a {
    color: inherit;
    text-decoration: none;
}

.comentario__autor a:hover {
    text-decoration: underline;
}

.comentario__fecha {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(4, 8, 20, .55);
    margin-bottom: .75rem;
}

.comentario__texto {
    color: rgba(4, 8, 20, .75);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* Etiqueta "Responder" con el mismo corte diagonal del resto del sitio. */
.comentario__responder {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    border: 0;
    background: rgba(28, 138, 75, .12);
    color: var(--ccpp-green);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .45rem 1.6rem .45rem 1rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    cursor: pointer;
    transition: background-color .2s ease;
}

.comentario__responder:hover {
    background: rgba(28, 138, 75, .22);
}

.comentarios__form {
    background: #f1f3f7;
    padding: 2rem;
}

.comentarios__form-titulo {
    color: var(--ccpp-navy);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    margin-bottom: .5rem;
}

.comentarios__form-nota {
    color: rgba(4, 8, 20, .55);
    font-size: .92rem;
    margin-bottom: 1.5rem;
}

.comentarios__respondiendo {
    background: #fff;
    border-left: 3px solid var(--ccpp-green);
    padding: .6rem .9rem;
    margin-bottom: 1rem;
    font-size: .92rem;
}

.comentarios__form .form-control {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    padding: .85rem 1rem;
    box-shadow: none;
}

.comentarios__form .form-control:focus {
    border-color: var(--ccpp-navy);
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .comentario {
        gap: .9rem;
    }

    .comentario--respuesta {
        margin-left: 1.25rem;
    }

    .comentario__avatar {
        flex-basis: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .comentarios__form {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   Navegación entre publicaciones contiguas (anterior / siguiente)
   ========================================================================== */

.pub-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.25rem;
    border: 1px solid rgba(4, 8, 20, .1);
}

.pub-nav__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* Mitad sin vecina: ocupa su celda para que la otra no se descoloque. */
.pub-nav__item--vacio {
    display: block;
}

.pub-nav__item--siguiente {
    justify-content: flex-end;
    text-align: right;
}

/* Bloque de la flecha, con el mismo corte diagonal del resto del sitio.
   El de la izquierda se inclina hacia un lado y el de la derecha hacia el
   contrario, para que el par apunte "hacia afuera" del recuadro. */
.pub-nav__flecha {
    flex: 0 0 66px;
    height: 66px;
    display: grid;
    place-items: center;
    background: #f1f3f7;
    color: var(--ccpp-green);
    font-size: 1.5rem;
    transition: background-color .2s ease, color .2s ease;
}

.pub-nav__item--anterior .pub-nav__flecha {
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.pub-nav__item--siguiente .pub-nav__flecha {
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}

.pub-nav__item:hover .pub-nav__flecha {
    background: var(--ccpp-green);
    color: #fff;
}

.pub-nav__texto {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.pub-nav__label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ccpp-green);
}

.pub-nav__titulo {
    color: var(--ccpp-navy);
    font-weight: 600;
    line-height: 1.35;
    /* Títulos migrados de Joomla que llegan a 200 caracteres: se recortan a
       tres líneas para que el recuadro no crezca sin control. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub-nav__item:hover .pub-nav__titulo {
    color: var(--ccpp-green);
}

@media (max-width: 767.98px) {
    .pub-nav {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* En una sola columna, la mitad vacía no aporta nada y dejaría un hueco. */
    .pub-nav__item--vacio {
        display: none;
    }

    .pub-nav__item--siguiente {
        justify-content: flex-start;
        text-align: left;
        flex-direction: row-reverse;
    }

    .pub-nav__flecha {
        flex-basis: 52px;
        height: 52px;
        font-size: 1.2rem;
    }
}