/* ============================================================
   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;
}
@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. */
    .pdde-pageheader { padding-bottom: 150px; }
    .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; }
}

.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 {
    background-image: url('../images/noticias/back45.jpg');
    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-amarillo-12.png');
    background-repeat: repeat;
    background-size: 130px;
    opacity: .5;
    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%; }
}
/* "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. */
.pdde-hero-visual { position: relative; padding: 170px 0 0; }
/* Video de fondo (embebido oficial de YouTube, sin descargar el archivo)
   agrandado con la técnica estándar de "cover": ancho/alto por vw/vh con
   mínimos cruzados, centrado, recortado por el overflow:hidden del hero.
   pointer-events:none para que no capture clics/scroll — es puramente
   decorativo, por eso también aria-hidden. */
.pdde-hero-video {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.pdde-hero-video iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;     /* 16:9 */
    min-height: 100%; min-width: 177.78vh; /* 16:9 invertido */
    transform: translate(-50%, -50%);
    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;
}

/* ---------- 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);
    background-image: url('../images/logo-pde/patron-naranja-hero.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 420px;
    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-roles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}
/* app.css (del template) decora cualquier "input[type=radio] ~ label" con
   su propio círculo vía ::before/::after, y le fuerza padding-left y
   color (texto casi negro) — con más especificidad que nuestras reglas
   de abajo. 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. */
.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;
}

.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);
    background: rgba(255,255,255,.04);
    font-size: 14.5px;
    line-height: 1.35;
    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; }

.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);
    background: rgba(255,255,255,.04);
    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);
    background: rgba(255,255,255,.06);
    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(255,255,255,.09); }

.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; }

.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; }
.pdde-hito-desc { color: var(--pdde-gris-600); font-size: 14.5px; line-height: 1.6; }
.pdde-hito-badge {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-top: 8px;
}
.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; }

.pdde-resultados-card, .pdde-trazabilidad-card {
    background: var(--pdde-blanco);
    border-radius: var(--pdde-radius);
    padding: 32px;
    box-shadow: var(--pdde-shadow);
    margin-bottom: 24px;
}
.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; }

.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-morado-700); }
.pdde-gobernanza-card:nth-child(4)::before { background-image: url('../images/patrones-franja/franja-morado.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); }

/* ---------- 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; }

/* 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); }

/* ---------- 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 (carrusel, 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; }
.pdde-galeria-viewport { overflow: hidden; border-radius: var(--pdde-radius); }
.pdde-galeria-track { display: flex; transition: transform .35s ease; }
.pdde-galeria-slide { flex: 0 0 100%; aspect-ratio: 16 / 9; background: var(--pdde-gris-300); }
.pdde-galeria-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdde-galeria-flecha {
    position: absolute; top: calc(50% + 12px); transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(43,39,117,.75); color: #fff; font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.pdde-galeria-flecha:hover { background: var(--pdde-morado-900); }
.pdde-galeria-anterior { left: 12px; }
.pdde-galeria-siguiente { right: 12px; }
.pdde-galeria-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.pdde-galeria-puntos button {
    width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
    background: var(--pdde-gris-300); cursor: pointer;
}
.pdde-galeria-puntos button.activo { background: var(--pdde-naranja-texto); }

/* ---------- 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: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 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 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);
}

/* ---------- 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;
}
/* Patrón cuadros+cinta (Patrones PDE-24, morado+verde) en vez del zigzag
   fino de antes — se veía muy chico. Se reescaló de 8000px a 640px con un
   desenfoque previo (evita el muaré que da este motivo al reducirlo de
   golpe) y quedó 6× más liviano (312KB → 50KB). */
.pdde-hero-franja-verde {
    background-image: url('../images/patrones-franja/franja-verde-24.png');
    background-size: 200px auto;
}
.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'); }

.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; }
    .pdde-footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .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; }
}