p {
    margin: 0;
}

.vuela-smart-section {
    display: flex;
    padding: 75px 50px 0px 50px;
    align-items: center;
    justify-content: center;
    background: #FFF;
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

.mascota-mob-top-container {
    display: none;
}

.mascota-mob-bottom {
    display: none;
}

.steps-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mascota-side {
    position: absolute;
}

.mascota-izq {
    left: -220px;
    bottom: auto;
}

.mascota-der {
    right: -230px;
    bottom: auto;
}

.mascota-side img {
    width: 100%;
    height: auto;
    display: block;
}

.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;
    z-index: 2;
    position: relative;
    padding-bottom: 50px;
    width: 100%;
    max-width: 1100px;
}

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

.area-cards {
    display: flex;
    max-width: 667px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    align-self: stretch;
}

.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: 100%;
    max-width: 758px;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: center;
    text-align: center;
}

.titles-container h2 {
    font-family: "Encode Sans";
}

.secundario p {
    font-family: "Encode Sans";
}

.main-title p {
    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;
}

.main-title p strong:first-child {
    color: #00AEC7;
}

.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-mob {
    display: none;
}

.card-row-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    position: relative;
}

.mascota-row {
    position: absolute;
    width: 180px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.mascota-row-left {
    left: 0;
}

.mascota-row-right {
    right: 0px;
}

.mascota-row img {
    display: block;
    position: relative;
}

.mascota-1 img {
    transform: translate(168px, 65px);
}

.mascota-2 img {
    transform: translate(-70px, 18px);
}

.mascota-3 img {
    transform: translate(240px, 15px);
}

.mascota-4 img {
    transform: translate(-220px, 30px);
}

.card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 667px;
    max-width: 100%;
}

.pagando-con {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-family: "Encode Sans";
    font-size: 26.954px;
    font-style: normal;
    font-weight: 400;
    line-height: 27.703px;
    /* 102.778% */
    letter-spacing: -0.539px;
    text-align: center;
}

.pagando-logo {
    height: 26px;
    width: auto;
    object-fit: contain;
}

.promo-card-combined {
    display: flex;
    height: 178px;
    padding: 0 30px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 20px;
    background: var(--Brand-Colors-Turquoise-00, #00AEC7);
}

.promo-separator {
    width: 2px;
    height: 140px;
    background: var(--Complementary-Colors-Black-80, #F2F2F2);
    margin: 0 10px;
}

.promo-inner-col {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 20px;
    padding-bottom: 15px;
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    box-sizing: border-box;
}

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

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

    position: absolute;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);

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

.card-header-text p {
    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: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 32.624px;
    /* 180% */
    text-transform: uppercase;
}

.card-body {
    display: flex;
    width: 339px;
    padding: 0 !important;
    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: center;
    justify-content: center;
    align-self: stretch;
}

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

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

.off-label p strong {
    color: var(--White--Background-White, #FFF);
    font-family: "Encode Sans";
    font-size: 52.975px;
    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;
    margin-bottom: 6px;
    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 {
    display: flex;
    margin: 0 auto;
    padding: 8px 10px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Brand-Colors-Blue-35, #E4EAF1);
}

.legales-txt p {
    margin: 0;
    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* 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: 100px;
}

.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;
}

.footer-text p {
    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;
}

/* suscripcion.css es compartido entre landings; antes el padding-top venia como
   style inline desde el include en vuelaSmart.twig, lo que impedia que este
   @media lo pudiera pisar en mobile. Se pisa acá, scopeado a esta pagina. */
.suscripcion-section {
    padding-top: 60px;
}

@media (max-width: 768px) {
    .suscripcion-section {
        padding-top: 25px;
        padding-bottom: 0;
    }

    .vuela-smart-section {
        width: 100%;
        padding: 36.926px 0 31.896px 0;
        flex-direction: column;
        min-height: auto;
    }

    .pagando-con {
        font-size: 20px;
    }

    .card-container {
        width: 341px;
    }

    .pagando-logo {
        height: 20px;
    }

    .pagando-logo-mach {
        height: 20px;
    }

    .pagando-logo-bci {
        height: 26px;
    }

    .pagando-logo-lider {
        height: 20px;
    }

    .area-content {
        gap: 25px;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .area-footer {
        order: 1;
    }

    .steps-container {
        order: 2;
    }

    .area-cards-desk {
        display: none !important;
    }

    .area-cards-mob {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        width: 100%;
    }

    .mascotas-mob-middle {
        display: flex;
        justify-content: space-around;
        width: 100%;
        max-width: 339px;
        margin: 10px 0;
    }

    .mascota-side {
        display: none;
    }

    .mascota-mob-top-container {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .mascota-mob-bottom {
        display: block;
    }

    .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 p {
        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;
    }

    .mascota-mob-top {
        width: 180px;
        height: auto;
        margin-top: -20px;
    }

    .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;
    }

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

    .mascota-row {
        display: none;
    }

    .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 {
        font-size: 94px;
        line-height: 20.287px;
        /* 28.125% */
    }


    .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: auto;
        top: -15px;

        border-radius: 9.241px;
        transform: none;
    }

    .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 p {
        font-size: 15px;
        line-height: 32.624px;
    }

    .legales-txt {
        display: flex;
        width: 100%;
        max-width: 339px;
        padding: 8px 10px;
        align-items: center;
        gap: 10px;
        align-self: stretch;

        color: var(--Brand-Colors-Blue-00, #1B365D);
        font-family: Lato;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .steps-container {
        padding-top: 20px;
    }

    .mascota-mob-bottom {
        position: absolute;
        left: 30px;
        bottom: 0;
        width: 120px;
        z-index: 1;
    }

    .steps-list {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        margin-left: 50px;
        /* Mueve el contenido hacia la derecha */
    }

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

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