:root {
    --container: 1136px;
    --accent: #F73B58;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.servicios-desarrollo-web-ecommerce {
    font-family: 'Epilogue', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    cursor: default;
}

.brand {
    position: relative;
    left: -34px;
    width: 140px;
    height: 30px;
}

.brand::after {
    content: "";
    width: 10px;
    height: 10px;
    border: 2px solid var(--white);
    transform: rotate(45deg);
    display: inline-block;
    opacity: .95;
}

.btn-outline {
    appearance: none;
    border: 1.6px solid var(--white);
    background: transparent;
    color: var(--white);
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}

.btn-outline:hover {
    background: var(--white);
    color: #111;
}

/* ===== Hero ===== */
.hero {
    position: relative;
    min-height: 87vh;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    overflow: hidden;
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
    z-index: -2;
}

.hero__img_mobile {
    display: none;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .62) 100%);
    z-index: -1;
}

.hero__content {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px 0px 66px;
    cursor: default;
}

.hero__title {
    margin: 0;
    font-weight: 00;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-size: 64px;
    text-wrap: balance;
}

/* salto solo en mobile */
.br-md {
    display: none;
}

@media (max-width: 768px) {
    .br-md {
        display: inline;
    }
}



.intro-band {
    background: var(--accent);
    color: var(--white);
    padding: 80px 0;
    background: var(--accent);
    color: var(--white);
    padding: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-band .p-desktop {
    margin: 0;
    font-size: 26px;
    line-height: 140%;
    font-weight: 300;
    opacity: .98;
    color: white;
}

.intro-band .p-desktop {
    display: block;
}

.intro-band .p-mobile {
    display: none;
}

.svc {
    background: #0A3D54;
    color: #fff;
    padding: 72px 0 0;
}

.svc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
}

.svc__content {
    max-width: 760px;
    margin-top: 54px;
}

.svc-h2 {
    margin: 0 0 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-size: 42px;
}

.svc__list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    row-gap: 18px;
}

.svc-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 10px;
    align-items: start;
}

.svc-item__icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    flex: 0 0 22px;
    background-color: var(--accent, #F73B58);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.svc-item__title {
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.45;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    color: #fff;
}

.svc-item__desc {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    font-style: light;
    line-height: 1.65;
    color: #fff;
}

.svc-item__desc-mobile {
    display: none;
    margin: 0;
    font-weight: 300;
    font-style: light;
    line-height: 1.65;
    color: #fff;
}


.svc__media {
    width: 100%;
    max-width: 520px;
    justify-self: end;
    overflow: hidden;
}

.svc__media .services-img {
    display: block;
    width: 530px;
    height: 100%;
    max-height: 811px;
    object-fit: cover;
    object-position: center;
}

.svc__media .services-img-mobile {
    display: none;
}

.cases {
    background: #0A3D54;
    color: #fff;
    padding: 64px 0 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cases__head {
    margin-bottom: 36px;
}

.cases-title {
    margin: 0 0 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-size: 42px;
}

.cases-title .accent {
    color: #F73B58;
}

.cases__lead {
    margin: 0;
    max-width: 860px;
    color: #fff;
    font-size: 18px;
    line-height: 140%;
    font-weight: 300;
}

.cases__lead_mobile {
    margin: 0;
    max-width: 860px;
    color: #fff;
    font-size: 18px;
    line-height: 140%;
    font-weight: 300;
    display: none;
}

.cases__grid {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14.8px;
}

.span-6 {
    grid-column: span 6;
}

.span-3 {
    grid-column: span 3;
}

.case {
    --frame: #282723;
    background: var(--frame);
}

.case__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin: 0;
}

.case__media>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.case__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 85%);
}

.case__caption {
    position: absolute;
    left: 16px;
    bottom: 12px;
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
    z-index: 3;
}

/* Hover effect: zoom-in en la imagen del case */
.case {
    cursor: default;
}

.case__media>img {
    transform: scale(1);
    transform-origin: center;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), filter .35s;
    will-change: transform;
}

.case:hover .case__media>img {
    transform: scale(1.035);
    /* zoom sutil */
    filter: saturate(1.02) contrast(1.02);
}

/* Subrayado del caption al hacer hover sobre la tarjeta */
.case:hover .case__caption {
    text-decoration: underline;
    text-decoration-color: #fff;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* Accesible para teclado (si en el futuro el case contiene links) */
.case:focus-within .case__media>img {
    transform: scale(1.035);
}

.case:focus-within .case__caption {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* Card clickeable completa */
.case {
    position: relative;
    cursor: pointer;
}

.case__link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 10;
    /* transparente, solo captura el click */
    background: transparent;
}

.case__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
    border-radius: 4px;
}

/* ya tenés el zoom + underline; se mantiene con el overlay */


/* Respeta usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce) {
    .case__media>img {
        transition: none;
    }

    .case:hover .case__media>img {
        transform: none;
        filter: none;
    }

    .case:focus-within .case__media>img {
        transform: none;
    }
}


.overlay-card {
    position: absolute;
    /* box-shadow: 0 14px 36px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .08) inset; */
}

.overlay-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.case--disney .case__media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
}

.case--disney .case__media>img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    padding: 0px 7px 0px;
}

.case--criba .case__media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
}

.case--criba .case__media>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.case--tromen .case__media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
}

.case--tromen .case__media>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 25px 15px 0px;
}

.case--metrogas .case__media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
}

.case--metrogas .case__media>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 20px 15px 0px;
}


.case.is-brown {
    --frame: #282723;
}

.case.is-red {
    --frame: #B21417;
}

.case.is-lightbrown {
    --frame: #9D8666;
}

.case.is-darkbrown {
    --frame: #0B0B0B;
}

.case.is-cream {
    --frame: #FADD9D;
}

.case.is-sky {
    --frame: #00BBF2;
}

.vp {
    background: #0A3D54;
    color: #fff;
    padding-bottom: 90px;
}

.vp__grid {
    display: grid;
    grid-template-columns: 56% 44%;
    align-items: center;
    gap: 0px;
}

.vp__media {
    position: relative;
    min-height: 360px;
}

.vp-laptop {
    position: absolute;
    left: -293px;
    width: 900px;
    height: auto;
    display: block;
    bottom: -45px;
}

.vp-laptop-mobile {
    display: none;
}

.vp-phone {
    position: absolute;
    left: 68%;
    bottom: 50px;
    width: 160px;
    height: 313px;
    transform: translateX(-50%);
}

.vp-shadow {
    position: absolute;
    left: 12%;
    right: 18%;
    bottom: -4px;
    height: 26px;
    background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.vp__copy h2 {
    margin: 0 0 39px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.01em;
    font-size: 42px;
}

.vp__lead {
    margin: 0 0 20px;
    max-width: 529px;
    font-size: 18px;
    line-height: 140%;
    color: rgba(255, 255, 255, .9);
    font-weight: 400;
}

.vp__text {
    margin: 0;
    max-width: 529px;
    font-size: 18px;
    line-height: 1.75;
    line-height: 140%;
    color: rgba(255, 255, 255, .9);
    font-weight: 400;
}

/* ===== Testimonios (3 tarjetas fijas + link) ===== */
.testi {
    --card-w: 490px;
    --card-h: 350px;
    --gap: 16px;
    background: #E9ECEF;
    padding: 72px 0;
    color: #0A3D54;
    display: flex;
}

.testi-h2 {
    margin: 0 0 28px;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-size: 42px;
    color: #0A3D54;
}

.tst__scroller {
    overflow: visible;
    padding: 0;
}

.tst__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.tst-card {
    background: #fff;
    padding: 42px 24px;
    height: var(--card-h);
    display: flex;
    flex-direction: column;
    position: relative;
}

.tst-tag {
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 16px;
}

.tst-quote {
    margin: 0 0 auto;
    font-size: 18px;
    line-height: 1.4;
    color: #0A3D54;
    font-weight: 400;
}

.tst-author {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--accent);
}

.tst-author span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--accent);
}

.quotation-marks {
    width: 100%;
    top: -30px;
    position: relative;
    display: flex;
    justify-content: end;
}

.quotation-marks img {
    width: 38px;
    height: 26px;
    display: block;
}

.test-more-wrapper {
    margin: 30px 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-link {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 7px 3px 3px 3px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #F73B58;
    overflow: hidden;
    transition: color .5s ease;
    cursor: pointer;
}

/* fondo animado que se llena izq→der POR DEBAJO del contenido */
.btn-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #F73B58;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    z-index: -1;
}

/* texto (en span) arriba del bg */
.btn-link>span {
    position: relative;
    z-index: 1;
}

/* icono dentro del link */
.btn-link__icon {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    /* por encima del bg */
    transition: filter .3s ease, transform .2s ease;
}

/* hover/focus: se llena, texto blanco, icono blanco */
.btn-link:hover,
.btn-link:focus-visible {
    color: #fff;
}

.btn-link:hover::before,
.btn-link:focus-visible::before {
    transform: scaleX(1);
}

.btn-link:hover .btn-link__icon,
.btn-link:focus-visible .btn-link__icon {
    /* convierte cualquier svg oscuro/rojo a blanco */
    filter: brightness(0) invert(1) contrast(1);
    transform: translateX(2px);
}

/* Visited coherente */
.btn-link:visited {
    color: #F73B58;
}

.btn-link:visited:hover,
.btn-link:visited:focus-visible {
    color: #fff;
}

/* ===== Cómo trabajamos ===== */
.how {
    background: #0A3D54;
    color: #fff;
    padding: 80px 0 86px;
}

.how__grid {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    gap: 48px;
}

.how h2 {
    margin: 0 0 40px;
    font-weight: 700;
    line-height: 134%;
    letter-spacing: -0.01em;
    font-size: 42px;
}

.how h2 .accent {
    color: #F73B58;
}

.how__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    row-gap: 18px;
}

.step {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 10px;
    align-items: start;
}

.step__num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #F73B58;
    color: #F73B58;
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
    padding-top: 4px;
}

.step__text h3 {
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.45;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    color: #fff;
}

.step__text p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    font-style: light;
    line-height: 1.65;
    color: #fff;
}

.how__media {
    position: relative;
    min-height: 300px;
    margin-top: 100px;
}

.how__media img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 600px;
}

/* ===== Contacto ===== */
.contacto {
    background: #F73B58;
    color: #fff;
    padding: 113px 0 70px;
}

.contacto__grid {
    display: grid;
    grid-template-columns: 1fr 513px;
    gap: 48px;
    align-items: start;
}

.contacto__intro h2 {
    margin: 0;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-size: 42px;
}

.contacto__form {
    display: grid;
    row-gap: 21px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field label {
    font-size: 14px;
    line-height: 1;
    color: #fff;
    font-weight: 400;
}

.contacto input,
.contacto textarea {
    width: 515px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    font-family: inherit;
    font-size: 14.5px;
    padding: 0 12px;
}

.contacto input {
    height: 45px;
    line-height: 45px;
}

.contacto textarea {
    height: 130px;
    padding: 12px;
    resize: vertical;
    min-height: 130px;
    max-height: 320px;
}

.contacto input::placeholder,
.contacto textarea::placeholder {
    color: rgba(255, 255, 255, .75);
}

.contacto input:focus,
.contacto textarea:focus {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .2);
}

.contacto input:required:invalid,
.contacto textarea:required:invalid {
    border-color: #FFE1E8;
    background: rgba(255, 255, 255, .03);
}

.btn-enviar {
    margin-top: 8px;
    width: 172px;
    height: 48px;
    border: 0;
    background: #fff;
    color: #F73B58;
    text-transform: uppercase;
    letter-spacing: 0%;
    font-weight: 700;
    line-height: 100%;
    font-size: 16px;
    cursor: pointer;
    transition: transform .06s ease, filter .2s ease;
}

.contacto .field {
    border-color: rgb(255, 225, 232);
    background: rgba(255, 255, 255, 0.03);
}

.btn-enviar:active {
    transform: translateY(1px);
}

.btn-enviar:hover {
    filter: brightness(.96);
}

@media (max-width: 768px) {

    .svc__grid {
        grid-template-columns: 1fr;
        place-items: center;
    }

    .svc__media {
        order: -1;
        justify-self: center;
    }

    .svc__media img {
        max-height: 500px;
    }

    .vp__media {
        max-height: 200px;
    }
}

@media (max-width: 600px) {

    .hero__content {
        padding: 100px 24px 30px;
    }

    .brand {
        width: 114px;
        height: 24px;
        left: 0;
    }

    .btn-outline {
        font-size: 12px;
        padding: 12px 18px;
    }

    .hamburger {
        width: 23px;
        height: 15px;
    }

    .hero__title {
        display: block;
        margin: 0;
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: 0;
        text-wrap: balance;
        font-size: 32px;
    }

    .hero__img {
        display: none;
    }

    .hero__img_mobile {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: none;
        z-index: -2;
    }

    .intro-band {
        padding: 35px 24px;
    }

    .intro-band .p-desktop {
        display: none;
    }

    .intro-band .p-mobile {
        display: block;
        font-size: 20px;
        margin: 0;
        line-height: 140%;
        font-weight: 300;
        opacity: .98;
        color: white;
    }

    .svc {
        padding: 35px 24px;
    }

    .svc__media .services-img {
        display: none;
    }

    .svc__media .services-img-mobile {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    .svc-h2 {
        display: block;
        font-weight: 700;
        font-size: 28px;
        margin-top: 0;
    }

    .svc-item {
        column-gap: 12px;
    }

    .svc-item__icon {
        width: 26px;
        height: 26px;
    }

    .svc-item__title {
        font-size: 16px;
    }

    .svc-item__desc {
        display: none;
    }

    .svc-item__desc-mobile {
        display: block;
        font-size: 14px;
    }

    .cases {
        padding: 0;
    }

    .cases__head {
        padding: 35px 24px 0px;
    }

    .cases-title {
        display: block;
        font-size: 28px;
        margin-bottom: 14px;
    }

    .cases__lead {
        display: none;
    }

    .cases__lead_mobile {
        display: block;
        font-size: 16px;
    }

    .cases__grid {
        margin-top: 20px;
        padding: 0px 8px;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "lexus   lexus"
            "disney  criba"
            "pampero pampero"
            "tromen  metrogas";
        gap: 8px;
    }


    .cases__grid>li:nth-child(1) {
        grid-area: lexus;
    }

    .case--disney {
        grid-area: disney;
    }

    .case--criba {
        grid-area: criba;
    }

    .case--pampero {
        grid-area: pampero;
    }

    .case--tromen {
        grid-area: tromen;
    }

    .case--metrogas {
        grid-area: metrogas;
    }


    .case__media {
        height: 200px !important;
        aspect-ratio: auto !important;
        overflow: hidden;
    }

    .case__media>img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .case--disney .case__media>img {
        object-fit: cover;
        padding: 0 10px;
    }

    .case--criba .case__media>img {
        object-fit: cover;
        padding: 0 10px;
    }

    .case--tromen .case__media>img {
        object-fit: contain;
        padding: 10px 0px 0;
    }

    .case--metrogas .case__media>img {
        object-fit: contain;
        padding: 10px 0px 0;
    }

    .vp {
        padding: 35px 24px 10px;
    }

    .vp .vp__grid {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: start;
        gap: 24px;
    }

    /* --- Texto --- */
    .vp__copy h2 {
        margin: 0 0 18px;
        font-size: 28px;
    }

    .vp__lead {
        margin: 0 0 16px;
        font-weight: 300;
        font-size: 16px;
        line-height: 130%;
        color: #fff;
    }

    .vp__text {
        margin: 0;
        font-size: 16px;
        line-height: 130%;
        color: #fff;
    }

    .vp__media {
        position: relative;
        min-height: 330px;
    }

    .vp-laptop-mobile {
        display: block;
        position: relative;
        bottom: -6px;
        height: 300px;
        width: 440px;
        left: -40px;
    }

    .vp-laptop {
        display: none;
    }

    .vp-phone {
        position: absolute;
        bottom: 100px;
        left: 65%;
        width: 100px;
        height: 200px;
        transform: translateX(-50%);
    }

    .testi {
        background: #E9ECEF;
        padding: 35px 0px 35px 24px;
        color: #0A3D54;
        --pad-x: 24px;
        --gap: 12px;
        --peek: 56px;
    }

    .testi-h2 {
        margin: 0 24px 14px 0px;
        text-align: left;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.15;
        color: #0A3D54;
    }

    .tst__list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tst__list .tst-card:nth-child(n+2) {
        display: none;
    }

    .tst__list:last-child {
        margin-right: 24px;
    }

    .tst__list.is-open .tst-card {
        display: block;
    }

    .tst-card {
        background: #fff;
        padding: 22px 16px;
        height: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        border: 1px solid rgba(10, 61, 84, .06);
    }

    .tst-tag {
        text-transform: uppercase;
        letter-spacing: .28em;
        font-size: 12px;
        font-weight: 700;
        color: var(--accent, #F73B58);
        margin: 0 0 14px;
        display: block;
    }

    .tst-quote {
        margin: 0 0 12px;
        font-size: 16px;
        line-height: 1.4;
        color: #0A3D54;
        font-weight: 400;
    }

    .tst-author {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
        color: var(--accent, #F73B58);
    }

    .tst-author span {
        display: block;
        font-size: 12px;
        font-weight: 400;
        color: var(--accent, #F73B58);
    }

    .quotation-marks {
        position: absolute;
        right: 16px;
        bottom: 35px;
        width: auto;
        display: block;
        top: auto;
    }

    .quotation-marks img {
        width: 38px;
        height: 26px;
        display: block;
        filter: none;
    }


    .btn-link {
        padding: 6px 2px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: #F73B58 !important;
    }

    .btn-link::before {
        display: none;
    }

    .btn-link__icon {
        display: none;
        /* width: 20px;
        height: 20px;
        transform: rotate(90deg) !important;
        transition: transform .2s ease;
        color: #F73B58 !important; */
    }

    /* .test-more-wrapper.is-open .btn-link__icon {
        transform: rotate(-90deg) !important;
        color: #F73B58 !important;
    } */

    .tst__scroller {
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        padding-bottom: 10px;
    }

    .tst__scroller::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    .tst__scroller {
        scrollbar-width: none;
    }

    .tst__list {
        display: flex;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
        width: auto;
    }

    .tst__list .tst-card:nth-child(n+2) {
        display: flex;
    }

    .tst-card {
        flex: 0 0 calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        min-width: calc(100vw - 48px);
        scroll-snap-align: start;
    }


    .test-more-wrapper {
        margin: 26px 0 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .test-more-wrapper .btn-link {
        position: relative;
        z-index: 1;
    }

    /* ===== HOW (mobile) ===== */
    .how {
        background: #0A3D54;
        color: #fff;
        padding: 35px 24px;
    }

    .how__grid {
        display: block;
    }

    .how h2 {
        margin: 0 0 20px;
        font-size: 28px;
    }

    /* Lista de pasos */
    .how__steps {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        row-gap: 16px;
    }

    .step {
        display: grid;
        grid-template-columns: 26px 1fr;
        column-gap: 16px;
        align-items: start;
    }

    .step__num {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 1.5px solid #F73B58;
        color: #F73B58;
        border-radius: 50%;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        margin-top: 2px;
    }

    .step__text h3 {
        margin: 0 0 4px;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.35;
        color: #fff;
    }

    .step__text p {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        color: rgba(222, 236, 244, .9);
        max-width: none;
    }

    /* Arte/ilustración (tu <video>) apoyado al borde inferior */
    .how__media {
        position: relative;
        min-height: 210px;
        margin-top: 22px;
    }

    .how__media .how-video {
        position: relative;
        left: 50%;
        bottom: 0px;
        transform: translateX(-50%);
        width: 100%;
    }

    /* Accesibilidad: reduce motion */
    @media (prefers-reduced-motion: reduce) {
        .how__media .how-video {
            animation: none;
        }
    }

    .contacto {
        background: #F73B58;
        color: #fff;
        padding: 35px 24px;
    }

    /* 1 columna */
    .contacto__grid {
        display: block;
    }

    .contacto__intro h2 {
        margin: 0 0 32px;
        font-size: 32px;
    }

    .contacto__form {
        display: grid;
        row-gap: 16px;
    }

    .field {
        gap: 10px;
    }

    .field label {
        font-size: 12px;
        line-height: 1;
        font-weight: 400;
        color: #fff;
    }

    .contacto input,
    .contacto textarea {
        width: 100% !important;
        max-width: 100%;
        background: transparent;
        color: #fff;
        border: 1px solid #fff;
        outline: 0;
        font-family: inherit;
        font-size: 14px;
        padding: 0 12px;
        transition: border-color .2s, box-shadow .2s, background-color .2s;
    }

    .contacto input {
        height: 44px;
        line-height: 44px;
    }

    .contacto textarea {
        min-height: 124px;
        height: 124px;
        padding: 12px;
        resize: vertical;
    }

    .contacto input::placeholder,
    .contacto textarea::placeholder {
        color: rgba(255, 255, 255, .75);
    }

    .contacto input:focus,
    .contacto textarea:focus {
        border-color: #fff;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .18);
    }

    .btn-enviar {
        width: 170px;
        height: 44px;
        margin: 12px auto 0;
        border: 0;
        background: #fff;
        color: #F73B58;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: .02em;
        line-height: 1;
        cursor: pointer;
        transition: transform .06s ease, filter .2s ease;
        display: block;
    }

    .btn-enviar:active {
        transform: translateY(1px);
    }

    .btn-enviar:hover {
        filter: brightness(.96);
    }
}

@media (max-width: 390px) {
    .vp-phone {
        left: 67%;
        height: 170px;
        width: 90px;
        bottom: 140px;
    }

    .vp-laptop-mobile {
        left: -35px;
        height: 270px;
        width: 400px;
    }
}

/* ===== FIX HEADER SOBRE TODO - SOLO EN ESTA LANDING ===== */
.servicios-desarrollo-web-ecommerce header {
    position: fixed;
    /* el header del theme ya lo usa, lo reforzamos */
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483647 !important;
    /* por encima de cualquier cosa */
    isolation: isolate;
    /* su propio stacking context */
    pointer-events: auto;
}

/* Contenido por debajo del header en esta página */
.servicios-desarrollo-web-ecommerce main {
    position: relative;
    z-index: 1 !important;
}

/* Cualquier overlay/hero que esté tapando: lo bajamos y le quitamos transforms */
.servicios-desarrollo-web-ecommerce .hero,
.servicios-desarrollo-web-ecommerce .hero * {
    z-index: 0 !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
}

.servicios-desarrollo-web-ecommerce .hero__overlay {
    position: absolute !important;
    z-index: 0 !important;
}

/* Por si algún contenedor global agregaba z-index altísimo */
.servicios-desarrollo-web-ecommerce .vp,
.servicios-desarrollo-web-ecommerce .cases,
.servicios-desarrollo-web-ecommerce .how,
.servicios-desarrollo-web-ecommerce .intro-band {
    position: relative;
    z-index: 1 !important;
}