/* === Fuentes personalizadas Nexa === */
@font-face {
    font-family: "Nexa";
    src: url("../fonts/NexaLight.otf") format("truetype");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nexa";
    src: url("../fonts/Nexa-Heavy.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Ejemplo de uso global */
body {
    font-family: "Nexa", Arial, sans-serif;
}

/* === Contenedor general tipo Tailwind === */
.cdd-wrap {
    width: 100%;
    max-width: 1280px; /* equivale a max-w-screen-xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

@media (min-width: 640px) {
    /* sm:px-6 */
    .cdd-wrap {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    /* lg:px-8 */
    .cdd-wrap {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Espaciado vertical entre elementos hijos (space-y-12) */
.cdd-wrap > * + * {
    margin-top: 3rem; /* 12 * 0.25rem = 3rem */
}
/* Fondo animado de puntitos */
.container-anim {
    width: 100%;
    background: rgb(179, 212, 223);
    position: relative;
    overflow: hidden;
    padding-top: 2rem;
}

/* Asegura que el contenido quede encima del pseudo-elemento */
.container-anim > * {
    position: relative;
    z-index: 1;
}

.container-anim::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle, #e6f6e3 10%, transparent 20%),
        radial-gradient(circle, transparent 10%, #fbf9fd 20%);
    background-size:
        30px 30px,
        30px 30px; /* dos capas */
    background-position:
        0 0,
        15px 15px; /* offset entre capas */
    animation: moveBackground 8s linear infinite;
    z-index: 0;
    pointer-events: none;
    will-change: background-position;
}

@keyframes moveBackground {
    0% {
        background-position:
            0 0,
            15px 15px;
    }
    100% {
        background-position:
            30px 30px,
            45px 45px;
    }
}

/* ===== Footer CDD ===== */
.cdd-footer {
    background: #00a657;
    color: #fff;
    padding: 2.5rem 0 2rem;
}

.cdd-footer-logo {
    max-width: 210px;
    height: auto;
    background: transparent;
}

.cdd-footer-title {
    font-size: 1.25rem; /* ~20px */
    font-weight: 800; /* Nexa Heavy si la tienes cargada */
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.3px;
}

.cdd-footer-muted {
    opacity: 0.85;
}

.cdd-footer-links li + li,
.cdd-footer-contacts li + li {
    margin-top: 0.35rem;
}

.cdd-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.05rem;
    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}
.cdd-footer-link:hover,
.cdd-footer-link:focus {
    color: #e7f7ee;
    opacity: 0.95;
    text-decoration: none;
}

.cdd-footer-social .cdd-footer-social-link {
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    transition:
        transform 0.15s ease,
        opacity 0.2s ease;
}
.cdd-footer-social .cdd-footer-social-link:hover,
.cdd-footer-social .cdd-footer-social-link:focus {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Franja inferior */
.cdd-footer-bottom {
    background: #008f4a;
    padding: 0.85rem 0;
}
.cdd-footer-bottom-text {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Responsivo pequeño: centra el logo y da un poco de aire */
@media (max-width: 575.98px) {
    .cdd-footer {
        padding: 2rem 0 1.5rem;
    }
    .cdd-footer-logo {
        max-width: 180px;
    }
}

/* color corporativo */
.bg-cdd-purple {
    background: #5f4191;
}

/* opcional: afina tipografías/espaciados del banner */
.banner-titulo .breadcrumb {
    --bs-breadcrumb-divider: "›";
    font-size: 0.95rem;
}
.banner-titulo .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.7);
}
.banner-titulo .breadcrumb a {
    opacity: 0.95;
}
.banner-titulo .breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
}

.wp-content-render p,
.wp-content-render li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.banner-historias {
    position: relative;
    min-height: 330px !important;
    color: #fff;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.banner-historias-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.banner-historias-overlay {
    position: absolute;
    inset: 0;
    background: rgba(95, 65, 145, 0.8); /* #00a657 con transparencia */
    z-index: 2;
}

.banner-historias > .container {
    position: relative;
    z-index: 3;
}

/* por si quedara alguna imagen dentro del contenido, la escondemos */
.banner-historias-content img,
.banner-historias-content figure,
.banner-historias-content .wp-block-image {
    display: none !important;
}

.banner-historias-content {
    max-width: 900px;
    margin: 0 auto;
}

/* En pantallas grandes (PC) -> más alto y un poco más de altura */
@media (min-width: 992px) {
    .banner-historias {
        min-height: 460px; /* más alto */
        padding-top: 4rem; /* sube el texto */
        padding-bottom: 3rem;
    }
}

/* =========================================================
   FIX: Párrafo plano de WordPress a 16px (sin romper estilos)
   Poner AL FINAL del CSS que se carga último
   ========================================================= */

/* 1) Base: todos los <p> dentro del render, excepto subtítulos */
.wp-content-render p:not(.is-style-text-subtitle) {
    font-size: 18px !important;
    line-height: 1.7;
}

/* 2) Si WordPress trae clases de tamaño, se respeta lo que ya definiste */
.wp-content-render p.has-small-font-size,
.wp-content-render p.has-medium-font-size,
.wp-content-render p.has-large-font-size,
.wp-content-render p.has-x-large-font-size,
.wp-content-render p.has-xx-large-font-size,
.wp-content-render p.has-huge-font-size {
    /* No hace falta poner nada aquí.
       Tus reglas existentes con !important ya ganan. */
}

/* Párrafos “planos” (sin class) a 16px SIEMPRE */
.wp-content-render p:not([class]),
.wp-content-render p[class=""] {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* En móvil tu CSS actual los baja con calc(...), así que lo anulamos */
@media (max-width: 640px) {
    .wp-content-render p:not([class]),
    .wp-content-render p[class=""] {
        font-size: 18px !important;
    }
}

:root {
    --navbar-h: 72px; /* fallback */
}
.page-content {
    padding-top: var(--navbar-h);
}