/* ─── Estilos comunes del tema hijo — FUNJOSE ───────────────────────────────
   Cargado en todas las páginas (ver functions.php). Antes eran 9 archivos
   sueltos; se juntaron (2026-10-16) para que el navegador pida menos hojas
   antes de pintar. Cada sección conserva su comentario original.
   El orden importa: es el mismo en que se cargaban los archivos.
   ────────────────────────────────────────────────────────────────────────── */


/* ══════════ anuncios-bar ══════════ */

/* ─── Barra de anuncios — FUNJOSE ────────────────────────────────────────────
   Usado por template-parts/anuncios-bar.php
   No sticky: vive antes del header (wp_body_open), en el flujo normal del
   documento — se pierde al bajar y reaparece al volver arriba del todo.
   Fondo blanco, línea inferior tenue, texto en azul institucional.
   Desktop: 40px de alto, texto en una sola línea con elipsis si no cabe.
   Móvil: propuesta — 64px de alto, hasta 2 líneas de texto (ver abajo).
   ────────────────────────────────────────────────────────────────────────── */

.fj-announce {
    background: #fff;
    border-bottom: 1px solid #e4e7ee;
}

.fj-announce__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── Flechas (izquierda) ── */
.fj-announce__nav {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fj-announce__arrow {
    appearance: none;
    background: none;
    border: none;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--global-palette2, #0077b6);
    cursor: pointer;
}

/* Sin efecto de hover: el tema define un fondo/color de hover global para
   cualquier <button>, así que se anula para que la flecha se vea igual
   siempre, sin importar el mouse. */
.fj-announce__arrow:hover:not(:disabled),
.fj-announce__arrow:focus:not(:disabled),
.fj-announce__arrow:active:not(:disabled) {
    background: none;
    box-shadow: none;
    color: var(--global-palette2, #0077b6);
}

.fj-announce__arrow:disabled {
    color: #c7cbdb;
    cursor: default;
}

/* ── Viewport con el anuncio activo ── */
.fj-announce__viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.fj-announce__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.fj-announce__item.is-current {
    transform: translateY(0);
}

.fj-announce__type {
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--global-palette2, #0077b6);
}

.fj-announce__type::after {
    content: '·';
    margin-left: 10px;
    color: #c7cbdb;
}

.fj-announce__text {
    flex: 1;
    min-width: 0;
    color: var(--global-palette2, #0077b6);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fj-announce__link {
    flex-shrink: 0;
    color: var(--global-palette2, #0077b6);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: underline;
}

.fj-announce__link:hover {
    color: #1A1860;
}

/* ── Móvil (≤719px) — propuesta: más alto, texto hasta 2 líneas ── */
@media screen and (max-width: 719px) {
    .fj-announce__inner {
        padding: 8px 20px;
        height: 108px;
        gap: 10px;
        align-items: flex-start;
    }

    .fj-announce__nav {
        margin-top: 2px;
    }

    .fj-announce__item {
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .fj-announce__type {
        flex: 0 0 100%;
    }

    .fj-announce__type::after {
        display: none;
    }

    .fj-announce__text {
        flex: 0 0 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        font-size: 0.85rem;
    }

    /* En su propia fila: si "Ver" compartiera fila con un texto de 2 líneas
       quedaría a la mitad de la oración en vez de al final. */
    .fj-announce__link {
        flex: 0 0 100%;
        text-align: right;
    }
}


/* ══════════ fonts ══════════ */

/* Fuentes servidas desde el propio sitio (2026-10-06), antes venían de
   fonts.googleapis.com en DOS pedidos (el de Kadence y el nuestro) que
   bloqueaban el pintado de cada página ~1.5–1.9 s según Lighthouse.
   Solo el alfabeto latino (cubre el español: tildes, ñ, ¿, ¡). Licencia SIL
   Open Font License: ver OFL-*.txt en assets/fonts/.
   Se declaran EXACTAMENTE los mismos grosores que se cargaban desde Google
   (Manrope 400 y 700, Poppins 400 y 800), para que el sitio se
   vea idéntico al aprobado: el CSS pide además 500/600/800 de Manrope,
   700 de Poppins, y el navegador los resuelve con el grosor
   disponible más cercano, igual que antes (ej. botones 600 → 700). Manrope
   es una fuente variable: un archivo sirve para todos los grosores; si
   algún día se quiere el grosor exacto que pide el CSS, basta con cambiar
   aquí font-weight por un rango (ej. 400 800) — es un cambio visual, consultar. Sorts Mill Goudy,
   configurada en Kadence para menús, no se usa en ninguna página: no se
   incluye. Rubik (tipografía de botones de Kadence) solo la usaban 3 botones
   <button> por accidente; el 2026-10-06 la tipografía de botones de Kadence
   pasó a Manrope (Personalizar) y Rubik se quitó.
   Si se cambia una fuente en Apariencia → Personalizar, hay que
   agregarla aquí (Kadence ya no las pide a Google, ver functions.php). */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/manrope-400-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/manrope-400-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ══════════ botones ══════════ */

/* Botones .fj-btn del sitio (antes en hero.css, 2026-10-16): los usan el
   hero y otras secciones del home, el 404 y «Limpiar filtros» de Nuestro
   impacto, por eso van en la hoja común. */

.fj-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}

/* Aplicar a una beca — acción importante pero secundaria, sin elevación */
.fj-btn--primary {
    background: #1A1860;
    color: #fff !important;
}
.fj-btn--primary:hover,
.fj-btn--primary:focus,
.fj-btn--primary:active {
    background: #252b7a;
    color: #fff !important;
}

/* Donar — acción principal, con elevación sutil para atraer atención */
.fj-btn--secondary {
    background: var(--global-palette1, #fea900);
    color: var(--global-palette3, #08025f) !important;
    box-shadow: 0 4px 16px rgba(254, 169, 0, 0.35);
}
.fj-btn--secondary:hover,
.fj-btn--secondary:focus,
.fj-btn--secondary:active {
    background: var(--global-palette1, #fea900);
    color: var(--global-palette3, #08025f) !important;
    box-shadow: 0 6px 22px rgba(254, 169, 0, 0.45);
}

/* Botón de 3er orden — acción de apoyo, sin peso visual */
.fj-btn--tertiary {
    background: transparent;
    color: #1A1860 !important;
    border: 2px solid #1A1860;
    padding: 10px 26px;
}
.fj-btn--tertiary:hover,
.fj-btn--tertiary:focus,
.fj-btn--tertiary:active {
    background: rgba(26, 24, 96, 0.08);
    color: #1A1860 !important;
}

/* ── Móvil (≤719px) ── */
@media screen and (max-width: 719px) {
    /* Grandes para que el dedo no falle, pero sin estirarse a todo el ancho
       (se veía como botón de app nativa). */
    .fj-btn {
        width: auto;
        min-width: 220px;
        padding: 16px 32px;
        font-size: 1.05rem;
        text-align: center;
    }
}


/* ══════════ contacto-footer ══════════ */

/* Formulario de contacto del footer (Forminator 676, en todas las páginas).
   Contador de caracteres "0 / 180" del mensaje: Forminator lo pinta gris
   #656464, casi invisible sobre el azul marino del footer (contraste ~2.7:1,
   Lighthouse 2026-10-06). Blanco translúcido como el resto del texto del
   footer. Selector con id + !important para ganarle al CSS generado por
   Forminator (style-676.css). */
#forminator-module-676 .forminator-description,
#forminator-module-676 .forminator-description span {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Botón "Enviar Mensaje" en tablet/celular (≤1024px): ancho natural, mínimo
   220px, centrado, como los demás botones del sitio (ver la regla gemela de
   .fj-form-card en formularios.css). */
@media screen and (max-width: 1024px) {
    .forminator-button.forminator-contact-home {
        display: block !important;
        width: fit-content !important;
        min-width: 220px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ══════════ forminator-errores ══════════ */

/* Mensajes de error de validación de Forminator (todos los formularios).
   Forminator los pinta como una franja rosada (#f9e4e8) con texto gris de
   12px, ajena al resto del sitio. Se reemplaza por texto rojo de la paleta
   (palette13, #d7263d — contraste ~5:1 sobre blanco) con un ícono de alerta,
   sin fondo, y el borde del campo en el mismo rojo.
   !important porque el CSS generado por Forminator (style-{id}.css) usa
   selectores con id (#forminator-module-{id}). */

.forminator-ui .forminator-error-message {
    display: flex !important;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    color: var(--global-palette13, #d7263d) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Ícono "!" en círculo, dibujado con máscara para que tome el color del
   texto (currentColor) — así la variante del footer lo cambia sola. */
.forminator-ui .forminator-error-message::before {
    content: '';
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.forminator-ui .forminator-has_error .forminator-input,
.forminator-ui .forminator-has_error .forminator-textarea,
.forminator-ui .forminator-has_error select,
.forminator-ui .forminator-has_error .select2-selection,
.forminator-ui .forminator-has_error .forminator-radio-bullet,
.forminator-ui .forminator-has_error .forminator-checkbox-box {
    border-color: var(--global-palette13, #d7263d) !important;
}

/* Formulario de contacto del footer (676): fondo navy, el rojo no se lee
   (contraste ~2.3:1). Rosa claro, contraste ~10:1 sobre #08025f. */
#colophon .forminator-ui .forminator-error-message {
    color: #ffb3bd !important;
}


/* ══════════ forminator-respuesta ══════════ */

/* Mensajes al enviar un formulario de Forminator (todos los formularios):
   «Enviando…» (.forminator-loading) y el de éxito (.forminator-success).
   Forminator los pinta como franjas planas (gris con un ícono genérico y verde
   menta), ajenas al resto del sitio. Se reemplazan por una tarjeta redondeada
   como los campos (14px), texto navy en negrita, un aro que gira en amarillo
   (palette, #fea900) al enviar y un check en círculo amarillo al terminar.
   !important porque el CSS generado por Forminator (style-{id}.css) usa
   selectores con id (#forminator-module-{id}). */

.forminator-ui .forminator-response-message.forminator-loading,
.forminator-ui .forminator-response-message.forminator-success {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px !important;
    padding: 16px 20px !important;
    border: 2px solid #e4e7ee !important;
    border-radius: 14px !important;
    background: #f5f6ff !important;
    box-shadow: none !important;
    color: #1A1860 !important;
    font-family: var(--global-body-font-family, 'Manrope', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

/* El mensaje llega a veces dentro de un <p> y a veces suelto. */
.forminator-ui .forminator-response-message.forminator-loading p,
.forminator-ui .forminator-response-message.forminator-success p {
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

.forminator-ui .forminator-response-message.forminator-success {
    border-color: #fea900 !important;
    background: #fff8e6 !important;
}

/* Aro que gira (reemplaza el ícono «◌» de Forminator). */
.forminator-ui .forminator-response-message.forminator-loading::before {
    content: '' !important;
    position: static !important;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 3px solid rgba(26, 24, 96, 0.15);
    border-top-color: #fea900;
    border-radius: 50%;
    animation: fj-form-giro 0.8s linear infinite !important;
}

/* Check en círculo amarillo. */
.forminator-ui .forminator-response-message.forminator-success::before {
    content: '';
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fea900 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1860' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 16px no-repeat;
}

@media screen and (max-width: 719px) {
    .forminator-ui .forminator-response-message.forminator-loading,
    .forminator-ui .forminator-response-message.forminator-success {
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
    }
}

@keyframes fj-form-giro {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .forminator-ui .forminator-response-message.forminator-loading::before {
        animation-duration: 2.4s !important;
    }
}

/* Formulario de contacto del footer (676): fondo navy. Tarjeta translúcida y
   texto blanco; el amarillo se mantiene. */
#colophon .forminator-ui .forminator-response-message.forminator-loading,
#colophon .forminator-ui .forminator-response-message.forminator-success {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

#colophon .forminator-ui .forminator-response-message.forminator-success {
    border-color: #fea900 !important;
}

#colophon .forminator-ui .forminator-response-message.forminator-loading::before {
    border-color: rgba(255, 255, 255, 0.25);
    border-top-color: #fea900;
}


/* ══════════ footer-menu ══════════ */

/* Menú "Explora" del footer (widget Menú de navegación en Footer → Top,
   columna 1, debajo de "Síguenos"). Kadence le pone a los widgets el color
   de texto/enlace general (navy #08025f), el mismo del fondo del footer:
   título y enlaces quedaban invisibles. Mismo blanco que "Síguenos" y el
   resto del texto del footer; hover en el dorado de la marca (contraste
   ~9:1 sobre el navy). */
#colophon .widget_nav_menu .widget-title {
    color: var(--global-palette8, #f5f6ff);
}

#colophon .widget_nav_menu .menu li {
    margin: 0 0 0.5em;
}

#colophon .widget_nav_menu .menu a {
    position: relative;
    display: inline-block; /* el <a> de Kadence es block: el 30% se medía contra toda la columna */
    color: var(--global-palette8, #f5f6ff);
    text-decoration: none;
    transition: color 0.2s ease;
}

#colophon .widget_nav_menu .menu a:hover,
#colophon .widget_nav_menu .menu a:focus-visible {
    color: var(--global-palette1, #fea900);
}

/* Subrayado parcial (30% del ancho) igual al del item activo del menú
   principal (sección «header-nav»). */
#colophon .widget_nav_menu .menu a:hover::after,
#colophon .widget_nav_menu .menu a:focus-visible::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 30%;
    height: 2px;
    background: var(--global-palette1, #fea900);
}


/* ══════════ scroll-up ══════════ */

/* Botón "subir" de Kadence (todas las páginas). Forma, colores e ícono se
   configuran en Apariencia → Personalizar → General → Scroll to top:
   círculo blanco + flecha ↑ azul marino (2026-10-05). Discreto a propósito:
   el círculo azul marino relleno se probó y resaltaba como si fuera una
   acción importante; y es una flecha (no chevron) para no confundirlo con
   los íconos de los FAQ. Aquí solo el borde fino y la sombra suave, que el
   Customizer no ofrece. */
#kt-scroll-up {
    border: 1px solid #d8dbe8;
    box-shadow: 0 2px 8px rgba(26, 24, 96, 0.12);
}


/* ══════════ header-nav ══════════ */

/* ─── Menú — item activo según sección visible (home) o página actual (resto) ─
   En el home, la fuente de verdad es .fj-nav-active (scrollspy de header.js).
   No se puede usar .current-menu-item ahí: como "Sobre nosotros" y "Nuestro
   impacto" son enlaces a /#ancla, WordPress los marca current-menu-item por
   coincidir la ruta "/" con el home, sin importar el hash — junto con
   "Inicio" quedarían los 3 marcados a la vez.
   En páginas internas no hay secciones que trackear (header.js no agrega
   .fj-nav-active ahí), así que se usa .current-menu-item de WordPress, que
   ahí sí es correcto y único.
   ────────────────────────────────────────────────────────────────────────── */

body.home .main-navigation .primary-menu-container > ul > li.menu-item.fj-nav-active > a,
body:not(.home) .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
    color: var(--global-palette3);
    position: relative;
}

body.home .main-navigation .primary-menu-container > ul > li.menu-item.fj-nav-active > a::after,
body:not(.home) .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a::after {
    content: '';
    position: absolute;
    /* El <a> trae padding-left: calc(1.3em / 2) del tema Kadence; sin este
       offset la línea arranca en el borde del <a>, antes de donde empieza
       la palabra. */
    left: calc(1.3em / 2);
    bottom: -2px;
    width: 30%;
    height: 2px;
    background: var(--global-palette1, #fea900);
}

body.home .mobile-navigation ul li.fj-nav-active > a,
body:not(.home) .mobile-navigation ul li.current-menu-item > a {
    color: var(--global-palette-highlight);
}

/* En el home, current-menu-item queda "pegado" en varios items a la vez
   (ver nota arriba) y en el que no coincide con la sección visible hay que
   apagarlo explícitamente para que no compita con el color de Kadence. */
body.home .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item:not(.fj-nav-active) > a {
    color: var(--global-palette4);
}

body.home .mobile-navigation ul li.current-menu-item:not(.fj-nav-active) > a {
    color: var(--global-palette3);
}

/* El menú móvil traía la tipografía decorativa del starter template de
   Kadence (Sorts Mill Goudy cursiva), nunca ajustada a las fuentes reales
   del sitio (Manrope en menús/UI, igual que el menú de escritorio).
   !important porque Kadence imprime su CSS generado DESPUÉS de este
   archivo con la misma especificidad exacta (.mobile-navigation ul li),
   así que sin esto gana el suyo solo por ir después en el HTML. */
.mobile-navigation ul li {
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    font-family: var(--global-primary-nav-font-family, 'Manrope', sans-serif) !important;
}

/* Barra dorada institucional a la izquierda del item seleccionado, de la
   altura completa del <li> (a diferencia del subrayado parcial de
   escritorio, que no tiene sentido en una lista vertical apilada). */
.mobile-navigation ul li {
    position: relative;
    padding-left: 16px;
}

body.home .mobile-navigation ul li.fj-nav-active::before,
body:not(.home) .mobile-navigation ul li.current-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--global-palette1, #fea900);
}

/* La copia de "Aplicar a una beca" / "Donar" que vive dentro del menú
   hamburguesa (Kadence duplica el bloque HTML del header para mobile) no
   debe depender del scroll como la de escritorio: dentro del menú siempre
   tienen que verse, sin importar si ya se pasó el hero o no. Gana por
   especificidad sobre la regla base ".header-actions{opacity:0;...}" del
   Additional CSS, sin importar el orden de impresión. */
.mobile-html-inner .header-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Header de Kadence: siempre es position:fixed (clase "item-is-fixed"), y
   usa un "top" inline igual a la distancia que había entre el header y el
   borde de la página al cargar — así que, en reposo ("item-at-start"), ese
   top coincide con la altura de la barra de anuncios y el header queda bien
   pegado justo debajo de ella. Pero al hacer scroll ("item-is-stuck") sigue
   usando ese mismo top, sin enterarse de que la barra (que no es sticky) ya
   desapareció — deja un hueco vacío del alto de la barra en vez de pegarse
   al borde real del viewport. Se corrige solo en el estado scrolleado; en
   reposo no se toca para no tapar la barra de anuncios. */
.site-header-inner-wrap.item-is-fixed.item-is-stuck {
    top: 0 !important;
}


/* ══════════ error-pages ══════════ */

/* ─── Páginas de error/sistema FUNJOSE (404, 500, offline, búsqueda) ───────
   Usado por 404.php (y las páginas equivalentes que se agreguen después)
   ──────────────────────────────────────────────────────────────────────── */

.fj-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    padding: 120px 28px 140px;
    animation: fj-error-fadein 0.7s ease both;
}

.fj-error-page__code {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(3.5rem, 9vw, 6rem);
    line-height: 1;
    color: var(--global-palette1, #fea900);
    margin: 0 0 8px;
}

.fj-error-page__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    color: #1A1860;
    line-height: 1.25;
    margin: 0 0 20px;
}

.fj-error-page__desc {
    font-size: 1.125rem;
    color: #555c74;
    line-height: 1.7;
    margin: 0 0 36px;
    max-width: 480px;
}

.fj-error-page__home {
    margin-bottom: 44px;
}

.fj-error-page__search {
    width: 100%;
    max-width: 420px;
}

.fj-error-page__search .search-form {
    display: flex;
    gap: 10px;
    width: 100%;
}

.fj-error-page__search .search-form label {
    flex: 1;
    margin: 0;
}

.fj-error-page__search .search-field {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    border: 2px solid #e2e4ee;
    border-radius: 16px;
    font-size: 1rem;
    color: #1A1860;
}

.fj-error-page__search .search-field:focus {
    outline: none;
    border-color: #1A1860;
}

.fj-error-page__search .search-submit {
    padding: 12px 24px;
    border: none;
    border-radius: 16px;
    background: #1A1860;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.fj-error-page__search .search-submit:hover {
    background: #252b7a;
}

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

@media screen and (max-width: 719px) {
    .fj-error-page {
        padding: 90px 24px 100px;
    }
    .fj-error-page__search .search-form {
        flex-direction: column;
    }
}