/* ─── Secciones del home — FUNJOSE ───────────────────────────────────────────
   Cargado solo en el home (ver functions.php), en el orden de las secciones
   de front-page.php. «Nuestro impacto» queda aparte (impacto.css) porque
   también lo usa su página propia. Antes eran 7 archivos (2026-10-16).
   ────────────────────────────────────────────────────────────────────────── */


/* ══════════ hero ══════════ */

/* ─── Hero Institucional FUNJOSE ────────────────────────────────────────────
   Usado por template-parts/hero.php
   Desktop  : dos columnas — título grande | mensaje institucional + botones
   Tablet + Móvil : una columna, apilado
   ────────────────────────────────────────────────────────────────────────── */

/* ── Layout ── */
/* Hero full-bleed (3ª iteración): la sección exterior (.fj-hero) es la
   fotografía a 100% del viewport; el contenido (.fj-hero__inner) mantiene
   el mismo max-width/alineación de siempre (1200px, padding 64px). El
   overlay dejó de ser un degradado confinado a .fj-hero__inner (se sentía
   como una caja/panel encima de la foto) y pasa a ser un tinte plano,
   uniforme, sobre TODA la fotografía — mismo azul institucional que ya
   domina el resto del sitio (#1A1860: H1, botón primario, nav).

   5ª iteración (2026-09-28) — la 4ª (118% auto) dejaba franjas vacías en
   celular/tablet (la foto quedaba más baja que la sección) y cortaba las
   cabezas desde ~1300px (foto demasiado alta, centrada verticalmente).
   Ahora:
   - la foto vive en ::before, con cover (siempre llena, sin franjas).
     Foto actual (2026-10-05, 3 estudiantes, 1774×887): caras entre el 33%
     y el 64% de la altura, banner de FUNJOSE arriba a la derecha → anclada
     al 20% vertical para no cortar el birrete del banner en pantallas anchas.
   - tope de 1920px (con esta foto de 1774px se estira un 8% en el ancho
     máximo; no se nota bajo el tinte). En
     pantallas más anchas, foto y tinte quedan como un bloque centrado de
     orillas rectas y a los lados se ve el fondo normal de la página
     (elegido por el cliente sobre laterales navy, laterales con solo el
     tinte, y orillas difuminadas).
   - el tinte va en ::after, con el mismo tope que la foto.
   - en celular/tablet cover recorta los costados (pantalla vertical, foto
     horizontal); en celular se enfoca en x=58% (ver bloque ≤719px). */
.fj-hero {
    position: relative;
    isolation: isolate;
    padding: 140px 0;
}

.fj-hero::before,
.fj-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    max-width: 1920px;
    margin: 0 auto;
}

/* Foto (2026-10-05, vuelve la de los 3 estudiantes): WebP de ~93KB para
   todos los navegadores actuales; el JPG (~153KB) solo lo baja quien no
   entienda image-set(). Si se cambia la foto, subir el ?v= aquí Y en
   fj_hero_preload() (functions.php), deben ser idénticos o se descarga dos
   veces. */
.fj-hero::before {
    background: url('../img/hero-funjose.jpg?v=20261005') 50% 20% / cover no-repeat;
    background-image: image-set(
        url('../img/hero-funjose.webp?v=20261005') type('image/webp'),
        url('../img/hero-funjose.jpg?v=20261005') type('image/jpeg')
    );
}

.fj-hero::after {
    background: rgba(26, 24, 96, 0.48);
}

.fj-hero__inner {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0 56px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
    min-height: 430px;
}

/* ── Columna izquierda — título ── */
.fj-hero__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    animation: fj-fadein 0.7s ease both;
}

.fj-hero__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(3.4rem, 7.2vw, 6.5rem);
    color: #fff;
    line-height: 1.08;
    margin: 0;
}

.fj-hero__title-accent {
    text-decoration-line: underline;
    text-decoration-color: var(--global-palette1, #fea900);
    text-decoration-thickness: 5px;
    text-underline-offset: 12px;
}

/* ── Columna derecha — mensaje + botones ── */
.fj-hero__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    animation: fj-fadein 0.9s ease both;
    animation-delay: 0.15s;
}

.fj-hero__desc {
    font-size: 1.375rem;
    color: #fff;
    line-height: 1.78;
    max-width: 400px;
    margin: 0;
}

.fj-hero__buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

@keyframes fj-fadein {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Tablet (720–1024px): una columna ── */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .fj-hero {
        padding: 160px 0;
    }
    .fj-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px 0;
        text-align: center;
        min-height: auto;
    }
    .fj-hero__left {
        align-items: center;
        height: auto;
    }
    .fj-hero__title {
        font-size: clamp(2.8rem, 6.9vw, 4.4rem);
    }
    .fj-hero__right {
        align-items: center;
    }
    .fj-hero__desc {
        max-width: 600px;
    }
    .fj-hero__buttons {
        justify-content: center;
    }
}

/* ── Móvil (≤719px): una columna ── */
@media screen and (max-width: 719px) {
    .fj-hero {
        padding: 120px 0 112px;
    }
    /* Foto de los 3 estudiantes (2026-10-05): a x=58% el texto cae entre
       el muchacho (izquierda) y la muchacha de lentes (derecha). */
    .fj-hero::before {
        background-position: 58% 20%;
    }
    .fj-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px 0;
        text-align: center;
        min-height: auto;
        padding: 0 28px;
    }
    .fj-hero__left {
        align-items: center;
        height: auto;
    }
    .fj-hero__title {
        font-size: clamp(2.4rem, 7.1vw, 3.2rem);
    }
    .fj-hero__right {
        align-items: center;
        gap: 22px;
    }
    .fj-hero__desc {
        font-size: 1rem;
    }
    .fj-hero__buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}


/* ══════════ sobre-nosotros ══════════ */

/* ─── Sobre nosotros — FUNJOSE ──────────────────────────────────────────────
   Usado por template-parts/sobre-nosotros.php
   Eyebrow + título + texto institucional, centrado.
   ────────────────────────────────────────────────────────────────────────── */

.fj-about {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 64px;
    box-sizing: border-box;
}

.fj-about__eyebrow {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--global-palette2, #0077b6);
    margin: 0 0 16px;
}

.fj-about__title {
    font-family: 'Poppins', sans-serif;
    max-width: 60%;
    font-weight: 800;
    font-size: clamp(2.2rem, 4.4vw, 3.2rem);
    line-height: 1.18;
    color: #1A1860;
    margin: 0 0 24px;
}

.fj-about__text {
    font-size: 1.125rem;
    color: #555c74;
    line-height: 1.78;
    max-width: 100%;
    margin: 0 0 32px;
    font-size: 1.375rem;
}

.fj-about__cta {
    align-self: flex-end;
}

/* ── Móvil (≤719px) ── */
@media screen and (max-width: 719px) {
    .fj-about {
        padding: 64px 28px;
    }
    .fj-about__eyebrow {
        font-size: 0.85rem;
    }
    .fj-about__text {
        font-size: 1rem;
    }
}


/* ══════════ estadisticas ══════════ */

/* ─── Estadísticas de becados — FUNJOSE ────────────────────────────────────
   Usado por template-parts/estadisticas.php
   Ícono + número (subrayado amarillo institucional) + texto, sin círculos ni tarjetas.
   ────────────────────────────────────────────────────────────────────────── */

.fj-stats {
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 64px;
    box-sizing: border-box;
    text-align: center;
}

.fj-stats__head {
    text-align:justify;
}

.fj-stats__eyebrow {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--global-palette2, #0077b6);
    margin: 0 0 16px;
}

.fj-stats__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 4.4vw, 3.2rem);
    line-height: 1.18;
    color: #1A1860;
    margin: 0 0 24px;
    max-width: 60%;
    text-align: left;
}

.fj-stats__text {
    font-size: 1.375rem;
    color: #555c74;
    line-height: 1.78;
    max-width: 100%;
    margin: 0 0 56px;
    text-align: left;
}

.fj-stats__grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 64px;
    flex-wrap: wrap;
}

.fj-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 200px;
}

.fj-stat__number {
    position: relative;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(3.45rem, 6.9vw, 5rem);
    line-height: 1;
    color: #1A1860;
    padding-bottom: 14px;
}

.fj-stat__number::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 200%;
    height: 4px;
    background: var(--global-palette1, #fea900);
}

.fj-stat__label {
    margin: 16px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #555c74;
    line-height: 1.4;
}

/* ── Tablet (720–1024px) ── */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .fj-stats {
        padding: 80px 64px;
    }
    .fj-stats__grid {
        gap: 40px;
    }
}

/* ── Móvil (≤719px) ── */
@media screen and (max-width: 719px) {
    .fj-stats {
        padding: 64px 28px;
    }
    .fj-stats__grid {
        gap: 40px;
    }
    .fj-stats__text {
        font-size: 1rem;
    }
    .fj-stat__label {
        font-size: 0.95rem;
    }
}


/* ══════════ aplicar-beca ══════════ */

/* ─── Aplicar a una beca — FUNJOSE ──────────────────────────────────────────
   Usado por template-parts/aplicar-beca.php
   Eyebrow + título + texto, mismo estilo que sobre-nosotros.
   ────────────────────────────────────────────────────────────────────────── */

.fj-apply {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 64px;
    box-sizing: border-box;
}

.fj-apply__eyebrow {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--global-palette2, #0077b6);
    margin: 0 0 16px;
}

.fj-apply__title {
    font-family: 'Poppins', sans-serif;
    max-width: 60%;
    font-weight: 800;
    font-size: clamp(2.2rem, 4.4vw, 3.2rem);
    line-height: 1.18;
    color: #1A1860;
    margin: 0 0 24px;
}

.fj-apply__text {
    font-size: 1.375rem;
    color: #555c74;
    line-height: 1.78;
    max-width: 100%;
    margin: 0;
}

.fj-apply__nota {
    font-size: 1.05rem;
    color: #4a4f6a;
    line-height: 1.6;
    max-width: 100%;
    margin: 28px 0 0;
    padding: 16px 20px;
    border-left: 3px solid var(--global-palette1, #fea900);
    background: #faf6ec;
}

.fj-apply__nota strong {
    color: #1A1860;
}

.fj-apply__nota a {
    color: var(--global-palette2, #0077b6);
    text-decoration: underline;
}

.fj-apply__anticipo {
    font-size: 1.375rem;
    color: #555c74;
    line-height: 1.78;
    margin: 32px 0 0;
}

/* ── Móvil (≤719px) ── */
@media screen and (max-width: 719px) {
    .fj-apply {
        padding: 64px 28px;
    }
    .fj-apply__eyebrow {
        font-size: 0.85rem;
    }
    .fj-apply__text {
        font-size: 1rem;
    }
    .fj-apply__nota {
        font-size: 0.9rem;
        padding: 14px 16px;
        margin-top: 20px;
    }
    .fj-apply__anticipo {
        font-size: 1.05rem;
        margin-top: 24px;
    }
}


/* ══════════ proceso ══════════ */

/* ─── Proceso de beca — FUNJOSE ──────────────────────────────────────────────
   Usado por template-parts/proceso.php
   Timeline vertical: la etapa del mes en curso se enciende en dorado
   institucional, el resto queda en gris neutro.
   ────────────────────────────────────────────────────────────────────────── */

.fj-process {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 64px 96px;
    box-sizing: border-box;
}

.fj-process__list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fj-process__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding-bottom: 48px;
}

.fj-process__item:last-child {
    padding-bottom: 0;
}

.fj-process__connector {
    position: absolute;
    top: 26px;
    bottom: 0;
    left: 11px;
    width: 3px;
    background: #e4e7ee;
}

.fj-process__item:last-child .fj-process__connector {
    display: none;
}

.fj-process__marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #e4e7ee;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.fj-process__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.fj-process__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EEF0F8;
    color: #1A1860;
    transition: background 0.2s ease, color 0.2s ease;
}

.fj-process__icon svg {
    width: 20px;
    height: 20px;
}

.fj-process__step-meses {
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* #006da7 (antes #0077b6): contraste 4.9:1 sobre el fondo, mínimo 4.5 de
       accesibilidad (Lighthouse 2026-10-06). */
    color: #006da7;
    background: #E4F1FA;
    padding: 6px 14px;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
}

.fj-process__step-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    /* Pasos no activos: #686f87 (antes #98a0b3, contraste 2.4:1 → 4.6:1, mínimo
       de accesibilidad 4.5). El paso activo se sigue distinguiendo por el
       marcador dorado y el título en azul marino. */
    color: #686f87;
    margin: 0 0 8px;
    transition: color 0.2s ease;
}

.fj-process__step-text {
    font-size: 1.05rem;
    color: #686f87;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 640px;
    transition: color 0.2s ease;
}

.fj-process__cta {
    padding: 10px 24px;
    font-size: 0.95rem;
}

.fj-process__cta.is-disabled {
    position: relative;
    background: #9a9cc2 !important;
    color: #fff !important;
    cursor: not-allowed;
}

.fj-process__cta.is-disabled::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 240px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #1A1860;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
}

.fj-process__cta.is-disabled::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) translateY(0);
    border: 6px solid transparent;
    border-top-color: #1A1860;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.fj-process__cta.is-disabled:hover::after,
.fj-process__cta.is-disabled:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

.fj-process__cta.is-disabled:hover::before {
    transform: translateX(-50%) translateY(0);
}

.fj-process__item.is-active .fj-process__marker {
    background: var(--global-palette1, #fea900);
    border-color: var(--global-palette1, #fea900);
    box-shadow: 0 0 0 5px rgba(254, 169, 0, 0.18);
}

.fj-process__item.is-active .fj-process__icon {
    background: var(--global-palette1, #fea900);
    color: #1A1860;
}

.fj-process__item.is-active .fj-process__step-title {
    color: #1A1860;
}

.fj-process__item.is-active .fj-process__step-text {
    color: #555c74;
}

/* ── Móvil (≤719px) ── */
@media screen and (max-width: 719px) {
    .fj-process {
        padding: 0 28px 64px;
    }
    .fj-process__step-title {
        font-size: 1.1rem;
    }
    .fj-process__step-text {
        font-size: 0.95rem;
    }
}


/* ══════════ donar ══════════ */

/* ─── Donar — FUNJOSE ────────────────────────────────────────────────────────
   Usado por template-parts/donar.php
   Eyebrow + título + texto + botón, mismo estilo que aplicar-beca.
   ────────────────────────────────────────────────────────────────────────── */

.fj-donate {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 64px;
    box-sizing: border-box;
}

.fj-donate__eyebrow {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--global-palette2, #0077b6);
    margin: 0 0 16px;
}

.fj-donate__title {
    font-family: 'Poppins', sans-serif;
    max-width: 60%;
    font-weight: 800;
    font-size: clamp(2.2rem, 4.4vw, 3.2rem);
    line-height: 1.18;
    color: #1A1860;
    margin: 0 0 24px;
}

.fj-donate__text {
    font-size: 1.375rem;
    color: #555c74;
    line-height: 1.78;
    max-width: 100%;
    margin: 0 0 32px;
}

.fj-donate__cta {
    align-self: flex-start;
}

.fj-donate__subtitle {
    font-family: 'Poppins', sans-serif;
    max-width: 60%;
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    line-height: 1.3;
    color: #1A1860;
    margin: 48px 0 20px;
}

/* ── Móvil (≤719px) ── */
@media screen and (max-width: 719px) {
    .fj-donate {
        padding: 64px 28px;
    }
    .fj-donate__eyebrow {
        font-size: 0.85rem;
    }
    .fj-donate__text {
        font-size: 1rem;
    }
    .fj-donate__subtitle {
        margin-top: 40px;
    }
}


/* ══════════ instagram ══════════ */

/* ─── Feed de Instagram — FUNJOSE ────────────────────────────────────────────
   Usado por template-parts/instagram.php
   Mismo ancho y márgenes que las demás secciones del home (ver la sección «donar»).
   ────────────────────────────────────────────────────────────────────────── */

.fj-instagram {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 64px 96px;
    box-sizing: border-box;
}

@media screen and (max-width: 719px) {
    .fj-instagram {
        padding: 0 28px 64px;
    }
}

/* El Feed Builder tiene un alto fijo (clase sbi_fixed_height + height inline)
   que con overflow-y:auto deja una barra de scroll dentro de la sección.
   Se anula aquí para que el feed siempre muestre sus fotos completas.
   !important porque el alto viene como style inline del plugin. */
.fj-instagram #sb_instagram.sbi_fixed_height {
    height: auto !important;
    overflow: visible;
}