/* ==========================================================================
   FIP THEME — Fundación Colombiana para las Inmunodeficiencias Primarias
   Navbar flotante · Sidebar institucional · Hero · Stats flotante · About
   VERSIÓN 100% RESPONSIVE — revisada
   ========================================================================== */

/* ------------------------------
   1. Tokens de diseño
------------------------------ */
:root {
    --fip-blue-900: #0A2C5C;
    --fip-blue-700: #14428C;
    --fip-blue-500: #2E6FE3;
    --fip-blue-50:  #EFF4FC;
    --fip-green-500:#3FAE73;
    --fip-red-500:  #E0364C;
    --fip-red-700:  #C22A3E;
    --fip-ink:      #101B2D;
    --fip-slate:    #5B6B85;
    --fip-white:    #FFFFFF;

    --fip-font-display: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
    --fip-font-accent: "Fraunces", "Georgia", serif;
    --fip-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

    --fip-radius-pill: 999px;
    --fip-radius-lg: 48px;
    --fip-radius-md: 16px;

    --fip-shadow-soft: 0 8px 30px rgba(10, 44, 92, 0.08);
    --fip-shadow-lift: 0 16px 40px rgba(10, 44, 92, 0.14);

    --fip-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Margen usado para que el hero y la barra de estadísticas
       floten como tarjetas separadas del borde del viewport */
    --fip-page-inset: clamp(12px, 1.6vw, 28px);

    /* Tamaño de botón unificado para toda la coherencia visual del sitio */
    --fip-btn-pad-y: 16px;
    --fip-btn-pad-x: 28px;
    --fip-btn-font: 0.96rem;
}

/* ------------------------------
   2. Reset ligero de scope
------------------------------ */
.fip-navbar, .fip-sidebar, .fip-hero, .fip-overlay, .fip-whatsapp,
.fip-stats-float, .fip-about, .fip-impact {
    font-family: var(--fip-font-body);
    box-sizing: border-box;
    max-width: 100vw; /* AJUSTE: evita que cualquier sección genere scroll horizontal */
}
.fip-navbar *, .fip-sidebar *, .fip-hero *,
.fip-stats-float *, .fip-about *, .fip-impact * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* AJUSTE: quita el flash gris al tocar en móvil */
}

/* ==========================================================================
   2.5 TOPBAR — barra superior fina (teléfono + redes sociales)
   Solo en escritorio/tablet ancho (≥901px); en móvil el sidebar ya
   incluye el teléfono... el sidebar reutiliza los mismos íconos sociales.
   ========================================================================== */
.fip-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 38px;
    background: var(--fip-blue-900);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--fip-font-body);
    font-size: 0.82rem;
    transition: transform 300ms var(--fip-ease), opacity 300ms var(--fip-ease);
}
/* AJUSTE: mismo contenedor centrado (max-width + padding-left) que
   .fip-navbar-inner, para que el teléfono arranque exactamente desde
   donde arranca el logo en la barra de abajo, en vez de pegado al
   borde de la pantalla. */
.fip-topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 max(24px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));
}
.fip-topbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.fip-topbar-phone i { font-size: 0.95rem; }
.fip-topbar-phone:hover { color: #fff; }

.fip-topbar-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 32px;
}
.fip-topbar-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.fip-topbar-social:hover,
.fip-topbar-social:focus-visible {
    background: #fff;
    color: var(--fip-blue-900);
    transform: translateY(-1px);
}

/* Se oculta al hacer scroll (misma lógica que .fip-navbar.scrolled) para
   dejarle todo el protagonismo a la píldora de navegación */
.fip-topbar.hide {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   3. NAVBAR — píldora flotante
   ========================================================================== */
/* AJUSTE: se abandona el estilo "píldora flotante" — el diseño de
   referencia (SOCIN) usa una barra plana, sin fondo redondeado ni
   tarjeta de vidrio separada. El fondo (.fip-navbar) va de borde a
   borde igual que la barra superior; el contenido (.fip-navbar-inner)
   se centra por dentro con su propio ancho máximo, para que no quede
   un hueco visible en pantallas muy anchas. */
.fip-navbar {
    position: fixed;
    top: 38px; /* pegada justo debajo de la barra superior (38px de alto) */
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--fip-shadow-soft);
    transition: top 300ms var(--fip-ease), box-shadow 300ms var(--fip-ease);
}
.fip-navbar-inner {
    display: flex;
    align-items: center;
    gap: 10px; /* AJUSTE: reducido de 16px para dejarle más ancho al menú */
    /* AJUSTE: ampliado de 1400px a 1560px — el logo con nombre completo
       ahora ocupa más ancho, y a este límite los enlaces del menú
       alcanzaban a desbordarse en pantallas anchas */
    max-width: 1560px;
    margin: 0 auto;
    /* AJUSTE: padding izquierdo reducido al mínimo para correr el logo
       lo más posible hacia la izquierda y darle ese espacio de vuelta a
       la píldora del menú */
    padding: 10px max(24px, env(safe-area-inset-right)) 10px max(4px, env(safe-area-inset-left));
    transition: padding 300ms var(--fip-ease);
}

.fip-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    z-index: 2;
}
/* AJUSTE: logo con el nombre de la Fundación ya integrado en la imagen
   (logo-fip-horizontal.webp), en vez del logo + texto superpuesto.
   Visible en celular (ahí el menú de enlaces ya está oculto, se usa el
   sidebar hamburguesa, así que no compite por espacio) y en pantallas
   anchas de escritorio (≥1440px); oculto solo en el rango intermedio
   (901-1439px) donde el menú de enlaces sí está visible y necesita todo
   el ancho disponible (ver el problema de enlaces "ocultos" que ya
   arreglamos) y al hacer scroll, donde se usa el ícono compacto en su
   lugar (.fip-brand-logo). */
.fip-brand {
    min-width: 0; /* permite que el logo/nombre se achique sin desbordar */
}
.fip-brand-full {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-left: 8px;
    /* AJUSTE: ya no necesita fondo propio tipo "vidrio" — ahora vive
       sobre el fondo sólido de .fip-navbar, no directo sobre la foto. */
}
.fip-brand-full img {
    display: block;
    height: 96px;
    width: auto;
}

.fip-brand-logo {
    display: none; /* por defecto se usa el logo con el nombre completo */
    height: 48px;
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(10, 44, 92, 0.18));
    transition: height 300ms var(--fip-ease);
}

/* AJUSTE: la píldora ahora usa grid de 3 columnas para poder centrar
   los enlaces de verdad en el centro de la píldora, sin importar
   cuánto espacio ocupe el botón "Donar" al otro lado. */
.fip-navbar-pill {
    flex: 1 1 auto;
    min-width: 0; /* AJUSTE: permite que el pill se comprima en vez de desbordar */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.fip-nav-links {
    position: relative;
    grid-column: 2;
    justify-self: center; /* AJUSTE: centra los enlaces dentro de la píldora */
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    /* AJUSTE: red de seguridad — si en algún ancho intermedio los links no caben,
       se desplazan con scroll horizontal en vez de romper el layout o solaparse.
       El mask-image difumina los bordes cuando hay contenido oculto, para que
       no parezca que el link simplemente desapareció. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}
.fip-nav-links::-webkit-scrollbar { display: none; }
.fip-nav-links li { display: flex; flex: 0 0 auto; }
.fip-nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--fip-ink);
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    white-space: nowrap;
    transition: color 200ms var(--fip-ease);
}
.fip-nav-links a:hover,
.fip-nav-links a:focus-visible { color: var(--fip-blue-700); }
.fip-nav-links a.active { color: var(--fip-blue-700); font-weight: 600; }

/* Firma visual: línea azul deslizante, sin fondo sólido */
.fip-nav-indicator {
    position: absolute;
    bottom: 4px;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--fip-blue-500);
    border-radius: var(--fip-radius-pill);
    opacity: 0;
    transition: transform 320ms var(--fip-ease), width 320ms var(--fip-ease), opacity 200ms ease;
    pointer-events: none;
}

.fip-pill-actions {
    grid-column: 3;
    justify-self: end; /* AJUSTE: se ancla a la derecha de la píldora */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fip-nav-login {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(10, 44, 92, 0.12);
    background: var(--fip-white);
    color: var(--fip-blue-900);
    font-size: 1.05rem;
    text-decoration: none;
    transition: background 200ms var(--fip-ease), color 200ms var(--fip-ease), transform 200ms var(--fip-ease);
}
.fip-nav-login:hover { background: var(--fip-blue-50); color: var(--fip-blue-700); transform: translateY(-1px); }

.fip-btn-donar {
    flex: 0 0 auto; /* AJUSTE: ahora vive fuera de la píldora del menú, directo en .fip-navbar */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px; /* AJUSTE: más compacto para dejarle más ancho al menú */
    background: var(--fip-blue-700);
    color: var(--fip-white);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    transition: background 200ms var(--fip-ease), transform 200ms var(--fip-ease);
}
.fip-btn-donar:hover { background: var(--fip-blue-900); transform: translateY(-1px); color: var(--fip-white); }
.fip-btn-donar i.bi-arrow-right { transition: transform 200ms var(--fip-ease); }
.fip-btn-donar:hover i.bi-arrow-right { transform: translateX(2px); }

.fip-toggler {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(10, 44, 92, 0.1);
    background: var(--fip-white);
    box-shadow: var(--fip-shadow-soft);
    color: var(--fip-blue-900);
    font-size: 1.2rem;
    cursor: pointer;
}

/* Estado scrolled: la barra superior se oculta (ver .fip-topbar.hide), así
   que la barra principal sube a ocupar ese espacio y se vuelve más compacta.
   El logo completo (con el nombre) se mantiene visible siempre — solo se
   reduce un poco de tamaño para ganar espacio vertical. */
.fip-navbar.scrolled {
    top: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    box-shadow: var(--fip-shadow-lift);
}
.fip-navbar.scrolled .fip-brand-full img { height: 56px; }

/* ==========================================================================
   4. SIDEBAR — panel institucional azul
   ========================================================================== */
.fip-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(10, 20, 40, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 340ms var(--fip-ease);
}
.fip-overlay.open { opacity: 1; visibility: visible; }
.fip-overlay.closing { opacity: 0; }

.fip-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    width: min(420px, 88vw);
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, var(--fip-blue-900) 0%, #0D3568 100%);
    color: var(--fip-white);
    display: flex;
    flex-direction: column;
    padding: 28px 28px 32px;
    padding-right: max(28px, calc(28px + env(safe-area-inset-right)));
    padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom))); /* AJUSTE: respeta el "notch" inferior en iPhones */
    transform: translateX(100%);
    transition: transform 340ms var(--fip-ease);
    box-shadow: -20px 0 60px rgba(0,0,0,0.25);
}
.fip-sidebar.open { transform: translateX(0); }
.fip-sidebar.closing { transform: translateX(100%); }

.fip-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
}
.fip-sidebar-logo { height: 80px; width: auto; }
.fip-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: var(--fip-white);
    cursor: pointer;
    transition: background 200ms var(--fip-ease);
}
.fip-sidebar-close:hover { background: rgba(255,255,255,0.12); }

.fip-sidebar-nav { flex: 1 1 auto; }
.fip-sidebar-nav ul { list-style: none; margin: 0; padding: 0; }
.fip-sidebar-nav li {
    opacity: 0;
    transform: translateX(16px);
}
.fip-sidebar-nav li.visible {
    animation: fip-slide-in 420ms var(--fip-ease) forwards;
}
.fip-sidebar-nav li.animate-out { opacity: 0; }
@keyframes fip-slide-in {
    to { opacity: 1; transform: translateX(0); }
}

.fip-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    color: var(--fip-white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: gap 200ms var(--fip-ease), color 200ms var(--fip-ease);
}
.fip-sidebar-nav a:hover,
.fip-sidebar-nav a.active { color: #BFD6FF; gap: 22px; }

.fip-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    font-size: 1rem;
    flex: 0 0 auto;
}
.fip-sidebar-nav a.active .fip-nav-icon { background: var(--fip-green-500); color: var(--fip-blue-900); }

.fip-nav-label {
    flex: 1 1 auto;
    min-width: 0; /* AJUSTE: etiquetas largas ya no empujan la flecha fuera del panel */
    font-size: 1.05rem;
    font-weight: 500;
}

.fip-nav-arrow {
    flex: 0 0 auto;
    opacity: 0.5;
    transition: transform 200ms var(--fip-ease), opacity 200ms var(--fip-ease);
}
.fip-sidebar-nav a:hover .fip-nav-arrow { transform: translateX(4px); opacity: 1; }

.fip-sidebar-footer {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fip-sidebar-donar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--fip-white);
    color: var(--fip-blue-900);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    transition: transform 200ms var(--fip-ease);
}
.fip-sidebar-donar:hover { transform: translateY(-2px); color: var(--fip-blue-900); }

.fip-sidebar-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--fip-radius-pill);
    transition: background 200ms var(--fip-ease), color 200ms var(--fip-ease);
}
.fip-sidebar-login:hover { background: rgba(255, 255, 255, 0.08); color: var(--fip-white); }

.fip-sidebar-socials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* AJUSTE: no se comprimen ni desbordan si el panel es muy angosto */
    gap: 12px;
}
.fip-sidebar-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--fip-white);
    transition: background 200ms var(--fip-ease);
}
.fip-sidebar-social:hover { background: rgba(255,255,255,0.12); color: var(--fip-white); }

/* ==========================================================================
   5. WhatsApp flotante
   ========================================================================== */
.fip-whatsapp {
    position: fixed;
    right: max(24px, calc(16px + env(safe-area-inset-right)));
    bottom: max(24px, calc(16px + env(safe-area-inset-bottom)));
    z-index: 900;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fip-green-500);
    color: var(--fip-white);
    font-size: 1.5rem;
    border-radius: 50%;
    box-shadow: var(--fip-shadow-lift);
    transition: transform 200ms var(--fip-ease);
}
.fip-whatsapp:hover { transform: scale(1.06); color: var(--fip-white); }

/* ==========================================================================
   6. HERO — fondo con foto + collage a la derecha
   ========================================================================== */
.fip-hero {
    position: relative;
    overflow: hidden;
    background: var(--fip-white);
}

.fip-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.fip-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}
.fip-hero-overlay {
    position: absolute;
    inset: 0;
    /* Desvanece la foto hacia blanco por la izquierda, para que el
       texto sea legible; el lado derecho queda más transparente
       para dejar ver la foto detrás del collage */
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.9) 32%,
        rgba(255, 255, 255, 0.55) 52%,
        rgba(255, 255, 255, 0.1) 68%,
        rgba(255, 255, 255, 0) 82%
    );
}

.fip-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    /* AJUSTE: padding inferior reducido de clamp(80px,8vw,120px) a clamp(56px,6vw,80px)
       para que no quede una franja del hero visible debajo de la tarjeta flotante
       de estadísticas (que sube 56px con margin-top negativo) */
    padding: clamp(140px, 110px + 6vw, 190px) 24px clamp(56px, 6vw, 80px);
}

.fip-hero-copy { min-width: 0; max-width: 560px; } /* AJUSTE: min-width:0 evita overflow del grid item */

.fip-hero-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--fip-ink);
    margin: 0 0 20px;
    max-width: 16ch;
    overflow-wrap: break-word; /* AJUSTE: palabras largas no rompen el layout en pantallas angostas */
}

.fip-hero-highlight {
    display: block;
    color: var(--fip-blue-700);
}

.fip-hero-text {
    font-family: var(--fip-font-body);
    line-height: 1.65;
    color: var(--fip-slate);
    max-width: 46ch;
    margin: 0 0 32px;
}

.fip-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ------------------------------
   Collage (imagen única a la derecha)
------------------------------ */
.fip-hero-collage {
    min-width: 0; /* AJUSTE */
    display: flex;
    justify-content: center;
    align-items: center;
}
.fip-collage-img {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
}

/* ==========================================================================
   6.1 BOTONES — sistema unificado (mismo tamaño/radio en todas las variantes)
   ========================================================================== */
.fip-btn-primary,
.fip-btn-secondary,
.fip-btn-danger,
.fip-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--fip-btn-pad-y) var(--fip-btn-pad-x);
    font-family: var(--fip-font-body);
    font-weight: 600;
    font-size: var(--fip-btn-font);
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    white-space: nowrap;
    border: 1.5px solid transparent;
    transition: background 200ms var(--fip-ease), color 200ms var(--fip-ease),
                border-color 200ms var(--fip-ease), transform 200ms var(--fip-ease);
}
.fip-btn-primary i, .fip-btn-secondary i, .fip-btn-danger i, .fip-btn-outline i {
    transition: transform 200ms var(--fip-ease);
    font-size: 0.9em;
}

/* Primario: azul sólido, usado como CTA principal (Hero, Sidebar) */
.fip-btn-primary {
    background: var(--fip-blue-700);
    color: var(--fip-white);
    box-shadow: 0 10px 30px rgba(20, 66, 140, 0.4);
}
.fip-btn-primary:hover {
    background: var(--fip-blue-500);
    transform: translateY(-2px);
    color: var(--fip-white);
}
.fip-btn-primary:hover i.bi-arrow-right { transform: translateX(3px); }

/* Secundario: contorno neutro, usado sobre fondos claros */
.fip-btn-secondary {
    background: transparent;
    color: var(--fip-ink);
    border-color: rgba(10, 44, 92, 0.16);
}
.fip-btn-secondary:hover {
    border-color: var(--fip-blue-700);
    background: var(--fip-blue-50);
    color: var(--fip-ink);
}

/* Variante fantasma para usarse sobre fotos oscuras */
.fip-btn-secondary--ghost {
    color: var(--fip-white);
    border-color: rgba(255, 255, 255, 0.5);
}
.fip-btn-secondary--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--fip-white);
    color: var(--fip-white);
}

/* Danger/CTA de donación: rojo sólido, mismo tamaño que primary */
.fip-btn-danger {
    background: var(--fip-red-500);
    color: var(--fip-white);
    box-shadow: 0 10px 26px rgba(224, 54, 76, 0.32);
}
.fip-btn-danger:hover {
    background: var(--fip-red-700);
    transform: translateY(-2px);
    color: var(--fip-white);
}

/* Outline: contorno azul, usado en contenido interno (ej. sección About) */
.fip-btn-outline {
    background: transparent;
    color: var(--fip-blue-700);
    border-color: var(--fip-blue-500);
}
.fip-btn-outline:hover {
    background: var(--fip-blue-700);
    color: var(--fip-white);
    border-color: var(--fip-blue-700);
    transform: translateY(-1px);
}
.fip-btn-outline:hover i.bi-arrow-right { transform: translateX(3px); }

/* ==========================================================================
   6.5 SECCIÓN DE IMPACTO — banda de estadísticas independiente del hero
   Fondo con gradiente + formas decorativas, tarjetas con hover y
   contador animado (ver script fip-impact-counters al final del body).
   ========================================================================== */
.fip-impact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--fip-blue-900) 0%, #0D3568 55%, var(--fip-blue-700) 100%);
    padding: clamp(56px, 6vw, 88px) 24px;
}

/* Formas decorativas de fondo, puramente estéticas */
.fip-impact::before,
.fip-impact::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.fip-impact::before {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -120px;
    background: radial-gradient(circle, rgba(46, 111, 227, 0.35) 0%, transparent 70%);
}
.fip-impact::after {
    width: 320px;
    height: 320px;
    bottom: -160px;
    left: -80px;
    background: radial-gradient(circle, rgba(63, 174, 115, 0.25) 0%, transparent 70%);
}

.fip-impact-inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
}

.fip-impact-head {
    max-width: 640px;
    margin: 0 0 clamp(32px, 4vw, 48px);
}
.fip-impact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8FC7FF;
    margin: 0 0 12px;
}
.fip-impact-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: #8FC7FF;
    display: inline-block;
}
.fip-impact-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
    color: var(--fip-white);
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}
.fip-impact-title em {
    font-family: var(--fip-font-accent);
    font-style: italic;
    font-weight: 500;
    color: #8FC7FF;
}

.fip-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.fip-impact-card {
    position: relative;
    min-width: 0; /* AJUSTE */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--fip-radius-md);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 260ms var(--fip-ease), background 260ms var(--fip-ease), border-color 260ms var(--fip-ease);
}
.fip-impact-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
}

.fip-impact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    flex: 0 0 auto;
}
.fip-impact-icon--blue   { background: rgba(46, 111, 227, 0.18); color: #8FC7FF; }
.fip-impact-icon--green  { background: rgba(63, 174, 115, 0.18); color: #6FE0A6; }
.fip-impact-icon--pink   { background: rgba(214, 71, 127, 0.18); color: #FF9BBE; }
.fip-impact-icon--purple { background: rgba(124, 77, 203, 0.18); color: #C7A8FF; }

.fip-impact-number {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: wrap; /* AJUSTE: números grandes con sufijo no se cortan en tarjetas angostas */
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
    color: var(--fip-white);
    line-height: 1;
}
.fip-impact-number .fip-impact-suffix {
    font-size: 0.55em;
    font-weight: 700;
    color: #8FC7FF;
}

.fip-impact-label {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
}

/* Línea de progreso decorativa: se anima cuando la tarjeta entra en pantalla */
.fip-impact-bar {
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--fip-radius-pill);
    overflow: hidden;
}
.fip-impact-bar span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: var(--fip-radius-pill);
    background: linear-gradient(90deg, #2E6FE3, #6FE0A6);
    transition: width 1100ms var(--fip-ease);
}
.fip-impact-card.in-view .fip-impact-bar span { width: var(--fip-bar-target, 70%); }

/* ==========================================================================
   6.6 STATS FLOTANTE — tarjeta compacta minimalista sobre el hero
   ========================================================================== */
.fip-stats-float {
    position: relative;
    z-index: 50; /* por debajo del navbar (1000) y sidebar (1500) */
    max-width: 1080px;
    /* AJUSTE: solo margen negativo arriba, para que la tarjeta flote sobre
       el límite con el hero. Ya no lleva margen negativo abajo — antes
       flotaba también sobre "Información que transforma" (que iba justo
       debajo), pero esa sección se movió más abajo (ahora va después de
       "Quiénes somos", pedido del cliente) y aquí debajo queda esa
       sección, que no necesita el mismo efecto de flotado. */
    margin: -56px auto 0;
    padding: 0 var(--fip-page-inset);
}

.fip-stats-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--fip-white);
    border-radius: 28px;
    box-shadow: 0 12px 34px rgba(10, 44, 92, 0.12);
    border: 1px solid rgba(10, 44, 92, 0.05);
    padding: 18px clamp(10px, 1.6vw, 28px);
}

.fip-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px clamp(8px, 1.2vw, 16px);
    min-width: 0;
}

/* AJUSTE: algunas casillas (20 años -> Nosotros, Centro Jeffrey -> Centro
   Jeffrey Modell) son enlaces reales; se les quita el subrayado azul de
   navegador por defecto y se les da una señal visual sutil al pasar el mouse */
.fip-stat-link {
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    transition: background 200ms var(--fip-ease);
}
.fip-stat-link:hover,
.fip-stat-link:focus-visible {
    background: rgba(46, 111, 227, 0.06);
}
.fip-stat-link:hover .fip-stat-value,
.fip-stat-link:focus-visible .fip-stat-value {
    color: var(--fip-blue-700);
}

.fip-stat:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 56%;
    width: 1px;
    background: rgba(10, 44, 92, 0.08);
}

.fip-stat-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--fip-blue-50);
    color: var(--fip-blue-700);
    font-size: 0.95rem;
}

.fip-stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.fip-stat-pre {
    font-size: 0.72rem;
    color: var(--fip-slate);
}
.fip-stat-value {
    font-family: var(--fip-font-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--fip-blue-700);
    white-space: nowrap;
    overflow: hidden; /* AJUSTE */
    text-overflow: ellipsis; /* AJUSTE: si el valor no cabe, se recorta con "…" en vez de desbordar */
}
.fip-stat-label {
    font-size: 0.74rem;
    color: var(--fip-slate);
    white-space: nowrap;
    overflow: hidden; /* AJUSTE */
    text-overflow: ellipsis; /* AJUSTE */
}

/* ==========================================================================
   6.7 ABOUT — "¿Quiénes somos?" imagen + copy
   ========================================================================== */
.fip-about {
    padding: clamp(76px, 10vw, 16px) var(--fip-page-inset) clamp(6px, 10vw, 40px);
}

.fip-about-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

.fip-about-media {
    min-width: 0; /* AJUSTE */
    border-radius: var(--fip-radius-md);
    overflow: hidden;
    box-shadow: var(--fip-shadow-soft);
    aspect-ratio: 1 / 1;
    background: var(--fip-blue-50);
    align-self: start;
}
.fip-about-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 8px;
    display: block;
}

.fip-about-copy {
    min-width: 0; /* AJUSTE */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fip-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fip-blue-500);
    margin: 0 0 14px;
}

.fip-about-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--fip-ink);
    margin: 0 0 22px;
    overflow-wrap: break-word; /* AJUSTE */
}

.fip-about-text {
    font-family: var(--fip-font-body);
    font-size: clamp(0.92rem, 0.86rem + 0.25vw, 1.02rem);
    line-height: 1.75;
    color: var(--fip-slate);
    max-width: 54ch;
    margin: 0 0 18px;
}
.fip-about-text:last-of-type { margin-bottom: 32px; }

/* ==========================================================================
   7. Responsive
   ========================================================================== */
/* Base fluida: estas propiedades ya escalan solas entre breakpoints
   gracias a clamp(), así los saltos entre puntos de quiebre son suaves
   en vez de "romper" el diseño en tamaños intermedios (p. ej. tablets
   plegables o ventanas de navegador redimensionadas). */
.fip-hero-title  { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem); }
.fip-hero-text   { font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.05rem); }
/* ---- 901-1439px: el menú de enlaces está visible y necesita todo el
   ancho — se oculta el nombre junto al logo en este rango únicamente
   (en celular y en pantallas ≥1440px sí se muestra, ver .fip-brand-full) ---- */
@media (min-width: 901px) and (max-width: 1439px) {
    .fip-brand-full { display: none; }
    .fip-brand-logo { display: block; }
}

/* ---- ≥1440px: contenedores muy anchos, evita que el hero se vea vacío ---- */
@media (min-width: 1440px) {
    .fip-hero-inner { max-width: 1320px; }
    .fip-about-inner {
        max-width: 1280px;
        grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
        gap: 72px;
    }
}

/* ---- ≥1800px: monitores 24"+ ---- */
@media (min-width: 1800px) {
    .fip-hero-inner { max-width: 1480px; } /* AJUSTE: aprovecha mejor el ancho en monitores grandes */
    .fip-impact-inner { max-width: 1480px; }
    .fip-about { padding-top: clamp(140px, 11vw, 200px); padding-bottom: clamp(140px, 11vw, 200px); }
    .fip-about-inner {
        max-width: 1360px;
        grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
        gap: 88px;
    }
    .fip-about-title { font-size: 2.7rem; }
    .fip-about-text { font-size: 1.08rem; max-width: 58ch; }
}

/* ---- 1101–1279px: escritorio angosto / laptops pequeños ---- */
@media (max-width: 1279px) {
    .fip-nav-links a { padding: 10px 14px; font-size: 0.9rem; }
    .fip-about-inner { gap: clamp(32px, 5vw, 56px); }
}

/* ---- 901–1100px: tablet horizontal — el menú empieza a apretarse ---- */
@media (max-width: 1100px) {
    .fip-nav-links { gap: 0; }
    .fip-nav-links a { padding: 10px 11px; font-size: 0.85rem; }
    .fip-btn-donar { padding: 11px 18px; }
    .fip-impact-grid { gap: 16px; }

    .fip-hero-overlay {
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.97) 0%,
            rgba(255, 255, 255, 0.9) 40%,
            rgba(255, 255, 255, 0.6) 62%,
            rgba(255, 255, 255, 0.15) 80%,
            rgba(255, 255, 255, 0) 92%
        );
    }

    .fip-about { padding: clamp(80px, 9vw, 130px) var(--fip-page-inset) clamp(80px, 9vw, 130px); }
    .fip-about-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .fip-about-title { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); }
}

/* ---- ≤900px: tablet vertical — pasa a menú lateral (sidebar) ---- */
@media (max-width: 900px) {
    /* La barra superior (teléfono + redes) también se oculta aquí — el
       menú lateral (sidebar) ya tiene sus propios íconos sociales
       (.fip-sidebar-socials), así que no hace falta duplicarlos y se
       recupera el espacio vertical para pantallas chicas. */
    .fip-topbar { display: none; }
    .fip-navbar { top: 0; }

    /* AJUSTE: la píldora completa se oculta — el menú lateral (sidebar)
       ya tiene sus propios íconos sociales (.fip-sidebar-socials) y su
       propio botón de donar (.fip-sidebar-donar), así que mantener la
       píldora en la barra superior solo mostraba un óvalo suelto y
       redundante con los íconos sociales duplicados. */
    .fip-navbar-pill { display: none; }
    /* El sidebar móvil ya tiene su propio enlace de inicio de sesión
       (.fip-sidebar-login), así que este ícono se oculta aquí para no
       quedar descolocado junto al botón Donar (que se corre con
       margin-left:auto) ni duplicar el acceso. */
    .fip-nav-login { display: none; }
    .fip-toggler { display: inline-flex; }
    /* Logo queda a la izquierda; Donar + el botón de hamburguesa se
       agrupan juntos a la derecha (en vez de quedar centrados/sueltos) */
    .fip-btn-donar { margin-left: auto; }

    /* El logo con nombre completo (96px en escritorio) es demasiado ancho
       para el espacio disponible en móvil/tablet — se reduce para que no
       empuje el botón Donar y el toggler fuera de pantalla. */
    .fip-brand-full img { height: 44px; }

    .fip-hero-inner {
        grid-template-columns: 1fr;
        padding-top: clamp(120px, 100px + 6vw, 160px);
    }
    .fip-hero-copy { max-width: 100%; }
    .fip-hero-text { max-width: 60ch; }
    .fip-hero-overlay {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.92) 55%,
            rgba(255, 255, 255, 0.98) 100%
        );
    }
    .fip-collage-img { max-width: 420px; }

    .fip-impact-grid { grid-template-columns: repeat(2, 1fr); }
    .fip-sidebar { width: min(400px, 82vw); }

    .fip-stats-float { margin-top: -40px; margin-bottom: 0; }
    .fip-stats-card { grid-template-columns: repeat(2, 1fr); row-gap: 16px; padding: 16px; }

    .fip-stat:nth-child(2)::before,
    .fip-stat:nth-child(3)::before,
    .fip-stat:nth-child(4)::before { display: none; }
    .fip-stat:nth-child(2n)::before { display: block; }

    .fip-stat:nth-child(n+3) { padding-top: 14px; }
    .fip-stat:nth-child(n+3)::after {
        content: "";
        position: absolute;
        top: -8px;
        left: 6px;
        right: 6px;
        height: 1px;
        background: rgba(10, 44, 92, 0.07);
    }

    .fip-about { padding: 72px var(--fip-page-inset) 80px; }
    .fip-about-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .fip-about-img, .fip-about-media { aspect-ratio: 1 / 1; }
    .fip-about-copy { align-items: flex-start; }
}

/* ---- 601–768px: tablet vertical pequeña / móvil grande apaisado ---- */
@media (max-width: 768px) {
    .fip-navbar-inner { padding: 10px 18px; }
    .fip-hero-actions { width: 100%; }
    .fip-btn-primary, .fip-btn-danger, .fip-btn-secondary { flex: 1 1 auto; justify-content: center; }

    .fip-about { padding: 64px 18px 72px; }
    .fip-about-inner { gap: 22px; }
    .fip-about-text { max-width: none; }
}

/* ---- ≤600px: móvil ---- */
@media (max-width: 600px) {
    .fip-navbar-inner { padding: 10px 14px; gap: 10px; }
    .fip-brand-logo { height: 32px; }
    .fip-brand-full img { height: 34px; }
    .fip-navbar.scrolled .fip-brand-logo { height: 26px; }
    .fip-toggler { width: 44px; height: 44px; font-size: 1.1rem; }

    .fip-hero-inner { padding-inline: 18px; gap: 24px; }
    .fip-hero-title { max-width: none; }
    .fip-hero-text { max-width: none; }
    .fip-hero-actions { flex-direction: column; }
    .fip-collage-img { max-width: 320px; }

    .fip-impact { padding: 44px 18px; }
    .fip-impact-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .fip-impact-card { padding: 20px 16px; }
    .fip-impact-icon { width: 40px; height: 40px; font-size: 1.05rem; }
    .fip-impact-number { font-size: 1.7rem; }
    .fip-impact-label { font-size: 0.84rem; }

    .fip-sidebar { width: 100vw; padding: 22px 20px 26px; }
    .fip-sidebar-nav a { padding: 14px 2px; }
    .fip-nav-label { font-size: 1rem; }

    .fip-stats-float { margin-top: -28px; margin-bottom: 0; padding: 0 14px; }
    .fip-stats-card {
        grid-template-columns: 1fr 1fr;
        border-radius: 20px;
        padding: 14px;
        row-gap: 14px;
        column-gap: 6px;
    }
    .fip-stat { gap: 8px; padding: 2px 6px; }
    .fip-stat-icon { width: 30px; height: 30px; font-size: 0.85rem; }
    .fip-stat-value { font-size: 0.86rem; }
    .fip-stat-label, .fip-stat-pre { font-size: 0.68rem; }

    .fip-stat:nth-child(2n)::before { display: block; }
    .fip-stat:nth-child(n+3)::after {
        content: "";
        position: absolute;
        top: -7px;
        left: 4px;
        right: 4px;
        height: 1px;
        background: rgba(10, 44, 92, 0.07);
    }

    .fip-about { padding: 56px 18px 64px; }
    .fip-about-img, .fip-about-media { aspect-ratio: 1 / 1; border-radius: var(--fip-radius-md); }
    .fip-about-title { font-size: 1.6rem; margin-bottom: 18px; }
    .fip-about-text { font-size: 0.96rem; margin-bottom: 14px; }
    .fip-about-text:last-of-type { margin-bottom: 24px; }

    /* Botones a ancho completo y tamaño reducido en móvil, coherente entre variantes */
    .fip-btn-primary, .fip-btn-secondary, .fip-btn-danger, .fip-btn-outline {
        width: 100%;
        justify-content: center;
        padding: 14px 2px;
        font-size: 0.92rem;
    }
}

/* ---- ≤420px: móvil pequeño — prioriza el ícono sobre el texto ---- */
@media (max-width: 420px) {
    .fip-btn-donar { padding: 10px 14px; gap: 6px; }
    .fip-btn-donar-text { display: none; }
    .fip-btn-donar i.bi-arrow-right { display: none; }

    .fip-hero-title { font-size: clamp(1.6rem, 1.2rem + 4.5vw, 2rem); }
    .fip-impact-grid { grid-template-columns: 1fr; }
    .fip-nav-icon { width: 36px; height: 36px; }
    .fip-whatsapp { width: 50px; height: 50px; right: max(16px, calc(10px + env(safe-area-inset-right))); bottom: max(16px, calc(10px + env(safe-area-inset-bottom))); font-size: 1.3rem; }

    .fip-about { padding: 48px 16px 56px; }
    .fip-about-eyebrow { font-size: 0.76rem; margin-bottom: 10px; }
    .fip-about-title { font-size: 1.4rem; line-height: 1.3; }
    .fip-about-text { font-size: 0.92rem; line-height: 1.65; }

    .fip-btn-primary, .fip-btn-secondary, .fip-btn-danger, .fip-btn-outline {
        padding: 13px 2px;
        font-size: 0.88rem;
    }
}

/* ---- ≤380px: móviles muy angostos (iPhone SE, Android gama baja) ---- */
@media (max-width: 380px) {
    .fip-navbar-inner { gap: 8px; padding: 10px max(12px, env(safe-area-inset-left)) 10px max(12px, env(safe-area-inset-right)); }
    .fip-brand-logo { height: 26px; }
    .fip-toggler { width: 40px; height: 40px; font-size: 1rem; }
    .fip-btn-donar { padding: 8px 12px; }

    .fip-about { padding: 40px 14px 48px; }
    .fip-about-title { font-size: 1.3rem; }
    .fip-about-text { font-size: 0.88rem; }
    .fip-about-inner { gap: 18px; }
}

/* ---- ≤340px: pantallas extremas (dispositivos muy antiguos o vistas divididas) ---- */
/* AJUSTE: breakpoint nuevo — sin él, algunos elementos con padding fijo
   (stats, tarjetas) quedaban apretados en pantallas plegadas/split-screen */
@media (max-width: 340px) {
    .fip-navbar-inner { gap: 6px; }
    .fip-brand-logo { height: 22px; }
    .fip-btn-donar-text { display: none; }
    .fip-stats-card { padding: 10px; gap: 4px; }
    .fip-stat { padding: 2px 4px; gap: 6px; }
    .fip-stat-icon { width: 26px; height: 26px; font-size: 0.75rem; }
    .fip-stat-value { font-size: 0.78rem; }
    .fip-stat-label, .fip-stat-pre { font-size: 0.62rem; }
    .fip-impact-number { font-size: 1.5rem; }
    .fip-hero-title { font-size: 1.5rem; }
    .fip-about-title { font-size: 1.2rem; }
}

/* ---- Pantallas muy bajas en apaisado (móvil horizontal) ---- */
@media (max-height: 480px) and (orientation: landscape) {
    .fip-navbar { top: 0; }
    .fip-sidebar { padding: 16px 24px; }
    .fip-sidebar-head { margin-bottom: 20px; }
    .fip-sidebar-nav a { padding: 8px 2px; }
    .fip-hero-inner { padding-top: 100px; padding-bottom: 32px; }
    .fip-impact { padding: 32px 24px; }
    .fip-impact-grid { grid-template-columns: repeat(4, 1fr); }

    .fip-about { padding: 40px var(--fip-page-inset) 44px; }
    .fip-about-inner { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
    .fip-about-img, .fip-about-media { aspect-ratio: 1 / 1; }
}

/* ---- Pantallas táctiles: objetivos de toque más generosos ---- */
@media (hover: none) and (pointer: coarse) {
    .fip-nav-links a,
    .fip-sidebar-nav a,
    .fip-toggler,
    .fip-sidebar-close,
    .fip-sidebar-social,
    .fip-btn-primary,
    .fip-btn-secondary,
    .fip-btn-danger,
    .fip-btn-outline { min-height: 44px; } /* AJUSTE: los botones de CTA también cumplen el mínimo táctil de 44px */
}

/* ==========================================================================
   8. Accesibilidad: respeto por reduce-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .fip-navbar, .fip-navbar-inner, .fip-navbar-pill, .fip-brand-logo,
    .fip-sidebar, .fip-overlay, .fip-nav-indicator,
    .fip-sidebar-nav li, .fip-btn-donar, .fip-btn-primary,
    .fip-btn-danger, .fip-btn-outline,
    .fip-impact-card, .fip-impact-bar span {
        transition: none !important;
        animation: none !important;
    }
    .fip-sidebar-nav li { opacity: 1; transform: none; }
    .fip-impact-bar span { width: var(--fip-bar-target, 70%) !important; }
}

/* Foco visible consistente */
.fip-navbar a:focus-visible,
.fip-navbar button:focus-visible,
.fip-sidebar a:focus-visible,
.fip-sidebar button:focus-visible,
.fip-hero a:focus-visible {
    outline: 2px solid var(--fip-blue-500);
    outline-offset: 3px;
    border-radius: 8px;
}








/* ==========================================================================
   CENTRO JEFFREY MODELL COLOMBIA — Estilos de página
   Usa el sistema de tokens :root (--fip-*) definido en el stylesheet global.
   No define variables nuevas; para naranja y morado usa hex directos
   porque el :root no tiene tokens para esos dos colores.

   TABLA DE CONTENIDO
   -------------------------------------------------------------------------
   00. Utilidades / fix de scroll horizontal
   01. Áreas de acción (grid de 5 tarjetas)
   02. Hero — Centro Jeffrey Modell (2 columnas)
   03. Aliados y Apoyos (carrusel de logos)
   04. Banner Jeffrey Modell (ribbon)
   05. Información que transforma (¿Qué son las IDP?)
   06. Accesos rápidos (franja full-bleed)
   07. Dashboard de contenido (proyectos / noticias / recursos / galería)
   08. CTA Donación (banner full-bleed)
   ========================================================================== */


/* ==========================================================================
   00. UTILIDADES / FIX DE SCROLL HORIZONTAL
   -------------------------------------------------------------------------
   Los bloques full-bleed (que rompen el contenedor con `100vw` +
   `margin-left/right: calc(50% - 50vw)`) se salen por el borde derecho
   cuando la página tiene scrollbar vertical, porque 100vw incluye el
   ancho del propio scrollbar. Esto provocaba scroll horizontal en toda
   la página. `overflow-x: clip` en el elemento afectado corta el
   sobrante sin tocar el overflow vertical del resto del sitio.
   ========================================================================== */
.fip-full-bleed-safe {
    overflow-x: clip;
    max-width: 100vw;
}


/* ==========================================================================
   01. ÁREAS DE ACCIÓN
   ========================================================================== */
.fip-areas {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 8vw, 110px) var(--fip-page-inset);
    background: var(--fip-blue-50);
}

/* Formas decorativas de fondo, sutiles, coherentes con .fip-impact */
.fip-areas::before,
.fip-areas::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.fip-areas::before {
    width: 380px;
    height: 380px;
    top: -140px;
    left: -100px;
    background: radial-gradient(circle, rgba(46, 111, 227, 0.14) 0%, transparent 70%);
}
.fip-areas::after {
    width: 340px;
    height: 340px;
    bottom: -160px;
    right: -90px;
    background: radial-gradient(circle, rgba(63, 174, 115, 0.12) 0%, transparent 70%);
}

.fip-areas-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
}

.fip-areas-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fip-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fip-blue-500);
    margin: 0 0 12px;
}
.fip-areas-eyebrow::before,
.fip-areas-eyebrow::after {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--fip-blue-500);
}

.fip-areas-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--fip-ink);
    margin: 0 auto clamp(40px, 5vw, 56px);
    max-width: 42ch;
}

.fip-areas-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.fip-area-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 36px 26px 26px;
    background: var(--fip-white);
    border: 1px solid rgba(10, 44, 92, 0.06);
    border-radius: 20px;
    box-shadow: var(--fip-shadow-soft);
    overflow: hidden;
    transition: transform 280ms var(--fip-ease), box-shadow 280ms var(--fip-ease);
}

/* Franja de acento superior, color propio de cada frente */
.fip-area-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--fip-accent);
}

.fip-area-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--fip-shadow-lift);
}

.fip-area-card--investigacion { --fip-accent: var(--fip-blue-700); }
.fip-area-card--educacion     { --fip-accent: var(--fip-green-500); }
.fip-area-card--asistencia    { --fip-accent: var(--fip-red-500); }
.fip-area-card--asesoria      { --fip-accent: #F5872F; } /* sin token equivalente en :root */
.fip-area-card--promocion     { --fip-accent: #8A4FE0; } /* sin token equivalente en :root */

/* Ícono centrado en badge circular con halo de color */
.fip-area-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fip-accent) 12%, white);
    flex: 0 0 auto;
}
.fip-area-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--fip-accent) 35%, transparent);
}
.fip-area-icon i {
    font-size: 1.95rem;
    color: var(--fip-accent);
    line-height: 1;
}

.fip-area-card h3 {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1.3;
    min-height: 2.6em;
    color: var(--fip-ink);
    margin: 0;
}

.fip-area-card h3 span {
    display: block;
    width: 34px;
    height: 3px;
    margin: 10px auto 0;
    border-radius: var(--fip-radius-pill);
    background: var(--fip-accent);
}

.fip-area-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.fip-area-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-family: var(--fip-font-body);
    font-size: 0.87rem;
    line-height: 1.55;
    color: var(--fip-slate);
}

.fip-area-list li i {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 0.85rem;
    color: var(--fip-accent);
}

.fip-area-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}

.fip-area-list-wrap {
    position: relative;
    width: 100%;
    max-height: var(--fip-clamp-h, 30px);
    overflow: hidden;
    transition: max-height 380ms var(--fip-ease);
}

.fip-area-list-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.4em;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--fip-white) 88%);
    transition: opacity 200ms ease;
    pointer-events: none;
}

.fip-area-list-wrap.is-expanded::after { opacity: 0; }

.fip-area-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 6px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--fip-accent);
}
.fip-area-toggle:hover { text-decoration: underline; }
.fip-area-toggle i {
    font-size: 0.75rem;
    transition: transform 280ms var(--fip-ease);
}
.fip-area-toggle.is-expanded i { transform: rotate(180deg); }

/* ≥1400px: aún más aire entre tarjetas en monitores grandes */
@media (min-width: 1400px) {
    .fip-areas-grid { gap: 28px; }
    .fip-area-card { padding: 40px 30px 32px; }
}

/* 1300–1050px: se mantienen las 5 en línea, algo más compactas */
@media (max-width: 1300px) {
    .fip-areas-grid { gap: 18px; }
    .fip-area-card { padding: 30px 18px 26px; }
    .fip-area-icon { width: 66px; height: 66px; }
    .fip-area-icon i { font-size: 1.65rem; }
    .fip-area-card h3 { font-size: 1rem; }
    .fip-area-list li { font-size: 0.8rem; line-height: 1.5; }
    .fip-area-list-wrap { --fip-clamp-h: 26px; }
}

/* ≤900px: 5 en línea ya no es legible, pasa a 2 columnas anchas */
@media (max-width: 900px) {
    .fip-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .fip-area-card { padding: 34px 24px 28px; }
    .fip-area-icon { width: 76px; height: 76px; }
    .fip-area-icon i { font-size: 1.9rem; }
    .fip-area-card h3 { font-size: 1.1rem; }
    .fip-area-list li { font-size: 0.88rem; line-height: 1.55; }
    .fip-area-list-wrap { --fip-clamp-h: 30px; }
}

/* ≤560px: una sola columna */
@media (max-width: 560px) {
    .fip-areas-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* ==========================================================================
   02. HERO — Centro Jeffrey Modell (layout 2 columnas)
   -------------------------------------------------------------------------
   Texto a la izquierda (eyebrow + título + párrafo + botones) y foto
   con esquinas redondeadas a la derecha, sobre fondo claro con blobs
   decorativos y patrón de puntos.
   ========================================================================== */
.fip-centro-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 100px) var(--fip-page-inset);
    background: var(--fip-white);
}

/* ---- Blobs decorativos ---- */
.fip-centro-hero::before,
.fip-centro-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.fip-centro-hero::before {
    width: 340px;
    height: 340px;
    top: -120px;
    left: -110px;
    background: radial-gradient(circle, rgba(46, 111, 227, 0.12) 0%, transparent 70%);
}
.fip-centro-hero::after {
    width: 420px;
    height: 420px;
    bottom: -180px;
    right: -140px;
    background: radial-gradient(circle, rgba(63, 174, 115, 0.14) 0%, transparent 70%);
}

/* ---- Patrón de puntos, esquinas opuestas ---- */
.fip-centro-dotgrid {
    position: absolute;
    width: 130px;
    height: 100px;
    background-image: radial-gradient(rgba(10, 44, 92, 0.16) 1.4px, transparent 1.4px);
    background-size: 16px 16px;
    z-index: 0;
    pointer-events: none;
}
.fip-centro-dotgrid--tl { top: 28px; left: clamp(8px, 2vw, 40px); }
.fip-centro-dotgrid--br { bottom: 28px; right: clamp(8px, 2vw, 40px); }

.fip-centro-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

/* ---- Columna de texto ---- */
.fip-centro-eyebrow {
    display: inline-block;
    font-family: var(--fip-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fip-blue-500);
    margin: 0 0 12px;
}
.fip-centro-eyebrow-line {
    display: block;
    width: 30px;
    height: 3px;
    margin-top: 10px;
    border-radius: var(--fip-radius-pill);
    background: var(--fip-green-500);
}

.fip-centro-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--fip-ink);
    margin: 0 0 clamp(18px, 2.4vw, 26px);
}
.fip-centro-title span {
    display: block;
    color: var(--fip-blue-500);
}

.fip-centro-text {
    font-family: var(--fip-font-body);
    font-size: clamp(1rem, 0.94rem + 0.25vw, 1.08rem);
    line-height: 1.65;
    color: var(--fip-slate);
    margin: 0 0 clamp(28px, 3.4vw, 38px);
    max-width: 46ch;
}
.fip-centro-text a {
    color: var(--fip-blue-500);
    font-weight: 600;
    text-decoration: none;
}
.fip-centro-text a:hover { text-decoration: underline; }

.fip-centro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.fip-centro-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    background: var(--fip-blue-500);
    color: var(--fip-white);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    box-shadow: 0 10px 22px rgba(46, 111, 227, 0.28);
    transition: background 200ms var(--fip-ease), transform 200ms var(--fip-ease);
    white-space: nowrap;
}
.fip-centro-btn:hover {
    background: var(--fip-blue-700);
    transform: translateY(-2px);
    color: var(--fip-white);
}
.fip-centro-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.fip-centro-btn--ghost {
    background: var(--fip-white);
    color: var(--fip-ink);
    box-shadow: none;
    border: 1px solid rgba(10, 44, 92, 0.12);
}
.fip-centro-btn--ghost:hover {
    background: var(--fip-blue-50);
    color: var(--fip-ink);
    transform: translateY(-2px);
}
.fip-centro-btn--ghost i { color: var(--fip-green-500); font-size: 1rem; }

/* ---- Columna de imagen ---- */
.fip-centro-media {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 4 / 3.9;
    box-shadow: var(--fip-shadow-lift);
}
.fip-centro-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 992px) {
    .fip-centro-hero-inner {
        grid-template-columns: 1fr;
    }
    .fip-centro-media {
        order: -1;
        aspect-ratio: 16 / 10;
    }
    .fip-centro-dotgrid { display: none; }
}

@media (max-width: 560px) {
    .fip-centro-actions { flex-direction: column; align-items: stretch; }
    .fip-centro-btn { justify-content: center; }
    .fip-centro-media { border-radius: 20px; }
}


/* ==========================================================================
   03. ALIADOS Y APOYOS — carrusel de logos en loop infinito
   ========================================================================== */
.fip-partners {
    background: #ffffff;
    padding: 60px 0;
    overflow: hidden;
}

.fip-partners-head {
    text-align: center;
    margin-bottom: 36px;
}
.fip-partners-eyebrow {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #0A2C5C;
}

/* Contenedor visible, oculta lo que se sale por los bordes */
.fip-partners-track-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Riel que se mueve infinitamente */
.fip-partners-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: fip-scroll 18s linear infinite;
}

.fip-partners-track:hover {
    animation-play-state: paused;
}

@keyframes fip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.fip-partner-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    padding: 0 40px;
}
.fip-partner-logo img {
    max-height: 100px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.fip-partner-logo:hover img {
    transform: scale(1.06);
}

@media (max-width: 575px) {
    .fip-partners-eyebrow { font-size: 18px; }
    .fip-partner-logo { height: 100px; padding: 0 26px; }
    .fip-partner-logo img { max-height: 70px; max-width: 160px; }
}


/* ==========================================================================
   04. CENTRO JEFFREY MODELL — sección destacada, foto de fondo
   -------------------------------------------------------------------------
   AJUSTE: pedido del cliente — el Centro Jeffrey Modell es su aliado más
   importante, así que tiene su propia sección (no una tarjeta ni un
   banner angosto): foto a toda la sección con overlay para legibilidad,
   contenido encima y el logo del Jeffrey Modell Centers Network en una
   placa blanca al final del bloque de texto.
   AJUSTE 2: el overlay oscuro tipo "hero corporativo" no se sentía como
   una fundación — se cambió a un overlay claro (azul muy suave, el mismo
   tono que el resto del sitio) con texto oscuro, para que se vea cálido
   y coherente con el resto de la página en vez de una sección oscura.
   ========================================================================== */
.fip-jm {
    position: relative;
    min-height: clamp(440px, 46vw, 620px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.fip-jm-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.fip-jm-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    display: block;
}
.fip-jm-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(239, 244, 252, 0.97) 0%,
        rgba(239, 244, 252, 0.93) 38%,
        rgba(239, 244, 252, 0.68) 60%,
        rgba(239, 244, 252, 0.2) 82%
    );
}

.fip-jm-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) var(--fip-page-inset);
}

.fip-jm-content {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fip-jm-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--fip-ink);
    margin: 0 0 14px;
    overflow-wrap: break-word;
}

.fip-jm-text {
    font-family: var(--fip-font-body);
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--fip-slate);
    max-width: 48ch;
    margin: 0 0 24px;
}

.fip-jm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--fip-btn-pad-y) var(--fip-btn-pad-x);
    background: var(--fip-blue-700);
    color: var(--fip-white);
    font-family: var(--fip-font-body);
    font-weight: 600;
    font-size: var(--fip-btn-font);
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    transition: background 200ms var(--fip-ease), transform 200ms var(--fip-ease);
}
.fip-jm-btn:hover {
    background: var(--fip-blue-900);
    color: var(--fip-white);
    transform: translateY(-1px);
}
.fip-jm-btn i {
    font-size: 0.78rem;
    transition: transform 200ms var(--fip-ease);
}
.fip-jm-btn:hover i { transform: translateX(2px); }

/* AJUSTE: pedido del cliente — enlace muy visible a la Jeffrey Modell
   Foundation (la organización internacional, no el Centro local), tanto
   como botón como en el logo de abajo (info4pi.org). */
.fip-jm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.fip-jm-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--fip-blue-700);
    color: var(--fip-blue-700);
}
.fip-jm-btn--ghost:hover {
    background: var(--fip-blue-700);
    color: var(--fip-white);
}

.fip-jm-logo-link {
    display: inline-block;
    margin: 24px 0 0;
    transition: transform 200ms var(--fip-ease);
}
.fip-jm-logo-link:hover { transform: translateY(-2px); }

.fip-jm-logo {
    display: block;
    height: 110px;
    width: auto;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 900px) {
    .fip-jm { min-height: auto; }
    .fip-jm-inner { padding: 64px 24px; }
    .fip-jm-content { max-width: 100%; }
    .fip-jm-overlay {
        background: linear-gradient(180deg,
            rgba(239, 244, 252, 0.55) 0%,
            rgba(239, 244, 252, 0.92) 55%,
            rgba(239, 244, 252, 0.98) 100%
        );
    }
}

@media (max-width: 600px) {
    .fip-jm-inner { padding: 48px 18px 40px; }
    .fip-jm-title { font-size: 1.4rem; }
    .fip-jm-logo { height: 76px; }
    .fip-jm-btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   05. INFORMACIÓN QUE TRANSFORMA — ¿Qué son las IDP?
   -------------------------------------------------------------------------
   Nota: los íconos Bootstrap son fuente (glyphs), se dimensionan con
   font-size en el <i> directamente, nunca con width/height.
   ========================================================================== */
.fip-idp-info {
    padding: clamp(56px, 6vw, 90px) var(--fip-page-inset) clamp(56px, 6vw, 90px);
    background: var(--fip-blue-50);
}

.fip-idp-info-inner {
    max-width: 1240px;
    margin: 0 auto;
}

.fip-idp-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--fip-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fip-blue-500);
    margin: 0 0 14px;
}
.fip-idp-eyebrow::before,
.fip-idp-eyebrow::after {
    content: "";
    width: 28px;
    height: 1.5px;
    background: var(--fip-blue-300, rgba(46, 111, 227, 0.4));
}

.fip-idp-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
    line-height: 1.18;
    text-align: center;
    color: var(--fip-ink);
    margin: 0 0 clamp(36px, 5vw, 52px);
}

/* ---- Card principal ---- */
.fip-idp-card {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    background: var(--fip-white);
    border: 1px solid rgba(10, 44, 92, 0.1);
    border-radius: var(--fip-radius-md, 24px);
    box-shadow: var(--fip-shadow-lift); /* AJUSTE: más profundidad para separarla del fondo celeste */
    padding: clamp(20px, 2.4vw, 30px);
}

/* ---- Imagen + overlay de escudo y virus ---- */
.fip-idp-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3.4;
    isolation: isolate;
    background: linear-gradient(160deg, #DCE7F7 0%, #C7D9F0 100%);
}
.fip-idp-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fip-idp-media-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.fip-idp-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10,44,92,0) 60%, rgba(10,44,92,0.15) 100%);
}

.fip-idp-content {
    min-width: 0;
}

.fip-idp-content h2 {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    line-height: 1.28;
    color: var(--fip-ink);
    margin: 0 0 16px;
}

.fip-idp-content p {
    font-family: var(--fip-font-body);
    font-size: clamp(1rem, 0.94rem + 0.25vw, 1.08rem);
    line-height: 1.68;
    color: var(--fip-slate);
    margin: 0 0 clamp(26px, 3vw, 34px);
    max-width: 58ch;
}

/* ---- Features con íconos libres, grandes ---- */
.fip-idp-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-bottom: clamp(26px, 3vw, 32px);
    margin-bottom: clamp(26px, 3vw, 32px);
    border-bottom: 1px solid rgba(10, 44, 92, 0.08);
}

.fip-idp-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.fip-idp-feature-icon i {
    font-size: 2.8rem !important;
    color: var(--fip-blue-700);
    display: block;
    line-height: 1;
}

.fip-idp-feature span {
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.94rem;
    line-height: 1.42;
    color: var(--fip-ink);
}

/* ---- Franja final: texto + botón ---- */
.fip-idp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.fip-idp-footer p {
    font-family: var(--fip-font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--fip-slate);
    margin: 0;
    max-width: 42ch;
}

.fip-idp-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 28px;
    background: var(--fip-blue-700);
    color: var(--fip-white);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: var(--fip-radius-pill, 999px);
    white-space: nowrap;
    transition: background 200ms var(--fip-ease), transform 200ms var(--fip-ease);
}
.fip-idp-btn:hover {
    background: var(--fip-blue-900, #072548);
    transform: translateY(-2px);
    color: var(--fip-white);
}
.fip-idp-btn i { font-size: 0.85rem !important; }

/* ------------------------------
   Responsive de la card
------------------------------ */
@media (max-width: 992px) {
    .fip-idp-card {
        grid-template-columns: 1fr;
    }
    .fip-idp-media {
        aspect-ratio: 16 / 9;
    }
    .fip-idp-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .fip-idp-features {
        grid-template-columns: 1fr;
    }
    .fip-idp-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .fip-idp-btn {
        width: 100%;
        justify-content: center;
    }
    .fip-idp-feature-icon i { font-size: 2.2rem !important; }
}


/* ==========================================================================
   06. ACCESOS RÁPIDOS — franja full-bleed
   -------------------------------------------------------------------------
   FIX SCROLL HORIZONTAL: se agregó `overflow-x: clip` y `max-width: 100vw`
   para que la franja no se salga por el borde derecho cuando la página
   tiene scrollbar vertical (ver sección 00 de este archivo).
   ========================================================================== */
.fip-idp-links {
    margin-top: clamp(44px, 5vw, 64px);
    width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    overflow-x: clip;
    
    padding: clamp(30px, 3.4vw, 40px) var(--fip-page-inset);
}

.fip-idp-links-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.fip-idp-link-item {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    min-width: 0;
}

.fip-idp-link-icon i {
    font-size: 3.2rem !important;
    color: var(--fip-blue-700) !important;
    display: block;
    line-height: 1;
}

.fip-idp-link-item span {
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.96rem;
    line-height: 1.35;
    color: var(--fip-ink);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Flecha final: clase propia, no choca con el ícono grande */
.fip-idp-link-arrow {
    font-size: 0.8rem !important;
    color: var(--fip-red-500, #dc2626) !important;
    transition: transform 200ms var(--fip-ease);
}
.fip-idp-link-item:hover .fip-idp-link-arrow {
    transform: translateX(3px);
}

@media (max-width: 992px) {
    .fip-idp-links-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .fip-idp-links-inner {
        grid-template-columns: 1fr;
    }
    .fip-idp-link-icon i { font-size: 2rem !important; }
}


/* ==========================================================================
   07. DASHBOARD DE CONTENIDO
   -------------------------------------------------------------------------
   Proyectos destacados / Noticias / Recursos para pacientes / Galería.
   Las imágenes de este bloque son PLACEHOLDERS (placehold.co) —
   reemplázalas por las fotos reales antes de publicar.
   ========================================================================== */
.fip-dash {
    padding: clamp(48px, 6vw, 80px) var(--fip-page-inset);
    background: var(--fip-blue-50);
}

.fip-dash-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.fip-dash-panel {
    background: var(--fip-white);
    border: 1px solid rgba(10, 44, 92, 0.06);
    border-radius: var(--fip-radius-md);
    box-shadow: var(--fip-shadow-soft);
    padding: clamp(22px, 2.6vw, 30px);
}

.fip-dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.fip-dash-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fip-blue-700);
    margin: 0;
}

.fip-dash-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fip-font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--fip-blue-500);
    text-decoration: none;
    white-space: nowrap;
}
.fip-dash-see-all i { font-size: 0.78rem; transition: transform 200ms var(--fip-ease); }
.fip-dash-see-all:hover { color: var(--fip-blue-700); }
.fip-dash-see-all:hover i { transform: translateX(3px); }

/* ---- Panel 1: Proyectos destacados ---- */
.fip-dash-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.fip-project-card { min-width: 0; }

.fip-project-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    margin-bottom: 14px;
    background: var(--fip-blue-50);
}

.fip-project-card h3 {
    font-family: var(--fip-font-display);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--fip-ink);
    margin: 0 0 8px;
}

.fip-project-card p {
    font-family: var(--fip-font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--fip-slate);
    margin: 0 0 10px;
}

.fip-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fip-font-body);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--fip-blue-500);
    text-decoration: none;
}
.fip-inline-link i { font-size: 0.75rem; transition: transform 200ms var(--fip-ease); }
.fip-inline-link:hover { color: var(--fip-blue-700); }
.fip-inline-link:hover i { transform: translateX(3px); }

/* ---- Panel 2: Noticias ---- */
.fip-news-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fip-news-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.fip-news-img {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--fip-blue-50);
}

.fip-news-body { min-width: 0; }

.fip-news-date {
    display: block;
    font-family: var(--fip-font-body);
    font-size: 0.76rem;
    color: var(--fip-slate);
    margin: 0 0 4px;
}

.fip-news-item h3 {
    font-family: var(--fip-font-display);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--fip-ink);
    margin: 0 0 6px;
}

/* ---- Panel 3: Recursos para pacientes ---- */
.fip-resources-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.fip-resource-card {
    min-width: 0;
    text-align: center;
    padding: 22px 14px;
    border-radius: 14px;
    border: 1px solid rgba(10, 44, 92, 0.06);
    background: var(--fip-white);
    transition: transform 220ms var(--fip-ease), box-shadow 220ms var(--fip-ease);
}
.fip-resource-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fip-shadow-soft);
}

.fip-resource-card--guias    { background: var(--fip-blue-50); }
.fip-resource-card--videos   { background: #FDEEEF; }
.fip-resource-card--descargas{ background: #EAF7EF; }
.fip-resource-card--biblioteca{ background: #F3EAFB; }

.fip-resource-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    font-size: 1.5rem;
}
.fip-resource-card--guias .fip-resource-icon      { color: var(--fip-blue-700); }
.fip-resource-card--videos .fip-resource-icon     { color: var(--fip-red-500); }
.fip-resource-card--descargas .fip-resource-icon  { color: var(--fip-green-500); }
.fip-resource-card--biblioteca .fip-resource-icon { color: #8A4FE0; }

.fip-resource-card h3 {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    margin: 0 0 6px;
}
.fip-resource-card--guias h3      { color: var(--fip-blue-700); }
.fip-resource-card--videos h3     { color: var(--fip-red-500); }
.fip-resource-card--descargas h3  { color: var(--fip-green-500); }
.fip-resource-card--biblioteca h3 { color: #8A4FE0; }

.fip-resource-card p {
    font-family: var(--fip-font-body);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--fip-slate);
    margin: 0 0 10px;
}

.fip-resource-card .fip-inline-link { font-size: 0.78rem; }
.fip-resource-card--guias .fip-inline-link      { color: var(--fip-blue-700); }
.fip-resource-card--videos .fip-inline-link     { color: var(--fip-red-500); }
.fip-resource-card--descargas .fip-inline-link  { color: var(--fip-green-500); }
.fip-resource-card--biblioteca .fip-inline-link { color: #8A4FE0; }

/* ---- Panel 4: Galería ---- */
.fip-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.fip-gallery-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    background: var(--fip-blue-50);
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 1100px) {
    .fip-dash-inner { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .fip-dash-projects-grid { grid-template-columns: 1fr; }
    .fip-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fip-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .fip-news-img { width: 64px; height: 64px; }
}

@media (max-width: 460px) {
    .fip-dash-head { flex-wrap: wrap; }
    .fip-dash-panel { padding: 18px; }
}


/* ==========================================================================
   08. CTA DONACIÓN — banner full-bleed (borde a borde)
   -------------------------------------------------------------------------
   Este bloque va DENTRO del flujo normal (no usa el truco de 100vw),
   así que no necesita el fix de la sección 00.
   ========================================================================== */
.fip-donate-cta {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: clamp(220px, 26vw, 340px);
    display: flex;
    align-items: center;
}

.fip-donate-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.fip-donate-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.fip-donate-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(10, 20, 30, 0.78) 0%,
        rgba(10, 20, 30, 0.62) 45%,
        rgba(10, 20, 30, 0.35) 75%,
        rgba(10, 20, 30, 0.15) 100%
    );
}

.fip-donate-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) var(--fip-page-inset);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.fip-donate-copy {
    max-width: 460px;
}

.fip-donate-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
    line-height: 1.25;
    color: var(--fip-white);
    margin: 0 0 12px;
}

.fip-donate-text {
    font-family: var(--fip-font-body);
    font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 42ch;
}

.fip-donate-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.fip-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--fip-red-500);
    color: var(--fip-white);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
    transition: background 200ms var(--fip-ease), transform 200ms var(--fip-ease);
    white-space: nowrap;
}
.fip-donate-btn:hover {
    background: var(--fip-red-700, #b91c1c);
    transform: translateY(-2px);
    color: var(--fip-white);
}
.fip-donate-btn i { font-size: 0.95rem; }

.fip-donate-microtext {
    font-family: var(--fip-font-body);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    padding-left: 4px;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 900px) {
    .fip-donate-cta { min-height: auto; }
    .fip-donate-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding-top: 36px;
        padding-bottom: 36px;
    }
    .fip-donate-overlay {
        background: linear-gradient(180deg,
            rgba(10, 20, 30, 0.55) 0%,
            rgba(10, 20, 30, 0.8) 60%,
            rgba(10, 20, 30, 0.9) 100%
        );
    }
    .fip-donate-action { align-items: flex-start; }
}

@media (max-width: 560px) {
    .fip-donate-btn { width: 100%; justify-content: center; }
    .fip-donate-action { width: 100%; align-items: center; text-align: center; }
    .fip-donate-microtext { padding-left: 0; }
}




/* ==========================================================================
   09. GALERÍA DE NUESTRO TRABAJO — carrusel horizontal (solo imágenes, autoplay)
   ========================================================================== */
.fip-gallery-carousel {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 7vw, 100px) var(--fip-page-inset);
    background: linear-gradient(180deg, var(--fip-blue-50) 0%, #F6F9FE 55%, var(--fip-white) 100%);
}

.fip-gallery-carousel::before,
.fip-gallery-carousel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.fip-gallery-carousel::before {
    width: 360px; height: 360px; top: -140px; right: -100px;
    background: radial-gradient(circle, rgba(46, 111, 227, 0.12) 0%, transparent 70%);
}
.fip-gallery-carousel::after {
    width: 320px; height: 320px; bottom: -140px; left: -90px;
    background: radial-gradient(circle, rgba(63, 174, 115, 0.1) 0%, transparent 70%);
}

.fip-gallery-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
}

.fip-gallery-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(36px, 4vw, 52px);
}
.fip-gallery-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
    color: var(--fip-blue-900);
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
.fip-gallery-subtitle {
    font-family: var(--fip-font-body);
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    color: var(--fip-slate);
    line-height: 1.6;
    margin: 0;
}

.fip-gallery-viewport-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fip-gallery-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1 1 auto;
    min-width: 0;
}
.fip-gallery-track::-webkit-scrollbar { display: none; }

.fip-gallery-slide {
    position: relative;
    flex: 0 0 auto;
    width: calc((100% - 4 * 20px) / 5);
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: var(--fip-shadow-soft);
    background: var(--fip-blue-50);
}
.fip-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 420ms var(--fip-ease);
}
.fip-gallery-slide:hover img { transform: scale(1.05); }

.fip-gallery-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(10, 44, 92, 0.1);
    background: var(--fip-white);
    color: var(--fip-blue-900);
    box-shadow: var(--fip-shadow-soft);
    cursor: pointer;
    font-size: 1.1rem;
    z-index: 2;
    transition: background 200ms var(--fip-ease), transform 200ms var(--fip-ease), color 200ms var(--fip-ease);
}
.fip-gallery-arrow:hover { background: var(--fip-blue-700); color: var(--fip-white); transform: translateY(-2px); }

/* ---- Responsive: reduce el número de tarjetas visibles ---- */
@media (max-width: 1279px) {
    .fip-gallery-slide { width: calc((100% - 3 * 20px) / 4); }
}
@media (max-width: 1100px) {
    .fip-gallery-track { gap: 16px; }
    .fip-gallery-slide { width: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 768px) {
    .fip-gallery-slide { width: calc((100% - 16px) / 2); }
    .fip-gallery-arrow { width: 40px; height: 40px; font-size: 1rem; }
}
@media (max-width: 560px) {
    .fip-gallery-slide { width: 78%; }
}


/* ==========================================================================
   10. PÁGINA NOSOTROS
   -------------------------------------------------------------------------
   Usa SOLO los tokens ya definidos en :root del theme FIP — no se define
   ningún :root ni variable nueva en ninguna de las subsecciones. Los
   botones reutilizan el sistema unificado .fip-btn-primary / .fip-btn-
   danger / .fip-btn-outline del theme.

   Todo lo responsive de esta página vive consolidado en 10.10, agrupado
   por breakpoint (mismo criterio que la sección "7. Responsive" del
   theme base), en vez de repartido dentro de cada subsección.

   TABLA DE CONTENIDO
   -------------------------------------------------------------------------
   10.1  Hero — Página Nosotros            (.fip-about-hero-*)
   10.2  Nuestra historia (timeline)        (.fip-history-*)
   10.3  Un legado que sigue salvando vidas (.fip-legacy-*)
   10.4  ¿Quiénes somos?                    (.fip-quienes-*)
   10.5  Nuestra esencia (misión/visión)    (.fip-essence-*)
   10.6  Nuestro impacto (banda con foto)   (.fip-hopeband-*)
   10.7  Nuestros pilares de acción         (.fip-pillars-*)
   10.8  Nuestro liderazgo                  (.fip-leadership-*)
   10.9  Nuestro compromiso (CTA donación)  (.fip-commitment-*)
   10.10 RESPONSIVE — todos los breakpoints de la página, consolidados
   ========================================================================== */


/* ==========================================================================
   10.1 HERO — Página Nosotros
   ========================================================================== */
.fip-about-hero {
    position: relative;
    overflow: hidden;
    background: var(--fip-white);
    padding-top: clamp(140px, 110px + 6vw, 190px);
    padding-bottom: clamp(56px, 6vw, 90px);
    min-height: clamp(420px, 46vw, 620px);
    display: flex;
    align-items: center;
}

.fip-about-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.fip-about-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

.fip-about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.9) 32%,
        rgba(255, 255, 255, 0.55) 52%,
        rgba(255, 255, 255, 0.1) 68%,
        rgba(255, 255, 255, 0) 82%
    );
}

.fip-about-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--fip-page-inset);
}

.fip-about-hero-copy {
    min-width: 0;
    max-width: 560px;
}

.fip-about-hero-eyebrow {
    display: block;
    font-family: var(--fip-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fip-blue-500);
    margin: 0 0 14px;
}

.fip-about-hero-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--fip-ink);
    margin: 0 0 20px;
    max-width: 20ch;
    overflow-wrap: break-word;
}

.fip-about-hero-text {
    font-family: var(--fip-font-body);
    font-size: clamp(0.92rem, 0.86rem + 0.25vw, 1.02rem);
    line-height: 1.75;
    color: var(--fip-slate);
    margin: 0 0 32px;
    max-width: 46ch;
}

.fip-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}


/* ==========================================================================
   10.2 NUESTRA HISTORIA — timeline horizontal
   ========================================================================== */
.fip-history {
    padding: clamp(56px, 6vw, 90px) var(--fip-page-inset);
    background: var(--fip-white);
    /* AJUSTE: el botón "Nuestra historia" del hero salta aquí con ancla
       (#historia) — este margen evita que la barra fija (topbar + navbar)
       tape el inicio de la sección al llegar. */
    scroll-margin-top: 150px;
}

.fip-history-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.fip-history-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
    color: var(--fip-ink);
    margin: 0 0 12px;
}

.fip-history-accent {
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 10px;
    border-radius: var(--fip-radius-pill);
    background: var(--fip-blue-500);
}

.fip-history-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(32px, 4vw, 48px);
}

.fip-history-timeline::before {
    content: "";
    position: absolute;
    top: 26px;
    left: calc(10% - 2px);
    right: calc(10% - 2px);
    height: 0;
    border-top: 2px dotted rgba(46, 111, 227, 0.35);
    z-index: 0;
}

.fip-history-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    gap: 12px;
}

.fip-history-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fip-blue-500);
    color: var(--fip-white);
    font-size: 1.2rem;
    box-shadow: 0 8px 18px rgba(46, 111, 227, 0.3);
    flex: 0 0 auto;
}

.fip-history-year {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--fip-blue-700);
}

.fip-history-item--highlight .fip-history-year {
    font-size: 1.05rem;
}

.fip-history-desc {
    font-family: var(--fip-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--fip-slate);
    margin: 0;
    max-width: 18ch;
    min-height: 4.5em;
}

.fip-history-desc a {
    color: var(--fip-blue-700);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(46, 111, 227, 0.35);
    text-underline-offset: 2px;
}

.fip-history-desc a:hover {
    text-decoration-color: currentColor;
}


/* ==========================================================================
   10.3 UN LEGADO QUE SIGUE SALVANDO VIDAS
   ========================================================================== */
.fip-legacy {
    padding: clamp(48px, 6vw, 84px) var(--fip-page-inset);
    background: var(--fip-white);
}

.fip-legacy-card {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.fip-legacy-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--fip-radius-md);
    min-height: clamp(190px, 22vw, 250px);
    display: flex;
    align-items: center;
    background: var(--fip-blue-50);
    padding-left: clamp(160px, 22vw, 260px);
}

.fip-legacy-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.fip-legacy-bg-img {
    width: 70%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fip-legacy-bg-overlay {
    position: absolute;
    inset: 0;
}

.fip-legacy-branch {
    position: absolute;
    right: clamp(16px, 3vw, 48px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(90px, 9vw, 140px);
    height: auto;
    color: var(--fip-blue-500);
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
}

.fip-legacy-content {
    position: relative;
    z-index: 1;
    max-width: 920px;
    padding: 28px clamp(20px, 3vw, 40px);
}

/* Tamaño fluido: en la versión original era un valor fijo (1.82rem) que
   podía desbordar en pantallas angostas. Con clamp() se mantiene la
   misma jerarquía visual pero nunca rompe el layout en ≤380px. */
.fip-legacy-eyebrow {
    display: block;
    font-family: var(--fip-font-body);
    font-size: clamp(1.05rem, 0.85rem + 1.4vw, 1.82rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fip-blue-700);
    margin: 0 0 12px;
}

.fip-legacy-text {
    font-family: var(--fip-font-body);
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    line-height: 1.7;
    color: var(--fip-slate);
    margin: 0;
    max-width: 56ch;
}


/* ==========================================================================
   10.4 ¿QUIÉNES SOMOS?
   ========================================================================== */
.fip-quienes {
    padding: clamp(48px, 6vw, 84px) var(--fip-page-inset);
    background: var(--fip-white);
}

.fip-quienes-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.fip-quienes-media {
    min-width: 0;
    border-radius: var(--fip-radius-md);
    overflow: hidden;
    box-shadow: var(--fip-shadow-soft);
    aspect-ratio: 4 / 3;
}

.fip-quienes-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fip-quienes-copy {
    min-width: 0;
}

.fip-quienes-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--fip-ink);
    margin: 0 0 18px;
}

.fip-quienes-text {
    font-family: var(--fip-font-body);
    font-size: clamp(0.92rem, 0.86rem + 0.2vw, 1rem);
    line-height: 1.75;
    color: var(--fip-slate);
    margin: 0 0 18px;
    max-width: 58ch;
}
.fip-quienes-text:last-of-type {
    margin-bottom: 30px;
}


/* ==========================================================================
   10.5 NUESTRA ESENCIA — Misión / Visión / Valores / Propósito
   ========================================================================== */
.fip-essence {
    padding: clamp(56px, 6vw, 90px) var(--fip-page-inset);
    background: linear-gradient(180deg, var(--fip-white) 0%, var(--fip-blue-50) 100%);
}

.fip-essence-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.fip-essence-head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.fip-essence-eyebrow {
    display: block;
    font-family: var(--fip-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fip-blue-500);
    margin: 0 0 14px;
}

.fip-essence-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.4rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--fip-ink);
    margin: 0 0 16px;
}

.fip-essence-text {
    font-family: var(--fip-font-body);
    font-size: clamp(0.92rem, 0.86rem + 0.2vw, 1rem);
    line-height: 1.7;
    color: var(--fip-slate);
    max-width: 60ch;
    margin: 0 auto;
}

.fip-essence-accent {
    display: block;
    width: 46px;
    height: 3px;
    margin: 22px auto 0;
    border-radius: var(--fip-radius-pill);
    background: var(--fip-blue-500);
}

.fip-essence-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 28px);
    margin-top: clamp(40px, 5vw, 64px);
}

.fip-essence-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--fip-white);
    border-radius: var(--fip-radius-md);
    box-shadow: var(--fip-shadow-soft);
    padding: clamp(26px, 3vw, 34px) clamp(22px, 2.4vw, 28px);
    transition: transform 260ms var(--fip-ease), box-shadow 260ms var(--fip-ease);
}
.fip-essence-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--fip-shadow-lift);
}

.fip-essence-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: 130px;
    z-index: 0;
    pointer-events: none;
}

.fip-essence-deco {
    position: absolute;
    bottom: -10px;
    right: -6px;
    font-size: clamp(70px, 8vw, 96px);
    line-height: 1;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

.fip-essence-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(58px, 4.4vw + 40px, 84px);
    height: clamp(58px, 4.4vw + 40px, 84px);
    border-radius: 50%;
    font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem);
    margin-bottom: 20px;
    flex: 0 0 auto;
}

.fip-essence-card-title {
    position: relative;
    z-index: 1;
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--fip-ink);
    margin: 0 0 10px;
}

.fip-essence-card-accent {
    position: relative;
    z-index: 1;
    display: block;
    width: 26px;
    height: 3px;
    border-radius: var(--fip-radius-pill);
    margin: 0 0 16px;
}

.fip-essence-card-text {
    position: relative;
    z-index: 1;
    font-family: var(--fip-font-body);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--fip-slate);
    margin: 0;
}

.fip-essence-list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fip-essence-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fip-font-body);
    font-size: 0.92rem;
    color: var(--fip-ink);
}
.fip-essence-list i {
    color: var(--fip-green-500);
    font-size: 1rem;
    flex: 0 0 auto;
}

.fip-essence-card--red .fip-essence-corner {
    background: radial-gradient(circle at top left, rgba(224, 54, 76, 0.14) 0%, transparent 70%);
}
.fip-essence-card--red .fip-essence-icon {
    background: rgba(224, 54, 76, 0.12);
    color: var(--fip-red-500);
}
.fip-essence-card--red .fip-essence-card-accent {
    background: var(--fip-red-500);
}
.fip-essence-card--red .fip-essence-deco {
    color: var(--fip-red-500);
}

.fip-essence-card--blue .fip-essence-corner {
    background: radial-gradient(circle at top left, rgba(46, 111, 227, 0.14) 0%, transparent 70%);
}
.fip-essence-card--blue .fip-essence-icon {
    background: rgba(46, 111, 227, 0.12);
    color: var(--fip-blue-500);
}
.fip-essence-card--blue .fip-essence-card-accent {
    background: var(--fip-blue-500);
}
.fip-essence-card--blue .fip-essence-deco {
    color: var(--fip-blue-500);
}

.fip-essence-card--green .fip-essence-corner {
    background: radial-gradient(circle at top left, rgba(63, 174, 115, 0.14) 0%, transparent 70%);
}
.fip-essence-card--green .fip-essence-icon {
    background: rgba(63, 174, 115, 0.12);
    color: var(--fip-green-500);
}
.fip-essence-card--green .fip-essence-card-accent {
    background: var(--fip-green-500);
}
.fip-essence-card--green .fip-essence-deco {
    color: var(--fip-green-500);
}

/* Naranja: literal puntual, sin token equivalente en :root — mismo
   criterio que ya usas en #8FC7FF / #6FE0A6 / #C7A8FF en .fip-impact-icon--* */
.fip-essence-card--orange .fip-essence-corner {
    background: radial-gradient(circle at top left, rgba(224, 138, 46, 0.16) 0%, transparent 70%);
}
.fip-essence-card--orange .fip-essence-icon {
    background: rgba(224, 138, 46, 0.14);
    color: #E08A2E;
}
.fip-essence-card--orange .fip-essence-card-accent {
    background: #E08A2E;
}
.fip-essence-card--orange .fip-essence-deco {
    color: #E08A2E;
}


/* ==========================================================================
   10.6 NUESTRO IMPACTO — banda azul con imagen de fondo full-bleed
   ========================================================================== */
.fip-hopeband {
    padding: clamp(40px, 5vw, 64px) var(--fip-page-inset);
    background: var(--fip-white);
}

.fip-hopeband-card {
    position: relative;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: var(--fip-radius-md);
    box-shadow: var(--fip-shadow-lift);
    padding: clamp(20px, 2.2vw, 30px) clamp(24px, 3.4vw, 48px);
}

.fip-hopeband-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.fip-hopeband-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    display: block;
}
.fip-hopeband-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg,
            rgba(6, 28, 58, 0.94) 0%,
            rgba(10, 44, 92, 0.9) 30%,
            rgba(20, 66, 140, 0.82) 55%,
            rgba(46, 111, 227, 0.72) 78%,
            rgba(46, 111, 227, 0.6) 100%
        );
}

.fip-hopeband-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 45%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.fip-hopeband-head {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 0 clamp(18px, 2.2vw, 26px);
}

.fip-hopeband-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fip-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #BFD6FF;
    margin: 0 0 10px;
}
.fip-hopeband-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: #BFD6FF;
    display: inline-block;
}

.fip-hopeband-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
    color: var(--fip-white);
    line-height: 1.2;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.fip-hopeband-subtitle {
    font-family: var(--fip-font-body);
    font-size: clamp(0.86rem, 0.82rem + 0.15vw, 0.94rem);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.fip-hopeband-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 16px);
}

.fip-hopeband-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    gap: 10px;
    padding: clamp(14px, 1.6vw, 18px) clamp(8px, 1.2vw, 14px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--fip-radius-md);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    transition: transform 260ms var(--fip-ease), background 260ms var(--fip-ease), border-color 260ms var(--fip-ease);
}
.fip-hopeband-stat:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
}

.fip-hopeband-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 4.6vw, 58px);
    height: clamp(48px, 4.6vw, 58px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--fip-blue-700);
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
    box-shadow: 0 10px 26px rgba(6, 28, 58, 0.35);
    flex: 0 0 auto;
}

.fip-hopeband-value {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.3rem);
    color: var(--fip-white);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.01em;
}

.fip-hopeband-label {
    font-family: var(--fip-font-body);
    font-size: 0.76rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    max-width: 14ch;
}


/* ==========================================================================
   10.7 NUESTROS PILARES DE ACCIÓN
   ========================================================================== */
.fip-pillars {
    padding: clamp(48px, 6vw, 84px) var(--fip-page-inset);
    background: var(--fip-white);
}

.fip-pillars-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.fip-pillars-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
    color: var(--fip-ink);
    margin: 0 0 clamp(24px, 3vw, 36px);
    letter-spacing: -0.01em;
}

.fip-pillars-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
}

.fip-pillars-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    gap: 16px;
    padding: clamp(22px, 2.4vw, 30px) clamp(10px, 1.4vw, 16px);
    border-radius: var(--fip-radius-md);
    border: 1px solid transparent;
    transition: transform 260ms var(--fip-ease), box-shadow 260ms var(--fip-ease), border-color 260ms var(--fip-ease);
}
.fip-pillars-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--fip-shadow-soft);
}

.fip-pillars-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(56px, 4vw + 40px, 76px);
    height: clamp(56px, 4vw + 40px, 76px);
    border-radius: 18px;
    font-size: clamp(1.4rem, 1vw + 1.1rem, 2.1rem);
    flex: 0 0 auto;
}

.fip-pillars-label {
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.35;
    margin: 0;
}

.fip-pillars-card--blue {
    background: var(--fip-blue-50);
    border-color: rgba(46, 111, 227, 0.14);
}
.fip-pillars-card--blue .fip-pillars-icon {
    background: rgba(46, 111, 227, 0.12);
    color: var(--fip-blue-500);
    border: 1.5px solid rgba(46, 111, 227, 0.25);
}
.fip-pillars-card--blue .fip-pillars-label { color: var(--fip-blue-700); }

.fip-pillars-card--green {
    background: rgba(63, 174, 115, 0.06);
    border-color: rgba(63, 174, 115, 0.16);
}
.fip-pillars-card--green .fip-pillars-icon {
    background: rgba(63, 174, 115, 0.12);
    color: var(--fip-green-500);
    border: 1.5px solid rgba(63, 174, 115, 0.28);
}
.fip-pillars-card--green .fip-pillars-label { color: #2E8158; }

.fip-pillars-card--skyblue {
    background: rgba(46, 111, 227, 0.05);
    border-color: rgba(46, 111, 227, 0.12);
}
.fip-pillars-card--skyblue .fip-pillars-icon {
    background: rgba(46, 111, 227, 0.1);
    color: var(--fip-blue-700);
    border: 1.5px solid rgba(46, 111, 227, 0.22);
}
.fip-pillars-card--skyblue .fip-pillars-label { color: var(--fip-blue-700); }

.fip-pillars-card--red {
    background: rgba(224, 54, 76, 0.06);
    border-color: rgba(224, 54, 76, 0.16);
}
.fip-pillars-card--red .fip-pillars-icon {
    background: rgba(224, 54, 76, 0.12);
    color: var(--fip-red-500);
    border: 1.5px solid rgba(224, 54, 76, 0.26);
}
.fip-pillars-card--red .fip-pillars-label { color: var(--fip-red-700); }

/* Morado: literal puntual, mismo criterio que --fip-impact-icon--purple */
.fip-pillars-card--purple {
    background: rgba(124, 77, 203, 0.06);
    border-color: rgba(124, 77, 203, 0.16);
}
.fip-pillars-card--purple .fip-pillars-icon {
    background: rgba(124, 77, 203, 0.12);
    color: #7C4DCB;
    border: 1.5px solid rgba(124, 77, 203, 0.26);
}
.fip-pillars-card--purple .fip-pillars-label { color: #6A3FB0; }

/* Índigo: literal puntual, coherente con la paleta de .fip-impact */
.fip-pillars-card--indigo {
    background: rgba(90, 100, 200, 0.06);
    border-color: rgba(90, 100, 200, 0.16);
}
.fip-pillars-card--indigo .fip-pillars-icon {
    background: rgba(90, 100, 200, 0.12);
    color: #5A64C8;
    border: 1.5px solid rgba(90, 100, 200, 0.26);
}
.fip-pillars-card--indigo .fip-pillars-label { color: #4B4FAE; }


/* ==========================================================================
   10.8 NUESTRO LIDERAZGO — perfiles del equipo directivo
   ========================================================================== */
.fip-leadership {
    padding: clamp(48px, 6vw, 84px) var(--fip-page-inset);
    background: var(--fip-white);
}

.fip-leadership-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.fip-leadership-head {
    margin: 0 0 clamp(28px, 3.4vw, 44px);
}

.fip-leadership-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
    color: var(--fip-ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.fip-leadership-subtitle {
    font-family: var(--fip-font-body);
    font-size: clamp(0.9rem, 0.85rem + 0.15vw, 0.98rem);
    color: var(--fip-slate);
    margin: 0;
}

.fip-leadership-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: clamp(24px, 3vw, 40px);
}

.fip-leadership-card {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 26px);
    align-items: stretch;
    height: 100%;
    padding: clamp(18px, 2vw, 24px);
    border-radius: var(--fip-radius-md);
    border: 1px solid rgba(10, 44, 92, 0.08);
    transition: transform 260ms var(--fip-ease), box-shadow 260ms var(--fip-ease), border-color 260ms var(--fip-ease);
}
.fip-leadership-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fip-shadow-soft);
    border-color: rgba(10, 44, 92, 0.04);
}

.fip-leadership-media {
    min-width: 0;
    align-self: start;
    aspect-ratio: 3 / 4;
    border-radius: var(--fip-radius-md);
    overflow: hidden;
    background: var(--fip-blue-50);
}
.fip-leadership-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.fip-leadership-copy {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fip-leadership-name {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    color: var(--fip-ink);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.fip-leadership-role {
    display: block;
    font-family: var(--fip-font-body);
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--fip-blue-700);
    margin: 0 0 14px;
}

.fip-leadership-text {
    font-family: var(--fip-font-body);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--fip-slate);
    margin: 0 0 20px;
    flex: 1 1 auto;
}

.fip-leadership-message-title {
    font-family: var(--fip-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--fip-blue-700);
    margin: 0 0 12px;
}

.fip-leadership-emphasis {
    font-weight: 700;
    color: var(--fip-ink);
}

.fip-leadership-signoff {
    font-family: var(--fip-font-body);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--fip-slate);
    margin: 0 0 20px;
}

.fip-leadership-letter {
    position: relative;
    max-height: 210px;
    overflow: hidden;
    transition: max-height 400ms var(--fip-ease);
}
.fip-leadership-letter::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--fip-white));
    pointer-events: none;
    transition: opacity 250ms var(--fip-ease);
}
.fip-leadership-letter.is-expanded {
    max-height: 3000px;
}
.fip-leadership-letter.is-expanded::after {
    opacity: 0;
}

.fip-leadership-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--fip-blue-700);
    cursor: pointer;
}
.fip-leadership-readmore:hover {
    text-decoration: underline;
}
.fip-leadership-readmore i {
    transition: transform 250ms var(--fip-ease);
}
.fip-leadership-readmore.is-expanded i {
    transform: rotate(180deg);
}

.fip-leadership-link {
    font-weight: 700;
    color: var(--fip-blue-700);
    text-decoration: none;
}
.fip-leadership-link:hover {
    text-decoration: underline;
}


/* ==========================================================================
   10.9 NUESTRO COMPROMISO — imagen + panel con copy y CTA de donación
   ========================================================================== */
.fip-commitment {
    padding: clamp(32px, 4vw, 56px) var(--fip-page-inset);
    background: var(--fip-white);
}

.fip-commitment-card {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    border-radius: var(--fip-radius-md);
    overflow: hidden;
    box-shadow: var(--fip-shadow-soft);
}

.fip-commitment-media {
    min-width: 0;
    min-height: 100%;
}
.fip-commitment-img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 390px;
    object-fit: cover;
    display: block;
}

.fip-commitment-panel {
    position: relative;
    overflow: hidden;
    min-width: 0;
    background: linear-gradient(135deg, var(--fip-blue-50) 0%, var(--fip-white) 70%);
    padding: clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 36px);
    display: flex;
    align-items: center;
}

.fip-commitment-copy {
    position: relative;
    z-index: 1;
    max-width: 460px;
}

.fip-commitment-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
    color: var(--fip-ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.fip-commitment-lead {
    font-family: var(--fip-font-body);
    font-size: clamp(0.84rem, 0.8rem + 0.12vw, 0.9rem);
    line-height: 1.5;
    color: var(--fip-blue-700);
    font-weight: 600;
    margin: 0 0 10px;
}

.fip-commitment-text {
    font-family: var(--fip-font-body);
    font-size: clamp(0.8rem, 0.77rem + 0.1vw, 0.85rem);
    line-height: 1.6;
    color: var(--fip-slate);
    margin: 0 0 16px;
    max-width: 52ch;
}

.fip-commitment-deco {
    position: absolute;
    right: clamp(8px, 1.4vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(110px, 11vw, 150px);
    height: clamp(110px, 11vw, 150px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 54, 76, 0.14) 0%, rgba(224, 54, 76, 0.05) 60%, transparent 78%);
    border: 1.5px dashed rgba(224, 54, 76, 0.28);
    pointer-events: none;
}
.fip-commitment-deco i {
    font-size: clamp(52px, 5.4vw, 72px);
    color: var(--fip-red-500);
    filter: drop-shadow(0 8px 18px rgba(224, 54, 76, 0.28));
}


/* ==========================================================================
   10.10 RESPONSIVE — Página Nosotros (TODOS los breakpoints, consolidados)
   -------------------------------------------------------------------------
   Orden: de pantalla ancha a angosta, igual criterio que la sección
   "7. Responsive" del theme base. Cada bloque indica de qué subsección
   (10.X) viene cada regla. Se agregaron breakpoints ≤380px, ≤340px,
   landscape bajo y prefers-reduced-motion que la página NO tenía antes,
   para que quede al mismo nivel de cobertura que el resto del theme.
   ========================================================================== */

/* ---- ≤1100px: el grid de 4/6 columnas empieza a apretarse ---- */
@media (max-width: 1100px) {
    /* 10.5 Nuestra esencia */
    .fip-essence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 10.6 Nuestro impacto */
    .fip-hopeband-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }

    /* 10.7 Nuestros pilares de acción */
    .fip-pillars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
}

/* ---- ≤900px: tablet vertical — varias secciones pasan a una columna ---- */
@media (max-width: 900px) {
    /* 10.1 Hero */
    .fip-about-hero { align-items: flex-end; min-height: 0; }
    .fip-about-hero-overlay {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.92) 55%,
            rgba(255, 255, 255, 0.98) 100%
        );
    }
    .fip-about-hero-copy { max-width: 100%; }
    .fip-about-hero-title { max-width: none; }
    .fip-about-hero-text { max-width: 60ch; }

    /* 10.4 ¿Quiénes somos? */
    .fip-quienes-inner { grid-template-columns: 1fr; }
    .fip-quienes-media { aspect-ratio: 16 / 10; }

    /* 10.8 Nuestro liderazgo */
    .fip-leadership-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }

    /* 10.9 Nuestro compromiso */
    .fip-commitment-card { grid-template-columns: 1fr; }
    .fip-commitment-img { min-height: 180px; max-height: 220px; }
    .fip-commitment-deco { opacity: 0.5; }
}

/* ---- ≤768px: Legado pasa a columna, imagen arriba como fondo alto ---- */
@media (max-width: 768px) {
    /* 10.3 Un legado que sigue salvando vidas */
    .fip-legacy-panel {
        flex-direction: column;
        align-items: flex-start;
        padding-left: clamp(20px, 4vw, 32px);
        padding-top: clamp(140px, 40vw, 200px);
        padding-bottom: 24px;
        min-height: 0;
    }
    .fip-legacy-branch { display: none; }
    .fip-legacy-content { padding: 0 clamp(20px, 4vw, 32px) 8px; max-width: none; }
}

/* ---- ≤700px: Historia y Impacto se compactan más ---- */
@media (max-width: 700px) {
    /* 10.2 Nuestra historia — timeline vertical, ícono a la izquierda */
    .fip-history-timeline { grid-template-columns: 1fr; gap: 0; }
    .fip-history-timeline::before {
        top: 0;
        bottom: 0;
        left: 25px;
        right: auto;
        width: 0;
        height: auto;
        border-top: none;
        border-left: 2px dotted rgba(46, 111, 227, 0.35);
    }
    .fip-history-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 16px 0;
        gap: 16px;
    }
    .fip-history-icon { width: 50px; height: 50px; font-size: 1.1rem; }
    .fip-history-desc { max-width: none; min-height: 0; }
    .fip-history-year { min-height: 0; justify-content: flex-start; }

    /* 10.6 Nuestro impacto */
    .fip-hopeband-card { padding: clamp(20px, 4vw, 28px) 20px; }
    .fip-hopeband-icon { width: 46px; height: 46px; font-size: 1.15rem; }
    .fip-hopeband-value { font-size: 1rem; }
    .fip-hopeband-label { font-size: 0.72rem; }
}

/* ---- ≤600px: Esencia y Pilares a menos columnas ---- */
@media (max-width: 600px) {
    /* 10.5 Nuestra esencia */
    .fip-essence-grid { grid-template-columns: 1fr; }
    .fip-essence-card { padding: 24px 22px; }

    /* 10.7 Nuestros pilares de acción */
    .fip-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- ≤560px: botones a ancho completo en Hero y Liderazgo ---- */
@media (max-width: 560px) {
    /* 10.1 Hero */
    .fip-about-hero-actions { flex-direction: column; align-items: stretch; }
    .fip-about-hero-actions .fip-btn-primary,
    .fip-about-hero-actions .fip-btn-danger { justify-content: center; }

    /* 10.8 Nuestro liderazgo */
    .fip-leadership-card { grid-template-columns: 1fr; height: auto; }
    .fip-leadership-media { aspect-ratio: 3 / 4; max-width: 260px; height: auto; margin: 0 auto; }
}

/* ---- ≤480px: móvil — Quiénes somos, Impacto y Compromiso ---- */
@media (max-width: 480px) {
    /* 10.4 ¿Quiénes somos? */
    .fip-quienes-inner { gap: 22px; }

    /* 10.6 Nuestro impacto */
    .fip-hopeband-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fip-hopeband-label { max-width: none; }

    /* 10.9 Nuestro compromiso */
    .fip-commitment-panel { padding: 20px 18px; }
    .fip-commitment-copy { max-width: none; }
    .fip-commitment-deco { display: none; }
    .fip-commitment-actions .fip-btn-danger { width: 100%; justify-content: center; }
}

/* ---- ≤420px: móvil pequeño — Esencia y Pilares reducen tipografía/íconos ---- */
@media (max-width: 420px) {
    /* 10.2 Nuestra historia */
    .fip-history-icon { width: 44px; height: 44px; font-size: 1rem; }

    /* 10.3 Un legado que sigue salvando vidas */
    .fip-legacy-content { padding: 0 18px 8px; }

    /* 10.5 Nuestra esencia */
    .fip-essence-title { font-size: 1.5rem; }
    .fip-essence-icon { width: 66px; height: 66px; font-size: 1.6rem; }
    .fip-essence-corner { width: 100px; height: 100px; }

    /* 10.6 Nuestro impacto — a una sola columna: 6 tarjetas en fila
       apiladas leen mejor que 3 filas de 2 en un teléfono angosto */
    .fip-hopeband-grid { grid-template-columns: 1fr; }

    /* 10.7 Nuestros pilares de acción */
    .fip-pillars-title { font-size: 1.3rem; }
    .fip-pillars-icon { width: 56px; height: 56px; font-size: 1.4rem; }
    .fip-pillars-label { font-size: 0.84rem; }
}

/* ---- ≤380px: móviles muy angostos (iPhone SE, Android gama baja) ---- */
@media (max-width: 380px) {
    /* 10.1 Hero */
    .fip-about-hero-title { font-size: clamp(1.5rem, 1.2rem + 3vw, 1.8rem); }

    /* 10.3 Un legado que sigue salvando vidas */
    .fip-legacy-panel { padding-top: clamp(120px, 42vw, 170px); }

    /* 10.4 ¿Quiénes somos? */
    .fip-quienes-title { font-size: 1.35rem; }

    /* 10.5 Nuestra esencia */
    .fip-essence-card { padding: 20px 18px; }
    .fip-essence-icon { width: 56px; height: 56px; font-size: 1.4rem; margin-bottom: 14px; }

    /* 10.7 Nuestros pilares de acción */
    .fip-pillars-card { padding: 18px 10px; gap: 12px; }

    /* 10.8 Nuestro liderazgo */
    .fip-leadership-media { max-width: 200px; }
    .fip-leadership-card { padding: 16px; }
}

/* ---- ≤340px: pantallas extremas (dispositivos plegados / split-screen) ---- */
@media (max-width: 340px) {
    /* 10.1 Hero */
    .fip-about-hero-eyebrow { font-size: 0.76rem; margin-bottom: 10px; }

    /* 10.6 Nuestro impacto */
    .fip-hopeband-icon { width: 40px; height: 40px; font-size: 1rem; }
    .fip-hopeband-value { font-size: 0.92rem; }

    /* 10.7 Nuestros pilares de acción */
    .fip-pillars-grid { grid-template-columns: 1fr; }
    .fip-pillars-icon { width: 52px; height: 52px; font-size: 1.3rem; }
}

/* ---- Pantallas bajas en apaisado (móvil horizontal): el hero y las
   secciones con padding vertical grande necesitan menos aire para no
   empujar el contenido fuera de la vista ---- */
@media (max-height: 480px) and (orientation: landscape) {
    /* 10.1 Hero */
    .fip-about-hero { padding-top: 96px; padding-bottom: 32px; min-height: 0; }

    /* 10.2 Nuestra historia */
    .fip-history { padding-top: 32px; padding-bottom: 32px; }

    /* 10.5 Nuestra esencia */
    .fip-essence { padding-top: 36px; padding-bottom: 36px; }
    .fip-essence-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* 10.6 Nuestro impacto */
    .fip-hopeband { padding-top: 24px; padding-bottom: 24px; }

    /* 10.9 Nuestro compromiso */
    .fip-commitment-card { grid-template-columns: 1fr 1fr; }
    .fip-commitment-img { max-height: 100%; }
}

/* ---- Pantallas táctiles: objetivos de toque de al menos 44px,
   mismo criterio que ya usas en el resto del theme ---- */
@media (hover: none) and (pointer: coarse) {
    .fip-leadership-link,
    .fip-quienes-copy .fip-btn-outline { min-height: 44px; }
}

/* ---- Accesibilidad: respeta prefers-reduced-motion en las tarjetas
   con hover/transform de esta página (el theme base ya cubre navbar,
   sidebar e impact; esto extiende el mismo criterio a Nosotros) ---- */
@media (prefers-reduced-motion: reduce) {
    .fip-essence-card,
    .fip-pillars-card,
    .fip-leadership-card,
    .fip-hopeband-stat {
        transition: none !important;
    }
}






/* ==========================================================================
   11. PÁGINA DE COMUNICADOS — versión simple (un solo comunicado)
   ========================================================================== */

/* ---- 11.1 Hero ---- */
.fip-com-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(130px, 105px + 6vw, 170px) var(--fip-page-inset) clamp(40px, 5vw, 56px);
    background: var(--fip-white);
}
.fip-com-dotgrid {
    position: absolute;
    top: 90px;
    left: clamp(8px, 2vw, 32px);
    width: 130px;
    height: 100px;
    background-image: radial-gradient(rgba(10, 44, 92, 0.14) 1.4px, transparent 1.4px);
    background-size: 16px 16px;
    z-index: 0;
    pointer-events: none;
}
.fip-com-ring {
    position: absolute;
    top: 60px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(10, 44, 92, 0.08);
    z-index: 0;
    pointer-events: none;
}
.fip-com-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.fip-com-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.2rem);
    color: var(--fip-blue-900);
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    position: relative;
    display: inline-block;
}
.fip-com-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: var(--fip-radius-pill);
    background: var(--fip-blue-500);
}
.fip-com-subtitle {
    font-family: var(--fip-font-body);
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    line-height: 1.65;
    color: var(--fip-slate);
    max-width: 62ch;
    margin: 18px auto 0;
}

/* ---- 11.2 Comunicado destacado (único) ---- */
.fip-com-featured {
    padding: 0 var(--fip-page-inset) clamp(56px, 6vw, 84px);
}
.fip-com-featured-card {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 16 / 8.4;
    min-height: 340px;
    display: flex;
    align-items: center;
    box-shadow: var(--fip-shadow-lift);
}
.fip-com-featured-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fip-com-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(10, 44, 92, 0.92) 0%,
        rgba(10, 44, 92, 0.74) 42%,
        rgba(10, 44, 92, 0.3) 70%,
        rgba(10, 44, 92, 0.05) 100%
    );
}
.fip-com-featured-content {
    position: relative;
    z-index: 1;
    padding: clamp(28px, 4vw, 52px);
    max-width: 600px;
}
.fip-com-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--fip-radius-pill);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fip-white);
    margin: 0 0 18px;
}
.fip-com-featured-content h2 {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem);
    line-height: 1.26;
    color: var(--fip-white);
    margin: 0 0 16px;
}
.fip-com-featured-content p {
    font-family: var(--fip-font-body);
    font-size: 0.96rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    margin: 0 0 26px;
    max-width: 50ch;
}
.fip-com-featured-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.fip-com-featured-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fip-font-body);
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.85);
}
.fip-com-featured-meta i { color: #8FC7FF; }

.fip-com-featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 28px;
    background: var(--fip-white);
    color: var(--fip-blue-900);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    transition: background 200ms var(--fip-ease), transform 200ms var(--fip-ease);
}
.fip-com-featured-btn:hover { background: var(--fip-blue-50); color: var(--fip-blue-900); transform: translateY(-2px); }

/* ---- 11.2.1 Grilla de comunicados adicionales ---- */
.fip-com-grid-section { padding: 0 var(--fip-page-inset) clamp(56px, 6vw, 84px); }
.fip-com-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.fip-com-card {
    background: var(--fip-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--fip-shadow-soft);
    display: flex;
    flex-direction: column;
    transition: transform 200ms var(--fip-ease), box-shadow 200ms var(--fip-ease);
}
.fip-com-card:hover { transform: translateY(-4px); box-shadow: var(--fip-shadow-lift); }
.fip-com-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--fip-blue-50);
}
.fip-com-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fip-com-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--fip-radius-pill);
    background: rgba(10, 44, 92, 0.82);
    color: var(--fip-white);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fip-com-card-body {
    padding: clamp(18px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.fip-com-card-body h3 {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--fip-ink);
    margin: 0 0 10px;
}
.fip-com-card-body p {
    font-family: var(--fip-font-body);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--fip-slate);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fip-com-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.fip-com-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fip-font-body);
    font-size: 0.8rem;
    color: var(--fip-slate);
}
.fip-com-card-meta i { color: var(--fip-blue-500); }
.fip-com-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--fip-blue-700);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
}
.fip-com-card-link:hover { text-decoration: underline; }

/* ---- 11.3 Newsletter ---- */
.fip-com-newsletter { padding: 0 var(--fip-page-inset) clamp(56px, 6vw, 84px); }
.fip-com-newsletter-card {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
    padding: clamp(28px, 3vw, 40px);
    border-radius: 24px;
    background: linear-gradient(120deg, var(--fip-blue-900) 0%, #0D3568 100%);
}
.fip-com-newsletter-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 320px;
    min-width: 0;
}
.fip-com-newsletter-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--fip-white);
    font-size: 1.3rem;
}
.fip-com-newsletter-left h3 {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
    line-height: 1.32;
    color: var(--fip-white);
    margin: 0;
}
.fip-com-newsletter-right { flex: 1 1 380px; min-width: 0; }
.fip-com-newsletter-right p {
    font-family: var(--fip-font-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 16px;
    max-width: 48ch;
}
.fip-com-newsletter-form { display: flex; gap: 10px; }
.fip-com-newsletter-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 18px;
    border-radius: var(--fip-radius-pill);
    border: none;
    font-family: var(--fip-font-body);
    font-size: 0.88rem;
}
.fip-com-newsletter-form input:focus { outline: 2px solid var(--fip-blue-500); outline-offset: 2px; }
.fip-com-newsletter-form button {
    flex: 0 0 auto;
    padding: 13px 24px;
    border: none;
    border-radius: var(--fip-radius-pill);
    background: var(--fip-blue-500);
    color: var(--fip-white);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 200ms var(--fip-ease);
}
.fip-com-newsletter-form button:hover { background: var(--fip-blue-700); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .fip-com-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .fip-com-featured-card { aspect-ratio: auto; min-height: 420px; }
    .fip-com-featured-overlay {
        background: linear-gradient(180deg,
            rgba(10, 44, 92, 0.5) 0%,
            rgba(10, 44, 92, 0.85) 55%,
            rgba(10, 44, 92, 0.95) 100%
        );
    }
    .fip-com-featured-content { max-width: 100%; }
    .fip-com-newsletter-card { flex-direction: column; align-items: flex-start; }
    .fip-com-newsletter-form { flex-direction: column; }
    .fip-com-newsletter-form button { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
    .fip-com-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .fip-com-dotgrid, .fip-com-ring { display: none; }
}








/* ==========================================================================
   12. PÁGINA 404 — imagen completa de fondo + texto superpuesto
   ========================================================================== */
.fip-404-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(100px, 90px + 4vw, 140px) var(--fip-page-inset) clamp(40px, 5vw, 64px);
    background: var(--fip-white);
}

.fip-404-card {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 8;
    min-height: 320px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--fip-shadow-lift);
}

/* La imagen ocupa toda la tarjeta, tal como en el diseño de referencia */
.fip-404-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Leve degradado a la izquierda, solo para asegurar contraste del texto
   sobre la ilustración sin taparla */
.fip-404-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.18) 38%,
        rgba(255, 255, 255, 0) 60%
    );
    pointer-events: none;
}

.fip-404-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 4vw, 56px);
    max-width: 480px;
}

.fip-404-eyebrow {
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--fip-blue-700);
    margin: 0 0 6px;
}

.fip-404-code {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(3.4rem, 2.6rem + 3.6vw, 5.2rem);
    line-height: 1;
    color: var(--fip-blue-900);
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.fip-404-title {
    font-family: var(--fip-font-display);
    font-weight: 800;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
    line-height: 1.32;
    color: var(--fip-blue-900);
    margin: 0 0 18px;
}

.fip-404-divider {
    width: 46px;
    height: 3px;
    border-radius: var(--fip-radius-pill);
    background: var(--fip-blue-500);
    margin: 0 0 18px;
}

.fip-404-text {
    font-family: var(--fip-font-body);
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--fip-slate);
    margin: 0 0 28px;
    max-width: 40ch;
}

.fip-404-btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    background: var(--fip-blue-700);
    color: var(--fip-white);
    font-family: var(--fip-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border-radius: var(--fip-radius-pill);
    box-shadow: 0 10px 26px rgba(20, 66, 140, 0.32);
    transition: background 200ms var(--fip-ease), transform 200ms var(--fip-ease);
}
.fip-404-btn:hover {
    background: var(--fip-blue-500);
    transform: translateY(-2px);
    color: var(--fip-white);
}
.fip-404-btn i { transition: transform 200ms var(--fip-ease); }
.fip-404-btn:hover i { transform: translateX(3px); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .fip-404-card { aspect-ratio: 4 / 3.4; }
    .fip-404-content { max-width: 100%; }
}
@media (max-width: 600px) {
    .fip-404-page { padding-top: clamp(90px, 80px + 4vw, 120px); }
    .fip-404-card {
        aspect-ratio: auto;
        min-height: 480px;
        border-radius: 20px;
    }
    .fip-404-scrim {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.85) 78%,
            rgba(255, 255, 255, 0.96) 100%
        );
    }
    .fip-404-content { justify-content: flex-end; padding-bottom: 32px; }
    .fip-404-btn { width: 100%; justify-content: center; }
}