/* =========================================================
   DANNY'S LAWN SERVICES LLC
   CONTACT HERO
========================================================= */

.dls-contact-hero {
    --dls-contact-image-x: 0px;
    --dls-contact-image-y: 0px;

    position: relative;
    isolation: isolate;

    width: 100%;

    /*
     * El main ya reserva la altura del header.
     * Header + hero no superan 100svh.
     */
    height:
        calc(
            100svh -
            var(--dls-header-height)
        );

    min-height: 540px;

    color: var(--dls-white);
    background: var(--dls-black);

    overflow: hidden;
}


/* =========================================================
   IMAGEN ESTÁTICA
========================================================= */

.dls-contact-hero__background {
    position: absolute;
    inset: 0;
    z-index: -6;

    overflow: hidden;
}

.dls-contact-hero__background img {
    width: calc(100% + 28px);
    height: calc(100% + 28px);

    margin:
        -14px
        0
        0
        -14px;

    object-fit: cover;
    object-position: center 52%;

    filter:
        saturate(0.94)
        contrast(1.04);

    transform:
        translate3d(
            var(--dls-contact-image-x),
            var(--dls-contact-image-y),
            0
        )
        scale(1.025);

    transition:
        transform
        900ms
        var(--dls-ease);

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   CAPAS DE CONTRASTE
========================================================= */

.dls-contact-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -5;

    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 3, 0.96) 0%,
            rgba(4, 7, 4, 0.88) 33%,
            rgba(4, 7, 4, 0.6) 59%,
            rgba(4, 7, 4, 0.32) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.22) 0%,
            transparent 45%,
            rgba(0, 0, 0, 0.72) 100%
        );
}

.dls-contact-hero__texture {
    position: absolute;
    inset: 0;
    z-index: -4;

    background-image:
        repeating-linear-gradient(
            118deg,
            transparent 0,
            transparent 54px,
            rgba(255, 255, 255, 0.018) 55px,
            transparent 56px
        );

    pointer-events: none;
}


/* =========================================================
   DECORACIÓN
========================================================= */

.dls-contact-hero__glow {
    position: absolute;
    z-index: -3;

    border-radius: 50%;

    pointer-events: none;
}

.dls-contact-hero__glow--green {
    top: -30%;
    left: -13%;

    width: min(45vw, 650px);
    aspect-ratio: 1;

    background:
        radial-gradient(
            circle,
            rgba(139, 203, 24, 0.16),
            transparent 68%
        );
}

.dls-contact-hero__glow--orange {
    right: -10%;
    bottom: -42%;

    width: min(38vw, 520px);
    aspect-ratio: 1;

    background:
        radial-gradient(
            circle,
            rgba(247, 121, 0, 0.15),
            transparent 68%
        );
}

.dls-contact-hero__leaf {
    position: absolute;
    right: -30px;
    bottom: -65px;
    z-index: -2;

    width: min(18vw, 250px);

    color:
        rgba(139, 203, 24, 0.1);

    transform: rotate(8deg);

    pointer-events: none;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.dls-contact-hero__container {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(280px, 0.48fr);

    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);

    width:
        min(
            calc(
                100% -
                (
                    var(--dls-page-padding) * 2
                )
            ),
            var(--dls-container-wide)
        );

    height: 100%;

    margin-inline: auto;

    padding:
        clamp(1.25rem, 3vh, 2.5rem)
        0
        clamp(4rem, 8vh, 5.5rem);
}


/* =========================================================
   CONTENIDO
========================================================= */

.dls-contact-hero__content {
    max-width: 840px;
}

.dls-contact-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    margin-bottom:
        clamp(0.8rem, 2vh, 1.2rem);

    padding:
        0.6rem
        0.8rem;

    color:
        rgba(255, 255, 255, 0.85);

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: var(--dls-radius-sm);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dls-contact-hero__eyebrow > span {
    position: relative;

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    background: var(--dls-green-bright);

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(139, 203, 24, 0.12);
}

.dls-contact-hero__eyebrow > span::after {
    content: "";

    position: absolute;
    inset: -5px;

    border:
        1px solid
        rgba(139, 203, 24, 0.42);

    border-radius: 50%;

    animation:
        dls-contact-status
        2200ms
        ease-out
        infinite;
}

@keyframes dls-contact-status {

    0% {
        opacity: 0.9;
        transform: scale(0.7);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}


/* =========================================================
   TÍTULO
========================================================= */

.dls-contact-hero__title {
    max-width: 860px;

    margin-bottom:
        clamp(0.9rem, 2.5vh, 1.4rem);

    color: var(--dls-white);

    font-size:
        clamp(3.7rem, 7vw, 7.1rem);

    font-weight: 800;
    line-height: 0.84;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    text-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.32);
}

.dls-contact-hero__title span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            105deg,
            var(--dls-green-bright),
            var(--dls-green),
            #E2F7B8
        );

    background-clip: text;
    -webkit-background-clip: text;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.dls-contact-hero__description {
    max-width: 660px;

    margin-bottom:
        clamp(1.2rem, 3vh, 1.8rem);

    color:
        rgba(255, 255, 255, 0.7);

    font-size:
        clamp(0.9rem, 1.2vw, 1.05rem);

    line-height: 1.7;
}


/* =========================================================
   BOTONES
========================================================= */

.dls-contact-hero__actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.8rem;

    margin-bottom:
        clamp(1.3rem, 3vh, 2rem);
}

.dls-contact-hero__button {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    min-height: 52px;
    padding:
        0.8rem
        1.25rem;

    border:
        1px solid
        transparent;

    border-radius: var(--dls-radius-sm);

    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;

    overflow: hidden;

    transition:
        transform
        var(--dls-duration-normal)
        var(--dls-ease),
        background-color
        var(--dls-duration-normal)
        var(--dls-ease),
        border-color
        var(--dls-duration-normal)
        var(--dls-ease),
        box-shadow
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-hero__button::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.45) 48%,
            transparent 62%
        );

    transform: translateX(-130%);

    transition:
        transform
        650ms
        var(--dls-ease);
}

.dls-contact-hero__button:hover {
    transform: translateY(-3px);
}

.dls-contact-hero__button:hover::before {
    transform: translateX(130%);
}

.dls-contact-hero__button--primary {
    color: var(--dls-black);

    background:
        linear-gradient(
            135deg,
            var(--dls-green-bright),
            var(--dls-green)
        );

    border-color:
        rgba(255, 255, 255, 0.28);

    box-shadow:
        0 16px 36px
        rgba(139, 203, 24, 0.23);
}

.dls-contact-hero__button--call {
    justify-content: flex-start;

    min-width: 190px;

    color: var(--dls-white);

    background:
        rgba(255, 255, 255, 0.065);

    border-color:
        rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dls-contact-hero__button--call:hover {
    background:
        rgba(255, 255, 255, 0.1);

    border-color:
        rgba(247, 121, 0, 0.36);
}

.dls-contact-hero__button--call > span:last-child {
    display: grid;
    gap: 0.15rem;
}

.dls-contact-hero__button--call small {
    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.52rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dls-contact-hero__call-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    color: var(--dls-black);
    background: var(--dls-orange);

    border-radius: 8px;
}


/* =========================================================
   TRUST ROW
========================================================= */

.dls-contact-hero__trust {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.dls-contact-hero__trust-item {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: 0.6rem;

    min-height: 48px;
    padding:
        0.55rem
        0.7rem;

    color:
        rgba(255, 255, 255, 0.78);

    background:
        rgba(5, 8, 5, 0.42);

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: var(--dls-radius-sm);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dls-contact-hero__trust-item > svg {
    color: var(--dls-green-bright);
}

.dls-contact-hero__trust-item > span {
    display: grid;
    gap: 0.12rem;
}

.dls-contact-hero__trust-item strong {
    color: var(--dls-white);

    font-size: 0.61rem;
    font-weight: 800;
}

.dls-contact-hero__trust-item small {
    color:
        rgba(255, 255, 255, 0.45);

    font-size: 0.48rem;
    font-weight: 600;
}


/* =========================================================
   TARJETA LATERAL
========================================================= */

.dls-contact-hero__info {
    position: relative;

    align-self: end;
    justify-self: end;

    width: min(100%, 350px);

    margin-bottom:
        clamp(0.8rem, 3vh, 2rem);

    padding:
        clamp(1.1rem, 2.5vw, 1.5rem);

    color: var(--dls-white);

    background:
        linear-gradient(
            145deg,
            rgba(9, 12, 9, 0.84),
            rgba(22, 28, 22, 0.67)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: var(--dls-radius-md);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.3),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

    backdrop-filter:
        blur(18px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(125%);
}

.dls-contact-hero__info::before {
    content: "";

    position: absolute;
    top: 0;
    right: 1.25rem;
    left: 1.25rem;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dls-orange),
            var(--dls-green-bright),
            transparent
        );
}

.dls-contact-hero__info-header {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: 0.8rem;

    margin-bottom: 1.2rem;
    padding-bottom: 1rem;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.dls-contact-hero__info-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    color: var(--dls-black);
    background: var(--dls-orange);

    border-radius: var(--dls-radius-sm);
}

.dls-contact-hero__info-header > span:last-child {
    display: grid;
    gap: 0.25rem;

    font-family: var(--dls-font-display);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 0.92;

    text-transform: uppercase;
}

.dls-contact-hero__info-header small {
    color: var(--dls-green-bright);

    font-family: var(--dls-font-body);
    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dls-contact-hero__info-list {
    display: grid;
    gap: 0.8rem;

    margin-bottom: 1.2rem;
}

.dls-contact-hero__info-list > div {
    display: grid;
    gap: 0.2rem;
}

.dls-contact-hero__info-list span {
    color:
        rgba(255, 255, 255, 0.4);

    font-size: 0.5rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dls-contact-hero__info-list strong,
.dls-contact-hero__info-list a {
    color: var(--dls-white);

    font-size: 0.7rem;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.dls-contact-hero__info-list a:hover {
    color: var(--dls-green-bright);
}

.dls-contact-hero__info-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    min-height: 46px;
    padding:
        0.7rem
        0.85rem;

    color: var(--dls-black);
    background: var(--dls-green);

    border-radius: var(--dls-radius-sm);

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    transition:
        background-color
        var(--dls-duration-normal)
        var(--dls-ease),
        transform
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-hero__info-link:hover {
    background: var(--dls-green-bright);
    transform: translateY(-2px);
}


/* =========================================================
   INDICADOR INFERIOR
========================================================= */

.dls-contact-hero__scroll {
    position: absolute;
    bottom: 1.2rem;
    left: var(--dls-page-padding);
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 0.8rem;

    color:
        rgba(255, 255, 255, 0.52);

    font-size: 0.57rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dls-contact-hero__scroll-line {
    position: relative;

    width: 50px;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.2);

    overflow: hidden;
}

.dls-contact-hero__scroll-line::after {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--dls-green-bright);

    transform: translateX(-100%);

    animation:
        dls-contact-scroll-line
        2300ms
        var(--dls-ease)
        infinite;
}

@keyframes dls-contact-scroll-line {

    0% {
        transform: translateX(-100%);
    }

    45%,
    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}


/* =========================================================
   REVEAL
========================================================= */

.dls-contact-hero.is-enhanced
[data-dls-contact-hero-reveal] {
    opacity: 0;

    filter: blur(6px);

    transform:
        translateY(22px)
        scale(0.99);
}

.dls-contact-hero.is-enhanced
[data-dls-contact-hero-reveal].is-visible {
    opacity: 1;
    filter: blur(0);
    transform: none;

    transition:
        opacity
        750ms
        var(--dls-ease),
        transform
        850ms
        var(--dls-ease),
        filter
        750ms
        var(--dls-ease);
}

html.dls-reduced-motion
.dls-contact-hero *,
html.dls-reduced-motion
.dls-contact-hero *::before,
html.dls-reduced-motion
.dls-contact-hero *::after {
    animation: none !important;
    transition: none !important;
}








































/* =========================================================
   DANNY'S LAWN SERVICES LLC
   ESTIMATE FORM + WHAT HAPPENS NEXT
========================================================= */

.dls-estimate {
    --dls-estimate-pointer-x: 50%;
    --dls-estimate-pointer-y: 50%;

    position: relative;
    isolation: isolate;

    padding:
        var(--dls-section-space)
        var(--dls-page-padding);

    color: var(--dls-text);

    background:
        radial-gradient(
            circle at 5% 12%,
            rgba(139, 203, 24, 0.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 96% 84%,
            rgba(247, 121, 0, 0.09),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            var(--dls-paper),
            var(--dls-cream)
        );

    overflow: hidden;
}

.dls-estimate::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -5;

    background-image:
        repeating-linear-gradient(
            120deg,
            transparent 0,
            transparent 53px,
            rgba(41, 66, 13, 0.018) 54px,
            transparent 55px
        );

    pointer-events: none;
}

.dls-estimate__container {
    position: relative;
    z-index: 2;

    width: min(100%, var(--dls-container-wide));
    margin-inline: auto;
}


/* =========================================================
   DECORACIONES
========================================================= */

.dls-estimate__orb {
    position: absolute;
    z-index: -3;

    border-radius: 50%;

    pointer-events: none;
}

.dls-estimate__orb--green {
    top: 16%;
    right: -180px;

    width: 420px;
    height: 420px;

    border:
        1px solid
        rgba(83, 125, 19, 0.12);

    box-shadow:
        inset 0 0 90px
        rgba(139, 203, 24, 0.04);
}

.dls-estimate__orb--orange {
    bottom: 8%;
    left: -145px;

    width: 320px;
    height: 320px;

    border:
        1px solid
        rgba(247, 121, 0, 0.1);

    box-shadow:
        inset 0 0 80px
        rgba(247, 121, 0, 0.03);
}

.dls-estimate__dots {
    position: absolute;
    top: 35%;
    right: 3%;
    z-index: -2;

    width: 130px;
    height: 150px;

    background-image:
        radial-gradient(
            circle,
            rgba(41, 66, 13, 0.14) 1.5px,
            transparent 1.8px
        );

    background-size: 14px 14px;

    opacity: 0.7;
}

.dls-estimate__leaf {
    position: absolute;
    bottom: 1%;
    left: -30px;
    z-index: -2;

    width: min(17vw, 230px);

    color:
        rgba(83, 125, 19, 0.09);

    transform: rotate(-9deg);

    pointer-events: none;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.dls-estimate__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(290px, 0.5fr);

    align-items: end;
    gap: clamp(2rem, 6vw, 6rem);

    margin-bottom:
        clamp(3rem, 6vw, 5.5rem);
}

.dls-estimate__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    margin-bottom: 1.1rem;

    color: var(--dls-green-dark);

    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dls-estimate__eyebrow::before {
    content: "";

    width: 30px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--dls-orange),
            var(--dls-green)
        );

    border-radius: var(--dls-radius-round);
}

.dls-estimate__heading h2 {
    max-width: 900px;
    margin: 0;

    color: var(--dls-text);

    font-size:
        clamp(3rem, 6vw, 6.1rem);

    line-height: 0.87;
    text-transform: uppercase;
}

.dls-estimate__heading h2 span {
    display: block;

    color: var(--dls-green-dark);
}

.dls-estimate__introduction {
    display: grid;
    gap: 1.3rem;

    padding-bottom: 0.25rem;
}

.dls-estimate__introduction > p {
    margin: 0;

    color: var(--dls-text-soft);

    font-size: 0.94rem;
    line-height: 1.75;
}

.dls-estimate__intro-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    width: max-content;
    max-width: 100%;

    padding:
        0.65rem
        0.85rem
        0.65rem
        0.65rem;

    background:
        rgba(255, 255, 255, 0.64);

    border:
        1px solid
        var(--dls-border);

    border-radius: var(--dls-radius-sm);

    box-shadow: var(--dls-shadow-xs);
}

.dls-estimate__intro-badge > span:first-child {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    color: var(--dls-white);
    background: var(--dls-green-dark);

    border-radius: 8px;
}

.dls-estimate__intro-badge > span:last-child {
    display: grid;
    gap: 0.15rem;

    color: var(--dls-text);

    font-size: 0.72rem;
    font-weight: 800;
}

.dls-estimate__intro-badge small {
    color: var(--dls-text-soft);

    font-size: 0.5rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* =========================================================
   MENSAJE DE ESTADO
========================================================= */

.dls-estimate__status {
    display: none;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 1rem;

    margin-bottom: 1.5rem;
    padding: 1rem;

    background: var(--dls-white);

    border:
        1px solid
        var(--dls-border);

    border-radius: var(--dls-radius-md);

    box-shadow: var(--dls-shadow-sm);
}

.dls-estimate__status.is-visible {
    display: grid;
}

.dls-estimate__status.is-success {
    border-color:
        rgba(83, 125, 19, 0.3);
}

.dls-estimate__status.is-error {
    border-color:
        rgba(197, 60, 35, 0.3);
}

.dls-estimate__status-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: var(--dls-radius-sm);
}

.dls-estimate__status.is-success
.dls-estimate__status-icon {
    color: var(--dls-white);
    background: var(--dls-green-dark);
}

.dls-estimate__status.is-error
.dls-estimate__status-icon {
    color: var(--dls-white);
    background: #B9412F;
}

.dls-estimate__status strong {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--dls-text);

    font-family: var(--dls-font-display);
    font-size: 1.4rem;
    line-height: 1;

    text-transform: uppercase;
}

.dls-estimate__status p {
    margin: 0;

    color: var(--dls-text-soft);

    font-size: 0.72rem;
}

.dls-estimate__status button {
    position: relative;

    width: 38px;
    height: 38px;
    padding: 0;

    background:
        rgba(20, 30, 20, 0.06);

    border-radius: 8px;
}

.dls-estimate__status button span {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 16px;
    height: 2px;

    background: var(--dls-text);
}

.dls-estimate__status button span:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.dls-estimate__status button span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* =========================================================
   LAYOUT
========================================================= */

.dls-estimate__layout {
    display: grid;
    grid-template-columns:
        minmax(290px, 0.43fr)
        minmax(0, 1.57fr);

    align-items: start;
    gap: clamp(1.3rem, 3vw, 2.4rem);
}


/* =========================================================
   WHAT HAPPENS NEXT
========================================================= */

.dls-estimate__process {
    position: sticky;
    top:
        calc(
            var(--dls-header-height) +
            1.5rem
        );

    padding:
        clamp(1.4rem, 3vw, 2rem);

    color: var(--dls-white);

    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(247, 121, 0, 0.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 94%,
            rgba(139, 203, 24, 0.15),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--dls-charcoal),
            var(--dls-black)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-radius: var(--dls-radius-md);

    box-shadow:
        0 30px 75px
        rgba(20, 34, 17, 0.2);

    overflow: hidden;
}

.dls-estimate__process::before {
    content: "";

    position: absolute;
    top: 0;
    right: 1.5rem;
    left: 1.5rem;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dls-orange),
            var(--dls-green-bright),
            transparent
        );
}

.dls-estimate__process-header {
    margin-bottom: 1.5rem;
}

.dls-estimate__process-header > span {
    display: inline-block;

    margin-bottom: 0.7rem;

    color: var(--dls-orange);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dls-estimate__process-header h3 {
    margin-bottom: 0.8rem;

    color: var(--dls-white);

    font-size:
        clamp(2.2rem, 3.5vw, 3.5rem);

    line-height: 0.9;
    text-transform: uppercase;
}

.dls-estimate__process-header p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.75rem;
    line-height: 1.65;
}

.dls-estimate__steps {
    position: relative;

    display: grid;
    gap: 0;

    margin: 0 0 1.5rem;
    padding: 0;

    list-style: none;
}

.dls-estimate__step {
    position: relative;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap: 0.85rem;

    padding:
        0.8rem
        0;
}

.dls-estimate__step:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 44px;
    bottom: -8px;
    left: 18px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(139, 203, 24, 0.4),
            rgba(255, 255, 255, 0.06)
        );
}

.dls-estimate__step-number {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 37px;
    height: 37px;

    color: var(--dls-black);
    background: var(--dls-green);

    border-radius: 9px;

    font-family: var(--dls-font-display);
    font-size: 0.82rem;
    font-weight: 800;
}

.dls-estimate__step div {
    display: grid;
    gap: 0.3rem;

    padding-top: 0.15rem;
}

.dls-estimate__step strong {
    color: var(--dls-white);

    font-family: var(--dls-font-display);
    font-size: 1.2rem;
    line-height: 1;

    text-transform: uppercase;
}

.dls-estimate__step p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.67rem;
    line-height: 1.5;
}

.dls-estimate__direct-contact {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: 0.8rem;

    padding: 1rem;

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid
        rgba(139, 203, 24, 0.16);

    border-radius: var(--dls-radius-sm);
}

.dls-estimate__direct-icon {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    color: var(--dls-black);
    background: var(--dls-orange);

    border-radius: 9px;
}

.dls-estimate__direct-contact > div {
    display: grid;
    gap: 0.13rem;
}

.dls-estimate__direct-contact small {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.49rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dls-estimate__direct-contact a {
    color: var(--dls-white);

    font-size: 0.9rem;
    font-weight: 800;
}

.dls-estimate__direct-contact a:hover {
    color: var(--dls-green-bright);
}

.dls-estimate__direct-contact div > span {
    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.55rem;
}


/* =========================================================
   FORM SHELL
========================================================= */

.dls-estimate__form-shell {
    min-width: 0;
    padding:
        clamp(1rem, 2.8vw, 1.7rem);

    background:
        rgba(255, 255, 255, 0.8);

    border:
        1px solid
        var(--dls-border);

    border-radius: var(--dls-radius-md);

    box-shadow:
        0 28px 75px
        rgba(20, 35, 17, 0.13);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* =========================================================
   PROGRESO
========================================================= */

.dls-estimate__progress {
    margin-bottom: 1.25rem;
    padding:
        0.9rem
        1rem;

    background:
        linear-gradient(
            135deg,
            rgba(139, 203, 24, 0.1),
            rgba(255, 255, 255, 0.38)
        );

    border:
        1px solid
        rgba(83, 125, 19, 0.13);

    border-radius: var(--dls-radius-sm);
}

.dls-estimate__progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.6rem;
}

.dls-estimate__progress-copy span {
    color: var(--dls-text-soft);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dls-estimate__progress-copy strong {
    color: var(--dls-green-dark);

    font-size: 0.65rem;
    font-weight: 800;
}

.dls-estimate__progress-track {
    height: 7px;

    background:
        rgba(41, 66, 13, 0.09);

    border-radius: var(--dls-radius-round);

    overflow: hidden;
}

.dls-estimate__progress-track span {
    display: block;

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--dls-green-dark),
            var(--dls-green),
            var(--dls-orange)
        );

    border-radius: inherit;

    transition:
        width
        450ms
        var(--dls-ease);
}


/* =========================================================
   FORMULARIO
========================================================= */

.dls-estimate-form {
    display: grid;
    gap: 1rem;
}

.dls-estimate-form__honeypot {
    position: absolute;
    top: auto;
    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}

.dls-estimate-form__group {
    min-width: 0;
    margin: 0;
    padding:
        clamp(1rem, 2.5vw, 1.4rem);

    background:
        rgba(246, 247, 242, 0.74);

    border:
        1px solid
        var(--dls-border);

    border-radius: var(--dls-radius-sm);
}

.dls-estimate-form__group legend {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    padding:
        0
        0.45rem;

    color: var(--dls-text);

    font-family: var(--dls-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;

    text-transform: uppercase;
}

.dls-estimate-form__group legend span {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    color: var(--dls-black);
    background: var(--dls-green);

    border-radius: 7px;

    font-size: 0.72rem;
}

.dls-estimate-form__grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1rem;
}

.dls-estimate-form__field {
    min-width: 0;
}

.dls-estimate-form__field--wide {
    grid-column: 1 / -1;
}

.dls-estimate-form__field > label,
.dls-estimate-form__label-row label {
    display: inline-block;

    margin-bottom: 0.45rem;

    color: var(--dls-text);

    font-size: 0.65rem;
    font-weight: 800;
}

.dls-estimate-form__field label > span,
.dls-estimate-form__services-header b {
    color: var(--dls-orange);
}

.dls-estimate-form__control {
    position: relative;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;

    min-height: 49px;

    background:
        rgba(255, 255, 255, 0.8);

    border:
        1px solid
        var(--dls-border);

    border-radius: 9px;

    transition:
        border-color
        var(--dls-duration-normal)
        var(--dls-ease),
        box-shadow
        var(--dls-duration-normal)
        var(--dls-ease),
        background-color
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-estimate-form__control:focus-within {
    background: var(--dls-white);

    border-color:
        rgba(83, 125, 19, 0.45);

    box-shadow:
        0 0 0 4px
        rgba(139, 203, 24, 0.1);
}

.dls-estimate-form__control > svg {
    margin-left: 0.85rem;

    color: var(--dls-green-dark);
}

.dls-estimate-form__control input,
.dls-estimate-form__control select {
    width: 100%;
    min-width: 0;
    height: 47px;

    padding:
        0
        0.85rem;

    color: var(--dls-text);
    background: transparent;

    border: 0;
    outline: 0;

    font-size: 0.76rem;
    font-weight: 600;
}

.dls-estimate-form__control select {
    cursor: pointer;
}

.dls-estimate-form__field.is-invalid
.dls-estimate-form__control,
.dls-estimate-form__services.is-invalid {
    border-color:
        rgba(185, 65, 47, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(185, 65, 47, 0.08);
}

.dls-estimate-form__field.is-valid
.dls-estimate-form__control {
    border-color:
        rgba(83, 125, 19, 0.32);
}


/* =========================================================
   ERRORES
========================================================= */

.dls-estimate-form__error {
    display: block;

    min-height: 0;
    margin-top: 0.35rem;

    color: #A83D2C;

    font-size: 0.58rem;
    font-weight: 700;
}

.dls-estimate-form__error:empty {
    display: none;
}

.dls-estimate-form__error--group {
    margin-top: 0.55rem;
}

.dls-estimate-form__error--consent {
    margin-top: -0.5rem;
}


/* =========================================================
   SERVICIOS SELECCIONABLES
========================================================= */

.dls-estimate-form__services {
    margin-top: 1.1rem;
    padding: 1rem;

    background:
        rgba(255, 255, 255, 0.48);

    border:
        1px solid
        var(--dls-border);

    border-radius: var(--dls-radius-sm);

    transition:
        border-color
        var(--dls-duration-normal)
        var(--dls-ease),
        box-shadow
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-estimate-form__services-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.85rem;
}

.dls-estimate-form__services-header > div {
    display: grid;
    gap: 0.15rem;
}

.dls-estimate-form__services-header span {
    color: var(--dls-text);

    font-size: 0.66rem;
    font-weight: 800;
}

.dls-estimate-form__services-header small {
    color: var(--dls-text-soft);

    font-size: 0.53rem;
}

.dls-estimate-form__services-header strong {
    padding:
        0.4rem
        0.55rem;

    color: var(--dls-green-dark);
    background:
        rgba(139, 203, 24, 0.1);

    border:
        1px solid
        rgba(83, 125, 19, 0.12);

    border-radius: 7px;

    font-size: 0.53rem;
    font-weight: 800;

    white-space: nowrap;
}

.dls-estimate-form__service-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.55rem;
}

.dls-estimate-service {
    position: relative;

    min-width: 0;
    cursor: pointer;
}

.dls-estimate-service input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.dls-estimate-service span {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 44px;
    padding:
        0.6rem
        0.65rem
        0.6rem
        2rem;

    color: var(--dls-text-soft);
    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid
        var(--dls-border);

    border-radius: 8px;

    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1.25;

    transition:
        color
        var(--dls-duration-normal)
        var(--dls-ease),
        background-color
        var(--dls-duration-normal)
        var(--dls-ease),
        border-color
        var(--dls-duration-normal)
        var(--dls-ease),
        transform
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-estimate-service span::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0.65rem;

    width: 16px;
    height: 16px;

    background: var(--dls-white);

    border:
        1px solid
        rgba(41, 66, 13, 0.24);

    border-radius: 5px;

    transform: translateY(-50%);
}

.dls-estimate-service span::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 0.92rem;

    width: 7px;
    height: 4px;

    border-bottom:
        2px solid
        var(--dls-black);

    border-left:
        2px solid
        var(--dls-black);

    opacity: 0;

    transform:
        translateY(-65%)
        rotate(-45deg)
        scale(0.7);

    transition:
        opacity
        var(--dls-duration-fast)
        ease,
        transform
        var(--dls-duration-fast)
        ease;
}

.dls-estimate-service:hover span {
    color: var(--dls-text);

    border-color:
        rgba(83, 125, 19, 0.28);

    transform: translateY(-2px);
}

.dls-estimate-service input:focus-visible + span {
    outline:
        3px solid
        rgba(247, 121, 0, 0.55);

    outline-offset: 2px;
}

.dls-estimate-service input:checked + span {
    color: var(--dls-black);

    background:
        linear-gradient(
            135deg,
            var(--dls-green-bright),
            var(--dls-green)
        );

    border-color:
        var(--dls-green);
}

.dls-estimate-service input:checked + span::before {
    background: var(--dls-white);

    border-color:
        rgba(0, 0, 0, 0.12);
}

.dls-estimate-service input:checked + span::after {
    opacity: 1;

    transform:
        translateY(-65%)
        rotate(-45deg)
        scale(1);
}


/* =========================================================
   CAMPO CONDICIONAL
========================================================= */

.dls-estimate-form__conditional {
    margin-top: 0.8rem;
}

.dls-estimate-form__conditional[hidden] {
    display: none;
}

.dls-estimate-form__conditional.is-visible {
    animation:
        dls-estimate-conditional
        450ms
        var(--dls-ease);
}

@keyframes dls-estimate-conditional {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   TEXTAREA
========================================================= */

.dls-estimate-form__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dls-estimate-form__label-row > span {
    color: var(--dls-text-soft);

    font-size: 0.56rem;
    font-weight: 800;
}

.dls-estimate-form textarea {
    display: block;

    width: 100%;
    min-height: 126px;
    padding: 0.85rem;

    color: var(--dls-text);
    background:
        rgba(255, 255, 255, 0.8);

    border:
        1px solid
        var(--dls-border);

    border-radius: 9px;
    outline: 0;

    font-family: var(--dls-font-body);
    font-size: 0.76rem;
    line-height: 1.6;

    resize: vertical;

    transition:
        border-color
        var(--dls-duration-normal)
        var(--dls-ease),
        box-shadow
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-estimate-form textarea:focus {
    background: var(--dls-white);

    border-color:
        rgba(83, 125, 19, 0.45);

    box-shadow:
        0 0 0 4px
        rgba(139, 203, 24, 0.1);
}

.dls-estimate-form__field.is-invalid textarea {
    border-color:
        rgba(185, 65, 47, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(185, 65, 47, 0.08);
}

.dls-estimate-form__textarea-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-top: 0.35rem;

    color: var(--dls-text-soft);
}

.dls-estimate-form__textarea-meta small {
    font-size: 0.53rem;
}

#dlsProjectDetailsRequirement.is-complete {
    color: var(--dls-green-dark);
    font-weight: 800;
}


/* =========================================================
   CONSENTIMIENTO
========================================================= */

.dls-estimate-form__consent {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: start;
    gap: 0.7rem;

    padding:
        0.85rem
        0.95rem;

    color: var(--dls-text-soft);
    background:
        rgba(255, 255, 255, 0.5);

    border:
        1px solid
        var(--dls-border);

    border-radius: var(--dls-radius-sm);

    font-size: 0.62rem;
    line-height: 1.55;

    cursor: pointer;
}

.dls-estimate-form__consent input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.dls-estimate-form__consent-box {
    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    color: var(--dls-black);
    background: var(--dls-white);

    border:
        1px solid
        rgba(41, 66, 13, 0.25);

    border-radius: 6px;
}

.dls-estimate-form__consent-box svg {
    opacity: 0;

    transform: scale(0.7);

    transition:
        opacity
        var(--dls-duration-fast)
        ease,
        transform
        var(--dls-duration-fast)
        ease;
}

.dls-estimate-form__consent
input:checked +
.dls-estimate-form__consent-box {
    background: var(--dls-green);
    border-color: var(--dls-green);
}

.dls-estimate-form__consent
input:checked +
.dls-estimate-form__consent-box svg {
    opacity: 1;
    transform: scale(1);
}

.dls-estimate-form__consent
input:focus-visible +
.dls-estimate-form__consent-box {
    outline:
        3px solid
        rgba(247, 121, 0, 0.55);

    outline-offset: 3px;
}

.dls-estimate-form__consent.is-invalid {
    border-color:
        rgba(185, 65, 47, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(185, 65, 47, 0.08);
}


/* =========================================================
   BOTÓN ENVIAR
========================================================= */

.dls-estimate-form__submit-area {
    display: grid;
    gap: 0.6rem;
}

.dls-estimate-form__submit {
    position: relative;
    isolation: isolate;

    min-height: 56px;
    padding:
        0.8rem
        1.2rem;

    color: var(--dls-black);

    background:
        linear-gradient(
            135deg,
            var(--dls-green-bright),
            var(--dls-green)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.35);

    border-radius: var(--dls-radius-sm);

    box-shadow:
        0 16px 38px
        rgba(83, 125, 19, 0.2),
        inset 0 1px 0
        rgba(255, 255, 255, 0.48);

    overflow: hidden;

    transition:
        transform
        var(--dls-duration-normal)
        var(--dls-ease),
        box-shadow
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-estimate-form__submit::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255, 255, 255, 0.48),
            transparent
        );

    transform: translateX(-130%);

    transition:
        transform
        650ms
        var(--dls-ease);
}

.dls-estimate-form__submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 46px
        rgba(83, 125, 19, 0.28);
}

.dls-estimate-form__submit:hover::before {
    transform: translateX(130%);
}

.dls-estimate-form__submit-content,
.dls-estimate-form__submit-loading {
    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dls-estimate-form__submit-content {
    display: flex;
}

.dls-estimate-form__submit-loading {
    display: none;
}

.dls-estimate-form__submit-loading i {
    width: 17px;
    height: 17px;

    border:
        2px solid
        rgba(0, 0, 0, 0.22);

    border-top-color:
        var(--dls-black);

    border-radius: 50%;

    animation:
        dls-estimate-loading
        700ms
        linear
        infinite;
}

@keyframes dls-estimate-loading {

    to {
        transform: rotate(360deg);
    }
}

.dls-estimate-form__submit.is-loading {
    cursor: wait;
    pointer-events: none;
}

.dls-estimate-form__submit.is-loading
.dls-estimate-form__submit-content {
    display: none;
}

.dls-estimate-form__submit.is-loading
.dls-estimate-form__submit-loading {
    display: flex;
}

.dls-estimate-form__submit-area > p {
    margin: 0;

    color: var(--dls-text-soft);

    font-size: 0.55rem;
    text-align: center;
}


/* =========================================================
   REVEAL
========================================================= */

.dls-estimate.is-enhanced
[data-dls-estimate-reveal] {
    opacity: 0;

    filter: blur(6px);

    transform:
        translateY(28px)
        scale(0.99);
}

.dls-estimate.is-enhanced
[data-dls-estimate-reveal].is-visible {
    opacity: 1;
    filter: blur(0);
    transform: none;

    transition:
        opacity
        750ms
        var(--dls-ease),
        transform
        850ms
        var(--dls-ease),
        filter
        750ms
        var(--dls-ease);
}

html.dls-reduced-motion
.dls-estimate *,
html.dls-reduced-motion
.dls-estimate *::before,
html.dls-reduced-motion
.dls-estimate *::after {
    animation: none !important;
    transition: none !important;
}








































/* =========================================================
   DANNY'S LAWN SERVICES LLC
   CONTACT FAQ
========================================================= */

.dls-contact-faq {
    position: relative;
    isolation: isolate;

    padding:
        var(--dls-section-space)
        var(--dls-page-padding);

    color: var(--dls-white);

    background:
        radial-gradient(
            circle at 8% 13%,
            rgba(139, 203, 24, 0.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 94% 83%,
            rgba(247, 121, 0, 0.12),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #171C18 0%,
            var(--dls-ink) 48%,
            var(--dls-black) 100%
        );

    overflow: hidden;
}

.dls-contact-faq::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -5;

    background-image:
        repeating-linear-gradient(
            120deg,
            transparent 0,
            transparent 54px,
            rgba(255, 255, 255, 0.017) 55px,
            transparent 56px
        );

    pointer-events: none;
}

.dls-contact-faq::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -4;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dls-green-bright),
            var(--dls-orange),
            transparent
        );
}

.dls-contact-faq__container {
    position: relative;
    z-index: 2;

    width: min(100%, var(--dls-container-wide));
    margin-inline: auto;
}


/* =========================================================
   DECORACIÓN
========================================================= */

.dls-contact-faq__orb {
    position: absolute;
    z-index: -3;

    border-radius: 50%;

    pointer-events: none;
}

.dls-contact-faq__orb--green {
    top: 11%;
    right: -190px;

    width: 440px;
    height: 440px;

    border:
        1px solid
        rgba(139, 203, 24, 0.09);

    box-shadow:
        inset 0 0 100px
        rgba(139, 203, 24, 0.035);
}

.dls-contact-faq__orb--orange {
    bottom: 6%;
    left: -150px;

    width: 330px;
    height: 330px;

    border:
        1px solid
        rgba(247, 121, 0, 0.08);

    box-shadow:
        inset 0 0 80px
        rgba(247, 121, 0, 0.025);
}

.dls-contact-faq__dot-pattern {
    position: absolute;
    top: 33%;
    right: 3%;
    z-index: -2;

    width: 135px;
    height: 155px;

    background-image:
        radial-gradient(
            circle,
            rgba(139, 203, 24, 0.18) 1.5px,
            transparent 1.8px
        );

    background-size: 14px 14px;

    mask-image:
        linear-gradient(
            135deg,
            transparent,
            black,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            135deg,
            transparent,
            black,
            transparent
        );

    opacity: 0.55;
}

.dls-contact-faq__leaf {
    position: absolute;
    z-index: -2;

    pointer-events: none;
}

.dls-contact-faq__leaf--left {
    bottom: -50px;
    left: -40px;

    width: min(18vw, 245px);

    color:
        rgba(139, 203, 24, 0.07);

    transform: rotate(-12deg);
}

.dls-contact-faq__leaf--right {
    top: 7%;
    right: -20px;

    width: min(13vw, 170px);

    color:
        rgba(247, 121, 0, 0.055);

    transform: rotate(164deg);
}


/* =========================================================
   ENCABEZADO
========================================================= */

.dls-contact-faq__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.17fr)
        minmax(290px, 0.48fr);

    align-items: end;
    gap: clamp(2rem, 6vw, 6rem);

    margin-bottom:
        clamp(3rem, 6vw, 5.5rem);
}

.dls-contact-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    margin-bottom: 1.1rem;

    color: var(--dls-green-bright);

    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dls-contact-faq__eyebrow::before {
    content: "";

    width: 30px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--dls-orange),
            var(--dls-green-bright)
        );

    border-radius: var(--dls-radius-round);
}

.dls-contact-faq__heading h2 {
    max-width: 940px;
    margin: 0;

    color: var(--dls-white);

    font-size:
        clamp(3rem, 6vw, 6.1rem);

    line-height: 0.87;
    text-transform: uppercase;
}

.dls-contact-faq__heading h2 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            105deg,
            var(--dls-green-bright),
            var(--dls-green),
            #DFF5AD
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.dls-contact-faq__introduction {
    display: grid;
    gap: 1.3rem;

    padding-bottom: 0.25rem;
}

.dls-contact-faq__introduction > p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 0.94rem;
    line-height: 1.75;
}

.dls-contact-faq__intro-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    width: max-content;
    max-width: 100%;

    padding:
        0.65rem
        0.85rem
        0.65rem
        0.65rem;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-radius: var(--dls-radius-sm);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dls-contact-faq__intro-badge > span:first-child {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    color: var(--dls-black);
    background: var(--dls-orange);

    border-radius: 8px;
}

.dls-contact-faq__intro-badge > span:last-child {
    display: grid;
    gap: 0.15rem;

    color: var(--dls-white);

    font-size: 0.7rem;
    font-weight: 800;
}

.dls-contact-faq__intro-badge small {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.49rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* =========================================================
   LAYOUT
========================================================= */

.dls-contact-faq__layout {
    display: grid;
    grid-template-columns:
        minmax(285px, 0.43fr)
        minmax(0, 1.57fr);

    align-items: start;
    gap: clamp(1.3rem, 3vw, 2.4rem);
}


/* =========================================================
   PANEL LATERAL
========================================================= */

.dls-contact-faq__support {
    position: sticky;
    top:
        calc(
            var(--dls-header-height) +
            1.5rem
        );

    isolation: isolate;

    padding:
        clamp(1.4rem, 3vw, 2rem);

    background:
        radial-gradient(
            circle at 92% 3%,
            rgba(247, 121, 0, 0.15),
            transparent 29%
        ),
        radial-gradient(
            circle at 5% 96%,
            rgba(139, 203, 24, 0.16),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(38, 44, 39, 0.96),
            rgba(5, 6, 5, 0.98)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-radius: var(--dls-radius-md);

    box-shadow:
        0 30px 75px
        rgba(0, 0, 0, 0.25);

    overflow: hidden;
}

.dls-contact-faq__support::before {
    content: "";

    position: absolute;
    top: 0;
    right: 1.5rem;
    left: 1.5rem;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dls-orange),
            var(--dls-green-bright),
            transparent
        );
}

.dls-contact-faq__support-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    margin-bottom: 1.35rem;

    color: var(--dls-orange);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dls-contact-faq__support-icon {
    display: grid;
    place-items: center;

    width: 53px;
    height: 53px;

    color: var(--dls-black);

    background:
        linear-gradient(
            135deg,
            var(--dls-green-bright),
            var(--dls-green)
        );

    border-radius: var(--dls-radius-sm);

    box-shadow:
        0 16px 34px
        rgba(139, 203, 24, 0.18);
}

.dls-contact-faq__support h3 {
    position: relative;
    z-index: 2;

    margin-bottom: 0.9rem;

    color: var(--dls-white);

    font-size:
        clamp(2.2rem, 3.5vw, 3.6rem);

    line-height: 0.9;
    text-transform: uppercase;
}

.dls-contact-faq__support > p {
    position: relative;
    z-index: 2;

    margin-bottom: 1.5rem;

    color:
        rgba(255, 255, 255, 0.57);

    font-size: 0.75rem;
    line-height: 1.65;
}

.dls-contact-faq__support-details {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 0.65rem;

    margin-bottom: 1rem;
}

.dls-contact-faq__support-details > a {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: 0.75rem;

    min-width: 0;
    padding: 0.75rem;

    color:
        rgba(255, 255, 255, 0.76);

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: var(--dls-radius-sm);

    transition:
        color
        var(--dls-duration-normal)
        var(--dls-ease),
        background-color
        var(--dls-duration-normal)
        var(--dls-ease),
        border-color
        var(--dls-duration-normal)
        var(--dls-ease),
        transform
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-faq__support-details > a:hover {
    color: var(--dls-white);

    background:
        rgba(139, 203, 24, 0.07);

    border-color:
        rgba(139, 203, 24, 0.2);

    transform: translateX(4px);
}

.dls-contact-faq__support-details > a > span:first-child {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    color: var(--dls-orange);

    background:
        rgba(247, 121, 0, 0.08);

    border:
        1px solid
        rgba(247, 121, 0, 0.14);

    border-radius: 8px;
}

.dls-contact-faq__support-details > a > span:last-child {
    display: grid;
    gap: 0.12rem;

    min-width: 0;
}

.dls-contact-faq__support-details small {
    color:
        rgba(255, 255, 255, 0.4);

    font-size: 0.48rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.dls-contact-faq__support-details strong {
    color: var(--dls-white);

    font-size: 0.68rem;
    font-weight: 800;

    overflow-wrap: anywhere;
}

.dls-contact-faq__hours {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: 0.75rem;

    margin-bottom: 1.1rem;
    padding: 0.85rem;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: var(--dls-radius-sm);
}

.dls-contact-faq__hours > div {
    display: grid;
    gap: 0.2rem;
}

.dls-contact-faq__hours > div:last-child {
    text-align: right;
}

.dls-contact-faq__hours > span {
    width: 1px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.17),
            transparent
        );
}

.dls-contact-faq__hours div > span {
    color:
        rgba(255, 255, 255, 0.38);

    font-size: 0.46rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dls-contact-faq__hours strong {
    color: var(--dls-white);

    font-size: 0.6rem;
    font-weight: 800;
}

.dls-contact-faq__support-button {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    min-height: 49px;
    padding:
        0.75rem
        0.95rem;

    color: var(--dls-black);

    background:
        linear-gradient(
            135deg,
            var(--dls-green-bright),
            var(--dls-green)
        );

    border-radius: var(--dls-radius-sm);

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    transition:
        transform
        var(--dls-duration-normal)
        var(--dls-ease),
        box-shadow
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-faq__support-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 34px
        rgba(139, 203, 24, 0.2);
}

.dls-contact-faq__support-leaf {
    position: absolute;
    right: -35px;
    bottom: -42px;
    z-index: 0;

    width: 170px;

    color:
        rgba(139, 203, 24, 0.06);

    transform: rotate(8deg);

    pointer-events: none;
}


/* =========================================================
   ACORDEÓN
========================================================= */

.dls-contact-faq__accordion {
    display: grid;
    gap: 0.75rem;

    min-width: 0;
}

.dls-contact-faq__item {
    position: relative;
    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.068),
            rgba(255, 255, 255, 0.025)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: var(--dls-radius-md);

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.08);

    overflow: hidden;

    transition:
        background-color
        var(--dls-duration-normal)
        var(--dls-ease),
        border-color
        var(--dls-duration-normal)
        var(--dls-ease),
        box-shadow
        var(--dls-duration-normal)
        var(--dls-ease),
        transform
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-faq__item::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--dls-green-bright),
            var(--dls-orange)
        );

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform
        500ms
        var(--dls-ease);
}

.dls-contact-faq__item:hover {
    border-color:
        rgba(139, 203, 24, 0.22);

    transform: translateY(-2px);
}

.dls-contact-faq__item.is-open {
    background:
        linear-gradient(
            145deg,
            rgba(139, 203, 24, 0.09),
            rgba(255, 255, 255, 0.035)
        );

    border-color:
        rgba(139, 203, 24, 0.28);

    box-shadow:
        0 20px 48px
        rgba(0, 0, 0, 0.16);
}

.dls-contact-faq__item.is-open::after {
    transform: scaleX(1);
}

.dls-contact-faq__item h3 {
    margin: 0;
}

.dls-contact-faq__question {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 1rem;

    width: 100%;
    min-height: 82px;

    padding:
        1rem
        1.15rem;

    color: var(--dls-white);
    background: transparent;

    border: 0;

    text-align: left;
}

.dls-contact-faq__number {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    color: var(--dls-green-bright);

    background:
        rgba(139, 203, 24, 0.08);

    border:
        1px solid
        rgba(139, 203, 24, 0.15);

    border-radius: var(--dls-radius-sm);

    font-family: var(--dls-font-display);
    font-size: 0.9rem;
    font-weight: 800;

    transition:
        color
        var(--dls-duration-normal)
        var(--dls-ease),
        background-color
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-faq__item.is-open
.dls-contact-faq__number {
    color: var(--dls-black);
    background: var(--dls-green);
}

.dls-contact-faq__question-text {
    color:
        rgba(255, 255, 255, 0.88);

    font-family: var(--dls-font-display);
    font-size:
        clamp(1.35rem, 2.2vw, 1.85rem);

    font-weight: 800;
    line-height: 0.98;

    text-transform: uppercase;
}

.dls-contact-faq__item.is-open
.dls-contact-faq__question-text {
    color: var(--dls-white);
}

.dls-contact-faq__toggle {
    position: relative;

    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    color: var(--dls-white);

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 9px;

    transition:
        color
        var(--dls-duration-normal)
        var(--dls-ease),
        background-color
        var(--dls-duration-normal)
        var(--dls-ease),
        transform
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-faq__toggle span {
    position: absolute;

    width: 15px;
    height: 2px;

    background: currentColor;

    border-radius: var(--dls-radius-round);

    transition:
        opacity
        var(--dls-duration-normal)
        var(--dls-ease),
        transform
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-faq__toggle span:last-child {
    transform: rotate(90deg);
}

.dls-contact-faq__item.is-open
.dls-contact-faq__toggle {
    color: var(--dls-black);
    background: var(--dls-orange);

    transform: rotate(180deg);
}

.dls-contact-faq__item.is-open
.dls-contact-faq__toggle span:last-child {
    opacity: 0;
    transform: rotate(0deg);
}


/* =========================================================
   RESPUESTAS
========================================================= */

.dls-contact-faq__answer {
    height: auto;

    overflow: hidden;

    transition:
        height
        480ms
        var(--dls-ease);
}

.dls-contact-faq__answer[hidden] {
    display: none;
}

.dls-contact-faq__answer-inner {
    padding:
        0
        1.2rem
        1.3rem
        calc(42px + 2.15rem);
}

.dls-contact-faq__answer-inner p {
    max-width: 850px;
    margin: 0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.79rem;
    line-height: 1.7;
}

.dls-contact-faq__answer-inner p + p {
    margin-top: 0.7rem;
}


/* =========================================================
   FRANJA INFERIOR
========================================================= */

.dls-contact-faq__bottom {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 1.25rem;

    margin-top:
        clamp(3.5rem, 7vw, 6rem);

    padding:
        clamp(1.3rem, 3vw, 2rem);

    background:
        linear-gradient(
            135deg,
            rgba(139, 203, 24, 0.11),
            rgba(255, 255, 255, 0.035)
        );

    border:
        1px solid
        rgba(139, 203, 24, 0.18);

    border-radius: var(--dls-radius-md);

    overflow: hidden;
}

.dls-contact-faq__bottom::before {
    content: "";

    position: absolute;
    top: 0;
    right: 2rem;
    left: 2rem;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dls-orange),
            var(--dls-green-bright),
            transparent
        );
}

.dls-contact-faq__bottom-icon {
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    color: var(--dls-black);
    background: var(--dls-orange);

    border-radius: var(--dls-radius-sm);
}

.dls-contact-faq__bottom-copy {
    display: grid;
    gap: 0.3rem;
}

.dls-contact-faq__bottom-copy span {
    color: var(--dls-white);

    font-family: var(--dls-font-display);
    font-size:
        clamp(1.6rem, 3vw, 2.4rem);

    font-weight: 800;
    line-height: 0.95;

    text-transform: uppercase;
}

.dls-contact-faq__bottom-copy p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.73rem;
    line-height: 1.55;
}

.dls-contact-faq__bottom > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    min-height: 49px;
    padding:
        0.75rem
        1.05rem;

    color: var(--dls-black);
    background: var(--dls-green);

    border-radius: var(--dls-radius-sm);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    transition:
        transform
        var(--dls-duration-normal)
        var(--dls-ease),
        background-color
        var(--dls-duration-normal)
        var(--dls-ease);
}

.dls-contact-faq__bottom > a:hover {
    background: var(--dls-green-bright);
    transform: translateY(-3px);
}


/* =========================================================
   REVEAL Y MOVIMIENTO REDUCIDO
========================================================= */

.dls-contact-faq.is-enhanced
[data-dls-faq-reveal] {
    opacity: 0;

    filter: blur(6px);

    transform:
        translateY(28px)
        scale(0.99);
}

.dls-contact-faq.is-enhanced
[data-dls-faq-reveal].is-visible {
    opacity: 1;
    filter: blur(0);
    transform: none;

    transition:
        opacity
        750ms
        var(--dls-ease),
        transform
        850ms
        var(--dls-ease),
        filter
        750ms
        var(--dls-ease);
}

html.dls-reduced-motion
.dls-contact-faq *,
html.dls-reduced-motion
.dls-contact-faq *::before,
html.dls-reduced-motion
.dls-contact-faq *::after {
    animation: none !important;
    transition: none !important;
}










































/* =========================================================
   1. COMPUTADORA
========================================================= */

@media (min-width: 1200px) {
     .dls-contact-faq__layout {
        grid-template-columns:
            minmax(320px, 0.42fr)
            minmax(0, 1.58fr);
    }

    .dls-contact-faq__support {
        min-height: 530px;
    }

    .dls-contact-faq__question {
        min-height: 86px;
    }
     .dls-estimate__layout {
        grid-template-columns:
            minmax(320px, 0.42fr)
            minmax(0, 1.58fr);
    }

    .dls-estimate-form__service-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .dls-contact-hero {
        min-height: 560px;
    }

    .dls-contact-hero__container {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(300px, 0.45fr);
    }

    .dls-contact-hero__title {
        font-size:
            clamp(4.7rem, 6.8vw, 7.2rem);
    }

    .dls-contact-hero__info {
        display: block;
    }
}


/* =========================================================
   2. TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
    .dls-contact-faq {
        padding:
            var(--dls-section-space)
            2rem;
    }

    .dls-contact-faq__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, 0.5fr);

        gap: 3rem;
    }

    .dls-contact-faq__heading h2 {
        font-size:
            clamp(3.4rem, 7.3vw, 5.2rem);
    }

    .dls-contact-faq__layout {
        grid-template-columns:
            minmax(250px, 0.45fr)
            minmax(0, 1.55fr);
    }

    .dls-contact-faq__support {
        padding: 1.3rem;
    }

    .dls-contact-faq__question {
        gap: 0.8rem;
    }

    .dls-contact-faq__question-text {
        font-size:
            clamp(1.25rem, 2.5vw, 1.65rem);
    }

    .dls-contact-faq__bottom {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .dls-contact-faq__bottom > a {
        grid-column: 1 / -1;
        width: 100%;
    }
     .dls-estimate {
        padding:
            var(--dls-section-space)
            2rem;
    }

    .dls-estimate__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, 0.5fr);

        gap: 3rem;
    }

    .dls-estimate__heading h2 {
        font-size:
            clamp(3.4rem, 7.3vw, 5.2rem);
    }

    .dls-estimate__layout {
        grid-template-columns:
            minmax(255px, 0.46fr)
            minmax(0, 1.54fr);
    }

    .dls-estimate__process {
        padding: 1.3rem;
    }

    .dls-estimate-form__service-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dls-contact-hero {
        min-height: 540px;
    }

    .dls-contact-hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(235px, 0.42fr);

        gap: 2rem;

        width:
            calc(100% - 4rem);

        padding:
            1.25rem
            0
            4.5rem;
    }

    .dls-contact-hero__title {
        font-size:
            clamp(3.8rem, 7.5vw, 5.7rem);
    }

    .dls-contact-hero__description {
        font-size: 0.9rem;
    }

    .dls-contact-hero__info {
        width: min(100%, 285px);
        padding: 1rem;
    }

    .dls-contact-hero__trust-item:nth-child(3) {
        display: none;
    }

    .dls-contact-hero__scroll {
        left: 2rem;
    }
}


/* =========================================================
   3. CELULAR
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {
       .dls-contact-faq {
        padding:
            var(--dls-section-space)
            1.35rem;
    }

    .dls-contact-faq__header {
        grid-template-columns: 1fr;
        gap: 1.4rem;

        margin-bottom: 3.5rem;
    }

    .dls-contact-faq__heading h2 {
        font-size:
            clamp(3rem, 11vw, 4.6rem);
    }

    .dls-contact-faq__layout {
        grid-template-columns: 1fr;
    }

    .dls-contact-faq__support {
        position: relative;
        top: auto;
    }

    .dls-contact-faq__question {
        min-height: 76px;
    }

    .dls-contact-faq__bottom {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .dls-contact-faq__bottom > a {
        grid-column: 1 / -1;
        width: 100%;
    }
      .dls-estimate {
        padding:
            var(--dls-section-space)
            1.35rem;
    }

    .dls-estimate__header {
        grid-template-columns: 1fr;
        gap: 1.4rem;

        margin-bottom: 3.5rem;
    }

    .dls-estimate__heading h2 {
        font-size:
            clamp(3rem, 11vw, 4.6rem);
    }

    .dls-estimate__layout {
        grid-template-columns: 1fr;
    }

    .dls-estimate__process {
        position: relative;
        top: auto;
    }

    .dls-estimate__steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.75rem;
    }

    .dls-estimate__step {
        padding: 0.8rem;

        background:
            rgba(255, 255, 255, 0.045);

        border:
            1px solid
            rgba(255, 255, 255, 0.08);

        border-radius: var(--dls-radius-sm);
    }

    .dls-estimate__step::after {
        display: none;
    }

    .dls-estimate-form__service-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dls-contact-hero {
        min-height: 560px;
    }

    .dls-contact-hero__background img {
        object-position: 62% center;
    }

    .dls-contact-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 5, 3, 0.92),
                rgba(3, 5, 3, 0.68)
            ),
            linear-gradient(
                180deg,
                rgba(3, 5, 3, 0.16),
                rgba(3, 5, 3, 0.78)
            );
    }

    .dls-contact-hero__container {
        display: flex;
        align-items: center;

        width:
            calc(100% - 2.7rem);

        padding:
            1rem
            0
            4.5rem;
    }

    .dls-contact-hero__content {
        width: 100%;
        max-width: 610px;
    }

    .dls-contact-hero__title {
        font-size:
            clamp(3.1rem, 11.5vw, 4.6rem);

        line-height: 0.86;
    }

    .dls-contact-hero__description {
        max-width: 540px;

        font-size: 0.84rem;
        line-height: 1.58;
    }

    .dls-contact-hero__button {
        min-height: 47px;
    }

    .dls-contact-hero__trust-item {
        flex: 1 1 155px;
    }

    .dls-contact-hero__trust-item:nth-child(3) {
        display: none;
    }

    .dls-contact-hero__info {
        display: none;
    }

    .dls-contact-hero__scroll {
        left: 1.35rem;
        bottom: 1rem;
    }
}


/* =========================================================
   4. CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {
     .dls-contact-faq {
        padding:
            var(--dls-section-space)
            1rem;
    }

    .dls-contact-faq__header {
        grid-template-columns: 1fr;
        gap: 1.25rem;

        margin-bottom: 3rem;
    }

    .dls-contact-faq__heading h2 {
        font-size:
            clamp(2.65rem, 13vw, 3.75rem);
    }

    .dls-contact-faq__introduction > p {
        font-size: 0.85rem;
    }

    .dls-contact-faq__intro-badge {
        width: 100%;
    }

    .dls-contact-faq__layout {
        grid-template-columns: 1fr;
    }

    .dls-contact-faq__support {
        position: relative;
        top: auto;

        padding: 1.2rem;
    }

    .dls-contact-faq__support h3 {
        font-size:
            clamp(2.1rem, 10vw, 2.9rem);
    }

    .dls-contact-faq__hours {
        grid-template-columns: 1fr;
    }

    .dls-contact-faq__hours > div:last-child {
        text-align: left;
    }

    .dls-contact-faq__hours > span {
        width: 100%;
        height: 1px;
    }

    .dls-contact-faq__support-button {
        width: 100%;
    }

    .dls-contact-faq__question {
        grid-template-columns:
            35px
            minmax(0, 1fr)
            34px;

        gap: 0.65rem;

        min-height: 72px;
        padding:
            0.8rem
            0.75rem;
    }

    .dls-contact-faq__number {
        width: 35px;
        height: 35px;

        font-size: 0.76rem;
    }

    .dls-contact-faq__question-text {
        font-size:
            clamp(1.15rem, 6vw, 1.45rem);
    }

    .dls-contact-faq__toggle {
        width: 34px;
        height: 34px;
    }

    .dls-contact-faq__answer-inner {
        padding:
            0
            0.8rem
            1rem
            calc(35px + 1.4rem);
    }

    .dls-contact-faq__answer-inner p {
        font-size: 0.72rem;
    }

    .dls-contact-faq__bottom {
        grid-template-columns: 1fr;

        padding: 1.2rem;
    }

    .dls-contact-faq__bottom > a {
        width: 100%;
    }

    .dls-contact-faq__leaf--left {
        width: 175px;
    }

    .dls-contact-faq__leaf--right {
        display: none;
    }
     .dls-estimate {
        padding:
            var(--dls-section-space)
            1rem;
    }

    .dls-estimate__header {
        grid-template-columns: 1fr;
        gap: 1.25rem;

        margin-bottom: 3rem;
    }

    .dls-estimate__heading h2 {
        font-size:
            clamp(2.65rem, 13vw, 3.75rem);
    }

    .dls-estimate__introduction > p {
        font-size: 0.85rem;
    }

    .dls-estimate__layout {
        grid-template-columns: 1fr;
    }

    .dls-estimate__process {
        position: relative;
        top: auto;

        padding: 1.2rem;
    }

    .dls-estimate__steps {
        grid-template-columns: 1fr;
    }

    .dls-estimate__step::after {
        display: block;
    }

    .dls-estimate__form-shell {
        padding: 0.75rem;
    }

    .dls-estimate-form__group {
        padding:
            1rem
            0.75rem;
    }

    .dls-estimate-form__grid {
        grid-template-columns: 1fr;
    }

    .dls-estimate-form__field--wide {
        grid-column: auto;
    }

    .dls-estimate-form__service-grid {
        grid-template-columns: 1fr;
    }

    .dls-estimate-form__services-header {
        align-items: flex-start;
    }

    .dls-estimate-form__label-row,
    .dls-estimate-form__textarea-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .dls-estimate-form__submit {
        width: 100%;
    }

    .dls-estimate__status {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        align-items: start;
    }

    .dls-estimate__status button {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
    }

    .dls-contact-hero {
        min-height: 560px;
    }

    .dls-contact-hero__background img {
        object-position: 66% center;
    }

    .dls-contact-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 5, 3, 0.486),
                rgba(3, 5, 3, 0.411)
            ),
            linear-gradient(
                180deg,
                rgba(3, 5, 3, 0.12),
                rgba(3, 5, 3, 0.83)
            );
    }

    .dls-contact-hero__container {
        display: flex;
        align-items: center;

        width:
            calc(100% - 2rem);

        padding:
            0.7rem
            0
            4.1rem;
    }

    .dls-contact-hero__content {
        width: 100%;
    }

    .dls-contact-hero__eyebrow {
        margin-bottom: 0.65rem;

        padding:
            0.47rem
            0.58rem;

        font-size: 0.51rem;

        letter-spacing: 0.1em;
    }

    .dls-contact-hero__title {
        margin-bottom: 0.7rem;

        font-size:
            clamp(2.6rem, 13vw, 3.6rem);

        line-height: 0.87;
    }

    .dls-contact-hero__description {
        display: -webkit-box;

        margin-bottom: 0.85rem;

        font-size: 0.75rem;
        line-height: 1.5;

        overflow: hidden;

        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .dls-contact-hero__actions {
        gap: 0.5rem;
        margin-bottom: 0.8rem;
    }

    .dls-contact-hero__button {
        width: auto;
        min-height: 43px;

        padding:
            0.6rem
            0.72rem;

        font-size: 0.61rem;
    }

    .dls-contact-hero__button--primary {
        flex: 1 1 145px;
    }

    .dls-contact-hero__button--call {
        flex: 1 1 145px;
        min-width: 0;
    }

    .dls-contact-hero__button--call small {
        display: none;
    }

    .dls-contact-hero__call-icon {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }

    .dls-contact-hero__trust {
        gap: 0.42rem;
    }

    .dls-contact-hero__trust-item {
        flex: 1 1 calc(50% - 0.25rem);

        min-height: 43px;
        padding: 0.45rem;
    }

    .dls-contact-hero__trust-item:nth-child(3) {
        display: none;
    }

    .dls-contact-hero__trust-item strong {
        font-size: 0.54rem;
    }

    .dls-contact-hero__trust-item small {
        font-size: 0.42rem;
    }

    .dls-contact-hero__info {
        display: none;
    }

    .dls-contact-hero__scroll {
        left: 1rem;
        bottom: 0.85rem;

        font-size: 0.48rem;
    }

    .dls-contact-hero__scroll-line {
        width: 30px;
    }

    .dls-contact-hero__leaf {
        right: -80px;
        width: 180px;
    }
}