.vuela-smart-section-mob { display: none; }

p {
    margin: 0;
}

.vuela-smart-section-desk {
    display: flex;
    padding: 100px 65.033px 50px 51px;
    align-items: center;
    justify-content: center;
    gap: 16.967px;
    background: #FFF;
    padding-top: 10px;
}

.area-visuals {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 27px;
}
/*PARA MOBILE
width: 327px;
height: 358px;
gap: 15.832px;
*/


.area-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 27px;
}

.area-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    align-self: stretch;
}

.area-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    align-self: stretch;
}

.img-avion {
    width: 440.199px;
    height: auto;
    transform: rotate(-1.259deg);
}

.img-mascotas {
    width: 391px;
    height: auto;
}

.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9.264px;
}

.logo1 {
    width: 87.431px;
    height: 19.126px;
}

.logo2 {
    width: 113.036px;
    height: 16.331px;
    aspect-ratio: 113.04/16.33;
}

.logo3 {
    width: 47.161px;
    height: 21.896px;
}

.logo4 {
    width: 97.915px;
    height: 23.5px;
}

.sep-logos {
    display: flex;
    width: 6.99px;
    height: 34.513px;
    flex-direction: column;
    justify-content: flex-end;

    color: var(--Complementary-Colors-Black-70, #E0E0E0);
    text-align: center;
    font-family: "Encode Sans";
    font-size: 33.756px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -0.675px;
}

.pill-date {
    display: flex;
    width: 391px;
    height: 31px;
    border-radius: 181.243px;
    padding: 9.062px 19.937px;
    justify-content: center;
    align-items: center;
    gap: 19.937px;
    background: #00AEC7;
}

.pill-date-text {
    display: flex;
    width: 348.396px;
    height: 21.749px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;

    color: var(--White--Background-White, #FFF);
    text-align: center;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 100% */
}

.titles-container {
    display: flex;
    width: 758px;
    height: 106px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.main-title {
    align-self: stretch;
    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-family: "Encode Sans";
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 37px;
    letter-spacing: -0.72px;
    text-align: center;
    text-wrap: balance;
}

.principal { 
    color: var(--Brand-Colors-Turquoise-00, #00AEC7);
    font-weight: 700;
    display: inline;
}

.secundario {
    display: inline;
}

.secundario strong {
    font-weight: 700;
}

.secundario p{
    display: inline;
}

.subtitle {
    align-self: stretch;
    color: var(--Brand-Colors-Blue-00, #1B365D);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 21.953px;
    margin: 0 auto;
}

.area-cards > .cards-wrapper {
    display: flex;
    align-items: center;
    gap: 21px;
}

.promo-card {
    position: relative;
    display: flex;
    width: 369px;
    height: 190px;
    padding: 30px 20px 15px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 20px;
    background: var(--Brand-Colors-Turquoise-00, #00AEC7);
}

.card-header {
    display: flex;
    height: 30.811px;
    padding: 9.062px 19.937px;
    justify-content: center;
    align-items: center;
    gap: 19.937px;

    position: absolute;
    left: 15px;
    top: -15.406px;

    border-radius: 10px !important;
    background: var(--Brand-Colors-Blue-00, #1B365D);
}

.card-header-text {
    display: flex;
    height: 21.749px;
    flex-direction: column;
    justify-content: center;

    color: var(--White--Background-White, #FFF);
    text-align: center;
    font-family: Lato;
    font-size: 18.124px;
    font-style: normal;
    font-weight: 800;
    line-height: 32.624px; /* 180% */
    text-transform: uppercase;
}

.card-body {
    display: flex;
    width: 339px;
    padding: 0px;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}

.discount-group {
    display: flex;
    width: auto;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
}

.discount-body {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
}

.off-number {
    display: flex;
    width: auto;
    height: 64.461px;
    flex-direction: column;
    justify-content: center;

    color: var(--White--Background-White, #FFF);
    font-family: "Encode Sans";
    font-size: 78.054px;
    font-style: normal;
    font-weight: 800;
    line-height: 21.953px;
}

.off-label {
    display: flex;
    width: 47.947px;
    height: 64.461px;
    flex-direction: column;
    justify-content: flex-end;
}

.off-symbol {
    color: var(--White--Background-White, #FFF);
font-family: "Encode Sans";
font-size: 43.905px;
font-style: normal;
font-weight: 700;
line-height: 1;
}

.off-dto {
    color: var(--White--Background-White, #FFF);
font-family: "Encode Sans";
font-size: 19.514px;
font-style: normal;
font-weight: 700;
line-height: 1;
}

.desc-text {
    color: var(--Brand-Colors-Blue-00, #1B365D);
    align-self: stretch;
    text-align: center;
    width: 100%;

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

.sep-line {
    width: 1px;
    height: 95.46px;
    background: #B4F8FF;
}

.card-code {
    display: flex;
    padding: 8.537px 12.196px;
    justify-content: center;
    align-items: center;
    gap: 13.416px;
    border-radius: 9.757px;
    background: rgba(255, 255, 255, 0.29);
}

.card-code p {
    color: var(--White--Background-White, #FFF);
    font-family: Lato;
    font-size: 14.635px;
    font-style: normal;
    font-weight: 400;
    line-height: 14.635px; /* 100% */
    text-transform: uppercase;
}


.legales-txt {
    align-self: stretch;
    color: var(--Brand-Colors-Blue-00, #1B365D);
    text-align: center;
    font-family: "Sofia Sans Extra Condensed", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14.635px; /* 121.96% */
    text-transform: uppercase;
}

/* Pasos 1-2-3-4 */
.steps-list {
    display: flex;
    align-items: center;
    gap: 11px;
}

.step { display: flex; align-items: center; gap: 8px; }

.step-num {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7.5px;
}

.contenedor-num {
    position: relative;
    width: 31px;
    height: 31px;
}

/* TODOS superpuestos y centrados */
.contenedor-num svg,
.contenedor-num .number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Número */
.number {
    color: white;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.step-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    color: #2A3A67;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 112.5% */
}

.steps-list .step:nth-child(1) .step-desc {
    max-width: 107px; 
}

.steps-list .step:nth-child(3) .step-desc {
    max-width: 80px;
}

.steps-list .step:nth-child(5) .step-desc {
    max-width: 65px;
}

.steps-list .step:nth-child(7) .step-desc {
    max-width: 44px;
    font-weight: 700;
}

.step-arrow { color: #ccc; transition: transform 0.3s; }

.area-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.footer-main { 
    display: flex;
    height: 30.811px;
    padding: 9.062px 19.937px;
    justify-content: center;
    align-items: center;
    gap: 19.937px;

    border-radius: 181.243px;
    background: var(--Brand-Colors-Turquoise-00, #00AEC7);  
}

.footer-text {
    display: flex;
    height: 21.749px;
    flex-direction: column;
    justify-content: center;

    color: var(--White--Background-White, #FFF);
    text-align: center;
    font-family: Lato;
    font-size: 18.124px;
    font-style: normal;
    font-weight: 800;
    line-height: 32.624px; /* 180% */
    text-transform: uppercase;
}

.footer-sub { 
    width: 215.941px;

    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-family: "Sofia Sans Extra Condensed" !important;
    font-size: 14.499px;
    font-style: normal;
    font-weight: 400;
    line-height: 21.749px; /* 150% */
    text-transform: uppercase;
}
/*
@media (max-width: 1300px) {
    .promo-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "visuals"
            "cards"
            "footer";
        gap: 30px;
    }

    .area-header { text-align: center; }
    
    .area-cards > .cards-wrapper {
        flex-direction: column;
    }

    .steps-row {
        flex-direction: column;
        gap: 10px;
    }
    .step-arrow {
        transform: rotate(90deg);
        margin: 5px 0;
    }
}
*/

@media (max-width: 768px) {
    .vuela-smart-section-desk {
        display: none;
    }

    .vuela-smart-section-mob {
        display: flex;
        width: 100%;
        min-width: 375px;
        padding: 36.926px 0 31.896px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFF;
    }

    .contenedor-mob {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .area-header { gap: 16px; }

    .pill-date {
        width: 266.602px;
        height: 21.137px;
        padding: 6.179px 13.594px;
        gap: 13.594px;
        border-radius: 123.58px;
    }

    .pill-date-text {
        width: 237.553px;
        height: 14.83px;

        font-size: 12.273px;
        line-height: 12.273px;
    }

    .titles-container { gap: 5px; width: 100%; align-items: center; text-align: center; }

    .main-title {
        font-size: 28px;
        line-height: 29px;
        letter-spacing: -0.56px;
    }

    .subtitle {
        max-width: 285px;
        font-size: 16px;
        line-height: 20px;
    }

    .area-visuals {
        gap: 15.832px;
    }

    .img-avion {
        width: 266.353px;
    }

    .img-mascotas {
        width: 227px;
        flex-shrink: 0;
    }

    .partner-logos {
        gap: 7.317px;
    }

    .sep-logos {
        width: 5.52px;
        height: 27.259px;

        font-size: 26.66px;
        letter-spacing: -0.533px;
    }

    .logo1 { width: 69.054px; height: 15.106px; }

    .logo2 { width: 89.277px; height: 12.898px; aspect-ratio: 89.28/12.90; }

    .logo3 { width: 37.248px; height: 17.294px; }

    .logo4 { width: 52.546px; height: 33.922px; }

    .cards-wrapper-mob {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25.875px;
    }

    .promo-card {
        width: 100%;
        max-width: 339px;
        height: 175.583px;
        padding: 27.724px 18.482px 13.862px 18.482px;
        gap: 13.862px;
        border-radius: 18.482px;
    }

    .card-body {
        width: 313px;
        height: 84px;
        gap: 13.862px;
        flex-shrink: 0;
    }

    .discount-group {
        width: 142.109px;
        gap: 5.545px;
        align-items: center;
        text-align: center;
    }

    .off-number {
        width: 97.8px;
        height: 59.569px;

        font-size: 72.131px;
        line-height: 20.287px; /* 28.125% */
    }

    .off-label {
        width: 44.309px;
        height: 59.569px;
    }

    .off-symbol {
        font-size: 40.574px;
    }

    .off-dto {
        font-size: 18.033px;
    }

    .desc-text {
        font-size: 14px;
        line-height: 18.482px;
    }

    .sep-line {
        width: 0.924px;
        height: 84px;
    }

    .card-header {
        height: 28.473px;
        padding: 8.375px 18.424px;
        gap: 18.424px;

        left: 13.861px;
        top: -14.237px;

        border-radius: 9.241px;
    }

    .card-header-text {
        height: 20.099px;

        font-size: 16.749px;
        line-height: 30.148px; /* 180% */
    }

    .card-code {
        padding: 7.889px 11.271px;
        gap: 12.398px;

        border-radius: 9.016px;
    }

    .card-code p {
        font-size: 13.525px;
        line-height: 13.525px;
    }

    .footer-text {
        font-size: 15px;
        line-height: 32.624px;
    }

    .legales-txt { align-self: center; width: 310.008px; }

    .steps-list {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
    }

    .step-arrow { transform: rotate(90deg); }

    .step-desc { width: 100%; max-width: none !important; font-weight: 700;}

}