/* ============================================================
   Plan Distrital Decenal de Educación · Cali 2027–2036
   Hoja de estilos del micrositio, construida sobre los assets
   del template EduBlink (bootstrap, animaciones, iconos, odometer).

   Paleta, tipografías y logo siguen el Brandbook oficial aprobado
   (RESOURCES/Logopack PDE/Brandbook PDE.pdf, agosto 2026) — ya no
   los valores aproximados que se habían inferido de copies.pdf.
   ============================================================ */

@font-face {
    font-family: 'Figtree';
    src: url('../fonts/pde/Figtree-Variable.ttf') format('truetype-variations'),
         url('../fonts/pde/Figtree-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('../fonts/pde/Figtree-Italic-Variable.ttf') format('truetype-variations'),
         url('../fonts/pde/Figtree-Italic-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Rokkitt';
    src: url('../fonts/pde/Rokkitt-Variable.ttf') format('truetype-variations'),
         url('../fonts/pde/Rokkitt-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rokkitt';
    src: url('../fonts/pde/Rokkitt-Italic-Variable.ttf') format('truetype-variations'),
         url('../fonts/pde/Rokkitt-Italic-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Paleta principal (Brandbook, pág. 11) */
    --pdde-crema: #fffdf7;
    --pdde-verde: #b8ce42;
    --pdde-amarillo: #f4bc41;
    --pdde-naranja-600: #e9653a;
    --pdde-morado-900: #2b2775;

    /* Paleta secundaria (Brandbook, pág. 12) */
    --pdde-morado-800: #4a43c9;
    --pdde-morado-700: #5454e1;
    --pdde-morado-950: #15143c;
    --pdde-naranja-700: #b24c30;
    --pdde-naranja-800: #984026;
    --pdde-naranja-100: rgba(233, 101, 58, 0.14);
    /* El naranja principal (#e9653a) da solo 3.3:1 sobre blanco/crema y con
       texto blanco encima — no llega al 4.5:1 que exige WCAG AA para texto
       normal (ver README, Accesibilidad). Se usa naranja-600 para superficies
       grandes/decorativas y naranja-700 (vía este alias) para texto, links y
       botones donde el contraste importa. */
    --pdde-naranja-texto: var(--pdde-naranja-700);
    --pdde-verde-800: #88982f;
    --pdde-amarillo-800: #cf9f37;
    /* Mismo problema que el naranja: verde y amarillo puros dan ~1.7:1
       sobre blanco/crema (ilegibles). Oscurecidos hasta pasar 4.5:1,
       para usarlos como texto/ícono en fondos claros. Sobre morado-900
       los tonos puros SÍ funcionan (7+:1) — ahí se usan directo. */
    --pdde-verde-texto: #6d7b20;
    --pdde-amarillo-texto: #986b09;
    /* Hover del botón principal (ver .pdde-btn-primario): mismo verde
       accesible pero un tono más oscuro, igual que naranja-700→800. */
    --pdde-verde-900: #5a6519;
    /* Amarillo oscurecido a un peso visual parecido a naranja-700/verde-900
       (5.7:1 con blanco), para usarlo como fondo sólido de sección — el
       amarillo/dorado puro es ilegible con texto blanco encima. */
    --pdde-amarillo-900: #8a5e08;

    --pdde-crema-texto: #6b6350;
    --pdde-gris-900: #23213d;
    --pdde-gris-600: #635f74;
    --pdde-gris-300: #e3dff0;
    --pdde-blanco: #ffffff;

    /* Tipografías (Brandbook, pág. 13-14): títulos y cuerpo en Figtree,
       textos destacados en Rokkitt itálica. El wordmark del logo usa
       Bricolage Grotesque, pero ese texto vive en el logo como imagen,
       no se recrea con HTML/CSS. */
    --pdde-font-label: 'Figtree', var(--font-primary, sans-serif);
    --pdde-font-num: 'Figtree', var(--font-primary, sans-serif);
    --pdde-font-destacado: 'Rokkitt', Georgia, serif;
    --pdde-radius: 18px;
    /* Sombra compacta a propósito: el Brandbook es plano/geométrico, sin
       resplandores difusos ni degradados (pág. 4: "modular / síntesis
       visual / compacto"). */
    --pdde-shadow: 0 10px 24px rgba(43, 39, 117, 0.16);
}

.pdde-page { background: var(--pdde-blanco); overflow-x: hidden; font-family: var(--pdde-font-label); }
.pdde-page section { position: relative; }
.pdde-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Encabezados de sección, reutilizados en todo el sitio ---------- */
.pdde-eyebrow {
    display: inline-block;
    font-family: var(--pdde-font-label);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pdde-naranja-texto);
    margin-bottom: 14px;
}
.pdde-section-title {
    font-family: var(--pdde-font-label);
    font-weight: 700;
    color: var(--pdde-morado-900);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    margin-bottom: 16px;
}
.pdde-section-desc {
    color: var(--pdde-gris-600);
    font-size: 17px;
    line-height: 1.7;
    max-width: 720px;
}
.pdde-section-head { margin-bottom: 48px; }
.pdde-section-head.text-center { margin-left: auto; margin-right: auto; text-align: center; }
.pdde-section-head.text-center .pdde-section-desc { margin-left: auto; margin-right: auto; }

/* ---------- Encabezado de página interna (Participa, Así avanza, PDDE...) ---------- */
.pdde-pageheader {
    /* La textura (Patrón 04 del Brandbook) trae su propio desvanecido hacia
       transparente, así que no necesita máscaras ni recortes en CSS: se
       ancla a una esquina y se difumina sola hacia el resto del fondo.
       Va ENCIMA del degradado (el degradado es solo un resplandor de
       ambiente detrás; el patrón tiene que leerse nítido arriba). */
    position: relative;
    overflow: hidden;
    background-color: var(--pdde-morado-900);
    background-image:
        url('../images/logo-pde/patron-04-header.png'),
        radial-gradient(circle at 88% 120%, rgba(84,84,225,.55) 0%, rgba(84,84,225,0) 60%);
    background-repeat: no-repeat;
    background-position: right top, right bottom;
    background-size: 640px, 620px;
    color: #fff;
    padding: 64px 0;
}
.pdde-pageheader .pdde-section-title { color: #fff; }
.pdde-pageheader .pdde-section-desc { color: rgba(255,255,255,.78); }
/* El eyebrow heredaba naranja-texto (pensado para fondos claros): sobre el
   morado del encabezado da 2.4:1, muy por debajo del 4.5:1 mínimo. Blanco
   por defecto, y una identidad de color distinta por sección — los 4
   colores de marca (Brandbook pág. 11) no tienen por qué ser solo un
   detalle del morado y el naranja del CTA. */
.pdde-pageheader .pdde-eyebrow { color: #fff; }

/* ---------- Acento de color por sección (los 4 colores de marca) ---------- */
/* En fondo claro (naranja-texto es el color por defecto de .pdde-eyebrow;
   estas variantes cubren verde/amarillo/morado con el mismo contraste
   verificado ≥4.5:1). En fondo oscuro (.pdde-pageheader, tarjetas moradas)
   los tonos puros ya dan ≥7:1, así que ahí se usan directo. */
.pdde-acento-verde { color: var(--pdde-verde-texto); }
.pdde-acento-amarillo { color: var(--pdde-amarillo-texto); }
.pdde-acento-morado { color: var(--pdde-morado-900); }
/* .pdde-pageheader ya NO se queda en morado: cada sección tiene su propio
   fondo de color (ver .pdde-pageheader.pdde-acento-* arriba), así que el
   eyebrow ahí se queda blanco (heredado de .pdde-pageheader .pdde-eyebrow)
   — un acento tintado del mismo color que el fondo bajaría de 4.5:1.
   .pdde-participa-card y .pdde-trazabilidad-card sí siguen sobre morado-900
   fijo, ahí los tonos puros dan ≥7:1 y se mantienen. */
.pdde-participa-card .pdde-acento-naranja,
.pdde-trazabilidad-card .pdde-acento-naranja { color: #ffb088; }
.pdde-participa-card .pdde-acento-verde,
.pdde-trazabilidad-card .pdde-acento-verde { color: var(--pdde-verde); }
.pdde-participa-card .pdde-acento-amarillo,
.pdde-trazabilidad-card .pdde-acento-amarillo { color: var(--pdde-amarillo); }
.pdde-participa-card .pdde-acento-morado,
.pdde-trazabilidad-card .pdde-acento-morado { color: #fff; }

/* Mismo motivo geométrico del Brandbook (pág. 19), pero ahora con el FONDO
   sólido de cada sección — no solo la textura de la esquina — para que
   Participa/Así avanza/Noticias se distingan a simple vista de PDDE y
   Repositorio (que se quedan en el morado institucional por defecto).
   Se usan los tonos oscurecidos de cada color (mismo criterio que los
   botones y el texto: el naranja/verde/amarillo puros no dan 4.5:1 con
   texto blanco encima). */
.pdde-pageheader.pdde-acento-naranja {
    background-color: var(--pdde-naranja-700);
    background-image:
        url('../images/logo-pde/patron-naranja-header.png'),
        radial-gradient(circle at 88% 120%, rgba(233,101,58,.7) 0%, rgba(233,101,58,0) 60%);
    background-position: right top, right bottom;
    background-size: 640px, 620px;
}
.pdde-pageheader.pdde-acento-verde {
    background-color: var(--pdde-verde-900);
    background-image:
        url('../images/logo-pde/patron-verde-header.png'),
        radial-gradient(circle at 88% 120%, rgba(184,206,66,.55) 0%, rgba(184,206,66,0) 60%);
    background-position: right top, right bottom;
    background-size: 640px, 620px;
}
.pdde-pageheader.pdde-acento-amarillo {
    background-color: var(--pdde-amarillo-900);
    background-image:
        url('../images/logo-pde/patron-amarillo-header.png'),
        radial-gradient(circle at 88% 120%, rgba(244,188,65,.6) 0%, rgba(244,188,65,0) 60%);
    background-position: right top, right bottom;
    background-size: 640px, 620px;
}

/* ---------- Personaje de marca en el encabezado (uno de los 4, según el
   color de la sección — "génesis constructivo", ver también pdde.php) ---------- */
.pdde-pageheader-mascota {
    position: absolute;
    right: clamp(12px, 4vw, 64px);
    bottom: -22px;
    /* Antes clamp(110px, 16vw, 190px) — más presencia. */
    height: clamp(150px, 21vw, 250px);
    width: auto;
    z-index: 1;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
    pointer-events: none;
}
/* El bloque de texto (breadcrumb/eyebrow/h1/descripción) reserva su propio
   carril a la derecha para la mascota, en vez de dejar que el texto ocupe
   todo el ancho del contenedor y arriesgarse a que una línea larga quede
   por debajo de ella. El cálculo sigue el mismo clamp() que usa la
   mascota: alto × relación de aspecto + el offset derecho + margen. Las
   mascotas verticales (Cristo Rey, el gato) miden ~0.77:1; ver más abajo
   la reserva más ancha para Santa Librada, que es horizontal (1.78:1). */
.pdde-pageheader .pdde-container { padding-right: clamp(150px, 21vw, 280px); }
@media (max-width: 768px) {
    /* En vez de ocultar la mascota, mismo criterio que .pdde-participa-gato
       en el home: se le reserva su propio espacio abajo (padding-bottom)
       para que el flotado nunca tape el breadcrumb/título/descripción, y
       flota con la misma animación. Acá el texto vuelve a usar todo el
       ancho: la mascota ya no está al lado, está debajo. */
    .pdde-pageheader { padding-bottom: 150px; }
    .pdde-pageheader .pdde-container { padding-right: 24px; }
    .pdde-pageheader-mascota {
        height: clamp(90px, 26vw, 130px);
        right: 16px;
        bottom: -6px;
        animation: pdde-flotar 4s ease-in-out infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pdde-pageheader-mascota { animation: none; }
}
/* Santa Librada (lo-que-viene.php, participa.php) es la única mascota en
   formato horizontal (1.78:1, las demás son verticales ~0.5-0.77:1): a la
   misma altura, su ancho casi duplica al resto. La sección lleva la clase
   .pdde-pageheader-ancha para que el texto reserve ese carril más amplio. */
.pdde-pageheader-ancha .pdde-container { padding-right: clamp(300px, 42vw, 520px); }
@media (max-width: 768px) {
    .pdde-pageheader-ancha .pdde-container { padding-right: 24px; }
}

.pdde-breadcrumb { font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.pdde-breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.pdde-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Resúmenes en el Home ---------- */
/* El crema de marca (#fffdf7) es casi idéntico al blanco: sin una línea
   entre secciones, el cambio de tono se lee como un error de render, no
   como una separación a propósito. Una línea sutil arriba de cada
   sección de contenido resuelve esto sin importar qué color siga. */
.pdde-resumen, .pdde-participa, .pdde-avanza, .pdde-sobre,
.pdde-noticias, .pdde-repositorio, .pdde-contenido-simple {
    border-top: 1px solid rgba(35, 33, 61, 0.07);
}

.pdde-resumen { padding: 90px 0; }
.pdde-resumen-crema { background: var(--pdde-crema); }
/* El patrón amarillo (Patrones PDE-12, estrellas) como fondo de TODA la
   sección "Así avanza" — no una franja aparte. A opacidad baja, detrás de
   la tarjeta, para que no compita con el contenido. */
/* Fondo ilustrado para "Noticias del proceso" (mismo universo gráfico de
   marca: la silueta de Cristo Rey, el patrón geométrico, las montañas). */
.pdde-resumen-fondo-noticias {
    /* ?v= a mano contra caché: este fondo va en el CSS (no pasa por
       pddeUrl()), así que si se cambia la imagen hay que subirle el
       número acá para que el navegador pida la nueva. */
    background-image: url('../images/noticias/back45.jpg?v=20260909');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.pdde-resumen-crema-patron-amarillo {
    position: relative;
    background-color: var(--pdde-crema);
}
/* Pseudo-elemento aparte (no el background-image de la sección) para que
   "opacity" se pueda ajustar sin aclarar también el crema de fondo. */
.pdde-resumen-crema-patron-amarillo::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('../images/patrones-franja/patron-yellow-2.png');
    background-repeat: repeat;
    background-size: 130px;
    pointer-events: none;
}
.pdde-resumen-crema-patron-amarillo .pdde-avanza-card-wrap { position: relative; z-index: 1; }

/* "Así avanza" en el home: la sección pasa a vivir dentro de una tarjeta
   grande con esquinas de color en diagonal (morado), un arco verde que
   emerge de la esquina inferior, el patrón institucional muy tenue arriba
   a la derecha, y El Gato asomando abajo a la izquierda — mismo lenguaje
   visual que el resto del sitio (colores y patrones de marca, mascota de
   la "génesis constructivo"), no una ilustración nueva. */
.pdde-avanza-card-wrap { position: relative; }
.pdde-avanza-card {
    position: relative;
    overflow: hidden;
    background: var(--pdde-crema);
    border-radius: 32px;
    padding: 56px 64px;
    box-shadow: var(--pdde-shadow);
}
.pdde-avanza-card-patron {
    position: absolute; top: 0; right: 0; width: 55%; height: 65%;
    background-image: url('../images/logo-pde/patron-verde-header.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 480px;
    opacity: .5;
    pointer-events: none;
}
.pdde-avanza-card-esquina {
    position: absolute;
    width: 90px; height: 90px;
    background: var(--pdde-morado-900);
    pointer-events: none;
}
.pdde-avanza-card-esquina-tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.pdde-avanza-card-esquina-br {
    bottom: 0; right: 0; width: 140px; height: 140px;
    clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
.pdde-avanza-card-arco {
    position: absolute; right: -70px; bottom: -70px;
    width: 240px; height: 240px;
    border-radius: 50%;
    border: 24px solid var(--pdde-verde);
    pointer-events: none;
}
.pdde-avanza-card-contenido { position: relative; z-index: 1; }
.pdde-avanza-card-contenido .pdde-resumen-header { margin-bottom: 0; }
.pdde-avanza-card-contenido .pdde-section-title::after {
    content: '';
    display: block;
    width: 56px; height: 4px; border-radius: 2px;
    background: var(--pdde-verde);
    margin-top: 14px;
}
.pdde-avanza-mascota {
    position: absolute;
    left: clamp(8px, 3vw, 32px);
    bottom: -14px;
    /* Antes llegaba a 190px y se montaba encima de la primera fecha/título
       del timeline (quedaba tapado). Más chica, y el timeline le deja su
       propio hueco a la izquierda (ver .pdde-timeline-h-wrap más abajo). */
    height: clamp(90px, 11vw, 130px);
    width: auto;
    z-index: 2;
    filter: drop-shadow(0 12px 20px rgba(21,20,60,.35));
    animation: pdde-flotar 4s ease-in-out infinite;
    pointer-events: none;
}
.pdde-avanza-card-contenido .pdde-timeline-h-wrap { padding-left: clamp(90px, 11vw, 130px); }
@media (prefers-reduced-motion: reduce) {
    .pdde-avanza-mascota { animation: none; }
}
@media (max-width: 768px) {
    .pdde-avanza-card { padding: 40px 28px 150px; }
    .pdde-avanza-mascota { height: clamp(80px, 22vw, 110px); left: 16px; bottom: -6px; }
    /* En móvil el gato queda abajo de toda la tarjeta (el padding-bottom
       de arriba ya le reserva espacio), no al lado del timeline. */
    .pdde-avanza-card-contenido .pdde-timeline-h-wrap { padding-left: 0; }
    .pdde-avanza-card-patron { width: 80%; }
    /* La esquina azul superior izquierda estorba en móvil (queda muy
       cerca del "Transparencia del proceso" con poco margen). */
    .pdde-avanza-card-esquina-tl { display: none; }
}
/* "Sobre el Plan" en el home: fondo morado con el patrón institucional a
   opacidad, texto claro — igual que los encabezados internos, pero las
   tarjetas de los ejes SÍ se quedan en blanco para que contrasten. */
.pdde-resumen-morado {
    position: relative;
    overflow: hidden;
    background-color: var(--pdde-morado-900);
    background-image:
        url('../images/logo-pde/patron-04-header.png'),
        radial-gradient(circle at 88% 120%, rgba(84,84,225,.55) 0%, rgba(84,84,225,0) 60%);
    background-repeat: no-repeat;
    background-position: right top, right bottom;
    background-size: 640px, 620px;
    color: var(--pdde-blanco);
    border-top-color: rgba(255,255,255,.12);
}
.pdde-resumen-morado .pdde-eyebrow { color: #fff; }
.pdde-resumen-morado .pdde-section-title { color: #fff; }
.pdde-resumen-morado .pdde-section-desc { color: rgba(255,255,255,.78); }
.pdde-resumen-morado .pdde-ver-mas { color: #ffb088; }
.pdde-resumen-morado .pdde-ver-mas:hover { color: #fff; }
.pdde-resumen-morado .pdde-eje-card { background: var(--pdde-blanco); border-color: transparent; }

/* "Repositorio" en el home: mismo criterio que "Sobre el Plan" pero en
   naranja ("rojo") — la tarjeta se queda blanca para contrastar, con
   Santa Librada asomando en la esquina (mismo personaje que ya usamos en
   Participa y en "¿Aún no participaste?" de Así avanza). */
/* Mismo efecto que .pdde-pageheader (patrón nítido encima + resplandor de
   ambiente detrás) — el patrón como background-image real de la sección
   (no un ::before) evita el bug de apilamiento que tuvimos la vez pasada,
   porque el fondo propio de una caja siempre pinta detrás de TODO su
   contenido, posicionado o no. */
.pdde-resumen-azul {
    position: relative;
    overflow: hidden;
    background-color: var(--pdde-morado-900);
    background-image:
        url('../images/logo-pde/patron-04-header.png'),
        radial-gradient(circle at 88% 120%, rgba(84,84,225,.55) 0%, rgba(84,84,225,0) 60%);
    background-repeat: no-repeat;
    background-position: right top, right bottom;
    background-size: 640px, 620px;
    color: var(--pdde-blanco);
    border-top-color: rgba(255,255,255,.12);
}
.pdde-resumen-azul .pdde-eyebrow { color: #fff; }
.pdde-resumen-azul .pdde-section-title { color: #fff; }
.pdde-resumen-azul .pdde-section-desc { color: rgba(255,255,255,.78); }
.pdde-resumen-azul .pdde-ver-mas { color: #fff; }
.pdde-resumen-azul .pdde-ver-mas:hover { color: rgba(255,255,255,.8); }
.pdde-resumen-azul .pdde-teaser-card { background: var(--pdde-blanco); border-color: transparent; position: relative; z-index: 1; }

.pdde-repo-teaser-wrap { position: relative; }
.pdde-repo-mascota {
    position: absolute;
    right: clamp(8px, 4vw, 48px);
    bottom: -12px;
    height: clamp(70px, 10vw, 120px);
    width: auto;
    z-index: 2;
    filter: drop-shadow(0 12px 20px rgba(21,20,60,.4));
    animation: pdde-flotar 4s ease-in-out infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .pdde-repo-mascota { animation: none; }
}
@media (max-width: 640px) {
    .pdde-repo-teaser-wrap .pdde-teaser-card { padding-bottom: 120px; }
    .pdde-repo-mascota { height: clamp(65px, 18vw, 95px); right: 12px; bottom: -6px; }
}
.pdde-resumen-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    flex-wrap: wrap; margin-bottom: 40px;
}
.pdde-resumen-header .pdde-eyebrow, .pdde-resumen-header .pdde-section-title { margin-bottom: 0; }
.pdde-resumen-header > div:first-child .pdde-eyebrow { margin-bottom: 12px; }
.pdde-ver-mas {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--pdde-font-label); font-weight: 700; font-size: 14.5px;
    color: var(--pdde-naranja-texto); text-decoration: none; white-space: nowrap;
}
.pdde-ver-mas::after { content: '→'; transition: transform .2s ease; }
.pdde-ver-mas:hover::after { transform: translateX(4px); }
.pdde-ver-mas:hover { color: var(--pdde-naranja-700); }
.pdde-resumen-footer { margin-top: 36px; text-align: center; }
.pdde-teaser-card {
    background: var(--pdde-blanco); border: 1.5px solid var(--pdde-gris-300); border-radius: var(--pdde-radius);
    padding: 36px; text-align: center;
}
.pdde-teaser-card p { color: var(--pdde-gris-600); margin: 10px auto 20px; max-width: 480px; }

/* ---------- Header / navegación ---------- */
.pdde-header .header-mainmenu { background: transparent; transition: all .3s ease; padding: 18px 0; }
.pdde-header .header-mainmenu.edu-sticky {
    background: var(--pdde-blanco);
    box-shadow: 0 4px 30px rgba(36,17,70,.1);
    padding: 10px 0;
}
.pdde-navbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pdde-brand { display: flex; align-items: center; flex-shrink: 0; }
/* app.css trae "img { max-width:100%; height:auto }" de fábrica. Al fijar
   height acá sin anular max-width, si el header se aprieta en móvil el
   navegador limita el ancho pero no el alto → el logo se ve deformado.
   flex-shrink:0 evita además que el propio contenedor lo comprima. */
.pdde-logo { display: block; height: 44px; width: auto; max-width: none; flex-shrink: 0; }
.pdde-nav { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.pdde-nav li, .pdde-mobile-nav li { margin: 0; line-height: normal; }
.pdde-nav a {
    font-family: var(--pdde-font-label);
    font-weight: 600;
    font-size: 15px;
    color: var(--pdde-gris-900);
    text-decoration: none;
    transition: color .2s ease;
}
.pdde-nav a:hover { color: var(--pdde-naranja-texto); }
.pdde-nav a.pdde-activo { color: var(--pdde-naranja-texto); }
.pdde-header-actions { display: flex; align-items: center; gap: 16px; }

/* Menú móvil (overlay a pantalla completa) */
.pdde-mobile-menu {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--pdde-morado-900);
    display: none; flex-direction: column;
    padding: 28px;
    overflow-y: auto;
}
.pdde-mobile-menu.active { display: flex; }
.pdde-mobile-menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.pdde-logo-movil { height: 36px; }
.pdde-mobile-close { background: none; border: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.pdde-mobile-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.pdde-mobile-nav a { color: #fff; font-family: var(--pdde-font-label); font-weight: 700; font-size: 22px; text-decoration: none; }

.pdde-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--pdde-font-label);
    font-weight: 700;
    font-size: 15px;
    border-radius: 999px;
    padding: 14px 28px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.pdde-btn:active { transform: translateY(1px); }
/* Botón de acción principal del sitio ("Participa ahora" y envíos de
   formulario). Antes era naranja; a pedido se cambió a verde de marca
   (verde-texto: #6d7b20, 4.66:1 con blanco — cumple WCAG AA). */
.pdde-btn-primario {
    background: var(--pdde-verde-texto);
    color: var(--pdde-blanco);
    box-shadow: 0 6px 16px rgba(109,123,32,.32);
}
.pdde-btn-primario:hover { background: var(--pdde-verde-900); color: var(--pdde-blanco); }
.pdde-btn-outline-blanco { border-color: rgba(255,255,255,.6); color: var(--pdde-blanco); }
.pdde-btn-outline-blanco:hover { background: rgba(255,255,255,.12); color: var(--pdde-blanco); }
.pdde-btn-morado { background: var(--pdde-morado-900); color: var(--pdde-blanco); }
.pdde-btn-morado:hover { background: var(--pdde-morado-700); color: var(--pdde-blanco); }
.pdde-btn-sm { padding: 10px 20px; font-size: 14px; }
.pdde-btn[disabled] { opacity: .5; cursor: not-allowed; }

.pdde-hamburger {
    display: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid var(--pdde-gris-300);
    background: var(--pdde-blanco);
    align-items: center; justify-content: center;
    cursor: pointer;
}
.pdde-hamburger span, .pdde-hamburger span::before, .pdde-hamburger span::after {
    content: ''; display: block; width: 20px; height: 2px; background: var(--pdde-morado-900);
    position: relative; transition: .2s;
}
.pdde-hamburger span::before { position: absolute; top: -6px; }
.pdde-hamburger span::after { position: absolute; top: 6px; }

.pdde-cta-movil { display: none; }

/* ---------- Hero ---------- */
.pdde-hero {
    /* Fondo sólido morado como respaldo (versión "negativo" del logo,
       Brandbook pág. 5) mientras carga el video o si el navegador lo
       bloquea — ver .pdde-hero-video/.pdde-hero-tinte más abajo, que son
       los que realmente construyen el fondo ahora. */
    background-color: var(--pdde-morado-900);
    color: var(--pdde-blanco);
    overflow: hidden;
}
/* Envoltura del video + tinte + texto — SIN incluir .pdde-stats. Antes el
   video (position:absolute; inset:0) colgaba directo de .pdde-hero, y como
   .pdde-hero-inner es contenido normal (no posicionado), por las reglas de
   apilamiento de CSS el video terminaba pintándose ENCIMA del texto y
   hasta de la franja de estadísticas de abajo. Este wrapper acota el
   inset:0 a solo el área visual del hero. */
/* El padding-top vivía en .pdde-hero: con la foto de antes no se notaba
   porque el background-image cubre también el padding-box del elemento,
   pero el video (un iframe real, hijo de .pdde-hero-visual) solo cubre SU
   propia caja — quedaba una franja lisa arriba, sin video, del alto del
   padding. Se mueve el padding acá para que el inset:0 del video/tinte
   (que se miden contra la padding-box de .pdde-hero-visual) lo incluyan. */
/* overflow:hidden acá (además del de .pdde-hero) para acotar los rehiletes
   decorativos SOLO al área del banner: sin esto, el de la esquina inferior
   derecha se derrama sobre la franja de estadísticas de abajo. */
.pdde-hero-visual { position: relative; padding: 170px 0 0; overflow: hidden; }
/* Video de fondo auto-alojado (assets/video.mp4) en modo "cover": llena
   toda la caja del hero y se recorta lo que sobre. pointer-events:none
   para que no capture clics/scroll — es puramente decorativo (aria-hidden). */
.pdde-hero-video {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.pdde-hero-video video {
    position: absolute; top: 50%; left: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    border: 0;
}
/* Mismo degradado y misma opacidad que tenía antes sobre la foto estática
   ("con opacidad del azul que se está usando actualmente") — ahora como
   capa propia porque un iframe no se puede atenuar vía background-image. */
.pdde-hero-tinte {
    position: absolute; inset: 0; z-index: 0;
    /* -15 puntos de opacidad (antes .90/.94) para que el video se note más. */
    background: linear-gradient(160deg, rgba(43,39,117,.75), rgba(21,20,60,.79));
    pointer-events: none;
}
/* El texto tiene que pintarse explícitamente ENCIMA del video/tinte
   (z-index:0): sin esto, por ser contenido normal-en-flujo, de todos
   modos pintaría antes que los hijos posicionados con z-index:0. */
.pdde-hero-visual > .pdde-container { position: relative; z-index: 1; }
.pdde-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; padding-bottom: 90px; }
.pdde-hero-eyebrow {
    /* Antes era una pastilla (fondo + borde + padding + border-radius) —
       a pedido, ahora es solo el texto, sin que parezca un botón. */
    display: inline-block;
    color: #ffb088;
    font-family: var(--pdde-font-label);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.pdde-hero h1 {
    font-family: var(--pdde-font-label);
    font-weight: 800;
    font-size: clamp(32px, 5.4vw, 54px);
    line-height: 1.15;
    color: var(--pdde-blanco);
    margin-bottom: 22px;
}
.pdde-hero p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255,255,255,.85);
    margin-bottom: 38px;
}
.pdde-hero-ctas { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

.pdde-stats {
    background: var(--pdde-morado-900);
    border-top: 1px solid rgba(255,255,255,.1);
}
.pdde-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.1);
}
.pdde-stat {
    background: var(--pdde-morado-900);
    padding: 36px 20px;
    text-align: center;
}
.pdde-stat .odometer,
.pdde-stat .pdde-stat-value {
    font-family: var(--pdde-font-num);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    color: var(--pdde-blanco);
}
/* Números grandes en negrita (28-40px, siempre ≥18.66px bold): el naranja
   puro ya da 3.87:1 sobre el morado del hero, suficiente para "texto
   grande" (mínimo 3:1 WCAG AA) aunque no alcance el 4.5:1 de texto normal. */
.pdde-stat.pdde-acento-naranja .odometer { color: var(--pdde-naranja-600); }
.pdde-stat.pdde-acento-verde .pdde-stat-value { color: var(--pdde-verde); }
.pdde-stat.pdde-acento-amarillo .pdde-stat-value { color: var(--pdde-amarillo); }
.pdde-stat-label {
    font-family: var(--pdde-font-label);
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin-top: 6px;
}
.pdde-stat-pending {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,.5);
    margin-top: 10px; font-style: italic;
}

/* ---------- "Lo que viene" (banner del home) ---------- */
/* Separado de la barra de pulso de arriba con el mismo borde sutil que ya
   marca el límite entre el resto de secciones del home (ver línea 258) —
   en vez de dejar un hueco grande y suelto antes del borde "de la sección
   siguiente", el borde pasa a marcar ACÁ el cierre de la barra de pulso. */
.pdde-proximo-evento {
    background: var(--pdde-blanco);
    border-top: 1px solid rgba(35, 33, 61, 0.07);
    padding: 40px 0 48px;
}
.pdde-evento-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Blanco, no crema: la barra de pulso de arriba ya es crema — con el
       mismo tono acá, de lejos se leían como una sola franja continua. */
    background: var(--pdde-blanco);
    border: 1.5px solid rgba(233,101,58,.25);
    border-radius: var(--pdde-radius);
    box-shadow: var(--pdde-shadow);
    padding: 16px 24px 16px 16px;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pdde-evento-banner:hover { border-color: var(--pdde-naranja-600); }
.pdde-evento-banner-img {
    width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none;
}
.pdde-evento-banner-texto { flex: 1 1 auto; min-width: 0; }
.pdde-evento-banner-titulo {
    font-family: var(--pdde-font-label); font-weight: 700; font-size: 16px;
    color: var(--pdde-morado-900); margin: 2px 0 2px;
}
.pdde-evento-banner-fecha { font-size: 13.5px; color: var(--pdde-gris-600); margin: 0; }
.pdde-evento-banner-cta {
    flex: none;
    font-family: var(--pdde-font-label); font-weight: 700; font-size: 14px;
    color: var(--pdde-naranja-texto); white-space: nowrap;
}
@media (max-width: 640px) {
    .pdde-evento-banner { flex-wrap: wrap; }
    .pdde-evento-banner-cta { width: 100%; padding-left: 84px; }
}
/* Versión angosta: misma tarjeta, pero en una columna (ej. /asi-avanza,
   debajo de "¿Aún no participaste?") mucho más estrecha que el ancho
   completo del home. Con el flex normal, al no caber image+texto+botón en
   una sola fila, TODO se apilaba uno debajo del otro (hasta la imagen
   arriba) — con grid la imagen queda fija a la izquierda, ocupando todo
   el alto, y texto + botón a la derecha, uno debajo del otro.
   padding-left en la variante base (la del home) estorba acá: en grid el
   botón ya cae bajo el texto sin necesidad de ese truco. */
.pdde-evento-banner-columna {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 6px;
    align-items: start;
    margin-top: 24px;
}
.pdde-evento-banner-columna .pdde-evento-banner-img {
    grid-row: 1 / 3;
    grid-column: 1;
    width: 90px;
    height: 90px;
}
.pdde-evento-banner-columna .pdde-evento-banner-texto { grid-row: 1; grid-column: 2; }
.pdde-evento-banner-columna .pdde-evento-banner-cta {
    grid-row: 2;
    grid-column: 2;
    width: auto;
    padding-left: 0;
}

/* ---------- Barra de pulso ciudadano ---------- */
.pdde-pulso {
    background: var(--pdde-crema);
    padding: 18px 0;
}
.pdde-pulso-inner {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    text-align: center; flex-wrap: wrap;
    font-family: var(--pdde-font-label);
    font-weight: 600;
    color: var(--pdde-morado-900);
}
.pdde-pulse-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--pdde-verde);
    box-shadow: 0 0 0 rgba(47,177,112,.6);
    animation: pdde-pulse 1.8s infinite;
    flex: none;
}
.pdde-pulso-inner strong { color: var(--pdde-naranja-700); }
@keyframes pdde-pulse {
    0% { box-shadow: 0 0 0 0 rgba(47,177,112,.55); }
    70% { box-shadow: 0 0 0 10px rgba(47,177,112,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,177,112,0); }
}

/* ---------- Participa ---------- */
.pdde-participa { padding: 100px 0; background: var(--pdde-blanco); }
.pdde-participa-card {
    background-color: var(--pdde-morado-900);
    /* Fondo ilustrado anclado abajo, sin repetir, a todo el ancho de la
       tarjeta (?v= a mano contra caché: va en el CSS, no pasa por
       pddeUrl() — subir el número si se cambia la imagen).
       En el home esta imagen se anula (.pdde-participa-card-wrap
       .pdde-participa-card { background-image: none }). */
    background-image: url('../images/participa/back-participa2.jpg?v=20260909');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    border-radius: 28px;
    padding: 48px;
    color: var(--pdde-blanco);
    box-shadow: var(--pdde-shadow);
    overflow: hidden;
}

/* ---------- "Tu voz cuenta" en el Home: foto + mascota de marca ---------- */
/* Solo la versión del home (envuelta en .pdde-participa-card-wrap) lleva
   esta decoración — la tarjeta de participa.php usa la misma clase base
   .pdde-participa-card pero con el selector/formulario adentro, donde una
   foto de fondo taparía legibilidad; por eso todo va con este prefijo. */
.pdde-participa-card-wrap { position: relative; }
.pdde-participa-card-wrap .pdde-participa-card { position: relative; background-image: none; }
.pdde-participa-card-foto {
    position: absolute; inset: 0;
    background-image: url('../images/participa/fondo-educa.jpg');
    background-size: cover;
    background-position: center 30%;
    opacity: .55;
    /* Degradado con opacidad 0 a la izquierda: se funde con el morado
       donde está el texto y se revela hacia la derecha. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 38%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 38%, #000 100%);
}
.pdde-participa-card-contenido { position: relative; z-index: 1; }
.pdde-participa-gato {
    position: absolute;
    right: -14px;
    bottom: -16px;
    /* "50% del alto del contenedor": la tarjeta mide su alto según el
       contenido (texto de la pregunta cambia cada semana), así que un
       height:% no tiene de qué agarrarse — se aproxima con clamp() al
       tamaño que tendría la mascota a la mitad de una tarjeta típica. */
    height: clamp(110px, 20vw, 210px);
    width: auto;
    z-index: 2;
    filter: drop-shadow(0 10px 18px rgba(21,20,60,.4));
    animation: pdde-flotar 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pdde-flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
    .pdde-participa-gato { animation: none; }
}
@media (max-width: 640px) {
    /* En vez de ocultar la mascota, se le reserva su propio espacio abajo
       de la tarjeta (padding-bottom grande) para que el flotado nunca
       tape el botón "Responder ahora" ni el resto del texto. */
    .pdde-participa-card-wrap .pdde-participa-card { padding-bottom: 150px; }
    .pdde-participa-gato { height: clamp(90px, 26vw, 130px); right: 8px; bottom: -6px; }
}
.pdde-paso-label {
    font-family: var(--pdde-font-label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    margin-bottom: 16px;
}
.pdde-paso-label-nota {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: rgba(255,255,255,.55);
}
.pdde-roles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.pdde-campo-error {
    margin: -4px 0 28px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffb088;
}
/* Perfil demográfico (zona / rango de edad / género): un solo row, 3
   columnas, un <select> por columna — más compacto que una lista de radios
   (Zona tiene 8 opciones y Género solo 3; con radios esas columnas
   quedaban muy desparejas en alto). */
.pdde-perfil-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 8px;
}
.pdde-perfil-campo { min-width: 0; }
.pdde-perfil-campo label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--pdde-font-label);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--pdde-blanco);
}
.pdde-perfil-campo select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(21,20,60,.8)
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="white" stroke-opacity=".6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
        no-repeat right 14px center;
    border: 1.5px solid rgba(255,255,255,.22);
    border-radius: 14px;
    padding: 12px 36px 12px 14px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--pdde-blanco);
    cursor: pointer;
}
.pdde-perfil-campo select:focus { outline: 2px solid var(--pdde-naranja-600); outline-offset: 2px; }
/* El navegador pinta las <option> con su propio fondo (normalmente claro):
   si no se fija acá, el texto queda blanco-sobre-blanco al abrir la lista. */
.pdde-perfil-campo select option { color: var(--pdde-morado-900); background: var(--pdde-blanco); }
@media (max-width: 768px) {
    .pdde-perfil-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* app.css (del template) decora cualquier "input[type=radio] ~ label" /
   "input[type=checkbox] ~ label" con su propio círculo vía ::before/::after,
   y le fuerza padding-left, line-height y color (texto casi negro) — con
   más especificidad que nuestras reglas de abajo (selector de atributo +
   combinador ~ pesa más que una sola clase). Sin este reset se ve un
   círculo suelto y el texto oscuro sobre las tarjetas oscuras. Los
   "!important" de color están en las reglas base y en :checked más abajo
   para que ambos estados ganen. line-height: el del template pasó a 18px —
   se fija el mismo valor acá (en vez de depender de qué building gane la
   cascada) para que no vuelva a desalinearse si el template cambia de nuevo. */
.pdde-role-option label::before, .pdde-role-option label::after,
.pdde-opcion label::before, .pdde-opcion label::after {
    content: none !important;
}
.pdde-role-option label, .pdde-opcion label {
    padding-left: 18px !important;
    line-height: 18px !important;
}

.pdde-role-option { position: relative; }
.pdde-role-option input {
    position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.pdde-role-option label {
    display: flex; align-items: center; gap: 14px;
    /* Alto fijo (no min-height): con 2 columnas el texto más largo puede
       llegar a 3 líneas — todas las tarjetas deben medir igual, no solo
       las de su misma fila. */
    height: 100%;
    min-height: 92px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,.22);
    /* Mismo azul oscuro que los campos de escala/comentario, al 80% para
       que se note algo de la ilustración del fondo sin perder contraste. */
    background: rgba(21,20,60,.8);
    font-size: 14.5px;
    color: rgba(255,255,255,.9) !important;
    cursor: pointer;
    transition: all .2s ease;
}
.pdde-role-numero {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    font-family: var(--pdde-font-num);
    font-weight: 700;
    font-size: 13px;
    color: rgba(255,255,255,.85) !important;
}
.pdde-role-option input:checked + label {
    background: var(--pdde-naranja-texto);
    border-color: var(--pdde-naranja-texto);
    color: var(--pdde-blanco) !important;
    font-weight: 600;
}
.pdde-role-option input:checked + label .pdde-role-numero {
    background: rgba(255,255,255,.25);
    color: var(--pdde-blanco) !important;
}
.pdde-role-option input:focus-visible + label { outline: 2px solid #fff; outline-offset: 2px; }

/* Varias preguntas activas en un mismo formulario: cada una es un bloque
   (fieldset sin el marco del navegador) separado del siguiente por una línea. */
.pdde-pregunta-bloque {
    border: 0;
    margin: 0 0 40px;
    padding: 0 0 8px;
    min-width: 0;
}
.pdde-pregunta-bloque + .pdde-pregunta-bloque {
    border-top: 1px solid rgba(255,255,255,.18);
    padding-top: 36px;
}
.pdde-pregunta-numero {
    display: block;
    margin-bottom: 14px;
    font-family: var(--pdde-font-label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffb088;
}
.pdde-preguntas-ya-respondidas {
    margin: 0 0 24px;
    font-size: 14px;
    color: rgba(255,255,255,.75);
}
.pdde-pregunta-dato {
    display: inline-block;
    background: rgba(255,255,255,.08);
    border-left: 3px solid var(--pdde-naranja-600);
    padding: 14px 20px;
    border-radius: 0 12px 12px 0;
    font-family: var(--pdde-font-destacado);
    font-style: italic;
    font-weight: 600;
    font-size: 15.5px;
    color: rgba(255,255,255,.85);
    margin-bottom: 22px;
}
.pdde-pregunta-texto {
    font-family: var(--pdde-font-label);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 30px);
    color: var(--pdde-blanco);
    margin-bottom: 28px;
    max-width: 680px;
}
.pdde-opciones { display: grid; gap: 12px; margin-bottom: 28px; }
/* Fijo en 5 columnas siempre (no auto-fit): son 5 dígitos sueltos, no
   necesitan un ancho mínimo grande, y así nunca se parte en 4+1 con un
   hueco vacío como pasaba con la grilla de ejes en pdde.php. */
.pdde-opciones.pdde-opciones-escala { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pdde-opcion { position: relative; }
.pdde-opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pdde-opcion label {
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    min-height: 58px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,.22);
    /* Azul oscuro al 80% (antes rgba blanco al 4%, demasiado
       transparente sobre el fondo ilustrado): contrasta y se lee. */
    background: rgba(21,20,60,.8);
    font-family: var(--pdde-font-label);
    font-weight: 600;
    color: var(--pdde-blanco) !important;
    cursor: pointer;
    transition: all .2s ease;
}
/* Con 5 columnas fijas, el padding horizontal generoso pensado para texto
   largo (18px) deja casi sin espacio al dígito en pantallas angostas. */
.pdde-opciones-escala .pdde-opcion label {
    font-family: var(--pdde-font-num);
    font-size: 20px;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.pdde-opcion input:checked + label {
    background: var(--pdde-blanco);
    border-color: var(--pdde-blanco);
    color: var(--pdde-morado-900) !important;
}
.pdde-opcion input:focus-visible + label { outline: 2px solid #fff; outline-offset: 2px; }

.pdde-campo-abierto { margin-bottom: 28px; }
.pdde-campo-abierto label {
    display: block; font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 8px;
}
.pdde-campo-abierto textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,.22);
    /* Azul oscuro al 80% para contrastar sobre el fondo ilustrado
       (antes rgba blanco al 6%, se perdía contra la imagen). */
    background: rgba(21,20,60,.8);
    color: var(--pdde-blanco);
    padding: 14px 16px;
    font-size: 15px;
    font-family: inherit;
}
.pdde-campo-abierto textarea::placeholder { color: rgba(255,255,255,.45); }
.pdde-campo-abierto textarea:focus { outline: 2px solid var(--pdde-naranja-600); background: rgba(21,20,60,.8); border-color: rgba(255,255,255,.4); }

.pdde-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.pdde-alert {
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 14.5px;
    margin-bottom: 24px;
}
.pdde-alert-error { background: rgba(233,101,58,.16); border: 1px solid rgba(233,101,58,.4); color: #ffd6c4; }
.pdde-alert-success { background: rgba(47,177,112,.16); border: 1px solid rgba(47,177,112,.45); color: #bdf0d5; }

.pdde-confirmacion {
    background: var(--pdde-morado-900);
    border-radius: 28px;
    padding: 44px 48px;
    color: var(--pdde-blanco);
    text-align: center;
    margin-bottom: 40px;
    scroll-margin-top: 120px;
}
.pdde-confirmacion h3 { font-family: var(--pdde-font-label); font-weight: 700; color: var(--pdde-blanco); margin-bottom: 12px; }
.pdde-confirmacion p { color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto 22px; }

/* ---------- Así avanza ---------- */
.pdde-avanza { padding: 100px 0; background: var(--pdde-crema); }
.pdde-avanza-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
/* Sin esto, una columna de grid se queda con el ancho mínimo de su
   contenido (min-width:auto por defecto) en vez de respetar su fracción
   (.85fr) — con el carrusel de resultados, el texto largo de una pregunta
   empujaba esa columna más ancha de lo que le tocaba y angostaba la línea
   de tiempo. min-width:0 deja que el grid la achique a su fracción real. */
.pdde-avanza-grid > * { min-width: 0; }

.pdde-timeline { position: relative; list-style: none; margin: 0; padding-left: 34px; }
.pdde-timeline::before {
    content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px;
    background: var(--pdde-gris-300);
}
/* app.css trae "ol li { margin: 10px 0 }" de fábrica; se resetea para que
   el espaciado entre hitos lo controle solo nuestro padding-bottom. */
.pdde-hito { position: relative; margin: 0; padding-bottom: 30px; }
.pdde-hito:last-child { padding-bottom: 0; }
.pdde-hito::before {
    content: ''; position: absolute; left: -34px; top: 4px;
    width: 18px; height: 18px; border-radius: 50%;
    border: 4px solid var(--pdde-crema);
    background: var(--pdde-gris-300);
}
.pdde-hito.completado::before { background: var(--pdde-verde); }
.pdde-hito.en_curso::before { background: var(--pdde-naranja-600); box-shadow: 0 0 0 4px rgba(233,101,58,.2); }
.pdde-hito-fecha {
    font-family: var(--pdde-font-label); font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--pdde-naranja-700);
    margin-bottom: 4px;
}
.pdde-hito-titulo { font-family: var(--pdde-font-label); font-weight: 700; color: var(--pdde-morado-900); font-size: 17px; margin-bottom: 4px; }
/* Título + estado en la misma línea (antes el badge quedaba suelto al
   final de la tarjeta, lejos del título). */
.pdde-hito-titulo-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.pdde-hito-titulo-fila .pdde-hito-titulo { margin-bottom: 0; }
.pdde-hito-desc { color: var(--pdde-gris-600); font-size: 14.5px; line-height: 1.6; margin-top: 4px; }
/* Viene de un editor de texto enriquecido (Quill, CTOSMASTER > Hitos):
   suele ser un solo <p>, así que se le quita el margen por defecto del
   navegador para que no meta espacio extra en esta tarjeta compacta; con
   varios párrafos, sí se separan entre sí. */
.pdde-hito-desc p { margin: 0 0 8px; }
.pdde-hito-desc p:last-child { margin-bottom: 0; }
/* Botón opcional por hito (migración 023): antes era un link de texto
   plano, ahora un botón píldora con fondo, para distinguirlo del resto
   del contenido de la tarjeta. */
.pdde-hito-enlace-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px; padding: 8px 18px; border-radius: 999px;
    background: var(--pdde-verde-texto); color: var(--pdde-blanco);
    font-family: var(--pdde-font-label); font-weight: 700; font-size: 13px;
    text-decoration: none; transition: background .2s ease, transform .2s ease;
}
.pdde-hito-enlace-btn::after { content: '→'; }
.pdde-hito-enlace-btn:hover { background: var(--pdde-verde-900); color: var(--pdde-blanco); }
.pdde-hito-badge {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.pdde-hito.completado .pdde-hito-badge,
.pdde-hito-h.completado .pdde-hito-badge { background: rgba(47,177,112,.15); color: #1c7c4d; }
.pdde-hito.en_curso .pdde-hito-badge,
.pdde-hito-h.en_curso .pdde-hito-badge { background: rgba(233,101,58,.15); color: var(--pdde-naranja-700); }
.pdde-hito.pendiente .pdde-hito-badge,
.pdde-hito-h.pendiente .pdde-hito-badge { background: rgba(99,95,116,.12); color: var(--pdde-gris-600); }

/* ---------- Timeline horizontal (resumen del Home) ---------- */
/* Con solo 4 hitos (2 completados + 2 próximos) un timeline horizontal
   se lee más rápido que la versión vertical completa, que sigue viviendo
   en asi-avanza.php con más detalle. En pantallas angostas hace scroll
   horizontal en vez de amontonarse en varias filas (sería solo 4 tarjetas,
   scroll es más legible que envolver el texto). */
.pdde-timeline-h-wrap { overflow-x: auto; padding-bottom: 4px; }
.pdde-timeline-h {
    list-style: none; margin: 0; padding: 26px 0 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 28px;
    position: relative;
    min-width: 700px;
}
.pdde-timeline-h::before {
    content: '';
    position: absolute; top: 5px; left: 0; right: 0;
    height: 2px;
    background: var(--pdde-gris-300);
}
.pdde-hito-h { position: relative; padding-top: 22px; padding-right: 8px; }
.pdde-hito-h::before {
    content: '';
    position: absolute; top: -3px; left: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--pdde-crema);
    border: 3px solid var(--pdde-gris-300);
}
.pdde-hito-h.completado::before { border-color: var(--pdde-verde); }
.pdde-hito-h.en_curso::before { border-color: var(--pdde-naranja-600); }
.pdde-hito-h .pdde-hito-titulo { font-size: 15px; }

/* ---------- Carrusel horizontal de hitos (resumen del Home) ---------- */
/* Antes era un <ol> con overflow-x:auto: dejaba una barra de scroll "tipo
   iframe" dentro de la tarjeta. Ahora cada fecha es su propia tarjeta y se
   navega con las flechas; el scroll nativo queda oculto pero sigue
   disponible con gesto de swipe en móvil. Ver initAvanzaCarrusel() en JS. */
.pdde-avanza-carrusel { position: relative; margin-top: 26px; padding-bottom: 54px; }
.pdde-avanza-track {
    list-style: none; margin: 0; padding: 22px 2px 8px;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pdde-avanza-track::-webkit-scrollbar { display: none; }
.pdde-avanza-hito {
    scroll-snap-align: start;
    flex: 0 0 clamp(230px, 42%, 280px);
    position: relative;
    background: var(--pdde-blanco);
    border: 1px solid var(--pdde-gris-300);
    border-radius: 16px;
    padding: 20px 18px 18px;
    box-shadow: 0 6px 18px rgba(21,20,60,.06);
}
.pdde-avanza-hito-punto {
    position: absolute; top: -7px; left: 20px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--pdde-blanco);
    border: 3px solid var(--pdde-gris-300);
}
.pdde-avanza-hito.completado .pdde-avanza-hito-punto { border-color: var(--pdde-verde); }
.pdde-avanza-hito.en_curso .pdde-avanza-hito-punto { border-color: var(--pdde-naranja-600); box-shadow: 0 0 0 4px rgba(233,101,58,.18); }
.pdde-avanza-hito .pdde-hito-titulo { font-size: 15px; }
.pdde-avanza-hito .pdde-hito-badge { margin-top: 10px; }

/* Tarjetas de "Activaciones ciudadanas" (/lo-que-viene): mismo carrusel
   que los hitos, sin el punto de la línea de tiempo. */
.pdde-activacion-card { flex-basis: clamp(240px, 46%, 300px); padding-top: 20px; }
.pdde-activacion-datos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pdde-activacion-datos li { font-size: 13.5px; color: var(--pdde-gris-600); line-height: 1.5; }
.pdde-activacion-datos strong { color: var(--pdde-morado-900); }

/* Flechas abajo a la derecha, en la franja que reserva el padding-bottom
   del carrusel: así no se montan sobre la fecha/título de las tarjetas. */
.pdde-avanza-nav {
    position: absolute; bottom: 0;
    z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--pdde-gris-300);
    background: var(--pdde-blanco);
    color: var(--pdde-morado-900);
    font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(21,20,60,.12);
    transition: opacity .2s ease, background .2s ease;
}
.pdde-avanza-nav:hover { background: var(--pdde-crema); }
.pdde-avanza-nav-prev { right: 46px; }
.pdde-avanza-nav-next { right: 0; }
.pdde-avanza-nav[disabled] { opacity: .35; pointer-events: none; }
@media (max-width: 768px) {
    .pdde-avanza-hito { flex-basis: 80%; }
}

.pdde-resultados-card, .pdde-trazabilidad-card {
    background: var(--pdde-blanco);
    border-radius: var(--pdde-radius);
    padding: 32px;
    margin-bottom: 24px;
    /* Sin sombra a propósito: .pdde-resultados-carrusel tiene
       overflow:hidden (necesario para el slide horizontal) y le recortaba
       la sombra por abajo y los lados — se veía "cortada" en vez de
       pareja. Sin sombra, hace falta este borde para separar el blanco
       de la tarjeta del crema/amarillo del fondo de la sección. */
    border: 1px solid var(--pdde-gris-300);
}
.pdde-resultados-titulo { color: var(--pdde-naranja-texto); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.pdde-resultados-pregunta { color: var(--pdde-morado-900); font-weight: 700; font-size: 17px; margin-bottom: 22px; }
.pdde-barra { margin-bottom: 16px; }
.pdde-barra-top { display: flex; justify-content: space-between; font-size: 14px; color: var(--pdde-gris-900); margin-bottom: 6px; }
.pdde-barra-top strong { font-family: var(--pdde-font-num); color: var(--pdde-morado-900); }
.pdde-barra-track { background: var(--pdde-gris-300); border-radius: 999px; height: 10px; overflow: hidden; }
.pdde-barra-fill {
    height: 100%; border-radius: 999px;
    width: 0;
    background: var(--pdde-naranja-600); /* color plano: el Brandbook no usa degradados */
    transition: width 1.1s cubic-bezier(.23,1,.32,1);
}
.pdde-resultados-nota { color: var(--pdde-gris-600); font-size: 12.5px; margin-top: 6px; }

/* Carrusel de resultados preliminares (un slide por pregunta activa).
   Un slide a la vez, ancho completo — a diferencia del carrusel de "Así
   avanza el Plan" del home, que muestra varias tarjetas chicas juntas. */
.pdde-resultados-carrusel { position: relative; overflow: hidden; }
.pdde-resultados-track {
    display: flex;
    align-items: flex-start;
    transition: transform .4s ease, height .3s ease;
}
.pdde-resultados-slide { flex: 0 0 100%; min-width: 0; }
.pdde-resultados-slide .pdde-resultados-card { margin-bottom: 0; }
.pdde-resultados-nav-wrap {
    display: flex; align-items: center; justify-content: center;
    gap: 16px;
    margin: 18px 0 24px;
}
.pdde-resultados-nav {
    flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--pdde-gris-300);
    background: var(--pdde-blanco);
    color: var(--pdde-morado-900);
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}
.pdde-resultados-nav:hover { background: var(--pdde-crema); }
.pdde-resultados-puntos { display: flex; align-items: center; gap: 8px; }
.pdde-resultados-punto {
    width: 8px; height: 8px; border-radius: 50%;
    border: 0; padding: 0;
    background: var(--pdde-gris-300);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.pdde-resultados-punto.activo { background: var(--pdde-naranja-600); transform: scale(1.3); }

.pdde-trazabilidad-card {
    position: relative;
    background-color: var(--pdde-morado-900);
    background-image: url('../images/logo-pde/patron-verde-hero.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 340px;
    color: var(--pdde-blanco);
    overflow: hidden;
}
.pdde-trazabilidad-card h4 { font-family: var(--pdde-font-label); font-weight: 700; color: var(--pdde-blanco); margin-bottom: 10px; }
.pdde-trazabilidad-card p { color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 1.6; margin-bottom: 0; }

/* Mascota de marca sobrepuesta, mismo tratamiento que .pdde-participa-gato
   del home (Santa Librada = naranja, "el elemento rojo"). El wrap no tiene
   overflow, así que la mascota sí puede sobresalir del borde de la tarjeta
   (la tarjeta en sí conserva su overflow:hidden para el patrón interno). */
.pdde-trazabilidad-card-wrap { position: relative; }
/* Esta tarjeta es angosta (columna .85fr al lado de la de resultados, no
   el ancho completo del contenedor como .pdde-participa-card del home) —
   el clamp() copiado de ahí (hasta 210px) quedaba gigante y tapaba el
   texto. Reservamos espacio abajo con padding-bottom y la mascota va
   bastante más chica. */
.pdde-trazabilidad-card-wrap .pdde-trazabilidad-card { padding-bottom: 110px; }
.pdde-trazabilidad-mascota {
    position: absolute;
    right: 10px;
    bottom: -6px;
    height: clamp(70px, 11vw, 100px);
    width: auto;
    z-index: 2;
    filter: drop-shadow(0 10px 18px rgba(21,20,60,.4));
    animation: pdde-flotar 4s ease-in-out infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .pdde-trazabilidad-mascota { animation: none; }
}
@media (max-width: 640px) {
    .pdde-trazabilidad-card-wrap .pdde-trazabilidad-card { padding-bottom: 130px; }
    .pdde-trazabilidad-mascota { height: clamp(70px, 22vw, 100px); right: 12px; bottom: -6px; }
}

/* ---------- PDDE / ejes ---------- */
.pdde-sobre { padding: 100px 0; background: var(--pdde-blanco); }
.pdde-ejes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-bottom: 26px; }
.pdde-eje-card {
    border: 1.5px solid var(--pdde-gris-300);
    border-radius: var(--pdde-radius);
    padding: 28px 24px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pdde-eje-card:hover { transform: translateY(-4px); box-shadow: var(--pdde-shadow); border-color: transparent; }
.pdde-eje-numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    font-family: var(--pdde-font-num); font-weight: 700; font-size: 17px;
    color: var(--pdde-blanco);
    background: var(--pdde-morado-900);
    margin-bottom: 16px;
}
/* Un color de marca distinto por eje, en vez de repetir siempre el mismo
   naranja — los 4 colores del Brandbook (pág. 11), no solo el morado. */
.pdde-eje-numero.pdde-eje-naranja { background: var(--pdde-naranja-600); }
.pdde-eje-numero.pdde-eje-verde { background: var(--pdde-verde); color: var(--pdde-morado-900); }
.pdde-eje-numero.pdde-eje-amarillo { background: var(--pdde-amarillo); color: var(--pdde-morado-900); }
.pdde-eje-titulo { font-family: var(--pdde-font-label); font-weight: 700; color: var(--pdde-morado-900); font-size: 17px; margin-bottom: 10px; }
.pdde-eje-desc { color: var(--pdde-gris-600); font-size: 14.5px; line-height: 1.65; }

/* ---------- Gobernanza del Plan ("¿Cómo se toman las decisiones?", home) ---------- */
.pdde-gobernanza-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.pdde-gobernanza-card {
    position: relative;
    overflow: hidden;
    background: var(--pdde-blanco);
    border-radius: var(--pdde-radius);
    /* +30px de padding-top para el patrón de arriba (ver ::before) */
    padding: 52px 22px 24px;
    /* Borde inferior a pedido, un color distinto por tarjeta — los 4
       colores de marca, y la 5ta vuelve a empezar el ciclo. */
    border-bottom: 4px solid var(--pdde-naranja-600);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Patrón de 30px arriba, en el mismo color que el borde de abajo de cada
   tarjeta (los franja-*.png ya son tono-sobre-tono de un solo color). */
.pdde-gobernanza-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 30px;
    background-image: url('../images/patrones-franja/franja-naranja.png');
    background-repeat: repeat;
    background-size: 90px auto;
}
.pdde-gobernanza-card:nth-child(2) { border-bottom-color: var(--pdde-verde); }
.pdde-gobernanza-card:nth-child(2)::before { background-image: url('../images/patrones-franja/franja-verde.png'); }
.pdde-gobernanza-card:nth-child(3) { border-bottom-color: var(--pdde-amarillo); }
.pdde-gobernanza-card:nth-child(3)::before { background-image: url('../images/patrones-franja/franja-amarillo.png'); }
.pdde-gobernanza-card:nth-child(4) { border-bottom-color: var(--pdde-verde); }
.pdde-gobernanza-card:nth-child(4)::before { background-image: url('../images/patrones-franja/franja-verde.png'); }
.pdde-gobernanza-card:nth-child(5) { border-bottom-color: var(--pdde-naranja-600); }
.pdde-gobernanza-card:hover { transform: translateY(-4px); box-shadow: var(--pdde-shadow); }
.pdde-gobernanza-card-titulo {
    font-family: var(--pdde-font-label); font-weight: 700; color: var(--pdde-morado-900);
    font-size: 15.5px; margin-bottom: 8px;
}
.pdde-gobernanza-card-desc { color: var(--pdde-gris-600); font-size: 13.5px; line-height: 1.6; }

/* Card "génesis constructivo": ocupa las 3 columnas que quedan libres junto
   al quinto eje (5 ejes en una grilla de 4 columnas dejan un hueco). En vez
   de una tarjeta vacía, cuenta de dónde sale el símbolo del Plan. */
.pdde-eje-relato {
    grid-column: span 3;
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--pdde-crema);
    /* Un borde real (no transparente): crema sobre blanco es una
       diferencia demasiado sutil para leerse como una tarjeta a
       propósito si no tiene un límite claro. */
    border-color: rgba(233, 101, 58, 0.3);
}
/* Sola, sin la grilla de ejes al lado: centrada, con un ancho de lectura
   cómodo en vez de estirarse a los 1200px del contenedor. */
.pdde-eje-relato-solo { max-width: 760px; margin: 0 auto; }
.pdde-eje-relato-icono { width: 84px; height: 84px; flex: none; }
.pdde-eje-relato-titulo { font-family: var(--pdde-font-label); font-weight: 700; color: var(--pdde-morado-900); font-size: 17px; margin-bottom: 8px; }
.pdde-eje-relato-texto { color: var(--pdde-crema-texto); font-size: 14.5px; line-height: 1.65; }
.pdde-eje-relato-texto strong { color: var(--pdde-morado-900); }

.pdde-nota-validacion {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--pdde-crema); border-radius: 14px; padding: 18px 22px;
    color: var(--pdde-crema-texto); font-size: 13.5px; line-height: 1.6;
}
/* Cita de fuente bajo los ejes estratégicos (comentario pág. 13 del doc de
   copies: "si se pone esta información, se debe decir de dónde sale"). */
.pdde-fuente-texto { margin-top: 10px; font-size: 12.5px; color: var(--pdde-gris-600); }

/* ---------- Espacio reservado para visor de PDF (pendiente de montar) ---------- */
.pdde-visor-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; aspect-ratio: 16 / 9; width: 100%;
    border: 1.5px dashed var(--pdde-gris-300); border-radius: var(--pdde-radius);
    background: var(--pdde-crema); color: var(--pdde-gris-600);
    font-size: 14px; margin: 28px 0;
}
.pdde-visor-placeholder svg { width: 32px; height: 32px; color: var(--pdde-naranja-texto); }

/* ---------- Visor de PDF embebido (mismo tamaño que el placeholder, ya con archivo real) ---------- */
.pdde-visor-pdf {
    position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 28px 0;
    border: 1.5px solid var(--pdde-gris-300); border-radius: var(--pdde-radius);
    overflow: hidden; background: var(--pdde-gris-300);
}
.pdde-visor-pdf iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdde-visor-pdf-enlace { display: block; margin: -14px 0 28px; font-size: 13.5px; color: var(--pdde-gris-600); }
.pdde-visor-pdf-enlace a { color: var(--pdde-naranja-texto); }

/* ---------- Noticias ---------- */
.pdde-noticias { padding: 100px 0; background: var(--pdde-crema); }
.pdde-noticias-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.pdde-noticia-card {
    background: var(--pdde-blanco); border-radius: var(--pdde-radius); overflow: hidden;
    box-shadow: var(--pdde-shadow); display: flex; flex-direction: column;
}
.pdde-noticia-card-link { text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.pdde-noticia-card-link:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(36,17,70,.18); color: inherit; }
/* La imagen va de fondo (cover), no como <img>, para que todas las tarjetas
   midan siempre lo mismo sin importar la proporción de la foto original.
   Si la noticia no tiene imagen, queda el color de su categoría (o el
   morado institucional) como fondo plano — nunca un hueco vacío. */
.pdde-noticia-card-imagen {
    position: relative; height: 170px; flex-shrink: 0;
    background-color: var(--pdde-morado-900);
    background-size: cover; background-position: center;
}
.pdde-noticia-card-imagen .pdde-noticia-badge { position: absolute; top: 14px; left: 14px; }
.pdde-noticia-card-body { padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.pdde-noticia-badge {
    align-self: flex-start; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; color: #fff;
}
.pdde-noticia-titulo { font-family: var(--pdde-font-label); font-weight: 700; color: var(--pdde-morado-900); font-size: 18px; line-height: 1.35; }
.pdde-noticia-cuerpo { color: var(--pdde-gris-600); font-size: 14.5px; line-height: 1.65; flex-grow: 1; }
.pdde-noticia-fecha { font-size: 12.5px; color: var(--pdde-gris-600); font-weight: 600; }
/* ---------- Imagen de portada en el detalle (sí conserva su proporción real) ---------- */
.pdde-noticia-imagen-detalle {
    width: 100%; height: auto; display: block;
    border-radius: var(--pdde-radius); margin: 32px 0 0;
}
.pdde-empty-state { text-align: center; color: var(--pdde-gris-600); padding: 40px 20px; }

/* ---------- Video de YouTube embebido en el detalle de noticia ---------- */
.pdde-noticia-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    margin: 0 0 40px; border-radius: var(--pdde-radius); overflow: hidden;
    background: var(--pdde-gris-300);
}
.pdde-noticia-video iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Contenedor angosto reutilizable: detalle de noticia, FAQ, diccionario,
   privacidad, términos — cualquier página de lectura larga en una columna. */
.pdde-container-angosto { max-width: 760px; }
.pdde-contenido-simple { padding: 64px 0 100px; background: var(--pdde-blanco); }

/* ---------- "Lo que viene" (próxima activación ciudadana) ---------- */
.pdde-evento-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 48px;
    align-items: start;
}
.pdde-evento-flyer {
    width: 100%;
    border-radius: var(--pdde-radius);
    box-shadow: var(--pdde-shadow);
}
.pdde-evento-info p { color: var(--pdde-gris-900); font-size: 16px; line-height: 1.7; margin: 0 0 18px; }
.pdde-evento-datos {
    list-style: none; margin: 0 0 28px; padding: 20px 24px;
    background: var(--pdde-crema);
    border-radius: var(--pdde-radius);
    display: flex; flex-direction: column; gap: 10px;
}
.pdde-evento-datos li { font-size: 15px; color: var(--pdde-gris-900); line-height: 1.5; }
.pdde-evento-datos strong { color: var(--pdde-morado-900); }
.pdde-evento-contacto { font-size: 14.5px; color: var(--pdde-gris-600); margin: 20px 0 0 !important; }
@media (max-width: 768px) {
    .pdde-evento-grid { grid-template-columns: 1fr; gap: 28px; }
    .pdde-evento-flyer { max-width: 420px; margin: 0 auto; }
}

/* ---------- Contacto / PQR ---------- */
.pdde-contacto-correo {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--pdde-crema);
    border-radius: var(--pdde-radius);
    padding: 24px 28px;
    margin-bottom: 40px;
}
.pdde-contacto-correo strong { font-family: var(--pdde-font-label); color: var(--pdde-morado-900); font-size: 14px; }
.pdde-contacto-correo a { color: var(--pdde-naranja-texto); font-weight: 700; font-size: 18px; text-decoration: none; }
.pdde-contacto-correo a:hover { text-decoration: underline; }

.pdde-form-pqr { display: flex; flex-direction: column; gap: 20px; }
.pdde-form-fila { display: flex; gap: 20px; }
.pdde-form-fila-2 .pdde-form-campo { flex: 1; }
.pdde-form-campo { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pdde-form-campo label { font-family: var(--pdde-font-label); font-weight: 600; font-size: 14px; color: var(--pdde-gris-900); }
.pdde-form-campo input,
.pdde-form-campo select,
.pdde-form-campo textarea {
    border: 1.5px solid var(--pdde-gris-300);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--pdde-gris-900);
    background: var(--pdde-blanco);
}
.pdde-form-campo textarea { resize: vertical; min-height: 130px; }
.pdde-form-campo input:focus,
.pdde-form-campo select:focus,
.pdde-form-campo textarea:focus {
    outline: 2px solid var(--pdde-naranja-600);
    outline-offset: 1px;
    border-color: var(--pdde-naranja-600);
}
@media (max-width: 576px) {
    .pdde-form-fila-2 { flex-direction: column; }
}

.pdde-noticia-articulo { color: var(--pdde-gris-900); font-size: 16.5px; line-height: 1.8; padding: 56px 0; }
.pdde-noticia-articulo h2, .pdde-noticia-articulo h3 { font-family: var(--pdde-font-label); color: var(--pdde-morado-900); margin: 32px 0 14px; }
.pdde-noticia-articulo p { margin-bottom: 18px; }
.pdde-noticia-articulo ul, .pdde-noticia-articulo ol { margin-bottom: 18px; padding-left: 24px; }
.pdde-noticia-articulo blockquote {
    border-left: 3px solid var(--pdde-naranja-600); padding: 4px 20px; margin: 24px 0;
    color: var(--pdde-gris-600); font-family: var(--pdde-font-destacado); font-style: italic; font-size: 18px;
}
.pdde-noticia-articulo a { color: var(--pdde-naranja-texto); }

/* ---------- Galería de la noticia (cuadrícula + modal, JS en plandecenal.js) ---------- */
.pdde-galeria { position: relative; margin: 0 0 40px; }
.pdde-galeria h2 { font-family: var(--pdde-font-label); color: var(--pdde-morado-900); margin: 0 0 16px; }
/* 3 columnas en escritorio, 2 en móvil (ver media query abajo). */
.pdde-galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.pdde-galeria-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--pdde-gris-300);
}
.pdde-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.pdde-galeria-item:hover img { transform: scale(1.05); }
@media (max-width: 640px) {
    .pdde-galeria-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Modal: una foto grande por vez, con flechas y contador. Oculto por
   defecto con [hidden] — initGalerias() lo muestra al hacer clic en
   cualquier foto de la cuadrícula de arriba. */
.pdde-galeria-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(21,20,60,.92);
    display: flex; align-items: center; justify-content: center;
}
.pdde-galeria-modal-img {
    max-width: min(90vw, 1100px);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 8px;
}
.pdde-galeria-modal-cerrar {
    position: absolute; top: 18px; right: 18px;
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.pdde-galeria-modal-cerrar:hover { background: rgba(255,255,255,.22); }
.pdde-galeria-modal-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.pdde-galeria-modal-flecha:hover { background: rgba(255,255,255,.22); }
.pdde-galeria-modal-anterior { left: 16px; }
.pdde-galeria-modal-siguiente { right: 16px; }
.pdde-galeria-modal-contador {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.75); font-size: 13px; font-family: var(--pdde-font-num);
}
@media (max-width: 640px) {
    .pdde-galeria-modal-flecha { width: 38px; height: 38px; font-size: 22px; }
    .pdde-galeria-modal-anterior { left: 6px; }
    .pdde-galeria-modal-siguiente { right: 6px; }
}

/* ---------- Repositorio ---------- */
.pdde-repositorio { padding: 100px 0; background: var(--pdde-blanco); }
.pdde-repo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.pdde-repo-bloque { border: 1.5px solid var(--pdde-gris-300); border-radius: var(--pdde-radius); padding: 26px; }
.pdde-repo-bloque h4 { font-family: var(--pdde-font-label); font-weight: 700; color: var(--pdde-morado-900); margin-bottom: 16px; font-size: 16px; }
.pdde-repo-doc { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--pdde-gris-300); }
.pdde-repo-doc:first-of-type { border-top: none; padding-top: 0; }
.pdde-repo-doc-info { min-width: 0; }
.pdde-repo-doc-info strong { display: block; font-size: 14px; color: var(--pdde-gris-900); margin-bottom: 2px; }
.pdde-repo-doc-info span { font-size: 12px; color: var(--pdde-gris-600); }
.pdde-repo-doc-desc { font-size: 13.5px; color: var(--pdde-gris-600); line-height: 1.55; margin: 6px 0 0; max-width: 520px; }
.pdde-repo-doc a {
    flex: none; font-size: 12px; font-weight: 700; color: var(--pdde-naranja-texto); text-decoration: none;
    border: 1.5px solid var(--pdde-naranja-texto); border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
.pdde-repo-doc a:hover { background: var(--pdde-naranja-texto); color: #fff; }
.pdde-repo-vacio {
    grid-column: 1 / -1;
    text-align: center; padding: 50px 24px; border-radius: var(--pdde-radius);
    background: var(--pdde-crema); color: var(--pdde-crema-texto);
}

/* ---------- Ficha de un documento de referencia (detalle, migración 027) ---------- */
.pdde-ficha { border: 1.5px solid var(--pdde-gris-300); border-radius: var(--pdde-radius); overflow: hidden; margin-bottom: 32px; }
.pdde-ficha-fila { display: grid; grid-template-columns: 220px 1fr; gap: 4px 24px; padding: 14px 24px; border-top: 1px solid var(--pdde-gris-300); }
.pdde-ficha-fila:first-child { border-top: none; }
.pdde-ficha-fila:nth-child(even) { background: var(--pdde-crema); }
.pdde-ficha-etiqueta { font-weight: 700; color: var(--pdde-morado-900); font-size: 13.5px; }
.pdde-ficha-valor { color: var(--pdde-gris-900); font-size: 14.5px; line-height: 1.6; }
.pdde-ficha-pendiente { color: var(--pdde-gris-600); font-style: italic; }
.pdde-ficha-cita {
    border-left: 3px solid var(--pdde-naranja-600); padding: 4px 20px; margin: 0 0 32px;
    color: var(--pdde-gris-600); font-family: var(--pdde-font-destacado); font-style: italic; font-size: 15px; line-height: 1.6;
}
@media (max-width: 640px) {
    .pdde-ficha-fila { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Franja de patrón (antes del footer, en todas las páginas) ---------- */
/* Un color corporativo por sección (mismo criterio que .pdde-pageheader.pdde-acento-*),
   con el patrón geométrico del Brandbook tono sobre tono — mismo criterio que el
   resto del sitio: nunca el color puro sobre sí mismo sin variación, para que
   la textura se note sin gritar. */
/* Franja angosta bajo las estadísticas del hero (home) — mismos assets
   de franja-*.png que la franja de cierre, pero más baja y solo en esta
   transición puntual. */
.pdde-hero-franja {
    width: 100%;
    height: 78px; /* antes 28px, +50px a pedido */
    background-repeat: repeat;
    background-size: 120px auto;
}
/* Franja entre las estadísticas y la barra de pulso (home). El nombre de
   la clase quedó "verde" de una versión anterior; ahora es fondo azul
   (mismo morado del footer) + patrón patron-red.png. */
.pdde-hero-franja-verde {
    background-color: var(--pdde-morado-900);
    background-image: url('../images/patrones-franja/patron-red.png');
    /* Mosaico a mitad de tamaño (antes 200px): la franja mide 78px de alto
       y a 200px se recortaba a menos de medio motivo. */
    background-size: 100px auto;
    background-position: center;
}
.pdde-hero-franja-naranja { background-image: url('../images/patrones-franja/franja-naranja.png'); }
.pdde-hero-franja-amarillo-12 {
    background-image: url('../images/patrones-franja/patron-amarillo-12.png');
    background-size: 130px auto;
}
/* Variante con degradado: arranca transparente (se funde con la sección
   de arriba) y se revela hasta el patrón completo abajo — más alta que
   la franja plana para que el degradado tenga espacio para leerse. */
.pdde-hero-franja-degradado {
    height: 90px;
    background-size: 160px auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 75%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 75%);
}

.pdde-franja-patron {
    width: 100%;
    height: 80px;
    background-repeat: repeat;
    background-size: 220px auto;
}
.pdde-franja-naranja  { background-image: url('../images/patrones-franja/franja-naranja.png'); }
.pdde-franja-verde    { background-image: url('../images/patrones-franja/franja-verde.png'); }
.pdde-franja-amarillo { background-image: url('../images/patrones-franja/franja-amarillo.png'); }
.pdde-franja-morado   { background-image: url('../images/patrones-franja/franja-morado.png'); }
/* Solo en el home: patrón nuevo en vez del franja-morado.png genérico. */
.pdde-franja-inicio   { background-color: var(--pdde-morado-900); background-image: url('../images/patrones-franja/patron-green.png'); background-size: 99px auto; }
/* /pdde: fondo azul del footer + patron-blue.png */
.pdde-franja-pdde     { background-color: var(--pdde-morado-900); background-image: url('../images/patrones-franja/patron-blue.png'); background-size: 99px auto; }
/* /participa: fondo azul del footer + patron-red.png */
.pdde-franja-participa { background-color: var(--pdde-morado-900); background-image: url('../images/patrones-franja/patron-red.png'); background-size: 99px auto; }
/* /asi-avanza: fondo azul del footer + patron-green.png */
.pdde-franja-asi-avanza { background-color: var(--pdde-morado-900); background-image: url('../images/patrones-franja/patron-green.png'); background-size: 99px auto; }
/* /noticias: fondo azul del footer + patron-yellow.png */
.pdde-franja-noticias { background-color: var(--pdde-morado-900); background-image: url('../images/patrones-franja/patron-yellow.png'); background-size: 99px auto; }

.pdde-footer { background: var(--pdde-morado-900); color: rgba(255,255,255,.85); padding: 90px 0 30px; }
.pdde-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr 0.9fr;
    gap: 40px;
    margin-bottom: 50px;
}
.pdde-footer h4 { font-family: var(--pdde-font-label); color: #fff; font-weight: 700; margin-bottom: 18px; font-size: 15px; }
.pdde-footer-logo { height: 40px; margin-bottom: 18px; }
.pdde-footer-brand p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.65); max-width: 300px; }

.pdde-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* app.css trae "ul li { margin: 10px 0; line-height: 1.73 }" de fábrica;
   sin este reset se suma a nuestro gap y el listado queda con espacios
   enormes entre ítems. */
.pdde-footer-links li { margin: 0; line-height: normal; }
.pdde-footer-links a { color: rgba(255,255,255,.7); font-size: 14px; text-decoration: none; }
.pdde-footer-links a:hover { color: #fff; text-decoration: underline; }

/* Cobranding institucional (Brandbook, pág. 17): el escudo de la Alcaldía
   y la Secretaría de Educación va en una placa blanca para mantener su
   legibilidad sobre el fondo morado del footer, en su propia columna. */
.pdde-footer-institucional img {
    height: auto; width: 100%; max-width: 160px;
    background: var(--pdde-blanco);
    border-radius: 10px;
    padding: 12px 16px;
}

/* Acordeón para páginas de contenido claras (faq.php, diccionario.php).
   Antes vivía en el footer oscuro; ahora el footer solo enlaza a estas
   páginas en vez de repetir todo el contenido. */
.pdde-accordion-item { border-bottom: 1px solid var(--pdde-gris-300); }
.pdde-accordion-btn {
    width: 100%; text-align: left; background: none; border: none; color: var(--pdde-morado-900);
    font-family: var(--pdde-font-label); font-weight: 600; font-size: 16px;
    padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer;
}
.pdde-accordion-btn::after { content: '+'; font-size: 20px; color: var(--pdde-naranja-texto); flex: none; transition: transform .2s; }
/* Diccionario vs FAQ: mismo componente, un color de marca distinto para
   diferenciar a simple vista cuál lista es cuál. */
.pdde-acento-verde .pdde-accordion-btn::after { color: var(--pdde-verde-texto); }
.pdde-accordion-item.open .pdde-accordion-btn::after { transform: rotate(45deg); }
.pdde-accordion-panel {
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
    font-size: 15px; line-height: 1.7; color: var(--pdde-gris-600);
}
.pdde-accordion-item.open .pdde-accordion-panel { padding-bottom: 18px; }

.pdde-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    font-size: 13px; color: rgba(255,255,255,.5);
}

/* ---------- Utilidades ---------- */
.sr-only-focusable:not(:focus) {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}
.pdde-skip-link {
    position: absolute; top: -60px; left: 12px; background: #fff; color: var(--pdde-morado-900);
    padding: 12px 18px; border-radius: 10px; z-index: 10000; font-weight: 700; text-decoration: none;
    transition: top .2s;
}
.pdde-skip-link:focus { top: 12px; }

@media (max-width: 991px) {
    .pdde-nav { display: none; }
    .pdde-hamburger { display: inline-flex; }
    /* El botón se muda a su propia franja debajo del header (ver
       .pdde-cta-movil): en esta fila ya no comparte espacio con el logo. */
    .pdde-btn-header { display: none; }
    .pdde-cta-movil {
        display: block;
        background: var(--pdde-blanco);
        padding: 12px 24px;
        border-bottom: 1px solid var(--pdde-gris-300);
    }
    .pdde-cta-movil .pdde-btn { display: flex; width: 100%; }
    .pdde-stats-grid { grid-template-columns: repeat(2, 1fr); }
    /* Con menos de 4 columnas en la grilla, "span 3" ya no tiene sentido */
    .pdde-eje-relato { grid-column: 1 / -1; flex-direction: column; text-align: center; }
    .pdde-avanza-grid { grid-template-columns: 1fr; }
    /* Navegación y Recursos comparten una sola fila en dos columnas;
       marca e institucional siguen a ancho completo. */
    .pdde-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
    .pdde-footer-brand,
    .pdde-footer-institucional { grid-column: 1 / -1; }
    .pdde-participa-card { padding: 32px 24px; }
    .pdde-confirmacion { padding: 32px 24px; }
}
@media (max-width: 576px) {
    .pdde-hero-visual { padding-top: 140px; }
    .pdde-stats-grid { grid-template-columns: 1fr 1fr; }
    .pdde-roles { grid-template-columns: 1fr; }
}

/* Respeta prefers-reduced-motion en toda la página (README, Accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    .pdde-pulse-dot { animation: none; }
    .pdde-barra-fill { transition: none; }
    .pdde-eje-card:hover { transform: none; }
}

/* ============================================================
   Videos incrustados (iframe de YouTube/Vimeo) dentro de
   contenido enriquecido: cuerpo de noticias y respuestas de FAQ.
   El editor Quill los marca con .ql-video; sanitizeHtml() en el
   servidor solo deja pasar iframes de esos dos orígenes.
   ============================================================ */
.pdde-noticia-articulo iframe,
.pdde-accordion-panel iframe,
iframe.ql-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    margin: 24px 0;
    background: var(--pdde-gris-300);
}