/* SEGTECH. Tokens de docs/DISENO.md. Plus Jakarta Sans autoalojada (OFL). */

/* Métricas de fontpie para que el cambio a Plus Jakarta Sans no mueva el texto. */
@font-face {
    font-family: "Plus Jakarta Sans Fallback";
    font-style: normal;
    font-weight: 400;
    src: local("Arial");
    ascent-override: 98.16%;
    descent-override: 20.99%;
    line-gap-override: 0%;
    size-adjust: 105.75%;
}

@font-face {
    font-family: "Plus Jakarta Sans Fallback";
    font-style: normal;
    font-weight: 600;
    src: local("Arial Bold");
    ascent-override: 103.78%;
    descent-override: 22.19%;
    line-gap-override: 0%;
    size-adjust: 100.02%;
}

@font-face {
    font-family: "Plus Jakarta Sans Fallback";
    font-style: normal;
    font-weight: 700;
    src: local("Arial Bold");
    ascent-override: 102.63%;
    descent-override: 21.95%;
    line-gap-override: 0%;
    size-adjust: 101.14%;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy: #001930;
    --teal: #008c89;
    --teal-dark: #007a77;
    --teal-darker: #00615f;
    --teal-soft: #e7f3f2;
    --bg: #fbfaf7;
    --bg-alt: #f4efe7;
    --surface: #ffffff;
    --line: #e6e0d6;
    --text: #172033;
    --muted: #5a6372;
    --danger: #8d1d2c;
    --danger-bg: #fdecee;
    --r: 16px;
    --r-sm: 12px;
    --shadow: 0 1px 2px rgb(23 32 51 / .04), 0 8px 24px rgb(23 32 51 / .05);
    --max: 72rem;
    --gutter: clamp(1rem, 4vw, 2rem);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

main {
    flex: 1 0 auto;
    min-width: 0;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--teal-dark);
}

h1,
h2,
h3 {
    color: var(--navy);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.6em;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}

h3 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 1em;
}

.wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.narrow {
    max-width: 46rem;
}

.eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin-bottom: 0.75rem;
}

.lead {
    font-size: 1.125rem;
    color: var(--muted);
    max-width: 40rem;
}

.ic {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.wa-ic {
    width: 20px;
    height: 20px;
    flex: none;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 55%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

.skip {
    position: absolute;
    left: 1rem;
    top: 0;
    transform: translateY(-120%);
    z-index: 80;
    background: var(--surface);
    color: var(--navy);
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-weight: 600;
}

.skip:focus {
    transform: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.975rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn .ic,
.btn .wa-ic {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: var(--teal-dark);
    color: #fff;
    box-shadow: 0 1px 2px rgb(0 97 95 / .25);
}

.btn-primary:hover {
    background: var(--teal-darker);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgb(0 97 95 / .22);
}

.btn-secondary {
    background: var(--surface);
    color: var(--navy);
    border-color: var(--line);
}

.btn-secondary:hover {
    border-color: var(--teal);
    color: var(--teal-dark);
}

.btn-soft {
    background: var(--teal-soft);
    color: var(--teal-dark);
}

.btn-soft:hover {
    background: #d6ecea;
    color: var(--teal-dark);
}

.btn-glass {
    background: rgb(255 255 255 / .12);
    color: #fff;
    border-color: rgb(255 255 255 / .55);
    backdrop-filter: blur(6px);
}

.btn-glass:hover {
    background: rgb(255 255 255 / .22);
    color: #fff;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--teal-dark);
}

.link-arrow .ic {
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}

.link-arrow:hover .ic {
    transform: translateX(3px);
}

.link-arrow.light {
    color: #fff;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Header fijo */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / .92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
}

.header .wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 72px;
}

.logo img {
    height: 34px;
    width: auto;
}

.nav {
    display: none;
    margin-inline: auto;
}

.nav > ul {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav > ul > li > a,
.nav > ul > li > button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.nav > ul > li > a:hover,
.nav > ul > li > button:hover,
.nav > ul > li > a[aria-current="page"],
.mega-toggle[aria-expanded="true"] {
    background: var(--bg-alt);
    color: var(--navy);
}

.nav > ul > li > button .ic {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.mega-toggle[aria-expanded="true"] .ic {
    transform: rotate(180deg);
}

.has-mega {
    position: static;
}

.mega {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translate(-50%, 6px);
    width: min(72rem, calc(100% - 2 * var(--gutter)));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(var(--r) + 4px);
    box-shadow: 0 24px 60px rgb(23 32 51 / .14);
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 18rem;
    gap: 1.5rem 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.mega.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 1.5rem;
    align-content: start;
}

.mega-cat,
.sheet-cat {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.mega ul,
.sheet-sol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.mega ul a,
.sheet-sol ul a {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.7rem 0.75rem;
    margin-inline: -0.75rem;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: inherit;
    font-weight: 400;
    background: none;
    transition: background 0.2s;
}

.mega ul a:hover,
.mega ul a:focus-visible,
.sheet-sol ul a:hover,
.sheet-sol ul a:focus-visible,
.sheet-sol ul a:active {
    background: var(--bg-alt);
}

.mega ul a:hover .tile,
.mega ul a:focus-visible .tile,
.sheet-sol ul a:hover .tile,
.sheet-sol ul a:focus-visible .tile,
.sheet-sol ul a:active .tile {
    background: var(--teal-dark);
    color: #fff;
}

.tile {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--teal-soft);
    color: var(--teal-dark);
    display: grid;
    place-items: center;
    flex: none;
    transition: background 0.2s, color 0.2s;
}

.tile .ic {
    width: 22px;
    height: 22px;
}

.mega strong,
.sheet-sol strong {
    display: block;
    color: var(--navy);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.35;
}

.mega small,
.sheet-sol small {
    display: block;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.45;
    margin-top: 0.15rem;
}

.help-card {
    background: var(--teal-dark);
    color: #fff;
    border-radius: var(--r);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.help-card > .ic {
    width: 30px;
    height: 30px;
    color: #bfe8e5;
}

.help-card .help-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.help-card p {
    margin: 0;
    color: rgb(255 255 255 / .85);
    font-size: 0.95rem;
    line-height: 1.55;
}

.help-card .btn {
    margin-top: auto;
}

.btn-white {
    background: #fff;
    color: var(--teal-dark);
}

.btn-white:hover {
    background: #f0faf9;
    color: var(--teal-dark);
}

.mega-foot {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.95rem;
}

@media (max-width: 1240px) {
    .mega {
        grid-template-columns: 1fr 16rem;
        padding: 1.5rem;
    }

    .mega-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.header-cta {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.header-cta .tel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.header-cta .tel .ic {
    width: 18px;
    height: 18px;
    color: var(--teal);
}

.burger {
    margin-left: auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--navy);
    cursor: pointer;
}

@media (max-width: 1079px) {
    .header,
    .mobile-bar,
    .btn-glass,
    .arrows button {
        backdrop-filter: none;
    }
}

@media (min-width: 1080px) {
    .nav,
    .header-cta {
        display: flex;
    }

    .burger {
        display: none;
    }

    .nav {
        margin-inline: auto 0;
    }
}

.sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--bg);
    padding: 0 var(--gutter) 6rem;
    overflow: auto;
    display: none;
    overscroll-behavior: contain;
}

.sheet.open {
    display: block;
    animation: sheet-in 0.2s ease-out;
}

@keyframes sheet-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.sheet-top {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 68px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    background: rgb(251 250 247 / .95);
    border-bottom: 1px solid var(--line);
}

.sheet-top .burger {
    margin-left: 0;
}

.sheet-top img {
    height: 32px;
    width: auto;
}

.sheet nav > a,
.sheet summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
}

.sheet summary::-webkit-details-marker {
    display: none;
}

.sheet summary .ic {
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
}

.sheet details[open] summary .ic {
    transform: rotate(180deg);
}

.sheet-sol {
    display: grid;
    gap: 1.4rem;
    padding: 1.25rem 0 1.5rem;
    border-bottom: 1px solid var(--line);
}

.sheet-sol ul a {
    padding: 0.55rem 0.6rem;
}

.sheet-sol .tile {
    width: 40px;
    height: 40px;
}

.sheet-sol .help-card {
    padding: 1.25rem;
}

.sheet-sol .help-card .btn {
    width: 100%;
}

.sheet-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / .96);
    border-top: 1px solid var(--line);
}

.sheet-actions-single {
    grid-template-columns: 1fr;
}

.sheet-actions .btn {
    width: 100%;
    margin: 0;
}

/* Slider */
.hero {
    position: relative;
    background: var(--navy);
    max-width: 100%;
}

.slides {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.slides::-webkit-scrollbar {
    display: none;
}

.slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    min-height: 540px;
    min-height: clamp(520px, 74svh, 680px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
}

.slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 25 48 / .15) 0%, rgb(0 25 48 / .55) 45%, rgb(0 25 48 / .92) 100%);
}

.slide .wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: 3rem 6.5rem;
}

.slide .eyebrow {
    color: #9fe3df;
}

.slide .title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: #fff;
    max-width: 18ch;
    margin: 0 0 1rem;
}

.slide p {
    color: rgb(255 255 255 / .86);
    font-size: 1.0625rem;
    max-width: 36rem;
}

.slide .actions {
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .slide {
        align-items: center;
        min-height: clamp(540px, 82svh, 720px);
    }

    .slide::after {
        background: linear-gradient(90deg, rgb(0 25 48 / .9) 0%, rgb(0 25 48 / .65) 45%, rgb(0 25 48 / .1) 100%);
    }

    .slide p {
        font-size: 1.15rem;
    }
}

.slider-ui {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    z-index: 2;
    pointer-events: none;
}

.slider-ui .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dots,
.arrows,
.dots button,
.arrows button {
    pointer-events: auto;
}

.dots {
    display: flex;
    gap: 0.5rem;
}

.dots button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.dots button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / .5);
    transition: width 0.25s, background 0.25s;
}

.dots button[aria-current="true"]::before {
    width: 28px;
    background: #fff;
}

.arrows {
    display: none;
    gap: 0.5rem;
}

.arrows button {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / .5);
    background: rgb(255 255 255 / .08);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.arrows button:hover {
    background: rgb(255 255 255 / .2);
}

.arrows .ic {
    width: 20px;
    height: 20px;
}

@media (min-width: 768px) {
    .arrows {
        display: flex;
    }
}

@media (min-width: 900px) {
    .slider-ui {
        bottom: 5.25rem;
    }

    .slide .wrap {
        padding-bottom: 8rem;
    }
}

.trust {
    position: relative;
    z-index: 3;
    margin-top: -1px;
    background: var(--bg);
}

.trust-grid {
    display: grid;
    gap: 1rem;
    padding-block: 2rem;
}

@media (min-width: 900px) {
    .trust {
        background: transparent;
    }

    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-top: -3.25rem;
        padding-block: 0;
    }
}

.trust-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow);
    min-width: 0;
}

.trust-item h2 {
    margin: 0 0 0.2rem;
    font-size: 1.02rem;
}

.trust-item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.icon-bubble {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-dark);
    display: grid;
    place-items: center;
    flex: none;
}

.icon-bubble .ic {
    width: 22px;
    height: 22px;
}

.icon-bubble.solid {
    background: var(--teal-dark);
    color: #fff;
}

section.block {
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.block.alt {
    background: var(--bg-alt);
    overflow-x: clip;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 2rem;
    margin-bottom: 2.5rem;
}

.section-head > div {
    max-width: 40rem;
}

.section-head p {
    margin: 0;
}

.cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.card:hover {
    border-color: color-mix(in srgb, var(--teal) 55%, var(--line));
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.card h3 {
    margin: 0.25rem 0 0;
}

.card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.975rem;
    line-height: 1.55;
    flex: 1;
}

.card .tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.group + .group {
    margin-top: 2.5rem;
}

.group h2 {
    font-size: 1.35rem;
    margin-bottom: 1rem;
}

.split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: 1.05fr 1fr;
        gap: 4rem;
    }
}

.photo {
    border-radius: calc(var(--r) + 4px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--bg-alt);
    border: 1px solid var(--line);
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.steps {
    list-style: none;
    counter-reset: s;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.steps li {
    counter-increment: s;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.steps li::before {
    content: counter(s, decimal-leading-zero);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--teal-dark);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    display: grid;
    place-items: center;
}

.steps strong {
    display: block;
    color: var(--navy);
}

.steps span {
    color: var(--muted);
    font-size: 0.975rem;
}

.plans {
    display: grid;
    gap: 1rem;
}

@media (min-width: 900px) {
    .plans {
        grid-template-columns: repeat(3, 1fr);
    }
}

.plan {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.plan.featured {
    border-color: var(--teal);
    box-shadow: 0 0 0 1px var(--teal), var(--shadow);
}

.plan ul {
    list-style: none;
    margin: 0.25rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    flex: 1;
}

.plan li {
    display: flex;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.975rem;
    line-height: 1.5;
}

.plan li .ic {
    width: 18px;
    height: 18px;
    color: var(--teal);
    margin-top: 0.2rem;
}

.note {
    margin-top: 1.25rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.map-split {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 960px) {
    .map-split {
        grid-template-columns: 1.25fr 1fr;
        gap: 3.5rem;
    }
}

.map-card {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(var(--r) + 4px);
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
    min-width: 0;
}

.map-card img {
    width: 100%;
    height: auto;
}

.map-card figcaption {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted);
    text-align: right;
}

.map-wide {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.regions {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

.region-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.region-row:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
}

.region-row strong {
    display: block;
    color: var(--navy);
}

.region-row small {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.region-row > .ic {
    color: var(--teal-dark);
    width: 20px;
    height: 20px;
}

.swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--teal-dark);
}

.swatch-gto {
    background: #d9eeec;
}

.swatch-qro {
    background: #bfe2df;
}

.muni-block + .muni-block {
    margin-top: 2.5rem;
}

.muni-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    columns: 1;
}

@media (min-width: 640px) {
    .muni-list {
        columns: 2;
    }
}

@media (min-width: 1000px) {
    .muni-list {
        columns: 3;
    }
}

.muni-list li {
    break-inside: avoid;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--line);
}

.plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.plain-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--text);
}

.plain-list .ic {
    width: 18px;
    height: 18px;
    color: var(--teal);
    margin-top: 0.2rem;
}

.needs {
    padding-block: clamp(2.5rem, 6vw, 3.5rem) 0;
}

.needs-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.needs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.need {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.need .ic {
    width: 20px;
    height: 20px;
    color: var(--teal);
}

.need:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
    color: var(--teal-dark);
}

@media (max-width: 599px) {
    .needs-list {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.sectors {
    display: grid;
    gap: 1rem;
}

@media (min-width: 700px) {
    .sectors {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .sectors {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sector {
    padding: 1.5rem;
    border-top: 2px solid var(--teal);
    background: var(--surface);
    border-radius: 0 0 var(--r) var(--r);
    border-inline: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sector h3 {
    margin-bottom: 0.4rem;
}

.sector p {
    margin: 0;
    color: var(--muted);
    font-size: 0.975rem;
    line-height: 1.55;
}

.why {
    background: var(--navy);
    color: #fff;
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.why h2 {
    color: #fff;
    max-width: 22ch;
}

.why .eyebrow {
    color: #9fe3df;
}

.why .lead {
    color: rgb(255 255 255 / .78);
}

.why-list {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: rgb(255 255 255 / .12);
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: var(--r);
    overflow: hidden;
}

@media (min-width: 700px) {
    .why-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 700px) and (max-width: 1099px) {
    .why-list li:last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1100px) {
    .why-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

.why-list li {
    background: var(--navy);
    padding: 1.5rem 1.35rem;
    display: grid;
    gap: 0.4rem;
    align-content: start;
}

.why-list strong {
    color: #fff;
    font-size: 1.02rem;
}

.why-list span {
    color: rgb(255 255 255 / .72);
    font-size: 0.95rem;
    line-height: 1.55;
}

.why-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.slogan {
    margin: 0;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #9fe3df;
}

.diff {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.15rem;
}

.diff li {
    display: grid;
    gap: 0.25rem;
}

.diff span {
    color: var(--muted);
}

.closing-mark {
    font-size: 1.15rem;
    color: var(--navy);
}

.faq-wrap {
    display: grid;
    gap: 2rem;
}

@media (min-width: 960px) {
    .faq-wrap {
        grid-template-columns: 1fr 1.5fr;
        gap: 4rem;
        align-items: start;
    }
}

.faq details {
    border-bottom: 1px solid var(--line);
}

.faq details:first-child {
    border-top: 1px solid var(--line);
}

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 48px;
    padding: 1.15rem 0;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--teal-dark);
    font-weight: 500;
    transition: transform 0.2s;
}

.faq details[open] summary::after {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq summary::after {
        transition: none;
    }
}

.faq details p {
    margin: 0 0 1.15rem;
    color: var(--muted);
    max-width: 42rem;
}

.page-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 0;
}

.page-hero h1 {
    max-width: 18em;
}

.page-hero.photo-hero {
    position: relative;
    padding: 0;
    color: #fff;
    background: var(--navy);
    overflow: hidden;
}

.page-hero.photo-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.page-hero.photo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 25 48 / .95), rgb(0 25 48 / .6));
}

.page-hero.photo-hero .wrap {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 8vw, 5.5rem);
}

.page-hero.photo-hero h1 {
    color: #fff;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    max-width: 20ch;
    letter-spacing: -0.025em;
}

.page-hero.photo-hero p {
    color: rgb(255 255 255 / .85);
    max-width: 40rem;
    font-size: 1.1rem;
}

.hero-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: rgb(255 255 255 / .75);
    font-size: 0.9rem;
}

.hero-crumbs a {
    color: #9fe3df;
    text-decoration: none;
}

.hero-crumbs .ic {
    width: 14px;
    height: 14px;
}

.section-head.center {
    justify-content: center;
    text-align: center;
}

.section-head.center > div {
    margin-inline: auto;
}

.filters {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)) 1.75rem;
    padding: 0 var(--gutter) 0.25rem;
}

.filters::-webkit-scrollbar {
    display: none;
}

.filter {
    flex: none;
    min-height: 48px;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
}

.filter:hover {
    border-color: var(--teal);
}

.filter[aria-pressed="true"] {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    color: #fff;
}

.sol-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .sol-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .sol-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

a.sol-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

a.sol-card:hover {
    border-color: color-mix(in srgb, var(--teal) 55%, var(--line));
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

a.sol-card[hidden] {
    display: none;
}

.sol-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--bg-alt);
}

.sol-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sol-badge {
    position: absolute;
    left: 1.25rem;
    bottom: -24px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--teal-dark);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 4px var(--surface);
}

.sol-badge .ic {
    width: 24px;
    height: 24px;
}

.sol-body {
    padding: 2.1rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.sol-body h3 {
    margin: 0;
}

.sol-body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.sol-body .tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.sol-inc {
    list-style: none;
    margin: 0.25rem 0 0.5rem;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    flex: 1;
    align-content: start;
}

.sol-inc li {
    display: flex;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--text);
}

.sol-inc .ic {
    width: 16px;
    height: 16px;
    color: var(--teal);
    margin-top: 0.2rem;
}

.why2 {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

.why2-col {
    display: grid;
    gap: 1.25rem;
}

.why2-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.5rem;
}

.why2-item h3 {
    margin: 0.9rem 0 0.35rem;
    font-size: 1.05rem;
}

.why2-item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.why2-photo {
    border-radius: 999px 999px var(--r) var(--r);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line);
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
}

.why2-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 959px) {
    .why2-photo {
        order: -1;
        aspect-ratio: 16 / 10;
        border-radius: var(--r);
        max-width: none;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .why2-col {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 960px) {
    .why2 {
        grid-template-columns: 1fr 1.1fr 1fr;
        gap: 2rem;
    }
}

.timeline {
    list-style: none;
    counter-reset: t;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.timeline li {
    counter-increment: t;
    display: grid;
    gap: 0.3rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.timeline li::before {
    content: counter(t, decimal-leading-zero);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-dark);
    font-weight: 700;
    font-size: 0.85rem;
    display: grid;
    place-items: center;
    margin-bottom: 0.5rem;
}

.timeline strong {
    color: var(--navy);
}

.timeline span {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (min-width: 900px) {
    .timeline {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
    }
}

.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
    text-align: center;
}

.cta-band > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 25 48 / .7);
}

.cta-band .wrap {
    position: relative;
    z-index: 1;
    padding-block: clamp(3.5rem, 8vw, 5.5rem);
    display: grid;
    justify-items: center;
    gap: 0.5rem;
}

.cta-band h2 {
    color: #fff;
    margin: 0;
}

.cta-band p {
    color: rgb(255 255 255 / .85);
    max-width: 36rem;
    margin: 0;
}

.cta-band .actions {
    justify-content: center;
    margin-top: 0.75rem;
}

.faq-split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.faq-split .faq {
    margin-top: 1.5rem;
}

.photo.tall {
    aspect-ratio: 4 / 5;
}

@media (max-width: 959px) {
    .photo.tall {
        display: none;
    }
}

@media (min-width: 960px) {
    .faq-split {
        grid-template-columns: 1.3fr 1fr;
        gap: 4rem;
    }
}

.contact {
    background: var(--navy);
    color: #fff;
    border-radius: calc(var(--r) + 8px);
    padding: clamp(1.5rem, 5vw, 3.5rem);
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 960px) {
    .contact {
        grid-template-columns: 1fr 1.1fr;
        align-items: start;
    }
}

.contact h1,
.contact h2 {
    color: #fff;
}

.contact .lead {
    color: rgb(255 255 255 / .8);
}

.contact .eyebrow {
    color: #9fe3df;
}

.benefits {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    gap: 0.75rem;
}

.benefits li {
    display: flex;
    gap: 0.65rem;
    color: rgb(255 255 255 / .9);
}

.benefits .ic {
    color: #5fd0ca;
    width: 20px;
    height: 20px;
    margin-top: 0.2rem;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.form {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--r);
    padding: clamp(1.25rem, 4vw, 2rem);
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.form h3 {
    margin: 0;
    font-size: 1.25rem;
}

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

@media (min-width: 560px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .field-wide {
        grid-column: 1 / -1;
    }
}

.field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.35rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg);
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--teal);
    background: #fff;
    box-shadow: 0 0 0 3px rgb(0 140 137 / .18);
}

.optional,
.hint {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.85rem;
}

.hint {
    margin: 0.35rem 0 0;
}

.check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 400;
}

.check input {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin-top: 0.15rem;
    accent-color: var(--teal-dark);
}

.form .btn {
    width: 100%;
}

.error {
    margin: 0.35rem 0 0;
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 600;
}

.alert {
    background: var(--danger-bg);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, white);
    border-radius: var(--r-sm);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.alert p {
    margin: 0 0 0.4rem;
    color: var(--danger);
    font-weight: 600;
}

.alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.crumbs {
    padding-top: 1rem;
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.crumbs li:not(:last-child)::after {
    content: "/";
    margin: 0 0.45rem;
    color: var(--muted);
}

.crumbs a {
    text-decoration: none;
}

footer {
    background: var(--navy);
    color: rgb(255 255 255 / .75);
    margin-top: clamp(3.5rem, 8vw, 6rem);
    padding-block: 3.5rem 6.5rem;
    font-size: 0.95rem;
}

@media (min-width: 1080px) {
    footer {
        padding-bottom: 2rem;
    }
}

.foot {
    display: grid;
    gap: 2rem;
}

@media (min-width: 800px) {
    .foot {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }

    .foot-3 {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

.foot-title {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

footer a {
    color: rgb(255 255 255 / .75);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

footer a:hover {
    color: #fff;
}

.foot-logo {
    display: inline-block;
    background: #fff;
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    margin-bottom: 1rem;
}

.foot-logo img {
    height: 28px;
    width: auto;
}

.foot-slogan {
    color: #9fe3df;
    font-weight: 600;
}

.legal {
    border-top: 1px solid rgb(255 255 255 / .12);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
}

.mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / .95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
}

.mobile-bar-single {
    grid-template-columns: 1fr;
}

@media (min-width: 1080px) {
    .mobile-bar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .sheet.open {
        animation: none;
    }
}

.page-hero.photo-hero.page-hero-center .wrap {
    text-align: center;
    display: grid;
    justify-items: center;
}

.page-hero.photo-hero.page-hero-center h1 {
    max-width: 24ch;
    margin-inline: auto;
}

.page-hero.photo-hero.page-hero-center .hero-crumbs {
    justify-content: center;
    margin: 0.85rem 0 0;
}

.page-hero.photo-hero > img.parallax {
    opacity: 0.4;
    will-change: transform;
    transform: scale(1.08);
}

.detail {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 1000px) {
    .detail {
        grid-template-columns: 320px 1fr;
        gap: 3rem;
    }
}

.detail-side {
    display: grid;
    gap: 1.25rem;
    order: 2;
}

@media (min-width: 1000px) {
    .detail-side {
        order: 0;
        position: sticky;
        top: 96px;
    }
}

.side-card {
    background: var(--bg-alt);
    border-radius: var(--r);
    padding: 1.5rem;
}

.side-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.side-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.65rem 0.7rem 0.65rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.side-list .arrow {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--teal-dark);
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
    transition: transform 0.3s, background 0.25s;
}

.side-list .arrow .ic {
    width: 16px;
    height: 16px;
    transform: rotate(-45deg);
    transition: transform 0.3s;
}

.side-list a:hover,
.side-list a[aria-current="page"] {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    color: #fff;
}

.side-list a:hover .arrow,
.side-list a[aria-current="page"] .arrow {
    background: #fff;
    color: var(--teal-dark);
}

.side-list a:hover .arrow .ic,
.side-list a[aria-current="page"] .arrow .ic {
    transform: rotate(0);
}

.help-dark {
    background: var(--navy);
    color: #fff;
    border-radius: var(--r);
    padding: 1.5rem;
    display: grid;
    gap: 0.75rem;
    background-image: radial-gradient(circle at 100% 0, rgb(0 140 137 / .35), transparent 55%);
}

.help-logo {
    height: 30px;
    width: auto;
    background: #fff;
    border-radius: 8px;
    padding: 4px 8px;
    box-sizing: content-box;
}

.help-q {
    margin: 0.25rem 0;
    font-weight: 600;
}

.help-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-sm);
    background: rgb(255 255 255 / .08);
    border: 1px solid rgb(255 255 255 / .12);
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.help-line:hover {
    background: rgb(255 255 255 / .16);
}

.help-line .tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--teal-dark);
    color: #fff;
}

.help-line .tile .ic {
    width: 18px;
    height: 18px;
}

.detail-main > * + * {
    margin-top: 1.25rem;
}

.detail-main > h2,
.detail-split h2 {
    margin-top: 2.75rem;
    margin-bottom: 0;
}

.detail-split h2 {
    margin-top: 0;
}

.detail-photo {
    margin: 0;
    border-radius: calc(var(--r) + 4px);
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.detail-photo:hover img {
    transform: scale(1.04);
}

.detail-main > p,
.detail-split p,
.cover p {
    color: var(--muted);
}

.detail-main > .detail-lead {
    font-size: 1.15rem;
    color: var(--navy);
    font-weight: 500;
}

.checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.checks li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.checks .ic {
    width: 22px;
    height: 22px;
    flex: none;
    color: #fff;
    background: var(--teal-dark);
    border-radius: 999px;
    padding: 4px;
    stroke-width: 2.5;
    margin-top: 0.1rem;
}

.feat3 {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .feat3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.5rem 1.25rem;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.feat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--teal);
}

.feat h3 {
    margin: 0;
    font-size: 1rem;
}

.feat .icon-bubble {
    width: 56px;
    height: 56px;
    transition: transform 0.5s;
}

.feat:hover .icon-bubble {
    transform: rotateY(180deg);
}

.detail-split {
    display: grid;
    gap: 1.75rem;
    align-items: center;
    margin-top: 2.75rem;
}

@media (min-width: 760px) {
    .detail-split {
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem;
    }
}

.detail-split figure {
    margin: 0;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.detail-split img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-split > div > * + * {
    margin-top: 1rem;
}

.highlight {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.highlight strong {
    color: var(--navy);
    font-size: 0.98rem;
    line-height: 1.45;
}

.steps-num {
    list-style: none;
    counter-reset: n;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.steps-num li {
    counter-increment: n;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.25rem;
}

.steps-num li::before {
    content: counter(n);
    grid-row: span 2;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--teal-dark);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px var(--teal-soft);
}

.steps-num strong {
    color: var(--navy);
    align-self: center;
}

.steps-num span {
    color: var(--muted);
    font-size: 0.975rem;
}

.detail-form {
    margin-top: 3rem;
    background: var(--bg-alt);
    border-radius: calc(var(--r) + 4px);
    padding: clamp(1.25rem, 4vw, 2rem);
}

.detail-form h2 {
    margin: 0 0 0.25rem;
}

.detail-form .form {
    margin-top: 1.25rem;
}

.rel3 {
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .rel3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rel3 .card:hover {
    transform: translateY(-4px);
}

.fx .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fx .reveal.in {
    opacity: 1;
    transform: none;
}

.fx .reveal-img {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1);
}

.fx .reveal-img.in {
    clip-path: inset(0 0 0 0);
}

.fx .reveal-img img {
    transform: scale(1.15);
    transition: transform 1.4s cubic-bezier(.22, 1, .36, 1);
}

.fx .reveal-img.in img {
    transform: scale(1);
}

.reveal-words .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
}

.reveal-words .w > span {
    display: inline-block;
}

.fx .reveal-words .w > span {
    transform: translateY(105%);
    transition: transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.fx .reveal-words.in .w > span {
    transform: none;
}

.fx .detail-photo.in:hover img {
    transform: scale(1.04);
}

.detail-main > .checks,
.detail-main > .feat3,
.detail-main > .cover-grid,
.detail-main > .plans-acc,
.detail-main > .faq {
    margin-top: 1rem;
}

@media (max-width: 639px) {
    .feat {
        grid-template-columns: auto 1fr;
        justify-items: start;
        align-items: center;
        text-align: left;
        padding: 1rem 1.15rem;
    }

    .feat .icon-bubble {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 759px) {
    .detail-split figure {
        aspect-ratio: 16 / 10;
    }
}

.cover-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .cover-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.cover {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.cover:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
}

.cover:hover .tile {
    background: var(--teal-dark);
    color: #fff;
}

.cover h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.cover p {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.5;
}

.plans-acc {
    display: grid;
    gap: 0.75rem;
}

.plan-acc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0 1.25rem;
    transition: border-color 0.2s;
}

.plan-acc[open] {
    border-color: var(--teal);
    box-shadow: 0 0 0 1px var(--teal);
}

.plan-acc summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 64px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}

.plan-acc summary::-webkit-details-marker {
    display: none;
}

.plan-acc summary::after {
    content: "+";
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--teal-dark);
    font-weight: 500;
    transition: transform 0.2s;
}

.plan-acc[open] summary::after {
    transform: rotate(45deg);
}

.plan-n {
    font-size: 0.8rem;
    color: var(--teal-dark);
    background: var(--teal-soft);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.plan-acc p {
    margin: 0 0 1.15rem;
}

.detail-main > .pain-grid {
    margin-top: 1.25rem;
}

.pain-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .pain-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.pain {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.15rem;
    border-radius: var(--r);
    background: var(--bg-alt);
    border-left: 3px solid var(--teal);
}

.pain-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    color: #b4532a;
    display: grid;
    place-items: center;
    flex: none;
}

.pain-ic .ic {
    width: 20px;
    height: 20px;
}

.pain h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.pain p {
    margin: 0;
    color: var(--muted);
    font-size: 0.925rem;
    line-height: 1.5;
}

/* ===== Página Nosotros ===== */
.stats-band {
    background: var(--teal-dark);
    color: #fff;
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 860px) {
    .stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat {
    box-shadow: 0 0 0 0.5px rgb(255 255 255 / .2);
    padding: 1.75rem 1rem;
    text-align: center;
    display: grid;
    gap: 0.25rem;
    align-content: center;
}

.stat strong {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
}

.stat span {
    color: rgb(255 255 255 / .85);
    font-size: 0.92rem;
}

.history {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 52rem;
    position: relative;
    display: grid;
    gap: 1.25rem;
}

.history::before {
    content: "";
    position: absolute;
    left: 43px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(var(--teal), var(--teal-soft));
}

.history li {
    position: relative;
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.history .year {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 44px;
    border-radius: 999px;
    background: var(--teal-dark);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px var(--bg);
}

.history li > div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.15rem 1.35rem;
}

.history h3 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
}

.history p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.mvv {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .mvv {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mvv-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.75rem;
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.mvv-card h3 {
    margin: 0;
    font-size: 1.2rem;
}

.mvv-card p {
    margin: 0;
    color: var(--muted);
}

.values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.values strong {
    color: var(--navy);
}

@media (min-width: 700px) {
    .why-about .why-list {
        grid-template-columns: 1fr 1fr;
    }

    .why-about .why-list li:last-child {
        grid-column: auto;
    }
}

@media (min-width: 1100px) {
    .why-about .why-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mini-grid {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .mini-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mini {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-decoration: none;
    color: var(--navy);
    font-weight: 600;
}

.mini > .ic {
    margin-left: auto;
    width: 18px;
    height: 18px;
    color: var(--teal-dark);
}

.mini:hover {
    border-color: var(--teal);
}

.mini:hover .tile {
    background: var(--teal-dark);
    color: #fff;
}

.brands-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.brands-list li {
    padding: 0.7rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-weight: 600;
    color: var(--navy);
}

/* Panel "Soluciones" compacto: aprovecha los huecos y cabe en pantallas bajas (laptops con zoom 125-150 %).
   Va al final de public/assets/css/site.css. Supone el orden de grupos del catálogo:
   1 Seguridad electrónica · 2 Redes e infraestructura · 3 Comunicaciones · 4 Centro de datos · 5 Soporte y equipo. */
.mega {
    grid-template-columns: 1fr 15rem;
    gap: 1.25rem 1.75rem;
    padding: 1.5rem 1.75rem 1.25rem;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 3 columnas sin huecos: Seguridad + Centro de datos | Redes + Comunicaciones | Soporte y equipo (3 soluciones) */
.mega-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "seg red sop"
        "dat com sop";
    gap: 1.25rem 1.5rem;
}
.mega-group:nth-child(1) { grid-area: seg; }
.mega-group:nth-child(2) { grid-area: red; }
.mega-group:nth-child(3) { grid-area: com; }
.mega-group:nth-child(4) { grid-area: dat; }
.mega-group:nth-child(5) { grid-area: sop; }

.mega-cat { margin-bottom: .5rem; }
.mega ul { gap: .1rem; }
.mega ul a { gap: .7rem; padding: .5rem .6rem; margin-inline: -.6rem; }
.mega .tile { width: 38px; height: 38px; border-radius: 10px; }
.mega .tile .ic { width: 20px; height: 20px; }
.mega strong { font-size: .94rem; line-height: 1.3; }
.mega small { font-size: .82rem; line-height: 1.4; margin-top: .1rem; }

/* La tarjeta de ayuda ya no se estira a todo lo alto */
.mega .help-card { align-self: start; padding: 1.25rem; gap: .6rem; }
.mega .help-card > .ic { width: 26px; height: 26px; }
.mega .help-card .help-title { font-size: 1.08rem; }
.mega .help-card p { font-size: .9rem; line-height: 1.5; }
.mega .help-card .btn { margin-top: .4rem; width: 100%; }
.mega-foot { padding-top: .9rem; font-size: .9rem; }

/* Pantallas medianas: 2 columnas sin huecos */
@media (max-width: 1240px) {
    .mega { grid-template-columns: 1fr 14rem; padding: 1.25rem 1.5rem 1rem; }
    .mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "seg red"
            "dat sop"
            "com sop";
    }
}

/* Pantallas bajas: se ocultan las descripciones; el título basta */
@media (max-height: 760px) {
    .mega small { display: none; }
    .mega ul a { align-items: center; padding-block: .4rem; }
    .mega .help-card p:not(.help-title) { display: none; }
}

/* El menú móvil reutiliza .mega-group. Las áreas solo acomodan el panel de escritorio. */
.sheet-sol .mega-group {
    grid-area: auto;
}

.pgrid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .pgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1080px) {
    .pgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pcard {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.pcard:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--teal) 50%, var(--line));
}

.pcard[hidden] {
    display: none;
}

.pphoto {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--bg-alt);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: zoom-in;
    color: inherit;
}

.pphoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.pcard:hover .pphoto img {
    transform: scale(1.05);
}

.pcount {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    background: rgb(0 25 48 / 0.8);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.pzoom {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #fff;
    color: var(--teal-dark);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.25s, transform 0.25s;
}

.pzoom .ic {
    width: 18px;
    height: 18px;
    transform: rotate(-45deg);
}

.pcard:hover .pzoom,
.pphoto:focus-visible .pzoom {
    opacity: 1;
    transform: none;
}

.pbody {
    padding: 1.25rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.pbody .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-dark);
}

.pbody .tag .ic {
    width: 16px;
    height: 16px;
}

.pbody h2 {
    font-size: 1.15rem;
    margin: 0;
    letter-spacing: -0.01em;
}

.pbody p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.pbody .sol-inc {
    margin: 0;
}

.pmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
}

.pmeta span {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg);
}

.lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    width: max-content;
    max-width: min(92vw, 900px);
    max-height: 100vh;
    max-height: 100dvh;
    overflow: visible;
}

.lightbox::backdrop {
    background: rgb(0 15 30 / 0.85);
}

.lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 900px);
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    object-fit: contain;
    border-radius: var(--r);
    background: #000;
}

.lb-close,
.lb-nav {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: #fff;
    color: var(--navy);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.lb-close {
    top: 8px;
    right: 8px;
}

.lb-nav {
    top: 50%;
    transform: translateY(-50%);
}

.lb-prev {
    left: 8px;
}

.lb-next {
    right: 8px;
}

.lb-nav[hidden] {
    display: none;
}

.lb-count {
    text-align: center;
    color: #fff;
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    min-height: 1.4em;
}

.lb-count:not(:empty) {
    background: rgb(0 15 30 / 0.72);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
}

@media (min-width: 800px) {
    .lb-close {
        top: -14px;
        right: -14px;
    }

    .lb-prev {
        left: -22px;
    }

    .lb-next {
        right: -22px;
    }
}

#planes .section-head > div {
    max-width: 46rem;
}

.pt-grid {
    display: grid;
    gap: 1.25rem;
    align-items: stretch;
    padding-top: 0.85rem;
}

@media (min-width: 700px) {
    .pt-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1150px) {
    .pt-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.6rem 1.4rem;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.pt-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--teal);
}

.pt-featured {
    border-color: var(--teal-dark);
    box-shadow: 0 0 0 1px var(--teal-dark), var(--shadow);
}

.pt-featured:hover {
    border-color: var(--teal-dark);
}

.pt-badge {
    position: absolute;
    top: -12px;
    left: 1.4rem;
    background: var(--teal-dark);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}

.pt-card h3 {
    margin: 0;
    font-size: 1.15rem;
}

.pt-ideal {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.pt-price {
    margin: 0.25rem 0 0.5rem;
    padding: 0.6rem 0;
    border-block: 1px solid var(--line);
    font-weight: 700;
    color: var(--navy);
}

.pt-price strong {
    font-size: 1.35rem;
}

.pt-card ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    flex: 1;
    align-content: start;
}

.pt-card li {
    display: flex;
    gap: 0.5rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.pt-card li .ic {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--teal);
    margin-top: 0.1rem;
}

.pt-card .btn {
    width: 100%;
    margin-top: auto;
}

.pt-extra {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
}

@media (min-width: 800px) {
    .pt-extra {
        grid-template-columns: 1fr 1fr;
    }
}

.pt-extra > div {
    background: var(--bg-alt);
    border-radius: var(--r);
    padding: 1.4rem;
}

.pt-extra h3 {
    margin: 0 0 0.8rem;
    font-size: 1.02rem;
}

.pt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.pt-list li {
    display: flex;
    gap: 0.5rem;
    font-size: 0.93rem;
    color: var(--text);
}

.pt-list .ic {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--teal-dark);
    margin-top: 0.1rem;
}

.center-note {
    text-align: center;
    margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .pt-card,
    .pt-card:hover {
        transition: none;
        transform: none;
    }
}

/* Landing a ancho completo (sin barra lateral) */
.sol-nav {
    position: sticky;
    top: 72px;
    z-index: 30;
    background: rgb(255 255 255 / .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 20px rgb(10 42 107 / .06);
}

.sol-nav-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.7rem var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
}

.sol-nav-track::-webkit-scrollbar {
    display: none;
}

.sol-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--navy);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sol-nav a .ic {
    width: 18px;
    height: 18px;
    color: var(--blue, #1652F0);
}

.sol-nav a:hover {
    border-color: var(--blue, #1652F0);
}

.sol-nav a[aria-current="page"] {
    background: var(--grad-btn, #1652F0);
    border-color: transparent;
    color: #fff;
}

.sol-nav a[aria-current="page"] .ic {
    color: #fff;
}

.page-hero-center .eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.intro-split,
.incluye-split,
.quien-split,
.faq-help {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 960px) {
    .intro-split {
        grid-template-columns: 1.05fr 1fr;
        gap: 4rem;
    }

    .incluye-split {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 4rem;
    }

    .quien-split {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: start;
    }

    .faq-help {
        grid-template-columns: 1.5fr 1fr;
        gap: 3.5rem;
        align-items: start;
    }
}

.intro-split .detail-lead {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.6;
    color: var(--navy);
    font-weight: 500;
    margin: 0 0 1rem;
}

.muted {
    color: var(--muted);
}

.actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.feat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

.feat-row .feat {
    padding: 1rem 0.75rem;
}

.feat-row .feat h3 {
    font-size: 0.9rem;
}

@media (max-width: 639px) {
    .feat-row {
        grid-template-columns: 1fr;
    }
}

.intro-split .detail-photo {
    aspect-ratio: 4 / 3;
    margin: 0;
}

.pain-4 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .pain-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .pain-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pain-4 .pain {
    flex-direction: column;
    background: var(--surface);
    border-left: 0;
    border-top: 3px solid var(--blue, #1652F0);
    padding: 1.4rem;
}

.checks-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: var(--shadow);
    gap: 0.85rem;
}

.detail-split-photo {
    margin: 0;
    border-radius: calc(var(--r) + 4px);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 560px;
    width: 100%;
    box-shadow: var(--shadow-lg, var(--shadow));
}

.detail-split-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 959px) {
    .detail-split-photo {
        aspect-ratio: 16 / 10;
    }
}

.cover-4 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cover-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .cover-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cover-4 .cover {
    flex-direction: column;
}

.quien-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.quien-list li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1rem 1.15rem;
    font-weight: 600;
    color: var(--navy);
    box-shadow: var(--shadow);
}

.quien-list .ic {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 999px;
    padding: 6px;
    color: #fff;
    background: var(--grad-btn, #1652F0);
}

.timeline.t3,
.timeline.t4,
.timeline.t5 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .timeline.t3,
    .timeline.t4,
    .timeline.t5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .timeline.t3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .timeline.t4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .timeline.t5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

.help-wide {
    position: sticky;
    top: 150px;
    display: grid;
    gap: 0.65rem;
    padding: 1.6rem;
    border-radius: var(--r);
    color: #fff;
    background: var(--grad-deep, var(--navy));
    box-shadow: var(--shadow-lg, var(--shadow));
    overflow: hidden;
    isolation: isolate;
}

.help-wide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--circuit);
    background-size: 200px;
    opacity: 0.7;
}

.help-wide .help-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.help-wide .help-q {
    margin: 0 0 0.5rem;
    color: rgb(255 255 255 / .85);
    font-size: 0.95rem;
}

@media (max-width: 959px) {
    .help-wide {
        position: static;
    }
}

#cotizar,
#planes {
    scroll-margin-top: 9rem;
}


/* ==========================================================================
   SEGTECH — Tema "tech" (oct-2026)
   Capa que va DESPUÉS de los estilos base: azul más fuerte, sombras y fondos
   abstractos tecnológicos (rejilla, puntos, circuitos y brillos) en todas las secciones.
   Solo CSS: sin imágenes extra, sin JS. Respeta prefers-reduced-motion.
   ========================================================================== */
:root{
  --blue:#1652F0;          /* azul de acción: botones, enlaces fuertes */
  --blue-dark:#0B3BB5;     /* hover */
  --blue-deep:#0A2A6B;     /* fondos oscuros junto con navy */
  --blue-soft:#E8EFFF;     /* fondos de iconos */
  --grad-deep:linear-gradient(135deg,#001930 0%,#06245A 55%,#0B3BB5 100%);
  --grad-btn:linear-gradient(135deg,#1652F0 0%,#0B3BB5 100%);
  --shadow:0 1px 2px rgb(10 42 107/.06),0 10px 28px rgb(10 42 107/.10);
  --shadow-lg:0 2px 4px rgb(10 42 107/.08),0 22px 48px rgb(10 42 107/.18);
  --circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%237FB2FF' stroke-opacity='.32' stroke-width='1.2'%3E%3Cpath d='M0 40h60l20 20h60M120 0v40l20 20v60M240 120h-70l-20 20v100M40 240v-60l20-20h50M180 0v30M0 200h30l15-15h40'/%3E%3Cg fill='%237FB2FF' fill-opacity='.55' stroke='none'%3E%3Ccircle cx='140' cy='60' r='3'/%3E%3Ccircle cx='60' cy='40' r='3'/%3E%3Ccircle cx='150' cy='140' r='3'/%3E%3Ccircle cx='110' cy='160' r='3'/%3E%3Ccircle cx='180' cy='30' r='3'/%3E%3Ccircle cx='85' cy='185' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --grid-line:linear-gradient(rgb(22 82 240/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(22 82 240/.07) 1px,transparent 1px);
  --grid-line-dark:linear-gradient(rgb(127 178 255/.09) 1px,transparent 1px),linear-gradient(90deg,rgb(127 178 255/.09) 1px,transparent 1px);
  --dots:radial-gradient(rgb(22 82 240/.16) 1.2px,transparent 1.4px);
}

/* ---------- Botones y enlaces con azul ---------- */
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 6px 18px rgb(22 82 240/.35)}
.btn-primary:hover{background:var(--blue-dark);box-shadow:0 10px 26px rgb(22 82 240/.45)}
.btn-secondary{box-shadow:var(--shadow)}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue-dark)}
.link-arrow{color:var(--blue)}
.eyebrow{color:var(--blue)}
.why .eyebrow,.slide .eyebrow,.contact .eyebrow,.page-hero .eyebrow,.cta-band .eyebrow{color:#8FC2FF}
h1,h2{color:#06163A}
.header-cta .btn-primary,.mobile-bar .btn-primary{box-shadow:0 6px 18px rgb(22 82 240/.35)}
.filter[aria-pressed="true"]{background:var(--grad-btn);border-color:transparent}

/* ---------- Iconos: cuadro azul con brillo ---------- */
.icon-bubble,.tile{background:var(--blue-soft);color:var(--blue)}
.icon-bubble.solid,.sol-badge{background:var(--grad-btn);color:#fff;box-shadow:0 8px 20px rgb(22 82 240/.35)}
.card:hover .icon-bubble,.mini:hover .tile,.cover:hover .tile,.mega ul a:hover .tile,.mega ul a:focus-visible .tile{background:var(--grad-btn);color:#fff}
.checks .ic{background:var(--grad-btn)}
.steps-num li::before{background:var(--grad-btn);box-shadow:0 0 0 6px var(--blue-soft)}
.history .year{background:var(--grad-btn)}
.timeline li::before{background:var(--blue-soft);color:var(--blue)}
.sol-inc .ic,.plan li .ic,.pt-card li .ic,.pt-list .ic{color:var(--blue)}

/* ---------- Sombras en todas las tarjetas ---------- */
.card,.sol-card,.pcard,.pt-card,.trust-item,.region-row,.mvv-card,.feat,.cover,.why2-item,.timeline li,.history li>div,.map-card,.form,.plan,.region,.sector,.mini,.highlight,.pain,.need{box-shadow:var(--shadow);border-color:rgb(10 42 107/.08)}
.card:hover,.sol-card:hover,.pcard:hover,.pt-card:hover,.mvv-card:hover,.feat:hover,.cover:hover,.region-row:hover,.mini:hover,.sector:hover,.why2-item:hover{box-shadow:var(--shadow-lg);border-color:rgb(22 82 240/.35);transform:translateY(-4px)}
.pt-featured,.plan.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow-lg)}
.pt-badge{background:var(--grad-btn)}
.sector{border-top-color:var(--blue)}
.pain{border-left-color:var(--blue)}
.need:hover{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-dark)}
.need .ic{color:var(--blue)}

/* ---------- Fondos tecnológicos ---------- */
/* Secciones claras: rejilla tenue que se desvanece hacia los bordes */
section.block,.trust,.needs,.brands{position:relative;isolation:isolate}
section.block::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grid-line);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 85% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 70% 60% at 85% 0%,#000 0%,transparent 70%)}
section.block:nth-of-type(even)::before{-webkit-mask-image:radial-gradient(ellipse 70% 60% at 10% 100%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 70% 60% at 10% 100%,#000 0%,transparent 70%)}
/* Secciones alternas: puntos + brillo azul */
.block.alt{background:linear-gradient(180deg,#F3F6FD 0%,#EEF3FD 100%)}
.block.alt::before{background-image:var(--dots);background-size:22px 22px;-webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 55%);mask-image:linear-gradient(115deg,#000 0%,transparent 55%)}
.block.alt::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:520px;height:520px;right:-160px;bottom:-200px;border-radius:50%;background:radial-gradient(circle,rgb(22 82 240/.14),transparent 65%)}

/* Bloques oscuros: degradado azul + circuitos + brillo */
.why,.stats-band,.contact,footer,.page-hero,.cta-band,.hero{position:relative;isolation:isolate;overflow:hidden}
.why,footer{background:var(--grad-deep)}
.why::before,footer::before,.stats-band::before,.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--circuit);background-size:240px 240px;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent)}
.why::after,footer::after,.contact::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:640px;height:640px;left:-220px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgb(22 82 240/.45),transparent 62%)}
.why-list,.why-list li{background:rgb(255 255 255/.04)}
.why-list{border-color:rgb(127 178 255/.25);backdrop-filter:blur(4px)}
.why-list li{background:rgb(6 22 58/.55)}
.stats-band{background:var(--grad-btn)}
.stat{box-shadow:0 0 0 .5px rgb(255 255 255/.25)}
.contact{background:var(--grad-deep);box-shadow:var(--shadow-lg)}
.slogan{color:#8FC2FF}
.foot-slogan{color:#8FC2FF}

/* Encabezados de página y bandas de cotizar: foto + velo azul + rejilla + circuito */
.page-hero::after{background:linear-gradient(100deg,rgb(0 25 48/.94) 0%,rgb(6 36 90/.82) 50%,rgb(11 59 181/.55) 100%)}
.cta-band::after{background:linear-gradient(120deg,rgb(0 25 48/.9),rgb(11 59 181/.75))}
.page-hero .wrap::before,.cta-band .wrap::before{content:"";position:absolute;inset:-40px -2000px;z-index:-1;pointer-events:none;background-image:var(--grid-line-dark);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 50% 80% at 75% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 50% 80% at 75% 50%,#000,transparent 75%)}
.page-hero .wrap,.cta-band .wrap{isolation:isolate}
.page-hero .wrap::after{content:"";position:absolute;right:2%;top:50%;width:min(36vw,420px);aspect-ratio:1;transform:translateY(-50%);z-index:-1;pointer-events:none;background-image:var(--circuit);background-size:140px 140px;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%);opacity:.9}

/* Slider del inicio: velo con un toque azul y rejilla */
.slide::after{background:linear-gradient(90deg,rgb(0 25 48/.92) 0%,rgb(6 36 90/.7) 45%,rgb(11 59 181/.15) 100%)}
@media (max-width:767px){.slide::after{background:linear-gradient(180deg,rgb(0 25 48/.2) 0%,rgb(6 36 90/.6) 45%,rgb(0 25 48/.95) 100%)}}
.slide .wrap::before{content:"";position:absolute;inset:-200px -2000px;z-index:-1;pointer-events:none;background-image:var(--grid-line-dark);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 40% 60% at 30% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 40% 60% at 30% 50%,#000,transparent 75%)}
.slide .wrap{isolation:isolate}

/* Fotos con marco tecnológico: borde con brillo y esquina de circuito */
.photo,.detail-photo,.detail-split figure,.why2-photo,.map-card{position:relative;box-shadow:var(--shadow-lg)}
.photo::after,.detail-photo::after{content:"";position:absolute;right:-1px;bottom:-1px;width:120px;height:120px;background-image:var(--circuit);background-size:120px 120px;border-radius:0 0 var(--r) 0;pointer-events:none;-webkit-mask-image:linear-gradient(135deg,transparent 40%,#000);mask-image:linear-gradient(135deg,transparent 40%,#000)}

/* Header y menú */
.header{box-shadow:0 1px 0 rgb(10 42 107/.06),0 8px 24px rgb(10 42 107/.06)}
.mega{box-shadow:var(--shadow-lg)}
.help-card{background:var(--grad-deep);position:relative;overflow:hidden;isolation:isolate}
.help-card::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--circuit);background-size:180px;opacity:.6}

@media (prefers-reduced-motion:reduce){.card:hover,.sol-card:hover,.pcard:hover,.pt-card:hover{transform:none}}
.card.card-soft{background:var(--blue-soft);border-color:transparent}

/* ---------- Aviso de cookies ---------- */
.cookie-bar{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:80;width:min(56rem,calc(100% - 2rem));display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:1rem 1.25rem;background:#fff;border:1px solid rgb(10 42 107/.12);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;flex:1 1 22rem;font-size:.9rem;line-height:1.5;color:var(--text)}
.cookie-bar a{color:var(--blue)}
.cookie-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie-actions .btn{min-height:42px;padding:.5rem 1.1rem;font-size:.9rem}
@media (max-width:1079px){.cookie-bar{bottom:calc(76px + env(safe-area-inset-bottom))}}
.legal-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.link-btn{background:none;border:0;padding:0;font:inherit;color:rgb(255 255 255/.75);cursor:pointer;text-decoration:none}
.link-btn:hover{color:#fff}
.check a{color:var(--blue)}

/* ---------- Páginas legales ---------- */
.page-hero.legal-hero{padding:0;color:#fff;background:var(--navy)}
.page-hero.legal-hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgb(0 25 48/.94) 0%,rgb(6 36 90/.82) 50%,rgb(11 59 181/.55) 100%)}
.legal-hero .wrap{position:relative;z-index:1;padding-block:clamp(2.5rem,6vw,4rem)}
.legal-hero h1{margin:0;color:#fff;max-width:18em}
.legal-wrap{display:grid;gap:2rem}
@media (min-width:960px){.legal-wrap{grid-template-columns:260px 1fr;gap:3.5rem;align-items:start}.legal-toc{position:sticky;top:96px}}
.legal-toc{background:var(--surface);border:1px solid rgb(10 42 107/.08);border-radius:var(--r);padding:1.25rem;box-shadow:var(--shadow)}
.legal-toc-t{margin:0 0 .6rem;font-weight:700;color:var(--navy)}
.legal-toc ol{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.9rem}
.legal-toc a{color:var(--text);text-decoration:none}
.legal-toc a:hover{color:var(--blue)}
.prose{max-width:46rem;min-width:0;color:var(--text)}
.legal-toc{min-width:0}
.prose h2{font-size:1.3rem;margin:2.25rem 0 .75rem;scroll-margin-top:100px}
.prose h2:first-of-type{margin-top:0}
.prose p,.prose li{line-height:1.7}
.prose ul,.prose ol{padding-left:1.25rem;display:grid;gap:.35rem}
.prose code{background:var(--blue-soft);padding:.1rem .35rem;border-radius:6px;font-size:.88em}
.table-wrap{overflow-x:auto;margin:1rem 0;border:1px solid var(--line);border-radius:var(--r-sm)}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem}
.prose th,.prose td{padding:.65rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{background:var(--blue-soft);color:var(--navy)}
mark.pend{background:#FFF1C9;color:#6B4E00;padding:0 .25rem;border-radius:4px}

/* ---------- Botón de chat (Tidio bajo demanda) ---------- */
.chat-btn{position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;display:inline-flex;align-items:center;gap:.55rem;min-height:52px;padding:.7rem 1.15rem .7rem .9rem;border:0;border-radius:999px;background:var(--grad-btn);color:#fff;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0 12px 30px rgb(22 82 240/.45);transition:transform .2s,box-shadow .2s}
.chat-btn .ic{width:22px;height:22px}
.chat-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgb(22 82 240/.55)}
.chat-btn.is-loading{opacity:.7;pointer-events:none}
.chat-btn[hidden],.cookie-open .chat-btn{display:none}
@media (max-width:1079px){.chat-btn{bottom:calc(78px + env(safe-area-inset-bottom));right:1rem;padding:.7rem;min-height:52px;width:52px;justify-content:center}.chat-btn span{display:none}}
button.help-line{width:100%;font:inherit;text-align:left;cursor:pointer}