/* ============================================================
   KBC — RESPONSIVE LAPTOP CHICO (1100px - 1279px)
   Referencia de diseno: 1147 x 745.

   Una sola media query, igual que los otros archivos responsive.
   Carga DESPUES de responsive-ipad-horizontal.css, asi que en la
   franja 1100-1199 le gana a las reglas de iPad (que estaban
   pensadas para tablet tactil, no para laptop).

   Alcance: MENU (header + hamburguesa), BOTONES y ESCALA
   TIPOGRAFICA. No toca layout de secciones ni animaciones GSAP.
   ============================================================ */
@media (min-width: 1100px) and (max-width: 1279.98px) {

    /* ============================================================
       1) ESCALA TIPOGRAFICA
       Entre iPad horizontal (88px) y desktop (120px).
       ============================================================ */
    .kbc--font    { font-size: 104px; }
    .kbc--font-xl { font-size: 132px; }
    .kbc--font-lg { font-size: 116px; }
    .kbc--font-md { font-size: 76px; }
    .kbc--font-sm { font-size: 56px; }
    .kbc--font-xs { font-size: 34px; }

    /* Copy de apoyo: en desktop los leads van a 24px y a 1147
       se comen el ancho de columna. */
    body { font-size: 17px; }
    .lead,
    .kbc-lead,
    .kbc--lead { font-size: 19px; line-height: 1.55; }

    /* ============================================================
       2) HEADER / NAV
       El boton hamburguesa arrastraba "padding: 14px 24px" y
       "margin-top: -25px" del diseno viejo (era un boton con
       texto "Menu"). Con el icono de 34x20 eso lo sacaba fuera
       del viewport y lo descentraba en vertical.
       ============================================================ */
    .kbc-nav__inner {
        height: 76px;
        padding: 0 32px !important;   /* aire real a los dos lados */
    }
    .kbc-nav__cross { width: 46px; height: 46px; }

    /* Los 9 links + la hamburguesa tienen que caber en 1147.
       El padding derecho de la ul es el carril donde vive el boton. */
    .kbc-nav__links {
        gap: 4px;
        padding: 14px 84px 14px 0;   /* 84px = carril del boton + el translateX que le mete GSAP en el morph del hero */
    }
    .kbc-nav__links li a {
        font-size: 13px;
        gap: 5px;
        letter-spacing: 0;
    }
    .kbc-nav__links li a::before { width: 6px; height: 6px; }

    /* Hamburguesa: caja limpia de 30x18, centrada y pegada al
       borde derecho de su wrapper (sin padding heredado). */
    .kbc-nav__menu-btn {
        width: 30px;
        height: 18px;
        padding: 0 !important;
        font-size: 0;
        right: 0;
        top: 50%;
        margin-top: -9px !important;
    }
    .kbc-nav__menu-btn span { height: 2px; }

    /* Mega menu: mismas proporciones que iPad pero con el aire
       lateral del header de laptop. */
    .kbc-mega { padding: 84px 32px 0; }
    .kbc-mega__inner { grid-template-columns: 230px 1fr 280px; }
    .kbc-mega__cat { padding: 11px 22px; font-size: 14px; }
    .kbc-mega__mid { padding: 26px 28px; }
    .kbc-mega__sub-title { font-size: 17px; }

    /* ============================================================
       3) BOTONES
       ============================================================ */
    .btn-black,
    .btn-transparent-black,
    .btn-white,
    .btn-transparent-white,
    .btn-beige {
        padding: 12px 26px;
        font-size: 13px;
        border-radius: 8px;
    }
    .kbc-btn-pill,
    .kbc-btn-pill--dark { padding: 10px 22px; font-size: 13px; }

    /* Botones que en desktop van sueltos en fila: que no se
       desborden si el texto es largo. */
    .btn-black + .btn-black,
    .btn-black + .btn-transparent-black,
    .btn-white + .btn-transparent-white { margin-left: 10px; }

    /* ============================================================
       4) CONTENEDOR
       ============================================================ */
    .container-xxl { padding-left: 32px; padding-right: 32px; }

    /* ============================================================
       5) WHAT WE BELIEVE — Statement of Faith
       El panel negro es la seccion con mas texto del sitio.
       ============================================================ */
    .wwb-modal__nav { width: 168px; }
    .wwb-tab { padding: 11px 14px; font-size: 15px; }
    .wwb-panel__title { font-size: 19px; }
    .wwb-panel p,
    .wwb-panel__list { font-size: 15px; }
    .wwb-panel__sub,
    .wwb-panel__label { font-size: 15px; }
    .wwb-panel__ref { font-size: 15px; }
    .wwb-panel__group { font-size: 17px; }
}