/* =========================================================
   ÁREAS DE SERVICIO · ULTRA WASH POWER WASH
========================================================= */

/* =========================================================
   1. BASE
========================================================= */

.areas-page {
    --areas-dark: #071a29;
    --areas-navy: #031f31;
    --areas-navy-light: #07527c;
    --areas-blue: #178ff1;
    --areas-cyan: #63caff;
    --areas-text: #587080;
    --areas-white: #ffffff;
    --areas-header-height: 92px;

    min-width: 320px;
    overflow-x: hidden;
    color: var(--areas-dark);
    background: #eff7fc;
}

.areas-page *,
.areas-page *::before,
.areas-page *::after {
    box-sizing: border-box;
}

.areas-main {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: #eff7fc;
}

/* =========================================================
   2. SECCIÓN PRINCIPAL
========================================================= */

.areas-hero {
    position: relative;
    width: 100%;

    /*
     * El navegador está fijo sobre la página.
     * La sección ocupa toda la pantalla y reserva
     * arriba el espacio real del navegador.
     */
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    overflow: hidden;

    padding:
        calc(var(--areas-header-height) + 22px)
        0
        30px;

    background:
        radial-gradient(
            circle at 4% 95%,
            rgba(60, 165, 255, 0.10),
            transparent 25rem
        ),
        radial-gradient(
            circle at 96% 18%,
            rgba(53, 145, 255, 0.10),
            transparent 27rem
        ),
        linear-gradient(
            135deg,
            #f8fbfe 0%,
            #eef7fd 58%,
            #e9f4fb 100%
        );
}
.areas-hero__decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.areas-hero__decoration--left {
    width: 390px;
    height: 390px;
    left: -220px;
    bottom: -210px;

    border: 1px solid rgba(23, 143, 241, 0.07);
}

.areas-hero__decoration--right {
    width: 410px;
    height: 410px;
    top: 25px;
    right: -245px;

    border: 1px solid rgba(23, 143, 241, 0.09);
}

/* =========================================================
   3. CONTENEDOR CENTRADO
========================================================= */

.areas-hero__container {
    position: relative;
    z-index: 2;

    width: min(1360px, calc(100% - 90px));
    margin-inline: auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(540px, 0.92fr);

    align-items: center;
    gap: 58px;

    transform: none;
}

/* =========================================================
   4. TEXTO IZQUIERDO
========================================================= */

.areas-hero__content {
    min-width: 0;
    width: 100%;
    max-width: 720px;
}

.areas-hero__eyebrow {
    margin: 0 0 17px;

    color: #1174c3;

    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.21em;
    text-transform: uppercase;
}

.areas-hero__content h1 {
    margin: 0;

    color: #061a2a;

    font-size: clamp(3.35rem, 4.15vw, 4.45rem);
    font-weight: 950;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.areas-hero__content h1 span {
    display: block;
    max-width: 100%;
    white-space: normal;
}

.areas-hero__description {
    width: min(100%, 650px);
    margin: 23px 0 0;

    color: var(--areas-text);

    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.7;
}

/* =========================================================
   5. BOTONES
========================================================= */

.areas-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;

    margin-top: 27px;
}

/* =========================================================
   6. BENEFICIOS EN UNA SOLA LÍNEA
========================================================= */

.areas-hero__benefits {
    width: 100%;

    display: grid;
    grid-template-columns:
        max-content
        max-content
        max-content;

    align-items: center;
    gap: 17px;

    margin: 20px 0 0;
    padding: 0;

    list-style: none;
}

.areas-hero__benefits li {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #17344a;

    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.2;

    white-space: nowrap;
}

.areas-hero__benefits li > span {
    width: 29px;
    height: 29px;

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

    flex: 0 0 auto;

    border-radius: 50%;

    color: #1685db;
    background: rgba(23, 143, 241, 0.11);

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

/* =========================================================
   7. BLOQUE VISUAL DERECHO
========================================================= */

.areas-hero__visual {
    min-width: 0;
    width: 100%;

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

.areas-coverage-card {
    position: relative;

    width: 100%;
    max-width: 650px;

    padding: 23px 23px 19px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 27px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(33, 169, 255, 0.27),
            transparent 18rem
        ),
        radial-gradient(
            circle at 45% 90%,
            rgba(9, 93, 145, 0.28),
            transparent 19rem
        ),
        linear-gradient(
            145deg,
            #031a2a 0%,
            #03283d 54%,
            #07517b 100%
        );

    box-shadow:
        0 30px 62px rgba(4, 31, 49, 0.20);
}

.areas-coverage-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, 0.13) 1px,
            transparent 1px
        );

    background-size: 20px 20px;
    opacity: 0.12;

    pointer-events: none;
}

/* =========================================================
   8. ENCABEZADO DE TARJETA
========================================================= */

.areas-coverage-card__header {
    position: relative;
    z-index: 4;
}

.areas-coverage-card__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;

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

    font-size: 0.83rem;
    font-weight: 850;
}

.areas-coverage-card__status > span {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #39e58b;

    box-shadow:
        0 0 0 7px rgba(57, 229, 139, 0.12);

    animation: areas-status-pulse 2s ease-in-out infinite;
}

@keyframes areas-status-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(57, 229, 139, 0.10);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(57, 229, 139, 0);
    }
}

.areas-coverage-card__header h2 {
    margin: 10px 0 5px;

    color: #ffffff;

    font-size: clamp(1.55rem, 1.8vw, 1.9rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.areas-coverage-card__header p {
    margin: 0;

    color: rgba(228, 241, 249, 0.76);

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

/* =========================================================
   9. ESCENA DE TARJETAS
========================================================= */

.areas-coverage-scene {
    position: relative;
    z-index: 3;

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

    margin-top: 8px;
}

.areas-coverage-scene__circle {
    position: absolute;

    width: 265px;
    height: 265px;

    left: 50%;
    top: 51%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(96, 203, 255, 0.11);
    border-radius: 50%;
}

.areas-coverage-scene__route {
    position: absolute;

    height: 92px;

    border: 1px dashed rgba(102, 205, 255, 0.25);
    border-radius: 50%;

    pointer-events: none;
}

.areas-coverage-scene__route--one {
    width: 72%;

    left: 12%;
    top: 95px;

    transform: rotate(-8deg);
}

.areas-coverage-scene__route--two {
    width: 54%;

    right: 12%;
    top: 145px;

    transform: rotate(14deg);
}

.areas-coverage-scene__dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #55c9ff;

    box-shadow:
        0 0 0 8px rgba(85, 201, 255, 0.11);

    animation:
        areas-route-dot 2.3s ease-in-out infinite;
}

.areas-coverage-scene__dot--one {
    top: 123px;
    left: 27%;
}

.areas-coverage-scene__dot--two {
    top: 176px;
    left: 50%;

    animation-delay: 0.5s;
}

.areas-coverage-scene__dot--three {
    top: 118px;
    right: 24%;

    animation-delay: 1s;
}

@keyframes areas-route-dot {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

/* =========================================================
   10. TARJETAS REGIONALES
========================================================= */

.areas-region-card {
    --card-x: 0px;
    --card-y: 0px;
    --card-rotation: 0deg;
    --card-layer: 1;
    --card-delay: 0ms;

    position: absolute;

    width: 225px;
    min-height: 174px;

    left: 50%;
    top: 50%;

    z-index: var(--card-layer);

    padding: 17px;

    overflow: hidden;

    border: 1px solid rgba(112, 210, 255, 0.25);
    border-radius: 20px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(61, 181, 255, 0.27),
            transparent 9rem
        ),
        linear-gradient(
            160deg,
            rgba(27, 94, 155, 0.96),
            rgba(9, 48, 88, 0.98)
        );

    box-shadow:
        0 22px 34px rgba(0, 14, 27, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    opacity: 0;

    transform:
        translate(
            calc(-50% + var(--card-x)),
            calc(-50% + 105px)
        )
        rotate(0deg)
        scale(0.64);

    transition:
        opacity 420ms ease var(--card-delay),
        transform 820ms cubic-bezier(0.18, 0.92, 0.27, 1.16) var(--card-delay),
        box-shadow 220ms ease,
        border-color 220ms ease;

    cursor: pointer;
    outline: none;
    will-change: transform;
}

.areas-region-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.08),
            transparent 42%
        );

    pointer-events: none;
}

.areas-coverage-scene.is-dealt .areas-region-card {
    opacity: 1;

    transform:
        translate(
            calc(-50% + var(--card-x)),
            calc(-50% + var(--card-y))
        )
        rotate(var(--card-rotation))
        scale(1);
}

/*
 * Una vez terminada la animación inicial,
 * el hover ya no conserva retrasos.
 */
.areas-coverage-scene.is-settled .areas-region-card {
    transition:
        transform 240ms cubic-bezier(0.22, 0.8, 0.22, 1) 0ms,
        box-shadow 180ms ease 0ms,
        border-color 180ms ease 0ms;
}

.areas-region-card--maryland {
    --card-x: -172px;
    --card-y: 18px;
    --card-rotation: -7deg;
    --card-layer: 2;
    --card-delay: 80ms;
}

.areas-region-card--virginia {
    --card-x: 0px;
    --card-y: -17px;
    --card-rotation: -4deg;
    --card-layer: 4;
    --card-delay: 330ms;
}

.areas-region-card--dc {
    --card-x: 172px;
    --card-y: 18px;
    --card-rotation: 8deg;
    --card-layer: 2;
    --card-delay: 580ms;
}

.areas-coverage-scene.is-dealt .areas-region-card:hover,
.areas-coverage-scene.is-dealt .areas-region-card:focus-visible,
.areas-coverage-scene.is-dealt .areas-region-card.is-active {
    z-index: 20;

    border-color: rgba(130, 220, 255, 0.56);

    box-shadow:
        0 30px 50px rgba(0, 13, 26, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    transform:
        translate(
            calc(-50% + var(--card-x)),
            calc(-50% + var(--card-y) - 16px)
        )
        rotate(0deg)
        scale(1.065);
}

.areas-region-card__icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 13px;

    background: rgba(91, 190, 255, 0.16);

    font-size: 1.1rem;
}

.areas-region-card h3 {
    position: relative;

    margin: 0;

    color: #ffffff;

    font-size: 1.13rem;
    font-weight: 900;
    line-height: 1.14;
}

.areas-region-card p {
    position: relative;

    min-height: 38px;
    margin: 8px 0 10px;

    color: rgba(229, 241, 250, 0.76);

    font-size: 0.78rem;
    line-height: 1.45;
}

.areas-region-card a {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #74d0ff;

    font-size: 0.77rem;
    font-weight: 850;
    text-decoration: none;
}

.areas-region-card a:hover {
    color: #b7e9ff;
}

/* =========================================================
   11. PIE DE TARJETA
========================================================= */

/* =========================================================
   12. RESPONSIVE · LAPTOP MEDIANA
   Mantiene dos columnas, pero equilibra texto y tarjeta.
========================================================= */

@media (max-width: 1360px) {

    .areas-hero__container {
        width: min(1220px, calc(100% - 54px));
        grid-template-columns:
            minmax(0, 0.98fr)
            minmax(500px, 1.02fr);
        gap: 30px;
        transform: none;
    }

    .areas-hero__content {
        max-width: 590px;
    }

    .areas-hero__content h1 {
        font-size: clamp(3rem, 4.15vw, 3.9rem);
        line-height: 0.96;
    }

    .areas-hero__description {
        max-width: 570px;
        font-size: 1rem;
        line-height: 1.62;
    }

    .areas-hero__benefits {
        display: flex;
        flex-wrap: wrap;
        gap: 11px 16px;
    }

    .areas-hero__benefits li {
        font-size: 0.73rem;
    }

    .areas-coverage-card {
        max-width: 590px;
    }

    .areas-coverage-scene {
        min-height: 300px;
    }

    .areas-region-card {
        width: 198px;
        min-height: 164px;
    }

    .areas-region-card--maryland {
        --card-x: -148px;
    }

    .areas-region-card--dc {
        --card-x: 148px;
    }
}

/* =========================================================
   13. RESPONSIVE · LAPTOP PEQUEÑA
   Todavía usa dos columnas, con tamaños más controlados.
========================================================= */

@media (max-width: 1180px) {

    .areas-hero {
        padding:
            calc(var(--areas-header-height) + 24px)
            0
            30px;
    }

    .areas-hero__container {
        width: min(1060px, calc(100% - 38px));
        grid-template-columns:
            minmax(0, 0.94fr)
            minmax(450px, 1.06fr);
        gap: 24px;
    }

    .areas-hero__content {
        max-width: 520px;
    }

    .areas-hero__content h1 {
        font-size: clamp(2.65rem, 4.2vw, 3.25rem);
        line-height: 0.98;
    }

    .areas-hero__content h1 span {
        white-space: normal;
    }

    .areas-hero__eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.17em;
    }

    .areas-hero__description {
        margin-top: 19px;
        font-size: 0.91rem;
        line-height: 1.58;
    }

    .areas-hero__actions {
        margin-top: 22px;
        gap: 9px;
    }

    .areas-hero__benefits {
        margin-top: 16px;
        gap: 9px 13px;
    }

    .areas-hero__benefits li {
        font-size: 0.69rem;
    }

    .areas-hero__benefits li > span {
        width: 27px;
        height: 27px;
    }

    .areas-coverage-card {
        max-width: 540px;
        padding: 20px 20px 17px;
        border-radius: 23px;
    }

    .areas-coverage-card__header h2 {
        font-size: 1.48rem;
    }

    .areas-coverage-scene {
        min-height: 276px;
    }

    .areas-region-card {
        width: 176px;
        min-height: 153px;
        padding: 14px;
    }

    .areas-region-card--maryland {
        --card-x: -126px;
    }

    .areas-region-card--virginia {
        --card-y: -12px;
    }

    .areas-region-card--dc {
        --card-x: 126px;
    }

    .areas-region-card__icon {
        width: 36px;
        height: 36px;
        margin-bottom: 11px;
    }

    .areas-region-card h3 {
        font-size: 0.98rem;
    }

    .areas-region-card p {
        min-height: 34px;
        font-size: 0.7rem;
    }

    .areas-region-card a {
        font-size: 0.7rem;
    }
}

/* =========================================================
   14. RESPONSIVE · TABLET HORIZONTAL
   Desde aquí se apilan texto y tarjeta.
   Evita que las tarjetas se corten por los lados.
========================================================= */

@media (max-width: 1020px) {

    .areas-hero {
        min-height: auto;
        padding:
            calc(var(--areas-header-height) + 30px)
            0
            62px;
    }

    .areas-hero__container {
        width: min(760px, calc(100% - 34px));
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .areas-hero__content {
        width: 100%;
        max-width: 720px;
        margin-inline: auto;
        text-align: center;
    }

    .areas-hero__eyebrow {
        margin-inline: auto;
    }

    .areas-hero__content h1 {
        max-width: 760px;
        margin-inline: auto;
        font-size: clamp(2.65rem, 6.7vw, 3.65rem);
        line-height: 0.97;
    }

    /*
     * En tablet ya no obligamos cada span a ocupar
     * una línea completa. Así nunca queda “de” sola.
     */
    .areas-hero__content h1 span {
        display: inline;
        white-space: normal;
    }

    .areas-hero__content h1 span:not(:last-child)::after {
        content: " ";
    }

    .areas-hero__description {
        max-width: 650px;
        margin-inline: auto;
        font-size: 0.98rem;
        line-height: 1.62;
    }

    .areas-hero__actions {
        justify-content: center;
    }

    .areas-hero__benefits {
        justify-content: center;
    }

    .areas-hero__visual {
        width: min(680px, 100%);
        margin-inline: auto;
        justify-content: center;
    }

    .areas-coverage-card {
        width: 100%;
        max-width: 680px;
    }

    .areas-coverage-scene {
        min-height: 302px;
    }

    .areas-region-card {
        width: 205px;
        min-height: 164px;
    }

    .areas-region-card--maryland {
        --card-x: -150px;
    }

    .areas-region-card--virginia {
        --card-y: -14px;
    }

    .areas-region-card--dc {
        --card-x: 150px;
    }
}

/* =========================================================
   15. RESPONSIVE · TABLET VERTICAL
========================================================= */

@media (max-width: 760px) {

    .areas-hero {
        padding:
            calc(var(--areas-header-height) + 25px)
            0
            56px;
    }

    .areas-hero__container {
        width: min(660px, calc(100% - 28px));
        gap: 31px;
    }

    .areas-hero__content h1 {
        max-width: 640px;
        font-size: clamp(2.35rem, 7.6vw, 3.05rem);
        line-height: 0.99;
        letter-spacing: -0.045em;
    }

    .areas-hero__description {
        max-width: 600px;
        margin-top: 18px;
        font-size: 0.94rem;
    }

    .areas-hero__benefits {
        gap: 10px 15px;
    }

    .areas-coverage-card {
        max-width: 620px;
        padding: 19px 19px 17px;
    }

    .areas-coverage-scene {
        min-height: 282px;
    }

    .areas-region-card {
        width: 184px;
        min-height: 153px;
    }

    .areas-region-card--maryland {
        --card-x: -132px;
    }

    .areas-region-card--dc {
        --card-x: 132px;
    }
}

/* =========================================================
   16. RESPONSIVE · TELÉFONO
   El bloque visual se convierte en carrusel horizontal.
   Las tres regiones siguen disponibles mediante deslizamiento.
========================================================= */

@media (max-width: 620px) {

    .areas-hero {
        min-height: auto;
        align-items: flex-start;
        padding:
            calc(var(--areas-header-height) + 28px)
            0
            46px;
        overflow: hidden;
    }

    .areas-hero__container {
        width: calc(100% - 24px);
        gap: 28px;
    }

    .areas-hero__eyebrow {
        margin: 0 0 13px;
        font-size: 0.64rem;
        line-height: 1.45;
        letter-spacing: 0.14em;
    }

    .areas-hero__content h1 {
        max-width: none;
        margin: 0;
        font-size: clamp(2.12rem, 9.8vw, 2.75rem);
        line-height: 1;
        letter-spacing: -0.042em;
    }

    .areas-hero__content h1 span {
        display: inline;
        white-space: normal;
    }

    .areas-hero__description {
        margin-top: 19px;
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .areas-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 24px;
    }

    .areas-hero__benefits {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 9px;
        margin-top: 19px;
    }

    .areas-hero__benefits li {
        font-size: 0.79rem;
    }

    .areas-hero__visual {
        width: 100%;
        overflow: visible;
    }

    .areas-coverage-card {
        width: 100%;
        max-width: none;
        padding: 17px;
        border-radius: 21px;
    }

    .areas-coverage-card__status {
        font-size: 0.78rem;
    }

    .areas-coverage-card__header h2 {
        margin-top: 9px;
        font-size: 1.34rem;
        line-height: 1.12;
    }

    .areas-coverage-card__header p {
        font-size: 0.79rem;
    }

    /*
     * Carrusel táctil: ocupa poca altura y permite
     * ver las tres tarjetas deslizando a izquierda/derecha.
     */
    .areas-coverage-scene {
        min-height: auto;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(82%, 1fr);
        gap: 12px;
        margin-top: 20px;
        padding: 3px 1px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1px;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .areas-coverage-scene::-webkit-scrollbar {
        display: none;
    }

    .areas-coverage-scene__circle,
    .areas-coverage-scene__route,
    .areas-coverage-scene__dot {
        display: none;
    }

    .areas-region-card,
    .areas-coverage-scene.is-dealt .areas-region-card,
    .areas-coverage-scene.is-settled .areas-region-card,
    .areas-coverage-scene.is-dealt .areas-region-card:hover,
    .areas-coverage-scene.is-dealt .areas-region-card:focus-visible,
    .areas-coverage-scene.is-dealt .areas-region-card.is-active {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        min-height: 154px;
        padding: 16px;
        opacity: 1;
        transform: none;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transition:
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .areas-region-card--virginia {
        order: 1;
    }

    .areas-region-card--maryland {
        order: 2;
    }

    .areas-region-card--dc {
        order: 3;
    }

    .areas-region-card__icon {
        width: 38px;
        height: 38px;
        margin-bottom: 11px;
    }

    .areas-region-card h3 {
        font-size: 1.05rem;
    }

    .areas-region-card p {
        min-height: 0;
        margin-block: 7px 10px;
        font-size: 0.75rem;
    }

    .areas-region-card a {
        font-size: 0.75rem;
    }

}

/* =========================================================
   17. TELÉFONO PEQUEÑO
========================================================= */

@media (max-width: 390px) {

    .areas-hero {
        padding:
            calc(var(--areas-header-height) + 24px)
            0
            40px;
    }

    .areas-hero__container {
        width: calc(100% - 20px);
        gap: 25px;
    }

    .areas-hero__eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .areas-hero__content h1 {
        font-size: clamp(2rem, 10.3vw, 2.38rem);
        line-height: 1.01;
    }

    .areas-hero__description {
        font-size: 0.88rem;
    }

    .areas-coverage-card {
        padding: 15px;
        border-radius: 19px;
    }

    .areas-coverage-card__header h2 {
        font-size: 1.23rem;
    }

    .areas-coverage-scene {
        grid-auto-columns: 88%;
    }

    .areas-region-card,
    .areas-coverage-scene.is-dealt .areas-region-card,
    .areas-coverage-scene.is-settled .areas-region-card,
    .areas-coverage-scene.is-dealt .areas-region-card:hover,
    .areas-coverage-scene.is-dealt .areas-region-card:focus-visible,
    .areas-coverage-scene.is-dealt .areas-region-card.is-active {
        min-height: 148px;
        padding: 15px;
    }

}

/* =========================================================
   18. ACCESIBILIDAD · MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .areas-region-card,
    .areas-coverage-scene.is-dealt .areas-region-card,
    .areas-coverage-scene.is-settled .areas-region-card {
        transition: none !important;
        animation: none !important;
    }

    .areas-coverage-card__status > span,
    .areas-coverage-scene__dot {
        animation: none !important;
    }
}
/* =========================================================
   CARRUSEL MÓVIL DE REGIONES

   Se activa únicamente cuando ya no caben bien las 3 cartas.
========================================================= */

@media (max-width: 700px) {
    /*
     * La tarjeta general conserva su diseño oscuro.
     */

    /*
     * El escenario se convierte en un carrusel horizontal.
     */

    /*
     * Los adornos del diseño de escritorio se ocultan
     * para que no estorben al deslizar.
     */

    /*
     * Cada región queda completa y centrada.
     * Se alcanza a ver una pequeña parte de la siguiente.
     */
    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card {
        position: relative !important;
        inset: auto !important;

        flex: 0 0 calc(100% - 34px);
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        min-height: 182px;

        padding: 20px;
        margin: 0;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        animation: none !important;

        scroll-snap-align: center;
        scroll-snap-stop: always;

        z-index: 1 !important;

        transition:
            transform 220ms ease,
            border-color 220ms ease,
            box-shadow 220ms ease !important;
    }

    /*
     * En móvil no se levanta exageradamente.
     */

    /*
     * Indicadores del carrusel.
     */

}

/*
 * En teléfonos muy angostos damos un poco más de espacio
 * interno para que todo el texto se lea completo.
 */
@media (max-width: 420px) {
    .areas-coverage-card {
        padding: 14px;
        border-radius: 22px;
    }

    .areas-coverage-scene.is-mobile-carousel {
        gap: 10px;
        margin-inline: -4px;
        padding-inline: 10px;
        scroll-padding-inline: 10px;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card {
        flex-basis: calc(100% - 24px);
        min-height: 176px;
        padding: 18px;
        border-radius: 19px;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card h3 {
        font-size: 1.12rem;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card p {
        font-size: 0.86rem;
    }
}

/* =========================================================
   AJUSTES DEL CARRUSEL MÓVIL DE REGIONES
========================================================= */

@media (max-width: 700px) {

    .areas-coverage-card {
        overflow: hidden;
        padding: 20px;
    }

    /*
     * Carrusel más limpio.
     */
    .areas-coverage-scene.is-mobile-carousel {
        display: flex !important;
        align-items: stretch;
        gap: 14px;

        width: auto;
        min-height: 0;

        margin:
            20px
            -8px
            0;

        padding:
            5px
            16px
            15px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;

        scrollbar-width: none;
    }

    .areas-coverage-scene.is-mobile-carousel::-webkit-scrollbar {
        display: none;
    }

    /*
     * Se eliminan los adornos del fondo dentro del carrusel.
     */
    .areas-coverage-scene.is-mobile-carousel
        .areas-coverage-scene__circle,
    .areas-coverage-scene.is-mobile-carousel
        .areas-coverage-scene__route,
    .areas-coverage-scene.is-mobile-carousel
        .areas-coverage-scene__dot {
        display: none !important;
    }

    /*
     * Tarjeta más compacta para evitar el vacío enorme
     * del lado derecho.
     */
    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card,
    .areas-coverage-scene.is-mobile-carousel.is-dealt
        .areas-region-card,
    .areas-coverage-scene.is-mobile-carousel.is-settled
        .areas-region-card {
        position: relative !important;
        inset: auto !important;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        flex:
            0
            0
            clamp(250px, 84%, 470px);

        width: auto !important;
        max-width: none !important;
        min-width: 0;
        min-height: 195px;

        padding: 24px 26px;
        margin: 0;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        animation: none !important;

        scroll-snap-align: center;
        scroll-snap-stop: always;

        z-index: 1 !important;

        transition:
            transform 210ms ease,
            border-color 210ms ease,
            box-shadow 210ms ease !important;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card:active,
    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card:focus-within {
        transform: translateY(-3px) !important;
        z-index: 2 !important;
    }

    /*
     * Texto más grande y con mejor presencia.
     */
    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 15px;
        border-radius: 14px;
        font-size: 1.14rem;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card h3 {
        width: 100%;
        font-size: 1.38rem;
        line-height: 1.12;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card p {
        width: 100%;
        max-width: 34ch;
        min-height: 0;
        margin: 9px 0 13px;

        font-size: 0.96rem;
        line-height: 1.48;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card a {
        font-size: 0.9rem;
    }

    /*
     * Indicadores.
     */
    .areas-mobile-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        margin: 2px 0 14px;
    }

    .areas-mobile-dot {
        width: 8px;
        height: 8px;

        padding: 0;
        border: 0;
        border-radius: 999px;

        background: rgba(130, 211, 255, 0.34);
        cursor: pointer;

        transition:
            width 180ms ease,
            background-color 180ms ease,
            transform 180ms ease;
    }

    .areas-mobile-dot.is-active {
        width: 26px;
        background: #62ccff;
    }

    .areas-mobile-dot:focus-visible {
        outline: 3px solid rgba(98, 204, 255, 0.34);
        outline-offset: 4px;
    }
}

/* =========================================================
   TELÉFONOS
========================================================= */

@media (max-width: 470px) {

    .areas-coverage-card {
        padding: 15px;
        border-radius: 21px;
    }

    .areas-coverage-scene.is-mobile-carousel {
        gap: 11px;

        margin:
            18px
            -5px
            0;

        padding:
            4px
            11px
            13px;

        scroll-padding-inline: 11px;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card,
    .areas-coverage-scene.is-mobile-carousel.is-dealt
        .areas-region-card,
    .areas-coverage-scene.is-mobile-carousel.is-settled
        .areas-region-card {
        flex-basis: clamp(235px, 88%, 350px);

        min-height: 184px;
        padding: 21px 20px;

        border-radius: 19px;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card__icon {
        width: 42px;
        height: 42px;
        margin-bottom: 13px;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card h3 {
        font-size: 1.22rem;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card p {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card a {
        font-size: 0.83rem;
    }
}

/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
========================================================= */

@media (max-width: 360px) {

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card,
    .areas-coverage-scene.is-mobile-carousel.is-dealt
        .areas-region-card,
    .areas-coverage-scene.is-mobile-carousel.is-settled
        .areas-region-card {
        flex-basis: calc(100% - 20px);
        padding-inline: 18px;
    }

    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card h3 {
        font-size: 1.16rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .areas-coverage-scene.is-mobile-carousel {
        scroll-behavior: auto;
    }

    .areas-mobile-dot,
    .areas-coverage-scene.is-mobile-carousel
        .areas-region-card {
        transition: none !important;
    }
}
/* =========================================================
   MAPAS DENTRO DE LAS TARJETAS DE REGIÓN
========================================================= */

.areas-region-card {
    isolation: isolate;
}

.areas-region-card__content {
    width: 64%;
    min-width: 0;
}

.areas-region-card__map {
    max-width: 128px;
    max-height: 82%;
    user-select: none;

    /*
     * Tus imágenes son negras.
     * Este filtro las convierte en un tono claro para que
     * se vean sobre el fondo azul.
     */
    filter:
        brightness(0)
        saturate(100%)
        invert(79%)
        sepia(20%)
        saturate(1445%)
        hue-rotate(168deg)
        brightness(103%)
        contrast(101%);

}

.areas-region-card__map--virginia {
    max-width: 140px;
    transform:
        translateY(-50%)
        translateX(7px)
        scale(0.92)
        rotate(-2deg);
}

.areas-region-card__map--maryland {
    max-width: 126px;
    transform:
        translateY(-50%)
        translateX(7px)
        scale(0.9)
        rotate(1deg);
}

.areas-region-card__map--dc {
    max-width: 104px;
    transform:
        translateY(-50%)
        translateX(6px)
        scale(0.9)
        rotate(-5deg);
}

/* Al pasar el mouse o seleccionar la tarjeta,
   el mapa acompaña la misma animación. */

.areas-region-card:hover .areas-region-card__map,
.areas-region-card:focus-visible .areas-region-card__map,
.areas-region-card.is-active .areas-region-card__map {
    opacity: 0.30;
    filter:
        brightness(0)
        saturate(100%)
        invert(91%)
        sepia(10%)
        saturate(1395%)
        hue-rotate(173deg)
        brightness(106%)
        contrast(102%);

    transform:
        translateY(-50%)
        translateX(0)
        scale(1.06)
        rotate(0deg);
}

/* Mantiene el texto legible y evita que el mapa lo tape. */

.areas-region-card h3,
.areas-region-card p,
.areas-region-card__link,
.areas-region-card__icon {
    position: relative;
    z-index: 4;
}

/* =========================================================
   RESPONSIVE · LAPTOP PEQUEÑA Y TABLET
========================================================= */

@media (max-width: 980px) {
    .areas-region-card__content {
        width: 66%;
    }

    .areas-region-card__map {
        right: 12px;
        width: 36%;
        max-width: 116px;
        opacity: 0.15;
    }

    .areas-region-card__map--virginia {
        width: 40%;
        max-width: 126px;
    }

    .areas-region-card__map--dc {
        width: 31%;
        max-width: 92px;
    }
}

/* =========================================================
   RESPONSIVE · CARRUSEL EN TABLET VERTICAL Y TELÉFONO
========================================================= */

@media (max-width: 680px) {
    .areas-region-card {
        min-height: 220px;
        overflow: hidden;
    }

    .areas-region-card__content {
        width: 62%;
        padding-right: 6px;
    }

    .areas-region-card__map {
        top: 50%;
        right: 12px;
        width: 38%;
        max-width: 132px;
        max-height: 78%;
        opacity: 0.18;

        transform:
            translateY(-50%)
            translateX(4px)
            scale(0.94)
            rotate(-2deg);
    }

    .areas-region-card__map--virginia {
        width: 42%;
        max-width: 142px;
    }

    .areas-region-card__map--maryland {
        width: 38%;
        max-width: 126px;
    }

    .areas-region-card__map--dc {
        width: 32%;
        max-width: 98px;
    }

    .areas-region-card:hover .areas-region-card__map,
    .areas-region-card:focus-visible .areas-region-card__map,
    .areas-region-card.is-active .areas-region-card__map {
        transform:
            translateY(-50%)
            translateX(0)
            scale(1.03)
            rotate(0deg);
    }
}

/* =========================================================
   RESPONSIVE · TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width: 430px) {
    .areas-region-card {
        min-height: 205px;
    }

    .areas-region-card__content {
        width: 66%;
    }

    .areas-region-card__map {
        right: 8px;
        width: 34%;
        max-width: 104px;
        opacity: 0.17;
    }

    .areas-region-card__map--virginia {
        width: 38%;
        max-width: 112px;
    }

    .areas-region-card__map--maryland {
        width: 34%;
        max-width: 100px;
    }

    .areas-region-card__map--dc {
        width: 28%;
        max-width: 76px;
    }

    .areas-region-card h3 {
        max-width: 100%;
    }

    .areas-region-card p {
        max-width: 100%;
    }
}

/* =========================================================
   ACCESIBILIDAD · REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .areas-region-card__map {
        transition: none;
    }
}
/* =====================================================
   SOLO IMÁGENES DE LOS ESTADOS
   No modifica tamaño, posición ni animación de las tarjetas
===================================================== */

/* Base común para las tres imágenes */

/* El contenido de la tarjeta queda delante del mapa */

/* Ajustes individuales sin tocar la tarjeta */

/* Al pasar el mouse, solo se anima la imagen */
.areas-region-card:hover .areas-region-card__map,
.areas-region-card.is-active .areas-region-card__map {
    opacity: 0.68;
    transform: translateY(-4px) scale(1.06);
}

/* Tablet */
@media (max-width: 820px) {
    .areas-region-card__map {
        width: 88px;
        height: 88px;
        top: 14px;
        right: 14px;
    }

    .areas-region-card__map--virginia {
        width: 98px;
        height: 98px;
    }

    .areas-region-card__map--maryland {
        width: 104px;
        height: 104px;
    }

    .areas-region-card__map--dc {
        width: 76px;
        height: 76px;
    }
}

/* Teléfono */
@media (max-width: 520px) {
    .areas-region-card__map {
        width: 86px;
        height: 86px;
        top: 16px;
        right: 14px;
        opacity: 0.38;
    }

    .areas-region-card__map--virginia {
        width: 96px;
        height: 96px;
    }

    .areas-region-card__map--maryland {
        width: 102px;
        height: 102px;
    }

    .areas-region-card__map--dc {
        width: 72px;
        height: 72px;
    }
}
/* =====================================================
   TAMAÑO Y TRANSICIONES DE LOS MAPAS
===================================================== */

/* -----------------------------------------------------
   COMPUTADORA / LAPTOP
   Normal: discretos.
   Hover o tarjeta activa: crecen y se ven con claridad.
----------------------------------------------------- */

.areas-region-card__map {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;

    width: 76px;
    height: 76px;

    object-fit: contain;
    object-position: center;

    opacity: 0.30;
    pointer-events: none;

    transform: translateY(0) scale(1);
    transform-origin: top right;

    transition:
        transform 210ms ease,
        opacity 210ms ease;
}

/* Maryland es más horizontal y necesita un poco más de espacio */
.areas-region-card__map--maryland {
    width: 88px;
    height: 88px;
    top: 10px;
    right: 10px;
}

/* Virginia */
.areas-region-card__map--virginia {
    width: 82px;
    height: 82px;
    top: 11px;
    right: 12px;
}

/* Washington D. C. es más compacto */
.areas-region-card__map--dc {
    width: 68px;
    height: 68px;
    top: 16px;
    right: 16px;
}

/* El texto siempre queda encima del mapa */
.areas-region-card__content {
    position: relative;
    z-index: 2;
}

/* En laptop, al pasar el mouse queda grande como te gustó */
.areas-region-card:hover .areas-region-card__map,
.areas-region-card:focus-within .areas-region-card__map,
.areas-region-card.is-active .areas-region-card__map {
    opacity: 0.68;
    transform: translateY(-4px) scale(1.28);
}

/* -----------------------------------------------------
   TABLET
----------------------------------------------------- */

@media (max-width: 900px) {
    .areas-region-card__map {
        width: 82px;
        height: 82px;
        top: 12px;
        right: 12px;
        opacity: 0.36;
    }

    .areas-region-card__map--maryland {
        width: 96px;
        height: 96px;
        top: 8px;
        right: 8px;
    }

    .areas-region-card__map--virginia {
        width: 90px;
        height: 90px;
        top: 9px;
        right: 10px;
    }

    .areas-region-card__map--dc {
        width: 74px;
        height: 74px;
        top: 14px;
        right: 14px;
    }

    .areas-region-card:hover .areas-region-card__map,
    .areas-region-card:focus-within .areas-region-card__map,
    .areas-region-card.is-active .areas-region-card__map {
        opacity: 0.68;
        transform: translateY(-3px) scale(1.18);
    }
}

/* -----------------------------------------------------
   TELÉFONO
   Aquí los mapas se ven más grandes incluso sin tocar.
----------------------------------------------------- */

@media (max-width: 620px) {
    .areas-region-card__map {
        width: 104px;
        height: 104px;
        top: 10px;
        right: 9px;
        opacity: 0.48;
    }

    .areas-region-card__map--maryland {
        width: 118px;
        height: 118px;
        top: 5px;
        right: 5px;
    }

    .areas-region-card__map--virginia {
        width: 112px;
        height: 112px;
        top: 6px;
        right: 6px;
    }

    .areas-region-card__map--dc {
        width: 92px;
        height: 92px;
        top: 12px;
        right: 11px;
    }

    /* En táctil la tarjeta activa resalta suavemente el mapa */
    .areas-region-card:hover .areas-region-card__map,
    .areas-region-card:focus-within .areas-region-card__map,
    .areas-region-card.is-active .areas-region-card__map {
        opacity: 0.72;
        transform: translateY(-2px) scale(1.07);
    }
}

/* -----------------------------------------------------
   TELÉFONOS MUY PEQUEÑOS
----------------------------------------------------- */

@media (max-width: 390px) {
    .areas-region-card__map {
        width: 96px;
        height: 96px;
        right: 7px;
    }

    .areas-region-card__map--maryland {
        width: 108px;
        height: 108px;
    }

    .areas-region-card__map--virginia {
        width: 102px;
        height: 102px;
    }

    .areas-region-card__map--dc {
        width: 86px;
        height: 86px;
    }
}

/* =========================================================
   19. BOTONES DEL HERO · MISMAS DIMENSIONES DE SERVICIOS

   Medidas visuales tomadas de servicios.html:
   - Principal: 229px × 43px aproximadamente.
   - Secundario: 206px × 43px aproximadamente.
   - Padding: 11px 20px.
   - Radio: 8px.
   - Texto: 13px y peso 700.

   No se igualan entre sí.
========================================================= */

.areas-hero__actions.hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.areas-hero__actions.hero-buttons .primary-button,
.areas-hero__actions.hero-buttons .secondary-button {
    box-sizing: border-box;
    min-height: 43px;
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    /* Misma elevación suave de los botones de Servicios. */
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
    will-change: transform;
}

/* Equivale a “Solicitar cotización gratis →”. */
.areas-hero__actions.hero-buttons .primary-button {
    flex: 0 0 229px;
    width: 229px;
    min-width: 229px;
    max-width: 229px;

    background-color: #111111;
    border: 1.5px solid #111111;
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

/* Equivale a “Ver todos los servicios ↓”. */
.areas-hero__actions.hero-buttons .secondary-button {
    flex: 0 0 206px;
    width: 206px;
    min-width: 206px;
    max-width: 206px;

    background-color: rgba(255, 255, 255, 0.94);
    border: 1.5px solid rgba(7, 26, 42, 0.18);
    color: #111111;
    box-shadow: 0 10px 26px rgba(7, 26, 42, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.areas-hero__actions.hero-buttons .primary-button:hover,
.areas-hero__actions.hero-buttons .primary-button:focus-visible {
    background-color: #ffffff;
    border-color: #111111;
    color: #111111;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(7, 26, 42, 0.14);
}

.areas-hero__actions.hero-buttons .secondary-button:hover,
.areas-hero__actions.hero-buttons .secondary-button:focus-visible {
    background-color: #111111;
    border-color: #111111;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.areas-hero__actions.hero-buttons .primary-button:focus-visible,
.areas-hero__actions.hero-buttons .secondary-button:focus-visible {
    outline: 3px solid rgba(23, 143, 241, 0.28);
    outline-offset: 4px;
}

.areas-hero__phone-button svg {
    flex: 0 0 auto;
}

.areas-hero__title-line {
    display: block;
}

/* =========================================================
   RESPONSIVE · MISMO COMPORTAMIENTO DE SERVICIOS
========================================================= */

@media (max-width: 1180px) {
    .areas-hero__actions.hero-buttons {
        gap: 12px;
        margin-top: 24px;
    }
}

@media (max-width: 700px) {
    .areas-hero__actions.hero-buttons {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
    }

    .areas-hero__actions.hero-buttons .primary-button,
    .areas-hero__actions.hero-buttons .secondary-button {
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 48px;
        justify-content: center;
        padding: 11px 16px;
    }
}

@media (max-width: 700px) and (max-height: 700px) {
    .areas-hero__actions.hero-buttons {
        gap: 8px;
        margin-top: 13px;
    }

    .areas-hero__actions.hero-buttons .primary-button,
    .areas-hero__actions.hero-buttons .secondary-button {
        min-height: 43px;
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .areas-hero__actions.hero-buttons .primary-button,
    .areas-hero__actions.hero-buttons .secondary-button {
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================================
   UTILIDAD DE ACCESIBILIDAD
========================================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* =========================================================
   SECCIÓN 2 · CARRUSEL VISUAL DE UBICACIONES
========================================================= */

.areas-orbit {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    align-items: center;

    padding:
        calc(var(--areas-header-height) + 10px)
        0
        18px;

    overflow: hidden;
    scroll-margin-top: var(--areas-header-height);

    background:
        radial-gradient(
            circle at 7% 18%,
            rgba(31, 149, 242, 0.10),
            transparent 25rem
        ),
        radial-gradient(
            circle at 94% 78%,
            rgba(67, 193, 255, 0.13),
            transparent 29rem
        ),
        linear-gradient(
            145deg,
            #f9fcff 0%,
            #eef7fd 54%,
            #e8f4fb 100%
        );
}

.areas-orbit__decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.areas-orbit__decoration--left {
    width: 330px;
    height: 330px;
    left: -230px;
    top: 80px;

    border: 1px solid rgba(23, 143, 241, 0.08);
}

.areas-orbit__decoration--right {
    width: 470px;
    height: 470px;
    right: -300px;
    bottom: -250px;

    border: 1px solid rgba(23, 143, 241, 0.10);
}

.areas-orbit__container {
    position: relative;
    z-index: 2;

    width: min(1340px, calc(100% - 64px));
    margin-inline: auto;
}

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

.areas-orbit__header {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.areas-orbit__eyebrow {
    margin: 0 0 7px;

    color: #1177c8;

    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1.3;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.areas-orbit__header h2 {
    margin: 0;

    color: #061a2a;

    font-size: clamp(2.15rem, 3.25vw, 3.2rem);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.047em;
}

.areas-orbit__header > p:last-child {
    max-width: 720px;
    margin: 9px auto 0;

    color: #5d7383;

    font-size: clamp(0.82rem, 0.95vw, 0.95rem);
    line-height: 1.45;
}

/* =========================================================
   BUSCADOR
========================================================= */

/* =========================================================
   PESTAÑAS
========================================================= */

.areas-orbit__tabs {
    width: min(850px, 100%);
    margin: 11px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.areas-orbit__tab {
    min-width: 0;

    border: 1px solid rgba(11, 67, 104, 0.16);

    color: #123047;
    background: rgba(255, 255, 255, 0.70);

    font: inherit;
    cursor: pointer;

    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.areas-orbit__tab > span {
    font-weight: 950;
}

.areas-orbit__tab small {
    color: #6d8494;

    font-weight: 850;
}

.areas-orbit__tab:hover,
.areas-orbit__tab:focus-visible {
    border-color: rgba(11, 114, 207, 0.38);
}

.areas-orbit__tab.is-active {
    color: #ffffff;
    border-color: #087be7;
    background: linear-gradient(135deg, #168ff1, #0875df);

}

.areas-orbit__tab.is-active small {
    color: rgba(255, 255, 255, 0.78);
}

.areas-orbit__status {
    min-height: 19px;
    margin: 6px 0 1px;

    color: #577183;

    font-size: 0.69rem;
    font-weight: 800;
    text-align: center;
}

.areas-orbit__status.is-success {
    color: #087d4f;
}

.areas-orbit__status.is-warning {
    color: #a45b09;
}

/* =========================================================
   ESCENARIO Y ÓRBITA
========================================================= */

.areas-orbit__stage {
    position: relative;

    width: 100%;
    height: 355px;

    margin-top: 0;

    overflow: hidden;
    outline: none;

    border-radius: 30px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(36, 154, 232, 0.09) 0%,
            rgba(36, 154, 232, 0.025) 42%,
            transparent 72%
        );
}

.areas-orbit__stage:focus-visible {
    outline: 3px solid rgba(23, 143, 241, 0.24);
    outline-offset: 3px;
}

.areas-orbit__ring {
    position: absolute;
    left: 50%;
    top: 54%;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;
}

.areas-orbit__ring--outer {
    width: min(940px, 78vw);
    height: 245px;

    border: 1px solid rgba(21, 139, 229, 0.14);

    box-shadow:
        inset 0 0 45px rgba(30, 153, 231, 0.05),
        0 18px 48px rgba(10, 84, 129, 0.04);
}

.areas-orbit__ring--inner {
    width: min(700px, 59vw);
    height: 175px;

    border: 1px dashed rgba(21, 139, 229, 0.12);
}

.areas-orbit__deck {
    position: absolute;
    inset: 0;
}

/* =========================================================
   TARJETAS RECTAS Y SUPERPUESTAS
========================================================= */

.areas-orbit-card {
    position: absolute;
    left: 50%;
    top: 51%;

    width: clamp(220px, 17.2vw, 270px);
    min-height: 282px;

    display: flex;
    flex-direction: column;

    padding: 18px;

    overflow: hidden;

    border: 1px solid rgba(21, 101, 151, 0.14);
    border-radius: 23px;

    color: #15354b;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(236, 247, 254, 0.98)
        );

    box-shadow:
        0 22px 45px rgba(5, 38, 61, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translate(-50%, -50%)
        translate3d(0, 44px, 0)
        scale(0.56);

    transition:
        transform 560ms cubic-bezier(0.22, 0.82, 0.24, 1),
        opacity 360ms ease,
        filter 360ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;

    cursor: pointer;
    will-change: transform, opacity;
    isolation: isolate;
}

.areas-orbit-card::before {
    content: "";

    position: absolute;
    z-index: -1;
    right: -12px;
    bottom: 12px;

    width: 145px;
    height: 112px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.075;

    filter:
        brightness(0)
        saturate(100%)
        invert(42%)
        sepia(89%)
        saturate(1192%)
        hue-rotate(174deg)
        brightness(91%)
        contrast(92%);

    transition:
        transform 360ms ease,
        opacity 360ms ease;
}

.areas-orbit-card[data-region="virginia"]::before {
    background-image:
        url("../assets/areas/maps/virginia.png");
}

.areas-orbit-card[data-region="maryland"]::before {
    background-image:
        url("../assets/areas/maps/maryland.png");
}

.areas-orbit-card[data-region="dc"]::before {
    background-image:
        url("../assets/areas/maps/washington-dc.png");
}

.areas-orbit-card[data-orbit-slot="0"] {
    z-index: 10;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translate3d(0, 22px, 0)
        scale(1);

    color: #ffffff;
    border-color: rgba(113, 215, 255, 0.33);

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(84, 199, 255, 0.34),
            transparent 10rem
        ),
        linear-gradient(
            145deg,
            #041d2e 0%,
            #063b59 58%,
            #0873a9 100%
        );

    box-shadow:
        0 30px 58px rgba(4, 38, 61, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.areas-orbit-card[data-orbit-slot="-1"] {
    z-index: 8;

    opacity: 0.93;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translate3d(clamp(-245px, -15.8vw, -198px), 41px, 0)
        scale(0.91);
}

.areas-orbit-card[data-orbit-slot="1"] {
    z-index: 8;

    opacity: 0.93;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translate3d(clamp(198px, 15.8vw, 245px), 41px, 0)
        scale(0.91);
}

.areas-orbit-card[data-orbit-slot="-2"] {
    z-index: 5;

    opacity: 0.70;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translate3d(clamp(-420px, -28vw, -330px), -24px, 0)
        scale(0.78);

    filter: saturate(0.88);
}

.areas-orbit-card[data-orbit-slot="2"] {
    z-index: 5;

    opacity: 0.70;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translate3d(clamp(330px, 28vw, 420px), -24px, 0)
        scale(0.78);

    filter: saturate(0.88);
}

.areas-orbit-card[data-orbit-slot="-3"] {
    z-index: 3;

    opacity: 0.42;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translate3d(clamp(-515px, -36vw, -420px), 46px, 0)
        scale(0.66);

    filter: saturate(0.72);
}

.areas-orbit-card[data-orbit-slot="3"] {
    z-index: 3;

    opacity: 0.42;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translate3d(clamp(420px, 36vw, 515px), 46px, 0)
        scale(0.66);

    filter: saturate(0.72);
}

.areas-orbit-card[data-orbit-slot="hidden"] {
    z-index: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translate(-50%, -50%)
        translate3d(0, -70px, 0)
        scale(0.48);
}

.areas-orbit-card:hover,
.areas-orbit-card:focus-visible {
    border-color: rgba(21, 139, 229, 0.38);

    box-shadow:
        0 28px 54px rgba(5, 38, 61, 0.21),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.areas-orbit-card[data-orbit-slot="0"]:hover,
.areas-orbit-card[data-orbit-slot="0"]:focus-visible {
    box-shadow:
        0 35px 66px rgba(4, 38, 61, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.areas-orbit-card[data-orbit-slot="0"]::before {
    opacity: 0.18;

    filter:
        brightness(0)
        saturate(100%)
        invert(92%)
        sepia(20%)
        saturate(867%)
        hue-rotate(163deg)
        brightness(105%)
        contrast(101%);

    transform: scale(1.08);
}

.areas-orbit-card.is-found {
    animation:
        areas-orbit-found
        760ms
        cubic-bezier(0.22, 1, 0.36, 1)
        1;
}

@keyframes areas-orbit-found {
    0% {
        box-shadow:
            0 30px 58px rgba(4, 38, 61, 0.28);
    }

    45% {
        box-shadow:
            0 0 0 8px rgba(43, 212, 139, 0.18),
            0 38px 72px rgba(4, 38, 61, 0.37);
    }

    100% {
        box-shadow:
            0 30px 58px rgba(4, 38, 61, 0.28);
    }
}

/* =========================================================
   CONTENIDO DE LAS TARJETAS
========================================================= */

.areas-orbit-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.areas-orbit-card__region {
    color: #0878cf;

    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.areas-orbit-card__number {
    color: #7390a2;

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

.areas-orbit-card[data-orbit-slot="0"]
    .areas-orbit-card__region {
    color: #74d7ff;
}

.areas-orbit-card[data-orbit-slot="0"]
    .areas-orbit-card__number {
    color: rgba(229, 244, 252, 0.62);
}

.areas-orbit-card__pin {
    width: 43px;
    height: 43px;

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

    margin-top: 18px;

    border-radius: 14px;

    color: #1083d8;
    background: #e8f6ff;
}

.areas-orbit-card[data-orbit-slot="0"]
    .areas-orbit-card__pin {
    color: #ffffff;
    background: rgba(91, 201, 255, 0.16);
}

.areas-orbit-card__body {
    margin-top: 14px;
}

.areas-orbit-card__type {
    color: #6d8494;

    font-size: 0.59rem;
    font-weight: 850;
}

.areas-orbit-card[data-orbit-slot="0"]
    .areas-orbit-card__type {
    color: rgba(225, 242, 251, 0.67);
}

.areas-orbit-card h3 {
    margin: 5px 0 0;

    color: inherit;

    font-size: clamp(1.35rem, 1.8vw, 1.72rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.035em;
}

.areas-orbit-card p {
    margin: 9px 0 0;

    color: #617887;

    font-size: 0.68rem;
    line-height: 1.42;
}

.areas-orbit-card[data-orbit-slot="0"] p {
    color: rgba(226, 241, 250, 0.73);
}

.areas-orbit-card__condition {
    display: inline-flex;
    align-items: center;

    margin-top: 10px;
    padding: 5px 8px;

    border-radius: 999px;

    color: #8a5704;
    background: #fff3d5;

    font-size: 0.55rem;
    font-weight: 950;
}

.areas-orbit-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-top: auto;
    padding-top: 14px;

    color: #1081d8;

    font-size: 0.66rem;
    font-weight: 900;
    text-decoration: none;

    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        color 180ms ease;
}

.areas-orbit-card[data-orbit-slot="0"]
    .areas-orbit-card__cta {
    color: #78d6ff;

    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.areas-orbit-card[data-orbit-slot="0"]
    .areas-orbit-card__cta:hover {
    color: #c0eeff;
}

/* =========================================================
   FLECHAS DEL CARRUSEL
========================================================= */

.areas-orbit__arrow {
    position: absolute;
    z-index: 30;
    top: 54%;

    width: 48px;
    height: 48px;

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

    padding: 0;

    border: 1px solid rgba(10, 91, 145, 0.16);
    border-radius: 15px;

    color: #087bd5;
    background: rgba(255, 255, 255, 0.94);

    font: inherit;
    font-size: 1.05rem;
    font-weight: 950;

    box-shadow: 0 12px 27px rgba(7, 52, 82, 0.11);

    transform: translateY(-50%);

    cursor: pointer;

    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.areas-orbit__arrow--previous {
    left: 18px;
}

.areas-orbit__arrow--next {
    right: 18px;
}

.areas-orbit__arrow:hover,
.areas-orbit__arrow:focus-visible {
    color: #ffffff;
    border-color: #0c80df;
    background: #0c80df;

    box-shadow: 0 15px 32px rgba(11, 118, 210, 0.24);

    transform:
        translateY(calc(-50% - 3px))
        scale(1.03);
}

.areas-orbit__arrow:active {
    transform:
        translateY(-50%)
        scale(0.97);
}

/* =========================================================
   PIE DE LA SECCIÓN
========================================================= */

/* =========================================================
   RESPONSIVE · TABLET
========================================================= */

@media (max-width: 1020px) {
    .areas-orbit {
        min-height: auto;

        padding:
            calc(var(--areas-header-height) + 20px)
            0
            50px;
    }

    .areas-orbit__container {
        width: min(820px, calc(100% - 30px));
    }

    .areas-orbit__tabs {
        display: flex;

        overflow-x: auto;
        padding: 2px 2px 7px;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .areas-orbit__tabs::-webkit-scrollbar {
        display: none;
    }

    .areas-orbit__tab {
        flex: 0 0 min(250px, 76%);
        justify-content: space-between;

        border-radius: 13px;
        scroll-snap-align: center;
    }

    .areas-orbit__stage {
        height: 340px;
    }

    .areas-orbit-card {
        width: 232px;
        min-height: 268px;
    }

    .areas-orbit-card[data-orbit-slot="-1"] {
        transform:
            translate(-50%, -50%)
            translate3d(-185px, 42px, 0)
            scale(0.88);
    }

    .areas-orbit-card[data-orbit-slot="1"] {
        transform:
            translate(-50%, -50%)
            translate3d(185px, 42px, 0)
            scale(0.88);
    }

    .areas-orbit-card[data-orbit-slot="-2"] {
        transform:
            translate(-50%, -50%)
            translate3d(-315px, -19px, 0)
            scale(0.72);
    }

    .areas-orbit-card[data-orbit-slot="2"] {
        transform:
            translate(-50%, -50%)
            translate3d(315px, -19px, 0)
            scale(0.72);
    }

    .areas-orbit-card[data-orbit-slot="-3"],
    .areas-orbit-card[data-orbit-slot="3"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* =========================================================
   RESPONSIVE · TELÉFONO
========================================================= */

@media (max-width: 620px) {
    .areas-orbit {
        padding:
            calc(var(--areas-header-height) + 18px)
            0
            42px;
    }

    .areas-orbit__container {
        width: calc(100% - 22px);
    }

    .areas-orbit__header {
        text-align: left;
    }

    .areas-orbit__eyebrow {
        font-size: 0.59rem;
        letter-spacing: 0.14em;
    }

    .areas-orbit__header h2 {
        font-size: clamp(1.95rem, 9.4vw, 2.5rem);
    }

    .areas-orbit__header > p:last-child {
        margin-top: 9px;
        font-size: 0.82rem;
    }

    .areas-orbit__status {
        min-height: 31px;
        text-align: left;
    }

    .areas-orbit__stage {
        height: 325px;
        margin-top: -3px;
    }

    .areas-orbit__ring--outer {
        width: 620px;
        height: 210px;
    }

    .areas-orbit__ring--inner {
        width: 440px;
        height: 145px;
    }

    .areas-orbit-card {
        width: min(72vw, 255px);
        min-height: 265px;
        padding: 17px;
    }

    .areas-orbit-card[data-orbit-slot="0"] {
        transform:
            translate(-50%, -50%)
            translate3d(0, 19px, 0)
            scale(1);
    }

    .areas-orbit-card[data-orbit-slot="-1"] {
        opacity: 0.52;

        transform:
            translate(-50%, -50%)
            translate3d(-71vw, 38px, 0)
            scale(0.78);
    }

    .areas-orbit-card[data-orbit-slot="1"] {
        opacity: 0.52;

        transform:
            translate(-50%, -50%)
            translate3d(71vw, 38px, 0)
            scale(0.78);
    }

    .areas-orbit-card[data-orbit-slot="-2"],
    .areas-orbit-card[data-orbit-slot="2"],
    .areas-orbit-card[data-orbit-slot="-3"],
    .areas-orbit-card[data-orbit-slot="3"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .areas-orbit__arrow {
        top: 55%;
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .areas-orbit__arrow--previous {
        left: 2px;
    }

    .areas-orbit__arrow--next {
        right: 2px;
    }

}

/* =========================================================
   PANTALLAS DE POCA ALTURA
   La sección queda casi completa dentro de una pantalla.
========================================================= */

@media (min-width: 1021px) and (max-height: 820px) {

    .areas-orbit__status {
        margin-block: 4px 0;
    }

    .areas-orbit-card__pin {
        width: 38px;
        height: 38px;
    }

    .areas-orbit-card h3 {
        font-size: clamp(1.2rem, 1.55vw, 1.48rem);
    }

    .areas-orbit-card p {
        margin-top: 7px;
    }

    .areas-orbit-card__cta {
        padding-top: 10px;
    }

}

/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .areas-orbit-card,
    .areas-orbit__arrow,
    .areas-orbit__tab,
    .areas-orbit__search > button,
    .areas-orbit__footer > a {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   AJUSTE FINAL · SUBIR CONTENIDO Y DAR MÁS AIRE
========================================================= */

/* La barra inferior ya no forma parte del diseño. */

/* =========================================================
   COMPUTADORA Y LAPTOP
========================================================= */

@media (min-width: 1021px) {

    /*
     * Todo el contenido de la sección sube.
     * Las tarjetas también suben junto con el conjunto.
     */
    .areas-orbit {
        align-items: center;

        padding:
            calc(var(--areas-header-height) + 10px)
            0
            14px;
    }

    .areas-orbit__container {
        transform: translateY(-34px);
    }

    /*
     * El encabezado sube un poco más que las tarjetas.
     * Aproximadamente unos 2 cm visuales en total.
     */
    .areas-orbit__header {
        transform: translateY(-30px);
    }

    /*
     * Más separación entre:
     * texto pequeño, título y descripción.
     */
    .areas-orbit__eyebrow {
        margin-bottom: 12px;
    }

    .areas-orbit__header h2 {
        font-size: clamp(2.1rem, 2.95vw, 2.9rem);
        line-height: 1;
    }

    .areas-orbit__header > p:last-child {
        margin-top: 13px;
        line-height: 1.45;
    }

    /*
     * Más aire antes de las pestañas y el estado.
     */
    .areas-orbit__tabs {
        margin-top: 24px;
    }

    .areas-orbit__status {
        margin: 12px 0 0;
    }

    /*
     * Las tarjetas y la elipse suben dentro del escenario.
     */
    .areas-orbit__stage {
        height: 390px;
        margin-top: 8px;
    }

    .areas-orbit__ring {
        top: 49%;
    }

    .areas-orbit-card {
        top: 46%;

        width: clamp(235px, 18vw, 282px);
        min-height: 292px;
    }

    .areas-orbit__arrow {
        top: 49%;
    }

    /*
     * La imagen del estado sube dentro de cada tarjeta.
     * Antes estaba cerca de la parte inferior.
     */
    .areas-orbit-card::before {
        top: 30px;
        right: -6px;
        bottom: auto;

        width: 154px;
        height: 116px;

        background-position: center top;
    }
}

/* =========================================================
   LAPTOPS CON MENOR ALTURA
========================================================= */

@media (min-width: 1021px) and (max-height: 820px) {

    .areas-orbit {
        padding:
            calc(var(--areas-header-height) + 6px)
            0
            8px;
    }

    .areas-orbit__container {
        transform: translateY(-28px);
    }

    .areas-orbit__header {
        transform: translateY(-24px);
    }

    .areas-orbit__eyebrow {
        margin-bottom: 9px;
    }

    .areas-orbit__header h2 {
        font-size: clamp(1.9rem, 2.55vw, 2.45rem);
    }

    .areas-orbit__header > p:last-child {
        margin-top: 9px;
        font-size: 0.78rem;
    }

    .areas-orbit__tabs {
        margin-top: 18px;
    }

    .areas-orbit__status {
        margin-top: 8px;
    }

    .areas-orbit__stage {
        height: 345px;
        margin-top: 5px;
    }

    .areas-orbit__ring {
        top: 49%;
    }

    .areas-orbit-card {
        top: 46%;

        width: clamp(220px, 16.7vw, 255px);
        min-height: 258px;
        padding: 15px;
    }

    .areas-orbit__arrow {
        top: 49%;
    }

    .areas-orbit-card__pin {
        margin-top: 11px;
    }

    .areas-orbit-card__body {
        margin-top: 10px;
    }

    .areas-orbit-card::before {
        top: 25px;
        right: -5px;

        width: 142px;
        height: 104px;
    }
}
/* =========================================================
   ALTURA EXACTA DE LA SECCIÓN 2 EN COMPUTADORA
   Elimina el espacio y scroll vacío del final.
========================================================= */

@media (min-width: 1021px) {
    .areas-orbit {
        height: calc(100vh - var(--areas-header-height));
        height: calc(100dvh - var(--areas-header-height));

        min-height: calc(100vh - var(--areas-header-height));
        min-height: calc(100dvh - var(--areas-header-height));

        max-height: calc(100vh - var(--areas-header-height));
        max-height: calc(100dvh - var(--areas-header-height));

        overflow: hidden;
    }
}
/* =========================================================
   MINI TARJETAS DE REGIÓN Y SOPORTE DE ANIMACIÓN
========================================================= */

/* =========================================================
   1. LAS 3 REGIONES COMO MINI TARJETAS COMPACTAS
========================================================= */

.areas-orbit__tabs {
    gap: 12px;
}

.areas-orbit__tab {
    position: relative;

    min-height: 68px;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 3px;

    padding:
        11px
        62px
        10px
        20px;

    overflow: hidden;

    border-radius: 18px;

    text-align: left;

    box-shadow:
        0 10px 24px rgba(6, 42, 66, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    isolation: isolate;
}

.areas-orbit__tab::before {
    content: "";

    position: absolute;
    z-index: 2;

    left: 10px;
    top: 12px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #2bd48b;

    box-shadow:
        0 0 0 5px rgba(43, 212, 139, 0.11);
}

.areas-orbit__tab::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: 8px;
    top: 50%;

    width: 54px;
    height: 48px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.09;

    transform:
        translateY(-50%)
        scale(0.92);

    transition:
        opacity 220ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.areas-orbit__tab[data-orbit-tab="virginia"]::after {
    background-image:
        url("../assets/areas/maps/virginia.png");
}

.areas-orbit__tab[data-orbit-tab="maryland"]::after {
    background-image:
        url("../assets/areas/maps/maryland.png");
}

.areas-orbit__tab[data-orbit-tab="dc"]::after {
    background-image:
        url("../assets/areas/maps/washington-dc.png");
}

.areas-orbit__tab > span,
.areas-orbit__tab small {
    position: relative;
    z-index: 3;
}

.areas-orbit__tab > span {
    font-size: 0.82rem;
    line-height: 1.05;
}

.areas-orbit__tab small {
    display: block;

    font-size: 0.62rem;
    line-height: 1.15;
}

.areas-orbit__tab:hover,
.areas-orbit__tab:focus-visible {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(6, 42, 66, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.areas-orbit__tab:hover::after,
.areas-orbit__tab:focus-visible::after {
    opacity: 0.17;

    transform:
        translateY(-50%)
        scale(1.03);
}

.areas-orbit__tab.is-active {
    box-shadow:
        0 16px 30px rgba(10, 118, 226, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.areas-orbit__tab.is-active::before {
    background: #7fffc0;

    box-shadow:
        0 0 0 5px rgba(127, 255, 192, 0.14);
}

.areas-orbit__tab.is-active::after {
    opacity: 0.23;

    filter:
        brightness(0)
        saturate(100%)
        invert(96%)
        sepia(8%)
        saturate(1070%)
        hue-rotate(165deg)
        brightness(105%)
        contrast(101%);

    transform:
        translateY(-50%)
        scale(1.08);
}

/* =========================================================
   2. POSICIÓN TEMPORAL DE BARAJA
   JavaScript usa este estado únicamente durante la entrada.
========================================================= */

.areas-orbit-card[data-orbit-slot="stack"] {
    z-index: 14;

    opacity: 0.94;
    visibility: visible;
    pointer-events: none;

    filter: none;

    transform:
        translate(-50%, -50%)
        translate3d(0, 28px, 0)
        rotate(var(--shuffle-rotation, 0deg))
        scale(0.83);
}

.areas-orbit.is-scroll-dealing
    .areas-orbit-card {
    transition:
        transform 680ms cubic-bezier(0.2, 0.86, 0.24, 1.08),
        opacity 360ms ease,
        filter 360ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.areas-orbit-card.is-dealing {
    box-shadow:
        0 30px 58px rgba(4, 38, 61, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* =========================================================
   3. RESPONSIVE DE LAS MINI TARJETAS
========================================================= */

@media (max-width: 1020px) {
    .areas-orbit__tab {
        min-height: 62px;

        padding:
            10px
            54px
            9px
            18px;
    }

    .areas-orbit__tab::after {
        width: 46px;
        height: 42px;
    }
}

@media (max-width: 620px) {
    .areas-orbit__tab {
        min-height: 60px;
        flex-basis: min(235px, 76%);
    }

    .areas-orbit__tab > span {
        font-size: 0.78rem;
    }
}

/* =========================================================
   4. MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .areas-orbit__tab,
    .areas-orbit__tab::after,
    .areas-orbit-card[data-orbit-slot="stack"],
    .areas-orbit.is-scroll-dealing
        .areas-orbit-card {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   CAMBIO DE REGIÓN · BARAJAR Y REPARTIR
========================================================= */

.areas-orbit.is-region-switching
    [data-orbit-tab],
.areas-orbit.is-region-switching
    .areas-orbit__arrow,
.areas-orbit.is-region-switching
    .areas-orbit-card {
    pointer-events: none;
}

.areas-orbit.is-region-switching
    [data-orbit-tab] {
    cursor: wait;
}

.areas-orbit.is-region-switching
    .areas-orbit__arrow {
    opacity: 0.62;
}

.areas-orbit.is-region-switching
    .areas-orbit-card {
    transition:
        transform 620ms cubic-bezier(0.2, 0.86, 0.24, 1.08),
        opacity 330ms ease,
        filter 330ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

/*
 * Estado de baraja reutilizado al cambiar de región.
 * Las tarjetas quedan juntas en el centro antes de cambiar.
 */
.areas-orbit.is-region-switching
    .areas-orbit-card[data-orbit-slot="stack"] {
    z-index: 18;

    opacity: 0.96;
    visibility: visible;

    filter: none;

    transform:
        translate(-50%, -50%)
        translate3d(0, 26px, 0)
        rotate(var(--region-shuffle-rotation, 0deg))
        scale(0.84);
}

/* Una pequeña sombra extra mientras la tarjeta se reparte. */
.areas-orbit-card.is-region-dealing {
    box-shadow:
        0 31px 60px rgba(4, 38, 61, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .areas-orbit.is-region-switching
        .areas-orbit-card,
    .areas-orbit-card.is-region-dealing {
        transition: none !important;
        animation: none !important;
    }
}
/* =========================================================
   RESPONSIVE · MINI TARJETAS Y MAPAS DE ESTADO

   - Mantiene las 3 regiones visibles en tablet.
   - Conserva el carrusel horizontal en teléfono.
   - Ajusta las siluetas dentro de las tarjetas.
========================================================= */

/* =========================================================
   TABLET · 621px A 1020px
========================================================= */

@media (min-width: 621px) and (max-width: 1020px) {

    /*
     * En tablet dejamos de usar el desplazamiento horizontal.
     * Las tres regiones entran completas en una sola fila.
     */
    .areas-orbit__tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;

        width: min(900px, 100%) !important;

        padding: 0 !important;
        overflow: visible !important;

        scroll-snap-type: none !important;
    }

    .areas-orbit__tab {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;

        min-height: 64px;

        padding:
            10px
            50px
            9px
            17px !important;

        scroll-snap-align: unset !important;
    }

    .areas-orbit__tab > span {
        font-size: 0.76rem;
        line-height: 1.05;
    }

    .areas-orbit__tab small {
        max-width: 100%;

        font-size: 0.58rem;
        line-height: 1.15;
    }

    .areas-orbit__tab::after {
        top: 50%;
        right: 7px;

        width: 42px;
        height: 38px;

        transform:
            translateY(-50%)
            scale(0.94);
    }

    /*
     * Las siluetas ya no quedan abajo de las tarjetas.
     * Se colocan en la zona superior derecha.
     */
}

/* =========================================================
   TABLET ANGOSTA · 621px A 720px
========================================================= */

@media (min-width: 621px) and (max-width: 720px) {

    .areas-orbit__tabs {
        gap: 8px !important;
    }

    .areas-orbit__tab {
        min-height: 62px;

        padding:
            9px
            40px
            8px
            14px !important;
    }

    .areas-orbit__tab > span {
        font-size: 0.70rem;
    }

    .areas-orbit__tab small {
        font-size: 0.53rem;
    }

    .areas-orbit__tab::after {
        right: 4px;

        width: 34px;
        height: 31px;
    }
}

/* =========================================================
   TELÉFONO · HASTA 620px
========================================================= */

@media (max-width: 620px) {

    /*
     * En teléfono conservamos el carrusel horizontal
     * que ya se ve bien.
     */
    .areas-orbit__tabs {
        display: flex !important;
        gap: 10px !important;

        width: 100% !important;

        padding:
            2px
            11px
            7px !important;

        overflow-x: auto !important;

        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 11px;
    }

    .areas-orbit__tab {
        flex:
            0
            0
            min(235px, 80vw) !important;

        width: min(235px, 80vw) !important;
        min-width: min(235px, 80vw) !important;

        padding:
            10px
            50px
            9px
            18px !important;

        scroll-snap-align: center !important;
    }

    /*
     * También subimos la silueta en teléfono.
     */
}
/* =========================================================
   AJUSTES RESPONSIVE · MAPAS Y TARJETAS DE FONDO
========================================================= */

/* 1. SUBIR LAS SILUETAS EN TABLET */
@media (min-width: 621px) and (max-width: 1020px) {

    .areas-orbit-card::before {
        top: 38px !important;
        right: -4px !important;
        bottom: auto !important;

        width: 138px !important;
        height: 100px !important;

        background-position: center top !important;
    }
}

/* 2. SUBIR LAS SILUETAS EN CELULAR */
@media (max-width: 620px) {

    .areas-orbit-card::before {
        top: 34px !important;
        right: -6px !important;
        bottom: auto !important;

        width: 128px !important;
        height: 92px !important;

        background-position: center top !important;
    }
}

/* 3. MOSTRAR LAS TARJETAS LATERALES EN PANTALLAS COMO 608px */
@media (min-width: 521px) and (max-width: 620px) {

    .areas-orbit-card[data-orbit-slot="-1"] {
        opacity: 0.48 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translate(-50%, -50%)
            translate3d(-42vw, 36px, 0)
            scale(0.78) !important;
    }

    .areas-orbit-card[data-orbit-slot="1"] {
        opacity: 0.48 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translate(-50%, -50%)
            translate3d(42vw, 36px, 0)
            scale(0.78) !important;
    }
}
/* =========================================================
   SECCIÓN 3 · COBERTURA PERSONALIZADA
========================================================= */

.areas-custom-coverage {
    position: relative;

    width: 100%;
    min-height: calc(100vh - var(--areas-header-height));
    min-height: calc(100dvh - var(--areas-header-height));

    display: flex;
    align-items: center;

    padding:
        calc(var(--areas-header-height) + 20px)
        0
        28px;

    overflow: hidden;
    scroll-margin-top: var(--areas-header-height);

    background:
        radial-gradient(
            circle at 7% 16%,
            rgba(29, 147, 239, 0.10),
            transparent 25rem
        ),
        radial-gradient(
            circle at 94% 84%,
            rgba(50, 190, 255, 0.13),
            transparent 28rem
        ),
        linear-gradient(
            145deg,
            #f9fcff 0%,
            #eef7fd 54%,
            #e8f4fb 100%
        );
}

.areas-custom-coverage__decoration {
    position: absolute;

    border-radius: 50%;
    pointer-events: none;
}

.areas-custom-coverage__decoration--left {
    width: 360px;
    height: 360px;

    left: -245px;
    top: 72px;

    border: 1px solid rgba(23, 143, 241, 0.09);
}

.areas-custom-coverage__decoration--right {
    width: 500px;
    height: 500px;

    right: -315px;
    bottom: -275px;

    border: 1px solid rgba(23, 143, 241, 0.11);
}

.areas-custom-coverage__container {
    position: relative;
    z-index: 2;

    width: min(1240px, calc(100% - 72px));
    margin-inline: auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(350px, 0.92fr);
    align-items: center;
    gap: clamp(54px, 7vw, 100px);
}

/* =========================================================
   TEXTO PRINCIPAL
========================================================= */

.areas-custom-coverage__content {
    min-width: 0;
}

.areas-custom-coverage__heading {
    max-width: 690px;
}

.areas-custom-coverage__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 12px;

    color: #0876c8;

    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.areas-custom-coverage__eyebrow > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #2bd48b;

    box-shadow:
        0 0 0 6px rgba(43, 212, 139, 0.11);
}

.areas-custom-coverage__heading h2 {
    max-width: 660px;
    margin: 0;

    color: #061a2a;

    font-size: clamp(2.5rem, 4.25vw, 4.6rem);
    font-weight: 950;
    line-height: 0.96;
    letter-spacing: -0.052em;
}

.areas-custom-coverage__intro {
    max-width: 650px;
    margin: 20px 0 0;

    color: #5b7282;

    font-size: clamp(0.9rem, 1.05vw, 1.04rem);
    line-height: 1.6;
}

/* =========================================================
   PASOS Y LÍNEA
========================================================= */

.areas-custom-coverage__steps {
    position: relative;

    max-width: 680px;
    margin-top: 28px;

    display: grid;
    gap: 11px;
}

.areas-custom-coverage__timeline-line {
    position: absolute;
    z-index: 0;

    left: 24px;
    top: 29px;
    bottom: 29px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            rgba(16, 135, 218, 0.18),
            rgba(16, 135, 218, 0.62),
            rgba(16, 135, 218, 0.18)
        );

    transform-origin: top center;
}

.areas-custom-coverage__step {
    position: relative;
    z-index: 1;

    min-width: 0;

    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 15px;

    padding:
        13px
        17px
        13px
        0;

    border: 1px solid transparent;
    border-radius: 15px;

    transition:
        transform 190ms ease,
        border-color 190ms ease,
        background-color 190ms ease,
        box-shadow 190ms ease;
}

.areas-custom-coverage__step:hover {
    transform: translateX(5px);

    border-color: rgba(16, 127, 207, 0.10);
    background: rgba(255, 255, 255, 0.60);

    box-shadow:
        0 10px 25px rgba(6, 45, 70, 0.055);
}

.areas-custom-coverage__step-number {
    width: 50px;
    height: 50px;

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

    border: 1px solid rgba(12, 124, 207, 0.14);
    border-radius: 15px;

    color: #087bcf;
    background: rgba(255, 255, 255, 0.93);

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

    box-shadow:
        0 9px 20px rgba(8, 66, 102, 0.07);
}

.areas-custom-coverage__step h3 {
    margin: 0;

    color: #102f45;

    font-size: 0.94rem;
    font-weight: 950;
    line-height: 1.2;
}

.areas-custom-coverage__step p {
    margin: 4px 0 0;

    color: #617888;

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

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

.areas-custom-coverage__actions {
    margin-top: 28px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.areas-custom-coverage__button {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding:
        10px
        19px;

    border: 1px solid transparent;
    border-radius: 11px;

    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;

    box-shadow:
        0 11px 23px rgba(5, 38, 61, 0.09);

    will-change: transform;

    transition:
        transform 190ms ease,
        color 190ms ease,
        border-color 190ms ease,
        background-color 190ms ease,
        box-shadow 190ms ease;
}

.areas-custom-coverage__button:hover,
.areas-custom-coverage__button:focus-visible {
    transform: translateY(-3px);
}

.areas-custom-coverage__button:active {
    transform: translateY(0) scale(0.985);
}

.areas-custom-coverage__button--primary {
    color: #ffffff;
    border-color: #111111;
    background: #111111;
}

.areas-custom-coverage__button--primary:hover,
.areas-custom-coverage__button--primary:focus-visible {
    background: #050505;

    box-shadow:
        0 16px 30px rgba(5, 5, 5, 0.18);
}

.areas-custom-coverage__button--secondary {
    color: #132f43;
    border-color: rgba(13, 63, 96, 0.14);
    background: rgba(255, 255, 255, 0.92);
}

.areas-custom-coverage__button--secondary:hover,
.areas-custom-coverage__button--secondary:focus-visible {
    border-color: rgba(10, 112, 190, 0.25);
    background: #ffffff;

    box-shadow:
        0 16px 30px rgba(7, 56, 87, 0.12);
}

/* =========================================================
   TARJETA DERECHA
========================================================= */

.areas-custom-coverage__card {
    position: relative;

    min-width: 0;
    min-height: 500px;

    display: flex;
    flex-direction: column;

    padding: clamp(27px, 3vw, 39px);

    overflow: hidden;

    border: 1px solid rgba(103, 211, 255, 0.18);
    border-radius: 28px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(76, 199, 255, 0.31),
            transparent 13rem
        ),
        linear-gradient(
            145deg,
            #041b2c 0%,
            #053751 55%,
            #0872a8 100%
        );

    box-shadow:
        0 32px 65px rgba(4, 37, 58, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    isolation: isolate;
}

.areas-custom-coverage__card::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: -74px;
    bottom: -68px;

    width: 285px;
    height: 285px;

    border: 1px solid rgba(114, 211, 255, 0.13);
    border-radius: 50%;
}

.areas-custom-coverage__card-glow {
    position: absolute;
    z-index: -1;

    left: -90px;
    bottom: -105px;

    width: 270px;
    height: 270px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(36, 165, 225, 0.20),
            transparent 68%
        );
}

.areas-custom-coverage__card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.areas-custom-coverage__card-icon {
    width: 52px;
    height: 52px;

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

    border: 1px solid rgba(117, 215, 255, 0.19);
    border-radius: 16px;

    color: #85ddff;
    background: rgba(83, 197, 249, 0.11);
}

.areas-custom-coverage__card-label {
    color: #76d8ff;

    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.areas-custom-coverage__card > h3 {
    max-width: 470px;
    margin: 25px 0 0;

    color: #ffffff;

    font-size: clamp(1.65rem, 2.55vw, 2.55rem);
    font-weight: 950;
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.areas-custom-coverage__card-description {
    max-width: 480px;
    margin: 14px 0 0;

    color: rgba(226, 241, 249, 0.73);

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

.areas-custom-coverage__card-options {
    margin-top: 26px;

    display: grid;
    gap: 12px;
}

.areas-custom-coverage__option {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 13px;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;

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

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

    transition:
        transform 190ms ease,
        border-color 190ms ease,
        background-color 190ms ease;
}

.areas-custom-coverage__option:hover {
    transform: translateY(-3px);

    border-color: rgba(126, 220, 255, 0.21);
    background: rgba(255, 255, 255, 0.105);
}

.areas-custom-coverage__option-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 13px;

    color: #071f2f;
    background: #77e6b3;

    font-size: 0.85rem;
    font-weight: 950;
}

.areas-custom-coverage__option-icon--distance {
    color: #ffffff;
    background: rgba(81, 194, 246, 0.20);
}

.areas-custom-coverage__option h4 {
    margin: 1px 0 0;

    color: #ffffff;

    font-size: 0.84rem;
    font-weight: 950;
}

.areas-custom-coverage__option p {
    margin: 5px 0 0;

    color: rgba(225, 241, 249, 0.69);

    font-size: 0.7rem;
    line-height: 1.43;
}

.areas-custom-coverage__card-note {
    margin-top: auto;

    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    padding-top: 21px;
}

.areas-custom-coverage__card-note > span {
    width: 29px;
    height: 29px;

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

    border-radius: 50%;

    color: #78d9ff;
    background: rgba(84, 199, 250, 0.13);

    font-size: 0.69rem;
    font-weight: 950;
}

.areas-custom-coverage__card-note p {
    margin: 0;

    color: rgba(225, 241, 249, 0.64);

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

/* =========================================================
   LAPTOPS CON ALTURA REDUCIDA
========================================================= */

@media (min-width: 901px) and (max-height: 820px) {
    .areas-custom-coverage {
        padding:
            calc(var(--areas-header-height) + 8px)
            0
            12px;
    }

    .areas-custom-coverage__container {
        gap: 55px;
    }

    .areas-custom-coverage__eyebrow {
        margin-bottom: 8px;
    }

    .areas-custom-coverage__heading h2 {
        font-size: clamp(2.15rem, 3.6vw, 3.65rem);
    }

    .areas-custom-coverage__intro {
        margin-top: 13px;
        font-size: 0.84rem;
        line-height: 1.45;
    }

    .areas-custom-coverage__steps {
        margin-top: 18px;
        gap: 5px;
    }

    .areas-custom-coverage__step {
        padding-block: 9px;
    }

    .areas-custom-coverage__step-number {
        width: 44px;
        height: 44px;
    }

    .areas-custom-coverage__timeline-line {
        left: 21px;
    }

    .areas-custom-coverage__actions {
        margin-top: 18px;
    }

    .areas-custom-coverage__card {
        min-height: 410px;
        padding: 25px;
    }

    .areas-custom-coverage__card > h3 {
        margin-top: 18px;
        font-size: clamp(1.45rem, 2.2vw, 2.1rem);
    }

    .areas-custom-coverage__card-description {
        margin-top: 9px;
    }

    .areas-custom-coverage__card-options {
        margin-top: 18px;
        gap: 9px;
    }

    .areas-custom-coverage__option {
        padding: 12px;
    }

    .areas-custom-coverage__card-note {
        padding-top: 14px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
    .areas-custom-coverage {
        min-height: auto;

        padding:
            calc(var(--areas-header-height) + 24px)
            0
            58px;
    }

    .areas-custom-coverage__container {
        width: min(740px, calc(100% - 30px));

        grid-template-columns: 1fr;
        gap: 42px;
    }

    .areas-custom-coverage__heading {
        max-width: 720px;
    }

    .areas-custom-coverage__heading h2 {
        max-width: 720px;
    }

    .areas-custom-coverage__steps {
        max-width: 720px;
    }

    .areas-custom-coverage__card {
        min-height: 0;
    }
}

/* =========================================================
   TELÉFONO
========================================================= */

@media (max-width: 620px) {
    .areas-custom-coverage {
        padding:
            calc(var(--areas-header-height) + 20px)
            0
            44px;
    }

    .areas-custom-coverage__container {
        width: calc(100% - 22px);
        gap: 32px;
    }

    .areas-custom-coverage__eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.14em;
    }

    .areas-custom-coverage__heading h2 {
        font-size: clamp(2.05rem, 10.5vw, 3rem);
    }

    .areas-custom-coverage__intro {
        margin-top: 15px;
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .areas-custom-coverage__steps {
        margin-top: 22px;
    }

    .areas-custom-coverage__step {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;

        padding-right: 7px;
    }

    .areas-custom-coverage__step-number {
        width: 46px;
        height: 46px;

        border-radius: 14px;
    }

    .areas-custom-coverage__timeline-line {
        left: 22px;
    }

    .areas-custom-coverage__step h3 {
        font-size: 0.86rem;
    }

    .areas-custom-coverage__step p {
        font-size: 0.7rem;
    }

    .areas-custom-coverage__actions {
        flex-direction: column;

        margin-top: 22px;
    }

    .areas-custom-coverage__button {
        width: 100%;
        min-height: 47px;
    }

    .areas-custom-coverage__card {
        padding: 22px;
        border-radius: 22px;
    }

    .areas-custom-coverage__card > h3 {
        font-size: clamp(1.65rem, 8vw, 2.25rem);
    }

    .areas-custom-coverage__card-description {
        font-size: 0.76rem;
    }

    .areas-custom-coverage__option {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;

        padding: 13px;
    }

    .areas-custom-coverage__option-icon {
        width: 38px;
        height: 38px;
    }
}

/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .areas-custom-coverage__step,
    .areas-custom-coverage__button,
    .areas-custom-coverage__option {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}
/* =========================================================
   CIERRE FINAL · CTA Y FOOTER
========================================================= */

/* =========================================================
   CTA COMPACTO
========================================================= */

.areas-final-cta {
    position: relative;

    width: 100%;

    padding:
        34px
        0;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(54, 194, 255, 0.22),
            transparent 19rem
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(63, 230, 173, 0.14),
            transparent 17rem
        ),
        linear-gradient(
            125deg,
            #031827 0%,
            #063a57 56%,
            #0878ad 100%
        );

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

.areas-final-cta::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -180px;
    top: -225px;

    border:
        1px solid
        rgba(130, 220, 255, 0.13);
    border-radius: 50%;

    pointer-events: none;
}

.areas-final-cta__container {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 72px)
        );

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
}

.areas-final-cta__content {
    max-width: 720px;
}

.areas-final-cta__eyebrow {
    margin: 0 0 8px;

    color: #7ee7ff;

    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.areas-final-cta h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            1.8rem,
            3.3vw,
            3.15rem
        );

    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.045em;
}

.areas-final-cta__content > p:last-child {
    max-width: 690px;

    margin: 12px 0 0;

    color:
        rgba(
            230,
            244,
            251,
            0.73
        );

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

.areas-final-cta__actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 11px;
}

.areas-final-cta__button {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding:
        10px
        18px;

    border:
        1px solid
        transparent;
    border-radius: 11px;

    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;

    transition:
        transform 190ms ease,
        border-color 190ms ease,
        background-color 190ms ease,
        box-shadow 190ms ease;
}

.areas-final-cta__button:hover,
.areas-final-cta__button:focus-visible {
    transform: translateY(-3px);
}

.areas-final-cta__button:active {
    transform:
        translateY(0)
        scale(0.985);
}

.areas-final-cta__button--primary {
    color: #071927;
    background: #ffffff;

    box-shadow:
        0 12px 27px
        rgba(0, 0, 0, 0.17);
}

.areas-final-cta__button--primary:hover,
.areas-final-cta__button--primary:focus-visible {
    background: #f4fbff;

    box-shadow:
        0 17px 32px
        rgba(0, 0, 0, 0.22);
}

.areas-final-cta__button--secondary {
    color: #ffffff;

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

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
}

.areas-final-cta__button--secondary:hover,
.areas-final-cta__button--secondary:focus-visible {
    border-color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .areas-final-cta__container {
        width:
            min(
                740px,
                calc(100% - 30px)
            );

        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

}

/* =========================================================
   TELÉFONO
========================================================= */

@media (max-width: 620px) {

    .areas-final-cta {
        padding:
            30px
            0;
    }

    .areas-final-cta__container {
        width:
            calc(
                100% - 22px
            );
    }

    .areas-final-cta h2 {
        font-size:
            clamp(
                1.75rem,
                9vw,
                2.45rem
            );
    }

    .areas-final-cta__actions {
        width: 100%;

        flex-direction: column;
    }

    .areas-final-cta__button {
        width: 100%;
        min-height: 47px;
    }

}

/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .areas-final-cta__button {
        transition: none !important;
        transform: none !important;
    }

}

/* PATCH 05 - MOBILE CONTENT CENTERING - AREAS */
@media (max-width: 620px) {
    .areas-hero__content {
        margin-inline: auto;
        text-align: center;
    }

    .areas-hero__eyebrow,
    .areas-hero__actions {
        justify-content: center;
    }

    .areas-hero__description {
        margin-inline: auto;
    }

    .areas-hero__benefit {
        justify-content: center;
    }

    .areas-orbit__header,
    .areas-orbit__status {
        text-align: center !important;
    }

    .areas-orbit__header > p:last-child,
    .areas-orbit__status,
    .areas-orbit__search {
        margin-inline: auto;
    }

    .areas-custom-coverage__heading,
    .areas-custom-coverage__card {
        margin-inline: auto;
        text-align: center;
    }

    .areas-custom-coverage__intro {
        margin-inline: auto;
    }

    .areas-custom-coverage__actions {
        align-items: center !important;
    }

    .areas-custom-coverage__button {
        margin-inline: auto;
    }

    .areas-final-cta__container {
        align-items: center !important;
        text-align: center;
    }

    .areas-final-cta__actions {
        align-items: center !important;
    }
}


/* =========================================================
   ULTRA WASH · SERVICE AREAS · FONDOS FOTOGRÁFICOS
   - Tarjetas principales con una fotografía por región.
   - La segunda sección cambia de fotografía según la región.
========================================================= */

/* Tarjetas de la primera sección */
.areas-page .areas-region-card {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow:
        0 24px 42px rgba(0, 14, 27, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.areas-page .areas-region-card--virginia {
    background-image:
        linear-gradient(
            135deg,
            rgba(3, 18, 31, 0.72) 0%,
            rgba(4, 34, 55, 0.54) 58%,
            rgba(3, 18, 31, 0.76) 100%
        ),
        url("../assets/areas/photos/virginia.jpg");
    background-position: center 52%;
}

.areas-page .areas-region-card--maryland {
    background-image:
        linear-gradient(
            135deg,
            rgba(3, 18, 31, 0.72) 0%,
            rgba(4, 34, 55, 0.52) 58%,
            rgba(3, 18, 31, 0.76) 100%
        ),
        url("../assets/areas/photos/maryland.jpg");
    background-position: center 55%;
}

.areas-page .areas-region-card--dc {
    background-image:
        linear-gradient(
            135deg,
            rgba(3, 18, 31, 0.70) 0%,
            rgba(4, 34, 55, 0.50) 56%,
            rgba(3, 18, 31, 0.76) 100%
        ),
        url("../assets/areas/photos/washington-dc.jpg");
    background-position: center 48%;
}

.areas-page .areas-region-card::before {
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.11),
            transparent 36%,
            rgba(2, 16, 28, 0.16) 100%
        );
}

.areas-page .areas-region-card__content {
    width: 100%;
    max-width: 170px;
}

.areas-page .areas-region-card__map {
    display: none;
}

.areas-page .areas-region-card__icon {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.areas-page .areas-region-card p {
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
}

.areas-page .areas-region-card a {
    color: #9adeff;
}

.areas-page .areas-region-card a:hover,
.areas-page .areas-region-card a:focus-visible {
    color: #ffffff;
}

/* Fondo dinámico de la segunda sección */
.areas-page .areas-orbit {
    isolation: isolate;
    background:
        linear-gradient(
            145deg,
            #eef7fd 0%,
            #e8f4fb 100%
        );
}

.areas-page .areas-orbit__backdrops {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.areas-page .areas-orbit__backdrop {
    position: absolute;
    inset: -2%;
    opacity: 0;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    transform: scale(1.035);
    transition:
        opacity 620ms ease,
        transform 1100ms cubic-bezier(0.22, 0.8, 0.22, 1);
    will-change: opacity, transform;
}

.areas-page .areas-orbit__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(247, 252, 255, 0.78) 0%,
            rgba(238, 248, 254, 0.73) 44%,
            rgba(229, 243, 252, 0.82) 100%
        ),
        radial-gradient(
            circle at 50% 36%,
            rgba(255, 255, 255, 0.10),
            rgba(224, 242, 253, 0.22)
        );
}

.areas-page .areas-orbit__backdrop.is-active {
    opacity: 1;
    transform: scale(1);
}

.areas-page .areas-orbit__backdrop[data-orbit-backdrop="virginia"] {
    background-image: url("../assets/areas/photos/virginia.jpg");
    background-position: center 54%;
}

.areas-page .areas-orbit__backdrop[data-orbit-backdrop="maryland"] {
    background-image: url("../assets/areas/photos/maryland.jpg");
    background-position: center 54%;
}

.areas-page .areas-orbit__backdrop[data-orbit-backdrop="dc"] {
    background-image: url("../assets/areas/photos/washington-dc.jpg");
    background-position: center 50%;
}

.areas-page .areas-orbit__decoration {
    z-index: 1;
}

.areas-page .areas-orbit__container {
    z-index: 2;
}

@media (max-width: 700px) {
    .areas-page .areas-region-card__content {
        max-width: 100%;
    }

    .areas-page .areas-orbit__backdrop {
        inset: 0;
    }

    .areas-page .areas-orbit__backdrop[data-orbit-backdrop="virginia"],
    .areas-page .areas-orbit__backdrop[data-orbit-backdrop="maryland"],
    .areas-page .areas-orbit__backdrop[data-orbit-backdrop="dc"] {
        background-position: center center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .areas-page .areas-orbit__backdrop {
        transition: none;
        transform: none;
    }
}

/* =========================================================
   SERVICE AREAS - FONDO FOTOGRAFICO GLASS GRADIENT
   Blur superior que desaparece gradualmente hacia la mitad.
========================================================= */

.areas-page .areas-orbit__backdrop::after {
    background:
        linear-gradient(
            180deg,
            rgba(224, 241, 251, 0.28) 0%,
            rgba(218, 238, 250, 0.18) 20%,
            rgba(211, 234, 248, 0.09) 36%,
            rgba(205, 231, 247, 0.03) 48%,
            rgba(205, 231, 247, 0) 58%
        );
}

.areas-page .areas-orbit__backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(235, 247, 253, 0.12) 0%,
            rgba(225, 242, 251, 0.07) 32%,
            rgba(225, 242, 251, 0) 58%
        );

    backdrop-filter:
        blur(6px)
        saturate(0.95);

    -webkit-backdrop-filter:
        blur(6px)
        saturate(0.95);

    -webkit-mask-image:
        linear-gradient(
            180deg,
            #000 0%,
            rgba(0, 0, 0, 0.92) 22%,
            rgba(0, 0, 0, 0.55) 40%,
            rgba(0, 0, 0, 0.12) 52%,
            transparent 60%
        );

    mask-image:
        linear-gradient(
            180deg,
            #000 0%,
            rgba(0, 0, 0, 0.92) 22%,
            rgba(0, 0, 0, 0.55) 40%,
            rgba(0, 0, 0, 0.12) 52%,
            transparent 60%
        );
}

/* =========================================================
   SERVICE AREAS · TEXTO ADAPTATIVO SEGÚN LA FOTOGRAFÍA
========================================================= */

/* Transición suave cuando cambia la región */
.areas-orbit__eyebrow,
.areas-orbit__header h2,
.areas-orbit__header > p:last-child,
.areas-orbit__status {
    transition:
        color 0.35s ease,
        text-shadow 0.35s ease;
}


/* =========================================================
   VIRGINIA
========================================================= */

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="virginia"].is-active
)
.areas-orbit__eyebrow {
    color: #0089dc;
    text-shadow:
        0 1px 6px rgba(255, 255, 255, 0.55);
}

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="virginia"].is-active
)
.areas-orbit__header h2 {
    color: #061a2a;
    text-shadow:
        0 2px 10px rgba(255, 255, 255, 0.42);
}

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="virginia"].is-active
)
.areas-orbit__header > p:last-child {
    color: #16384d;
    text-shadow:
        0 1px 7px rgba(255, 255, 255, 0.55);
}

/* Esta línea cae sobre la parte oscura del lago/ciudad */
.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="virginia"].is-active
)
.areas-orbit__status {
    color: #ffffff !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.75),
        0 0 14px rgba(0, 0, 0, 0.38);
}


/* =========================================================
   MARYLAND
========================================================= */

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="maryland"].is-active
)
.areas-orbit__eyebrow {
    color: #006eb8;

    text-shadow:
        0 1px 6px rgba(255, 255, 255, 0.72);
}

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="maryland"].is-active
)
.areas-orbit__header h2 {
    color: #041a2a;

    text-shadow:
        0 2px 10px rgba(255, 255, 255, 0.56);
}

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="maryland"].is-active
)
.areas-orbit__header > p:last-child {
    color: #10374f;

    text-shadow:
        0 1px 7px rgba(255, 255, 255, 0.70);
}

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="maryland"].is-active
)
.areas-orbit__status {
    color: #ffffff !important;

    text-shadow:
        0 2px 5px rgba(0, 24, 42, 0.88),
        0 0 13px rgba(0, 24, 42, 0.55);
}


/* =========================================================
   WASHINGTON D.C.
========================================================= */

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="dc"].is-active
)
.areas-orbit__eyebrow {
    color: #006fb8;

    text-shadow:
        0 1px 6px rgba(255, 255, 255, 0.72);
}

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="dc"].is-active
)
.areas-orbit__header h2 {
    color: #051b2b;

    text-shadow:
        0 2px 10px rgba(255, 255, 255, 0.65);
}

.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="dc"].is-active
)
.areas-orbit__header > p:last-child {
    color: #15394f;

    text-shadow:
        0 1px 7px rgba(255, 255, 255, 0.72);
}

/* Aquí el fondo es el Capitolio claro, por eso usamos oscuro */
.areas-orbit:has(
    .areas-orbit__backdrop[data-orbit-backdrop="dc"].is-active
)
.areas-orbit__status {
    color: #061a2a !important;

    text-shadow:
        0 1px 5px rgba(255, 255, 255, 0.85),
        0 0 12px rgba(255, 255, 255, 0.60);
}