/* =========================================================================
   EDUCAEDTECH FOUNDATION · capa de marca sobre pb2.css
   =========================================================================
   Igual que educa.pro, esta web cambia el sistema de diseño entero respecto
   al core, así que esta hoja redefine casi todos los componentes.

   Referencia: el tema hijo de la web (hello-elementor-child), contrastado el
   2026-08-24 contra educaedtech.foundation en vivo. La base es el lenguaje
   de la home (.home-*), que es el "estilo general" del sitio; las plantillas
   .rea-* (Reconocimientos) y .wp26-* (Whitepaper) son piezas de campaña con
   su propio look extremo (fondo oscuro, mayúsculas, peso 900) y NO se toman
   como molde para una landing B2B genérica.

   RESUMEN DEL CAMBIO FRENTE AL CORE
     tipografía   Montserrat        -> Lato (+ Roboto en etiquetas)
     marca        amarillo #ffd200  -> turquesa #53AEC3
     oscuro       #111              -> #101828 / #326B78
     titulares    negros, peso 800  -> turquesa, peso 600
     tarjetas     línea superior    -> borde turquesa 2px, radio 10px
     botones      rectos (2px)      -> radio 10px, peso 600, texto blanco
   ========================================================================= */

/* ============ CABECERA DEL SITIO ============ */
/* El brief pide que una landing no tenga menú de navegación de salida. La
   cabecera de esta web la pinta el header.php del tema hijo
   (<header id="eed-header" class="eed-header">), no Elementor, así que
   basta con ocultarla. Esta hoja SOLO se encola en las landings del panel
   (ver el site-pack), de modo que el resto de la web la conserva intacta.

   El PIE sí se mantiene: la landing pasa por get_header()/get_footer(), así
   que sale el .eed-footer completo (newsletter, contacto, menús, redes y
   enlaces legales), que es lo que se quiere en el cierre de una landing.

   No hace falta compensar con padding: .eed-header es position:sticky, o
   sea que ocupa sitio en el flujo, y con display:none no deja hueco. */
#eed-header {
    display: none !important;
}

/* ============ TOKENS ============ */
.pb2 {
    /* Variables de marca del core. Además de --y (acento) y --d (oscuro), el
       core expone tres tonos derivados que si no se declaran seguirían
       saliendo amarillos: hover de botón, hover de enlace / numeración, y la
       línea de la agenda. */
    --y: #53AEC3;
    --d: #101828;
    --y-dark: #46b0c4;
    --y-deep: #326B78;
    --y-soft: #c9edf3;

    /* Tokens propios, con los mismos valores que el tema hijo para que se
       reconozcan al comparar con el original. */
    --eed-primary: #53AEC3;
    --eed-primary-hover: #46b0c4;
    --eed-deep: #326B78;
    --eed-deep-2: #2f747d;
    --eed-light: #c9edf3;
    --eed-dark: #101828;
    --eed-ink: #141414;
    --eed-muted: #667085;
    --eed-border: #e1e1e1;
    --eed-bg-soft: #f9fafb;
    --eed-radius: 10px;
    --eed-radius-sm: 6px;
    --eed-radius-lg: 14px;
    --eed-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    --eed-shadow-lg: 0 18px 44px rgba(0, 0, 0, .18);

    font-family: 'Lato', Arial, sans-serif;
    color: var(--eed-ink);
}

.pb2-wrap {
    max-width: 1240px;
    padding: 0 20px;
}

.pb2-wrap--narrow {
    max-width: 860px;
}

/* ============ TIPOGRAFÍA ============ */
/* Los titulares de esta web van en turquesa y peso 600, no en negro y 800
   como los del core. */
.pb2-h2 {
    color: var(--eed-primary);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 36px;
}

.pb2-lead {
    color: #4a4a4a;
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.5;
    font-weight: 400;
}

/* Etiqueta superior: en Roboto, la secundaria del sitio para antetítulos. */
.pb2-eyebrow {
    font-family: 'Roboto', Arial, sans-serif;
    color: var(--eed-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ============ BOTONES ============ */
/* El core los pinta rectos (radio 2px) y con texto negro forzado con
   !important: hay que subir la especificidad para el texto blanco. */
.pb2 .pb2-btn {
    background: var(--eed-primary);
    color: #fff !important;
    padding: 15px 40px;
    border-radius: var(--eed-radius);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    border: 0;
    transition: opacity .2s ease, background .2s ease, transform .2s ease;
}

.pb2 .pb2-btn:hover {
    background: var(--eed-primary-hover) !important;
    color: #fff !important;
    opacity: .88;
    transform: translateY(-1px);
}

.pb2-link {
    color: var(--eed-primary);
    font-weight: 600;
}

.pb2-link:hover {
    color: var(--eed-deep) !important;
}

/* ============ SECCIONES ============ */
.pb2-sec {
    padding: 70px 0 80px;
}

.pb2-sec--gray {
    background: var(--eed-bg-soft);
}

/* ============ HERO ============ */
.pb2-hero h1 {
    font-family: 'Lato', Arial, sans-serif;
    font-size: clamp(38px, 5vw, 65px);
    line-height: 1.1;
    font-weight: 600;
}

.pb2-hero__inner {
    max-width: 1240px;
    padding: 90px 20px 80px;
}

.pb2-sub {
    font-size: clamp(19px, 2.4vw, 28px);
    line-height: 1.3;
    font-weight: 400;
}

/* El velo del core es un degradado vertical muy oscuro; aquí se suaviza
   para que la foto respire, como en los heros de la web. */
.pb2-hero__overlay {
    background: linear-gradient(180deg, rgba(16, 24, 40, .45), rgba(16, 24, 40, .60));
}

/* En la variante 60/40 (Tipo A) el core ya fuerza h1 y subtítulo a blanco
   sobre la foto; el eyebrow no estaba en esa regla y en turquesa sobre foto
   queda con poco contraste. */
.pb2-hero--split_form .pb2-hero__copy .pb2-eyebrow {
    color: #fff;
}

/* A DIFERENCIA DE educa.pro: aquí el hero NO necesita despejar ninguna
   cabecera. El site-pack desactiva el header/footer del theme
   (pb2_render_site_chrome => false) porque el Theme Builder de Elementor
   inyectaría su menú, así que en la landing no existe .eed-header y el hero
   empieza en y:0. Se dejan los paddings del core tal cual. */

/* Pills: cápsula de borde fino, como las del sitio */
.pb2-pills span {
    min-height: 40px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
}

/* El core fuerza color:#111!important en .pb2-price */
.pb2-price {
    background: var(--eed-primary);
    color: #fff !important;
    border-radius: 999px;
    font-weight: 700;
}

/* Countdown */
.pb2-countdown div {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--eed-radius);
}

.pb2-countdown span {
    font-weight: 800;
}

/* ============ TARJETAS ============ */
/* El rasgo más reconocible de esta web: caja blanca con borde turquesa de
   2px y esquinas de 10px (el core las pinta con una línea superior y
   esquinas rectas). */
.pb2-card {
    background: #fff;
    border: 2px solid var(--eed-primary);
    border-top: 2px solid var(--eed-primary);
    border-radius: var(--eed-radius);
    padding: 32px 30px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.pb2-card:hover {
    box-shadow: var(--eed-shadow);
    transform: translateY(-2px);
}

.pb2-card h3 {
    color: var(--eed-primary);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 600;
    line-height: 1.2;
}

.pb2-card p {
    color: #000;
    font-size: 15px;
    line-height: 1.55;
}

.pb2-card__icon {
    color: var(--eed-primary);
}

.pb2-avatar {
    border-radius: var(--eed-radius);
}

.pb2-role {
    font-family: 'Roboto', Arial, sans-serif;
    color: var(--eed-muted);
    font-weight: 600;
}

.pb2-quote {
    color: #333;
}

.pb2-who strong {
    color: var(--eed-deep);
}

/* ============ CHECKS Y LISTAS ============ */
/* El check es el carácter de tick (se tiñe con color) y el cuadradito de
   .pb2-sq es un bloque vacío (se tiñe con background): no se pueden
   unificar en una sola regla. */
.pb2-checks li::before,
.pb2-checks--dark li::before,
.pb2-benefits li::before {
    color: var(--eed-primary);
}

.pb2-sq li::before {
    background: var(--eed-primary);
    border-radius: 2px;
}

.pb2-check {
    background: #fff;
    border: 1px solid var(--eed-border);
    border-left: 3px solid var(--eed-primary);
    border-radius: var(--eed-radius);
    padding: 18px 22px;
}

/* ============ ACORDEONES (temario y FAQ) ============ */
.pb2-acc__item {
    background: #fff;
    border: 1px solid var(--eed-border);
    border-left: 1px solid var(--eed-border);
    border-radius: var(--eed-radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s ease;
}

.pb2-acc__item.is-open {
    border-color: var(--eed-primary);
}

.pb2-acc__t {
    color: var(--eed-deep);
    font-size: 18px;
    font-weight: 600;
}

.pb2-acc__i {
    color: var(--eed-primary);
}

/* El core deja la respuesta pegada a la pregunta (padding-top:0). */
.pb2-acc__a {
    padding-top: 14px;
}

.pb2-num {
    color: var(--eed-primary);
    font-weight: 800;
}

.pb2-tags li {
    background: var(--eed-light);
    border-radius: 999px;
    color: var(--eed-deep);
    font-weight: 600;
}

.pb2-temario .pb2-acc__item {
    border-left: 1px solid var(--eed-border);
    border-radius: var(--eed-radius);
}

.pb2-temario .pb2-num {
    color: var(--eed-primary);
}

/* Mismo motivo que en el FAQ: el core fija aquí su propio padding, más
   específico que el genérico de arriba. */
.pb2-temario .pb2-acc__a {
    padding-top: 14px;
}

/* ============ TIMELINE (agenda) ============ */
.pb2-timeline {
    border-left: 2px solid var(--eed-light);
}

.pb2-tl::before {
    background: var(--eed-primary);
}

.pb2-tl span {
    font-family: 'Roboto', Arial, sans-serif;
    color: var(--eed-primary);
    font-weight: 600;
}

/* ============ CERTIFICACIÓN · FUNDAE · STAT ============ */
.pb2-cert {
    border: 2px solid var(--eed-primary);
    border-radius: var(--eed-radius-lg);
    box-shadow: var(--eed-shadow);
    padding: 32px 36px;
}

.pb2-cert h3 {
    color: var(--eed-deep);
    font-weight: 600;
}

/* La banda FUNDAE del core va en amarillo con texto negro; aquí el acento
   es turquesa con texto blanco. */
.pb2-fundae {
    background: var(--eed-primary);
}

.pb2-fundae p {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.pb2-stat__num {
    color: var(--eed-primary);
    font-weight: 800;
}

.pb2-stat__icon {
    color: var(--eed-primary);
}

.pb2-stat__label {
    color: #4a4a4a;
    font-weight: 600;
}

/* ============ PROGRAMAS ============ */
.pb2-programs .pb2-card--plain {
    border: 2px solid var(--eed-primary);
    border-radius: var(--eed-radius);
    overflow: hidden;
}

.pb2-programs .pb2-card--plain:hover {
    transform: translateY(-2px);
    box-shadow: var(--eed-shadow);
}

.pb2-prog__meta {
    font-family: 'Roboto', Arial, sans-serif;
}

.pb2-prog__meta svg {
    color: var(--eed-primary);
}

.pb2-prog__link {
    color: var(--eed-primary);
}

/* ============ REQUISITOS ============ */
.pb2-req .pb2-checks li {
    border-bottom-color: var(--eed-border);
}

/* ============ FORMULARIO ============ */
.pb2-formcard {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: var(--eed-radius-lg);
    box-shadow: var(--eed-shadow);
    padding: 26px 24px 22px;
    /* El core pinta TODO el hero en blanco (.pb2-hero{color:#fff}) y le da
       fondo blanco al formulario (.pb2-hero__form{background:#fff}), pero no
       reajusta el color del texto: lo que hay dentro y no trae color propio
       se hereda blanco sobre blanco. Es lo que pasaba con los avisos que
       pinta CF7 al enviar ("Gracias por tu mensaje. Ha sido enviado."), que
       quedaban invisibles. */
    color: var(--eed-ink);
}

/* En el hero 60/40 el formulario NO va en tarjeta: ocupa toda su columna,
   a ras, como en educapharos. El core ya lo resetea
   (.pb2-hero__form .pb2-formcard{background:transparent;box-shadow:none;
   border-radius:0;padding:0}) pero su regla no incluye 'border', así que el
   borde de arriba sobrevivía y dibujaba una caja dentro de la columna. */
.pb2-hero__form .pb2-formcard {
    border: 0;
}

.pb2-formcard__title {
    color: var(--eed-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* El aviso de respuesta, además, con color explícito: es el mensaje que ve
   quien acaba de enviar el formulario, así que no conviene dejarlo
   dependiendo solo de la herencia. */
.pb2 .wpcf7-response-output {
    color: var(--eed-ink);
    border-radius: var(--eed-radius-sm);
    margin: 14px 0 0;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.4;
}

/* Los errores por campo de CF7 sí traen color propio (rojo), pero el fondo
   del aviso general en caso de error puede quedar poco legible: se le da un
   tono suave coherente con el resto. */
.pb2 .wpcf7-not-valid-tip {
    font-size: 12.5px;
    margin-top: 4px;
}

/* ---- Reskin del formulario ----
   Esta web NO usa el plugin de Zoho: sus formularios son Contact Form 7, y
   el tema hijo ya trae su propia tarjeta (.wpcf7 .cf7-card) con estos
   mismos valores. Aquí se reproducen para el formulario que va DENTRO de la
   landing, tanto si acaba siendo un CF7 como si algún día se instala el
   plugin de Zoho (que hereda estas variables --color-*). */
.pb2 {
    --color-primary: var(--eed-primary);
    --color-primary-hover: var(--eed-primary-hover);
    --color-checkbox: var(--eed-primary);
    --color-link: var(--eed-primary);
    --color-link-hover: var(--eed-deep);
    --color-focus: var(--eed-primary);
    --color-title: var(--eed-ink);
    --color-text: var(--eed-ink);
    --font-base: 'Lato', Arial, sans-serif;
}

/* El tema hijo envuelve sus formularios en su propia tarjeta:
     .wpcf7 .cf7-card{max-width:520px;margin:0 auto;padding:22px;
                      border:1px solid #e9e9e9;border-radius:14px;box-shadow:…}
   Dentro de una landing eso sobra por partida doble: dibuja una segunda
   caja dentro de .pb2-formcard (que ya es la tarjeta) y, sobre todo, el
   max-width de 520px impedía que el formulario ocupara el ancho de su
   columna en el hero. Se neutraliza solo dentro de .pb2, así que los
   formularios del resto de la web siguen exactamente igual. */
.pb2 .wpcf7 .cf7-card {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* El título propio del CF7: el de la tarjeta del panel ya cumple ese papel
   (.pb2-formcard__title). Se deja visible pero alineado con la marca; si se
   duplica, basta con vaciar el campo "Título sobre el formulario". */
.pb2 .wpcf7 .cf7-title {
    color: var(--eed-ink);
    font-size: 22px;
    font-weight: 700;
}

.pb2-formcard input:not([type="checkbox"]):not([type="radio"]),
.pb2-formcard select,
.pb2-formcard textarea {
    border: 1px solid var(--eed-border);
    border-radius: var(--eed-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Lato', Arial, sans-serif;
}

.pb2-formcard input:focus,
.pb2-formcard select:focus,
.pb2-formcard textarea:focus {
    outline: none;
    border-color: var(--eed-primary);
    box-shadow: 0 0 0 3px rgba(83, 174, 195, .18);
}

.pb2-formcard input[type="checkbox"] {
    accent-color: var(--eed-primary);
}

/* Botón de envío: el de CF7 en esta web es radio 6px y peso 600. */
.pb2-formcard button[type="submit"],
.pb2-formcard input[type="submit"],
.pb2-formcard .wpcf7-submit {
    background: var(--eed-primary);
    color: #fff;
    border: 0;
    border-radius: var(--eed-radius-sm);
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pb2-formcard button[type="submit"]:hover,
.pb2-formcard input[type="submit"]:hover,
.pb2-formcard .wpcf7-submit:hover {
    filter: brightness(0.96);
}

.pb2-formcard__privacy {
    color: #777;
    font-size: 12px;
}

/* ============ CTA FINAL ============ */
/* En esta web las bandas de cierre son turquesa a sangre, no negras. */
.pb2-final {
    background: var(--eed-primary) !important;
    padding: 70px 0 80px;
}

.pb2-final__t {
    color: #fff;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.1;
    font-weight: 600;
}

/* ============ LOGOS Y PATROCINADORES ============ */
.pb2-logos {
    background: var(--eed-bg-soft);
}

.pb2-sponsors {
    background: var(--eed-dark) !important;
}

.pb2-sponsors__l {
    font-family: 'Roboto', Arial, sans-serif;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* ============ SPLIT (imagen + texto) ============ */
.pb2-split img {
    border-radius: var(--eed-radius);
    box-shadow: var(--eed-shadow);
}

.pb2-split-sec .pb2-h2 {
    text-align: left;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .pb2-hero__inner {
        padding: 70px 20px 60px;
    }

    .pb2-card {
        padding: 28px 24px;
    }
}

@media (max-width: 768px) {
    .pb2-sec {
        padding: 50px 0 56px;
    }

    .pb2-hero__inner {
        padding: 56px 20px 50px;
    }

    .pb2-pills span {
        min-height: 36px;
        padding: 0 16px;
        font-size: 14px;
    }

    .pb2-card {
        padding: 24px 20px;
    }

    .pb2-final {
        padding: 50px 0 56px;
    }

    .pb2-formcard {
        padding: 22px 18px;
    }
}