/* =========================================================================
   EDUCA.PRO · capa de marca sobre pb2.css
   =========================================================================
   A diferencia de educapharos.com (donde el core ya venía con la marca y
   solo había que ajustar geometría), aquí cambia el sistema de diseño
   entero, así que esta hoja redefine casi todos los componentes.

   Referencia: el style.css del tema hijo de educa.pro — su bloque :root de
   variables --edu-* y la landing de Hostelería y Turismo (.edu-ht-*), que
   es la única que trae su CSS completo.

   Contrastado el 2026-08-24 contra dev.educa.pro en vivo (HTML + CSS reales
   vía curl, sin capturas de pantalla): las variables --edu-color-* del :root
   coinciden con esta hoja. Se corrigieron dos que habían quedado mal
   transcritas — --edu-heading tenía #373D6D en vez de #373d75 (typo de un
   dígito) y --edu-border usaba #d7daea, que no es ninguno de los tokens del
   tema; ahora usa --edu-color-border-soft (#c9cce4), que sí lo es. --edu-dark
   (#0e1232) tampoco correspondía a ningún token confirmado: pasa a
   --edu-color-primary-dark (#373d75), pendiente de confirmar por captura en
   la tarjeta de CTA final y la banda de patrocinadores, que son las dos
   zonas donde más se nota. --edu-btn/--edu-btn-hover (#5C66AD/#4e5899) SÍ
   están confirmados — no son de ese :root sino de una regla real del tema
   (botón de un popup, #popmake-3871 .zlf-submit), así que se mantienen.

   RESUMEN DEL CAMBIO FRENTE AL CORE
     tipografía   Montserrat        -> Work Sans
     marca        amarillo #ffd200  -> índigo #6670C9 (botones #5C66AD)
     oscuro       #111              -> #373d75
     esquinas     2-4px casi rectas -> 8/12/16/18px y pill para botones
     botones      rectos, peso 700  -> pill, peso 500-600, con elevación
     sombras      casi ninguna      -> sistema suave propio

   Se carga DESPUÉS de pb2.css, así que basta la misma especificidad; solo
   se sube donde el core ya iba reforzado con !important.
   ========================================================================= */

/* ============ TOKENS ============ */
.pb2 {
    /* Variables de marca del core. Además de --y (acento) y --d (oscuro),
       el core expone tres tonos derivados que antes iban a fuego en
       amarillo: hover de botón, hover de enlace / numeración, y la línea
       de la agenda. Sin declararlos aquí, esos tres puntos seguirían
       saliendo amarillos aunque --y fuese índigo. */
    --y: #6670C9;
    --d: #373d75;
    --y-dark: #4e5899;
    --y-deep: #5C66AD;
    --y-soft: #c9cce4;

    /* Tokens propios de educa.pro, con los mismos nombres que en su tema
       para que se reconozcan al comparar con el original. */
    --edu-primary: #6670C9;
    --edu-btn: #5C66AD;
    --edu-btn-hover: #4e5899;
    --edu-dark: #373d75;
    --edu-heading: #373d75;
    --edu-bg-soft: #eef0f8;
    --edu-border: #c9cce4;
    --edu-radius: 16px;
    --edu-radius-sm: 12px;
    --edu-radius-lg: 18px;
    --edu-shadow: 0 8px 22px rgba(33, 41, 86, .12);
    --edu-shadow-lg: 0 8px 24px rgba(33, 41, 86, .16);

    font-family: 'Work Sans', Arial, sans-serif;
    color: #000;
}

.pb2-wrap {
    max-width: 1180px;
    padding: 0 40px;
}

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

/* ============ TIPOGRAFÍA ============ */
.pb2-h2 {
    color: var(--edu-heading);
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -0.05em;
    margin: 0 0 42px;
}

.pb2-lead {
    color: #000;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.15;
    font-weight: 500;
}

.pb2-eyebrow {
    color: var(--edu-primary);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* ============ BOTONES ============ */
/* Pill, peso medio y elevación al pasar por encima: el core los tiene
   rectos, en peso 700 y sin movimiento. */
.pb2 .pb2-btn {
    background: var(--edu-btn);
    color: #fff !important;
    padding: 16px 36px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border: 2px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.pb2 .pb2-btn:hover {
    background: var(--edu-btn-hover) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(92, 102, 173, .25);
}

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

.pb2-link:hover {
    color: var(--edu-btn-hover) !important;
}

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

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

/* ============ CABECERA DEL SITIO ============ */
/* El brief pide que una landing no tenga menú de navegación de salida.
   educa.pro monta su cabecera con Elementor Theme Builder — confirmado en
   el HTML real: <header data-elementor-type="header" data-elementor-id="25"
   class="elementor elementor-25 elementor-location-header"> — así que basta
   con ocultar esa ubicación. Esta hoja SOLO se encola en las landings del
   panel (ver el site-pack), de modo que el resto de la web conserva su
   cabecera intacta.

   El footer se deja como está: el brief solo habla del menú de navegación,
   y el pie aporta los enlaces legales y de contacto.

   Ojo: la cabecera de esta web es fija/flotante, así que mientras se pintaba
   había que despejarla con un padding superior en el hero (150px / 130px).
   Al ocultarla ese despeje sobra y dejaría un hueco vacío, por eso los
   paddings de abajo son los normales. Si algún día se recupera la cabecera,
   hay que volver a añadirlo. */
.elementor-location-header {
    display: none !important;
}

/* ============ HERO ============ */
/* El core solo fuerza blanco en split_form (.pb2-hero--split_form ... h1).
   En countdown/price/cobrand (Tipo B y similares) el h1 no tenía color
   propio aquí, así que heredaba el blanco de .pb2-hero — pero Astra trae
   su propio h1{color:#808285} sin clase, y una regla que apunta
   directamente al elemento gana siempre a un valor heredado, aunque tenga
   menos especificidad. Se fija aquí para las 4 variantes por igual. */
.pb2-hero h1 {
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: clamp(46px, 4.6vw, 70px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 600;
    color: #fff;
}

.pb2-hero__inner {
    max-width: 1280px;
    padding: 95px 48px;
}

.pb2-sub {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 400;
}

/* El velo del core es un degradado vertical fuerte; el de educa.pro es
   horizontal y mucho más suave. */
.pb2-hero__overlay {
    background: linear-gradient(90deg, rgba(5, 7, 15, .30), rgba(5, 7, 15, .10));
}

/* Hero 60/40 con formulario (variante "split_form", la del Tipo A): el core
   ya fuerza h1/subtítulo a blanco sobre la mitad con imagen
   (.pb2-hero--split_form .pb2-hero__copy h1, .pb2-sub{color:#fff}) porque
   lleva foto + velo oscuro detrás. El eyebrow no estaba en esa regla y
   heredaba el índigo de .pb2-eyebrow, que sobre foto queda con poco
   contraste. Aquí se iguala al resto del texto de esa mitad.
   La proporción del grid (55/45), el alto mínimo y los paddings de cada
   mitad son mecánica del core compartida por todas las webs: no se tocan
   desde una hoja de marca salvo que una captura real de dev.educa.pro
   demuestre que aquí hacen falta distintos. */
.pb2-hero--split_form .pb2-hero__copy .pb2-eyebrow {
    color: #fff;
}

/* Pills del hero: en educa.pro son cápsulas de borde fino y texto grande */
.pb2-pills span {
    min-height: 46px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 999px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-transform: none;
}

/* El core fuerza color:#111!important en .pb2-price — sin el !important
   aquí, el blanco no le gana. */
.pb2-price {
    background: var(--edu-btn);
    color: #fff !important;
    border-radius: 999px;
    font-weight: 600;
}

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

.pb2-countdown span {
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* ============ TARJETAS ============ */
/* El core las pinta con línea superior amarilla y esquinas rectas. En
   educa.pro son cajas de borde fino, esquinas de 12px y un hover que
   tiñe el fondo de índigo translúcido. */
.pb2-card {
    background: #fff;
    border: 1px solid var(--edu-border);
    border-top: 1px solid var(--edu-border);
    border-radius: var(--edu-radius-sm);
    padding: 38px 42px 34px;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.pb2-card:hover {
    background-color: rgba(92, 102, 173, .15);
    border-color: var(--edu-btn);
    transform: translateY(-2px);
}

.pb2-card h3 {
    color: var(--edu-btn);
    font-size: clamp(22px, 2.2vw, 27px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -0.03em;
}

.pb2-card p {
    color: #333;
    font-size: 16px;
    line-height: 1.45;
}

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

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

/* ============ CHECKS Y LISTAS ============ */
/* Ojo: son dos cosas distintas. El check es el carácter "✓" (se tiñe con
   color) y el cuadradito de .pb2-sq es un bloque vacío (se tiñe con
   background). Aplicarles la misma propiedad pinta un recuadro detrás del
   tick. La variante --dark trae su tono a fuego en el core, así que hay
   que reescribirla aparte. */
.pb2-checks li::before,
.pb2-checks--dark li::before,
.pb2-benefits li::before {
    color: var(--edu-primary);
}

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

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

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

.pb2-acc__item.is-open {
    border-color: var(--edu-btn);
}

.pb2-acc__t {
    color: var(--edu-heading);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

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

/* El botón de la pregunta no tiene ningún :hover propio ni en el core ni
   aquí — el azul que se ve al pasar el ratón/hacer clic es el anillo de
   foco por defecto del navegador sobre el <button>, que .pb2-acc__q no
   neutralizaba. Se quita del todo, en vez de sustituirlo por otro color. */
.pb2-acc__q {
    outline: none;
}

.pb2-acc__q:hover,
.pb2-acc__q:focus,
.pb2-acc__q:focus-visible {
    background: none;
    outline: none;
}

/* El core deja la respuesta a padding-top:0, pegada a la pregunta. Esto
   solo toca el FAQ (que usa .pb2-acc__a sin más), no el temario: ese ya
   fija su propio padding más abajo (.pb2-temario .pb2-acc__a), que por ser
   más específico gana y no hereda este cambio. */
.pb2-acc__a {
    padding-top: 16px;
}

.pb2-num {
    color: var(--edu-primary);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.pb2-tags li {
    background: var(--edu-bg-soft);
    border-radius: 999px;
    color: var(--edu-heading);
    font-weight: 500;
}

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

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

/* Mismo motivo que en el FAQ: el core deja la respuesta a padding-top:0,
   pegada al título del módulo. Selector propio porque .pb2-temario
   .pb2-acc__a ya fija su padding completo en el core (más específico que
   el genérico .pb2-acc__a de la sección de FAQ). */
.pb2-temario .pb2-acc__a {
    padding-top: 16px;
}

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

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

.pb2-tl span {
    color: var(--edu-primary);
    font-weight: 600;
}

/* ============ CERTIFICACIÓN · FUNDAE · STAT ============ */
.pb2-cert {
    border: 1px solid var(--edu-border);
    border-radius: var(--edu-radius-lg);
    box-shadow: var(--edu-shadow);
    padding: 34px 38px;
}

.pb2-cert h3 {
    color: var(--edu-heading);
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* La banda FUNDAE del core va en amarillo con texto negro; aquí el acento
   es oscuro sobre claro, que es como educa.pro trata sus bandas. */
.pb2-fundae {
    background: var(--edu-bg-soft);
}

.pb2-fundae p {
    color: var(--edu-heading);
    font-size: 18px;
    font-weight: 600;
}

.pb2-stat__num {
    color: var(--edu-primary);
    font-weight: 700;
    letter-spacing: -0.05em;
}

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

.pb2-stat__label {
    color: #333;
    font-weight: 500;
}

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

.pb2-programs .pb2-card--plain:hover {
    transform: translateY(-2px);
    box-shadow: var(--edu-shadow-lg);
    border-color: var(--edu-btn);
}

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

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

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

/* ============ FORMULARIO ============ */
.pb2-formcard {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
    padding: 32px 28px;
}

.pb2-formcard__title {
    color: var(--edu-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

/* ---- Reskin del formulario de Zoho ----
   Lo pinta otro plugin (zoho-form-webhook) que trae el amarillo de
   EducaPharos escrito en su propio form.css:
       :root{ --color-primary:#ffc400; --color-link:#192B5D; ... }
   Como son variables declaradas en :root, se pueden redefinir aquí dentro
   del ámbito .pb2 y heredan hacia el formulario, que vive dentro de la
   landing. Así el botón deja de salir amarillo en educa.pro SIN tocar el
   plugin compartido y SIN afectar al resto de la web (esta hoja solo se
   encola en las landings del panel).
   Si algún día el plugin de formularios deja de usar variables, esto
   dejaría de funcionar y habría que parchearlo allí. */
.pb2 {
    --color-primary: var(--edu-btn);
    --color-primary-hover: var(--edu-btn-hover);
    --color-checkbox: var(--edu-primary);
    --color-link: var(--edu-primary);
    --color-link-hover: var(--edu-btn-hover);
    --color-focus: var(--edu-primary);
    --color-select-hover: var(--edu-primary);
    --color-select-option-hover: var(--edu-primary);
    --color-title: var(--edu-heading);
    --color-text: #000;
    --font-base: 'Work Sans', Arial, sans-serif;
}

/* El botón del formulario adopta la forma pill del resto de la web, que en
   el plugin viene con radio 14px y peso 700. */
.pb2 form[data-zhf="1"] button[type="submit"] {
    border-radius: 999px;
    font-weight: 500;
    font-size: 16px;
    padding: 16px 36px;
}

.pb2-formcard input:not([type="checkbox"]):not([type="radio"]),
.pb2-formcard select,
.pb2-formcard textarea {
    border-radius: var(--edu-radius-sm);
}

.pb2-formcard input:focus,
.pb2-formcard select:focus,
.pb2-formcard textarea:focus {
    outline-color: var(--edu-primary);
    border-color: var(--edu-primary);
}

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

/* ============ CTA FINAL ============ */
/* En educa.pro no es una banda a sangre sino una tarjeta oscura redondeada
   dentro del contenedor. */
.pb2-final {
    background: #fff !important;
    padding: 30px 0 90px;
}

.pb2-final .pb2-wrap {
    background: var(--edu-dark);
    border-radius: var(--edu-radius-lg);
    padding-top: 70px;
    padding-bottom: 70px;
}

.pb2-final__t {
    color: #fff;
    font-size: clamp(40px, 4.8vw, 60px);
    line-height: .9;
    letter-spacing: -0.06em;
    font-weight: 400;
}

.pb2-final__t strong {
    font-weight: 600;
}

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

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

.pb2-sponsors__l {
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.pb2-sponsors .pb2-logos__row img {
    border-radius: var(--edu-radius-sm);
}

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

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

/* ============ RESPONSIVE ============ */
/* El tema de educa.pro reduce su gutter en dos escalones (40 -> 28 -> 20),
   así que se replica el mismo comportamiento. */
@media (max-width: 1024px) {
    .pb2-wrap {
        padding: 0 28px;
    }

    .pb2-hero__inner {
        padding: 70px 28px;
    }

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

    .pb2-final .pb2-wrap {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 768px) {
    .pb2-wrap {
        padding: 0 20px;
    }

    .pb2-sec {
        padding: 56px 0 60px;
    }

    .pb2-hero__inner {
        padding: 60px 20px;
    }

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

    .pb2-card {
        padding: 26px 22px 24px;
    }

    .pb2-final .pb2-wrap {
        border-radius: var(--edu-radius);
        padding: 44px 24px;
    }

    .pb2-formcard {
        padding: 26px 20px;
    }
}