/* =========================
   Header Section Container
========================= */
.header-section {
    text-align: center;
    padding: 50px 24px 10px 24px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url("https://assets-us-01.kc-usercontent.com/b2956330-c34f-0064-2c6f-27bd5c0147fc/32a06676-d596-47a3-bb58-b8f1f7425156/fondo_hero.png");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 1444px;
}

.header-section .intro{
    max-width: 800px;
}

/* =========================
   Eyebrow / Alliance Label
========================= */
.header-eyebrow {
    color: var(--White--Background-White, #FFF);
    text-align: center;
    font-family: "Encode Sans";
    font-size: 48.482px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.97px;
    transform: translateX(0px) translateY(-41px);
}

/* =========================
   Main Logo
========================= */
.header-main-logo {
    margin-bottom: 32px;
    width: 265px;
    height: 58px;
}

/* =========================
   Partner Logos
========================= */
.header-partners {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
    margin-top: 20px;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo.logo{
    height: 28px;
}

.partner-logo.machbank{
    height: 24px;
}

.partner-logo.bci{
    height: 32px;
}

.partner-logo.lider{
    height: 29px;
}

.partner-separator {
    color: var(--Complementary-Colors-Black-70, #E0E0E0);
    text-align: center;
    font-family: "Encode Sans";
    font-size: 50px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -1.12px;
    width: 11.596px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================
   Main Title
========================= */
.header-title {
    margin-top: 193px;
    color: var(--Brand-Colors-Blue-00, #1B365D);
    text-align: center;

    font-family: "Encode Sans";
    font-size: 48.482px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.97px;
}


/* White + Bold text inside title */
.header-title strong {
    color: var(--Brand-Colors-Turquoise-00, #00AEC7);
    font-family: "Encode Sans";
    font-size: 48.482px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.97px;
}


/* =========================
   Subtitle
========================= */
.header-subtitle {
    color: var(--Brand-Colors-Blue-00, #1B365D);
    text-align: center;

    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;

    max-width: 900px;
    margin: 0 auto;
    margin-top: 15px;
}
.header-subtitle p {
    margin: 0;
}

.header-subtitle p + p {
    margin-top: 8px; /* ajustable según diseño */
}

.header-subtitle strong {
    color: var(--Brand-Colors-Blue-00, #1B365D);

    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 27px;
}

/* =========================
   BUTTON
========================= */
.get-card{
    margin-top: 27px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.get-card button{
    border-radius: 30px;
    border: 2.5px solid var(--Brand-Colors-Blue-00, #1B365D);;
    display: flex;
    height: 42px;
    padding: 11px 20px;
    justify-content: center;
    align-items: center;
    background: var(--Brand-Colors-Blue-00, #1B365D);;
    color: var(--White--Background-White, #FFF);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 88.889% */
    transition:
            color 0.25s ease,
            border-color 0.25s ease,
            background 0.25s ease;
}

.get-card button:hover{
    border: 2.5px solid var(--Brand-Colors-Turquoise-00, #00AEC7);
    color: var(--White--Background-White, #FFF);
    background: var(--Brand-Colors-Turquoise-00, #00AEC7);
}

.get-card button:focus,
.get-card button:active {
    outline: none;
    box-shadow: none;
}

/* =========================
   AVION Y TARJETAS
========================= */
.cards-airplane-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 180px;
}

.airplane-image {
    position: absolute;
    top: -231px;
    z-index: 6;
    width: 877.42px;
    height:404.688px;
    aspect-ratio: 755.52/303.69;
}


.cards-airplane-section > .cards-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    max-width: 100px;
}

.airplane-card {
    position: relative;
    z-index: 1;
    height: 330px;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.20));
}

/* Ajustes específicos para cada tarjeta */
.card-left-2 {
    transform: translateX(50px) translateY(146px) rotate(-9.571deg);
    z-index: 1;
}

.card-left-1 {
    transform: translate(27px, 115px) rotate(-8.21deg);
    z-index: 2;
}

.card-center {
    margin: 0 -20px;
    z-index: 5;
    top: 103px;
}

.card-right-1 {
    transform: translateX(-37px) translateY(113px) rotate(6.756deg);
    z-index: 2;
}

.card-right-2 {
    transform: translateX(-60px) translateY(139px) rotate(7.651deg);
    z-index: 1;
}


@media (min-width: 768px) and (max-width: 1200px) {
    .cards-airplane-section .airplane-image{
        width: 668px;
        height: 319px;
        aspect-ratio: 755.52 / 303.69;
        top: -170px;
    }

    .cards-airplane-section > .cards-wrapper .airplane-card{
        height: 270px;
    }

    .card-left-2 {
        transform: translateX(50px) translateY(140px) rotate(-9.571deg);
    }

    .card-right-2 {
        transform: translateX(-60px) translateY(135px) rotate(7.651deg);
    }
}

/** MOBILE */
@media screen and (max-width: 768px) {
    .header-section{
        padding-top: 40px;
        padding-bottom: 50px;
        background-image: url("https://assets-us-01.kc-usercontent.com/b2956330-c34f-0064-2c6f-27bd5c0147fc/9ebfa289-50bc-44fb-9abc-61725d136986/fondo_mob.png");
        min-height: auto;
    }

    .header-eyebrow{
        color: var(--White--Background-White, #FFF);
        text-align: center;
        font-family: "Encode Sans";
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -0.52px;
        transform: translateX(0px) translateY(-24px);
    }

    .header-main-logo{
        width: 125px;
        height: 27px;
        margin-bottom: 10px;
    }
    .header-partners{
        gap: 8px;
        margin-bottom: 10px;
    }

    .partner-logo.logo{
        width: 70px;
    }

    .partner-logo.machbank{
        height: 13px;
    }

    .partner-logo.bci{
        height: 17px;
    }

    .partner-logo.lider{
        height: 17px;
    }

    .header-title {
        color: var(--Brand-Colors-Blue-00, #1B365D);
        text-align: center;
        font-family: "Encode Sans";
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.52px;
        margin-top: 60px;
    }


    /* White + Bold text inside title */
    .header-title strong {
        color: var(--Brand-Colors-Turquoise-00, #00AEC7);
        font-family: "Encode Sans";
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -0.52px;
    }

    .header-subtitle {
        color: var(--Brand-Colors-Blue-00, #1B365D);
        text-align: center;

        /* Paragraphs/Normal/Body-Regular */
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 125% */
    }

    .header-subtitle strong {
        color: var(--Brand-Colors-Blue-00, #1B365D);

        /* Paragraphs/Normal/Body-Bold */
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
    }

    .get-card button{
        height: 38px;
        padding: 9px 16px;
        leading-trim: both;
        text-edge: cap;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .partner-separator{
        text-align: center;
        font-family: "Encode Sans";
        font-size: 22px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        letter-spacing: -0.28px;
    }

    .cards-airplane-section{
        margin-top: 80px;
    }

    .cards-airplane-section .airplane-image{
        width: 303.529px;
        height: 142.752px;
        aspect-ratio: 263.66 / 105.98;
        top: -100px;
    }

    .cards-airplane-section > .cards-wrapper .airplane-card{
        height: 120px;
    }

    /* Ajustes específicos para cada tarjeta */
    .card-left-2 {
        transform: translateX(-1px) translateY(41px) rotate(-9.571deg);
    }

    .card-left-1 {
        transform: translateX(-8px) translateY(29px) rotate(-8.21deg);
    }

    .card-center{
        top: 24px;
    }

    .card-right-1 {
        transform: translateX(6px) translateY(28px) rotate(6.756deg);
    }

    .card-right-2 {
        transform: translateX(-3px) translateY(38px) rotate(7.651deg);
    }
}