/*
Theme Name:   Colombia Tiene Futuro
Theme URI:    https://colombiatienefuturo.com
Description:  Tema de la Fundación Colombia Tiene Futuro. Tema hijo de Hello Elementor: las páginas construidas con Elementor siguen funcionando igual y heredan esta identidad, mientras la portada, las investigaciones y el directorio de expertos se sirven desde plantillas propias.
Author:       Fundación Colombia Tiene Futuro
Template:     hello-elementor
Version:      1.0.0
Requires PHP: 8.1
Text Domain:  ctf-theme
License:      GPL-2.0-or-later
*/

/* ==========================================================================
   1. Tokens del sistema de diseño
   Todo el color y la tipografía del tema sale de aquí. Cambiar el rojo de la
   marca es cambiar una línea.
   ========================================================================== */

/* Archivo variable, autoalojada. Un solo archivo cubre del peso 400 al 900, así
   que no hay una petición por peso ni la lotería de la fuente del sistema: el
   sitio se ve igual en Windows, Android y macOS. El unicode-range es el subset
   latino, suficiente para español. */
@font-face {
    font-family: "Archivo";
    src: url("assets/fonts/archivo-variable-latin.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Dos rojos, no uno. El de relleno es el de la marca; el de texto es más
       oscuro porque #e30613 sobre blanco da 4,88:1 y pasa AA por 0,38 de
       margen. #c00510 da 6,42:1 y el ojo no distingue la diferencia. */
    --ctf-rojo: #e30613;
    --ctf-rojo-texto: #c00510;
    --ctf-rojo-oscuro: #b80510;
    --ctf-negro: #0d0d0d;
    --ctf-negro-suave: #1a1a1a;
    --ctf-blanco: #ffffff;
    --ctf-hueso: #f4f4f4;
    --ctf-gris-borde: #e2e2e2;
    --ctf-texto: #1a1a1a;
    --ctf-texto-suave: #5b5b5b;

    /* Un token por superficie. El blanco al 74 % da 10:1 sobre negro pero solo
       3,05:1 sobre el rojo, por debajo del 4,5:1 que exige WCAG AA. Sobre rojo
       va opaco. */
    --ctf-sobre-negro: rgba(255, 255, 255, 0.74);
    --ctf-sobre-rojo: #ffffff;

    --ctf-fuente: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Escala modular sobre razón 1,25. Ningún font-size del tema usa un número
       que no venga de aquí: es lo que hace que los tamaños se sientan
       relacionados y no elegidos uno a uno. */
    --paso--2: 0.72rem;
    --paso--1: clamp(0.78rem, 0.76rem + 0.08vw, 0.82rem);
    --paso-0: clamp(0.94rem, 0.92rem + 0.12vw, 1rem);
    --paso-1: clamp(1.02rem, 0.98rem + 0.22vw, 1.19rem);
    --paso-2: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --paso-3: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
    --paso-4: clamp(1.75rem, 1.35rem + 2vw, 2.6rem);
    --paso-5: clamp(2.4rem, 1.55rem + 4.2vw, 4.1rem);

    --ctf-ancho: 1240px;
    --ctf-medida: 65ch;
    --ctf-espacio-seccion: clamp(3.5rem, 7vw, 6.5rem);
    --ctf-radio: 4px;
    --ctf-transicion: 160ms ease;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

/* ÁMBITO. Esto es lo más importante de la hoja.
 *
 * Las 19 páginas y las 13 entradas del sitio están construidas con Elementor, y
 * la cabecera y el pie de este tema salen en todas ellas. Si la capa base
 * apuntara a body, sus reglas de elemento (p, h1-h4, a, img) entrarían dentro
 * del contenido de Elementor y le quitarían márgenes, pesos y subrayados: eso es
 * exactamente lo que rompió el resto del sitio.
 *
 * Por eso la capa base vive solo en las tres zonas que este tema pinta:
 * la cabecera, el <main> de las plantillas propias y la zona del pie. El
 * contenido de Elementor queda intacto.
 *
 * Los selectores de elemento van en :where() para que su especificidad sea cero
 * y cualquier regla de componente los gane sin necesidad de !important.
 */

.ctf-ambito {
    font-family: var(--ctf-fuente);
    font-size: var(--paso-0);
    font-optical-sizing: auto;
    color: var(--ctf-texto);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.ctf-ambito,
.ctf-ambito *,
.ctf-ambito *::before,
.ctf-ambito *::after {
    box-sizing: border-box;
}

.ctf-ambito :where(img) {
    max-width: 100%;
    height: auto;
    display: block;
}

/* :where() da especificidad cero a propósito, para que cualquier componente
   pueda pisarlo sin pelear. Pero eso lo deja indefenso frente al morado/azul
   de :visited del navegador, que sí tiene algo de especificidad real. Por
   eso el color va aparte, en :link/:visited con especificidad normal: así
   la herencia de color queda protegida en todo el sitio y :where() se
   encarga solo del resto del reset. */
.ctf-ambito :where(a) {
    text-decoration: none;
}

.ctf-ambito a:link,
.ctf-ambito a:visited {
    color: inherit;
}

.ctf-ambito :where(h1, h2, h3, h4) {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.08;
    /* Reparte las líneas para que ningún titular deje una palabra huérfana. */
    text-wrap: balance;
}

.ctf-ambito :where(p) {
    margin: 0;
    /* Evita las líneas finales de una sola palabra en los párrafos. */
    text-wrap: pretty;
}

/* La cabecera, el <main> propio y la zona del pie comparten el ámbito. */
.ctf-cabecera,
.ctf-vista,
.ctf-zona-pie {
    font-family: var(--ctf-fuente);
    font-optical-sizing: auto;
}

/* Salto al contenido: obligatorio para navegación por teclado, invisible hasta
   que recibe el foco. */
.ctf-salto {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--ctf-negro);
    color: var(--ctf-blanco);
}

.ctf-salto:focus {
    left: 1rem;
    top: 1rem;
}

.ctf-ambito :where(a, button, input, summary):focus-visible {
    outline: 3px solid var(--ctf-rojo);
    outline-offset: 2px;
}

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

/* ==========================================================================
   3. Retícula
   ========================================================================== */

.ctf-contenedor {
    width: 100%;
    max-width: var(--ctf-ancho);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.ctf-seccion {
    padding-block: var(--ctf-espacio-seccion);
}

.ctf-seccion--roja {
    background: var(--ctf-rojo);
    color: var(--ctf-blanco);
}

.ctf-seccion--negra {
    background: var(--ctf-negro);
    color: var(--ctf-blanco);
}

.ctf-seccion--hueso {
    background: var(--ctf-hueso);
}

/* ==========================================================================
   4. Piezas de texto recurrentes
   ========================================================================== */

/* El antetítulo con la rayita al final que aparece en toda la maqueta. */
.ctf-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    font-size: var(--paso--2);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ctf-eyebrow::after {
    content: "";
    width: 1.6rem;
    height: 2px;
    background: currentColor;
    opacity: 0.85;
}

/* Sobre fondo claro se usa el rojo de texto, no el de relleno. */
.ctf-seccion--hueso .ctf-eyebrow,
.ctf-seccion--blanca .ctf-eyebrow {
    color: var(--ctf-rojo-texto);
}

.ctf-titulo-seccion {
    font-size: var(--paso-4);
    max-width: 22ch;
}

.ctf-lead {
    margin-top: 1rem;
    max-width: 46ch;
    color: var(--ctf-texto-suave);
}

.ctf-seccion--negra .ctf-lead {
    color: var(--ctf-sobre-negro);
}

.ctf-seccion--roja .ctf-lead {
    color: var(--ctf-sobre-rojo);
}

/* Enlace con flecha. */
.ctf-enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: var(--paso-0);
    font-weight: 700;
    color: var(--ctf-rojo-texto);
}

.ctf-seccion--roja .ctf-enlace-flecha,
.ctf-seccion--negra .ctf-enlace-flecha {
    color: var(--ctf-blanco);
}

.ctf-enlace-flecha::after {
    content: "→";
    transition: transform var(--ctf-transicion);
}

.ctf-enlace-flecha:hover::after {
    transform: translateX(4px);
}

/* ==========================================================================
   5. Botones
   ========================================================================== */

.ctf-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--ctf-radio);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ctf-transicion), color var(--ctf-transicion),
        border-color var(--ctf-transicion);
}

.ctf-boton--rojo {
    background: var(--ctf-rojo);
    border-color: var(--ctf-rojo);
    color: var(--ctf-blanco);
}

.ctf-boton--rojo:hover {
    background: var(--ctf-rojo-oscuro);
    border-color: var(--ctf-rojo-oscuro);
}

.ctf-boton--contorno {
    border-color: var(--ctf-blanco);
    color: var(--ctf-blanco);
}

.ctf-boton--contorno:hover {
    background: var(--ctf-blanco);
    color: var(--ctf-negro);
}

.ctf-boton--negro {
    background: var(--ctf-negro);
    border-color: var(--ctf-negro);
    color: var(--ctf-blanco);
}

/* ==========================================================================
   6. Cabecera
   ========================================================================== */

.ctf-cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ctf-blanco);
    border-bottom: 1px solid var(--ctf-gris-borde);
}

.ctf-cabecera__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 74px;
}

.ctf-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}

/* El logo que ya tenga cargado el sitio: se acota la altura para que no
   desborde la cabecera, sea del tamaño que sea el archivo original. */
.ctf-marca img,
.ctf-marca .custom-logo {
    max-height: 46px;
    width: auto;
    object-fit: contain;
}

.ctf-pie .ctf-marca img {
    max-height: 40px;
}

.ctf-marca__simbolo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 2px solid var(--ctf-negro);
    display: grid;
    place-items: center;
}

.ctf-marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.ctf-marca__nombre {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ctf-marca__bajada {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ctf-texto-suave);
}

.ctf-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctf-nav a {
    font-size: 0.88rem;
    font-weight: 600;
    padding-block: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: border-color var(--ctf-transicion), color var(--ctf-transicion);
}

.ctf-nav a:hover,
.ctf-nav .current-menu-item > a:link,
.ctf-nav .current-menu-item > a:visited {
    color: var(--ctf-rojo);
    border-bottom-color: var(--ctf-rojo);
}

.ctf-cabecera__acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Buscador desplegable, también con <details>. */
.ctf-buscador {
    position: relative;
}

.ctf-buscador > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem;
    display: grid;
    place-items: center;
}

.ctf-buscador > summary::-webkit-details-marker {
    display: none;
}

.ctf-buscador__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    z-index: 60;
    width: min(22rem, 80vw);
    padding: 1rem;
    background: var(--ctf-blanco);
    border: 1px solid var(--ctf-gris-borde);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.ctf-buscador__panel :where(input[type="search"], input[type="text"]) {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--ctf-gris-borde);
    font: inherit;
    font-size: 0.9rem;
}

.ctf-buscador__panel label {
    display: block;
}

/* Menú móvil sin JavaScript: <details> hace el trabajo y funciona con teclado. */
.ctf-menu-movil {
    display: none;
}

.ctf-menu-movil > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem;
    font-weight: 700;
}

.ctf-menu-movil > summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 1024px) {
    .ctf-nav--principal {
        display: none;
    }

    .ctf-menu-movil {
        display: block;
    }

    .ctf-menu-movil[open] .ctf-menu-movil__panel {
        display: block;
    }

    .ctf-menu-movil__panel {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        background: var(--ctf-blanco);
        border-bottom: 1px solid var(--ctf-gris-borde);
        padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
    }

    .ctf-menu-movil__panel ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .ctf-menu-movil__panel a {
        display: block;
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--ctf-gris-borde);
    }
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.ctf-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(30rem, 62vh, 40rem);
    background: var(--ctf-negro);
    color: var(--ctf-blanco);
    overflow: hidden;
}

.ctf-hero__fondo {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Degradado hacia la izquierda: garantiza contraste del texto sobre cualquier
   foto que suban, sin depender de que la imagen sea oscura. */
.ctf-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.86) 0%,
        rgba(0, 0, 0, 0.7) 42%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.ctf-hero__contenido {
    position: relative;
    z-index: 1;
    padding-block: var(--ctf-espacio-seccion);
    max-width: 40rem;
}

.ctf-hero__titulo {
    font-size: var(--paso-5);
    font-weight: 800;
    /* Archivo aguanta un tracking más cerrado en tamaños grandes; es lo que le
       da el aire apretado de la maqueta. */
    letter-spacing: -0.032em;
}

/* El punto rojo del titular de la maqueta. */
.ctf-hero__punto {
    color: var(--ctf-rojo);
}

.ctf-hero__subtitulo {
    margin-top: 1.5rem;
    font-size: var(--paso-0);
    font-weight: 700;
}

.ctf-hero__lead {
    margin-top: 0.9rem;
    max-width: 46ch;
    color: var(--ctf-sobre-negro);
}

.ctf-hero__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

/* ==========================================================================
   8. Banda de cifras
   ========================================================================== */

.ctf-cifras {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) 2.4fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.ctf-cifras__lista {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.ctf-cifra {
    padding-inline: clamp(0.75rem, 1.6vw, 1.5rem);
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    text-align: center;
}

.ctf-cifra:first-child {
    border-left: 0;
    padding-left: 0;
}

.ctf-cifra__icono {
    display: block;
    margin: 0 auto 0.9rem;
    opacity: 0.95;
}

.ctf-cifra__valor {
    font-size: var(--paso-4);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    /* Cifras de ancho fijo: sin esto el 1 es más estrecho que el 8 y las cinco
       columnas quedan descuadradas. */
    font-variant-numeric: tabular-nums;
}

.ctf-cifra__etiqueta {
    margin-top: 0.6rem;
    font-size: var(--paso--1);
    line-height: 1.35;
    /* Opaco: sobre el rojo, el 74 % daba 3,05:1 y no cumple AA. */
    color: var(--ctf-sobre-rojo);
}

.ctf-cifra__anio {
    display: block;
    margin-top: 0.45rem;
    font-size: var(--paso--2);
    font-variant-numeric: tabular-nums;
    /* 0.88 mantiene el año por encima del 4,5:1 sobre el rojo; 0.75 no llegaba. */
    opacity: 0.88;
}

.ctf-cifra__anio a {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .ctf-cifras {
        grid-template-columns: 1fr;
    }

    .ctf-cifras__lista {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
        gap: 1.75rem 0;
    }
}

/* ==========================================================================
   9. Pilares (nuestra respuesta)
   ========================================================================== */

.ctf-pilares {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) 2.4fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.ctf-pilares__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ctf-pilar__icono {
    color: var(--ctf-rojo);
    margin-bottom: 1rem;
}

.ctf-pilar__titulo {
    font-size: var(--paso-1);
    margin-bottom: 0.6rem;
}

.ctf-pilar__texto {
    font-size: var(--paso--1);
    line-height: 1.55;
    color: var(--ctf-sobre-negro);
}

@media (max-width: 900px) {
    .ctf-pilares {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   10. Tarjetas de investigación
   ========================================================================== */

.ctf-encabezado-flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.ctf-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.ctf-tarjeta {
    display: flex;
    flex-direction: column;
    background: var(--ctf-blanco);
    border: 1px solid var(--ctf-gris-borde);
    border-radius: var(--ctf-radio);
    overflow: hidden;
    transition: transform var(--ctf-transicion), box-shadow var(--ctf-transicion);
}

.ctf-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.ctf-tarjeta__medio {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ctf-hueso);
}

.ctf-tarjeta__medio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ctf-etiqueta {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.35rem 0.7rem;
    background: var(--ctf-rojo);
    color: var(--ctf-blanco);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ctf-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem;
}

.ctf-tarjeta__titulo {
    font-size: var(--paso-1);
    line-height: 1.3;
}

.ctf-tarjeta__resumen {
    margin-top: 0.7rem;
    font-size: var(--paso--1);
    color: var(--ctf-texto-suave);
}

.ctf-tarjeta__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ctf-gris-borde);
    font-size: 0.76rem;
    color: var(--ctf-texto-suave);
}

.ctf-tarjeta__lectura {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ctf-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    color: var(--ctf-texto);
}

.ctf-pdf:hover {
    color: var(--ctf-rojo);
}

/* ==========================================================================
   11. Bloque partido (foro y áreas)
   ========================================================================== */

.ctf-partido {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.ctf-partido--invertido {
    grid-template-columns: 1.15fr 1fr;
}

.ctf-partido__medio {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ctf-negro-suave);
    overflow: hidden;
}

.ctf-partido__medio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ctf-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.ctf-play__disco {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ctf-blanco);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
    transition: transform var(--ctf-transicion);
}

.ctf-play:hover .ctf-play__disco {
    transform: scale(1.07);
}

@media (max-width: 900px) {
    .ctf-partido,
    .ctf-partido--invertido {
        grid-template-columns: 1fr;
    }
}

/* Rejilla de áreas de trabajo. */
.ctf-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1rem;
}

.ctf-area {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.4rem 1.1rem;
    background: var(--ctf-blanco);
    border: 1px solid var(--ctf-gris-borde);
    border-radius: var(--ctf-radio);
    transition: border-color var(--ctf-transicion), transform var(--ctf-transicion);
}

.ctf-area:hover {
    border-color: var(--ctf-rojo);
    transform: translateY(-2px);
}

.ctf-area__icono {
    color: var(--ctf-rojo);
}

.ctf-area__nombre {
    font-size: 0.92rem;
    font-weight: 800;
}

.ctf-area__enlace {
    font-size: 0.74rem;
    color: var(--ctf-texto-suave);
}

/* ==========================================================================
   12. Cierre y newsletter
   ========================================================================== */

.ctf-cierre {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr auto;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.ctf-cierre__titulo {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--paso-3);
}

.ctf-cierre__flecha {
    font-size: 1.6em;
    line-height: 0.8;
}

.ctf-suscripcion {
    display: flex;
    gap: 0;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.ctf-suscripcion input[type="email"] {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.8rem 1rem;
    border: 0;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ctf-texto);
}

.ctf-suscripcion button {
    padding: 0.8rem 1.3rem;
    border: 0;
    background: var(--ctf-negro);
    color: var(--ctf-blanco);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.ctf-suscripcion button:hover {
    background: var(--ctf-negro-suave);
}

.ctf-redes {
    display: flex;
    gap: 0.6rem;
}

.ctf-redes a {
    width: 38px;
    height: 38px;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background var(--ctf-transicion), color var(--ctf-transicion);
}

.ctf-redes a:hover {
    background: var(--ctf-blanco);
    color: var(--ctf-rojo);
}

@media (max-width: 1024px) {
    .ctf-cierre {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   13. Pie
   ========================================================================== */

.ctf-pie {
    background: var(--ctf-negro);
    color: var(--ctf-sobre-negro);
    padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    font-size: 0.84rem;
}

.ctf-pie__rejilla {
    display: grid;
    grid-template-columns: minmax(13rem, 1.2fr) repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: clamp(1.75rem, 3.5vw, 3rem);
}

.ctf-pie .ctf-marca__nombre,
.ctf-pie .ctf-marca__bajada {
    color: var(--ctf-blanco);
}

.ctf-pie .ctf-marca__simbolo {
    border-color: var(--ctf-blanco);
}

.ctf-pie__tagline {
    margin-top: 1rem;
    max-width: 18ch;
}

.ctf-pie__titulo {
    color: var(--ctf-blanco);
    font-size: 0.86rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
}

.ctf-pie ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.ctf-pie a:hover {
    color: var(--ctf-blanco);
}

.ctf-pie__legal {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    opacity: 0.8;
}

/* ==========================================================================
   14. Directorio de expertos
   ========================================================================== */

.ctf-saltos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ctf-gris-borde);
}

.ctf-saltos a {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ctf-texto-suave);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.ctf-saltos a:hover {
    color: var(--ctf-rojo);
    border-bottom-color: var(--ctf-rojo);
}

.ctf-equipo {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    /* Compensa la cabecera fija cuando se llega por un enlace de salto. */
    scroll-margin-top: 90px;
}

.ctf-equipo + .ctf-equipo {
    border-top: 1px solid var(--ctf-gris-borde);
}

.ctf-personas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.25rem);
    margin-top: 2rem;
}

.ctf-persona__foto {
    aspect-ratio: 1 / 1;
    background: var(--ctf-hueso);
    overflow: hidden;
    margin-bottom: 0.9rem;
}

.ctf-persona__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}

.ctf-persona:hover .ctf-persona__foto img {
    transform: scale(1.04);
}

.ctf-persona__nombre {
    font-size: var(--paso-1);
    line-height: 1.25;
}

.ctf-persona__cargo {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ctf-texto-suave);
}

/* "Ver más" con <details>: sin JavaScript, y el contenido oculto sigue estando
   en el HTML, así que es accesible y lo indexan los buscadores. */
.ctf-vermas {
    margin-top: 1.75rem;
}

.ctf-vermas > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ctf-rojo);
}

.ctf-vermas > summary::-webkit-details-marker {
    display: none;
}

.ctf-vermas > summary::after {
    content: "+";
    font-size: 1.1rem;
    line-height: 1;
}

.ctf-vermas[open] > summary::after {
    content: "−";
}

.ctf-vermas[open] > summary .ctf-vermas__abrir,
.ctf-vermas:not([open]) > summary .ctf-vermas__cerrar {
    display: none;
}

.ctf-vermas__panel {
    margin-top: 0;
}

/* ==========================================================================
   15. Entradas sueltas y listados
   ========================================================================== */

/* La medida va en ch y no en rem: así el tope sigue a la tipografía y no al
   tamaño de raíz. Antes eran 46rem, unos 90 caracteres, el doble de lo cómodo. */
.ctf-entrada {
    max-width: var(--ctf-medida);
    margin-inline: auto;
}

.ctf-entrada__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 1.25rem;
    font-size: var(--paso--1);
    color: var(--ctf-texto-suave);
    font-variant-numeric: tabular-nums;
}

.ctf-entrada__contenido {
    margin-top: 2.5rem;
    font-size: var(--paso-1);
    line-height: 1.7;
    max-width: var(--ctf-medida);
}

.ctf-entrada__contenido > * + * {
    margin-top: 1.15rem;
}

.ctf-entrada__contenido a:link,
.ctf-entrada__contenido a:visited {
    color: var(--ctf-rojo);
    text-decoration: underline;
}

.ctf-paginacion {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.ctf-paginacion .page-numbers {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--ctf-gris-borde);
    font-size: 0.85rem;
    font-weight: 700;
}

.ctf-paginacion .page-numbers.current {
    background: var(--ctf-rojo);
    border-color: var(--ctf-rojo);
    color: var(--ctf-blanco);
}

.ctf-vacio {
    padding: 3rem 0;
    color: var(--ctf-texto-suave);
}

/* ==========================================================================
   16. Armonización de marca sobre el contenido de Elementor
   ==========================================================================
   Las 19 páginas y 13 entradas del sitio están construidas con Elementor y
   traen su color y tipografía de origen: una paleta azul-verdosa y dorada
   (medidas: 84 usos de #236aa0, 26 de #f8bc04 en el CSS generado de esas
   páginas) y una mezcla de Helvetica, Roboto y Amasis MT Std en tres pesos.
   Contra mi cabecera y pie en rojo/negro/blanco, eso es un choque de marca.
   La estructura de cada página está intacta — esto no toca columnas,
   imágenes ni los elementos que puso cada autor, solo tipografía y color.

   CSS no puede seleccionar por el valor de un color, así que en vez de
   perseguir cada hexadecimal se sobrescriben los ROLES: título en tinta,
   texto en tinta, enlaces y botones en el rojo de marca. Elementor compila
   el color de cada widget en una regla con una clase de hash único por
   página (`.elementor-176 .elementor-element.elementor-xxxxx`), de
   especificidad alta pero sin !important — por eso estas reglas sí llevan
   !important: es la única forma de ganarles sin conocer las 32 clases hash.

   Ámbito: body.ctf-contenido-elementor, que solo se añade en páginas y
   entradas construidas con Elementor (ver ctf_vista_propia() en
   functions.php). No afecta la portada, el directorio ni el listado, que ya
   tienen su propio diseño.
   ========================================================================== */

/* Primera red: las variables globales del kit de Elementor. Gratis y sin
   !important — mi hoja carga despues de post-*.css en el <head>, así que
   gana por especificidad y por orden. Solo alcanza a los widgets que aún usan
   el color por defecto; la mayoría del contenido lo tiene escrito a mano por
   encima, y de eso se ocupan las reglas de abajo. */
body.ctf-contenido-elementor {
    --e-global-color-primary: var(--ctf-negro);
    --e-global-color-secondary: var(--ctf-negro);
    --e-global-color-text: var(--ctf-texto);
    --e-global-color-accent: var(--ctf-rojo);
}

/* Tipografía: un solo sistema en vez de Helvetica/Roboto/Amasis mezclados.
   Solo cambia la familia; el tamaño y el peso de cada título los sigue
   decidiendo el autor en Elementor. */
body.ctf-contenido-elementor :where(
    .elementor-widget-heading .elementor-heading-title,
    .elementor-widget-text-editor,
    .elementor-widget-icon-list,
    .elementor-widget-nav-menu,
    .elementor-post__title,
    .elementor-post__excerpt,
    .elementor-post__read-more,
    .elementor-post__meta-data,
    .elementor-button
) {
    font-family: var(--ctf-fuente) !important;
}

/* Texto de párrafo y de lista: vuelve a la tinta de marca. */
body.ctf-contenido-elementor :where(
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor li,
    .elementor-widget-icon-list-item,
    .elementor-post__excerpt
) {
    color: var(--ctf-texto) !important;
}

/* Títulos: tinta, no el azul o el dorado heredados. */
body.ctf-contenido-elementor :where(
    .elementor-widget-heading .elementor-heading-title,
    .elementor-post__title
) {
    color: var(--ctf-negro) !important;
}

/* Un titular que es en sí mismo un enlace (como "Contacta nuestra
   organización" en Nosotros, o el título de cada tarjeta en Publicaciones)
   necesita :link/:visited explícitos aparte: :where() no basta para ganarle
   al morado de :visited del navegador, y menos si Elementor ya puso un color
   directo sobre ese <a> por instancia. */
body.ctf-contenido-elementor :where(
    .elementor-widget-heading .elementor-heading-title,
    .elementor-post__title
) a:link,
body.ctf-contenido-elementor :where(
    .elementor-widget-heading .elementor-heading-title,
    .elementor-post__title
) a:visited {
    color: var(--ctf-negro) !important;
}

/* Enlaces dentro de un párrafo: rojo de marca y subrayado — el mismo patrón
   que ya usan las fichas de investigación y experto. */
body.ctf-contenido-elementor .elementor-widget-text-editor a:link,
body.ctf-contenido-elementor .elementor-widget-text-editor a:visited {
    color: var(--ctf-rojo-texto) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Listas de navegación — el "sidebar" de categorías, temas y años está hecho
   con widgets de encabezado y menú, no con widgets nativos de WordPress—:
   tinta suave por defecto y rojo solo al pasar el cursor, como el resto de la
   navegación del sitio. Nada de una pared de enlaces en rojo. */
/* :link y :visited explícitos, no solo `a`. Los navegadores pintan un
   enlace ya visitado con su morado/azul de sistema por defecto, y ese color
   de :visited tiene MÁS especificidad que un simple `a` — un !important sobre
   `a` a secas no siempre alcanza a ganarle en la práctica. Con :link/:visited
   igualados en especificidad, no queda margen para que se cuele el morado.

   Ojo con verificar esto a ojo: getComputedStyle() en JavaScript miente a
   propósito sobre el color de :visited (protección anti-rastreo de
   historial), así que cualquier comprobación automatizada de este color
   siempre va a reportar el de :link, aunque el navegador esté pintando otra
   cosa en pantalla. Solo se confirma mirando una captura real. */
body.ctf-contenido-elementor .elementor-widget-nav-menu a:link,
body.ctf-contenido-elementor .elementor-widget-nav-menu a:visited {
    /* Negro de marca, no el gris suave: en una lista angosta de filtros el
       gris se leía apagado y de bajo contraste. */
    color: var(--ctf-negro) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color var(--ctf-transicion);
}

body.ctf-contenido-elementor .elementor-widget-nav-menu a:hover,
body.ctf-contenido-elementor .elementor-widget-nav-menu a:active {
    color: var(--ctf-rojo-texto) !important;
}

/* "Leer más": es un enlace de texto con una flecha, no un botón — se
   comprobó que Elementor no le da relleno por defecto. Ponerle un fondo lo
   dejaría como una caja pegada al texto; en su lugar se homogeneiza al rojo
   de marca exacto, porque el heredado (#C4290A) ya era parecido pero no
   idéntico. */
body.ctf-contenido-elementor .elementor-post__read-more {
    color: var(--ctf-rojo-texto) !important;
    font-weight: 700 !important;
}

/* El botón real (widget "Button") sí trae su propio relleno y radio por
   instancia, así que aquí solo se homogeneiza el color. */
body.ctf-contenido-elementor .elementor-button {
    background-color: var(--ctf-rojo) !important;
    border-color: var(--ctf-rojo) !important;
    color: var(--ctf-blanco) !important;
}

body.ctf-contenido-elementor .elementor-button:hover {
    background-color: var(--ctf-rojo-oscuro) !important;
    border-color: var(--ctf-rojo-oscuro) !important;
}

/* ---------------------------------------------------------------------
   Iconos: el último resto visible de la marca antigua

   Medido: los iconos de los valores renderizaban en rgb(35,106,160) — el
   #236aa0 azul del sitio anterior— tanto en `color` como en `fill`. Con la
   cabecera y el pie en rojo y negro, es lo que más delata el injerto.

   Se pintan con currentColor cuando el SVG lo permite y con fill directo
   cuando trae el color incrustado, porque Elementor genera ambas formas
   según cómo se subió el icono. Los iconos ya rojos no cambian: se les
   asigna el mismo rojo de marca, así que quedan idénticos.
   --------------------------------------------------------------------- */
body.ctf-contenido-elementor :where(
    .elementor-widget-icon,
    .elementor-widget-icon-box,
    .elementor-widget-icon-list
) :where(svg, i, .elementor-icon) {
    color: var(--ctf-rojo) !important;
}

body.ctf-contenido-elementor :where(
    .elementor-widget-icon,
    .elementor-widget-icon-box,
    .elementor-widget-icon-list
) svg :where(path, circle, rect, polygon, ellipse, line, polyline) {
    fill: currentColor;
}

/* Cuando el propio <svg> trae el fill, hay que atacarlo en el elemento raíz. */
body.ctf-contenido-elementor :where(
    .elementor-widget-icon,
    .elementor-widget-icon-box,
    .elementor-widget-icon-list
) svg {
    fill: var(--ctf-rojo) !important;
}

/* ---------------------------------------------------------------------
   Divisores de forma

   Medido: dos franjas SVG de 1515x58 y 1515x40 px con fill rgb(248,188,4)
   —el dorado de la marca anterior— enmarcando la sección negra de Nosotros.
   No son fondos ni bordes, así que no las alcanzaba ninguna regla previa:
   son <svg> de divisor de sección, y el color va en el path.

   Se pasan al negro de marca para que sigan funcionando como transición
   entre bloques, pero sin el dorado. El divisor conserva su forma y altura.
   --------------------------------------------------------------------- */
body.ctf-contenido-elementor :where(.elementor-shape-top, .elementor-shape-bottom) svg
    :where(path, polygon, rect, ellipse) {
    fill: var(--ctf-negro) !important;
}

/* El resumen de cada tarjeta venía en negro puro (rgb(0,0,0)): la regla de
   arriba alcanza el contenedor .elementor-post__excerpt pero Elementor pone el
   color en el <p> de adentro con más especificidad. Se repite apuntando
   directo al párrafo, y de paso se le da el mismo respeto por palabras sueltas
   que al resto del texto del sitio. */
body.ctf-contenido-elementor .elementor-post__excerpt p {
    color: var(--ctf-texto) !important;
    text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   Respiración en /publicaciones/

   Medido: 20px exactos entre el final de la foto de cabecera y el titular,
   y otros 20px entre el titular y la fila de barra lateral + rejilla — el
   mismo espaciado ajustado en toda la página, muy por debajo de los
   --ctf-espacio-seccion generosos que usa el resto del sitio.

   El titular se localiza por estructura: es el único encabezado de la
   página que NO tiene un widget de menú justo después (ese patrón identifica
   a "Categorías", "Temas" y "Años" en la barra lateral, y aquí no aplica).
   Se le da el tamaño de los títulos de sección del tema en vez del 32px que
   trae por defecto, y el margen que le faltaba arriba y abajo.
   --------------------------------------------------------------------- */
body.page-id-176.ctf-contenido-elementor
    .elementor-widget-heading:not(:has(+ .elementor-widget-nav-menu)) {
    margin-block: 1.5rem 2rem !important;
}

body.page-id-176.ctf-contenido-elementor
    .elementor-widget-heading:not(:has(+ .elementor-widget-nav-menu))
    .elementor-heading-title {
    font-size: var(--paso-4) !important;
}

/* La insignia dorada de las tarjetas de publicaciones: es un elemento propio
   del widget (no del contenido), así que se puede recolorear sin riesgo. */
body.ctf-contenido-elementor .elementor-post__badge {
    background-color: var(--ctf-rojo) !important;
    color: var(--ctf-blanco) !important;
}

/* Un titular que es en sí mismo un enlace («Contacta nuestra organización» en
   Nosotros) no heredaba la tipografía: Elementor le pone su propia familia por
   instancia con más especificidad que la herencia normal. Se repite el
   selector con el descendiente `a` en vez de asumir que hereda. */
body.ctf-contenido-elementor :where(
    .elementor-widget-heading .elementor-heading-title a,
    .elementor-widget-text-editor a
) {
    font-family: var(--ctf-fuente) !important;
}

/* Un widget de imagen sin imagen asignada muestra el marcador de posición
   gris de Elementor: una caja rota a la vista. No hay imagen real que poner
   desde CSS, así que se oculta el hueco en vez de dejarlo visible. */
body.ctf-contenido-elementor img[src*="/elementor/assets/images/placeholder.png"] {
    display: none !important;
}

/* ---------------------------------------------------------------------
   Jerarquía de la barra lateral (Categorías / Temas / Años en Publicaciones)

   Medido: el encabezado «Categorías» y el enlace «Academia» de debajo
   renderizaban al mismo tamaño y peso — 16px/400 los dos — así que la barra
   lateral se leía como una sola pared de texto sin ninguna jerarquía.

   El encabezado se detecta por estructura, no por clase propia: es un
   widget de encabezado seguido inmediatamente por un widget de menú, el
   patrón exacto que Elementor genera para «etiqueta + lista de filtros». Ese
   patrón no aparece en ningún otro sitio de estas páginas.
   --------------------------------------------------------------------- */
body.ctf-contenido-elementor
    .elementor-widget-heading:has(+ .elementor-widget-nav-menu)
    .elementor-heading-title {
    font-size: var(--paso--2) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--ctf-texto-suave) !important;
    display: block;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem !important;
    border-bottom: 2px solid var(--ctf-negro);
}

body.ctf-contenido-elementor .elementor-widget-heading:has(+ .elementor-widget-nav-menu) + .elementor-widget-nav-menu {
    margin-bottom: 2rem;
}

body.ctf-contenido-elementor
    .elementor-widget-heading:has(+ .elementor-widget-nav-menu)
    + .elementor-widget-nav-menu :where(a) {
    /* paso-0 y no paso--1: a 13px con gris quedaba demasiado discreto para
       una lista de filtros que se supone que se puede escanear rápido. */
    font-size: var(--paso-0) !important;
    line-height: 1.5 !important;
    padding-block: 0.4rem !important;
}

/* ---------------------------------------------------------------------
   Tratamiento de tarjeta en el grid de publicaciones

   Medido: article.elementor-post no traía fondo, borde, sombra, radio ni
   relleno — imagen y texto sueltos, sin nada que los agrupe visualmente.
   Mismo tratamiento que .ctf-tarjeta en el resto del sitio, sin tocar la
   estructura ni las clases que ya usa Elementor.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Coherencia tipográfica de los encabezados

   Medido en los 16 encabezados de /nosotros/:
     · line-height con ratio 1.00 EXACTO en todos — un titular de dos líneas
       se toca consigo mismo, los descendentes chocan con la línea siguiente.
     · pesos mezclados sin criterio: "Nuestro compromiso" y "Equipo" en 400
       (el mismo peso que un párrafo), otros en 600.
     · los 9 valores traían cuatro pesos distintos: 400, 400, 400, 400, 600,
       500, 500, 500.
     · tracking normal, mientras la portada cierra a -0.022em.

   Se corrige lo que da coherencia sin tocar el tamaño que eligió el autor:
   un solo peso, un interlineado que respira y el mismo tracking del resto
   del sitio. El tamaño sigue marcando la jerarquía.
   --------------------------------------------------------------------- */
body.ctf-contenido-elementor :where(
    .elementor-widget-heading .elementor-heading-title,
    .elementor-post__title
) {
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.022em !important;
}

/* Reparte las líneas para que ningún titular deje una palabra huérfana.
   No necesita !important: Elementor no declara text-wrap. */
body.ctf-contenido-elementor :where(
    .elementor-widget-heading .elementor-heading-title,
    .elementor-post__title
) {
    text-wrap: balance;
}

/* Las 9 etiquetas de valores (y el CTA con icono) venían en 20, 21 y 22px:
   nueve rótulos del mismo tipo con tres tamaños distintos. Se detectan por
   estructura —un widget de icono seguido de un encabezado—, patrón que no
   aparece en ningún título de sección, así que no hay falsos positivos.
   El tamaño sale de la escala del tema y cae junto al 22px mayoritario. */
body.ctf-contenido-elementor
    .elementor-widget-icon + .elementor-widget-heading .elementor-heading-title {
    font-size: var(--paso-2) !important;
}

/* Cuerpo de texto: la misma respiración que el resto del sitio. Elementor lo
   dejaba en 1.5; el tema usa 1.6-1.65 y en párrafos largos se nota. */
body.ctf-contenido-elementor :where(.elementor-widget-text-editor) {
    line-height: 1.65 !important;
}

body.ctf-contenido-elementor .elementor-widget-text-editor :where(p, li) {
    text-wrap: pretty;
}

body.ctf-contenido-elementor .elementor-post {
    background: var(--ctf-blanco) !important;
    border: 1px solid var(--ctf-gris-borde) !important;
    border-radius: var(--ctf-radio) !important;
    overflow: hidden;
    transition: transform var(--ctf-transicion), box-shadow var(--ctf-transicion);
}

body.ctf-contenido-elementor .elementor-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

body.ctf-contenido-elementor .elementor-post .elementor-post__text {
    padding: 1.1rem 1.25rem 1.25rem !important;
}

/* ==========================================================================
   16b. Unificación de las páginas internas con Inicio

   LA CAUSA RAÍZ de que "parezcan páginas distintas":

   El Kit de Elementor declara `.elementor-kit-6 a { font-family: "Amasis MT
   Std Light" }`. Ese selector alcanza TODOS los <a> del documento con
   especificidad (0,1,1), así que le gana a la herencia de .ctf-cabecera y
   repinta los enlaces de mi propio encabezado y pie.

   Medido en el mismo enlace del menú principal:
       Inicio        -> "Archivo"
       /contactanos/ -> "Amasis MT Std Light"

   No era que el encabezado estuviera maquetado distinto: es el MISMO
   header.php en las dos. La diferencia es que en Inicio el CSS del Kit va
   descolgado y en las páginas internas carga. De ahí que el cliente
   percibiera el cambio "sobre todo en el menú".
   ========================================================================== */

/* El `body` por delante sube la especificidad a (0,2,1) para ganarle al Kit
   sin depender del orden de carga de las hojas de estilo. */
body .ctf-ambito a,
body.ctf-contenido-elementor a {
    font-family: var(--ctf-fuente);
}

/* Y las variables tipográficas globales del Kit, para los widgets que las
   usan en lugar de traer la fuente escrita por instancia. El Kit las tenía
   en "Amasis MT Std" Black / Bold / Light. */
body.ctf-contenido-elementor {
    --e-global-typography-primary-font-family: "Archivo", "Segoe UI", Roboto, sans-serif;
    --e-global-typography-secondary-font-family: "Archivo", "Segoe UI", Roboto, sans-serif;
    --e-global-typography-text-font-family: "Archivo", "Segoe UI", Roboto, sans-serif;
    --e-global-typography-accent-font-family: "Archivo", "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Formulario de contacto

   Medido en /contactanos/: los campos de texto en 13px y 33px de alto, el
   <select> en 34px —un píxel de diferencia—, radio de 2px cuando el resto del
   sitio usa 4px, y un borde azul-grisáceo rgb(105,114,125) que no pertenece a
   la paleta. Las etiquetas en negro puro y en Amasis, no en Archivo.

   Se igualan alto, borde, radio y tipografía, y se sube el campo a 48px: es
   el mínimo cómodo para tocar con el dedo en móvil.
   -------------------------------------------------------------------------- */

body.ctf-contenido-elementor .elementor-field-label {
    font-family: var(--ctf-fuente) !important;
    font-size: var(--paso--1) !important;
    font-weight: 700 !important;
    color: var(--ctf-texto) !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 0.4rem !important;
}

body.ctf-contenido-elementor :where(
    .elementor-field-textual,
    .elementor-field-type-select select
) {
    font-family: var(--ctf-fuente) !important;
    font-size: var(--paso-0) !important;
    min-height: 48px !important;
    padding: 0.7rem 0.9rem !important;
    border: 1px solid var(--ctf-gris-borde) !important;
    border-radius: var(--ctf-radio) !important;
    color: var(--ctf-texto) !important;
    background-color: var(--ctf-blanco) !important;
    box-shadow: none !important;
    transition: border-color var(--ctf-transicion);
}

body.ctf-contenido-elementor textarea.elementor-field-textual {
    min-height: 8rem !important;
    line-height: 1.6 !important;
}

/* El foco se marca con el rojo de marca, igual que en el resto del sitio. */
body.ctf-contenido-elementor :where(
    .elementor-field-textual,
    .elementor-field-type-select select
):focus {
    border-color: var(--ctf-negro) !important;
    outline: 3px solid var(--ctf-rojo);
    outline-offset: 1px;
}

/* Asteriscos duplicados. El autor escribió " *" dentro del texto de cada
   etiqueta ("Nombres *", "Apellidos *"…) y Elementor añade OTRO por CSS con
   `.elementor-mark-required .elementor-field-label:after { content: "*" }`.
   Se retira el generado y queda el que ya está escrito, que es el que la
   Fundación controla desde el editor. */
body.ctf-contenido-elementor .elementor-mark-required .elementor-field-label::after {
    content: none !important;
}

/* El botón de envío, con la misma forma que los botones del tema. */
body.ctf-contenido-elementor .elementor-form .elementor-button {
    font-family: var(--ctf-fuente) !important;
    font-size: var(--paso-0) !important;
    font-weight: 700 !important;
    min-height: 48px !important;
    padding-inline: 1.5rem !important;
    border-radius: var(--ctf-radio) !important;
}

/* En móvil, Elementor deja los campos en varias columnas estrechas. Una sola
   columna es lo único legible a ese ancho. */
@media (max-width: 767px) {
    body.ctf-contenido-elementor .elementor-form .elementor-field-group {
        width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Equipo (Nosotros): jerarquía entre nombre y cargo

   La regla global de encabezados puso TODO en peso 800, y eso dejó el cargo
   con el mismo peso visual que el nombre: se perdió la jerarquía dentro de
   cada tarjeta. Aquí se recupera dándole al cargo el mismo tratamiento que
   .ctf-persona__cargo en el directorio de expertos —versalitas, gris suave,
   letra pequeña—, para que el equipo de Nosotros y el de Expertos se lean
   igual.

   Los dos se localizan por estructura, verificado en la página:
     imagen + encabezado                -> los 3 nombres
     imagen + encabezado + encabezado   -> los 3 cargos
   Ese patrón no alcanza a "Equipo", "Conócenos", "Valores" ni "Misión".
   -------------------------------------------------------------------------- */

body.ctf-contenido-elementor
    .elementor-widget-image + .elementor-widget-heading .elementor-heading-title {
    font-size: var(--paso-1) !important;
    line-height: 1.25 !important;
}

body.ctf-contenido-elementor
    .elementor-widget-image
    + .elementor-widget-heading
    + .elementor-widget-heading .elementor-heading-title {
    font-size: var(--paso--2) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ctf-texto-suave) !important;
    line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   "Contacta nuestra organización": que se lea como los demás llamados a la
   acción del sitio.

   Comparte el patrón icono+encabezado con las etiquetas de valores, pero se
   distingue de ellas porque su encabezado SÍ contiene un enlace; las de
   valores son texto plano. De ahí el :has(a).
   -------------------------------------------------------------------------- */
body.ctf-contenido-elementor
    .elementor-widget-icon + .elementor-widget-heading:has(a) .elementor-heading-title a {
    color: var(--ctf-rojo-texto) !important;
    font-size: var(--paso-1) !important;
}

body.ctf-contenido-elementor
    .elementor-widget-icon + .elementor-widget-heading:has(a) .elementor-heading-title a::after {
    content: " \2192";
    display: inline-block;
    transition: transform var(--ctf-transicion);
}

body.ctf-contenido-elementor
    .elementor-widget-icon + .elementor-widget-heading:has(a) .elementor-heading-title a:hover::after {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Tarjetas de Publicaciones: mismo lenguaje que las de Inicio

   Medido contra .ctf-tarjeta de la portada:
     · object-fit: fill  -> la imagen se DEFORMA en lugar de recortarse.
       Es un defecto real, no una diferencia de estilo.
     · proporción 1.43 frente a 16/10 = 1.60 de Inicio
     · insignia arriba a la izquierda, con radio; en Inicio va abajo, a ras
     · "Leer más" en cursiva, que no aparece en ningún otro sitio
     · separación de rejilla 29px / 15px, asimétrica
   -------------------------------------------------------------------------- */

body.ctf-contenido-elementor .elementor-post__thumbnail {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    padding: 0 !important;
    background: var(--ctf-hueso);
}

/* Elementor centra la miniatura con position:absolute + left:calc(50% + 1px)
   + transform:translate(-50%,-50%) scale(1.01). Hay que neutralizar TODO ese
   mecanismo a la vez: si solo se cambia `position` a static, el `left` deja de
   aplicar pero el transform sigue vivo y arrastra la imagen fuera de la
   tarjeta (medido: 158px a la izquierda, recortada por el overflow del
   contenedor). Se ancla a las cuatro esquinas y se deja que object-fit haga
   el recorte, que es para lo que existe. */
body.ctf-contenido-elementor .elementor-post__thumbnail img {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    /* cover recorta manteniendo la proporción; fill estiraba la foto. */
    object-fit: cover !important;
    object-position: 50% 35% !important;
}

/* La insignia baja a la esquina inferior izquierda y pierde el radio, como
   .ctf-etiqueta en la portada. */
body.ctf-contenido-elementor .elementor-post__badge {
    top: auto !important;
    bottom: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0.35rem 0.7rem !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

/* "Leer más" sin cursiva y con la forma del enlace-flecha del tema. */
body.ctf-contenido-elementor .elementor-post__read-more {
    font-style: normal !important;
    font-size: var(--paso--1) !important;
    text-decoration: none !important;
}

body.ctf-contenido-elementor .elementor-post__read-more:hover {
    text-decoration: underline !important;
}

/* Separación uniforme entre tarjetas, como la rejilla de la portada. */
body.ctf-contenido-elementor .elementor-posts-container.elementor-grid {
    gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}

/* --------------------------------------------------------------------------
   Red de seguridad responsive

   El desbordamiento horizontal es el fallo más molesto en móvil y el más
   fácil de introducir sin darse cuenta con un ancho fijo en un widget. Esto
   no maqueta nada: solo impide que algo se salga del viewport.
   -------------------------------------------------------------------------- */
/* `clip` y no `hidden`: hidden convierte el elemento en un contenedor de
   scroll, y eso rompe el position:sticky de la cabecera en varios
   navegadores. clip recorta sin crear contexto de scroll, así que la cabecera
   sigue pegándose arriba.

   Es una red de seguridad, no el arreglo: los desbordes reales que encontré
   —la miniatura desplazada y la rejilla del pie— están corregidos arriba y
   aquí abajo. Sin eso, esta regla solo esconde el problema. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* La rejilla del pie pedía un mínimo de 13rem (208px) para la primera
   columna. En un móvil de 375px eso daba 208px + 136px = 344px dentro de un
   contenedor de 335px, y el pie se salía por la derecha. */
@media (max-width: 600px) {
    .ctf-pie__rejilla {
        grid-template-columns: 1fr;
    }

    .ctf-pie__legal {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 900px) {
    .ctf-pie__rejilla {
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    }
}

@media (max-width: 767px) {
    /* Ninguna imagen ni vídeo de Elementor debe empujar el ancho de página. */
    body.ctf-contenido-elementor :where(video, iframe, table) {
        max-width: 100% !important;
        height: auto;
    }
}

/* ==========================================================================
   17. Búsqueda y 404
   ========================================================================== */

.ctf-buscar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 2rem;
    max-width: 32rem;
    border: 2px solid var(--ctf-texto);
    border-radius: var(--ctf-radio);
    overflow: hidden;
}

.ctf-buscar input[type="search"] {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.8rem 1rem;
    border: 0;
    font: inherit;
    font-size: var(--paso-0);
    color: var(--ctf-texto);
    background: var(--ctf-blanco);
}

.ctf-buscar input[type="search"]:focus {
    outline: 0;
}

/* El foco se pinta en el contenedor, para que el anillo rodee todo el control. */
.ctf-buscar:focus-within {
    outline: 3px solid var(--ctf-rojo);
    outline-offset: 2px;
}

.ctf-buscar button {
    padding: 0.8rem 1.4rem;
    border: 0;
    background: var(--ctf-rojo);
    color: var(--ctf-blanco);
    font: inherit;
    font-size: var(--paso-0);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ctf-transicion);
}

.ctf-buscar button:hover {
    background: var(--ctf-rojo-oscuro);
}

.ctf-resultados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.ctf-resultado {
    padding-block: 1.6rem;
    border-top: 1px solid var(--ctf-gris-borde);
}

.ctf-resultado:last-child {
    border-bottom: 1px solid var(--ctf-gris-borde);
}

.ctf-resultado__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-bottom: 0.6rem;
    font-size: var(--paso--2);
    color: var(--ctf-texto-suave);
    font-variant-numeric: tabular-nums;
}

.ctf-resultado__tipo {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ctf-rojo-texto);
}

.ctf-resultado__titulo {
    font-size: var(--paso-2);
    max-width: 46ch;
}

.ctf-resultado__titulo a:hover {
    color: var(--ctf-rojo-texto);
}

.ctf-resultado__resumen {
    margin-top: 0.55rem;
    max-width: var(--ctf-medida);
    color: var(--ctf-texto-suave);
}

/* ==========================================================================
   17. Preferencias del sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ctf-ambito *,
    .ctf-ambito *::before,
    .ctf-ambito *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media print {
    .ctf-cabecera,
    .ctf-pie,
    .ctf-seccion--roja {
        display: none;
    }
}