/* =====================================================
   LANDING FE Y ACCIÓN — Alta Academia / Institutos Bíblicos
   Página standalone (Layout = null): Views/FeyAccion/Landing.cshtml.
   Se carga junto a nuevo-diseno-landing.css, del que reutiliza el body, el navbar
   (.land-navbar) y el footer (.aa-footer), idénticos a los de Home/About.
   Todo lo demás es propio (.fya-*), con las medidas del diseño de Figma (frame de 1440px).
===================================================== */

:root {
    --fya-bg:          #F8F9FE;
    --fya-navy:        #001A3F;
    --fya-text:        #666666;
    --fya-yellow:      #FFBC54;
    --fya-yellow-hov:  #FFB03A;
    --fya-yellow-100:  #FFECCF;
    --fya-orange:      #FF762C;
    --fya-orange-hov:  #F26515;
    --fya-teal:        #50CFBC;
    --fya-cyan-100:    #CBEEFF;
    --fya-radius-lg:   24px;
    --fya-font-h:      'Poppins', sans-serif;
    --fya-font-b:      'Public Sans', 'Poppins', sans-serif;
}

body.landing-body.fya-body {
    background: var(--fya-bg);
    color: var(--fya-navy);
    font-family: var(--fya-font-b);
}

.fya-body h1,
.fya-body h2,
.fya-body h3,
.fya-body p { margin: 0; }

/* ══════════════════════════════════════════════════
   NAVBAR: mismo navbar de Home/About, con los botones en el amarillo del diseño de Figma
══════════════════════════════════════════════════ */
.fya-body .land-btn-login { background: var(--fya-yellow); }
.fya-body .land-btn-login:hover { background: var(--fya-yellow-hov); }

.fya-body .land-lang-wrap .DivIdiomas { background: var(--fya-yellow) !important; }
.fya-body .land-lang-wrap .DivIdiomas:hover { background: var(--fya-yellow-hov) !important; }

/* ══════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════ */
.fya-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 32px;
    border: none;
    border-radius: var(--fya-radius-lg);
    color: #FFFFFF !important;
    font-family: var(--fya-font-b);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease;
}

.fya-btn--orange { background: var(--fya-orange); }
.fya-btn--orange:hover { background: var(--fya-orange-hov); }

/* ══════════════════════════════════════════════════
   HERO (banner + botón)
══════════════════════════════════════════════════ */
.fya-hero {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 20px auto 0;
}

.fya-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Posición del botón sobre el banner: 80px a la izquierda y 372px desde arriba
   en el frame de 1440x526 (en porcentaje para que acompañe al banner al escalar). */
.fya-hero__btn {
    position: absolute;
    left: 5.5556%;
    top: 70.72%;
}

/* ══════════════════════════════════════════════════
   ¿QUIÉNES SON FE Y ACCIÓN?
══════════════════════════════════════════════════ */
.fya-about {
    padding: 64px max(24px, calc((100% - 1200px) / 2));
}

.fya-about__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.fya-pill {
    display: inline-flex;
    align-items: center;
    background: var(--fya-yellow-100);
    border-radius: 999px;
    color: var(--fya-navy);
    font-family: var(--fya-font-b);
    white-space: nowrap;
}

.fya-pill--sm {
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.fya-pill--md {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

/* 0.25px más ancho que el contenedor: la primera línea del texto ("…Abordamos cada tema") mide 1200.05px en el
   navegador y la tercera con "pastor" 1200.5px; con 1200.25px los saltos de línea coinciden con los de Figma. */
.fya-about__text { display: flex; flex-direction: column; gap: 12px; width: calc(100% + 0.25px); }

.fya-title {
    font-family: var(--fya-font-h);
    font-weight: 700;
    color: var(--fya-navy);
}

.fya-title--h1 { font-size: 48px; line-height: 56px; }
.fya-title--h2 { font-size: 36px; line-height: 44px; }

.fya-body-lg {
    font-family: var(--fya-font-b);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--fya-text);
}

.fya-about__p-intro { margin-bottom: 26px !important; }

.fya-about__mission {
    font-family: var(--fya-font-h);
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    color: var(--fya-text);
}

/* ══════════════════════════════════════════════════
   APP PARA PADRES
══════════════════════════════════════════════════ */
.fya-app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 40px max(20px, calc((100% - 1280px) / 2));
}

.fya-app__card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: none;
    width: 656px;
    padding: 40px 48px;
    background: #FFFFFF;
    border-radius: var(--fya-radius-lg);
    box-shadow: 0 4px 12px var(--fya-cyan-100);
}

.fya-app__info { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.fya-app__copy { display: flex; flex-direction: column; gap: 12px; }

.fya-app__list { display: flex; flex-direction: column; gap: 8px; }

.fya-app__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--fya-font-b);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--fya-navy);
}

.fya-app__list li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fya-teal);
}

.fya-app__stores { display: flex; align-items: center; gap: 24px; }

.fya-app__stores a { display: block; }
.fya-app__stores img { height: 56px; width: auto; max-width: none; }

/* Mockup de los celulares: 563x688, con el degradado detrás */
.fya-app__visual {
    position: relative;
    flex: none;
    width: 563px;
    height: 688px;
}

.fya-app__glow {
    position: absolute;
    left: 0;
    top: 61px;
    width: 563px;
    height: 566px;
    max-width: none;
    pointer-events: none;
}

.fya-app__mockup {
    position: absolute;
    left: 7px;
    top: 0;
    width: 550px;
    height: 688px;
    max-width: none;
}

/* ══════════════════════════════════════════════════
   POR QUÉ ELEGIR ALTA ACADEMIA
══════════════════════════════════════════════════ */
.fya-benefits {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 80px 64px;
}

.fya-benefits__title { text-align: center; }

.fya-benefits__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
}

.fya-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 216px;
    min-height: 228px;
    padding: 24px 20px;
    background: #FFFFFF;
    border-radius: var(--fya-radius-lg);
    box-shadow: 0 4px 10px var(--fya-cyan-100);
    text-align: center;
}

.fya-benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 68px;
    height: 68px;
    background: var(--fya-yellow-100);
    border-radius: var(--fya-radius-lg);
}

.fya-benefit__icon img { width: 40px; height: 40px; }

/* 4px más ancho que la tarjeta menos su padding: el texto de 12px de "Mayor retención" mide 176.7px y en el diseño cabe en 2 líneas */
.fya-benefit__text { display: flex; flex-direction: column; align-items: center; gap: 12px; width: calc(100% + 4px); margin: 0 -2px; }

.fya-benefit__title {
    font-family: var(--fya-font-h);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--fya-navy);
}

.fya-benefit__desc {
    font-family: var(--fya-font-b);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: var(--fya-text);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .fya-app { flex-direction: column; padding: 40px 24px; }
    .fya-benefits { padding: 64px 24px; }
}

@media (max-width: 767px) {
    .fya-btn { white-space: normal; text-align: center; max-width: 100%; }

    .fya-hero__btn { position: static; margin: 16px 20px 0; width: fit-content; }
    .fya-hero { margin-top: 12px; }

    .fya-about { padding: 40px 20px; }
    .fya-title--h1 { font-size: 34px; line-height: 42px; }
    .fya-title--h2 { font-size: 28px; line-height: 36px; }

    .fya-app__card { width: 100%; padding: 28px 20px; }
    .fya-app__stores { flex-wrap: wrap; gap: 12px; }
    .fya-app__visual { width: 100%; max-width: 563px; height: auto; aspect-ratio: 563 / 688; }
    .fya-app__glow { left: 0; top: 8.9%; width: 100%; height: auto; }
    .fya-app__mockup { left: 1.24%; width: 97.7%; height: auto; }

    .fya-benefits { gap: 32px; padding: 48px 20px; }
    .fya-benefits__grid { gap: 20px; }
}