/* ==========================================================
   SANTOS AC & INSULATION
   HEADER PREMIUM
   CSS INDEPENDIENTE
========================================================== */


/* ==========================================================
   01. VARIABLES
========================================================== */

:root {

    --sah-navy: #071d38;

    --sah-navy-dark: #041326;

    --sah-blue: #087fe1;

    --sah-cyan: #57dbff;

    --sah-red: #d90919;

    --sah-white: #ffffff;

    --sah-text: #102e52;

}


/* ==========================================================
   02. RESET LOCAL
========================================================== */

.sah-header *,
.sah-topbar *,
.sah-mobile-menu *,
.sah-header *::before,
.sah-header *::after,
.sah-mobile-menu *::before,
.sah-mobile-menu *::after {

    box-sizing: border-box;

}

.sah-header a,
.sah-topbar a,
.sah-mobile-menu a {

    text-decoration: none;

}

.sah-header button,
.sah-mobile-menu button {

    font: inherit;

    cursor: pointer;

}

.sah-header svg,
.sah-topbar svg,
.sah-mobile-menu svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.sah-container {

    width: min(1480px, calc(100% - 60px));

    margin: 0 auto;

}


/* ==========================================================
   03. TOP BAR
========================================================== */

.sah-topbar {

    position: relative;

    z-index: 1002;

    min-height: 34px;

    display: flex;

    align-items: center;

    background:

        linear-gradient(
            90deg,
            #104c86,
            #092e5a 48%,
            #071c39
        );

    color: #ffffff;

    font-family: Inter, Arial, sans-serif;

}


.sah-topbar-inner {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 20px;

}


.sah-topbar-location,
.sah-topbar-message,
.sah-topbar-contact {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 11px;

    font-weight: 600;

}


.sah-topbar-location svg {

    color: #89e9ff;

}


.sah-topbar-message {

    justify-content: center;

}


.sah-topbar-message svg {

    color: #ffffff;

}


.sah-topbar-contact {

    justify-content: flex-end;

    gap: 18px;

}


.sah-topbar-contact a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #ffffff;

    white-space: nowrap;

    transition: color .2s ease;

}


.sah-topbar-contact a:hover {

    color: #70e2ff;

}


/* ==========================================================
   04. HEADER PRINCIPAL
========================================================== */

.sah-header {

    position: sticky;

    top: 0;

    z-index: 1001;

    width: 100%;

    background: rgba(255, 255, 255, .98);

    border-bottom: 1px solid rgba(9, 70, 119, .09);

    transition:
        box-shadow .25s ease,
        background .25s ease;

}


.sah-header.is-scrolled {

    background: rgba(255, 255, 255, .97);

    box-shadow:
        0 12px 35px rgba(3, 31, 57, .12);

    backdrop-filter: blur(18px);

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

}


/* ==========================================================
   05. CONTENIDO DEL HEADER
========================================================== */

.sah-header-inner {

    min-height: 91px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* ==========================================================
   06. LOGO
========================================================== */

.sah-brand {

    width: 180px;

    flex: 0 0 180px;

    display: flex;

    align-items: center;

}


.sah-brand img {

    display: block;

    width: 100%;

    height: 73px;

    object-fit: contain;

    object-position: left center;

}


/* ==========================================================
   07. NAVEGACIÓN DESKTOP
========================================================== */

.sah-nav {

    height: 91px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: clamp(19px, 2.2vw, 36px);

}


.sah-nav-link {

    position: relative;

    height: 100%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #102d52;

    font-family: Inter, Arial, sans-serif;

    font-size: 13px;

    font-weight: 800;

    white-space: nowrap;

    transition: color .2s ease;

}


.sah-nav-link svg {

    width: 12px;

    height: 12px;

    transition: transform .25s ease;

}


.sah-nav-link:hover,
.sah-nav-link.is-active,
.sah-nav-link.is-open {

    color: #087bd8;

}


/* Línea azul debajo del enlace */

.sah-nav-link::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 19px;

    width: 0;

    height: 3px;

    border-radius: 99px;

    background: linear-gradient(
        90deg,
        #087ddd,
        #4bd9ff
    );

    transform: translateX(-50%);

    transition: width .25s ease;

}


.sah-nav-link:hover::after,
.sah-nav-link.is-active::after,
.sah-nav-link.is-open::after {

    width: 29px;

}


.sah-services-trigger.is-open svg {

    transform: rotate(180deg);

}


/* ==========================================================
   08. BOTONES DEL HEADER
========================================================== */

.sah-header-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


.sah-estimate-btn {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 26px;

    border-radius: 8px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #e61727,
        #c70717
    );

    font-family: Inter, Arial, sans-serif;

    font-size: 13px;

    font-weight: 900;

    white-space: nowrap;

    box-shadow:
        0 8px 20px rgba(217, 9, 25, .16);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.sah-estimate-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 13px 28px rgba(217, 9, 25, .25);

}


.sah-estimate-btn svg {

    width: 16px;

    height: 16px;

}


/* Ocultar elementos móviles en desktop */

.sah-mobile-call,
.sah-hamburger {

    display: none;

}


/* ==========================================================
   09. MEGA MENÚ / CONTENEDOR
========================================================== */

.sah-mega {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    z-index: 10;

    padding: 12px 0 24px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(-12px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

}


.sah-mega.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}


/* ==========================================================
   10. PANEL DEL MEGA MENÚ
========================================================== */

.sah-mega-panel {

    display: grid;

    grid-template-columns: 1.2fr 1fr 1fr 1fr;

    gap: 25px;

    padding: 30px;

    border: 1px solid rgba(80, 200, 255, .2);

    border-radius: 23px;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(21, 159, 255, .18),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #092e50,
            #041629 85%
        );

    box-shadow:
        0 30px 70px rgba(0, 24, 49, .32);

}


/* ==========================================================
   11. COLUMNA DESTACADA
========================================================== */

.sah-mega-feature {

    padding: 15px;

    border-right: 1px solid rgba(255, 255, 255, .1);

}


.sah-mega-eyebrow {

    display: block;

    margin-bottom: 13px;

    color: #79e3ff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .1em;

}


.sah-mega-feature h2 {

    margin: 0 0 15px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 37px;

    line-height: 1.05;

}


.sah-mega-feature h2 span {

    color: #72e0ff;

}


.sah-mega-feature p {

    max-width: 290px;

    margin: 0 0 22px;

    color: #a8c6da;

    font-size: 12px;

    line-height: 1.7;

}


.sah-mega-feature > a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #70deff;

    font-size: 12px;

    font-weight: 900;

}


.sah-mega-feature > a svg {

    transition: transform .2s ease;

}


.sah-mega-feature > a:hover svg {

    transform: translateX(4px);

}


/* ==========================================================
   12. COLUMNAS DE SERVICIOS
========================================================== */

.sah-mega-column {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.sah-mega-title {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    color: #74deff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .1em;

}


.sah-mega-title svg {

    width: 20px;

    height: 20px;

}


.sah-mega-column > a {

    display: block;

    padding: 13px 12px;

    border: 1px solid transparent;

    border-radius: 11px;

    color: #ffffff;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.sah-mega-column > a:hover {

    background: rgba(255, 255, 255, .055);

    border-color: rgba(107, 217, 255, .15);

    transform: translateX(3px);

}


.sah-mega-column > a strong {

    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.4;

}


.sah-mega-column > a small {

    display: block;

    color: #8eafc7;

    font-size: 10px;

    line-height: 1.4;

}


/* ==========================================================
   13. CONTACTO DENTRO DEL MEGA MENÚ
========================================================== */

.sah-mega-contact {

    margin-top: auto;

    padding: 15px;

    border-radius: 12px;

    background: rgba(15, 144, 230, .13);

    border: 1px solid rgba(83, 210, 255, .2);

}


.sah-mega-contact span {

    display: block;

    margin-bottom: 5px;

    color: #8badc6;

    font-size: 10px;

}


.sah-mega-contact a {

    padding: 0 !important;

    color: #75e2ff !important;

    font-size: 14px;

    font-weight: 900;

}


/* ==========================================================
   14. OVERLAY MÓVIL
========================================================== */

.sah-mobile-overlay {

    position: fixed;

    inset: 0;

    z-index: 1003;

    background: rgba(0, 14, 29, .68);

    backdrop-filter: blur(5px);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


body.sah-menu-open .sah-mobile-overlay {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* ==========================================================
   15. DRAWER MÓVIL
========================================================== */

.sah-mobile-menu {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    z-index: 1004;

    width: min(420px, 92vw);

    overflow-x: hidden;

    overflow-y: auto;

    padding: 24px;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(20, 158, 255, .2),
            transparent 38%
        ),

        linear-gradient(
            155deg,
            #082e50,
            #041525 80%
        );

    border-left: 1px solid rgba(92, 214, 255, .2);

    box-shadow:
        -25px 0 65px rgba(0, 20, 40, .35);

    transform: translateX(105%);

    visibility: hidden;

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        visibility .35s ease;

    overscroll-behavior: contain;

}


body.sah-menu-open .sah-mobile-menu {

    transform: translateX(0);

    visibility: visible;

}


/* ==========================================================
   16. CABECERA DEL DRAWER
========================================================== */

.sah-mobile-menu-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 23px;

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

}


.sah-mobile-menu-brand {

    width: 165px;

    padding: 7px;

    border-radius: 12px;

    background: #ffffff;

}


.sah-mobile-menu-brand img {

    display: block;

    width: 100%;

    height: auto;

}


.sah-mobile-close {

    width: 44px;

    height: 44px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, .15);

    border-radius: 50%;

    color: #ffffff;

    background: rgba(255, 255, 255, .07);

}


.sah-mobile-close svg {

    width: 21px;

    height: 21px;

}


/* ==========================================================
   17. INTRO MÓVIL
========================================================== */

.sah-mobile-intro {

    padding: 27px 0 22px;

}


.sah-mobile-intro-label {

    display: block;

    margin-bottom: 10px;

    color: #6ddfff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .1em;

}


.sah-mobile-intro h2 {

    margin: 0;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 38px;

    line-height: 1.05;

}


/* ==========================================================
   18. NAVEGACIÓN MÓVIL
========================================================== */

.sah-mobile-nav {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.sah-mobile-nav > a,
.sah-mobile-services summary {

    min-height: 53px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 0 16px;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 13px;

    color: #d7e9f5;

    background: rgba(255, 255, 255, .045);

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition: background .2s ease;

}


.sah-mobile-nav > a:hover,
.sah-mobile-services summary:hover {

    background: rgba(255, 255, 255, .09);

}


.sah-mobile-nav > a.is-active {

    color: #ffffff;

    border-color: rgba(83, 214, 255, .25);

    background: rgba(23, 148, 232, .2);

}


.sah-mobile-nav > a > span {

    margin-left: auto;

    color: #75b8e0;

    font-size: 10px;

}


.sah-mobile-nav svg {

    width: 20px;

    height: 20px;

    color: #78e3ff;

}


/* ==========================================================
   19. SUBMENÚ MÓVIL
========================================================== */

.sah-mobile-services summary {

    list-style: none;

}


.sah-mobile-services summary::-webkit-details-marker {

    display: none;

}


.sah-mobile-services summary > span {

    flex: 1;

}


.sah-mobile-chevron {

    width: 16px !important;

    height: 16px !important;

    transition: transform .2s ease;

}


.sah-mobile-services[open] .sah-mobile-chevron {

    transform: rotate(180deg);

}


.sah-mobile-submenu {

    display: flex;

    flex-direction: column;

    gap: 3px;

    margin: 8px 0 8px 17px;

    padding-left: 17px;

    border-left: 1px solid rgba(81, 206, 255, .25);

}


.sah-mobile-submenu a {

    padding: 10px 12px;

    border-radius: 8px;

    color: #9cbdd5;

    font-size: 12px;

    font-weight: 700;

}


.sah-mobile-submenu a:hover {

    color: #ffffff;

    background: rgba(255, 255, 255, .06);

}


/* ==========================================================
   20. CONTACTO MÓVIL
========================================================== */

.sah-mobile-contact {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 25px;

    padding: 22px 0;

    border-top: 1px solid rgba(255, 255, 255, .1);

}


.sah-mobile-contact-title {

    margin-bottom: 5px;

    color: #72dcff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .1em;

}


.sah-mobile-contact a {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #c6dcea;

    font-size: 12px;

    overflow-wrap: anywhere;

}


.sah-mobile-contact svg {

    flex: 0 0 19px;

    width: 19px;

    height: 19px;

    color: #68dfff;

}


/* ==========================================================
   21. CTA DEL DRAWER
========================================================== */

.sah-mobile-estimate {

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 0 20px;

    border-radius: 12px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f02536,
        #c80819
    );

    font-size: 13px;

    font-weight: 900;

}


.sah-mobile-estimate svg {

    width: 20px;

    height: 20px;

}


/* ==========================================================
   22. RESPONSIVE - TABLET
========================================================== */

@media (max-width: 1180px) {

    .sah-topbar-message {

        display: none;

    }

    .sah-topbar-inner {

        grid-template-columns: 1fr auto;

    }

    .sah-nav {

        display: none;

    }

    .sah-estimate-btn {

        min-height: 45px;

    }

    .sah-hamburger {

        width: 48px;

        height: 48px;

        position: relative;

        display: grid;

        place-items: center;

        overflow: hidden;

        border: 1px solid rgba(91, 217, 255, .2);

        border-radius: 13px;

        color: #ffffff;

        background: linear-gradient(
            135deg,
            #11629d,
            #092e52
        );

        box-shadow:
            0 8px 20px rgba(4, 58, 103, .15);

    }


    .sah-hamburger svg {

        position: relative;

        z-index: 2;

        width: 24px;

        height: 24px;

    }


    .sah-hamburger-glow {

        position: absolute;

        top: 0;

        left: 15%;

        right: 15%;

        height: 2px;

        background: #79e6ff;

        box-shadow: 0 0 15px #79e6ff;

    }


    .sah-mega {

        display: none;

    }

}


/* ==========================================================
   23. RESPONSIVE - CELULAR
========================================================== */

@media (max-width: 768px) {

    .sah-container {

        width: calc(100% - 28px);

    }


    /* Barra superior */

    .sah-topbar {

        min-height: 32px;

    }


    .sah-topbar-inner {

        display: flex;

        justify-content: center;

    }


    .sah-topbar-location {

        display: none;

    }


    .sah-topbar-contact {

        font-size: 11px;

    }


    .sah-topbar-contact a:nth-child(2) {

        display: none;

    }


    /* Header */

    .sah-header {

        padding: 8px 0;

    }


    .sah-header-inner {

        min-height: 68px;

        gap: 10px;

        padding: 0 9px 0 13px;

        border: 1px solid rgba(31, 118, 178, .12);

        border-radius: 16px;

        background: #ffffff;

        box-shadow:
            0 8px 25px rgba(4, 59, 103, .08);

    }


    /* Logo */

    .sah-brand {

        width: 145px;

        flex: 0 1 145px;

        min-width: 0;

    }


    .sah-brand img {

        height: 56px;

    }


    /* Acciones */

    .sah-header-actions {

        gap: 8px;

    }


    .sah-estimate-btn {

        display: none;

    }


    /* Llamar */

    .sah-mobile-call {

        width: 46px;

        height: 46px;

        display: grid;

        place-items: center;

        border: 1px solid rgba(0, 131, 218, .15);

        border-radius: 13px;

        color: #0879cd;

        background: #edf8ff;

    }


    .sah-mobile-call svg {

        width: 20px;

        height: 20px;

    }


    /* Hamburguesa */

    .sah-hamburger {

        width: 46px;

        height: 46px;

    }


}


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

@media (max-width: 380px) {

    .sah-container {

        width: calc(100% - 18px);

    }


    .sah-brand {

        width: 126px;

        flex-basis: 126px;

    }


    .sah-brand img {

        height: 50px;

    }


    .sah-mobile-call,
    .sah-hamburger {

        width: 42px;

        height: 42px;

    }


    .sah-mobile-menu {

        width: 94vw;

        padding: 20px;

    }

}


/* ==========================================================
   25. ACCESIBILIDAD
========================================================== */

.sah-header :is(a, button):focus-visible,
.sah-topbar a:focus-visible,
.sah-mobile-menu :is(a, button, summary):focus-visible {

    outline: 2px solid #54dfff;

    outline-offset: 4px;

}


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

    .sah-header *,
    .sah-mobile-menu *,
    .sah-mobile-overlay {

        animation: none !important;

        transition: none !important;

    }

}


/* ==========================================================
   SANTOS HERO SLIDER
   CSS INDEPENDIENTE
========================================================== */


/* ==========================================================
   01. CONTENEDOR PRINCIPAL
========================================================== */

.santos-hero {

    position: relative;
    isolation: isolate;

    width: 100%;
    height: 490px;

    overflow: hidden;

    background: #071d34;

    color: #ffffff;

    font-family: Inter, Arial, sans-serif;

}


.santos-hero *,
.santos-hero *::before,
.santos-hero *::after {

    box-sizing: border-box;

}


.santos-hero a {

    text-decoration: none;

}


.santos-hero button {

    font: inherit;
    cursor: pointer;

}


.santos-hero-container {

    width: min(1480px, calc(100% - 80px));

    height: 100%;

    display: flex;
    align-items: center;

    margin: 0 auto;

}


/* ==========================================================
   02. TRACK Y SLIDES
========================================================== */

.santos-hero-track {

    position: relative;

    width: 100%;
    height: 100%;

}


.santos-slide {

    position: absolute;

    inset: 0;

    display: block;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity .65s ease, visibility .65s ease;

}


.santos-slide.is-active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.santos-slide[hidden] {

    display: none;

}


/* ==========================================================
   03. IMAGEN DE FONDO
========================================================== */

.santos-slide-background {

    position: absolute;

    inset: 0;

    z-index: -5;

    background: #153d5d;

}


.santos-slide-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: 72% 52%;

    transform: scale(1.035);

    transition: transform 8s linear;

}


.santos-slide.is-active .santos-slide-image {

    transform: scale(1.1);

}


/* ==========================================================
   04. OVERLAY AZUL OSCURO
========================================================== */

.santos-slide-overlay {

    position: absolute;

    inset: 0;

    z-index: -4;

    background:

        linear-gradient(
            90deg,
            rgba(2, 24, 46, .98) 0%,
            rgba(4, 34, 62, .94) 28%,
            rgba(5, 36, 61, .66) 49%,
            rgba(3, 21, 38, .12) 78%,
            rgba(2, 17, 30, .25) 100%
        ),

        linear-gradient(
            0deg,
            rgba(2, 18, 37, .55),
            transparent 45%
        );

}


/* ==========================================================
   05. GRID TECNOLÓGICO
========================================================== */

.santos-slide-grid {

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(92, 210, 255, .13) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(92, 210, 255, .13) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:

        linear-gradient(
            90deg,
            black,
            transparent 70%
        );

}


/* ==========================================================
   06. ILUMINACIÓN AZUL
========================================================== */

.santos-slide-blue-light {

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 56% 35%,
            rgba(31, 171, 255, .22),
            transparent 28%
        ),

        radial-gradient(
            circle at 5% 95%,
            rgba(0, 114, 255, .2),
            transparent 32%
        );

}


/* ==========================================================
   07. CONTENIDO PRINCIPAL
========================================================== */

.santos-slide-content {

    position: relative;

    z-index: 4;

    width: min(49%, 620px);

    padding-bottom: 10px;

}


/* ==========================================================
   08. ETIQUETA SUPERIOR
========================================================== */

.santos-hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #e4f4ff;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

}


.santos-hero-sparkle {

    color: #7ae7ff;

    font-size: 18px;

    text-shadow: 0 0 15px rgba(74, 219, 255, .8);

}


/* ==========================================================
   09. TITULAR
========================================================== */

.santos-hero-title {

    margin: 0 0 18px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(46px, 4.5vw, 78px);

    font-weight: 700;

    line-height: .96;

    letter-spacing: -.02em;

    font-style: italic;

    text-transform: uppercase;

    text-shadow:
        0 5px 18px rgba(0, 0, 0, .24);

}


.santos-hero-title span {

    color: #f1283e;

}


/* ==========================================================
   10. DESCRIPCIÓN
========================================================== */

.santos-hero-description {

    max-width: 490px;

    margin: 0 0 22px;

    color: #e1edf8;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.45;

}


/* ==========================================================
   11. BOTONES
========================================================== */

.santos-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.santos-hero-btn {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 0 19px;

    border-radius: 9px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.2;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.santos-hero-btn:hover {

    transform: translateY(-3px);

}


.santos-hero-btn-red {

    background:
        linear-gradient(
            135deg,
            #fa2738,
            #c90818
        );

    box-shadow:
        0 12px 26px rgba(216, 13, 30, .25);

}


.santos-hero-btn-phone {

    border: 1px solid rgba(117, 223, 255, .68);

    background:
        linear-gradient(
            135deg,
            rgba(15, 71, 112, .78),
            rgba(4, 37, 71, .7)
        );

    box-shadow:
        0 0 18px rgba(43, 189, 255, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .06);

    backdrop-filter: blur(12px);

}


.santos-hero-phone-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

}


.santos-hero-phone-text > span {

    color: #b7d9ec;

    font-size: 14px;

}


.santos-hero-phone-text strong {

    color: #ffffff;

    font-size: 16px;

}


/* ==========================================================
   12. TARJETAS FLOTANTES
========================================================== */

.santos-hero-features {

    position: absolute;

    z-index: 5;

    left: 47%;

    top: 50%;

    display: flex;

    flex-direction: column;

    gap: 12px;

    transform: translateY(-50%);

}


.santos-hero-feature {

    width: 205px;

    min-height: 76px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px;

    border: 1px solid rgba(112, 217, 255, .34);

    border-radius: 17px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(8, 55, 91, .88),
            rgba(3, 27, 52, .84)
        );

    backdrop-filter: blur(18px);

    box-shadow:
        0 13px 28px rgba(0, 10, 25, .25),
        0 0 20px rgba(0, 144, 255, .09);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.santos-hero-feature:hover {

    transform: translateX(6px);

    border-color: #7ce5ff;

    box-shadow:
        0 18px 32px rgba(0, 10, 25, .3),
        0 0 23px rgba(0, 175, 255, .2);

}


/* ==========================================================
   13. ICONOS DE TARJETAS
========================================================== */

.santos-hero-feature-icon {

    width: 49px;
    height: 49px;

    flex: 0 0 49px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .25);

    color: #ffffff;

    font-size: 26px;

    box-shadow:
        0 0 19px rgba(31, 171, 255, .2);

}


.santos-icon-cooling {

    background: linear-gradient(135deg, #21bdff, #0064cf);

}


.santos-icon-insulation {

    background: linear-gradient(135deg, #359eff, #164da1);

}


.santos-icon-energy {

    background: linear-gradient(135deg, #1dd89e, #087f65);

}


/* ==========================================================
   14. TEXTO DE TARJETAS
========================================================== */

.santos-hero-feature-text {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.santos-hero-feature-text strong {

    color: #ffffff;

    font-size: 15px;

    font-weight: 900;

}


.santos-hero-feature-text small {

    color: #c4deed;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.2;

}


/* ==========================================================
   15. FRASE DECORATIVA
========================================================== */

.santos-hero-signature {

    position: absolute;

    z-index: 5;

    right: 4%;

    bottom: 72px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    color: #ffffff;

    font-family: Georgia, serif;

    font-size: clamp(16px, 1.5vw, 23px);

    font-style: italic;

    font-weight: 700;

    line-height: 1.1;

    text-align: right;

    text-shadow:
        0 3px 9px rgba(0, 0, 0, .8);

    transform: rotate(-8deg);

}


.santos-hero-signature i {

    width: 135px;

    height: 5px;

    display: block;

    margin-top: 15px;

    border-radius: 99px;

    background: #f51e34;

    transform: rotate(-10deg);

}


/* ==========================================================
   16. NAVEGACIÓN DEL SLIDER
========================================================== */

.santos-hero-navigation {

    position: absolute;

    z-index: 20;

    right: 34px;

    bottom: 17px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 5px 9px;

    border: 1px solid rgba(129, 225, 255, .3);

    border-radius: 50px;

    background: rgba(1, 26, 48, .72);

    backdrop-filter: blur(12px);

}


.santos-hero-arrow {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    color: #ffffff;

    background: rgba(255, 255, 255, .09);

    font-size: 25px !important;

    transition: background .2s ease;

}


.santos-hero-arrow:hover {

    background: #128be0;

}


.santos-hero-dots {

    display: flex;

    gap: 8px;

    align-items: center;

}


.santos-hero-dots button {

    width: 9px;

    height: 9px;

    padding: 0;

    border: none;

    border-radius: 99px;

    background: rgba(255, 255, 255, .4);

    transition: width .25s ease, background .25s ease;

}


.santos-hero-dots button.is-active {

    width: 27px;

    background: #61dcff;

    box-shadow: 0 0 11px rgba(58, 201, 255, .55);

}


/* ==========================================================
   17. LAPTOP
========================================================== */

@media (max-width: 1280px) {

    .santos-hero {

        height: 470px;

    }


    .santos-slide-content {

        width: 46%;

    }


    .santos-hero-title {

        font-size: clamp(44px, 4.4vw, 65px);

    }


    .santos-hero-features {

        left: 47%;

    }


    .santos-hero-feature {

        width: 190px;

    }


    .santos-hero-signature {

        right: 2%;

    }

}


/* ==========================================================
   18. TABLET
========================================================== */

@media (max-width: 1024px) {

    .santos-hero {

        height: 540px;

    }


    .santos-hero-container {

        width: calc(100% - 50px);

    }


    .santos-slide-content {

        width: 60%;

    }


    .santos-hero-features {

        left: auto;

        right: 24px;

        top: 50%;

    }


    .santos-hero-feature {

        width: 180px;

    }


    .santos-hero-signature {

        display: none;

    }

}


/* ==========================================================
   19. CELULAR
========================================================== */

@media (max-width: 767px) {

    .santos-hero {

        height: auto;

        min-height: 700px;

    }


    .santos-hero-track {

        min-height: 700px;

    }


    .santos-slide {

        min-height: 700px;

    }


    .santos-slide-background {

        inset: 0;

    }


    .santos-slide-image {

        object-position: 65% center;

    }


    .santos-slide-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(2, 21, 42, .94) 0%,
                rgba(2, 26, 48, .88) 32%,
                rgba(2, 28, 49, .62) 60%,
                rgba(2, 18, 34, .94) 100%
            );

    }


    .santos-hero-container {width: calc(100% - 34px);height: auto;display: block;}


    .santos-slide-content {

        width: 100%;

        max-width: 570px;

        padding-top: 45px;

        padding-bottom: 0;

    }


    .santos-hero-eyebrow {

        font-size: 14px;

        margin-bottom: 17px;

    }


    .santos-hero-title {

        font-size: clamp(43px, 10.5vw, 67px);

        line-height: .98;

        margin-bottom: 18px;

    }


    .santos-hero-description {

        max-width: 480px;

        font-size: 15px;

        margin-bottom: 23px;

    }


    .santos-hero-actions {

        display: flex;

        gap: 10px;

    }


    .santos-hero-btn {

        min-height: 52px;

        font-size: 14px;

    }


    /* Tarjetas abajo del contenido */

    .santos-hero-features {left: 17px;right: 17px;top: auto;bottom: 70px;display: grid;grid-template-columns: 1fr;gap: 9px;transform: none;}


    .santos-hero-feature {

        width: 100%;

        min-height: 58px;

        padding: 8px 12px;

        border-radius: 13px;

    }


    .santos-hero-feature-icon {

        width: 42px;

        height: 42px;

        flex-basis: 42px;

        font-size: 23px;

    }


    .santos-hero-feature-text strong {

        font-size: 14px;

    }


    .santos-hero-feature-text small {

        font-size: 14px;

    }


    .santos-hero-feature-text small br {

        display: none;

    }


    .santos-hero-signature {

        display: none;

    }


    .santos-hero-navigation {

        right: 50%;

        bottom: 20px;

        transform: translateX(50%);

    }

}


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

@media (max-width: 420px) {

    .santos-hero {

        min-height: 730px;

    }


    .santos-hero-track,
    .santos-slide {

        min-height: 730px;

    }


    .santos-slide-content {

        padding-top: 32px;

    }


    .santos-hero-title {

        font-size: clamp(39px, 10.3vw, 49px);

    }


    .santos-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .santos-hero-btn {

        width: 100%;

    }


    .santos-hero-features {

        bottom: 80px;

    }

}


/* ==========================================================
   21. ACCESIBILIDAD
========================================================== */

.santos-hero :is(a, button):focus-visible {

    outline: 2px solid #7aeaff;

    outline-offset: 4px;

}


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

    .santos-hero *,
    .santos-hero *::before,
    .santos-hero *::after {

        animation: none !important;

        transition: none !important;

    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   SECCIÓN 02 — TRUST BAR
   CSS INDEPENDIENTE
========================================================== */


/* ==========================================================
   01. CONTENEDOR GENERAL
========================================================== */

.santos-trust {

    position: relative;

    z-index: 25;

    width: 100%;

    margin-top: -16px;

    padding: 0 30px 25px;

    background: transparent;

    font-family: Inter, Arial, sans-serif;

    isolation: isolate;

}


.santos-trust *,
.santos-trust *::before,
.santos-trust *::after {

    box-sizing: border-box;

}


.santos-trust-container {

    width: min(1480px, 100%);

    margin: 0 auto;

}



/* ==========================================================
   02. TARJETA PRINCIPAL
========================================================== */

.santos-trust-grid {

    position: relative;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    align-items: stretch;

    min-height: 112px;

    overflow: hidden;

    border: 1px solid rgba(19, 119, 197, .13);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:

        0 13px 36px rgba(8, 53, 95, .10),

        0 3px 8px rgba(8, 53, 95, .035);

}



/* Línea superior sutil */

.santos-trust-grid::before {

    content: "";

    position: absolute;

    top: 0;

    left: 15%;

    right: 15%;

    height: 2px;

    background: linear-gradient(

        90deg,

        transparent,

        rgba(40, 176, 255, .55),

        transparent

    );

    pointer-events: none;

}



/* ==========================================================
   03. CADA BENEFICIO
========================================================== */

.santos-trust-item {

    position: relative;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 23px 24px;

    background: #ffffff;

    transition:

        background .25s ease,

        transform .25s ease;

}



/* Separadores verticales */

.santos-trust-item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 21%;

    bottom: 21%;

    width: 1px;

    background: #dceaf5;

}



/* Hover elegante */

.santos-trust-item:hover {

    background: #f4faff;

}



/* ==========================================================
   04. ICONOS CIRCULARES
========================================================== */

.santos-trust-icon {

    position: relative;

    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: linear-gradient(

        145deg,

        #164b96,

        #0c2b6b

    );

    box-shadow:

        0 7px 16px rgba(12, 53, 130, .15),

        inset 0 1px 0 rgba(255, 255, 255, .15);

    transition:

        transform .25s ease,

        box-shadow .25s ease;

}



/* Anillo decorativo */

.santos-trust-icon::after {

    content: "";

    position: absolute;

    inset: -4px;

    border: 1px solid rgba(16, 126, 225, .10);

    border-radius: 50%;

    pointer-events: none;

}



/* Icono SVG */

.santos-trust-icon svg {

    width: 27px;

    height: 27px;

    display: block;

    color: #ffffff;

}



/* Animación */

.santos-trust-item:hover .santos-trust-icon {

    transform: translateY(-3px);

    box-shadow:

        0 10px 22px rgba(12, 82, 160, .24),

        0 0 19px rgba(26, 163, 255, .13);

}



/* ==========================================================
   05. CONTENIDO
========================================================== */

.santos-trust-content {

    min-width: 0;

    flex: 1;

}



/* Título mínimo 14 px */

.santos-trust-content h3 {

    margin: 0 0 5px;

    color: #102d52;

    font-family: Oswald, Inter, Arial, sans-serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.015em;

}



/* Descripción mínimo 14 px */

.santos-trust-content p {

    margin: 0;

    color: #536d88;

    font-family: Inter, Arial, sans-serif;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.45;

}



/* ==========================================================
   06. PANTALLAS MEDIANAS
========================================================== */

@media (max-width: 1250px) {

    .santos-trust-item {

        gap: 12px;

        padding: 20px 16px;

    }


    .santos-trust-icon {

        width: 48px;

        height: 48px;

        flex-basis: 48px;

    }


    .santos-trust-icon svg {

        width: 24px;

        height: 24px;

    }


    .santos-trust-content h3 {

        font-size: 16px;

    }

}



/* ==========================================================
   07. TABLET — DOS COLUMNAS
========================================================== */

@media (max-width: 1050px) {

    .santos-trust {

        padding: 0 20px 25px;

    }


    .santos-trust-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }


    .santos-trust-item {

        min-height: 100px;

        padding: 20px;

    }


    /* El segundo elemento no lleva separador vertical */

    .santos-trust-item:nth-child(2)::after {

        display: none;

    }


    /* Primera fila con separador horizontal */

    .santos-trust-item:nth-child(-n+2) {

        border-bottom: 1px solid #dceaf5;

    }


    .santos-trust-content h3 {

        font-size: 17px;

    }

}



/* ==========================================================
   08. CELULAR — DISEÑO COMPACTO
========================================================== */

@media (max-width: 600px) {

    .santos-trust {

        margin-top: -12px;

        padding: 0 12px 22px;

    }


    .santos-trust-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        border-radius: 15px;

    }


    .santos-trust-item {

        min-height: 135px;

        flex-direction: column;

        justify-content: center;

        align-items: flex-start;

        gap: 11px;

        padding: 17px 14px;

    }


    .santos-trust-icon {

        width: 46px;

        height: 46px;

        flex: 0 0 46px;

    }


    .santos-trust-icon svg {

        width: 23px;

        height: 23px;

    }


    .santos-trust-content h3 {

        font-size: 16px;

        line-height: 1.2;

    }


    .santos-trust-content p {

        font-size: 14px;

        line-height: 1.4;

    }


    .santos-trust-item:nth-child(2)::after {

        display: none;

    }


    .santos-trust-item:nth-child(-n+2) {

        border-bottom: 1px solid #dceaf5;

    }

}



/* ==========================================================
   09. CELULARES MUY PEQUEÑOS
========================================================== */

@media (max-width: 360px) {

    .santos-trust {

        padding-inline: 9px;

    }


    .santos-trust-item {

        padding: 14px 11px;

    }


    .santos-trust-content h3 {

        font-size: 15px;

    }


    .santos-trust-content p {

        font-size: 14px;

    }

}



/* ==========================================================
   10. ACCESIBILIDAD
========================================================== */

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

    .santos-trust *,
    .santos-trust *::before,
    .santos-trust *::after {

        transition: none !important;

        animation: none !important;

    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   SECCIÓN 03 — OUR SERVICES
   CSS INDEPENDIENTE
========================================================== */


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

.ssv-services {

    --ssv-blue: #087fe2;
    --ssv-navy: #102f53;
    --ssv-cyan: #55d7ff;
    --ssv-gap: 15px;

    position: relative;
    isolation: isolate;

    width: 100%;
    padding: 48px 0 55px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(38, 166, 255, .055),
            transparent 35%
        ),
        #f0f8ff;

    color: var(--ssv-navy);

    font-family: Inter, Arial, sans-serif;

    overflow: hidden;

}


.ssv-services *,
.ssv-services *::before,
.ssv-services *::after {

    box-sizing: border-box;

}


.ssv-services a {

    text-decoration: none;

}


.ssv-services button {

    font: inherit;
    cursor: pointer;

}


/* ==========================================================
   02. CONTENEDOR
========================================================== */

.ssv-container {

    width: min(1480px, calc(100% - 60px));

    margin: 0 auto;

}


/* ==========================================================
   03. HEADER DE SERVICIOS
========================================================== */

.ssv-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    margin-bottom: 20px;

}


.ssv-eyebrow {

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

    gap: 9px;

    margin-bottom: 9px;

    color: var(--ssv-blue);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .03em;

}


.ssv-eyebrow span {

    color: #0b9cff;
    font-size: 16px;

}


.ssv-header h2 {

    margin: 0 0 7px;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 700;

    line-height: 1.05;

    letter-spacing: -.025em;

    color: #102e53;

}


.ssv-header p {

    max-width: 760px;

    margin: 0;

    color: #4e6984;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.55;

}


/* ==========================================================
   04. BOTÓN VER TODOS
========================================================== */

.ssv-all-services {

    min-height: 47px;

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

    gap: 13px;

    flex-shrink: 0;

    padding: 0 23px;

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #11538a,
            #092b50
        );

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        0 9px 20px rgba(5, 48, 91, .12);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.ssv-all-services:hover {

    transform: translateY(-3px);

    box-shadow:
        0 13px 26px rgba(5, 48, 91, .22);

}


.ssv-all-services svg {

    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   05. TOOLBAR
========================================================== */

.ssv-toolbar {

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

    gap: 20px;

    margin: 0 0 14px;

}


.ssv-toolbar-label {

    color: #5380a2;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: .03em;

}


.ssv-toolbar-actions {

    display: flex;
    align-items: center;

    gap: 8px;

}


.ssv-counter {

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

    gap: 5px;

    margin-right: 9px;

    color: #6e8ca5;

    font-size: 14px;
    font-weight: 700;

}


.ssv-counter strong {

    color: #087fdc;

    font-weight: 900;

}


/* ==========================================================
   06. FLECHAS
========================================================== */

.ssv-control {

    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid #d0e4f3;
    border-radius: 11px;

    color: #087cdb;

    background: #ffffff;

    box-shadow:
        0 4px 13px rgba(5, 78, 139, .06);

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


.ssv-control:not(:disabled):hover {

    color: #ffffff;
    background: #087fe2;

    transform: translateY(-2px);

}


.ssv-control:disabled {

    opacity: .35;
    cursor: not-allowed;

}


.ssv-control svg {

    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   07. TRACK / CARRUSEL
========================================================== */

.ssv-track {

    display: grid;

    grid-auto-flow: column;

    grid-auto-columns:
        calc((100% - 5 * var(--ssv-gap)) / 6);

    gap: var(--ssv-gap);

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

    padding: 3px 1px 16px;

    scroll-snap-type: x mandatory;

    scroll-padding-inline: 1px;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}


.ssv-track::-webkit-scrollbar {

    display: none;

}


/* ==========================================================
   08. TARJETAS
========================================================== */

.ssv-card {

    min-width: 0;

    scroll-snap-align: start;

    overflow: hidden;

    border: 1px solid #d7e6f1;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 7px 19px rgba(5, 67, 123, .065);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.ssv-card:hover {

    transform: translateY(-3px);

    border-color: #9bd6fc;

    box-shadow:
        0 13px 28px rgba(6, 93, 165, .12);

}


.ssv-card-link {

    display: flex;
    flex-direction: column;

    height: 100%;

    color: inherit;

}


/* ==========================================================
   09. IMAGEN
========================================================== */

.ssv-card-media {

    position: relative;

    height: 165px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #123957,
            #0c689e
        );

}


.ssv-card-media > img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;

}


.ssv-card:hover .ssv-card-media > img {

    transform: scale(1.06);

}


/* Oscurecimiento inferior de imagen */

.ssv-card-media::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(3, 24, 44, .29)
        );

}


/* ==========================================================
   10. NÚMERO
========================================================== */

.ssv-card-number {

    position: absolute;

    z-index: 2;

    top: 10px;
    right: 10px;

    min-width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.4);

    border-radius: 8px;

    color: #ffffff;

    background: rgba(3, 29, 54, .58);

    backdrop-filter: blur(9px);

    font-size: 14px;
    font-weight: 900;

}


/* ==========================================================
   11. ICONOS SUPERPUESTOS
========================================================== */

.ssv-card-icon {

    position: absolute;

    z-index: 3;

    left: 13px;
    bottom: -1px;

    width: 49px;
    height: 49px;

    display: grid;
    place-items: center;

    border: 3px solid #ffffff;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #20b9ff,
            #006acc
        );

    box-shadow:
        0 6px 17px rgba(0, 98, 200, .2);

    transform: translateY(3px);

}


.ssv-card-icon svg {

    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   12. CUERPO DE TARJETA
========================================================== */

.ssv-card-body {

    position: relative;

    flex: 1;

    display: flex;
    flex-direction: column;

    min-height: 170px;

    padding: 17px 14px 14px;

}


.ssv-card-body h3 {

    margin: 0 0 9px;

    color: #102e50;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 19px;
    font-weight: 700;

    line-height: 1.16;

}


.ssv-card-body p {

    margin: 0 0 13px;

    color: #536f8b;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.45;

}


/* ==========================================================
   13. FLECHA DE TARJETA
========================================================== */

.ssv-card-arrow {

    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    align-self: flex-end;

    margin-top: auto;

    border: 1px solid #d0eaff;
    border-radius: 50%;

    color: #0786e8;

    background: #edf8ff;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;

}


.ssv-card-arrow svg {

    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

}


.ssv-card:hover .ssv-card-arrow {

    color: #ffffff;
    background: #0786e8;

    transform: translateX(3px);

}


/* ==========================================================
   14. BARRA DE PROGRESO
========================================================== */

.ssv-progress {

    width: 100%;
    height: 4px;

    margin-top: 7px;

    overflow: hidden;

    border-radius: 99px;

    background: #d7e9f7;

}


.ssv-progress span {

    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #087ce0,
            #55d7ff
        );

    transform: scaleX(0);

    transform-origin: left center;

    transition: transform .15s ease;

}


/* ==========================================================
   15. LAPTOP — CUATRO TARJETAS
========================================================== */

@media (max-width: 1279px) {

    .ssv-track {

        grid-auto-columns:
            calc((100% - 3 * var(--ssv-gap)) / 4);

    }

}


/* ==========================================================
   16. TABLET — DOS TARJETAS
========================================================== */

@media (max-width: 899px) {

    .ssv-container {

        width: calc(100% - 36px);

    }


    .ssv-header {

        align-items: flex-start;

    }


    .ssv-track {

        grid-auto-columns:
            calc((100% - var(--ssv-gap)) / 2);

    }


    .ssv-card-media {

        height: 190px;

    }

}


/* ==========================================================
   17. CELULAR
========================================================== */

@media (max-width: 620px) {

    .ssv-services {

        padding: 40px 0 46px;

    }


    .ssv-container {

        width: calc(100% - 28px);

    }


    .ssv-header {

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

    }


    .ssv-header h2 {

        font-size: 34px;

    }


    .ssv-all-services {

        align-self: flex-start;

    }


    .ssv-toolbar {

        margin-top: 19px;

    }


    .ssv-toolbar-label {

        font-size: 14px;

    }


    .ssv-track {

        grid-auto-columns: 83%;

        gap: 12px;

    }


    .ssv-card-media {

        height: 205px;

    }


    .ssv-card-body {

        min-height: 156px;

        padding: 20px;

    }


    .ssv-card-body h3 {

        font-size: 23px;

    }


    .ssv-card-body p {

        font-size: 14px;

    }

}


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

@media (max-width: 380px) {

    .ssv-track {

        grid-auto-columns: 88%;

    }


    .ssv-header h2 {

        font-size: 31px;

    }


    .ssv-card-media {

        height: 185px;

    }

}


/* ==========================================================
   19. ACCESIBILIDAD
========================================================== */

.ssv-services :is(a, button, .ssv-track):focus-visible {

    outline: 2px solid #0a89e8;

    outline-offset: 4px;

}


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

    .ssv-services *,
    .ssv-services *::before,
    .ssv-services *::after {

        transition: none !important;

        animation: none !important;

    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   INTERACTIVE HOME VIEW
   CSS COMPLETO CORREGIDO
========================================================== */


/* ==========================================================
   01. PROTECCIÓN CONTRA DESBORDAMIENTO HORIZONTAL

   Protege el documento mientras las diferentes secciones
   se adaptan a la pantalla.
========================================================== */

html,
body {

    max-width: 100%;

    overflow-x: clip;
    margin: 0px!important;

}


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

.sihx {

    --sihx-navy: #061b32;
    --sihx-blue: #0989e8;
    --sihx-cyan: #69dfff;
    --sihx-red: #ec1830;

    position: relative;

    isolation: isolate;

    width: 100%;

    overflow: hidden;

    /*
       Los 108px de la derecha reservan espacio
       para el menú flotante de computadora.
    */

    padding: 48px 108px 48px 24px;

    background: #061a30;

    color: #ffffff;

    font-family: Inter, Arial, sans-serif;

}


/* ==========================================================
   03. RESET LOCAL
========================================================== */

.sihx *,
.sihx *::before,
.sihx *::after {

    box-sizing: border-box;

}

.sihx button {

    font: inherit;

    cursor: pointer;

}

.sihx a {

    text-decoration: none;

}

.sihx h2,
.sihx h3,
.sihx p {

    margin-top: 0;

}


/* ==========================================================
   04. FONDO
========================================================== */

.sihx__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 19, 36, .97),
            rgba(5, 37, 65, .85) 50%,
            rgba(2, 20, 39, .97)
        ),

        url(
            "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1800&q=85"
        ) center / cover no-repeat;

}


/* ==========================================================
   05. CONTENEDOR
========================================================== */

.sihx__container {

    width: 100%;

    max-width: 1440px;

    min-width: 0;

    margin: 0 auto;

}


/* ==========================================================
   06. GRID PRINCIPAL

   Las tres columnas pueden reducirse sin forzar
   el ancho total de la página.
========================================================== */

.sihx__layout {

    display: grid;

    grid-template-columns:
        minmax(0, 310px)
        minmax(0, 1fr)
        minmax(0, 340px);

    align-items: center;

    gap: 22px;

    width: 100%;

    min-width: 0;

}


/* Protección general de las columnas */

.sihx__intro,
.sihx__house-column,
.sihx__info {

    min-width: 0;

    max-width: 100%;

}


/* ==========================================================
   07. INTRO
========================================================== */

.sihx__intro {

    position: relative;

    z-index: 2;

}


.sihx__eyebrow {

    display: block;

    margin-bottom: 12px;

    color: #71ddff;

    font-size: 14px;

    font-weight: 900;

}


.sihx__intro h2 {

    margin: 0 0 18px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(36px, 3vw, 52px);

    font-weight: 700;

    line-height: 1.06;

    overflow-wrap: normal;

}


.sihx__intro h2 span {

    display: block;

    color: #9ceaff;

}


.sihx__description {

    margin-bottom: 24px;

    color: #d3e5f1;

    font-size: 15px;

    line-height: 1.6;

}


/* ==========================================================
   08. SELECTOR
========================================================== */

.sihx__selector {

    display: grid;

    gap: 8px;

    width: 100%;

    min-width: 0;

}


.sihx__option {

    width: 100%;

    min-width: 0;

    min-height: 54px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 12px;

    border: 1px solid rgba(100, 213, 255, .38);

    border-radius: 13px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(13, 65, 105, .91),
            rgba(4, 37, 69, .9)
        );

    text-align: left;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.sihx__option:hover {

    transform: translateX(3px);

    border-color: #9ceaff;

}


.sihx__option.is-active {

    border-color: rgba(255, 255, 255, .4);

    background:
        linear-gradient(
            135deg,
            #f3273e,
            #d10d24
        );

    box-shadow:
        0 9px 24px rgba(223, 18, 40, .2);

}


/* ÍCONO */

.sihx__option-icon {

    width: 35px;

    height: 35px;

    flex: 0 0 35px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .17);

    color: #ffffff;

    font-size: 22px;

}


/* TEXTO */

.sihx__option-label {

    flex: 1;

    min-width: 0;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.4;

}


/* FLECHA */

.sihx__option-arrow {

    flex: 0 0 auto;

    font-size: 25px;

}


/* ==========================================================
   09. INSTRUCCIÓN
========================================================== */

.sihx__hint {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin: 17px 0 0;

    color: #a5c8de;

    font-size: 14px;

    line-height: 1.5;

}


.sihx__hint > span {

    color: #77e6ff;

    font-size: 20px;

}


/* ==========================================================
   10. COLUMNA DE LA CASA
========================================================== */

.sihx__house-column {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

}


/* ==========================================================
   11. ESCENARIO

   Aquí se corrige el desbordamiento:
   - ancho 100%
   - relación de aspecto fija
   - overflow hidden
========================================================== */

.sihx__house-stage {

    position: relative;

    isolation: isolate;

    width: 100%;

    max-width: 760px;

    min-width: 0;

    aspect-ratio: 760 / 520;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 20px;

    background:

        radial-gradient(
            circle at 50% 57%,
            rgba(26, 156, 235, .13),
            transparent 65%
        );

}


/* ==========================================================
   12. SVG
========================================================== */

.sihx__house-svg {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    max-width: 100%;

    overflow: hidden;

    filter:
        drop-shadow(
            0 12px 18px rgba(0, 0, 0, .2)
        );

}


/* ==========================================================
   13. ZONA SELECCIONADA
========================================================== */

.sihx__zone {

    transition: filter .25s ease;

}


.sihx[data-active="ac"] .sihx__zone--ac,

.sihx[data-active="insulation"] .sihx__zone--insulation,

.sihx[data-active="ducts"] .sihx__zone--ducts,

.sihx[data-active="attic"] .sihx__zone--attic,

.sihx[data-active="crawl"] .sihx__zone--crawl {

    filter:
        drop-shadow(
            0 0 9px rgba(49, 208, 255, .95)
        );

}


/* ==========================================================
   14. HOTSPOTS

   Se mantienen dentro del marco.
========================================================== */

.sihx__hotspot {

    position: absolute;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    gap: 7px;

    max-width: 145px;

    min-height: 40px;

    padding: 4px 10px 4px 5px;

    border: 1px solid #5ddaff;

    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(13, 110, 182, .96),
            rgba(4, 39, 72, .97)
        );

    box-shadow:
        0 0 17px rgba(31, 185, 255, .35),
        0 7px 16px rgba(0, 13, 28, .2);

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

    transition:
        background .2s ease,
        box-shadow .2s ease;

}


.sihx__hotspot:hover,
.sihx__hotspot.is-active {

    border-color: #b5f3ff;

    background:
        linear-gradient(
            135deg,
            #129ef7,
            #075ba9
        );

    box-shadow:
        0 0 22px rgba(53, 205, 255, .7);

}


/* ÍCONO DEL HOTSPOT */

.sihx__hotspot > span {

    width: 30px;

    height: 30px;

    flex: 0 0 30px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #0788d8;

    background: #ffffff;

    font-size: 19px;

}


/* NOMBRE DEL HOTSPOT */

.sihx__hotspot > strong {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 14px;

    font-weight: 800;

}


/* ==========================================================
   15. POSICIONES DE HOTSPOTS
========================================================== */

.sihx__hotspot--attic {

    top: 10%;

    left: 58%;

}


.sihx__hotspot--ducts {

    top: 38%;

    left: 5%;

}


.sihx__hotspot--insulation {

    top: 53%;

    right: 1%;

}


.sihx__hotspot--ac {

    top: 71%;

    left: 1%;

}


.sihx__hotspot--crawl {

    top: 84%;

    right: 3%;

}


/* ==========================================================
   16. INDICADOR INFERIOR
========================================================== */

.sihx__house-caption {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    max-width: 100%;

    margin-top: 7px;

    color: #a9d4e9;

    font-size: 14px;

    font-weight: 800;

    text-align: center;

    line-height: 1.4;

}


.sihx__house-caption > span {

    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #3ee2ac;

    box-shadow: 0 0 12px #3ee2ac;

}


/* ==========================================================
   17. PANEL INFORMATIVO

   Sin anchuras internas que puedan expandir el grid.
========================================================== */

.sihx__info {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    min-width: 0;

    max-width: 100%;

    padding: 23px;

    border: 1px solid rgba(113, 218, 255, .38);

    border-radius: 20px;

    background:

        linear-gradient(
            145deg,
            rgba(10, 64, 106, .97),
            rgba(3, 34, 64, .97)
        );

    box-shadow:
        0 17px 38px rgba(0, 15, 32, .22);

}


/* ==========================================================
   18. HEADER DEL PANEL
========================================================== */

.sihx__info-header {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

    margin-bottom: 20px;

}


/* ÍCONO */

.sihx__info-icon {

    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #159df6,
            #0866b4
        );

    font-size: 29px;

}


/* TÍTULOS */

.sihx__info-heading {

    flex: 1;

    min-width: 0;

}


.sihx__info-heading > span {

    display: block;

    margin-bottom: 6px;

    color: #8be9ff;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.3;

}


.sihx__info-heading h3 {

    margin: 0;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 27px;

    font-weight: 700;

    line-height: 1.16;

    overflow-wrap: break-word;

}


/* ==========================================================
   19. DESCRIPCIÓN
========================================================== */

.sihx__info-description {

    margin-bottom: 20px;

    color: #d6e9f5;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.65;

    overflow-wrap: break-word;

}


/* ==========================================================
   20. LISTA DE BENEFICIOS

   CORRECCIÓN PRINCIPAL:
   No utilizar .sihx__benefits li span
   porque modificaría también el texto.

   Cada elemento tiene su propia clase.
========================================================== */

.sihx__benefits {

    display: grid;

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

    gap: 14px;

    width: 100%;

    margin: 0 0 22px;

    padding: 0;

    list-style: none;

}


/* FILA */

.sihx__benefits li {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    color: #ffffff;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;

}


/* ÚNICAMENTE EL CHECK */

.sihx__check {

    width: 23px;

    height: 23px;

    flex: 0 0 23px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: #148de5;

    font-size: 14px;

    font-weight: 900;

    line-height: 1;

}


/* ÚNICAMENTE EL TEXTO */

.sihx__benefit-text {

    display: block;

    flex: 1 1 auto;

    width: auto;

    min-width: 0;

    height: auto;

    padding: 0;

    margin: 0;

    color: #e8f4fc;

    background: transparent;

    border: 0;

    border-radius: 0;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;

    overflow-wrap: break-word;

    box-shadow: none;

}


/* ==========================================================
   21. ESTADO
========================================================== */

.sihx__status {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 0 0 20px;

    padding: 17px 0;

    border-top: 1px solid rgba(255, 255, 255, .13);

}


/* PUNTO VERDE */

.sihx__status > span {

    width: 9px;

    height: 9px;

    flex: 0 0 9px;

    margin-top: 7px;

    border-radius: 50%;

    background: #45e4b2;

}


/* TEXTO */

.sihx__status p {

    flex: 1;

    min-width: 0;

    margin: 0;

    color: #a6d2e9;

    font-size: 14px;

    line-height: 1.5;

    overflow-wrap: break-word;

}


/* ==========================================================
   22. BOTÓN PRINCIPAL
========================================================== */

.sihx__cta {

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    width: 100%;

    padding: 12px 18px;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #ff2b43,
            #cf0b23
        );

    font-size: 14px;

    font-weight: 900;

    line-height: 1.3;

}


.sihx__cta:hover {

    filter: brightness(1.1);

}


/* ==========================================================
   23. CONTACTO
========================================================== */

.sihx__contact {

    display: block;

    margin-top: 17px;

    color: #83e2ff;

    font-size: 14px;

    font-weight: 800;

    text-align: center;

}


/* ==========================================================
   24. LAPTOP

   Desde este ancho, el panel pasa debajo.
========================================================== */

@media (max-width: 1200px) {

    .sihx__layout {

        grid-template-columns:
            minmax(0, 290px)
            minmax(0, 1fr);

        gap: 22px;

    }


    .sihx__info {

        grid-column: 1 / -1;

        display: grid;

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

        gap: 16px 25px;

    }


    .sihx__info-header {

        grid-column: 1 / -1;

        margin-bottom: 0;

    }


    .sihx__info-description {

        margin: 0;

    }


    .sihx__benefits {

        grid-column: 2;

        grid-row: 2 / span 2;

        margin: 0;

    }


    .sihx__status {

        margin: 0;

    }


    .sihx__cta {

        grid-column: 1;

    }


    .sihx__contact {

        grid-column: 2;

        align-self: center;

        margin: 0;

    }

}


/* ==========================================================
   25. TABLET / MÓVIL

   Desaparece el menú flotante lateral en <=899px,
   así que eliminamos el espacio reservado.
========================================================== */

@media (max-width: 899px) {

    .sihx {

        padding: 45px 18px;

    }


    .sihx__layout {

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

        gap: 30px;

    }


    .sihx__intro h2 {

        max-width: 640px;

        font-size: clamp(39px, 7vw, 55px);

    }


    .sihx__description {

        max-width: 650px;

    }


    /* Selector horizontal */

    .sihx__selector {

        display: flex;

        gap: 9px;

        overflow-x: auto;

        overflow-y: hidden;

        padding-bottom: 9px;

        scroll-snap-type: x proximity;

        scrollbar-width: none;

    }


    .sihx__selector::-webkit-scrollbar {

        display: none;

    }


    .sihx__option {

        width: auto;

        min-width: max-content;

        flex: 0 0 auto;

        scroll-snap-align: start;

    }


    .sihx__option-arrow {

        display: none;

    }


    /* Casa */

    .sihx__house-stage {

        max-width: 760px;

    }


    /* Panel vuelve a una columna */

    .sihx__info {

        display: flex;

        flex-direction: column;

        grid-column: auto;

        gap: 0;

        padding: 25px;

    }


    .sihx__info-header {

        margin-bottom: 19px;

    }


    .sihx__info-description {

        margin-bottom: 22px;

    }


    .sihx__benefits {

        margin-bottom: 22px;

    }


    .sihx__status {

        margin-bottom: 20px;

    }


    .sihx__contact {

        margin-top: 17px;

    }

}


/* ==========================================================
   26. CELULAR
========================================================== */

@media (max-width: 600px) {

    .sihx {

        padding: 39px 12px;

    }


    .sihx__layout {

        gap: 25px;

    }


    .sihx__intro h2 {

        font-size: 43px;

    }


    .sihx__house-stage {

        border-radius: 13px;

    }


    .sihx__hotspot {

        min-height: 36px;

        padding: 3px 8px 3px 4px;

        font-size: 14px;

    }


    .sihx__hotspot > span {

        width: 26px;

        height: 26px;

        flex-basis: 26px;

        font-size: 16px;

    }


    .sihx__hotspot--attic {

        top: 5%;

        left: 57%;

    }


    .sihx__hotspot--ducts {

        top: 36%;

        left: 5%;

    }


    .sihx__hotspot--insulation {

        top: 50%;

        right: 0;

    }


    .sihx__hotspot--ac {

        top: 71%;

        left: 0;

    }


    .sihx__hotspot--crawl {

        top: 84%;

        right: 2%;

    }


    .sihx__info {

        padding: 22px;

    }

}


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

   Los hotspots muestran únicamente iconos, pero
   conservan su nombre en aria-label.

   El selector superior mantiene los nombres visibles.
========================================================== */

@media (max-width: 430px) {

    .sihx__intro h2 {

        font-size: 38px;

    }


    .sihx__hotspot {

        width: 38px;

        height: 38px;

        min-height: 38px;

        justify-content: center;

        padding: 3px;

    }


    .sihx__hotspot > strong {

        display: none;

    }


    .sihx__hotspot > span {

        width: 28px;

        height: 28px;

        flex-basis: 28px;

    }


    .sihx__house-caption {

        font-size: 14px;

    }


    .sihx__info-heading h3 {

        font-size: 25px;

    }

}


/* ==========================================================
   28. ACCESIBILIDAD
========================================================== */

.sihx :is(button, a):focus-visible {

    outline: 2px solid #9cecff;

    outline-offset: 4px;

}


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

    .sihx *,
    .sihx *::before,
    .sihx *::after {

        animation: none !important;

        transition: none !important;

    }

}

/* ==========================================================
   SANTOS AC & INSULATION
   SECCIÓN 05 — ENERGY SAVINGS ESTIMATOR
   CSS INDEPENDIENTE
========================================================= */


/* ==========================================================
   01. VARIABLES Y CONTENEDOR
========================================================== */

.see {

    --see-navy: #102e52;
    --see-blue: #1689e8;
    --see-cyan: #57d5ff;
    --see-muted: #5e7892;
    --see-border: #dceaf5;

    position: relative;

    isolation: isolate;

    width: 100%;

    min-width: 0;

    padding: 35px 0 45px;

    background: #eef7ff;

    color: var(--see-navy);

    font-family: Inter, Arial, sans-serif;

}


.see *,
.see *::before,
.see *::after {

    box-sizing: border-box;

}


.see button,
.see input {

    font: inherit;

}


.see button {

    cursor: pointer;

}


.see a {

    text-decoration: none;

}


.see h2,
.see h3,
.see p {

    margin-top: 0;

}


.see svg {

    width: 22px;

    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.see-container {

    width: min(1480px, calc(100% - 48px));

    margin: 0 auto;

}


/* ==========================================================
   02. DISTRIBUCIÓN PRINCIPAL
========================================================== */

.see-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.95fr)
        minmax(0, .85fr);

    gap: 18px;

    align-items: stretch;

}


.see-estimator,
.see-why {

    min-width: 0;

    max-width: 100%;

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

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 27px rgba(14, 79, 135, .055);

}


/* ==========================================================
   03. ESTIMADOR
========================================================== */

.see-estimator {

    padding: 24px;

}


/* ==========================================================
   04. ENCABEZADO
========================================================== */

.see-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 25px;

}


.see-heading-icon {

    width: 47px;

    height: 47px;

    flex: 0 0 47px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color: #158ce8;

    background: #eaf6ff;

}


.see-heading-icon svg {

    width: 31px;

    height: 31px;

    fill: currentColor;

    stroke: none;

}


.see-heading > div {

    min-width: 0;

}


.see-eyebrow {

    display: block;

    margin-bottom: 5px;

    color: #1687db;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .02em;

}


.see-heading h2 {

    margin-bottom: 6px;

    color: #102d51;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(26px, 2.1vw, 33px);

    font-weight: 700;

    line-height: 1.1;

}


.see-heading p {

    max-width: 610px;

    margin-bottom: 0;

    color: #647f98;

    font-size: 14px;

    line-height: 1.5;

}


/* ==========================================================
   05. GRID INTERIOR
========================================================== */

.see-estimator-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr)
        minmax(0, 1.2fr);

    gap: 18px;

    align-items: center;

}


/* ==========================================================
   06. CONTROLES
========================================================== */

.see-controls {

    min-width: 0;

    display: grid;

    gap: 20px;

}


.see-control {

    min-width: 0;

}


.see-control-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 13px;

}


.see-control-heading label {

    color: #163657;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.35;

}


.see-control-heading output {

    min-width: 65px;

    padding: 6px 8px;

    border: 1px solid #dfebf8;

    border-radius: 8px;

    color: #0a68bc;

    background: #f4f9ff;

    font-size: 14px;

    font-weight: 900;

    text-align: center;

}


/* ==========================================================
   07. SLIDERS
========================================================== */

.see-control input[type="range"] {

    display: block;

    width: 100%;

    height: 7px;

    margin: 0;

    border: 0;

    border-radius: 99px;

    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;

    background:

        linear-gradient(
            90deg,
            #137fe1 0%,
            #62dfff var(--see-progress, 50%),
            #dce8f3 var(--see-progress, 50%),
            #dce8f3 100%
        );

}


.see-control input[type="range"]::-webkit-slider-thumb {

    width: 19px;

    height: 19px;

    border: 3px solid #ffffff;

    border-radius: 50%;

    appearance: none;

    -webkit-appearance: none;

    background: #168ce9;

    box-shadow:
        0 2px 10px rgba(9, 104, 204, .25);

}


.see-control input[type="range"]::-moz-range-thumb {

    width: 13px;

    height: 13px;

    border: 3px solid #ffffff;

    border-radius: 50%;

    background: #168ce9;

}


.see-range-labels {

    display: flex;

    justify-content: space-between;

    gap: 9px;

    margin-top: 11px;

    color: #718aa2;

    font-size: 14px;

    line-height: 1.35;

}


/* ==========================================================
   08. BOTÓN RESET
========================================================== */

.see-reset {

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 1px solid #cfe4f6;

    border-radius: 10px;

    color: #0876cf;

    background: #f4faff;

    font-size: 14px;

    font-weight: 800;

    transition:
        background .2s ease,
        transform .2s ease;

}


.see-reset:hover {

    background: #e3f3ff;

    transform: translateY(-2px);

}


.see-reset svg {

    width: 18px;

    height: 18px;

}


/* ==========================================================
   09. INDICADOR CIRCULAR
========================================================== */

.see-score-panel {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 13px;

}


.see-gauge {

    position: relative;

    width: min(190px, 100%);

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:

        conic-gradient(
            #17caa4 0deg,
            #00b68e 80deg,
            #5cd98c 150deg,
            #c6dd22 215deg,
            #ffbf22 var(--see-angle),
            #dce8f4 var(--see-angle),
            #dce8f4 360deg
        );

    transition: background .3s ease;

}


.see-gauge::before {

    content: "";

    position: absolute;

    inset: 15px;

    border-radius: 50%;

    background: #ffffff;

}


.see-gauge-inner {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.see-gauge-caption {

    max-width: 115px;

    color: #49718e;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.2;

}


.see-gauge-inner strong {

    margin-top: 5px;

    color: #102f53;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(49px, 5vw, 66px);

    line-height: 1;

}


.see-gauge-inner small {

    color: #6487a2;

    font-size: 14px;

}


/* ==========================================================
   10. EXPLICACIÓN DEL ÍNDICE
========================================================== */

.see-score-description {

    max-width: 210px;

    text-align: center;

}


.see-score-description strong {

    display: block;

    margin-bottom: 6px;

    color: #0d6aba;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.35;

}


.see-score-description p {

    margin: 0;

    color: #5d7892;

    font-size: 14px;

    line-height: 1.45;

}


/* ==========================================================
   11. TARJETA DE RESULTADOS
========================================================== */

.see-results {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 17px;

    padding: 18px;

    border: 1px solid #d8eaf8;

    border-radius: 14px;

    background:

        linear-gradient(
            145deg,
            #eff8ff,
            #f9fcff
        );

}


/* ==========================================================
   12. ENCABEZADO DE RESULTADOS
========================================================== */

.see-results-top {

    display: flex;

    align-items: center;

    gap: 10px;

}


.see-results-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: #087fdb;

    background: #ddf0ff;

}


.see-results-top > div {

    min-width: 0;

}


.see-results-top > div > span {

    display: block;

    margin-bottom: 4px;

    color: #577c98;

    font-size: 14px;

    font-weight: 800;

}


.see-results-top strong {

    display: block;

    color: #0e5fa8;

    font-size: 16px;

    font-weight: 900;

    overflow-wrap: break-word;

}


/* ==========================================================
   13. RESULTADO DESTACADO
========================================================== */

.see-result-highlight {

    padding: 13px 0;

    border-top: 1px solid #d9eaf8;

    border-bottom: 1px solid #d9eaf8;

}


.see-result-highlight > span {

    display: block;

    margin-bottom: 8px;

    color: #0878d1;

    font-size: 14px;

    font-weight: 900;

}


.see-result-highlight h3 {

    margin-bottom: 8px;

    color: #0b355e;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 23px;

    line-height: 1.18;

}


.see-result-highlight p {

    margin: 0;

    color: #587891;

    font-size: 14px;

    line-height: 1.55;

}


/* ==========================================================
   14. RESULTADOS SECUNDARIOS
========================================================== */

.see-result-details {

    display: grid;

    gap: 10px;

}


.see-result-details > div {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    color: #355e7d;

    font-size: 14px;

    line-height: 1.4;

}


.see-detail-dot {

    width: 7px;

    height: 7px;

    flex: 0 0 7px;

    margin-top: 6px;

    border-radius: 50%;

    background: #1395ed;

}


/* ==========================================================
   15. CTA
========================================================== */

.see-estimate-button {

    min-height: 45px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    padding: 10px 15px;

    border-radius: 9px;

    color: #ffffff;

    background:

        linear-gradient(
            135deg,
            #e91e33,
            #c90b1d
        );

    font-size: 14px;

    font-weight: 900;

    line-height: 1.3;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.see-estimate-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(222, 18, 39, .2);

}


.see-estimate-button svg {

    width: 18px;

    height: 18px;

    flex-shrink: 0;

}


/* ==========================================================
   16. AVISO
========================================================== */

.see-disclaimer {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 22px;

    padding-top: 14px;

    border-top: 1px solid #e2ecf5;

}


.see-disclaimer svg {

    flex: 0 0 21px;

    width: 21px;

    height: 21px;

    color: #1686d9;

}


.see-disclaimer p {

    margin: 0;

    color: #6e869b;

    font-size: 14px;

    line-height: 1.5;

}


/* ==========================================================
   17. WHY CHOOSE SANTOS
========================================================== */

.see-why {

    position: relative;

    isolation: isolate;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 27px;

}


/* ==========================================================
   18. ÍCONO DE FONDO
========================================================== */

.see-why-background-icon {

    position: absolute;

    z-index: -1;

    top: 20px;

    right: -17px;

    width: 160px !important;

    height: 160px !important;

    color: #e7f3ff;

    stroke-width: 5px;

    opacity: .8;

    pointer-events: none;

}


/* ==========================================================
   19. TÍTULO WHY CHOOSE
========================================================== */

.see-why-eyebrow {

    display: block;

    margin-bottom: 12px;

    color: #0e82d8;

    font-size: 14px;

    font-weight: 900;

}


.see-why h2 {

    margin-bottom: 13px;

    color: #102f52;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(29px, 2.5vw, 37px);

    line-height: 1.1;

}


.see-why-intro {

    max-width: 315px;

    margin-bottom: 25px;

    color: #5d7992;

    font-size: 14px;

    line-height: 1.6;

}


/* ==========================================================
   20. BENEFICIOS
========================================================== */

.see-why-list {

    display: grid;

    gap: 21px;

    margin: 0 0 29px;

    padding: 0;

    list-style: none;

}


.see-why-list li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-width: 0;

}


/* SOLO EL CÍRCULO */

.see-why-check {

    width: 27px;

    height: 27px;

    flex: 0 0 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #268fff,
        #0869ca
    );

}


.see-why-check svg {

    width: 16px;

    height: 16px;

    stroke-width: 3;

}


/* SOLO EL TEXTO */

.see-why-text {

    flex: 1;

    min-width: 0;

    color: #234361;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.5;

    overflow-wrap: break-word;

}


/* ==========================================================
   21. CONTACTO WHY CHOOSE
========================================================== */

.see-why-contact {

    display: grid;

    gap: 10px;

    margin-top: auto;

    padding-top: 20px;

    border-top: 1px solid #dceaf5;

}


.see-why-contact > span {

    color: #53758f;

    font-size: 14px;

    font-weight: 800;

}


.see-why-contact a {

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 9px 12px;

    border-radius: 9px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #124e85,
        #082949
    );

    font-size: 14px;

    font-weight: 900;

}


.see-why-contact a:hover {

    background: #086fbd;

}


/* ==========================================================
   22. RESPONSIVE DESKTOP MEDIANO
========================================================== */

@media (max-width: 1350px) {

    .see-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 340px);

    }


    .see-estimator-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, .8fr);

    }


    .see-results {

        grid-column: 1 / -1;

        display: grid;

        grid-template-columns: 1fr 1fr;

        align-items: center;

        gap: 13px 20px;

    }


    .see-results-top,
    .see-result-highlight {

        grid-column: 1 / -1;

    }


    .see-estimate-button {

        grid-column: 1 / -1;

    }

}


/* ==========================================================
   23. RESPONSIVE TABLET
========================================================== */

@media (max-width: 1050px) {

    .see-layout {

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

    }


    .see-why {

        display: grid;

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

        gap: 0 25px;

    }


    .see-why-eyebrow,
    .see-why h2,
    .see-why-intro {

        grid-column: 1;

    }


    .see-why-list {

        grid-column: 2;

        grid-row: 1 / 4;

        align-self: center;

    }


    .see-why-contact {

        grid-column: 1 / -1;

        margin-top: 15px;

    }

}


/* ==========================================================
   24. RESPONSIVE CELULAR
========================================================== */

@media (max-width: 720px) {

    .see {

        padding: 30px 0 40px;

    }


    .see-container {

        width: calc(100% - 24px);

    }


    .see-estimator {

        padding: 20px;

    }


    .see-heading {

        align-items: flex-start;

    }


    .see-heading h2 {

        font-size: 29px;

    }


    .see-estimator-layout {

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

        gap: 25px;

    }


    .see-score-panel {

        padding: 15px 0;

        border-top: 1px solid #e1ecf5;

        border-bottom: 1px solid #e1ecf5;

    }


    .see-gauge {

        width: 190px;

    }


    .see-score-description {

        max-width: 350px;

    }


    .see-results {

        grid-column: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;

    }


    .see-why {

        display: flex;

        flex-direction: column;

        gap: 0;

        padding: 24px;

    }


    .see-why-list {

        margin-bottom: 25px;

    }

}


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

@media (max-width: 400px) {

    .see-container {

        width: calc(100% - 16px);

    }


    .see-estimator {

        padding: 17px;

    }


    .see-heading-icon {

        width: 40px;

        height: 40px;

        flex-basis: 40px;

    }


    .see-heading h2 {

        font-size: 26px;

    }


    .see-why {

        padding: 20px;

    }

}


/* ==========================================================
   26. ACCESIBILIDAD
========================================================== */

.see :is(a, button, input):focus-visible {

    outline: 2px solid #0787e6;

    outline-offset: 4px;

}


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

    .see *,
    .see *::before,
    .see *::after {

        animation: none !important;

        transition: none !important;

    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   SECCIÓN 06 — REAL PROJECTS
   CSS INDEPENDIENTE
========================================================== */


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

.srp {

    --srp-navy: #0b2c50;
    --srp-blue: #087ee4;
    --srp-cyan: #5cddff;
    --srp-gap: 15px;

    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    padding: 42px 0 52px;

    overflow: hidden;

    color: var(--srp-navy);

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(0, 153, 255, .065),
            transparent 32%
        ),
        #f1f9ff;

    font-family: Inter, Arial, sans-serif;

}


/* ==========================================================
   02. RESET LOCAL
========================================================== */

.srp *,
.srp *::before,
.srp *::after {

    box-sizing: border-box;

}

.srp a {

    text-decoration: none;

}

.srp button {

    font: inherit;
    cursor: pointer;

}

.srp h2,
.srp h3,
.srp p {

    margin-top: 0;

}


/* ==========================================================
   03. CONTENEDOR
========================================================== */

.srp-container {

    width: min(1480px, calc(100% - 60px));

    min-width: 0;

    margin: 0 auto;

}


/* ==========================================================
   04. HEADER
========================================================== */

.srp-header {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 23px;

}

.srp-header-content {

    min-width: 0;

}

.srp-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 9px;

    color: #087bdb;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .04em;

}

.srp-eyebrow > span {

    color: #009eff;

    font-size: 17px;

}

.srp-header h2 {

    margin: 0 0 8px;

    color: #102e52;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(31px, 3vw, 44px);

    font-weight: 700;

    line-height: 1.08;

}

.srp-header h2 span {

    color: #087ddd;

}

.srp-header p {

    margin: 0;

    color: #587590;

    font-size: 14px;

    line-height: 1.55;

}


/* ==========================================================
   05. ACCIONES DEL HEADER
========================================================== */

.srp-header-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}

.srp-view-all {

    min-height: 47px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 0 20px;

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #15538b,
            #082846
        );

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        0 8px 18px rgba(2, 42, 80, .14);

    transition:
        transform .25s ease,
        background .25s ease;

}

.srp-view-all:hover {

    transform: translateY(-2px);

    background: #0879d2;

}

.srp-view-all svg {

    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   06. FLECHAS
========================================================== */

.srp-arrows {

    display: flex;

    gap: 8px;

}

.srp-arrow {

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid #d5e9f8;
    border-radius: 12px;

    color: #087bdc;

    background: #ffffff;

    box-shadow:
        0 5px 13px rgba(6, 72, 126, .055);

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}

.srp-arrow:not(:disabled):hover {

    color: #ffffff;

    background: #087ee4;

    transform: translateY(-2px);

}

.srp-arrow:disabled {

    opacity: .35;

    cursor: not-allowed;

}

.srp-arrow svg {

    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   07. TRACK DEL CARRUSEL
========================================================== */

.srp-track {

    position: relative;

    display: grid;

    grid-auto-flow: column;

    grid-auto-columns:
        calc((100% - 3 * var(--srp-gap)) / 4);

    align-items: stretch;

    gap: var(--srp-gap);

    width: 100%;
    min-width: 0;

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

    padding: 4px 1px 16px;

    scroll-snap-type: x mandatory;

    scroll-padding-inline: 1px;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}

.srp-track::-webkit-scrollbar {

    display: none;

}


/* ==========================================================
   08. TARJETAS
========================================================== */

.srp-card {

    min-width: 0;

    overflow: hidden;

    border: 1px solid #d8e8f4;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 6px 17px rgba(5, 58, 108, .075);

    scroll-snap-align: start;

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

.srp-card:hover {

    transform: translateY(-3px);

    border-color: #9ed8fc;

    box-shadow:
        0 15px 30px rgba(5, 89, 157, .13);

}

.srp-card-link {

    display: flex;

    flex-direction: column;

    height: 100%;

    color: inherit;

}


/* ==========================================================
   09. CONTENEDOR DE FOTOGRAFÍA
========================================================== */

.srp-card-image {

    position: relative;

    isolation: isolate;

    height: 210px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 20%,
            #176b9b,
            #071d35
        );

}

.srp-card-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}

.srp-card:hover .srp-card-image img {

    transform: scale(1.055);

}


/* Superposición inferior */

.srp-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(3, 26, 49, .2),
            transparent 35%,
            rgba(3, 26, 49, .16)
        );

}


/* ==========================================================
   10. RESPALDO SI FALTA UNA FOTO
========================================================== */

.srp-image-fallback {

    position: absolute;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    color: #b4eaff;

    font-size: 17px;

    font-weight: 800;

    text-align: center;

}

.srp-card-image.is-missing img {

    display: none;

}

.srp-card-image.is-missing .srp-image-fallback {

    display: flex;

}


/* ==========================================================
   11. ETIQUETA SOBRE LA FOTO
========================================================== */

.srp-category {

    position: absolute;

    z-index: 2;

    top: 13px;
    left: 13px;

    padding: 8px 11px;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 8px;

    color: #ffffff;

    background: rgba(4, 33, 58, .78);

    backdrop-filter: blur(10px);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .015em;

}


/* ==========================================================
   12. CUERPO DE TARJETA
========================================================== */

.srp-card-content {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 12px;

    min-height: 124px;

    padding: 17px;

}

.srp-card-content > div {

    flex: 1;

    min-width: 0;

}

.srp-card-label {

    display: block;

    margin-bottom: 7px;

    color: #0b88e6;

    font-size: 14px;

    font-weight: 900;

}

.srp-card-content h3 {

    margin: 0 0 6px;

    color: #123352;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 21px;

    font-weight: 700;

    line-height: 1.2;

}

.srp-card-content p {

    margin: 0;

    color: #617c96;

    font-size: 14px;

    line-height: 1.45;

}


/* ==========================================================
   13. FLECHA DE TARJETA
========================================================== */

.srp-card-arrow {

    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: grid;
    place-items: center;

    border: 1px solid #cae7fc;
    border-radius: 50%;

    color: #0785e7;

    background: #f0f9ff;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;

}

.srp-card-arrow svg {

    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

}

.srp-card:hover .srp-card-arrow {

    color: #ffffff;

    background: #0785e7;

    transform: translateX(3px);

}


/* ==========================================================
   14. INDICADOR INFERIOR
========================================================== */

.srp-bottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 9px;

}

.srp-progress {

    flex: 1;

    height: 5px;

    overflow: hidden;

    border-radius: 99px;

    background: #dcebf7;

}

.srp-progress > span {

    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #087de0,
            #67e1ff
        );

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .18s ease;

}

.srp-counter {

    display: flex;

    align-items: center;

    gap: 5px;

    flex-shrink: 0;

    color: #728da4;

    font-size: 14px;

    font-weight: 800;

}

.srp-counter strong {

    color: #087bdc;

    font-weight: 900;

}


/* ==========================================================
   15. LAPTOP — TRES TARJETAS
========================================================== */

@media (max-width: 1260px) {

    .srp-track {

        grid-auto-columns:
            calc((100% - 2 * var(--srp-gap)) / 3);

    }

}


/* ==========================================================
   16. TABLET — DOS TARJETAS
========================================================== */

@media (max-width: 900px) {

    .srp-container {

        width: calc(100% - 38px);

    }

    .srp-track {

        grid-auto-columns:
            calc((100% - var(--srp-gap)) / 2);

    }

    .srp-card-image {

        height: 215px;

    }

}


/* ==========================================================
   17. CELULAR
========================================================== */

@media (max-width: 620px) {

    .srp {

        padding: 38px 0 45px;

    }

    .srp-container {

        width: calc(100% - 28px);

    }

    .srp-header {

        flex-direction: column;

        align-items: stretch;

        gap: 20px;

    }

    .srp-header h2 {

        font-size: 36px;

    }

    .srp-header-actions {

        justify-content: space-between;

    }

    .srp-view-all {

        padding: 0 14px;

        font-size: 14px;

    }

    .srp-track {

        grid-auto-columns: 85%;

        gap: 12px;

    }

    .srp-card-image {

        height: 220px;

    }

    .srp-card-content {

        min-height: 128px;

    }

}


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

@media (max-width: 390px) {

    .srp-container {

        width: calc(100% - 20px);

    }

    .srp-header h2 {

        font-size: 32px;

    }

    .srp-header-actions {

        gap: 7px;

    }

    .srp-arrows {

        gap: 5px;

    }

    .srp-arrow {

        width: 39px;
        height: 39px;

    }

    .srp-track {

        grid-auto-columns: 88%;

    }

}


/* ==========================================================
   19. ACCESIBILIDAD
========================================================== */

.srp :is(a, button, .srp-track):focus-visible {

    outline: 2px solid #087fe4;

    outline-offset: 4px;

}

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

    .srp *,
    .srp *::before,
    .srp *::after {

        transition: none !important;
        animation: none !important;

    }

}



/* ==========================================================
   SANTOS AC & INSULATION
   SECCIÓN 07 — SERVICE AREAS
   CSS INDEPENDIENTE
========================================================== */


/* ==========================================================
   01. VARIABLES Y SECCIÓN
========================================================== */

.ssa {

    --ssa-navy: #092b4e;
    --ssa-blue: #087edf;
    --ssa-cyan: #62dcff;
    --ssa-red: #d71327;
    --ssa-muted: #5d7893;

    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    padding: 48px 0 57px;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(0, 146, 255, .09),
            transparent 36%
        ),
        #eff8ff;

    color: var(--ssa-navy);

    font-family: Inter, Arial, sans-serif;

}


/* ==========================================================
   02. RESET LOCAL
========================================================== */

.ssa *,
.ssa *::before,
.ssa *::after {

    box-sizing: border-box;

}

.ssa a {

    text-decoration: none;

}

.ssa button,
.ssa input {

    font: inherit;

}

.ssa button {

    cursor: pointer;

}

.ssa h2,
.ssa h3,
.ssa h4,
.ssa p {

    margin-top: 0;

}

.ssa svg {

    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   03. CONTENEDOR
========================================================== */

.ssa-container {

    width: min(1480px, calc(100% - 54px));

    min-width: 0;

    margin: 0 auto;

}


/* ==========================================================
   04. ENCABEZADO GENERAL
========================================================== */

.ssa-heading {

    margin-bottom: 25px;

}

.ssa-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: var(--ssa-blue);

    font-size: 14px;
    font-weight: 900;

}

.ssa-eyebrow svg {

    width: 16px;
    height: 16px;

}

.ssa-heading h2 {

    margin-bottom: 10px;

    color: #102f54;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(33px, 3.2vw, 45px);

    font-weight: 700;

    line-height: 1.08;

}

.ssa-heading h2 span {

    color: var(--ssa-blue);

}

.ssa-heading > p {

    max-width: 800px;

    margin: 0;

    color: #5a7590;

    font-size: 14px;

    line-height: 1.65;

}


/* ==========================================================
   05. GRID PRINCIPAL
========================================================== */

.ssa-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 2.3fr)
        minmax(0, .85fr);

    align-items: stretch;

    gap: 18px;

    width: 100%;
    min-width: 0;

}


/* Tarjetas principales */

.ssa-main,
.ssa-contact-card {

    min-width: 0;

    border: 1px solid #d9eaf7;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 28px rgba(7, 69, 121, .06);

}


/* ==========================================================
   06. TARJETA PRINCIPAL
========================================================== */

.ssa-main {

    overflow: hidden;

}

.ssa-main-layout {

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.35fr);

    width: 100%;
    height: 100%;

    min-width: 0;

}


/* ==========================================================
   07. COLUMNA INFORMATIVA
========================================================== */

.ssa-info {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 28px;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(32, 162, 242, .08),
            transparent 55%
        ),
        #ffffff;

}

.ssa-info-label {

    display: block;

    margin-bottom: 13px;

    color: #097bd1;

    font-size: 14px;

    font-weight: 900;

}

.ssa-info h3 {

    margin-bottom: 15px;

    color: #103153;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(28px, 2.2vw, 37px);

    font-weight: 700;

    line-height: 1.13;

}

.ssa-info h3 span {

    color: #087ee0;

}

.ssa-info > p:not(.ssa-coverage-note) {

    margin-bottom: 24px;

    color: #5c7993;

    font-size: 14px;

    line-height: 1.65;

}


/* ==========================================================
   08. LISTA DE ÁREAS
========================================================== */

.ssa-service-list {

    display: grid;

    gap: 14px;

    margin-bottom: 25px;

}

.ssa-service-item {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    min-width: 0;

    color: #244666;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.5;

}


/* Únicamente el círculo */

.ssa-service-check {

    width: 23px;
    height: 23px;

    flex: 0 0 23px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #168efa,
            #0866be
        );

}

.ssa-service-check svg {

    width: 15px;
    height: 15px;

    stroke-width: 3;

}


/* ==========================================================
   09. CTA IZQUIERDO
========================================================== */

.ssa-info-button {

    min-height: 48px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    align-self: flex-start;

    margin-top: auto;

    padding: 10px 17px;

    border-radius: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #124f89,
            #092c52
        );

    font-size: 14px;

    font-weight: 900;

    transition:
        transform .2s ease,
        background .2s ease;

}

.ssa-info-button:hover {

    transform: translateY(-2px);

    background: #087bdb;

}

.ssa-info-button svg {

    width: 17px;
    height: 17px;

}


/* ==========================================================
   10. NOTA DE COBERTURA
========================================================== */

.ssa-coverage-note {

    margin: 17px 0 0;

    color: #758da1;

    font-size: 14px;

    line-height: 1.5;

}


/* ==========================================================
   11. COLUMNA DEL MAPA
========================================================== */

.ssa-map-column {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 13px;

    border-left: 1px solid #e3eef7;

    background: #f7fbff;

}


/* ==========================================================
   12. HEADER DEL MAPA
========================================================== */

.ssa-map-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    padding: 5px 3px 15px;

}

.ssa-map-location {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

}

.ssa-map-location-icon {

    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #148cf2,
            #0863b4
        );

}

.ssa-map-location-icon svg {

    width: 21px;
    height: 21px;

}

.ssa-map-location > div {

    min-width: 0;

}

.ssa-map-location strong {

    display: block;

    color: #143858;

    font-size: 15px;

    font-weight: 900;

}

.ssa-map-location > div > span {

    display: block;

    margin-top: 3px;

    color: #68849e;

    font-size: 14px;

}


/* ==========================================================
   13. TABS
========================================================== */

.ssa-map-tabs {

    display: flex;

    gap: 4px;

    padding: 4px;

    border: 1px solid #d7e8f4;

    border-radius: 10px;

    background: #ecf5fc;

}

.ssa-map-tab {

    min-height: 36px;

    padding: 7px 12px;

    border: 0;

    border-radius: 7px;

    color: #607f98;

    background: transparent;

    font-size: 14px;

    font-weight: 800;

}

.ssa-map-tab.is-active {

    color: #ffffff;

    background: #087ee0;

}


/* ==========================================================
   14. MAPA REAL
========================================================== */

.ssa-map-view {

    position: relative;

    flex: 1;

    min-width: 0;

    min-height: 340px;

    overflow: hidden;

    border: 1px solid #d2e5f3;

    border-radius: 11px;

    background: #dcecf7;

}

.ssa-map-view iframe {

    display: block;

    width: 100%;
    height: 100%;

    min-height: 340px;

    border: 0;

}


/* ==========================================================
   15. BOTÓN SOBRE EL MAPA
========================================================== */

.ssa-open-map {

    position: absolute;

    z-index: 2;

    right: 12px;
    bottom: 12px;

    min-height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    max-width: calc(100% - 24px);

    padding: 8px 13px;

    border: 1px solid #d1e6f5;

    border-radius: 9px;

    color: #0d5a99;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(7, 43, 74, .2);

    font-size: 14px;

    font-weight: 900;

}

.ssa-open-map:hover {

    color: #ffffff;

    background: #087ee0;

}

.ssa-open-map svg {

    width: 17px;
    height: 17px;

}


/* ==========================================================
   16. VISTA DE DETALLES
========================================================== */

.ssa-details-view {

    flex: 1;

    min-height: 340px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: 27px;

    border: 1px solid #d3e8f8;

    border-radius: 11px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(22, 158, 245, .1),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #eaf6ff
        );

}

.ssa-details-view[hidden],
.ssa-map-view[hidden] {

    display: none !important;

}

.ssa-details-icon {

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border-radius: 14px;

    color: #ffffff;

    background: #087ee0;

}

.ssa-details-icon svg {

    width: 27px;
    height: 27px;

}

.ssa-details-eyebrow {

    display: block;

    margin-bottom: 10px;

    color: #087ee0;

    font-size: 14px;

    font-weight: 900;

}

.ssa-details-view h4 {

    max-width: 400px;

    margin-bottom: 13px;

    color: #103556;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 30px;

    line-height: 1.1;

}

.ssa-details-view p {

    max-width: 430px;

    margin-bottom: 19px;

    color: #597891;

    font-size: 14px;

    line-height: 1.6;

}

.ssa-details-view a {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #087bd8;

    font-size: 14px;

    font-weight: 900;

}


/* ==========================================================
   17. PIE DEL MAPA
========================================================== */

.ssa-map-footer {

    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    padding: 14px 3px 3px;

}

.ssa-map-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #17649d;

    font-size: 14px;

    font-weight: 900;

}

.ssa-map-status > span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #23cda1;

}

.ssa-map-disclaimer {

    color: #728ca2;

    font-size: 14px;

}


/* ==========================================================
   18. TARJETA DE CONTACTO
========================================================== */

.ssa-contact-card {

    position: relative;

    isolation: isolate;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 25px;

}


/* ==========================================================
   19. DECORACIÓN
========================================================== */

.ssa-contact-decoration {

    position: absolute;

    z-index: -1;

    top: -22px;
    right: -21px;

    color: #edf6fe;

    pointer-events: none;

}

.ssa-contact-decoration svg {

    width: 175px;
    height: 175px;

    stroke-width: 1.1;

}


/* ==========================================================
   20. ENCABEZADO DE CONTACTO
========================================================== */

.ssa-contact-eyebrow {

    display: block;

    margin-bottom: 13px;

    color: #0b80d6;

    font-size: 14px;

    font-weight: 900;

}

.ssa-contact-card h3 {

    margin-bottom: 14px;

    color: #102e51;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(27px, 2.5vw, 36px);

    line-height: 1.13;

}

.ssa-contact-description {

    margin-bottom: 24px;

    color: #617c95;

    font-size: 14px;

    line-height: 1.65;

}


/* ==========================================================
   21. FORMULARIO DE CIUDAD
========================================================== */

.ssa-area-form {

    display: grid;

    gap: 11px;

}

.ssa-area-form label {

    color: #244968;

    font-size: 14px;

    font-weight: 900;

}

.ssa-city-input {

    position: relative;

    display: flex;

    align-items: center;

}

.ssa-city-input > svg {

    position: absolute;

    left: 13px;

    width: 19px;
    height: 19px;

    color: #1785d4;

    pointer-events: none;

}

.ssa-city-input input {

    display: block;

    width: 100%;
    min-width: 0;

    height: 48px;

    padding: 0 13px 0 42px;

    border: 1px solid #d2e5f4;

    border-radius: 10px;

    color: #173a5a;

    background: #f7fbff;

    outline: none;

    font-size: 14px;

}

.ssa-city-input input:focus {

    border-color: #0886e8;

    box-shadow:
        0 0 0 3px rgba(8, 134, 232, .11);

}

.ssa-city-input input::placeholder {

    color: #839bb0;

    opacity: 1;

}


/* ==========================================================
   22. BOTÓN DE CONSULTA
========================================================== */

.ssa-check-button {

    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 10px 16px;

    border: 0;

    border-radius: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #f02a40,
            #cc0b22
        );

    font-size: 14px;

    font-weight: 900;

    transition:
        transform .2s ease,
        filter .2s ease;

}

.ssa-check-button:hover {

    transform: translateY(-2px);

    filter: brightness(1.07);

}

.ssa-check-button svg {

    width: 18px;
    height: 18px;

}


/* ==========================================================
   23. MENSAJE DEL FORMULARIO
========================================================== */

.ssa-form-feedback {

    margin: 0;

    color: #718ba1;

    font-size: 14px;

    line-height: 1.5;

}


/* ==========================================================
   24. DIVISOR
========================================================== */

.ssa-contact-divider {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 24px 0 19px;

}

.ssa-contact-divider::before,
.ssa-contact-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: #dceaf5;

}

.ssa-contact-divider span {

    color: #758da2;

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

}


/* ==========================================================
   25. BOTÓN DE LLAMADA
========================================================== */

.ssa-phone-button {

    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 10px;

    border-radius: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #124f87,
            #082b50
        );

    font-size: 15px;

    font-weight: 900;

}

.ssa-phone-button:hover {

    background: #0877cb;

}

.ssa-phone-button svg {

    width: 19px;
    height: 19px;

}

.ssa-secondary-phone {

    display: block;

    margin-top: 13px;

    color: #0a77c9;

    text-align: center;

    font-size: 14px;

    font-weight: 900;

}


/* ==========================================================
   26. LAPTOP
========================================================== */

@media (max-width: 1300px) {

    .ssa-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 310px);

    }

    .ssa-main-layout {

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

    }

    .ssa-map-column {

        border-left: 0;

        border-top: 1px solid #e3eef7;

    }

    .ssa-info-button {

        margin-top: 0;

    }

}


/* ==========================================================
   27. TABLET
========================================================== */

@media (max-width: 950px) {

    .ssa-layout {

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

    }

    .ssa-main-layout {

        grid-template-columns:
            minmax(0, .85fr)
            minmax(0, 1.15fr);

    }

    .ssa-map-column {

        border-top: 0;

        border-left: 1px solid #e3eef7;

    }

    .ssa-contact-card {

        padding: 25px;

    }

}


/* ==========================================================
   28. CELULAR
========================================================== */

@media (max-width: 720px) {

    .ssa {

        padding: 37px 0 45px;

    }

    .ssa-container {

        width: calc(100% - 24px);

    }

    .ssa-heading h2 {

        font-size: 35px;

    }

    .ssa-main-layout {

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

    }

    .ssa-info {

        padding: 23px;

    }

    .ssa-info h3 {

        font-size: 33px;

    }

    .ssa-map-column {

        border-left: 0;

        border-top: 1px solid #e3eef7;

    }

    .ssa-map-view,
    .ssa-details-view {

        min-height: 310px;

    }

    .ssa-map-view iframe {

        min-height: 310px;

    }

    .ssa-contact-card {

        padding: 24px;

    }

}


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

@media (max-width: 390px) {

    .ssa-container {

        width: calc(100% - 16px);

    }

    .ssa-heading h2 {

        font-size: 31px;

    }

    .ssa-info,
    .ssa-contact-card {

        padding: 19px;

    }

    .ssa-map-header {

        align-items: stretch;

    }

    .ssa-map-tabs {

        width: 100%;

    }

    .ssa-map-tab {

        flex: 1;

    }

    .ssa-map-footer {

        align-items: flex-start;

    }

}


/* ==========================================================
   30. ACCESIBILIDAD
========================================================== */

.ssa :is(a, button, input):focus-visible {

    outline: 2px solid #0786e6;

    outline-offset: 4px;

}

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

    .ssa *,
    .ssa *::before,
    .ssa *::after {

        animation: none !important;
        transition: none !important;

    }

}

/* ==========================================================
   SANTOS AC & INSULATION
   SECCIÓN 08 — FINAL CTA
   CSS COMPLETO E INDEPENDIENTE
========================================================== */


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

.santos-final-cta {

    --sfc-navy: #061b35;
    --sfc-blue: #087ee3;
    --sfc-cyan: #67e1ff;
    --sfc-red: #e51025;

    position: relative;

    isolation: isolate;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    min-height: 220px;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding: 32px 0;

    background: var(--sfc-navy);

    color: #ffffff;

    font-family: Inter, Arial, sans-serif;

}


/* ==========================================================
   02. RESET LOCAL
========================================================== */

.santos-final-cta *,
.santos-final-cta *::before,
.santos-final-cta *::after {

    box-sizing: border-box;

}


.santos-final-cta a {

    text-decoration: none;

}


.santos-final-cta h2,
.santos-final-cta p {

    margin-top: 0;

}


/* ==========================================================
   03. FONDO REAL DEL PROYECTO
========================================================== */

.santos-final-cta__background {

    position: absolute;

    inset: 0;

    z-index: -4;

    background-image: url(
        "../images/fondo-cta-final.jpg"
    );

    background-position: center 52%;

    background-size: cover;

    background-repeat: no-repeat;

    transform: scale(1.025);

}


/* ==========================================================
   04. OVERLAY OSCURO
========================================================== */

.santos-final-cta__overlay {

    position: absolute;

    inset: 0;

    z-index: -3;

    background:

        linear-gradient(
            90deg,
            rgba(3, 23, 45, .95) 0%,
            rgba(5, 32, 59, .90) 35%,
            rgba(6, 38, 67, .80) 67%,
            rgba(3, 20, 38, .88) 100%
        ),

        linear-gradient(
            0deg,
            rgba(3, 19, 39, .4),
            transparent
        );

}


/* ==========================================================
   05. ILUMINACIÓN RGB AZULADA
========================================================== */

.santos-final-cta__glow {

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 55% 50%,
            rgba(0, 157, 255, .22),
            transparent 33%
        ),

        radial-gradient(
            circle at 5% 85%,
            rgba(0, 98, 255, .14),
            transparent 35%
        );

}


/* ==========================================================
   06. CONTENEDOR
========================================================== */

.santos-final-cta__container {

    width: min(
        1480px,
        calc(100% - 80px)
    );

    min-width: 0;

    margin: 0 auto;

}


/* ==========================================================
   07. DISTRIBUCIÓN PRINCIPAL
========================================================== */

.santos-final-cta__layout {

    display: grid;

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

    align-items: center;

    gap: clamp(20px, 3vw, 48px);

    width: 100%;

    min-width: 0;

}


/* Evitar que el contenido expanda el grid */

.santos-final-cta__content,
.santos-final-cta__contact,
.santos-final-cta__action {

    min-width: 0;

}


/* ==========================================================
   08. ETIQUETA SUPERIOR
========================================================== */

.santos-final-cta__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    color: #93e8ff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .055em;

    line-height: 1.45;

}


/* Punto luminoso */

.santos-final-cta__status {

    width: 7px;

    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #47e7ba;

    box-shadow: 0 0 13px rgba(71, 231, 186, .8);

}


/* ==========================================================
   09. TÍTULO
========================================================== */

.santos-final-cta__content h2 {

    margin: 0 0 10px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(31px, 3.1vw, 48px);

    font-weight: 700;

    line-height: 1.07;

    letter-spacing: -.015em;

    text-wrap: balance;

}


.santos-final-cta__content h2 span {

    display: block;

    color: #ffffff;

}


/* ==========================================================
   10. DESCRIPCIÓN
========================================================== */

.santos-final-cta__content p {

    margin: 0;

    color: #c7e0f2;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.55;

}


/* ==========================================================
   11. CONTACTO TELEFÓNICO
========================================================== */

.santos-final-cta__contact {

    display: flex;

    align-items: center;

    gap: 15px;

}


/* ==========================================================
   12. ÍCONO ROJO DE LLAMADA
========================================================== */

.santos-final-cta__phone-icon {

    position: relative;

    width: 60px;

    height: 60px;

    flex: 0 0 60px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    color: #ffffff;

    background:

        linear-gradient(
            135deg,
            #ff364a,
            #cc0920
        );

    box-shadow:

        0 0 0 7px rgba(235, 27, 48, .12),

        0 10px 24px rgba(221, 16, 38, .2);

}


.santos-final-cta__phone-icon svg {

    display: block;

    width: 27px;

    height: 27px;

}


/* ==========================================================
   13. NÚMEROS
========================================================== */

.santos-final-cta__numbers {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    min-width: 0;

}


.santos-final-cta__numbers a {

    display: inline-block;

    max-width: 100%;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(22px, 2.2vw, 31px);

    font-weight: 700;

    line-height: 1.12;

    white-space: nowrap;

    transition: color .2s ease;

}


.santos-final-cta__numbers a:hover {

    color: #79e4ff;

}


/* ==========================================================
   14. BOTÓN PRINCIPAL
========================================================== */

.santos-final-cta__action {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}


.santos-final-cta__button {

    min-width: 205px;

    min-height: 57px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

    padding: 12px 22px;

    border: 1px solid rgba(255, 255, 255, .14);

    border-radius: 11px;

    color: #ffffff;

    background:

        linear-gradient(
            135deg,
            #fa263b,
            #ce0b22
        );

    box-shadow:

        0 11px 26px rgba(220, 15, 34, .24),

        inset 0 1px 0 rgba(255, 255, 255, .14);

    font-size: 15px;

    font-weight: 900;

    white-space: nowrap;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        filter .25s ease;

}


.santos-final-cta__button:hover {

    transform: translateY(-3px);

    filter: brightness(1.07);

    box-shadow:
        0 17px 30px rgba(220, 15, 34, .34);

}


.santos-final-cta__button svg {

    width: 19px;

    height: 19px;

    flex-shrink: 0;

    transition: transform .25s ease;

}


.santos-final-cta__button:hover svg {

    transform: translateX(4px);

}


/* ==========================================================
   15. NOTA BAJO EL BOTÓN
========================================================== */

.santos-final-cta__button-note {

    color: #9bdcf2;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: .015em;

    text-align: center;

}


/* ==========================================================
   16. LÍNEA INFERIOR
========================================================== */

.santos-final-cta__bottom-line {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 3px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            #087fe3 30%,
            #71e5ff 50%,
            #e91d33 78%,
            transparent 100%
        );

}


/* ==========================================================
   17. LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .santos-final-cta__container {

        width: calc(100% - 50px);

    }


    .santos-final-cta__layout {

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

        gap: 25px;

    }


    /* El botón ocupa la parte inferior */

    .santos-final-cta__action {

        grid-column: 1 / -1;

        flex-direction: row;

        justify-content: flex-start;

    }


    .santos-final-cta__button-note {

        text-align: left;

    }

}


/* ==========================================================
   18. TABLET
========================================================== */

@media (max-width: 850px) {

    .santos-final-cta {

        min-height: 0;

        padding: 38px 0;

    }


    .santos-final-cta__layout {

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

        gap: 24px;

    }


    .santos-final-cta__contact {

        padding: 18px 0;

        border-top: 1px solid rgba(255, 255, 255, .14);

        border-bottom: 1px solid rgba(255, 255, 255, .14);

    }


    .santos-final-cta__action {

        grid-column: auto;

    }


    .santos-final-cta__background {

        background-position: 65% center;

    }

}


/* ==========================================================
   19. CELULAR
========================================================== */

@media (max-width: 600px) {

    .santos-final-cta {

        padding: 36px 0 39px;

    }


    .santos-final-cta__container {

        width: calc(100% - 34px);

    }


    .santos-final-cta__layout {

        gap: 23px;

    }


    .santos-final-cta__eyebrow {

        font-size: 14px;

        letter-spacing: .025em;

    }


    .santos-final-cta__content h2 {

        font-size: clamp(34px, 8.8vw, 43px);

    }


    .santos-final-cta__content p {

        font-size: 15px;

    }


    /* Teléfonos */

    .santos-final-cta__contact {

        gap: 16px;

        padding: 19px 0;

    }


    .santos-final-cta__phone-icon {

        width: 54px;

        height: 54px;

        flex-basis: 54px;

    }


    .santos-final-cta__phone-icon svg {

        width: 25px;

        height: 25px;

    }


    .santos-final-cta__numbers a {

        font-size: clamp(22px, 6vw, 29px);

    }


    /* Botón */

    .santos-final-cta__action {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }


    .santos-final-cta__button {

        width: 100%;

        min-width: 0;

        min-height: 55px;

        justify-content: space-between;

    }


    .santos-final-cta__button-note {

        text-align: center;

        font-size: 14px;

    }


    /* Fondo */

    .santos-final-cta__background {

        background-position: 68% center;

    }


    .santos-final-cta__overlay {

        background:

            linear-gradient(
                180deg,
                rgba(3, 23, 45, .94),
                rgba(4, 30, 56, .87) 50%,
                rgba(2, 17, 36, .96)
            );

    }

}


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

@media (max-width: 360px) {

    .santos-final-cta__container {

        width: calc(100% - 24px);

    }


    .santos-final-cta__content h2 {

        font-size: 33px;

    }


    .santos-final-cta__contact {

        gap: 11px;

    }


    .santos-final-cta__phone-icon {

        width: 45px;

        height: 45px;

        flex-basis: 45px;

    }


    .santos-final-cta__numbers a {

        font-size: 21px;

    }

}


/* ==========================================================
   21. ACCESIBILIDAD
========================================================== */

.santos-final-cta a:focus-visible {

    outline: 2px solid #8beaff;

    outline-offset: 4px;

}


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

    .santos-final-cta *,
    .santos-final-cta *::before,
    .santos-final-cta *::after {

        animation: none !important;

        transition: none !important;

    }

}

/* ==========================================================
   SANTOS AC & INSULATION
   FOOTER PREMIUM
   CSS COMPLETO E INDEPENDIENTE
========================================================== */


/* ==========================================================
   01. VARIABLES Y FOOTER PRINCIPAL
========================================================== */

.santos-footer {

    --sft-navy: #061a30;
    --sft-navy-deep: #031222;
    --sft-blue: #128dea;
    --sft-cyan: #69dfff;
    --sft-red: #e5172d;

    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(16, 125, 207, .13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #092643,
            #031323 80%
        );

    color: #ffffff;

    font-family: Inter, Arial, sans-serif;

}


/* ==========================================================
   02. RESET LOCAL
========================================================== */

.santos-footer *,
.santos-footer *::before,
.santos-footer *::after {

    box-sizing: border-box;

}


.santos-footer a {

    text-decoration: none;

}


.santos-footer h2,
.santos-footer p,
.santos-footer ul {

    margin-top: 0;

}


.santos-footer svg {

    display: block;

    width: 19px;
    height: 19px;

    flex-shrink: 0;

}


/* ==========================================================
   03. LUZ SUPERIOR
========================================================== */

.santos-footer__light {

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103, 220, 255, .8),
            transparent
        );

    box-shadow:
        0 0 20px rgba(49, 178, 255, .45);

    pointer-events: none;

}


/* ==========================================================
   04. CONTENEDOR
========================================================== */

.santos-footer__container {

    width: min(
        1480px,
        calc(100% - 60px)
    );

    min-width: 0;

    margin: 0 auto;

}


/* ==========================================================
   05. GRID PRINCIPAL
========================================================== */

.santos-footer__grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .7fr)
        minmax(0, 1.35fr)
        minmax(0, 1.15fr);

    gap: clamp(24px, 3.2vw, 55px);

    align-items: start;

    padding: 45px 0 42px;

}


/* Evitar que cualquier columna expanda la página */

.santos-footer__brand,
.santos-footer__column {

    min-width: 0;

}


/* ==========================================================
   06. LOGO
========================================================== */

.santos-footer__logo {

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

    padding: 9px 13px;

    border: 1px solid rgba(255, 255, 255, .14);

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 7px 23px rgba(0, 0, 0, .12);

}


.santos-footer__logo img {

    display: block;

    width: 100%;

    max-height: 92px;

    object-fit: contain;

}


/* ==========================================================
   07. DESCRIPCIÓN CORPORATIVA
========================================================== */

.santos-footer__description {

    max-width: 330px;

    margin: 20px 0 17px;

    color: #b6ccdf;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.7;

}


/* ==========================================================
   08. FRASE CORPORATIVA
========================================================== */

.santos-footer__brand-message {

    display: flex;

    align-items: stretch;

    gap: 11px;

    margin-bottom: 22px;

}


.santos-footer__brand-line {

    width: 3px;

    flex: 0 0 3px;

    border-radius: 99px;

    background:
        linear-gradient(
            180deg,
            #5bdcff,
            #e51e37
        );

}


.santos-footer__brand-message > span:last-child {

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: .02em;

}


/* ==========================================================
   09. UBICACIÓN
========================================================== */

.santos-footer__location {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #9cbed5;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.55;

}


.santos-footer__location svg {

    margin-top: 2px;

    color: #71ddff;

}


/* ==========================================================
   10. TÍTULOS DE COLUMNAS
========================================================== */

.santos-footer__column h2 {

    position: relative;

    margin: 7px 0 21px;

    padding-bottom: 13px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 22px;

    font-weight: 600;

    line-height: 1.2;

}


/* Línea decorativa debajo del título */

.santos-footer__column h2::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 39px;
    height: 3px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #139af5,
            #76e4ff
        );

}


/* ==========================================================
   11. ENLACES
========================================================== */

.santos-footer__links {

    display: grid;

    gap: 13px;

    padding: 0;
    margin: 0;

    list-style: none;

}


.santos-footer__links li {

    min-width: 0;

}


.santos-footer__links a {

    display: inline-flex;

    align-items: center;

    max-width: 100%;

    color: #b7ccde;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.45;

    overflow-wrap: anywhere;

    transition:
        color .2s ease,
        transform .2s ease;

}


.santos-footer__links a:hover {

    color: #75e1ff;

    transform: translateX(4px);

}


/* ==========================================================
   12. SERVICIOS EN DOS COLUMNAS
========================================================== */

.santos-footer__service-list {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 18px;

    row-gap: 15px;

}


/* ==========================================================
   13. VER TODOS LOS SERVICIOS
========================================================== */

.santos-footer__all-services {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 22px;

    color: #73dfff;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.45;

}


.santos-footer__all-services svg {

    width: 17px;
    height: 17px;

    transition: transform .2s ease;

}


.santos-footer__all-services:hover svg {

    transform: translateX(4px);

}


/* ==========================================================
   14. CONTACTO
========================================================== */

.santos-footer__contact {

    display: flex;

    flex-direction: column;

}


.santos-footer__contact-item {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-width: 0;

    margin-bottom: 17px;

    color: #ffffff;

}


/* ==========================================================
   15. ÍCONOS DE CONTACTO
========================================================== */

.santos-footer__contact-icon {

    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(88, 202, 255, .22);

    border-radius: 11px;

    color: #7cdeff;

    background: rgba(23, 139, 227, .12);

    transition:
        background .2s ease,
        border-color .2s ease;

}


.santos-footer__contact-item:hover
.santos-footer__contact-icon {

    border-color: #62dfff;

    background: rgba(20, 149, 236, .22);

}


.santos-footer__contact-icon svg {

    width: 18px;
    height: 18px;

}


/* ==========================================================
   16. TEXTO DE CONTACTO
========================================================== */

.santos-footer__contact-text {

    display: flex;

    flex-direction: column;

    gap: 4px;

    flex: 1;

    min-width: 0;

}


.santos-footer__contact-text small {

    color: #78dfff;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.3;

}


.santos-footer__contact-text strong {

    display: block;

    color: #e9f5ff;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.5;

    overflow-wrap: anywhere;

    transition: color .2s ease;

}


.santos-footer__contact-item:hover
.santos-footer__contact-text strong {

    color: #7ce4ff;

}


/* ==========================================================
   17. BOTÓN ESTIMADO
========================================================== */

.santos-footer__estimate {

    min-height: 49px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    align-self: flex-start;

    width: 100%;

    margin-top: 6px;

    padding: 12px 15px;

    border: 1px solid rgba(255, 255, 255, .13);

    border-radius: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #f22a40,
            #c60820
        );

    box-shadow:
        0 9px 21px rgba(212, 11, 33, .18);

    font-size: 14px;

    font-weight: 900;

    line-height: 1.4;

    transition:
        transform .2s ease,
        filter .2s ease;

}


.santos-footer__estimate:hover {

    transform: translateY(-2px);

    filter: brightness(1.07);

}


.santos-footer__estimate svg {

    width: 19px;
    height: 19px;

}


/* ==========================================================
   18. BARRA INFERIOR
========================================================== */

.santos-footer__bottom {

    position: relative;

    border-top: 1px solid rgba(133, 208, 255, .13);

    background: rgba(0, 10, 22, .27);

}


/* ==========================================================
   19. CONTENIDO INFERIOR
========================================================== */

.santos-footer__bottom-inner {

    min-height: 69px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px 26px;

    padding: 17px 0;

}


.santos-footer__bottom p {

    margin: 0;

    color: #9cb7cb;

    font-size: 14px;

    line-height: 1.5;

}


/* ==========================================================
   20. FRASE INFERIOR
========================================================== */

.santos-footer__bottom-message {

    color: #c1d6e6 !important;

    font-weight: 600;

}


/* ==========================================================
   21. BACK TO TOP
========================================================== */

.santos-footer__back-top {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #7cdeff;

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

}


.santos-footer__back-top svg {

    width: 16px;
    height: 16px;

    transition: transform .2s ease;

}


.santos-footer__back-top:hover svg {

    transform: translateY(-4px);

}


/* ==========================================================
   22. LAPTOP
========================================================== */

@media (max-width: 1280px) {

    .santos-footer__grid {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(0, .8fr)
            minmax(0, 1.3fr);

        gap: 35px;

    }


    /* Contacto en la segunda fila */

    .santos-footer__contact {

        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        align-items: start;

        gap: 13px 20px;

        padding-top: 24px;

        border-top: 1px solid rgba(255, 255, 255, .1);

    }


    .santos-footer__contact h2 {

        grid-column: 1 / -1;

        margin-bottom: 6px;

    }


    .santos-footer__contact-item {

        margin-bottom: 0;

    }


    .santos-footer__estimate {

        grid-column: 1 / -1;

        width: max-content;

        max-width: 100%;

        margin-top: 8px;

    }

}


/* ==========================================================
   23. TABLET
========================================================== */

@media (max-width: 900px) {

    .santos-footer__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 36px 30px;

        padding: 40px 0;

    }


    .santos-footer__services {

        grid-column: 1;

    }


    .santos-footer__contact {

        grid-column: 2;

        display: flex;

        gap: 0;

        padding-top: 0;

        border-top: 0;

    }


    .santos-footer__contact h2 {

        margin-bottom: 21px;

    }


    .santos-footer__contact-item {

        margin-bottom: 17px;

    }


    .santos-footer__service-list {

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

    }


    .santos-footer__estimate {

        width: 100%;

    }


    .santos-footer__bottom-inner {

        justify-content: flex-start;

    }

}


/* ==========================================================
   24. CELULAR
========================================================== */

@media (max-width: 620px) {

    .santos-footer__container {

        width: calc(100% - 34px);

    }


    .santos-footer__grid {

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

        gap: 28px;

        padding: 38px 0 30px;

    }


    /* Identidad */

    .santos-footer__brand {

        padding-bottom: 25px;

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

    }


    .santos-footer__logo {

        width: 170px;

    }


    .santos-footer__description {

        max-width: 440px;

    }


    .santos-footer__brand-message {

        margin-bottom: 20px;

    }


    /* Columnas */

    .santos-footer__column {

        grid-column: auto;

    }


    .santos-footer__column h2 {

        margin-bottom: 17px;

    }


    /* Enlaces */

    .santos-footer__links {

        gap: 14px;

    }


    .santos-footer__service-list {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px 12px;

    }


    /* Contacto */

    .santos-footer__contact {

        display: flex;

        flex-direction: column;

        padding-top: 24px;

        border-top: 1px solid rgba(255, 255, 255, .1);

    }


    .santos-footer__contact-item {

        margin-bottom: 17px;

    }


    .santos-footer__estimate {

        width: 100%;

    }


    /* Copyright */

    .santos-footer__bottom-inner {

        min-height: 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 23px 0;

    }


    /*
       Espacio para el menú flotante tipo app en celular.
       Cambia 88px si modificas la altura de ese menú.
    */

    .santos-footer__bottom {

        padding-bottom: 88px;

    }

}


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

@media (max-width: 380px) {

    .santos-footer__container {

        width: calc(100% - 26px);

    }


    .santos-footer__service-list {

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

    }


    .santos-footer__logo {

        width: 155px;

    }


    .santos-footer__grid {

        gap: 26px;

    }


}


/* ==========================================================
   26. ACCESIBILIDAD
========================================================== */

.santos-footer a:focus-visible {

    outline: 2px solid #7deaff;

    outline-offset: 4px;

}


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

    .santos-footer *,
    .santos-footer *::before,
    .santos-footer *::after {

        animation: none !important;

        transition: none !important;

    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   ABOUT US — CSS INDEPENDIENTE
========================================================== */


/* ==========================================================
   01. CONFIGURACIÓN GENERAL
========================================================== */

.sabout {

    --sab-navy: #061d36;
    --sab-blue: #087edf;
    --sab-cyan: #67dfff;
    --sab-red: #e51a30;
    --sab-text: #173756;
    --sab-muted: #58738d;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    background: #ffffff;
    color: var(--sab-text);

    font-family: Inter, Arial, sans-serif;

}


.sabout *,
.sabout *::before,
.sabout *::after {

    box-sizing: border-box;

}


.sabout img {

    display: block;

    max-width: 100%;

}


.sabout a {

    text-decoration: none;

}


.sabout button {

    font: inherit;

    cursor: pointer;

}


.sabout h1,
.sabout h2,
.sabout h3,
.sabout p {

    margin-top: 0;

}


.sabout-container {

    width: min(1380px, calc(100% - 56px));

    min-width: 0;

    margin: 0 auto;

}


/* ==========================================================
   02. ELEMENTOS COMPARTIDOS
========================================================== */

.sabout-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    color: var(--sab-blue);

    font-size: 14px;

    font-weight: 900;

    line-height: 1.4;

    letter-spacing: .055em;

}


.sabout-eyebrow::before {

    content: "";

    width: 23px;
    height: 3px;

    flex: 0 0 23px;

    border-radius: 9px;

    background: var(--sab-red);

}


.sabout-section-heading {

    max-width: 750px;

}


.sabout-section-heading--center {

    margin: 0 auto 34px;

    text-align: center;

}


.sabout-section-heading--center .sabout-eyebrow {

    justify-content: center;

}


.sabout-section-heading h2 {

    margin: 0 0 14px;

    color: var(--sab-navy);

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(33px, 3.6vw, 49px);

    line-height: 1.1;

    font-weight: 700;

}


.sabout-section-heading h2 span {

    color: var(--sab-blue);

}


.sabout-section-heading p {

    margin: 0;

    color: var(--sab-muted);

    font-size: 15px;

    line-height: 1.7;

}


/* ==========================================================
   03. BOTONES COMPARTIDOS
========================================================== */

.sabout-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 51px;

    padding: 12px 19px;

    border: 1px solid transparent;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.4;

    text-align: center;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.sabout-button:hover {

    transform: translateY(-2px);

}


.sabout-button--red {

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f02b42,
        #c70b22
    );

    box-shadow:
        0 10px 22px rgba(224, 19, 44, .17);

}


.sabout-button--outline {

    color: var(--sab-navy);

    border-color: #cde2f3;

    background: #ffffff;

}


.sabout-button--outline:hover {

    background: #edf8ff;

}



/* ==========================================================
   SECCIÓN 01 — HERO Y BREADCRUMB
========================================================== */

.sabout-hero {

    position: relative;

    isolation: isolate;

    display: flex;

    align-items: center;

    min-height: 320px;

    padding: 47px 0;

    overflow: hidden;

    background: #061b32;

    color: #ffffff;

}


.sabout-hero__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 29, 56, .89) 50%,
            rgba(4, 31, 59, .56)
        ),

        url("../images/project-package-unit.jpg")
        center / cover no-repeat;

}


.sabout-hero__content {

    position: relative;

    max-width: 740px;

}


/* BREADCRUMB */

.sabout-breadcrumb {

    display: inline-flex;

    max-width: 100%;

    margin-bottom: 27px;

    padding: 10px 15px;

    border: 1px solid rgba(127, 225, 255, .3);

    border-radius: 999px;

    background: rgba(4, 32, 59, .74);

}


.sabout-breadcrumb ol {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 11px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.sabout-breadcrumb li {

    color: #91e4ff;

    font-size: 14px;

    font-weight: 800;

}


.sabout-breadcrumb a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 14px;

}


.sabout-breadcrumb a:hover {

    color: #78e3ff;

}


.sabout-breadcrumb svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}


.sabout-breadcrumb__separator {

    color: #6cdfff !important;

}


/* TÍTULO */

.sabout-hero__eyebrow {

    display: block;

    margin-bottom: 11px;

    color: #81e1ff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .065em;

}


.sabout-hero h1 {

    margin: 0 0 16px;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(52px, 6.5vw, 79px);

    font-weight: 700;

    line-height: 1;

    color: #ffffff;

}


.sabout-hero h1 span {

    color: #76e0ff;

}


.sabout-hero__content > p {

    max-width: 610px;

    margin: 0;

    color: #d7e8f3;

    font-size: 16px;

    line-height: 1.65;

}


.sabout-hero__line {

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf 50%,
        #67dfff,
        transparent
    );

}



/* ==========================================================
   SECCIÓN 02 — WHO WE ARE
========================================================== */

.sabout-intro {

    padding: 77px 0;

    background: #ffffff;

}


.sabout-intro__layout {

    display: grid;

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

    gap: clamp(30px, 5vw, 76px);

    align-items: center;

}


.sabout-intro__visual {

    position: relative;

    min-width: 0;

    padding: 15px 38px 30px 0;

}


.sabout-intro__visual::before {

    content: "";

    position: absolute;

    top: 0;
    left: 14px;
    right: 14px;
    bottom: 0;

    border: 1px solid #d6eaf8;

    border-radius: 24px;

    background: #eef8ff;

}


.sabout-intro__main-image {

    position: relative;

    height: 435px;

    overflow: hidden;

    border-radius: 19px;

    background: #dcebf5;

    box-shadow:
        0 16px 35px rgba(7, 55, 96, .13);

}


.sabout-intro__main-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.sabout-intro__secondary-image {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 43%;
    height: 190px;

    overflow: hidden;

    border: 5px solid #ffffff;

    border-radius: 17px;

    background: #dcebf5;

    box-shadow:
        0 12px 25px rgba(5, 41, 72, .17);

}


.sabout-intro__secondary-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.sabout-intro__image-label {

    position: absolute;

    top: 34px;
    left: 17px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    max-width: calc(100% - 65px);

    padding: 10px 13px;

    border-radius: 9px;

    color: #ffffff;

    background: rgba(4, 30, 55, .88);

    font-size: 14px;

    font-weight: 800;

    line-height: 1.4;

}


.sabout-intro__image-label > span {

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #4de3b2;

}



/* TEXTO */

.sabout-intro__content {

    min-width: 0;

}


.sabout-intro__content h2 {

    margin: 0 0 21px;

    color: var(--sab-navy);

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(35px, 3.8vw, 52px);

    line-height: 1.09;

}


.sabout-intro__content h2 span {

    display: block;

    color: var(--sab-blue);

}


.sabout-intro__content > p {

    margin: 0 0 16px;

    color: #536f88;

    font-size: 15px;

    line-height: 1.8;

}


.sabout-intro__content .sabout-intro__lead {

    color: #254969;

    font-size: 17px;

    font-weight: 600;

}



/* CARACTERÍSTICAS */

.sabout-intro__features {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin: 25px 0;

}


.sabout-intro__feature {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 12px;

    border: 1px solid #dcebf6;

    border-radius: 10px;

    background: #f4faff;

    color: #214463;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.4;

}


.sabout-intro__feature > span {

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #087edf;

    color: #ffffff;

    font-size: 14px;

}



/* ACCIONES */

.sabout-intro__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

}



/* ==========================================================
   SECCIÓN 03 — SERVICES
========================================================== */

.sabout-expertise {

    padding: 70px 0 76px;

    background: #eff8ff;

}


.sabout-expertise__grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

}


.sabout-service {

    min-width: 0;

    overflow: hidden;

    border: 1px solid #d8e9f5;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 23px rgba(7, 60, 102, .055);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.sabout-service:hover {

    transform: translateY(-4px);

    box-shadow:
        0 17px 31px rgba(7, 60, 102, .12);

}


.sabout-service__link {

    display: flex;

    flex-direction: column;

    height: 100%;

    color: inherit;

}


.sabout-service__image {

    position: relative;

    height: 190px;

    overflow: hidden;

    background: #0b3457;

}


.sabout-service__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;

}


.sabout-service:hover img {

    transform: scale(1.05);

}


.sabout-service__number {

    position: absolute;

    top: 12px;
    left: 12px;

    display: grid;
    place-items: center;

    width: 37px;
    height: 37px;

    border-radius: 9px;

    color: #ffffff;

    background: rgba(4, 27, 48, .86);

    font-size: 14px;

    font-weight: 900;

}


.sabout-service__body {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 21px;

}


.sabout-service__category {

    margin-bottom: 8px;

    color: #087edf;

    font-size: 14px;

    font-weight: 900;

}


.sabout-service__body h3 {

    margin: 0 0 12px;

    color: #112f50;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 24px;

    line-height: 1.17;

}


.sabout-service__body p {

    flex: 1;

    margin: 0 0 19px;

    color: #617b94;

    font-size: 14px;

    line-height: 1.65;

}


.sabout-service__more {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding-top: 14px;

    border-top: 1px solid #e1edf6;

    color: #087edf;

    font-size: 14px;

    font-weight: 900;

}



/* SERVICIOS ADICIONALES */

.sabout-expertise__additional {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;

}


.sabout-expertise__additional > span {

    color: #27506f;

    font-size: 14px;

    font-weight: 900;

}


.sabout-expertise__additional > div {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

}


.sabout-expertise__additional a {

    display: inline-flex;

    align-items: center;

    min-height: 39px;

    padding: 8px 13px;

    border: 1px solid #cce2f3;

    border-radius: 999px;

    background: #ffffff;

    color: #355b79;

    font-size: 14px;

    font-weight: 700;

}


.sabout-expertise__additional a:hover {

    color: #ffffff;

    background: #087edf;

}



/* ==========================================================
   SECCIÓN 04 — APPROACH
========================================================== */

.sabout-approach {

    padding: 75px 0 82px;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 85% 10%,
            rgba(13, 142, 238, .19),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #092c4e,
            #031629
        );

}


.sabout-approach .sabout-eyebrow {

    color: #85e4ff;

}


.sabout-approach .sabout-section-heading h2 {

    color: #ffffff;

}


.sabout-approach .sabout-section-heading h2 span {

    color: #83e3ff;

}


.sabout-approach .sabout-section-heading p {

    color: #c3d9e9;

}


.sabout-approach__grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

}


.sabout-step {

    min-width: 0;

    padding: 28px;

    border: 1px solid rgba(126, 216, 255, .24);

    border-radius: 16px;

    background: rgba(255, 255, 255, .045);

}


.sabout-step__number {

    display: grid;

    place-items: center;

    width: 47px;
    height: 47px;

    margin-bottom: 23px;

    border: 1px solid rgba(116, 222, 255, .4);

    border-radius: 12px;

    background: rgba(10, 135, 222, .18);

    color: #7ce3ff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 24px;

    font-weight: 700;

}


.sabout-step h3 {

    margin: 0 0 11px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 27px;

    line-height: 1.2;

}


.sabout-step p {

    margin: 0;

    color: #c0d6e7;

    font-size: 15px;

    line-height: 1.7;

}



/* ==========================================================
   SECCIÓN 05 — PROJECT GALLERY
========================================================== */

.sabout-gallery {

    padding: 75px 0 83px;

    background: #ffffff;

}


.sabout-gallery__header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 28px;

}


.sabout-gallery__grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, 190px);

    gap: 13px;

}


.sabout-gallery__item {

    position: relative;

    display: block;

    min-width: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    padding: 0;

    border: 0;
    border-radius: 15px;

    background: #0a3558;

    text-align: left;

    cursor: zoom-in;

}


.sabout-gallery__item--large:first-child {

    grid-row: 1 / 3;

}


.sabout-gallery__item--large:last-child {

    grid-column: 3;

    grid-row: 1 / 3;

}


.sabout-gallery__item img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;

}


.sabout-gallery__item:hover img {

    transform: scale(1.055);

}


.sabout-gallery__item::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        180deg,
        transparent 40%,
        rgba(2, 21, 40, .82)
    );

    pointer-events: none;

}


.sabout-gallery__caption {

    position: absolute;

    z-index: 2;

    right: 17px;
    bottom: 17px;
    left: 17px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    color: #ffffff;

}


.sabout-gallery__caption strong {

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 23px;

    font-weight: 600;

}


.sabout-gallery__caption > span {

    color: #95e8ff;

    font-size: 14px;

    font-weight: 900;

    white-space: nowrap;

}



/* ==========================================================
   SECCIÓN 06 — CTA FINAL
========================================================== */

.sabout-cta {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 49px 0;

    background: #071e37;

    color: #ffffff;

}


.sabout-cta__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 21, 42, .97),
            rgba(4, 32, 59, .88) 55%,
            rgba(3, 21, 42, .83)
        ),

        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;

}


.sabout-cta__layout {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}


.sabout-cta__content {

    max-width: 735px;

    min-width: 0;

}


.sabout-cta__eyebrow {

    display: block;

    margin-bottom: 10px;

    color: #85e4ff;

    font-size: 14px;

    font-weight: 900;

}


.sabout-cta h2 {

    margin: 0 0 12px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1.1;

}


.sabout-cta h2 span {

    color: #7de4ff;

}


.sabout-cta p {

    max-width: 635px;

    margin: 0;

    color: #d5e6f1;

    font-size: 16px;

    line-height: 1.65;

}


.sabout-cta__actions {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 14px;

    min-width: 245px;

}


.sabout-cta__phone {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #ffffff;

    font-size: 17px;

    font-weight: 900;

}


.sabout-cta__phone:hover {

    color: #84e6ff;

}


.sabout-cta__phone svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

}



/* ==========================================================
   LIGHTBOX — GALERÍA INTERACTIVA
========================================================== */

.sabout-lightbox {

    position: fixed;

    inset: 0;

    width: min(1000px, calc(100% - 30px));

    max-width: 100%;

    max-height: calc(100% - 30px);

    margin: auto;

    padding: 0;

    overflow: visible;

    border: 1px solid rgba(255, 255, 255, .2);

    border-radius: 18px;

    background: #071c31;

    color: #ffffff;

    font-family: Inter, Arial, sans-serif;

}


.sabout-lightbox::backdrop {

    background: rgba(0, 10, 22, .88);

    backdrop-filter: blur(8px);

}


.sabout-lightbox *,
.sabout-lightbox *::before,
.sabout-lightbox *::after {

    box-sizing: border-box;

}


.sabout-lightbox__content {

    position: relative;

    overflow: hidden;

    border-radius: 18px;

}


.sabout-lightbox__close {

    position: absolute;

    z-index: 5;

    top: 12px;
    right: 12px;

    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background: rgba(2, 18, 34, .85);

    color: #ffffff;

    font-size: 28px;

    cursor: pointer;

}


.sabout-lightbox__image-wrap {

    display: grid;

    place-items: center;

    min-height: 220px;

    background: #071c31;

}


.sabout-lightbox__image-wrap img {

    display: block;

    width: 100%;

    max-height: min(72vh, 720px);

    object-fit: contain;

}


.sabout-lightbox__bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 16px 22px;

}


.sabout-lightbox__bottom > div:first-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;

}


.sabout-lightbox__bottom strong {

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

}


.sabout-lightbox__bottom > div:first-child span {

    color: #91dfff;

    font-size: 14px;

}


.sabout-lightbox__controls {

    display: flex;

    gap: 8px;

}


.sabout-lightbox__controls button {

    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    border: 1px solid rgba(116, 223, 255, .4);

    border-radius: 10px;

    color: #ffffff;

    background: #0c4d7e;

    font-size: 22px;

    cursor: pointer;

}


.sabout-lightbox__controls button:hover {

    background: #087edf;

}



/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .sabout-expertise__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .sabout-service__image {

        height: 220px;

    }


    .sabout-intro__layout {

        gap: 30px;

    }


    .sabout-intro__main-image {

        height: 385px;

    }

}



/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 850px) {

    .sabout-intro__layout {

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

        gap: 40px;

    }


    .sabout-intro__visual {

        max-width: 690px;

    }


    .sabout-intro__main-image {

        height: 410px;

    }


    .sabout-approach__grid {

        gap: 12px;

    }


    .sabout-step {

        padding: 22px;

    }


    .sabout-step h3 {

        font-size: 23px;

    }


    .sabout-gallery__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows:
            repeat(2, 240px);

    }


    .sabout-gallery__item--large:first-child,
    .sabout-gallery__item--large:last-child {

        grid-column: auto;
        grid-row: auto;

    }

}



/* ==========================================================
   RESPONSIVE — CELULAR
========================================================== */

@media (max-width: 650px) {

    .sabout-container {

        width: calc(100% - 30px);

    }


    /* HERO */

    .sabout-hero {

        min-height: 280px;

        padding: 36px 0;

    }


    .sabout-hero h1 {

        font-size: 56px;

    }


    .sabout-hero__content > p {

        font-size: 15px;

    }


    .sabout-breadcrumb {

        border-radius: 12px;

        margin-bottom: 23px;

    }


    /* WHO WE ARE */

    .sabout-intro {

        padding: 47px 0 54px;

    }


    .sabout-intro__visual {

        padding: 10px 27px 25px 0;

    }


    .sabout-intro__main-image {

        height: 305px;

    }


    .sabout-intro__secondary-image {

        width: 46%;

        height: 132px;

        border-width: 4px;

    }


    .sabout-intro__image-label {

        top: 22px;
        left: 12px;

    }


    .sabout-intro__content h2 {

        font-size: 39px;

    }


    .sabout-intro__features {

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

    }


    .sabout-intro__actions {

        flex-direction: column;

    }


    .sabout-intro__actions .sabout-button {

        width: 100%;

    }


    /* SERVICES */

    .sabout-expertise {

        padding: 50px 0 57px;

    }


    .sabout-expertise__grid {

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

    }


    .sabout-service__image {

        height: 220px;

    }


    .sabout-expertise__additional {

        align-items: flex-start;

        flex-direction: column;

    }


    /* APPROACH */

    .sabout-approach {

        padding: 54px 0 59px;

    }


    .sabout-approach__grid {

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

    }


    .sabout-step {

        padding: 25px;

    }


    .sabout-step h3 {

        font-size: 26px;

    }


    /* GALLERY */

    .sabout-gallery {

        padding: 52px 0 58px;

    }


    .sabout-gallery__header {

        flex-direction: column;

        align-items: stretch;

        gap: 20px;

    }


    .sabout-gallery__header .sabout-button {

        align-self: flex-start;

    }


    .sabout-gallery__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows:
            220px 170px;

        gap: 9px;

    }


    .sabout-gallery__item:first-child {

        grid-column: 1 / -1;
        grid-row: 1;

    }


    .sabout-gallery__item:nth-child(2) {

        grid-column: 1;
        grid-row: 2;

    }


    .sabout-gallery__item:nth-child(3) {

        grid-column: 2;
        grid-row: 2;

    }


    .sabout-gallery__item:nth-child(4) {

        display: none;

    }


    .sabout-gallery__caption {

        right: 11px;
        bottom: 12px;
        left: 11px;

    }


    .sabout-gallery__caption strong {

        font-size: 18px;

    }


    .sabout-gallery__caption > span {

        display: none;

    }


    /* CTA */

    .sabout-cta {

        padding: 44px 0;

    }


    .sabout-cta__layout {

        flex-direction: column;

        align-items: stretch;

        gap: 26px;

    }


    .sabout-cta h2 {

        font-size: 40px;

    }


    .sabout-cta p {

        font-size: 15px;

    }


    .sabout-cta__actions {

        min-width: 0;

    }


    .sabout-cta__actions .sabout-button {

        width: 100%;

    }


    /* LIGHTBOX */

    .sabout-lightbox__bottom {

        padding: 14px;

    }

}



/* ==========================================================
   RESPONSIVE — CELULARES PEQUEÑOS
========================================================== */

@media (max-width: 380px) {

    .sabout-container {

        width: calc(100% - 24px);

    }


    .sabout-hero h1 {

        font-size: 48px;

    }


    .sabout-intro__main-image {

        height: 260px;

    }


    .sabout-intro__secondary-image {

        height: 110px;

    }


    .sabout-gallery__grid {

        grid-template-rows:
            190px 140px;

    }


    .sabout-cta h2 {

        font-size: 35px;

    }

}



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

.sabout :is(a, button):focus-visible,
.sabout-lightbox button:focus-visible {

    outline: 3px solid #69dfff;

    outline-offset: 4px;

}


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

    .sabout *,
    .sabout *::before,
    .sabout *::after,
    .sabout-lightbox * {

        animation: none !important;

        transition: none !important;

    }

}   


/* ==========================================================
   SANTOS AC & INSULATION
   PROJECTS / GALLERY — CSS
========================================================== */


/* ==========================================================
   01. CONFIGURACIÓN GENERAL
========================================================== */

.sag {

    --sag-navy: #061d36;
    --sag-blue: #087fe0;
    --sag-cyan: #69dfff;
    --sag-red: #e51b31;
    --sag-text: #173755;
    --sag-muted: #5c7891;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    background: #ffffff;
    color: var(--sag-text);

    font-family: Inter, Arial, sans-serif;

}


.sag *,
.sag *::before,
.sag *::after {

    box-sizing: border-box;

}


.sag img {

    display: block;

    max-width: 100%;

}


.sag button {

    font: inherit;

    cursor: pointer;

}


.sag a {

    text-decoration: none;

}


.sag h1,
.sag h2,
.sag h3,
.sag p {

    margin-top: 0;

}


.sag-container {

    width: min(1400px, calc(100% - 56px));

    min-width: 0;

    margin: 0 auto;

}



/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.sag-hero {

    position: relative;

    isolation: isolate;

    display: flex;

    align-items: center;

    min-height: 330px;

    overflow: hidden;

    padding: 48px 0;

    color: #ffffff;

    background: #061b33;

}


.sag-hero__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(3, 28, 54, .89) 52%,
            rgba(4, 31, 57, .54)
        ),

        url("../images/project-roof-ac.jpg")
        center / cover no-repeat;

}


.sag-hero__content {

    max-width: 730px;

    min-width: 0;

}



/* BREADCRUMB */

.sag-breadcrumb {

    display: inline-flex;

    max-width: 100%;

    margin-bottom: 27px;

    padding: 10px 15px;

    border: 1px solid rgba(122, 218, 255, .34);

    border-radius: 999px;

    background: rgba(4, 30, 55, .77);

    backdrop-filter: blur(10px);

}


.sag-breadcrumb ol {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin: 0;
    padding: 0;

    list-style: none;

}


.sag-breadcrumb li {

    color: #98e5ff;

    font-size: 14px;

    font-weight: 800;

}


.sag-breadcrumb a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

}


.sag-breadcrumb a:hover {

    color: #8de6ff;

}


.sag-breadcrumb svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}



/* HERO TEXT */

.sag-hero__eyebrow {

    display: block;

    margin-bottom: 12px;

    color: #85e3ff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .075em;

}


.sag-hero h1 {

    margin: 0 0 16px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(52px, 6.5vw, 82px);

    font-weight: 700;

    line-height: 1;

}


.sag-hero h1 span {

    color: #7de3ff;

}


.sag-hero__content > p {

    max-width: 610px;

    margin: 0;

    color: #d5e8f5;

    font-size: 16px;

    line-height: 1.65;

}



/* HERO DETAILS */

.sag-hero__details {

    display: flex;

    flex-wrap: wrap;

    gap: 13px 23px;

    margin-top: 25px;

}


.sag-hero__details > span {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #d5e8f4;

    font-size: 14px;

    font-weight: 700;

}


.sag-hero__details svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: #73dfff;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}



/* HERO DECORATIVE LINE */

.sag-hero__line {

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51b31,
        #087fe0 47%,
        #69dfff,
        transparent
    );

}



/* ==========================================================
   SECCIÓN 02 — GALLERY
========================================================== */

.sag-gallery {

    padding: 72px 0 80px;

    background:

        radial-gradient(
            circle at 95% 5%,
            rgba(13, 143, 235, .055),
            transparent 30%
        ),

        #f2f9ff;

}



/* GALLERY HEADER */

.sag-gallery__heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 29px;

}


.sag-gallery__heading > div:first-child {

    max-width: 740px;

    min-width: 0;

}


.sag-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color: #087edf;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .055em;

}


.sag-eyebrow::before {

    content: "";

    width: 22px;
    height: 3px;

    border-radius: 9px;

    background: #e51b31;

}


.sag-gallery__heading h2 {

    margin: 0 0 13px;

    color: #0c2c4d;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(34px, 3.6vw, 51px);

    font-weight: 700;

    line-height: 1.1;

}


.sag-gallery__heading h2 span {

    color: #087fdf;

}


.sag-gallery__heading p {

    max-width: 645px;

    margin: 0;

    color: #5b7892;

    font-size: 15px;

    line-height: 1.7;

}



/* PHOTO COUNT */

.sag-photo-count {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    flex: 0 0 150px;

    min-height: 91px;

    padding: 12px;

    border: 1px solid #d4e8f7;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 7px 20px rgba(10, 78, 130, .05);

}


.sag-photo-count > span:first-child {

    color: #087fdf;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 39px;

    font-weight: 700;

    line-height: 1;

}


.sag-photo-count > span:last-child {

    margin-top: 5px;

    color: #61819b;

    font-size: 14px;

    font-weight: 900;

}



/* ==========================================================
   03. FILTER TOOLBAR
========================================================== */

.sag-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 26px;

}


.sag-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    min-width: 0;

}


.sag-filter {

    min-height: 43px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 17px;

    border: 1px solid #d4e6f4;

    border-radius: 999px;

    color: #426482;

    background: #ffffff;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.4;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;

}


.sag-filter:hover {

    border-color: #087fdf;

    color: #087fdf;

}


.sag-filter.is-active {

    border-color: #087fdf;

    color: #ffffff;

    background: #087fdf;

    box-shadow:
        0 7px 17px rgba(8, 127, 223, .16);

}


.sag-toolbar__hint {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex: 0 0 auto;

    color: #718aa0;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

}


.sag-toolbar__hint svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: #087fdf;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}



/* ==========================================================
   04. PHOTO GRID
========================================================== */

.sag-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 17px;

    width: 100%;

    min-width: 0;

}



/* PHOTO CARD */

.sag-card {

    min-width: 0;

    border: 1px solid #d8e7f3;

    border-radius: 16px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 8px 23px rgba(7, 64, 110, .06);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.sag-card[hidden] {

    display: none !important;

}


.sag-card:hover {

    transform: translateY(-4px);

    border-color: #9ad4f8;

    box-shadow:
        0 16px 31px rgba(7, 64, 110, .12);

}



/* FEATURED CARD */

.sag-card--featured {

    grid-column: span 2;

}



/* BUTTON */

.sag-card__button {

    display: flex;

    flex-direction: column;

    width: 100%;

    height: 100%;

    padding: 0;

    border: 0;

    color: inherit;

    background: transparent;

    text-align: left;

}



/* ==========================================================
   05. PHOTO MEDIA
========================================================== */

.sag-card__media {

    position: relative;

    isolation: isolate;

    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background:

        linear-gradient(
            135deg,
            #0b416b,
            #061d36
        );

}


.sag-card--featured .sag-card__media {

    aspect-ratio: 8 / 3;

}


.sag-card__media img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;

}


.sag-card:hover .sag-card__media img {

    transform: scale(1.055);

}



/* DARK GRADIENT */

.sag-card__media::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(3, 22, 43, .28),
            transparent 48%,
            rgba(3, 22, 43, .15)
        );

}



/* IMAGE FALLBACK */

.sag-card__fallback {

    position: absolute;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 18px;

    color: #b8eaff;

    font-size: 14px;

    font-weight: 800;

    text-align: center;

}


.sag-card__media.is-missing img {

    display: none;

}


.sag-card__media.is-missing .sag-card__fallback {

    display: flex;

}



/* CATEGORY BADGE */

.sag-card__badge {

    position: absolute;

    z-index: 2;

    top: 14px;
    left: 14px;

    max-width: calc(100% - 85px);

    padding: 9px 12px;

    border: 1px solid rgba(255, 255, 255, .32);

    border-radius: 9px;

    color: #ffffff;

    background: rgba(4, 32, 59, .85);

    backdrop-filter: blur(10px);

    font-size: 14px;

    font-weight: 900;

    line-height: 1.35;

}



/* ZOOM BUTTON DECORATION */

.sag-card__zoom {

    position: absolute;

    z-index: 2;

    right: 14px;
    bottom: 14px;

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, .35);

    border-radius: 11px;

    color: #ffffff;

    background: rgba(4, 32, 59, .76);

    backdrop-filter: blur(10px);

    font-size: 23px;

    transition: background .2s ease;

}


.sag-card__zoom svg {

    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;

}


.sag-card:hover .sag-card__zoom {

    background: #087fdf;

}



/* ==========================================================
   06. PHOTO INFORMATION
========================================================== */

.sag-card__details {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    width: 100%;

    min-width: 0;

    min-height: 95px;

    padding: 19px;

}


.sag-card__details > span:first-child {

    display: flex;

    flex-direction: column;

    gap: 7px;

    min-width: 0;

}


.sag-card__details small {

    color: #087fdf;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.3;

}


.sag-card__title {

    display: block;

    color: #133755;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.16;

}


.sag-card__arrow {

    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border: 1px solid #d2e9fa;

    border-radius: 50%;

    color: #087fdf;

    background: #eef8ff;

    font-size: 22px;

    transition:
        color .2s ease,
        background .2s ease;

}


.sag-card:hover .sag-card__arrow {

    color: #ffffff;

    background: #087fdf;

}



/* ==========================================================
   07. NO RESULTS
========================================================== */

.sag-empty {

    padding: 35px;

    border: 1px solid #d3e8f7;

    border-radius: 13px;

    color: #486a87;

    background: #ffffff;

    font-size: 15px;

    text-align: center;

}


.sag-empty[hidden] {

    display: none !important;

}



/* ==========================================================
   08. GALLERY FOOTER
========================================================== */

.sag-gallery__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 34px;

    padding-top: 22px;

    border-top: 1px solid #d9e8f5;

}


.sag-gallery__footer p {

    max-width: 650px;

    margin: 0;

    color: #597790;

    font-size: 15px;

    line-height: 1.65;

}


.sag-secondary-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex: 0 0 auto;

    color: #087fdf;

    font-size: 14px;

    font-weight: 900;

}


.sag-secondary-link:hover {

    color: #e51b31;

}



/* ==========================================================
   SECCIÓN 03 — CTA
========================================================== */

.sag-cta {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 47px 0;

    color: #ffffff;

    background: #061b32;

}


.sag-cta__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .91) 56%,
            rgba(4, 24, 45, .86)
        ),

        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;

}


.sag-cta__layout {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.sag-cta__content {

    max-width: 740px;

    min-width: 0;

}


.sag-cta__eyebrow {

    display: block;

    margin-bottom: 10px;

    color: #8ce5ff;

    font-size: 14px;

    font-weight: 900;

}


.sag-cta h2 {

    margin: 0 0 12px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(35px, 4vw, 52px);

    font-weight: 700;

    line-height: 1.1;

}


.sag-cta h2 span {

    color: #7ce3ff;

}


.sag-cta p {

    max-width: 630px;

    margin: 0;

    color: #d3e8f4;

    font-size: 16px;

    line-height: 1.65;

}


.sag-cta__actions {

    display: flex;

    flex-direction: column;

    gap: 13px;

    min-width: 245px;

}


.sag-cta__button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    min-height: 54px;

    padding: 12px 19px;

    border-radius: 10px;

    color: #ffffff;

    background:

        linear-gradient(
            135deg,
            #f02a40,
            #ca0921
        );

    font-size: 14px;

    font-weight: 900;

    transition: transform .2s ease;

}


.sag-cta__button:hover {

    transform: translateY(-2px);

}


.sag-cta__phone {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 39px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;

}


.sag-cta__phone:hover {

    color: #8de7ff;

}



/* ==========================================================
   LIGHTBOX — MODAL
========================================================== */

.sag-lightbox {

    position: fixed;

    inset: 0;

    width: min(1100px, calc(100% - 32px));

    max-width: 100%;

    max-height: calc(100% - 32px);

    margin: auto;

    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .22);

    border-radius: 18px;

    background: #061b32;

    color: #ffffff;

    font-family: Inter, Arial, sans-serif;

}


.sag-lightbox *,
.sag-lightbox *::before,
.sag-lightbox *::after {

    box-sizing: border-box;

}


.sag-lightbox::backdrop {

    background: rgba(0, 9, 21, .91);

    backdrop-filter: blur(8px);

}


.sag-lightbox__layout {

    position: relative;

    display: flex;

    flex-direction: column;

    max-height: calc(100dvh - 34px);

    overflow: hidden;

}


.sag-lightbox__close {

    position: absolute;

    z-index: 5;

    top: 13px;
    right: 13px;

    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .35);

    border-radius: 50%;

    color: #ffffff;

    background: rgba(3, 22, 41, .89);

    font-size: 28px;

    cursor: pointer;

}


.sag-lightbox__media {

    position: relative;

    display: grid;

    place-items: center;

    min-width: 0;

    min-height: 0;

    background: #071b30;

}


.sag-lightbox__media img {

    display: block;

    max-width: 100%;

    max-height: calc(100dvh - 155px);

    object-fit: contain;

}


.sag-lightbox__error {

    padding: 30px;

    color: #d9ecfa;

    font-size: 15px;

    text-align: center;

}


.sag-lightbox__error[hidden] {

    display: none !important;

}


.sag-lightbox__bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 82px;

    padding: 15px 22px;

    background: #082742;

}


.sag-lightbox__information {

    display: flex;

    flex-direction: column;

    gap: 7px;

    min-width: 0;

}


.sag-lightbox__information strong {

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;

    line-height: 1.4;

}


.sag-lightbox__information span {

    color: #8ae4ff;

    font-size: 14px;

    font-weight: 800;

}


.sag-lightbox__controls {

    display: flex;

    gap: 8px;

    flex: 0 0 auto;

}


.sag-lightbox__controls button {

    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(113, 220, 255, .33);

    border-radius: 10px;

    color: #ffffff;

    background: #0c517f;

    font-size: 24px;

    cursor: pointer;

}


.sag-lightbox__controls button:hover {

    background: #087fdf;

}



/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .sag-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .sag-toolbar {

        align-items: flex-start;

        flex-direction: column;

    }


    .sag-card--featured .sag-card__media {

        aspect-ratio: 8 / 3;

    }

}



/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 800px) {

    .sag-gallery {

        padding: 57px 0 65px;

    }


    .sag-gallery__heading {

        align-items: flex-start;

    }


    .sag-photo-count {

        flex-basis: 120px;

    }


    .sag-grid {

        gap: 13px;

    }


    .sag-card__title {

        font-size: 22px;

    }


    .sag-card__details {

        padding: 15px;

    }

}



/* ==========================================================
   RESPONSIVE — CELULAR
========================================================== */

@media (max-width: 620px) {

    .sag-container {

        width: calc(100% - 28px);

    }


    /* HERO */

    .sag-hero {

        min-height: 295px;

        padding: 38px 0;

    }


    .sag-hero h1 {

        font-size: 57px;

    }


    .sag-hero__content > p {

        font-size: 15px;

    }


    .sag-breadcrumb {

        border-radius: 12px;

        margin-bottom: 23px;

    }


    .sag-hero__details {

        gap: 10px;

    }


    /* GALLERY */

    .sag-gallery {

        padding: 46px 0 54px;

    }


    .sag-gallery__heading {

        flex-direction: column;

        gap: 19px;

    }


    .sag-gallery__heading h2 {

        font-size: 38px;

    }


    .sag-photo-count {

        flex-basis: auto;

        flex-direction: row;

        gap: 12px;

        min-height: 57px;

        padding: 10px 15px;

    }


    .sag-photo-count > span:first-child {

        font-size: 30px;

    }


    .sag-photo-count > span:last-child {

        margin: 0;

    }


    /* FILTERS */

    .sag-filters {

        width: 100%;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 9px;

        scrollbar-width: none;

        scroll-snap-type: x proximity;

    }


    .sag-filters::-webkit-scrollbar {

        display: none;

    }


    .sag-filter {

        flex: 0 0 auto;

        white-space: nowrap;

        scroll-snap-align: start;

    }


    .sag-toolbar__hint {

        white-space: normal;

    }


    /* ONE COLUMN */

    .sag-grid {

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

        gap: 15px;

    }


    .sag-card--featured {

        grid-column: auto;

    }


    .sag-card__media,
    .sag-card--featured .sag-card__media {

        aspect-ratio: 4 / 3;

    }


    .sag-card__details {

        min-height: 90px;

        padding: 17px;

    }


    /* FOOTER */

    .sag-gallery__footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 17px;

    }


    /* CTA */

    .sag-cta {

        padding: 43px 0;

    }


    .sag-cta__layout {

        flex-direction: column;

        align-items: stretch;

        gap: 25px;

    }


    .sag-cta h2 {

        font-size: 40px;

    }


    .sag-cta p {

        font-size: 15px;

    }


    .sag-cta__actions {

        min-width: 0;

    }


    /* LIGHTBOX */

    .sag-lightbox {

        width: calc(100% - 16px);

        border-radius: 12px;

    }


    .sag-lightbox__bottom {

        padding: 13px;

    }


    .sag-lightbox__information strong {

        font-size: 14px;

    }


    .sag-lightbox__controls button {

        width: 39px;
        height: 39px;

    }

}



/* ==========================================================
   RESPONSIVE — SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .sag-container {

        width: calc(100% - 22px);

    }


    .sag-hero h1 {

        font-size: 49px;

    }


    .sag-gallery__heading h2 {

        font-size: 34px;

    }


    .sag-cta h2 {

        font-size: 35px;

    }

}



/* ==========================================================
   ACCESSIBILITY
========================================================== */

.sag :is(a, button):focus-visible,
.sag-lightbox button:focus-visible {

    outline: 3px solid #6de0ff;

    outline-offset: 4px;

}


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

    .sag *,
    .sag *::before,
    .sag *::after,
    .sag-lightbox * {

        animation: none !important;

        transition: none !important;

    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   SERVICE AREAS — CSS
========================================================== */


/* ==========================================================
   01. CONFIGURACIÓN GLOBAL DE LA PÁGINA
========================================================== */

.sarea {

    --sa-navy: #061d36;
    --sa-blue: #087edf;
    --sa-cyan: #67dfff;
    --sa-red: #e51a30;
    --sa-text: #173856;
    --sa-muted: #5c7891;
    --sa-border: #d8e8f5;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    background: #ffffff;
    color: var(--sa-text);

    font-family: Inter, Arial, sans-serif;

}


.sarea *,
.sarea *::before,
.sarea *::after {

    box-sizing: border-box;

}


.sarea img {

    display: block;
    max-width: 100%;

}


.sarea a {

    text-decoration: none;

}


.sarea button,
.sarea input,
.sarea select {

    font: inherit;

}


.sarea button {

    cursor: pointer;

}


.sarea h1,
.sarea h2,
.sarea h3,
.sarea h4,
.sarea p {

    margin-top: 0;

}


.sarea svg {

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}


.sarea-container {

    width: min(1380px, calc(100% - 56px));

    min-width: 0;

    margin: 0 auto;

}



/* ==========================================================
   02. ELEMENTOS REUTILIZABLES
========================================================== */

.sarea-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color: var(--sa-blue);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .055em;

}


.sarea-eyebrow::before {

    content: "";

    width: 23px;
    height: 3px;

    border-radius: 5px;

    background: var(--sa-red);

}


.sarea-eyebrow--light {

    color: #8ae5ff;

}


.sarea-section-heading {

    max-width: 800px;

    margin-bottom: 30px;

}


.sarea-section-heading--center {

    margin-right: auto;
    margin-left: auto;

    text-align: center;

}


.sarea-section-heading h2 {

    margin-bottom: 13px;

    color: var(--sa-navy);

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(34px, 3.5vw, 49px);

    line-height: 1.1;

}


.sarea-section-heading h2 span {

    color: var(--sa-blue);

}


.sarea-section-heading p {

    margin: 0;

    color: var(--sa-muted);

    font-size: 15px;
    line-height: 1.7;

}



/* ==========================================================
   03. BOTONES
========================================================== */

.sarea-button {

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 52px;

    padding: 12px 18px;

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

    font-size: 14px;
    font-weight: 900;

    line-height: 1.4;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.sarea-button:hover {

    transform: translateY(-2px);

}


.sarea-button svg {

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

}


.sarea-button--blue {

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #168ce9,
        #075aa8
    );

}


.sarea-button--red {

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f02a41,
        #c90c24
    );

}



/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.sarea-hero {

    position: relative;

    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 325px;

    padding: 45px 0;

    overflow: hidden;

    background: #061d36;
    color: #ffffff;

}


.sarea-hero__background {

    position: absolute;
    inset: 0;

    z-index: -1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 30, 57, .9) 53%,
            rgba(5, 32, 58, .64)
        ),

        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;

}


.sarea-hero__content {

    max-width: 760px;

}


.sarea-breadcrumb {

    display: inline-flex;

    max-width: 100%;

    margin-bottom: 26px;
    padding: 10px 15px;

    border: 1px solid rgba(115, 220, 255, .3);
    border-radius: 999px;

    background: rgba(4, 31, 58, .77);

}


.sarea-breadcrumb ol {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    margin: 0;
    padding: 0;

    list-style: none;

}


.sarea-breadcrumb li {

    color: #83e2ff;

    font-size: 14px;
    font-weight: 800;

}


.sarea-breadcrumb a {

    color: #ffffff;

    font-size: 14px;

}


.sarea-breadcrumb a:hover {

    color: #83e2ff;

}


.sarea-hero h1 {

    margin: 0 0 16px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(52px, 6vw, 79px);

    line-height: 1;

}


.sarea-hero h1 span {

    color: #7ce3ff;

}


.sarea-hero__content > p {

    max-width: 655px;

    margin: 0;

    color: #d7e8f4;

    font-size: 16px;
    line-height: 1.7;

}


.sarea-hero__line {

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

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf 50%,
        #67dfff,
        transparent
    );

}



/* ==========================================================
   SECCIÓN 02 — INTRODUCCIÓN
========================================================== */

.sarea-intro {

    padding: 53px 0;

    background: #ffffff;

}


.sarea-intro__layout {

    display: grid;

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

    align-items: center;

    gap: 45px;

}


.sarea-intro h2 {

    margin: 0;

    color: var(--sa-navy);

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(34px, 3.7vw, 49px);

    line-height: 1.1;

}


.sarea-intro h2 span {

    color: var(--sa-blue);

}


.sarea-intro__layout > p {

    margin: 0;

    padding-left: 25px;

    border-left: 3px solid #087edf;

    color: #52718b;

    font-size: 16px;
    line-height: 1.8;

}



/* ==========================================================
   SECCIÓN 03 — LOCALIZADOR
========================================================== */

.sarea-locator {

    padding: 67px 0 76px;

    background: #eff8ff;

}


.sarea-locator__grid {

    display: grid;

    grid-template-columns:
        minmax(0, .83fr)
        minmax(0, 1.17fr);

    gap: 18px;

    align-items: stretch;

}


.sarea-search-card,
.sarea-map-card {

    min-width: 0;

    overflow: hidden;

    border: 1px solid #d7e7f4;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(9, 71, 119, .055);

}



/* ==========================================================
   04. SEARCH CARD
========================================================== */

.sarea-search-card {

    padding: 25px;

}


.sarea-search-card__header {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 26px;

}


.sarea-search-card__icon {

    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border-radius: 14px;

    color: #ffffff;

    background: #087edf;

}


.sarea-search-card__header > div {

    min-width: 0;

}


.sarea-search-card__eyebrow {

    display: block;

    margin-bottom: 5px;

    color: #087edf;

    font-size: 14px;
    font-weight: 900;

}


.sarea-search-card h3 {

    margin: 0;

    color: #102e4e;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 26px;

    line-height: 1.15;

}



/* ==========================================================
   05. FORMULARIO
========================================================== */

.sarea-form {

    display: grid;

    gap: 22px;

}


.sarea-field {

    display: grid;

    gap: 9px;

    min-width: 0;

}


.sarea-field label {

    color: #244765;

    font-size: 14px;
    font-weight: 900;

}


.sarea-field__input,
.sarea-field__select {

    position: relative;

    width: 100%;
    min-width: 0;

}


.sarea-field__input svg {

    position: absolute;

    top: 50%;
    left: 14px;

    transform: translateY(-50%);

    color: #087edf;

    pointer-events: none;

}


.sarea-field input,
.sarea-field select {

    width: 100%;
    min-width: 0;

    min-height: 51px;

    border: 1px solid #d5e6f3;
    border-radius: 10px;

    color: #173a58;

    background: #f8fbff;

    font-size: 14px;

    outline: none;

}


.sarea-field input {

    padding: 12px 14px 12px 44px;

}


.sarea-field select {

    padding: 12px 15px;

    cursor: pointer;

}


.sarea-field input:focus,
.sarea-field select:focus {

    border-color: #087edf;

    box-shadow:
        0 0 0 3px rgba(8, 126, 223, .11);

}


.sarea-field__help {

    color: #718ba0;

    font-size: 14px;
    line-height: 1.5;

}


.sarea-form .sarea-button {

    width: 100%;

}



/* ==========================================================
   06. RESULTADO DINÁMICO
========================================================== */

.sarea-result {

    display: grid;

    gap: 12px;

    margin-top: 25px;

    padding: 20px;

    border: 1px solid #cfe5f6;
    border-radius: 13px;

    background: #f1f9ff;

}


.sarea-result__status {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #0873c5;

    font-size: 14px;
    font-weight: 900;

}


.sarea-result__status > span {

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #21b990;

}


.sarea-result h4 {

    margin: 0;

    color: #0d3557;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 28px;

}


.sarea-result > p {

    margin: 0;

    color: #55758e;

    font-size: 14px;
    line-height: 1.65;

}


.sarea-result__service {

    display: grid;

    gap: 5px;

    padding: 12px 0;

    border-top: 1px solid #d8e9f5;
    border-bottom: 1px solid #d8e9f5;

}


.sarea-result__service > span {

    color: #6d8aa0;

    font-size: 14px;
    font-weight: 800;

}


.sarea-result__service strong {

    color: #15466d;

    font-size: 15px;

}


.sarea-result .sarea-button {

    width: 100%;

}


.sarea-result__note {

    color: #71889c !important;

    font-size: 14px !important;

}



/* ==========================================================
   07. TELÉFONO
========================================================== */

.sarea-search-card__phone {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 21px;

    padding-top: 19px;

    border-top: 1px solid #e2edf5;

}


.sarea-search-card__phone > span {

    color: #667f94;

    font-size: 14px;
    font-weight: 700;

}


.sarea-search-card__phone a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #087edf;

    font-size: 16px;
    font-weight: 900;

}


.sarea-search-card__phone svg {

    width: 18px;
    height: 18px;

}



/* ==========================================================
   08. MAP CARD
========================================================== */

.sarea-map-card {

    display: flex;

    flex-direction: column;

    padding: 14px;

    background: #f8fcff;

}


.sarea-map-card__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    padding: 7px 5px 17px;

}


.sarea-map-card__location {

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 0;

}


.sarea-map-card__pin {

    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    border-radius: 12px;

    color: #ffffff;

    background: #087edf;

}


.sarea-map-card__location > div {

    min-width: 0;

}


.sarea-map-card__location > div > span {

    display: block;

    margin-bottom: 4px;

    color: #6a829a;

    font-size: 14px;
    font-weight: 800;

}


.sarea-map-card__location strong {

    display: block;

    color: #123b5e;

    font-size: 17px;

    overflow-wrap: anywhere;

}


.sarea-map-card__live {

    display: inline-flex;

    padding: 8px 11px;

    border-radius: 999px;

    color: #0877c9;

    background: #e5f4ff;

    font-size: 14px;
    font-weight: 900;

}



/* ==========================================================
   09. MAPA RESPONSIVE
========================================================== */

.sarea-map {

    position: relative;

    flex: 1;

    min-width: 0;

    min-height: 455px;

    overflow: hidden;

    border: 1px solid #d0e4f3;
    border-radius: 12px;

    background: #deedf7;

}


.sarea-map iframe {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;

}



/* ==========================================================
   10. FOOTER DEL MAPA
========================================================== */

.sarea-map-card__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 17px 5px 5px;

}


.sarea-map-card__footer > div {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    min-width: 0;

}


.sarea-map-card__footer-icon {

    display: grid;
    place-items: center;

    flex: 0 0 29px;

    width: 29px;
    height: 29px;

    border-radius: 8px;

    color: #087edf;

    background: #e4f4ff;

}


.sarea-map-card__footer-icon svg {

    width: 18px;
    height: 18px;

}


.sarea-map-card__footer p {

    margin: 0;

    color: #68839a;

    font-size: 14px;
    line-height: 1.5;

}


.sarea-map-card__footer > a {

    flex: 0 0 auto;

    color: #087edf;

    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;

}



/* ==========================================================
   11. COVERAGE DISCLAIMER
========================================================== */

.sarea-coverage-note {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-top: 20px;

    padding: 17px 19px;

    border: 1px solid #cfe6f7;
    border-radius: 12px;

    background: #ffffff;

}


.sarea-coverage-note__icon {

    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 50%;

    color: #ffffff;

    background: #087edf;

    font-size: 16px;
    font-weight: 900;

}


.sarea-coverage-note p {

    margin: 0;

    color: #52738e;

    font-size: 14px;
    line-height: 1.65;

}


.sarea-coverage-note strong {

    color: #163e61;

}



/* ==========================================================
   SECCIÓN 04 — SERVICES
========================================================== */

.sarea-services {

    padding: 76px 0;

    background: #ffffff;

}


.sarea-services__grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

}


.sarea-service {

    min-width: 0;

    overflow: hidden;

    border: 1px solid #dce9f5;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 25px rgba(8, 67, 110, .06);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.sarea-service:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 30px rgba(8, 67, 110, .12);

}


.sarea-service__image {

    height: 180px;

    overflow: hidden;

    background: #0b3455;

}


.sarea-service__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;

}


.sarea-service:hover img {

    transform: scale(1.05);

}


.sarea-service__body {

    display: flex;

    flex-direction: column;

    min-height: 235px;

    padding: 20px;

}


.sarea-service__category {

    display: block;

    margin-bottom: 9px;

    color: #087edf;

    font-size: 14px;
    font-weight: 900;

}


.sarea-service h3 {

    margin: 0 0 11px;

    color: #113555;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 24px;

    line-height: 1.2;

}


.sarea-service p {

    flex: 1;

    margin: 0 0 20px;

    color: #617e95;

    font-size: 14px;
    line-height: 1.65;

}


.sarea-service a {

    display: inline-flex;

    padding-top: 13px;

    border-top: 1px solid #e2edf5;

    color: #087edf;

    font-size: 14px;
    font-weight: 900;

}



/* ADDITIONAL SERVICES */

.sarea-services__additional {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;

}


.sarea-services__additional > span {

    color: #244e6e;

    font-size: 14px;
    font-weight: 900;

}


.sarea-services__additional > div {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

}


.sarea-services__additional a {

    display: inline-flex;

    align-items: center;

    min-height: 39px;

    padding: 8px 13px;

    border: 1px solid #cfe4f3;
    border-radius: 999px;

    color: #315875;

    background: #f5fbff;

    font-size: 14px;
    font-weight: 700;

}


.sarea-services__additional a:hover {

    color: #ffffff;

    background: #087edf;

}



/* ==========================================================
   SECCIÓN 05 — PROCESS
========================================================== */

.sarea-process {

    padding: 73px 0 79px;

    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(26, 151, 255, .14),
            transparent 37%
        ),

        linear-gradient(
            135deg,
            #092c4c,
            #031628
        );

    color: #ffffff;

}


.sarea-process .sarea-eyebrow {

    color: #8be6ff;

}


.sarea-process .sarea-section-heading h2 {

    color: #ffffff;

}


.sarea-process .sarea-section-heading h2 span {

    color: #83e5ff;

}


.sarea-process .sarea-section-heading p {

    color: #c6dce9;

}


.sarea-process__grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

}


.sarea-step {

    min-width: 0;

    padding: 29px;

    border: 1px solid rgba(126, 222, 255, .25);
    border-radius: 15px;

    background: rgba(255, 255, 255, .045);

}


.sarea-step__number {

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    margin-bottom: 22px;

    border-radius: 12px;

    color: #90eaff;

    background: rgba(21, 144, 227, .2);

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 24px;
    font-weight: 700;

}


.sarea-step h3 {

    margin: 0 0 11px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 27px;

}


.sarea-step p {

    margin: 0;

    color: #bfd8e9;

    font-size: 15px;
    line-height: 1.7;

}



/* ==========================================================
   SECCIÓN 06 — FAQ
========================================================== */

.sarea-faq {

    padding: 79px 0;

    background: #ffffff;

}


.sarea-faq__layout {

    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 55px;

    align-items: start;

}


.sarea-faq__intro h2 {

    margin: 0 0 16px;

    color: #0d2e4e;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(36px, 3.5vw, 49px);

    line-height: 1.1;

}


.sarea-faq__intro h2 span {

    display: block;

    color: #087edf;

}


.sarea-faq__intro p {

    margin-bottom: 26px;

    color: #5c7991;

    font-size: 16px;
    line-height: 1.7;

}


.sarea-faq__items {

    display: grid;

    gap: 12px;

}


.sarea-faq__item {

    min-width: 0;

    overflow: hidden;

    border: 1px solid #d9e7f4;
    border-radius: 12px;

    background: #f8fbff;

}


.sarea-faq__item[open] {

    border-color: #95cffa;

    background: #f0f8ff;

}


.sarea-faq__item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 19px;

    color: #153b5a;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.4;

    cursor: pointer;

    list-style: none;

}


.sarea-faq__item summary::-webkit-details-marker {

    display: none;

}


.sarea-faq__item summary > span {

    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    border-radius: 8px;

    color: #087edf;

    background: #e0f1ff;

    font-size: 22px;

    transition: transform .2s ease;

}


.sarea-faq__item[open] summary > span {

    transform: rotate(45deg);

}


.sarea-faq__item > div {

    padding: 0 19px 19px;

    color: #5c7890;

    font-size: 15px;

    line-height: 1.7;

}



/* ==========================================================
   SECCIÓN 07 — CTA
========================================================== */

.sarea-cta {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 48px 0;

    color: #ffffff;

    background: #061b32;

}


.sarea-cta__background {

    position: absolute;
    inset: 0;

    z-index: -1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 61, .88),
            rgba(3, 21, 41, .87)
        ),

        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;

}


.sarea-cta__layout {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}


.sarea-cta__content {

    max-width: 740px;
    min-width: 0;

}


.sarea-cta h2 {

    margin: 0 0 12px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.1;

}


.sarea-cta h2 span {

    color: #83e4ff;

}


.sarea-cta p {

    margin: 0;

    color: #d1e7f4;

    font-size: 16px;
    line-height: 1.7;

}


.sarea-cta__actions {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 11px;

    min-width: 255px;

}


.sarea-cta__phone,
.sarea-cta__secondary-phone {

    color: #ffffff;

    font-size: 17px;
    font-weight: 900;

    text-align: center;

}


.sarea-cta__secondary-phone {

    color: #a4def4;

    font-size: 15px;

}



/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .sarea-services__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .sarea-service__image {

        height: 210px;

    }


    .sarea-locator__grid {

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

    }


    .sarea-map {

        min-height: 430px;

    }

}



/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .sarea-locator__grid {

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

    }


    .sarea-map {

        min-height: 440px;

    }


    .sarea-process__grid {

        gap: 12px;

    }


    .sarea-step {

        padding: 22px;

    }


    .sarea-step h3 {

        font-size: 23px;

    }


    .sarea-faq__layout {

        gap: 30px;

    }

}



/* ==========================================================
   RESPONSIVE — CELULAR
========================================================== */

@media (max-width: 680px) {

    .sarea-container {

        width: calc(100% - 28px);

    }


    /* HERO */

    .sarea-hero {

        min-height: 275px;

        padding: 37px 0;

    }


    .sarea-hero h1 {

        font-size: 52px;

    }


    .sarea-hero__content > p {

        font-size: 15px;

    }


    .sarea-breadcrumb {

        border-radius: 12px;

    }


    /* INTRO */

    .sarea-intro {

        padding: 42px 0;

    }


    .sarea-intro__layout {

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

        gap: 22px;

    }


    .sarea-intro__layout > p {

        padding-left: 17px;

        font-size: 15px;

    }


    /* LOCATOR */

    .sarea-locator {

        padding: 49px 0 55px;

    }


    .sarea-search-card {

        padding: 20px;

    }


    .sarea-search-card__header {

        align-items: flex-start;

    }


    .sarea-result {

        padding: 17px;

    }


    .sarea-map {

        min-height: 315px;

    }


    .sarea-map-card__footer {

        align-items: flex-start;
        flex-direction: column;

    }


    .sarea-coverage-note {

        padding: 15px;

    }


    /* SERVICES */

    .sarea-services {

        padding: 54px 0;

    }


    .sarea-services__grid {

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

    }


    .sarea-service__image {

        height: 220px;

    }


    .sarea-service__body {

        min-height: 0;

    }


    .sarea-services__additional {

        flex-direction: column;
        align-items: flex-start;

    }


    /* PROCESS */

    .sarea-process {

        padding: 55px 0;

    }


    .sarea-process__grid {

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

    }


    .sarea-step {

        padding: 25px;

    }


    .sarea-step h3 {

        font-size: 26px;

    }


    /* FAQ */

    .sarea-faq {

        padding: 56px 0;

    }


    .sarea-faq__layout {

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

        gap: 31px;

    }


    /* CTA */

    .sarea-cta {

        padding: 44px 0;

    }


    .sarea-cta__layout {

        align-items: stretch;
        flex-direction: column;

        gap: 25px;

    }


    .sarea-cta h2 {

        font-size: 39px;

    }


    .sarea-cta p {

        font-size: 15px;

    }


    .sarea-cta__actions {

        min-width: 0;

    }

}



/* ==========================================================
   RESPONSIVE — CELULAR PEQUEÑO
========================================================== */

@media (max-width: 380px) {

    .sarea-container {

        width: calc(100% - 20px);

    }


    .sarea-hero h1 {

        font-size: 46px;

    }


    .sarea-search-card {

        padding: 15px;

    }


    .sarea-map-card {

        padding: 9px;

    }


    .sarea-map {

        min-height: 280px;

    }

}



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

.sarea :is(a, button, input, select, summary):focus-visible {

    outline: 3px solid #58cfff;

    outline-offset: 3px;

}


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

    .sarea *,
    .sarea *::before,
    .sarea *::after {

        animation: none !important;

        transition: none !important;

    }

}



/* ==========================================================
   SANTOS AC & INSULATION — CONTACT
========================================================== */

.scontact {
    --sc-navy: #061d36;
    --sc-blue: #087edf;
    --sc-cyan: #75e2ff;
    --sc-red: #e51a30;

    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: clip;

    color: #173856;
    background: #ffffff;

    font-family: Inter, Arial, sans-serif;
}

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

.scontact a {
    text-decoration: none;
}

.scontact button,
.scontact input,
.scontact select,
.scontact textarea {
    font: inherit;
}

.scontact button {
    cursor: pointer;
}

.scontact h1,
.scontact h2,
.scontact h3,
.scontact p {
    margin-top: 0;
}

.scontact-container {
    width: min(1350px, calc(100% - 52px));
    min-width: 0;
    margin: 0 auto;
}

.scontact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;

    color: var(--sc-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
}

.scontact-eyebrow::before {
    content: "";
    width: 23px;
    height: 3px;
    background: var(--sc-red);
}

.scontact-eyebrow--light {
    color: #8be7ff;
}

/* ==========================================================
   HERO
========================================================== */

.scontact-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 295px;
    padding: 45px 0;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 39, .97),
            rgba(4, 31, 57, .85),
            rgba(4, 31, 57, .65)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.scontact-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf,
        #75e2ff
    );
}

.scontact-breadcrumb {
    display: inline-flex;
    max-width: 100%;

    margin-bottom: 25px;
    padding: 10px 15px;

    border: 1px solid rgba(117, 226, 255, .3);
    border-radius: 999px;

    background: rgba(4, 28, 51, .7);
}

.scontact-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.scontact-breadcrumb li,
.scontact-breadcrumb a {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.scontact-breadcrumb [aria-current="page"] {
    color: #86e7ff;
}

.scontact-hero h1 {
    margin: 0 0 16px;

    color: #ffffff;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(49px, 6vw, 77px);
    line-height: 1;
}

.scontact-hero h1 span {
    color: #7ae3ff;
}

.scontact-hero .scontact-container > p {
    max-width: 680px;
    margin: 0;

    color: #d8eaf5;
    font-size: 16px;
    line-height: 1.7;
}

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

.scontact-main {
    padding: 67px 0 79px;
    background: #f0f8ff;
}

.scontact-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(0, .85fr);

    gap: 22px;
    align-items: start;
}

.scontact-form-card,
.scontact-sidebar {
    min-width: 0;
}

.scontact-form-card {
    padding: clamp(23px, 3vw, 41px);

    border: 1px solid #d8e8f5;
    border-radius: 20px;

    background: #ffffff;
    box-shadow: 0 13px 35px rgba(6, 53, 94, .06);
}

.scontact-form-card__heading {
    margin-bottom: 30px;
}

.scontact-form-card__heading h2 {
    margin: 0 0 12px;

    color: var(--sc-navy);
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(33px, 3vw, 45px);
    line-height: 1.1;
}

.scontact-form-card__heading h2 span {
    color: var(--sc-blue);
}

.scontact-form-card__heading > p {
    margin: 0;
    color: #637d94;
    font-size: 15px;
    line-height: 1.65;
}

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

.scontact-form {
    display: grid;
    gap: 23px;
}

.scontact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.scontact-field {
    display: flex;
    flex-direction: column;
    gap: 9px;

    min-width: 0;
}

.scontact-field label {
    color: #234562;
    font-size: 14px;
    font-weight: 900;
}

.scontact-field label span {
    color: var(--sc-red);
}

.scontact-field input,
.scontact-field select,
.scontact-field textarea {
    display: block;

    width: 100%;
    min-width: 0;

    border: 1px solid #d5e5f1;
    border-radius: 10px;

    outline: none;

    color: #183b59;
    background: #f8fbff;

    font-size: 15px;
    line-height: 1.5;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.scontact-field input,
.scontact-field select {
    min-height: 52px;
    padding: 12px 15px;
}

.scontact-field textarea {
    min-height: 145px;
    padding: 15px;
    resize: vertical;
}

.scontact-field input::placeholder,
.scontact-field textarea::placeholder {
    color: #8297aa;
    opacity: 1;
}

.scontact-field input:focus,
.scontact-field select:focus,
.scontact-field textarea:focus {
    border-color: #087edf;
    box-shadow: 0 0 0 3px rgba(8, 126, 223, .11);
}

.scontact-field__help {
    color: #71899e;
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================
   ANTISPAM
========================================================== */

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

/* ==========================================================
   FORM FOOTER
========================================================== */

.scontact-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    padding-top: 21px;
    border-top: 1px solid #e4eef6;
}

.scontact-form__footer > p {
    max-width: 310px;
    margin: 0;

    color: #71899e;
    font-size: 14px;
    line-height: 1.6;
}

.scontact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    min-width: 190px;
    min-height: 53px;

    padding: 12px 20px;
    border: 0;
    border-radius: 10px;

    color: #ffffff;
    background: linear-gradient(135deg, #f12d43, #c80b22);

    font-size: 15px;
    font-weight: 900;

    box-shadow: 0 10px 24px rgba(216, 19, 39, .17);

    transition: transform .2s ease, filter .2s ease;
}

.scontact-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.07);
}

.scontact-submit:disabled {
    cursor: wait;
    opacity: .78;
}

.scontact-submit__arrow {
    font-size: 23px;
    line-height: 1;
}

.scontact-submit__spinner {
    display: none;

    width: 19px;
    height: 19px;

    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: scontact-spin .7s linear infinite;
}

.scontact-submit.is-loading .scontact-submit__spinner {
    display: block;
}

.scontact-submit.is-loading .scontact-submit__arrow {
    display: none;
}

@keyframes scontact-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================
   SUCCESS AND ERROR
========================================================== */

.scontact-success,
.scontact-error {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    margin-bottom: 26px;
    padding: 19px;

    border-radius: 12px;
}

.scontact-success[hidden],
.scontact-error[hidden] {
    display: none !important;
}

.scontact-success {
    border: 1px solid #a5e8d3;
    background: #ecfff7;
}

.scontact-success__icon {
    display: grid;
    place-items: center;

    width: 41px;
    height: 41px;
    flex: 0 0 41px;

    border-radius: 50%;
    color: #ffffff;
    background: #139767;

    font-size: 23px;
    font-weight: 900;
}

.scontact-success strong {
    display: block;
    margin-bottom: 6px;
    color: #096745;
    font-size: 18px;
}

.scontact-success p {
    margin: 0;
    color: #315f50;
    font-size: 14px;
    line-height: 1.6;
}

.scontact-error {
    display: block;
    border: 1px solid #f0b6be;
    background: #fff0f2;
}

.scontact-error strong {
    display: block;
    margin-bottom: 6px;
    color: #a8182c;
    font-size: 16px;
}

.scontact-error p {
    margin: 0;
    color: #874250;
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================================
   SIDEBAR
========================================================== */

.scontact-sidebar {
    display: grid;
    gap: 19px;
}

.scontact-info {
    padding: 31px;

    border: 1px solid rgba(109, 217, 255, .17);
    border-radius: 20px;

    color: #ffffff;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(17, 143, 238, .21),
            transparent 53%
        ),
        linear-gradient(135deg, #0a3358, #04182d);

    box-shadow: 0 13px 35px rgba(6, 53, 94, .08);
}

.scontact-info__eyebrow {
    display: block;
    margin-bottom: 12px;

    color: #83e3ff;
    font-size: 14px;
    font-weight: 900;
}

.scontact-info h2 {
    margin: 0 0 14px;

    color: #ffffff;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(30px, 2.8vw, 39px);
    line-height: 1.13;
}

.scontact-info h2 span {
    color: #83e3ff;
}

.scontact-info > p {
    margin-bottom: 26px;

    color: #c7dcea;
    font-size: 15px;
    line-height: 1.7;
}

.scontact-info__item {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;

    margin-bottom: 14px;
    padding: 15px;

    border: 1px solid rgba(127, 209, 255, .16);
    border-radius: 12px;

    color: #ffffff;
    background: rgba(255, 255, 255, .045);
}

.scontact-info__item > span:last-child {
    min-width: 0;
}

.scontact-info__icon {
    display: grid;
    place-items: center;

    width: 41px;
    height: 41px;
    flex: 0 0 41px;

    border-radius: 11px;
    color: #80e1ff;
    background: rgba(16, 142, 224, .2);

    font-size: 23px;
}

.scontact-info__item small {
    display: block;
    margin-bottom: 5px;

    color: #84e1ff;
    font-size: 14px;
    font-weight: 800;
}

.scontact-info__item strong {
    display: block;

    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

a.scontact-info__item:hover {
    background: rgba(24, 151, 235, .19);
}

/* ==========================================================
   SERVICE AREA CARD
========================================================== */

.scontact-area {
    padding: 26px;

    border: 1px solid #d7e8f5;
    border-radius: 17px;

    background: #ffffff;
}

.scontact-area__eyebrow {
    display: block;
    margin-bottom: 10px;

    color: #087edf;
    font-size: 14px;
    font-weight: 900;
}

.scontact-area h3 {
    margin: 0 0 11px;

    color: #112f50;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 27px;
}

.scontact-area p {
    margin: 0 0 18px;

    color: #607c94;
    font-size: 15px;
    line-height: 1.7;
}

.scontact-area a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #087edf;
    font-size: 14px;
    font-weight: 900;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1050px) {
    .scontact-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .scontact-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (max-width: 700px) {
    .scontact-container {
        width: calc(100% - 28px);
    }

    .scontact-hero {
        min-height: 260px;
        padding: 37px 0;
    }

    .scontact-hero h1 {
        font-size: 53px;
    }

    .scontact-hero .scontact-container > p {
        font-size: 15px;
    }

    .scontact-main {
        padding: 43px 0 55px;
    }

    .scontact-form__grid,
    .scontact-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .scontact-form-card {
        padding: 22px;
    }

    .scontact-form__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .scontact-form__footer > p {
        max-width: none;
    }

    .scontact-submit {
        width: 100%;
    }

    .scontact-info {
        padding: 23px;
    }
}

@media (max-width: 380px) {
    .scontact-container {
        width: calc(100% - 20px);
    }

    .scontact-form-card {
        padding: 17px;
    }

    .scontact-hero h1 {
        font-size: 46px;
    }
}

.scontact :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #6ddfff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .scontact *,
    .scontact *::before,
    .scontact *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================
   SANTOS AC & INSULATION
   SERVICES PAGE — CSS
========================================================== */


/* ==========================================================
   01. CONFIGURACIÓN GENERAL
========================================================== */

.sspg {
    --sspg-navy: #061d36;
    --sspg-blue: #087edf;
    --sspg-cyan: #70e1ff;
    --sspg-red: #e51a30;
    --sspg-text: #173856;
    --sspg-muted: #5c7891;

    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: clip;

    background: #ffffff;
    color: var(--sspg-text);

    font-family: Inter, Arial, sans-serif;
}

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

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

.sspg a {
    text-decoration: none;
}

.sspg button,
.sspg input {
    font: inherit;
}

.sspg button {
    cursor: pointer;
}

.sspg h1,
.sspg h2,
.sspg h3,
.sspg p {
    margin-top: 0;
}

.sspg-container {
    width: min(1380px, calc(100% - 56px));
    min-width: 0;
    margin: 0 auto;
}


/* ==========================================================
   02. ELEMENTOS COMPARTIDOS
========================================================== */

.sspg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 13px;

    color: var(--sspg-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.4;
}

.sspg-eyebrow::before {
    content: "";
    width: 22px;
    height: 3px;
    flex: 0 0 22px;
    border-radius: 5px;
    background: var(--sspg-red);
}

.sspg-eyebrow--light {
    color: #8be5ff;
}

.sspg-heading {
    max-width: 780px;
    margin-bottom: 30px;
}

.sspg-heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.sspg-heading h2,
.sspg-intro h2,
.sspg-help h2,
.sspg-cta h2 {
    margin: 0 0 14px;

    color: var(--sspg-navy);
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(35px, 3.6vw, 51px);
    font-weight: 700;
    line-height: 1.09;
}

.sspg-heading h2 span,
.sspg-intro h2 span,
.sspg-help h2 span {
    color: var(--sspg-blue);
}

.sspg-heading p {
    margin: 0;
    color: var(--sspg-muted);
    font-size: 15px;
    line-height: 1.75;
}

.sspg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 51px;
    padding: 12px 20px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.sspg-button:hover {
    transform: translateY(-2px);
}

.sspg-button--red {
    color: #ffffff;
    background: linear-gradient(135deg, #f42b42, #ca0c23);
    box-shadow: 0 9px 21px rgba(224, 21, 46, .2);
}

.sspg-button--blue {
    color: #ffffff;
    background: linear-gradient(135deg, #148ce9, #075da9);
}

.sspg-button--glass {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .37);
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(10px);
}

.sspg-button--glass:hover {
    background: rgba(255, 255, 255, .19);
}


/* ==========================================================
   SECCIÓN 01 — HERO Y BREADCRUMB
========================================================== */

.sspg-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 355px;
    padding: 49px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.sspg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(5, 31, 57, .91) 51%,
            rgba(4, 31, 57, .62)
        ),
        url("../images/fondo-hero-ac.jpg")
        center / cover no-repeat;
}

.sspg-hero__bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--sspg-red),
        var(--sspg-blue) 50%,
        var(--sspg-cyan),
        transparent
    );
}

/* BREADCRUMB */

.sspg-breadcrumb {
    display: inline-flex;
    max-width: 100%;

    margin-bottom: 26px;
    padding: 10px 15px;

    border: 1px solid rgba(131, 219, 255, .31);
    border-radius: 999px;

    background: rgba(4, 29, 54, .78);
}

.sspg-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.sspg-breadcrumb li,
.sspg-breadcrumb a {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.sspg-breadcrumb [aria-current="page"] {
    color: #84e5ff;
}

.sspg-breadcrumb a:hover {
    color: #84e5ff;
}

/* HERO CONTENT */

.sspg-hero h1 {
    margin: 0 0 16px;

    color: #ffffff;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(51px, 6vw, 78px);
    line-height: 1;
}

.sspg-hero h1 span {
    color: #7de4ff;
}

.sspg-hero .sspg-container > p {
    max-width: 670px;
    margin: 0;

    color: #d9eaf5;
    font-size: 16px;
    line-height: 1.7;
}

.sspg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


/* ==========================================================
   SECCIÓN 02 — INTRODUCCIÓN
========================================================== */

.sspg-intro {
    padding: 62px 0;
    background: #ffffff;
}

.sspg-intro__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 55px;
}

.sspg-intro__heading {
    min-width: 0;
}

.sspg-intro__text {
    padding-left: 26px;
    border-left: 3px solid var(--sspg-blue);
}

.sspg-intro__text p {
    margin: 0 0 12px;

    color: var(--sspg-muted);
    font-size: 16px;
    line-height: 1.8;
}

.sspg-intro__text p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   SECCIÓN 03 — CATÁLOGO
========================================================== */

.sspg-catalog {
    padding: 72px 0 82px;

    background:
        radial-gradient(
            circle at 92% 5%,
            rgba(10, 144, 236, .07),
            transparent 34%
        ),
        #eff8ff;
}

#sspgServiceList {
    scroll-margin-top: 100px;
}

/* TOOLBAR */

.sspg-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 20px;

    padding: 22px;

    border: 1px solid #d8e8f5;
    border-radius: 16px;

    background: #ffffff;
}

.sspg-search {
    flex: 1 1 310px;
    min-width: 0;
}

.sspg-search label {
    display: block;
    margin-bottom: 8px;

    color: #234563;
    font-size: 14px;
    font-weight: 900;
}

.sspg-search__field {
    position: relative;
    min-width: 0;
}

.sspg-search__field svg {
    position: absolute;
    top: 50%;
    left: 14px;

    width: 20px;
    height: 20px;

    transform: translateY(-50%);

    fill: none;
    stroke: var(--sspg-blue);
    stroke-width: 2;
    stroke-linecap: round;

    pointer-events: none;
}

.sspg-search__field input {
    width: 100%;
    min-width: 0;
    min-height: 46px;

    padding: 11px 14px 11px 43px;

    border: 1px solid #d7e6f2;
    border-radius: 10px;

    outline: none;

    color: var(--sspg-text);
    background: #f7fbff;

    font-size: 14px;
}

.sspg-search__field input:focus {
    border-color: var(--sspg-blue);
    box-shadow: 0 0 0 3px rgba(8, 126, 223, .11);
}

/* FILTER BUTTONS */

.sspg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    min-width: 0;
}

.sspg-filter {
    min-height: 42px;
    padding: 9px 14px;

    border: 1px solid #d8e7f4;
    border-radius: 999px;

    color: #446782;
    background: #f6fbff;

    font-size: 14px;
    font-weight: 800;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

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

.sspg-filter.is-active {
    color: #ffffff;
    border-color: var(--sspg-blue);
    background: var(--sspg-blue);
}

/* RESULT COUNT */

.sspg-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 63px;
}

.sspg-results > span {
    color: #57758d;
    font-size: 14px;
    font-weight: 800;
}

.sspg-reset {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 0;

    border: 0;
    color: var(--sspg-blue);
    background: transparent;

    font-size: 14px;
    font-weight: 900;
}

.sspg-reset[hidden] {
    display: none !important;
}

.sspg-reset:hover {
    color: var(--sspg-red);
}

/* ==========================================================
   SERVICIOS — GRID
========================================================== */

.sspg-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    width: 100%;
    min-width: 0;
}

.sspg-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    border: 1px solid #d8e8f4;
    border-radius: 17px;

    background: #ffffff;
    box-shadow: 0 8px 24px rgba(6, 62, 105, .055);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.sspg-card[hidden] {
    display: none !important;
}

.sspg-card:hover {
    transform: translateY(-5px);
    border-color: #94cef6;
    box-shadow: 0 17px 32px rgba(6, 62, 105, .12);
}

/* CARD IMAGE */

.sspg-card__image {
    position: relative;
    height: 198px;
    overflow: hidden;
    background: #0d385c;
}

.sspg-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.sspg-card:hover .sspg-card__image img {
    transform: scale(1.06);
}

.sspg-card__image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0, 18, 37, .25),
        transparent 55%,
        rgba(0, 18, 37, .2)
    );

    pointer-events: none;
}

.sspg-card__number {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 13px;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 10px;

    color: #ffffff;
    background: rgba(3, 25, 47, .85);

    font-size: 14px;
    font-weight: 900;
}

.sspg-card__badge {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 12px;

    max-width: calc(100% - 24px);
    padding: 8px 11px;

    border: 1px solid rgba(255, 255, 255, .33);
    border-radius: 7px;

    color: #ffffff;
    background: rgba(4, 29, 53, .84);

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
}

/* CARD CONTENT */

.sspg-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
    padding: 23px;
}

.sspg-card__content h3 {
    min-height: 53px;
    margin: 0 0 12px;

    color: #103252;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

.sspg-card__content > p {
    margin: 0 0 17px;

    color: #607b93;
    font-size: 14px;
    line-height: 1.7;
}

.sspg-card__content ul {
    display: grid;
    gap: 10px;

    margin: 0 0 24px;
    padding: 0;

    list-style: none;
}

.sspg-card__content li {
    position: relative;
    padding-left: 22px;

    color: #3f6280;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.sspg-card__content li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;

    color: var(--sspg-blue);
    font-weight: 900;
}

/* CARD ACTIONS */

.sspg-card__actions {
    display: flex;
    flex-direction: column;
    gap: 9px;

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

    border-top: 1px solid #e2edf5;
}

.sspg-card__primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 43px;
    padding: 10px 13px;

    border-radius: 9px;

    color: #ffffff;
    background: var(--sspg-blue);

    font-size: 14px;
    font-weight: 900;
}

.sspg-card__primary:hover {
    background: #075da8;
}

.sspg-card__secondary {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 39px;

    color: #c91329;
    font-size: 14px;
    font-weight: 900;
}

.sspg-card__secondary:hover {
    color: #951020;
}

/* EMPTY STATE */

.sspg-empty {
    padding: 45px 20px;

    border: 1px solid #d6e7f4;
    border-radius: 16px;

    background: #ffffff;
    text-align: center;
}

.sspg-empty[hidden] {
    display: none !important;
}

.sspg-empty__icon {
    display: block;
    margin-bottom: 13px;

    color: var(--sspg-blue);
    font-size: 54px;
}

.sspg-empty h3 {
    margin: 0 0 10px;

    color: var(--sspg-navy);
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 29px;
}

.sspg-empty p {
    margin: 0 0 22px;

    color: var(--sspg-muted);
    font-size: 15px;
    line-height: 1.6;
}


/* ==========================================================
   SECCIÓN 04 — HELP
========================================================== */

.sspg-help {
    padding: 79px 0;
    background: #ffffff;
}

.sspg-help__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(30px, 5vw, 75px);
}

.sspg-help__visual {
    position: relative;
    min-width: 0;
    height: 420px;

    overflow: hidden;
    border-radius: 20px;

    background: #e0edf7;
}

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

.sspg-help__image-label {
    position: absolute;
    bottom: 19px;
    left: 19px;

    max-width: calc(100% - 38px);
    padding: 12px 15px;

    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(4, 30, 57, .87);

    font-size: 14px;
    font-weight: 900;
}

.sspg-help__content {
    min-width: 0;
}

.sspg-help__content > p {
    margin: 0 0 25px;

    color: var(--sspg-muted);
    font-size: 16px;
    line-height: 1.8;
}

.sspg-help__topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin-bottom: 27px;
}

.sspg-help__topics span {
    min-width: 0;
    padding: 13px 14px;

    border: 1px solid #d9e9f5;
    border-radius: 10px;

    color: #2c5474;
    background: #f3faff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}


/* ==========================================================
   SECCIÓN 05 — PROCESS
========================================================== */

.sspg-process {
    padding: 76px 0 82px;

    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(16, 143, 240, .18),
            transparent 40%
        ),
        linear-gradient(135deg, #092b4b, #031629);
}

.sspg-process .sspg-eyebrow {
    color: #8be7ff;
}

.sspg-process .sspg-heading h2 {
    color: #ffffff;
}

.sspg-process .sspg-heading h2 span {
    color: #88e4ff;
}

.sspg-process .sspg-heading p {
    color: #bfd8e8;
}

.sspg-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sspg-step {
    min-width: 0;
    padding: 29px;

    border: 1px solid rgba(120, 219, 255, .24);
    border-radius: 15px;

    background: rgba(255, 255, 255, .045);
}

.sspg-step__number {
    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

    margin-bottom: 22px;

    border-radius: 12px;

    color: #8deaff;
    background: rgba(21, 139, 227, .2);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.sspg-step h3 {
    margin: 0 0 11px;

    color: #ffffff;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 27px;
    line-height: 1.2;
}

.sspg-step p {
    margin: 0;

    color: #bed7e8;
    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 06 — CTA
========================================================== */

.sspg-cta {
    position: relative;
    isolation: isolate;

    overflow: hidden;
    padding: 48px 0;

    color: #ffffff;
    background: #061d36;
}

.sspg-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 61, .89),
            rgba(4, 23, 43, .86)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.sspg-cta__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.sspg-cta__content {
    max-width: 730px;
    min-width: 0;
}

.sspg-cta h2 {
    color: #ffffff;
}

.sspg-cta h2 span {
    color: #7fe4ff;
}

.sspg-cta p {
    margin: 0;

    color: #d5e7f2;
    font-size: 16px;
    line-height: 1.7;
}

.sspg-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    min-width: 255px;
}

.sspg-cta__phone,
.sspg-cta__secondary-phone {
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.sspg-cta__secondary-phone {
    color: #a7dff3;
    font-size: 15px;
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1200px) {
    .sspg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sspg-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sspg-search {
        flex-basis: auto;
    }
}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {
    .sspg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sspg-intro__layout,
    .sspg-help__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .sspg-help__visual {
        height: 370px;
    }

    .sspg-process__grid {
        gap: 12px;
    }

    .sspg-step {
        padding: 22px;
    }

    .sspg-step h3 {
        font-size: 23px;
    }
}


/* ==========================================================
   RESPONSIVE — CELULAR
========================================================== */

@media (max-width: 650px) {
    .sspg-container {
        width: calc(100% - 28px);
    }

    .sspg-hero {
        min-height: 290px;
        padding: 39px 0;
    }

    .sspg-hero h1 {
        font-size: 54px;
    }

    .sspg-hero .sspg-container > p {
        font-size: 15px;
    }

    .sspg-breadcrumb {
        border-radius: 12px;
    }

    .sspg-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sspg-intro {
        padding: 47px 0;
    }

    .sspg-intro__text {
        padding-left: 17px;
    }

    .sspg-intro__text p {
        font-size: 15px;
    }

    .sspg-catalog {
        padding: 50px 0 58px;
    }

    .sspg-toolbar {
        padding: 15px;
    }

    .sspg-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

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

    .sspg-filter {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .sspg-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .sspg-card__image {
        height: 220px;
    }

    .sspg-card__content {
        padding: 23px;
    }

    .sspg-card__content h3 {
        min-height: 0;
    }

    .sspg-help {
        padding: 52px 0;
    }

    .sspg-help__visual {
        height: 300px;
    }

    .sspg-help__content > p {
        font-size: 15px;
    }

    .sspg-process {
        padding: 55px 0;
    }

    .sspg-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sspg-step {
        padding: 24px;
    }

    .sspg-step h3 {
        font-size: 26px;
    }

    .sspg-cta {
        padding: 44px 0;
    }

    .sspg-cta__layout {
        flex-direction: column;
        align-items: stretch;
        gap: 26px;
    }

    .sspg-cta__actions {
        min-width: 0;
    }

    .sspg-cta p {
        font-size: 15px;
    }
}


/* ==========================================================
   CELULARES PEQUEÑOS
========================================================== */

@media (max-width: 380px) {
    .sspg-container {
        width: calc(100% - 22px);
    }

    .sspg-hero h1 {
        font-size: 46px;
    }

    .sspg-toolbar {
        padding: 12px;
    }

    .sspg-help__topics {
        grid-template-columns: minmax(0, 1fr);
    }
}


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

.sspg :is(a, button, input):focus-visible {
    outline: 3px solid #65ddff;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .sspg *,
    .sspg *::before,
    .sspg *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}



/* ==========================================================
   SANTOS AC & INSULATION
   AIR CONDITIONING & HEATING INSTALLATION
========================================================== */


/* ==========================================================
   01. GENERAL
========================================================== */

.sahi {

    --sahi-navy: #061d36;
    --sahi-blue: #087edf;
    --sahi-cyan: #75e2ff;
    --sahi-red: #e51a30;
    --sahi-text: #173856;
    --sahi-muted: #58758f;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    background: #ffffff;
    color: var(--sahi-text);

    font-family: Inter, Arial, sans-serif;

}

.sahi *,
.sahi *::before,
.sahi *::after {

    box-sizing: border-box;

}

.sahi img {

    display: block;
    max-width: 100%;

}

.sahi a {

    text-decoration: none;

}

.sahi button {

    font: inherit;
    cursor: pointer;

}

.sahi h1,
.sahi h2,
.sahi h3,
.sahi p {

    margin-top: 0;

}

.sahi-container {

    width: min(1390px, calc(100% - 54px));
    min-width: 0;

    margin: 0 auto;

}

@media (min-width: 1200px) {

    .sahi-container {

        padding-right: 94px;

    }

}


/* ==========================================================
   02. SHARED ELEMENTS
========================================================== */

.sahi-eyebrow {

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

    gap: 9px;

    margin-bottom: 13px;

    color: var(--sahi-blue);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .06em;
    line-height: 1.4;

}

.sahi-eyebrow::before {

    content: "";

    width: 22px;
    height: 3px;

    flex: 0 0 22px;

    background: var(--sahi-red);

}

.sahi-eyebrow--light {

    color: #8be5ff;

}

.sahi-heading {

    max-width: 780px;
    margin-bottom: 29px;

}

.sahi-heading--center {

    margin-right: auto;
    margin-left: auto;

    text-align: center;

}

.sahi-heading h2,
.sahi-intro h2,
.sahi-details h2,
.sahi-faq h2,
.sahi-cta h2 {

    margin: 0 0 15px;

    color: var(--sahi-navy);

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(35px, 3.7vw, 51px);
    line-height: 1.1;

}

.sahi-heading h2 span,
.sahi-intro h2 span,
.sahi-details h2 span,
.sahi-faq h2 span {

    color: var(--sahi-blue);

}

.sahi-heading p {

    margin: 0;

    color: var(--sahi-muted);

    font-size: 15px;
    line-height: 1.75;

}

.sahi-button {

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

    gap: 14px;

    min-height: 51px;

    padding: 12px 20px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;

    text-align: center;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}

.sahi-button:hover {

    transform: translateY(-2px);

}

.sahi-button--red {

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f12b42,
        #c90b23
    );

    box-shadow:
        0 9px 22px rgba(220, 18, 41, .2);

}

.sahi-button--blue {

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #138ce9,
        #075ca8
    );

}

.sahi-button--outline-light {

    color: #ffffff;

    border-color: rgba(255, 255, 255, .45);

    background: rgba(255, 255, 255, .09);

}

.sahi-button--outline-light:hover {

    background: rgba(255, 255, 255, .2);

}


/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.sahi-hero {

    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 440px;

    padding: 54px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061c35;

}

.sahi-hero::before {

    content: "";

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

    background:

        linear-gradient(
            90deg,
            rgba(3, 19, 37, .97),
            rgba(4, 29, 55, .92) 50%,
            rgba(4, 31, 56, .61)
        ),

        url("../images/fondo-hero-ac.jpg")
        center / cover no-repeat;

}

.sahi-hero__line {

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf 50%,
        #75e2ff,
        transparent
    );

}

.sahi-hero__content {

    max-width: 850px;
    min-width: 0;

}

/* BREADCRUMB */

.sahi-breadcrumb {

    display: inline-flex;

    max-width: 100%;

    margin-bottom: 30px;
    padding: 10px 15px;

    border: 1px solid rgba(123, 223, 255, .3);
    border-radius: 12px;

    background: rgba(3, 27, 52, .74);

}

.sahi-breadcrumb ol {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;

}

.sahi-breadcrumb li,
.sahi-breadcrumb a {

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.5;

}

.sahi-breadcrumb [aria-current="page"] {

    color: #86e5ff;

}

.sahi-breadcrumb a:hover {

    color: #86e5ff;

}

/* TITLE */

.sahi-hero h1 {

    max-width: 870px;

    margin: 0 0 19px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(47px, 5.7vw, 76px);
    font-weight: 700;
    line-height: 1.03;

}

.sahi-hero h1 span {

    display: block;
    color: #80e4ff;

}

.sahi-hero__content > p {

    max-width: 690px;

    margin: 0;

    color: #d6e9f5;

    font-size: 16px;
    line-height: 1.7;

}

.sahi-hero__actions {

    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 26px;

}

.sahi-hero__tags {

    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;

}

.sahi-hero__tags span {

    padding: 8px 12px;

    border: 1px solid rgba(130, 226, 255, .23);
    border-radius: 999px;

    color: #c8eafa;

    background: rgba(6, 45, 76, .65);

    font-size: 14px;
    font-weight: 700;

}


/* ==========================================================
   SECCIÓN 02 — INTRODUCTION
========================================================== */

.sahi-intro {

    padding: 77px 0;

    background: #ffffff;

}

.sahi-intro__layout {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: center;

    gap: clamp(30px, 5vw, 75px);

}

.sahi-intro__visual {

    position: relative;
    min-width: 0;

    padding: 15px 35px 29px 0;

}

.sahi-intro__visual::before {

    content: "";

    position: absolute;

    top: 0;
    right: 12px;
    bottom: 0;
    left: 14px;

    border: 1px solid #d8eaf6;
    border-radius: 24px;

    background: #eff8ff;

}

.sahi-intro__main-photo {

    position: relative;

    height: 440px;

    overflow: hidden;

    border-radius: 19px;

    background: #dceaf4;

    box-shadow:
        0 17px 34px rgba(5, 56, 101, .13);

}

.sahi-intro__main-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.sahi-intro__secondary-photo {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 44%;
    height: 195px;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 17px;

    background: #dceaf4;

    box-shadow:
        0 12px 28px rgba(6, 54, 96, .15);

}

.sahi-intro__secondary-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.sahi-intro__photo-label {

    position: absolute;

    top: 31px;
    left: 17px;

    max-width: calc(100% - 75px);

    padding: 11px 15px;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;

    color: #ffffff;

    background: rgba(4, 30, 56, .86);

    font-size: 14px;
    font-weight: 900;

}

.sahi-intro__content {

    min-width: 0;

}

.sahi-intro__content h2 span {

    display: block;

}

.sahi-intro__content > p {

    margin: 0 0 17px;

    color: #56728a;

    font-size: 15px;
    line-height: 1.8;

}

.sahi-intro__content .sahi-intro__lead {

    color: #234768;

    font-size: 17px;
    font-weight: 600;

}

.sahi-intro__features {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin: 24px 0;

}

.sahi-intro__feature {

    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 12px;

    border: 1px solid #dcebf6;
    border-radius: 10px;

    color: #254966;

    background: #f4faff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;

}

.sahi-intro__feature > span {

    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--sahi-blue);

    font-size: 14px;

}


/* ==========================================================
   SECCIÓN 03 — INTERACTIVE OPTIONS
========================================================== */

.sahi-options {

    padding: 75px 0 81px;

    background: #eff8ff;

}

#sahiInstallationOptions {

    scroll-margin-top: 100px;

}

/* TAB BUTTONS */

.sahi-options__tabs {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 17px;

}

.sahi-options__tab {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

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

    padding: 13px;

    border: 1px solid #d4e7f5;
    border-radius: 13px;

    color: #335c7e;

    background: #ffffff;

    font-size: 15px;
    font-weight: 900;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;

}

.sahi-options__tab > span {

    font-size: 24px;
    line-height: 1;

}

.sahi-options__tab:hover {

    border-color: var(--sahi-blue);

    color: var(--sahi-blue);

}

.sahi-options__tab.is-active {

    color: #ffffff;

    border-color: #087edf;

    background: linear-gradient(
        135deg,
        #1189e5,
        #075da9
    );

    box-shadow:
        0 9px 23px rgba(8, 126, 223, .17);

}

/* PANELS */

.sahi-options__panel {

    display: grid;

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

    min-width: 0;

    overflow: hidden;

    border: 1px solid #d6e7f5;
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 12px 31px rgba(5, 61, 107, .07);

}

.sahi-options__panel[hidden] {

    display: none !important;

}

.sahi-options__panel-image {

    min-height: 420px;

    overflow: hidden;

    background: #0b3658;

}

.sahi-options__panel-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.sahi-options__panel-content {

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    min-width: 0;

    padding: clamp(23px, 3vw, 43px);

}

.sahi-options__panel-label {

    margin-bottom: 12px;

    color: var(--sahi-blue);

    font-size: 14px;
    font-weight: 900;

}

.sahi-options__panel-content h3 {

    margin: 0 0 17px;

    color: #103454;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(29px, 2.8vw, 39px);
    line-height: 1.1;

}

.sahi-options__panel-content p {

    margin: 0 0 14px;

    color: #58758d;

    font-size: 15px;
    line-height: 1.75;

}

.sahi-options__panel-content ul {

    display: grid;
    gap: 11px;

    margin: 6px 0 26px;
    padding: 0;

    list-style: none;

}

.sahi-options__panel-content li {

    position: relative;

    padding-left: 23px;

    color: #385d7a;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;

}

.sahi-options__panel-content li::before {

    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--sahi-blue);
    font-weight: 900;

}

.sahi-options__panel-content .sahi-button {

    margin-top: auto;

}


/* ==========================================================
   SECCIÓN 04 — INSTALLATION DETAILS
========================================================== */

.sahi-details {

    padding: 78px 0;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 85% 8%,
            rgba(17, 139, 231, .2),
            transparent 37%
        ),

        linear-gradient(
            135deg,
            #092c4d,
            #031629
        );

}

.sahi-details__layout {

    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 55px;

    align-items: center;

}

.sahi-details__intro {

    min-width: 0;

}

.sahi-details h2 {

    color: #ffffff;

}

.sahi-details h2 span {

    display: block;
    color: #83e3ff;

}

.sahi-details__intro > p {

    margin: 0 0 24px;

    color: #c5dbe9;

    font-size: 15px;
    line-height: 1.8;

}

.sahi-details__grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

}

.sahi-detail {

    min-width: 0;

    padding: 23px;

    border: 1px solid rgba(135, 223, 255, .22);
    border-radius: 14px;

    background: rgba(255, 255, 255, .045);

}

.sahi-detail__number {

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    margin-bottom: 17px;

    border-radius: 10px;

    color: #8ceaff;

    background: rgba(12, 142, 234, .2);

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 23px;
    font-weight: 700;

}

.sahi-detail h3 {

    margin: 0 0 10px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 24px;

}

.sahi-detail p {

    margin: 0;

    color: #c1d9e8;

    font-size: 14px;
    line-height: 1.65;

}


/* ==========================================================
   SECCIÓN 05 — PROCESS
========================================================== */

.sahi-process {

    padding: 73px 0 79px;

    background: #ffffff;

}

.sahi-process__grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 19px;

}

.sahi-process__step {

    position: relative;

    min-width: 0;

    padding: 28px;

    border: 1px solid #dce9f5;
    border-radius: 16px;

    background: #f5faff;

}

.sahi-process__number {

    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

    margin-bottom: 20px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--sahi-blue);

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 24px;
    font-weight: 700;

}

.sahi-process__step h3 {

    margin: 0 0 11px;

    color: #113553;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 27px;
    line-height: 1.15;

}

.sahi-process__step p {

    margin: 0;

    color: #5b7890;

    font-size: 15px;
    line-height: 1.7;

}


/* ==========================================================
   SECCIÓN 06 — PROJECTS
========================================================== */

.sahi-projects {

    padding: 73px 0 80px;

    background: #eff8ff;

}

.sahi-projects__heading {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 28px;

}

.sahi-projects__heading .sahi-heading {

    margin-bottom: 0;

}

.sahi-projects__all {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    flex: 0 0 auto;

    color: var(--sahi-blue);

    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;

}

.sahi-projects__all:hover {

    color: var(--sahi-red);

}

.sahi-projects__grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 17px;

}

.sahi-project {

    display: block;

    min-width: 0;

    overflow: hidden;

    border: 1px solid #d8e8f4;
    border-radius: 16px;

    background: #ffffff;

    color: inherit;

    box-shadow:
        0 8px 23px rgba(6, 62, 105, .06);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.sahi-project:hover {

    transform: translateY(-4px);

    box-shadow:
        0 16px 31px rgba(6, 62, 105, .12);

}

.sahi-project__image {

    height: 235px;

    overflow: hidden;

    background: #0b3456;

}

.sahi-project__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;

}

.sahi-project:hover img {

    transform: scale(1.055);

}

.sahi-project__content {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 74px;

    padding: 17px 19px;

}

.sahi-project__content strong {

    color: #123958;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 23px;
    font-weight: 700;

}

.sahi-project__content > span {

    color: var(--sahi-blue);

    font-size: 24px;

}


/* ==========================================================
   SECCIÓN 07 — RELATED SERVICES
========================================================== */

.sahi-related {

    padding: 73px 0 79px;

    background: #ffffff;

}

.sahi-related__grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 17px;

}

.sahi-related__card {

    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);

    align-items: center;

    gap: 17px;

    min-width: 0;

    padding: 13px;

    border: 1px solid #dce9f4;
    border-radius: 14px;

    color: inherit;
    background: #f5faff;

    transition:
        transform .2s ease,
        border-color .2s ease;

}

.sahi-related__card:hover {

    transform: translateY(-3px);

    border-color: #82cafa;

}

.sahi-related__card img {

    width: 100px;
    height: 90px;

    object-fit: cover;

    border-radius: 10px;

}

.sahi-related__card > div {

    min-width: 0;

}

.sahi-related__card h3 {

    margin: 0 0 9px;

    color: #143754;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: 22px;
    line-height: 1.2;

}

.sahi-related__card > div > span {

    color: var(--sahi-blue);

    font-size: 14px;
    font-weight: 900;

}


/* ==========================================================
   SECCIÓN 08 — FAQ
========================================================== */

.sahi-faq {

    padding: 76px 0;

    background: #eff8ff;

}

.sahi-faq__layout {

    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 55px;

    align-items: start;

}

.sahi-faq__intro {

    min-width: 0;

}

.sahi-faq__intro h2 span {

    display: block;

}

.sahi-faq__intro > p {

    margin: 0 0 24px;

    color: #5a7890;

    font-size: 15px;
    line-height: 1.75;

}

.sahi-faq__items {

    display: grid;
    gap: 11px;

    min-width: 0;

}

.sahi-faq__item {

    min-width: 0;

    overflow: hidden;

    border: 1px solid #d8e8f5;
    border-radius: 12px;

    background: #ffffff;

}

.sahi-faq__item[open] {

    border-color: #97cffa;

}

.sahi-faq__item summary {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 20px;

    color: #173958;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;

    cursor: pointer;

    list-style: none;

}

.sahi-faq__item summary::-webkit-details-marker {

    display: none;

}

.sahi-faq__item summary span {

    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 8px;

    color: var(--sahi-blue);
    background: #e9f5ff;

    font-size: 22px;

    transition: transform .2s ease;

}

.sahi-faq__item[open] summary span {

    transform: rotate(45deg);

}

.sahi-faq__item p {

    margin: 0;

    padding: 0 20px 20px;

    color: #5a7890;

    font-size: 15px;
    line-height: 1.75;

}


/* ==========================================================
   SECCIÓN 09 — FINAL CTA
========================================================== */

.sahi-cta {

    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding: 49px 0;

    color: #ffffff;
    background: #061d36;

}

.sahi-cta::before {

    content: "";

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

    background:

        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .89),
            rgba(4, 23, 42, .84)
        ),

        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;

}

.sahi-cta__layout {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

}

.sahi-cta__content {

    max-width: 730px;
    min-width: 0;

}

.sahi-cta h2 {

    color: #ffffff;

}

.sahi-cta h2 span {

    color: #83e4ff;

}

.sahi-cta p {

    margin: 0;

    color: #d4e8f3;

    font-size: 16px;
    line-height: 1.7;

}

.sahi-cta__actions {

    display: flex;

    flex-direction: column;
    align-items: stretch;

    gap: 12px;

    min-width: 250px;

}

.sahi-cta__phone,
.sahi-cta__secondary-phone {

    color: #ffffff;

    font-size: 17px;
    font-weight: 900;

    text-align: center;

}

.sahi-cta__secondary-phone {

    color: #9ddcf3;

    font-size: 15px;

}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .sahi-intro__layout,
    .sahi-details__layout,
    .sahi-faq__layout {

        gap: 30px;

    }

    .sahi-intro__main-photo {

        height: 380px;

    }

    .sahi-related__grid {

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

    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 850px) {

    .sahi-intro__layout,
    .sahi-details__layout,
    .sahi-faq__layout {

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

    }

    .sahi-intro__visual {

        max-width: 690px;

    }

    .sahi-options__panel {

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

    }

    .sahi-options__panel-image {

        min-height: 0;
        height: 340px;

    }

    .sahi-process__grid {

        gap: 12px;

    }

    .sahi-process__step {

        padding: 22px;

    }

    .sahi-process__step h3 {

        font-size: 23px;

    }

    .sahi-projects__grid {

        gap: 12px;

    }

    .sahi-project__image {

        height: 190px;

    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 650px) {

    .sahi-container {

        width: calc(100% - 28px);

    }

    /* HERO */

    .sahi-hero {

        min-height: 0;

        padding: 41px 0 44px;

    }

    .sahi-hero h1 {

        font-size: clamp(39px, 10vw, 55px);

    }

    .sahi-hero__content > p {

        font-size: 15px;

    }

    .sahi-hero__actions {

        flex-direction: column;
        align-items: stretch;

    }

    .sahi-hero__tags {

        gap: 7px;

    }

    /* INTRO */

    .sahi-intro {

        padding: 48px 0 55px;

    }

    .sahi-intro__visual {

        padding: 10px 27px 25px 0;

    }

    .sahi-intro__main-photo {

        height: 300px;

    }

    .sahi-intro__secondary-photo {

        height: 127px;
        border-width: 4px;

    }

    .sahi-intro__features {

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

    }

    .sahi-intro__content .sahi-button {

        width: 100%;

    }

    /* OPTIONS */

    .sahi-options {

        padding: 53px 0 59px;

    }

    .sahi-options__tabs {

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

        gap: 9px;

    }

    .sahi-options__tab {

        justify-content: flex-start;

        min-height: 52px;

        padding: 12px 16px;

    }

    .sahi-options__panel-image {

        height: 250px;

    }

    .sahi-options__panel-content {

        padding: 23px;

    }

    .sahi-options__panel-content .sahi-button {

        width: 100%;

    }

    /* DETAILS */

    .sahi-details {

        padding: 55px 0;

    }

    .sahi-details__grid {

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

    }

    /* PROCESS */

    .sahi-process {

        padding: 53px 0 58px;

    }

    .sahi-process__grid {

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

    }

    .sahi-process__step {

        padding: 24px;

    }

    .sahi-process__step h3 {

        font-size: 26px;

    }

    /* PROJECTS */

    .sahi-projects {

        padding: 52px 0 59px;

    }

    .sahi-projects__heading {

        flex-direction: column;
        align-items: flex-start;

    }

    .sahi-projects__grid {

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

        gap: 15px;

    }

    .sahi-project__image {

        height: 240px;

    }

    /* RELATED */

    .sahi-related {

        padding: 54px 0 60px;

    }

    /* FAQ */

    .sahi-faq {

        padding: 54px 0 61px;

    }

    /* CTA */

    .sahi-cta {

        padding: 44px 0;

    }

    .sahi-cta__layout {

        flex-direction: column;
        align-items: stretch;

        gap: 25px;

    }

    .sahi-cta__actions {

        min-width: 0;

    }

    .sahi-cta p {

        font-size: 15px;

    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .sahi-container {

        width: calc(100% - 22px);

    }

    .sahi-intro__main-photo {

        height: 255px;

    }

    .sahi-intro__secondary-photo {

        height: 108px;

    }

    .sahi-options__panel-image {

        height: 215px;

    }

    .sahi-related__card {

        grid-template-columns: 82px minmax(0, 1fr);

        gap: 12px;

    }

    .sahi-related__card img {

        width: 82px;
        height: 80px;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.sahi :is(a, button, summary):focus-visible {

    outline: 3px solid #6fe1ff;
    outline-offset: 4px;

}

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

    .sahi *,
    .sahi *::before,
    .sahi *::after {

        animation: none !important;
        transition: none !important;

    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   AIR DUCT CLEANING — CSS
========================================================== */


/* ==========================================================
   01. GENERAL
========================================================== */

.sadc {
    --sadc-navy: #061d36;
    --sadc-blue: #087edf;
    --sadc-cyan: #77e4ff;
    --sadc-red: #e51a30;
    --sadc-text: #173856;
    --sadc-muted: #5c7891;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    background: #ffffff;
    color: var(--sadc-text);

    font-family: Inter, Arial, sans-serif;
}

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

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

.sadc a {
    text-decoration: none;
}

.sadc button {
    font: inherit;
    cursor: pointer;
}

.sadc h1,
.sadc h2,
.sadc h3,
.sadc p {
    margin-top: 0;
}

.sadc-container {
    width: min(1390px, calc(100% - 54px));
    min-width: 0;
    margin: 0 auto;
}

/* Espacio para la barra flotante del sitio */

@media (min-width: 1200px) {
    .sadc-container {
        padding-right: 94px;
    }
}


/* ==========================================================
   02. ELEMENTOS COMPARTIDOS
========================================================== */

.sadc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 13px;

    color: var(--sadc-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.4;
}

.sadc-eyebrow::before {
    content: "";

    width: 22px;
    height: 3px;
    flex: 0 0 22px;

    background: var(--sadc-red);
}

.sadc-eyebrow--light {
    color: #8ce7ff;
}

.sadc-heading {
    max-width: 780px;
    margin-bottom: 29px;
}

.sadc-heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.sadc-heading h2,
.sadc-intro h2,
.sadc-details h2,
.sadc-faq h2,
.sadc-cta h2 {
    margin: 0 0 15px;

    color: var(--sadc-navy);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(35px, 3.7vw, 51px);
    font-weight: 700;
    line-height: 1.1;
}

.sadc-heading h2 span,
.sadc-intro h2 span,
.sadc-details h2 span,
.sadc-faq h2 span {
    color: var(--sadc-blue);
}

.sadc-heading p {
    margin: 0;

    color: var(--sadc-muted);

    font-size: 15px;
    line-height: 1.75;
}

.sadc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 51px;
    padding: 12px 19px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.sadc-button:hover {
    transform: translateY(-2px);
}

.sadc-button--red {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f12d43,
        #c90b23
    );

    box-shadow: 0 9px 22px rgba(220, 18, 41, .19);
}

.sadc-button--blue {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #138ce9,
        #075ca8
    );
}

.sadc-button--outline {
    color: #ffffff;

    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .09);
}

.sadc-button--outline:hover {
    background: rgba(255, 255, 255, .19);
}


/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.sadc-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 430px;
    padding: 52px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.sadc-hero::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 29, 55, .91) 50%,
            rgba(4, 31, 57, .61)
        ),
        url("../images/project-ducts.jpg")
        center / cover no-repeat;
}

.sadc-hero__line {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf 50%,
        #77e4ff,
        transparent
    );
}

/* BREADCRUMB */

.sadc-breadcrumb {
    display: inline-flex;
    max-width: 100%;

    margin-bottom: 29px;
    padding: 10px 15px;

    border: 1px solid rgba(125, 225, 255, .3);
    border-radius: 12px;

    background: rgba(3, 28, 53, .75);
}

.sadc-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.sadc-breadcrumb li,
.sadc-breadcrumb a {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.sadc-breadcrumb [aria-current="page"] {
    color: #85e6ff;
}

.sadc-breadcrumb a:hover {
    color: #85e6ff;
}

/* HERO TEXT */

.sadc-hero h1 {
    margin: 0 0 19px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(49px, 6vw, 78px);
    line-height: 1.02;
}

.sadc-hero h1 span {
    display: block;
    color: #82e5ff;
}

.sadc-hero__content {
    max-width: 770px;
    min-width: 0;
}

.sadc-hero__content > p {
    max-width: 680px;
    margin: 0;

    color: #d6e9f5;
    font-size: 16px;
    line-height: 1.7;
}

.sadc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 26px;
}

.sadc-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 28px;
}

.sadc-hero__tags span {
    padding: 8px 12px;

    border: 1px solid rgba(135, 228, 255, .25);
    border-radius: 999px;

    color: #c8eafa;
    background: rgba(5, 45, 77, .67);

    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   SECCIÓN 02 — INTRO
========================================================== */

.sadc-intro {
    padding: 77px 0;
    background: #ffffff;
}

.sadc-intro__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;
    gap: clamp(30px, 5vw, 75px);
}

.sadc-intro__visual {
    position: relative;
    min-width: 0;

    padding: 15px 35px 29px 0;
}

.sadc-intro__visual::before {
    content: "";

    position: absolute;

    top: 0;
    right: 12px;
    bottom: 0;
    left: 14px;

    border: 1px solid #d8eaf6;
    border-radius: 24px;

    background: #eff8ff;
}

.sadc-intro__main-photo {
    position: relative;

    height: 430px;

    overflow: hidden;
    border-radius: 19px;

    background: #dceaf4;

    box-shadow: 0 17px 34px rgba(5, 56, 101, .13);
}

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

.sadc-intro__secondary-photo {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 44%;
    height: 190px;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 17px;

    background: #dceaf4;

    box-shadow: 0 12px 28px rgba(6, 54, 96, .15);
}

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

.sadc-intro__photo-label {
    position: absolute;

    top: 31px;
    left: 17px;

    max-width: calc(100% - 75px);

    padding: 11px 15px;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(4, 30, 56, .86);

    font-size: 14px;
    font-weight: 900;
}

.sadc-intro__content {
    min-width: 0;
}

.sadc-intro__content h2 span {
    display: block;
}

.sadc-intro__content > p {
    margin: 0 0 17px;

    color: #56728a;
    font-size: 15px;
    line-height: 1.8;
}

.sadc-intro__content .sadc-intro__lead {
    color: #244967;
    font-size: 17px;
    font-weight: 600;
}

.sadc-intro__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
    margin: 24px 0;
}

.sadc-intro__features > div {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;

    padding: 12px;

    border: 1px solid #dcebf6;
    border-radius: 10px;

    color: #254966;
    background: #f4faff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.sadc-intro__features > div > span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--sadc-blue);
}


/* ==========================================================
   SECCIÓN 03 — SIGNS
========================================================== */

.sadc-signs {
    padding: 73px 0 77px;
    background: #eff8ff;
}

.sadc-signs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 16px;
}

.sadc-sign {
    position: relative;

    min-width: 0;
    padding: 26px;

    border: 1px solid #d7e8f5;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(6, 62, 105, .05);

    transition: transform .2s ease;
}

.sadc-sign:hover {
    transform: translateY(-4px);
}

.sadc-sign__number {
    display: block;
    margin-bottom: 16px;

    color: #94b4cb;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.sadc-sign__icon {
    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

    margin-bottom: 19px;

    border-radius: 12px;

    color: #ffffff;
    background: var(--sadc-blue);

    font-size: 27px;
}

.sadc-sign h3 {
    margin: 0 0 11px;

    color: #123655;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.17;
}

.sadc-sign p {
    margin: 0;

    color: #5a7790;
    font-size: 14px;
    line-height: 1.7;
}

/* INFORMATION NOTE */

.sadc-signs__note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 24px;
    padding: 18px 20px;

    border: 1px solid #cce4f5;
    border-radius: 12px;

    background: #ffffff;
}

.sadc-signs__note > span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--sadc-blue);

    font-size: 18px;
    font-weight: 900;
}

.sadc-signs__note p {
    margin: 0;

    color: #55738c;
    font-size: 14px;
    line-height: 1.7;
}

.sadc-signs__note strong {
    color: #123d60;
}


/* ==========================================================
   SECCIÓN 04 — DETAILS
========================================================== */

.sadc-details {
    padding: 78px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(20, 145, 237, .19),
            transparent 38%
        ),
        linear-gradient(135deg, #092d4e, #031629);
}

.sadc-details__layout {
    display: grid;
    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    align-items: center;
    gap: 55px;
}

.sadc-details__intro {
    min-width: 0;
}

.sadc-details h2 {
    color: #ffffff;
}

.sadc-details h2 span {
    display: block;
    color: #8be7ff;
}

.sadc-details__intro > p {
    margin: 0 0 25px;

    color: #c5dbe9;
    font-size: 15px;
    line-height: 1.8;
}

.sadc-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.sadc-detail {
    min-width: 0;

    padding: 23px;

    border: 1px solid rgba(126, 218, 255, .23);
    border-radius: 14px;

    background: rgba(255, 255, 255, .045);
}

.sadc-detail > span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    margin-bottom: 17px;

    border-radius: 10px;

    color: #8ee8ff;
    background: rgba(11, 143, 232, .19);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.sadc-detail h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
}

.sadc-detail p {
    margin: 0;

    color: #c1d9e8;
    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   SECCIÓN 05 — GALLERY
========================================================== */

.sadc-gallery {
    padding: 75px 0 83px;
    background: #ffffff;
}

.sadc-gallery__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 28px;
}

.sadc-gallery__heading .sadc-heading {
    margin-bottom: 0;
}

.sadc-gallery__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    flex: 0 0 auto;

    color: var(--sadc-blue);

    font-size: 14px;
    font-weight: 900;
}

.sadc-gallery__all:hover {
    color: var(--sadc-red);
}

/* GALLERY LAYOUT */

.sadc-gallery__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(0, .6fr);

    gap: 16px;
}

/* MAIN VIEWER */

.sadc-gallery__viewer {
    position: relative;

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

    overflow: hidden;

    border-radius: 18px;

    background: #092c4e;
}

.sadc-gallery__viewer > img {
    width: 100%;
    height: 100%;

    max-height: 560px;
    min-height: 425px;

    object-fit: cover;
}

.sadc-gallery__viewer::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(3, 19, 38, .07),
        transparent 45%,
        rgba(3, 19, 38, .77)
    );
}

/* CAPTION */

.sadc-gallery__caption {
    position: absolute;
    z-index: 2;

    right: 20px;
    bottom: 20px;
    left: 20px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
    padding-right: 113px;
}

.sadc-gallery__caption > div {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.sadc-gallery__caption > div > span {
    color: #8de8ff;

    font-size: 14px;
    font-weight: 900;
}

.sadc-gallery__caption strong {
    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 30px;
    line-height: 1.12;
}

.sadc-gallery__caption > span {
    color: #ffffff;

    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;
}

/* CONTROLS */

.sadc-gallery__controls {
    position: absolute;
    z-index: 3;

    right: 19px;
    bottom: 19px;

    display: flex;
    gap: 8px;
}

.sadc-gallery__controls button {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;

    color: #ffffff;
    background: rgba(4, 35, 65, .88);

    font-size: 24px;
}

.sadc-gallery__controls button:hover {
    background: var(--sadc-blue);
}

/* THUMBNAILS */

.sadc-gallery__thumbnails {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px;

    min-width: 0;
}

.sadc-gallery__thumb {
    position: relative;

    display: block;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    padding: 0;

    border: 3px solid transparent;
    border-radius: 12px;

    background: #0b3558;

    text-align: left;
}

.sadc-gallery__thumb.is-active {
    border-color: var(--sadc-blue);
}

.sadc-gallery__thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sadc-gallery__thumb::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        transparent 25%,
        rgba(3, 20, 39, .86)
    );
}

.sadc-gallery__thumb > span {
    position: absolute;
    z-index: 2;

    right: 12px;
    bottom: 12px;
    left: 12px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
}


/* ==========================================================
   SECCIÓN 06 — PROCESS
========================================================== */

.sadc-process {
    padding: 74px 0 81px;
    background: #eff8ff;
}

.sadc-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.sadc-step {
    min-width: 0;

    padding: 28px;

    border: 1px solid #dce9f5;
    border-radius: 15px;

    background: #ffffff;
}

.sadc-step__number {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    margin-bottom: 22px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--sadc-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.sadc-step h3 {
    margin: 0 0 12px;

    color: #123654;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 27px;
}

.sadc-step p {
    margin: 0;

    color: #5e7a92;
    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 07 — RELATED SERVICES
========================================================== */

.sadc-related {
    padding: 73px 0 81px;
    background: #ffffff;
}

.sadc-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 17px;
}

.sadc-related__card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);

    align-items: center;
    gap: 17px;

    min-width: 0;
    padding: 13px;

    border: 1px solid #dce9f5;
    border-radius: 14px;

    color: inherit;
    background: #f5faff;

    transition: transform .2s ease;
}

.sadc-related__card:hover {
    transform: translateY(-3px);
}

.sadc-related__card img {
    width: 100px;
    height: 92px;

    object-fit: cover;
    border-radius: 9px;
}

.sadc-related__card > div {
    min-width: 0;
}

.sadc-related__card h3 {
    margin: 0 0 9px;

    color: #143957;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    line-height: 1.2;
}

.sadc-related__card > div > span {
    color: var(--sadc-blue);

    font-size: 14px;
    font-weight: 900;
}


/* ==========================================================
   SECCIÓN 08 — FAQ
========================================================== */

.sadc-faq {
    padding: 76px 0 82px;
    background: #eff8ff;
}

.sadc-faq__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 55px;
}

.sadc-faq__intro {
    min-width: 0;
}

.sadc-faq__intro h2 span {
    display: block;
}

.sadc-faq__intro > p {
    margin: 0 0 23px;

    color: #5c7890;
    font-size: 15px;
    line-height: 1.75;
}

.sadc-faq__items {
    display: grid;
    gap: 11px;

    min-width: 0;
}

.sadc-faq__item {
    min-width: 0;

    overflow: hidden;

    border: 1px solid #d9e8f4;
    border-radius: 12px;

    background: #ffffff;
}

.sadc-faq__item[open] {
    border-color: #98d0fa;
}

.sadc-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 20px;

    color: #183b59;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;

    cursor: pointer;
    list-style: none;
}

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

.sadc-faq__item summary span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 8px;

    color: var(--sadc-blue);
    background: #e8f5ff;

    font-size: 22px;

    transition: transform .2s ease;
}

.sadc-faq__item[open] summary span {
    transform: rotate(45deg);
}

.sadc-faq__item p {
    margin: 0;
    padding: 0 20px 20px;

    color: #5b7890;
    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================================
   SECCIÓN 09 — FINAL CTA
========================================================== */

.sadc-cta {
    position: relative;
    isolation: isolate;

    padding: 49px 0;
    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.sadc-cta::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .88),
            rgba(4, 23, 42, .85)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.sadc-cta__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}

.sadc-cta__content {
    max-width: 730px;
    min-width: 0;
}

.sadc-cta h2 {
    color: #ffffff;
}

.sadc-cta h2 span {
    color: #82e5ff;
}

.sadc-cta p {
    margin: 0;

    color: #d5e8f3;
    font-size: 16px;
    line-height: 1.7;
}

.sadc-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 12px;
    min-width: 255px;
}

.sadc-cta__phone,
.sadc-cta__secondary-phone {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.sadc-cta__secondary-phone {
    color: #9fdcf2;
    font-size: 15px;
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .sadc-signs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sadc-intro__layout,
    .sadc-details__layout,
    .sadc-faq__layout {
        gap: 30px;
    }

    .sadc-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 850px) {

    .sadc-intro__layout,
    .sadc-details__layout,
    .sadc-faq__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sadc-intro__visual {
        max-width: 690px;
    }

    .sadc-gallery__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sadc-gallery__viewer,
    .sadc-gallery__viewer > img {
        min-height: 350px;
        height: 350px;
    }

    .sadc-gallery__thumbnails {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .sadc-gallery__thumb {
        height: 125px;
    }

    .sadc-process__grid {
        gap: 12px;
    }

    .sadc-step {
        padding: 22px;
    }

    .sadc-step h3 {
        font-size: 23px;
    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 650px) {

    .sadc-container {
        width: calc(100% - 28px);
    }

    /* HERO */

    .sadc-hero {
        min-height: 0;
        padding: 42px 0;
    }

    .sadc-hero h1 {
        font-size: clamp(46px, 11vw, 60px);
    }

    .sadc-hero__content > p {
        font-size: 15px;
    }

    .sadc-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* INTRO */

    .sadc-intro {
        padding: 50px 0 56px;
    }

    .sadc-intro__visual {
        padding: 10px 26px 25px 0;
    }

    .sadc-intro__main-photo {
        height: 295px;
    }

    .sadc-intro__secondary-photo {
        height: 125px;
        border-width: 4px;
    }

    .sadc-intro__features {
        grid-template-columns: minmax(0, 1fr);
    }

    .sadc-intro__content .sadc-button {
        width: 100%;
    }

    /* SIGNS */

    .sadc-signs {
        padding: 54px 0 60px;
    }

    .sadc-signs__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sadc-sign {
        padding: 24px;
    }

    /* DETAILS */

    .sadc-details {
        padding: 56px 0;
    }

    .sadc-details__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* GALLERY */

    .sadc-gallery {
        padding: 54px 0 61px;
    }

    .sadc-gallery__heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .sadc-gallery__viewer,
    .sadc-gallery__viewer > img {
        min-height: 280px;
        height: 280px;
    }

    .sadc-gallery__caption {
        right: 12px;
        bottom: 13px;
        left: 12px;

        padding-right: 0;
        padding-bottom: 48px;
    }

    .sadc-gallery__caption strong {
        font-size: 24px;
    }

    .sadc-gallery__controls {
        right: 12px;
        bottom: 11px;
    }

    .sadc-gallery__thumbnails {
        gap: 7px;
    }

    .sadc-gallery__thumb {
        height: 110px;
    }

    .sadc-gallery__thumb > span {
        right: 7px;
        bottom: 7px;
        left: 7px;

        font-size: 14px;
    }

    /* PROCESS */

    .sadc-process {
        padding: 55px 0 61px;
    }

    .sadc-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sadc-step {
        padding: 24px;
    }

    .sadc-step h3 {
        font-size: 26px;
    }

    /* RELATED */

    .sadc-related {
        padding: 54px 0 61px;
    }

    /* FAQ */

    .sadc-faq {
        padding: 55px 0 61px;
    }

    /* CTA */

    .sadc-cta {
        padding: 45px 0;
    }

    .sadc-cta__layout {
        flex-direction: column;
        align-items: stretch;

        gap: 25px;
    }

    .sadc-cta__actions {
        min-width: 0;
    }

    .sadc-cta p {
        font-size: 15px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .sadc-container {
        width: calc(100% - 22px);
    }

    .sadc-intro__main-photo {
        height: 255px;
    }

    .sadc-intro__secondary-photo {
        height: 108px;
    }

    .sadc-gallery__viewer,
    .sadc-gallery__viewer > img {
        min-height: 240px;
        height: 240px;
    }

    .sadc-gallery__thumb {
        height: 96px;
    }

    .sadc-related__card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
    }

    .sadc-related__card img {
        width: 82px;
        height: 80px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.sadc :is(a, button, summary):focus-visible {
    outline: 3px solid #71e2ff;
    outline-offset: 4px;
}

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

    .sadc *,
    .sadc *::before,
    .sadc *::after {
        animation: none !important;
        transition: none !important;
    }

}

/* ==========================================================
   SANTOS AC & INSULATION
   SECCIÓN 05 — GALERÍA CORREGIDA
   PREFIJO EXCLUSIVO: sdgx-
========================================================== */

/* ==========================================================
   01. SECCIÓN
========================================================== */

.sadc .sdgx {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    padding: 70px 0 76px;

    overflow: hidden;

    background: #ffffff;
}

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

/* ==========================================================
   02. ENCABEZADO
========================================================== */

.sadc .sdgx__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 28px;

    min-width: 0;
}

.sadc .sdgx__heading .sadc-heading {
    min-width: 0;
    margin-bottom: 0;
}

.sadc .sdgx__all {
    display: inline-flex;
    align-items: center;

    gap: 10px;
    flex: 0 0 auto;

    color: #087edf;

    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;

    transition: color .2s ease;
}

.sadc .sdgx__all:hover {
    color: #e51a30;
}

/* ==========================================================
   03. ESTRUCTURA PRINCIPAL

   Altura controlada para evitar el bloque vacío.
========================================================== */

.sadc .sdgx__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(0, .65fr);

    gap: 14px;

    width: 100%;
    height: clamp(420px, 38vw, 550px);

    min-width: 0;
    max-width: 100%;

    overflow: hidden;
}

/* ==========================================================
   04. VISOR PRINCIPAL
========================================================== */

.sadc .sdgx__stage {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 16px;

    background: #102e4b;
}

/*
   La imagen ocupa siempre el visor completo.
   No tiene min-height ni max-height conflictivos.
*/

.sadc .sdgx__stage > img {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

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

    background: #102e4b;
}

/* Gradiente sobre la imagen */

.sadc .sdgx__stage::after {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(4, 22, 42, .25) 0%,
        transparent 36%,
        transparent 52%,
        rgba(3, 18, 36, .87) 100%
    );
}

/* ==========================================================
   05. ETIQUETA SUPERIOR
========================================================== */

.sadc .sdgx__badge {
    position: absolute;
    z-index: 3;

    top: 18px;
    left: 18px;

    max-width: calc(100% - 145px);

    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .82);

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
}

/* ==========================================================
   06. CONTROLES

   Ubicados arriba a la derecha.
   Nunca chocan con el texto inferior.
========================================================== */

.sadc .sdgx__controls {
    position: absolute;
    z-index: 4;

    top: 16px;
    right: 16px;

    display: flex;
    gap: 8px;
}

.sadc .sdgx__controls button {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 10px;

    color: #ffffff;
    background: rgba(5, 35, 62, .85);

    font-size: 23px;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.sadc .sdgx__controls button:hover {
    background: #087edf;
    transform: translateY(-2px);
}

/* ==========================================================
   07. INFORMACIÓN INFERIOR
========================================================== */

.sadc .sdgx__caption {
    position: absolute;
    z-index: 3;

    right: 24px;
    bottom: 24px;
    left: 24px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    min-width: 0;
}

.sadc .sdgx__caption-text {
    min-width: 0;
}

.sadc .sdgx__caption-text > span {
    display: block;

    margin-bottom: 7px;

    color: #8ce8ff;

    font-size: 14px;
    font-weight: 900;
}

.sadc .sdgx__caption h3 {
    margin: 0;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;

    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
}

.sadc .sdgx__counter {
    flex: 0 0 auto;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

/* ==========================================================
   08. COLUMNA DE MINIATURAS

   Tres filas que ocupan exactamente la altura del visor.
========================================================== */

.sadc .sdgx__thumbs {
    display: grid;

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

    grid-template-rows:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}

/* ==========================================================
   09. CADA MINIATURA
========================================================== */

.sadc .sdgx__thumb {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    padding: 0;

    overflow: hidden;

    border: 3px solid transparent;
    border-radius: 12px;

    background: #0b3456;

    text-align: left;
    cursor: pointer;

    transition:
        border-color .2s ease,
        filter .2s ease;
}

/* Estado activo */

.sadc .sdgx__thumb.is-active {
    border-color: #087edf;
}

/* Imagen absoluta: nunca aumenta la fila */

.sadc .sdgx__thumb > img {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 0;
    max-height: none;
    max-width: none;

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

    transition: transform .3s ease;
}

.sadc .sdgx__thumb:hover > img {
    transform: scale(1.05);
}

/* Overlay */

.sadc .sdgx__thumb::after {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 25%,
        rgba(3, 20, 40, .82)
    );
}

/* Título */

.sadc .sdgx__thumb-label {
    position: absolute;
    z-index: 2;

    right: 13px;
    bottom: 13px;
    left: 13px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

/* ==========================================================
   10. NOTA
========================================================== */

.sadc .sdgx__note {
    margin: 16px 0 0;

    color: #647f96;

    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================================
   11. LAPTOP / TABLET
========================================================== */

@media (max-width: 1000px) {

    .sadc .sdgx__layout {
        grid-template-columns: minmax(0, 1fr);

        height: auto;

        overflow: visible;
    }

    .sadc .sdgx__stage {
        height: clamp(350px, 52vw, 490px);
    }

    .sadc .sdgx__thumbs {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        grid-template-rows: minmax(0, 1fr);

        height: 130px;

        gap: 10px;
    }

}

/* ==========================================================
   12. CELULAR
========================================================== */

@media (max-width: 650px) {

    .sadc .sdgx {
        padding: 52px 0 58px;
    }

    .sadc .sdgx__heading {
        flex-direction: column;
        align-items: flex-start;

        gap: 15px;
        margin-bottom: 23px;
    }

    .sadc .sdgx__layout {
        gap: 10px;
    }

    .sadc .sdgx__stage {
        height: clamp(265px, 75vw, 380px);

        border-radius: 12px;
    }

    .sadc .sdgx__badge {
        top: 12px;
        left: 12px;

        padding: 8px 10px;

        font-size: 14px;
    }

    .sadc .sdgx__controls {
        top: 11px;
        right: 11px;

        gap: 6px;
    }

    .sadc .sdgx__controls button {
        width: 37px;
        height: 37px;

        font-size: 21px;
    }

    .sadc .sdgx__caption {
        right: 14px;
        bottom: 17px;
        left: 14px;

        gap: 10px;
    }

    .sadc .sdgx__caption h3 {
        font-size: 25px;
    }

    .sadc .sdgx__thumbs {
        height: 92px;
        gap: 7px;
    }

    .sadc .sdgx__thumb {
        border-width: 2px;
        border-radius: 8px;
    }

    /*
       Ocultamos solo el texto visual de las miniaturas.
       Cada botón conserva su aria-label accesible.
    */

    .sadc .sdgx__thumb-label {
        display: none;
    }

}

/* ==========================================================
   13. PANTALLAS PEQUEÑAS
========================================================== */

@media (max-width: 380px) {

    .sadc .sdgx__stage {
        height: 250px;
    }

    .sadc .sdgx__thumbs {
        height: 78px;
    }

    .sadc .sdgx__caption {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }

    .sadc .sdgx__caption h3 {
        font-size: 22px;
    }

}

/* ==========================================================
   14. ACCESIBILIDAD
========================================================== */

.sadc .sdgx :is(button, a, .sdgx__stage):focus-visible {
    outline: 3px solid #75e2ff;
    outline-offset: 3px;
}

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

    .sadc .sdgx *,
    .sadc .sdgx *::before,
    .sadc .sdgx *::after {
        transition: none !important;
        animation: none !important;
    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   ATTIC CLEANING — CSS
========================================================== */


/* ==========================================================
   01. GENERAL
========================================================== */

.satc {
    --satc-navy: #061d36;
    --satc-blue: #087edf;
    --satc-cyan: #77e4ff;
    --satc-red: #e51a30;
    --satc-text: #173856;
    --satc-muted: #5c7891;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    color: var(--satc-text);
    background: #ffffff;

    font-family: Inter, Arial, sans-serif;
}

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

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

.satc a {
    text-decoration: none;
}

.satc button {
    font: inherit;
    cursor: pointer;
}

.satc h1,
.satc h2,
.satc h3,
.satc p {
    margin-top: 0;
}

.satc-container {
    width: min(1390px, calc(100% - 54px));
    min-width: 0;
    margin: 0 auto;
}

/* Reservar espacio para la barra flotante lateral */

@media (min-width: 1200px) {
    .satc-container {
        padding-right: 94px;
    }
}


/* ==========================================================
   02. ESTILOS COMPARTIDOS
========================================================== */

.satc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: var(--satc-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.4;
}

.satc-eyebrow::before {
    content: "";

    width: 22px;
    height: 3px;

    flex: 0 0 22px;

    background: var(--satc-red);
}

.satc-eyebrow--light {
    color: #8ce8ff;
}

.satc-heading {
    max-width: 770px;
    margin-bottom: 29px;
}

.satc-heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.satc-heading h2,
.satc-intro h2,
.satc-details h2,
.satc-faq h2,
.satc-cta h2 {
    margin: 0 0 15px;

    color: var(--satc-navy);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(35px, 3.7vw, 51px);
    font-weight: 700;
    line-height: 1.1;
}

.satc-heading h2 span,
.satc-intro h2 span,
.satc-faq h2 span {
    color: var(--satc-blue);
}

.satc-heading p {
    margin: 0;

    color: var(--satc-muted);

    font-size: 15px;
    line-height: 1.75;
}

.satc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 51px;

    padding: 12px 20px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.satc-button:hover {
    transform: translateY(-2px);
}

.satc-button--red {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f12a41,
        #c90b23
    );

    box-shadow: 0 9px 22px rgba(220, 18, 41, .19);
}

.satc-button--blue {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #138ce9,
        #075ca8
    );
}

.satc-button--outline {
    color: #ffffff;

    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .09);
}

.satc-button--outline:hover {
    background: rgba(255, 255, 255, .2);
}


/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.satc-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 410px;
    padding: 52px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.satc-hero::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 29, 55, .92) 50%,
            rgba(4, 31, 57, .58)
        ),
        url("../images/project-attic-01.jpg")
        center / cover no-repeat;
}

.satc-breadcrumb {
    display: inline-flex;

    max-width: 100%;

    margin-bottom: 28px;
    padding: 10px 15px;

    border: 1px solid rgba(125, 225, 255, .3);
    border-radius: 12px;

    background: rgba(3, 28, 53, .77);
}

.satc-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.satc-breadcrumb li,
.satc-breadcrumb a {
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.satc-breadcrumb [aria-current="page"] {
    color: #89e8ff;
}

.satc-breadcrumb a:hover {
    color: #89e8ff;
}

.satc-hero__content {
    max-width: 750px;
    min-width: 0;
}

.satc-hero h1 {
    margin: 0 0 19px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(49px, 6vw, 78px);
    line-height: 1.02;
}

.satc-hero h1 span {
    display: block;
    color: #82e6ff;
}

.satc-hero__content > p {
    max-width: 650px;
    margin: 0;

    color: #d6e9f5;

    font-size: 16px;
    line-height: 1.7;
}

.satc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 26px;
}

.satc-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 26px;
}

.satc-hero__tags span {
    padding: 8px 12px;

    border: 1px solid rgba(133, 224, 255, .24);
    border-radius: 999px;

    color: #d0edf9;
    background: rgba(5, 45, 77, .65);

    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   SECCIÓN 02 — INTRODUCCIÓN
========================================================== */

.satc-intro {
    padding: 76px 0;
    background: #ffffff;
}

.satc-intro__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;
    gap: clamp(30px, 5vw, 75px);
}

.satc-intro__visual {
    position: relative;
    min-width: 0;

    padding: 14px 35px 29px 0;
}

.satc-intro__visual::before {
    content: "";

    position: absolute;

    top: 0;
    right: 12px;
    bottom: 0;
    left: 14px;

    border: 1px solid #d8eaf6;
    border-radius: 24px;

    background: #eff8ff;
}

.satc-intro__photo-main {
    position: relative;

    height: 420px;

    overflow: hidden;

    border-radius: 19px;
    background: #dceaf4;

    box-shadow: 0 17px 34px rgba(5, 56, 101, .13);
}

.satc-intro__photo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.satc-intro__photo-secondary {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 43%;
    height: 180px;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 17px;

    background: #dceaf4;

    box-shadow: 0 12px 28px rgba(6, 54, 96, .15);
}

.satc-intro__photo-secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.satc-intro__photo-label {
    position: absolute;

    top: 30px;
    left: 17px;

    max-width: calc(100% - 75px);

    padding: 11px 15px;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(4, 30, 56, .86);

    font-size: 14px;
    font-weight: 900;
}

.satc-intro__content {
    min-width: 0;
}

.satc-intro__content h2 span {
    display: block;
}

.satc-intro__content > p {
    margin: 0 0 16px;

    color: #56728a;

    font-size: 15px;
    line-height: 1.8;
}

.satc-intro__content .satc-intro__lead {
    color: #244967;
    font-size: 17px;
    font-weight: 600;
}

.satc-intro__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
    margin: 24px 0;
}

.satc-intro__features > div {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dcebf6;
    border-radius: 10px;

    color: #254966;
    background: #f4faff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.satc-intro__features > div > span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--satc-blue);
}


/* ==========================================================
   SECCIÓN 03 — CONCERNS
========================================================== */

.satc-concerns {
    padding: 72px 0 77px;
    background: #eff8ff;
}

.satc-concerns__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.satc-concern {
    min-width: 0;
    padding: 25px;

    border: 1px solid #d9e8f5;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(6, 62, 105, .05);

    transition: transform .2s ease;
}

.satc-concern:hover {
    transform: translateY(-4px);
}

.satc-concern__number {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    margin-bottom: 20px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--satc-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.satc-concern h3 {
    margin: 0 0 11px;

    color: #123655;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.17;
}

.satc-concern p {
    margin: 0;

    color: #5b7890;

    font-size: 14px;
    line-height: 1.7;
}

.satc-concerns__note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 23px;
    padding: 18px 20px;

    border: 1px solid #cce3f5;
    border-radius: 12px;

    background: #ffffff;
}

.satc-concerns__note > span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--satc-blue);

    font-size: 18px;
    font-weight: 900;
}

.satc-concerns__note p {
    margin: 0;

    color: #55738c;

    font-size: 14px;
    line-height: 1.7;
}

.satc-concerns__note strong {
    color: #123d60;
}


/* ==========================================================
   SECCIÓN 04 — DETAILS
========================================================== */

.satc-details {
    padding: 77px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(20, 145, 237, .18),
            transparent 38%
        ),
        linear-gradient(135deg, #092d4e, #031629);
}

.satc-details__layout {
    display: grid;
    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    align-items: center;
    gap: 55px;
}

.satc-details__intro {
    min-width: 0;
}

.satc-details h2 {
    color: #ffffff;
}

.satc-details h2 span {
    display: block;
    color: #8ce8ff;
}

.satc-details__intro > p {
    margin: 0 0 25px;

    color: #c5dbe9;

    font-size: 15px;
    line-height: 1.8;
}

.satc-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.satc-detail {
    min-width: 0;

    padding: 23px;

    border: 1px solid rgba(126, 218, 255, .23);
    border-radius: 14px;

    background: rgba(255, 255, 255, .045);
}

.satc-detail > span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    margin-bottom: 17px;

    border-radius: 10px;

    color: #8ee8ff;
    background: rgba(11, 143, 232, .19);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.satc-detail h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
}

.satc-detail p {
    margin: 0;

    color: #c1d9e8;

    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   SECCIÓN 05 — GALERÍA SIN ESPACIOS VACÍOS
========================================================== */

.satc-gallery {
    padding: 72px 0 78px;
    background: #ffffff;
}

.satc-gallery__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 27px;
}

.satc-gallery__heading .satc-heading {
    min-width: 0;
    margin-bottom: 0;
}

.satc-gallery__all {
    flex: 0 0 auto;

    color: var(--satc-blue);

    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

/* Grid con altura controlada */

.satc-gallery__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(0, .65fr);

    gap: 13px;

    width: 100%;
    height: clamp(410px, 38vw, 530px);

    min-width: 0;
    overflow: hidden;
}

/* Visor */

.satc-gallery__stage {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 16px;
    background: #102e4b;
}

/* Imagen absoluta: nunca modifica la altura */

.satc-gallery__stage > img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 0;
    max-height: none;
    max-width: none;

    object-fit: cover;
}

.satc-gallery__stage::after {
    content: "";

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

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(4, 22, 42, .24),
        transparent 40%,
        rgba(3, 18, 36, .84)
    );
}

/* Badge */

.satc-gallery__badge {
    position: absolute;
    z-index: 3;

    top: 16px;
    left: 16px;

    max-width: calc(100% - 135px);

    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .83);

    font-size: 14px;
    font-weight: 900;
}

/* Flechas */

.satc-gallery__controls {
    position: absolute;
    z-index: 4;

    top: 15px;
    right: 15px;

    display: flex;
    gap: 7px;
}

.satc-gallery__controls button {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .84);

    font-size: 23px;
}

.satc-gallery__controls button:hover {
    background: var(--satc-blue);
}

/* Caption */

.satc-gallery__caption {
    position: absolute;
    z-index: 3;

    right: 22px;
    bottom: 22px;
    left: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;
    min-width: 0;
}

.satc-gallery__caption > div {
    min-width: 0;
}

.satc-gallery__caption > div > span {
    display: block;

    margin-bottom: 7px;

    color: #8ce8ff;

    font-size: 14px;
    font-weight: 900;
}

.satc-gallery__caption h3 {
    margin: 0;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(25px, 3vw, 35px);
}

.satc-gallery__caption > strong {
    flex: 0 0 auto;

    color: #ffffff;
    font-size: 14px;
}

/* Miniaturas: exactamente tres filas */

.satc-gallery__thumbs {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));

    gap: 11px;

    height: 100%;
    min-width: 0;
    min-height: 0;
}

.satc-gallery__thumb {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    padding: 0;

    border: 3px solid transparent;
    border-radius: 12px;

    background: #0b3456;

    text-align: left;
}

.satc-gallery__thumb.is-active {
    border-color: var(--satc-blue);
}

.satc-gallery__thumb > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
}

.satc-gallery__thumb::after {
    content: "";

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

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 25%,
        rgba(3, 20, 40, .83)
    );
}

.satc-gallery__thumb > span {
    position: absolute;
    z-index: 2;

    right: 12px;
    bottom: 12px;
    left: 12px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.satc-gallery__note {
    margin: 15px 0 0;

    color: #647f96;

    font-size: 14px;
    line-height: 1.6;
}


/* ==========================================================
   SECCIÓN 06 — PROCESS
========================================================== */

.satc-process {
    padding: 72px 0 79px;
    background: #eff8ff;
}

.satc-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.satc-step {
    min-width: 0;

    padding: 27px;

    border: 1px solid #dce9f5;
    border-radius: 15px;

    background: #ffffff;
}

.satc-step > span {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    margin-bottom: 21px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--satc-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.satc-step h3 {
    margin: 0 0 11px;

    color: #123654;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 26px;
}

.satc-step p {
    margin: 0;

    color: #5e7a92;

    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 07 — RELATED
========================================================== */

.satc-related {
    padding: 72px 0 79px;
    background: #ffffff;
}

.satc-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.satc-related__card {
    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);

    align-items: center;
    gap: 16px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dce9f5;
    border-radius: 14px;

    color: inherit;
    background: #f5faff;
}

.satc-related__card:hover {
    border-color: #91cff7;
}

.satc-related__card img {
    width: 100px;
    height: 92px;

    object-fit: cover;
    border-radius: 9px;
}

.satc-related__card > div {
    min-width: 0;
}

.satc-related__card h3 {
    margin: 0 0 9px;

    color: #143957;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    line-height: 1.2;
}

.satc-related__card > div > span {
    color: var(--satc-blue);

    font-size: 14px;
    font-weight: 900;
}


/* ==========================================================
   SECCIÓN 08 — FAQ
========================================================== */

.satc-faq {
    padding: 75px 0 81px;
    background: #eff8ff;
}

.satc-faq__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 50px;
}

.satc-faq__intro {
    min-width: 0;
}

.satc-faq__intro h2 span {
    display: block;
}

.satc-faq__intro > p {
    margin: 0 0 23px;

    color: #5c7890;

    font-size: 15px;
    line-height: 1.75;
}

.satc-faq__items {
    display: grid;
    gap: 11px;

    min-width: 0;
}

.satc-faq__items details {
    min-width: 0;

    overflow: hidden;

    border: 1px solid #d9e8f4;
    border-radius: 12px;

    background: #ffffff;
}

.satc-faq__items details[open] {
    border-color: #98d0fa;
}

.satc-faq__items summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 19px;

    color: #183b59;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;

    cursor: pointer;
    list-style: none;
}

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

.satc-faq__items summary span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 8px;

    color: var(--satc-blue);
    background: #e8f5ff;

    font-size: 22px;

    transition: transform .2s ease;
}

.satc-faq__items details[open] summary span {
    transform: rotate(45deg);
}

.satc-faq__items details p {
    margin: 0;
    padding: 0 19px 19px;

    color: #5b7890;

    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================================
   SECCIÓN 09 — CTA
========================================================== */

.satc-cta {
    position: relative;
    isolation: isolate;

    padding: 48px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.satc-cta::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .89),
            rgba(4, 23, 42, .85)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.satc-cta__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}

.satc-cta__content {
    max-width: 730px;
    min-width: 0;
}

.satc-cta h2 {
    color: #ffffff;
}

.satc-cta h2 span {
    color: #85e5ff;
}

.satc-cta p {
    margin: 0;

    color: #d5e8f3;

    font-size: 16px;
    line-height: 1.7;
}

.satc-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 12px;
    min-width: 255px;
}

.satc-cta__phone,
.satc-cta__secondary-phone {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.satc-cta__secondary-phone {
    color: #9fdcf2;
    font-size: 15px;
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .satc-concerns__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .satc-details__layout,
    .satc-intro__layout,
    .satc-faq__layout {
        gap: 30px;
    }

    .satc-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .satc-intro__layout,
    .satc-details__layout,
    .satc-faq__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .satc-intro__visual {
        max-width: 690px;
    }

    /* Galería en una columna */

    .satc-gallery__layout {
        grid-template-columns: minmax(0, 1fr);

        height: auto;
        overflow: visible;
    }

    .satc-gallery__stage {
        height: clamp(340px, 52vw, 490px);
    }

    .satc-gallery__thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);

        height: 128px;
        gap: 9px;
    }

    .satc-process__grid {
        gap: 12px;
    }

    .satc-step {
        padding: 21px;
    }

    .satc-step h3 {
        font-size: 23px;
    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 650px) {

    .satc-container {
        width: calc(100% - 28px);
    }

    /* HERO */

    .satc-hero {
        min-height: 0;
        padding: 41px 0;
    }

    .satc-hero h1 {
        font-size: clamp(46px, 11vw, 60px);
    }

    .satc-hero__content > p {
        font-size: 15px;
    }

    .satc-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* INTRO */

    .satc-intro {
        padding: 49px 0 55px;
    }

    .satc-intro__visual {
        padding: 10px 26px 25px 0;
    }

    .satc-intro__photo-main {
        height: 290px;
    }

    .satc-intro__photo-secondary {
        height: 123px;
        border-width: 4px;
    }

    .satc-intro__features {
        grid-template-columns: minmax(0, 1fr);
    }

    .satc-intro__content .satc-button {
        width: 100%;
    }

    /* CONCERNS */

    .satc-concerns {
        padding: 53px 0 59px;
    }

    .satc-concerns__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* DETAILS */

    .satc-details {
        padding: 55px 0;
    }

    .satc-details__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* GALLERY */

    .satc-gallery {
        padding: 53px 0 59px;
    }

    .satc-gallery__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .satc-gallery__stage {
        height: clamp(265px, 75vw, 380px);
        border-radius: 12px;
    }

    .satc-gallery__badge {
        top: 11px;
        left: 11px;
        padding: 9px 10px;
    }

    .satc-gallery__controls {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .satc-gallery__controls button {
        width: 36px;
        height: 36px;
    }

    .satc-gallery__caption {
        right: 13px;
        bottom: 15px;
        left: 13px;
    }

    .satc-gallery__caption h3 {
        font-size: 24px;
    }

    .satc-gallery__thumbs {
        height: 90px;
        gap: 7px;
    }

    .satc-gallery__thumb {
        border-width: 2px;
        border-radius: 8px;
    }

    .satc-gallery__thumb > span {
        display: none;
    }

    /* PROCESS */

    .satc-process {
        padding: 53px 0 59px;
    }

    .satc-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .satc-step {
        padding: 24px;
    }

    .satc-step h3 {
        font-size: 26px;
    }

    /* RELATED */

    .satc-related {
        padding: 53px 0 60px;
    }

    /* FAQ */

    .satc-faq {
        padding: 54px 0 60px;
    }

    /* CTA */

    .satc-cta {
        padding: 44px 0;
    }

    .satc-cta__layout {
        flex-direction: column;
        align-items: stretch;

        gap: 25px;
    }

    .satc-cta__actions {
        min-width: 0;
    }

    .satc-cta p {
        font-size: 15px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .satc-container {
        width: calc(100% - 22px);
    }

    .satc-intro__photo-main {
        height: 250px;
    }

    .satc-intro__photo-secondary {
        height: 105px;
    }

    .satc-gallery__stage {
        height: 250px;
    }

    .satc-gallery__thumbs {
        height: 77px;
    }

    .satc-related__card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 11px;
    }

    .satc-related__card img {
        width: 82px;
        height: 80px;
    }

}


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

.satc :is(a, button, summary, .satc-gallery__stage):focus-visible {
    outline: 3px solid #70e2ff;
    outline-offset: 4px;
}

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

    .satc *,
    .satc *::before,
    .satc *::after {
        animation: none !important;
        transition: none !important;
    }

}

/* ==========================================================
   SANTOS AC & INSULATION
   INSULATION INSTALLATION — CSS
========================================================== */


/* ==========================================================
   01. GENERAL
========================================================== */

.sins {
    --sins-navy: #061d36;
    --sins-blue: #087edf;
    --sins-cyan: #77e4ff;
    --sins-red: #e51a30;
    --sins-text: #173856;
    --sins-muted: #5c7891;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    color: var(--sins-text);
    background: #ffffff;

    font-family: Inter, Arial, sans-serif;
}

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

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

.sins a {
    text-decoration: none;
}

.sins button {
    font: inherit;
    cursor: pointer;
}

.sins h1,
.sins h2,
.sins h3,
.sins p {
    margin-top: 0;
}

.sins-container {
    width: min(1390px, calc(100% - 54px));
    min-width: 0;
    margin: 0 auto;
}

/* Espacio reservado para barra flotante del sitio. */

@media (min-width: 1200px) {
    .sins-container {
        padding-right: 94px;
    }
}


/* ==========================================================
   02. SHARED ELEMENTS
========================================================== */

.sins-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: var(--sins-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.4;
}

.sins-eyebrow::before {
    content: "";

    width: 22px;
    height: 3px;
    flex: 0 0 22px;

    background: var(--sins-red);
}

.sins-eyebrow--light {
    color: #8ce8ff;
}

.sins-heading {
    max-width: 780px;
    margin-bottom: 29px;
}

.sins-heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.sins-heading h2,
.sins-intro h2,
.sins-details h2,
.sins-faq h2,
.sins-cta h2 {
    margin: 0 0 15px;

    color: var(--sins-navy);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(35px, 3.7vw, 51px);
    font-weight: 700;
    line-height: 1.1;
}

.sins-heading h2 span,
.sins-intro h2 span,
.sins-faq h2 span {
    color: var(--sins-blue);
}

.sins-heading p {
    margin: 0;

    color: var(--sins-muted);

    font-size: 15px;
    line-height: 1.75;
}


/* BUTTONS */

.sins-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 51px;
    padding: 12px 20px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    transition:
        transform .2s ease,
        background .2s ease;
}

.sins-button:hover {
    transform: translateY(-2px);
}

.sins-button--red {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f12a41,
        #c90b23
    );

    box-shadow: 0 9px 22px rgba(220, 18, 41, .19);
}

.sins-button--blue {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #138ce9,
        #075ca8
    );
}

.sins-button--outline {
    color: #ffffff;

    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .09);
}

.sins-button--outline:hover {
    background: rgba(255, 255, 255, .2);
}


/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.sins-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 420px;
    padding: 52px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.sins-hero::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 29, 55, .92) 50%,
            rgba(4, 31, 57, .6)
        ),
        url("../images/fondo-megamenu-proteccion.jpg")
        center / cover no-repeat;
}

.sins-hero__line {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf 50%,
        #77e4ff,
        transparent
    );
}

/* BREADCRUMB */

.sins-breadcrumb {
    display: inline-flex;
    max-width: 100%;

    margin-bottom: 28px;
    padding: 10px 15px;

    border: 1px solid rgba(125, 225, 255, .3);
    border-radius: 12px;

    background: rgba(3, 28, 53, .77);
}

.sins-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.sins-breadcrumb li,
.sins-breadcrumb a {
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.sins-breadcrumb [aria-current="page"] {
    color: #89e8ff;
}

.sins-breadcrumb a:hover {
    color: #89e8ff;
}

/* CONTENT */

.sins-hero__content {
    max-width: 780px;
    min-width: 0;
}

.sins-hero h1 {
    margin: 0 0 19px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(49px, 6vw, 78px);
    line-height: 1.02;
}

.sins-hero h1 span {
    display: block;
    color: #82e6ff;
}

.sins-hero__content > p {
    max-width: 670px;
    margin: 0;

    color: #d6e9f5;

    font-size: 16px;
    line-height: 1.7;
}

.sins-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 26px;
}

.sins-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 26px;
}

.sins-hero__tags span {
    padding: 8px 12px;

    border: 1px solid rgba(133, 224, 255, .24);
    border-radius: 999px;

    color: #d0edf9;
    background: rgba(5, 45, 77, .65);

    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   SECCIÓN 02 — INTRODUCTION
========================================================== */

.sins-intro {
    padding: 76px 0;
    background: #ffffff;
}

.sins-intro__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;

    gap: clamp(30px, 5vw, 75px);
}

.sins-intro__visual {
    position: relative;
    min-width: 0;

    padding: 14px 35px 29px 0;
}

.sins-intro__visual::before {
    content: "";

    position: absolute;

    top: 0;
    right: 12px;
    bottom: 0;
    left: 14px;

    border: 1px solid #d8eaf6;
    border-radius: 24px;

    background: #eff8ff;
}

.sins-intro__main-photo {
    position: relative;

    height: 420px;

    overflow: hidden;
    border-radius: 19px;

    background: #dceaf4;

    box-shadow: 0 17px 34px rgba(5, 56, 101, .13);
}

.sins-intro__main-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sins-intro__secondary-photo {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 43%;
    height: 180px;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 17px;

    background: #dceaf4;

    box-shadow: 0 12px 28px rgba(6, 54, 96, .15);
}

.sins-intro__secondary-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sins-intro__photo-label {
    position: absolute;

    top: 30px;
    left: 17px;

    max-width: calc(100% - 75px);

    padding: 11px 15px;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(4, 30, 56, .86);

    font-size: 14px;
    font-weight: 900;
}

/* TEXT */

.sins-intro__content {
    min-width: 0;
}

.sins-intro__content h2 span {
    display: block;
}

.sins-intro__content > p {
    margin: 0 0 16px;

    color: #56728a;

    font-size: 15px;
    line-height: 1.8;
}

.sins-intro__content .sins-intro__lead {
    color: #244967;

    font-size: 17px;
    font-weight: 600;
}

.sins-intro__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
    margin: 24px 0;
}

.sins-intro__features > div {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dcebf6;
    border-radius: 10px;

    color: #254966;
    background: #f4faff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.sins-intro__features > div > span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--sins-blue);
}


/* ==========================================================
   SECCIÓN 03 — BENEFITS
========================================================== */

.sins-benefits {
    padding: 72px 0 77px;
    background: #eff8ff;
}

.sins-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 15px;
}

.sins-benefit {
    min-width: 0;

    padding: 25px;

    border: 1px solid #d9e8f5;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(6, 62, 105, .05);

    transition: transform .2s ease;
}

.sins-benefit:hover {
    transform: translateY(-4px);
}

.sins-benefit__number {
    display: block;

    margin-bottom: 15px;

    color: #7997af;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.sins-benefit__icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    margin-bottom: 18px;

    border-radius: 12px;

    color: #ffffff;
    background: var(--sins-blue);

    font-size: 25px;
}

.sins-benefit h3 {
    margin: 0 0 11px;

    color: #123655;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.17;
}

.sins-benefit p {
    margin: 0;

    color: #5b7890;

    font-size: 14px;
    line-height: 1.7;
}

/* NOTE */

.sins-benefits__note {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-top: 23px;
    padding: 18px 20px;

    border: 1px solid #cce3f5;
    border-radius: 12px;

    background: #ffffff;
}

.sins-benefits__note-icon {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--sins-blue);

    font-size: 18px;
    font-weight: 900;
}

.sins-benefits__note p {
    margin: 0;

    color: #55738c;

    font-size: 14px;
    line-height: 1.7;
}

.sins-benefits__note strong {
    color: #123d60;
}


/* ==========================================================
   SECCIÓN 04 — DETAILS
========================================================== */

.sins-details {
    padding: 77px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(20, 145, 237, .18),
            transparent 38%
        ),
        linear-gradient(135deg, #092d4e, #031629);
}

.sins-details__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    align-items: center;

    gap: 55px;
}

.sins-details__intro {
    min-width: 0;
}

.sins-details h2 {
    color: #ffffff;
}

.sins-details h2 span {
    display: block;
    color: #8ce8ff;
}

.sins-details__intro > p {
    margin: 0 0 25px;

    color: #c5dbe9;

    font-size: 15px;
    line-height: 1.8;
}

.sins-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 13px;
}

.sins-detail {
    min-width: 0;

    padding: 23px;

    border: 1px solid rgba(126, 218, 255, .23);
    border-radius: 14px;

    background: rgba(255, 255, 255, .045);
}

.sins-detail > span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    margin-bottom: 17px;

    border-radius: 10px;

    color: #8ee8ff;
    background: rgba(11, 143, 232, .19);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.sins-detail h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
}

.sins-detail p {
    margin: 0;

    color: #c1d9e8;

    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   SECCIÓN 05 — CONTROLLED GALLERY
========================================================== */

.sins-gallery {
    padding: 72px 0 78px;
    background: #ffffff;
}

.sins-gallery__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 27px;
}

.sins-gallery__heading .sins-heading {
    min-width: 0;
    margin-bottom: 0;
}

.sins-gallery__all {
    flex: 0 0 auto;

    color: var(--sins-blue);

    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.sins-gallery__all:hover {
    color: var(--sins-red);
}

/* Layout: fixed height prevents empty space. */

.sins-gallery__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(0, .65fr);

    gap: 13px;

    width: 100%;
    height: clamp(410px, 38vw, 530px);

    min-width: 0;
    overflow: hidden;
}

/* STAGE */

.sins-gallery__stage {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 16px;
    background: #102e4b;
}

.sins-gallery__stage > img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
    object-position: center;
}

.sins-gallery__stage::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(4, 22, 42, .24),
        transparent 40%,
        rgba(3, 18, 36, .84)
    );
}

/* BADGE */

.sins-gallery__badge {
    position: absolute;

    z-index: 3;

    top: 16px;
    left: 16px;

    max-width: calc(100% - 140px);

    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

/* CONTROLS */

.sins-gallery__controls {
    position: absolute;

    z-index: 4;

    top: 15px;
    right: 15px;

    display: flex;
    gap: 7px;
}

.sins-gallery__controls button {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);

    font-size: 23px;
}

.sins-gallery__controls button:hover {
    background: var(--sins-blue);
}

/* CAPTION */

.sins-gallery__caption {
    position: absolute;

    z-index: 3;

    right: 22px;
    bottom: 22px;
    left: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;
    min-width: 0;
}

.sins-gallery__caption > div {
    min-width: 0;
}

.sins-gallery__caption > div > span {
    display: block;

    margin-bottom: 7px;

    color: #8ce8ff;

    font-size: 14px;
    font-weight: 900;
}

.sins-gallery__caption h3 {
    margin: 0;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(25px, 3vw, 35px);
}

.sins-gallery__caption > strong {
    flex: 0 0 auto;

    color: #ffffff;

    font-size: 14px;
}

/* THUMBNAILS */

.sins-gallery__thumbs {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));

    gap: 11px;

    height: 100%;
    min-width: 0;
    min-height: 0;
}

.sins-gallery__thumb {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    padding: 0;

    border: 3px solid transparent;
    border-radius: 12px;

    background: #0b3456;

    text-align: left;
}

.sins-gallery__thumb.is-active {
    border-color: var(--sins-blue);
}

.sins-gallery__thumb > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
}

.sins-gallery__thumb::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 25%,
        rgba(3, 20, 40, .83)
    );
}

.sins-gallery__thumb > span {
    position: absolute;

    z-index: 2;

    right: 12px;
    bottom: 12px;
    left: 12px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

/* CREDITS */

.sins-gallery__credits {
    margin: 18px 0 0;

    color: #647f96;

    font-size: 14px;
    line-height: 1.8;
}

.sins-gallery__credits a {
    color: var(--sins-blue);

    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ==========================================================
   SECCIÓN 06 — PROCESS
========================================================== */

.sins-process {
    padding: 72px 0 79px;
    background: #eff8ff;
}

.sins-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 17px;
}

.sins-step {
    min-width: 0;

    padding: 27px;

    border: 1px solid #dce9f5;
    border-radius: 15px;

    background: #ffffff;
}

.sins-step > span {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    margin-bottom: 21px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--sins-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.sins-step h3 {
    margin: 0 0 11px;

    color: #123654;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 26px;
}

.sins-step p {
    margin: 0;

    color: #5e7a92;

    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 07 — RELATED SERVICES
========================================================== */

.sins-related {
    padding: 72px 0 79px;
    background: #ffffff;
}

.sins-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.sins-related__card {
    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);

    align-items: center;
    gap: 16px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dce9f5;
    border-radius: 14px;

    color: inherit;
    background: #f5faff;
}

.sins-related__card:hover {
    border-color: #91cff7;
}

.sins-related__card img {
    width: 100px;
    height: 92px;

    object-fit: cover;
    border-radius: 9px;
}

.sins-related__card > div {
    min-width: 0;
}

.sins-related__card h3 {
    margin: 0 0 9px;

    color: #143957;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    line-height: 1.2;
}

.sins-related__card > div > span {
    color: var(--sins-blue);

    font-size: 14px;
    font-weight: 900;
}

/* PREVIOUS / NEXT */

.sins-service-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
    margin-top: 29px;
}

.sins-service-nav a {
    display: flex;
    flex-direction: column;

    gap: 7px;

    min-width: 0;
    padding: 19px 21px;

    border: 1px solid #d7e9f7;
    border-radius: 12px;

    background: #eff8ff;

    transition:
        background .2s ease,
        border-color .2s ease;
}

.sins-service-nav a:last-child {
    align-items: flex-end;
    text-align: right;
}

.sins-service-nav a:hover {
    border-color: #8ccbf5;
    background: #e4f3ff;
}

.sins-service-nav span {
    color: #087edf;

    font-size: 14px;
    font-weight: 900;
}

.sins-service-nav strong {
    color: #153b5b;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    line-height: 1.2;
}


/* ==========================================================
   SECCIÓN 08 — FAQ
========================================================== */

.sins-faq {
    padding: 75px 0 81px;
    background: #eff8ff;
}

.sins-faq__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 50px;
}

.sins-faq__intro {
    min-width: 0;
}

.sins-faq__intro h2 span {
    display: block;
}

.sins-faq__intro > p {
    margin: 0 0 23px;

    color: #5c7890;

    font-size: 15px;
    line-height: 1.75;
}

.sins-faq__items {
    display: grid;
    gap: 11px;

    min-width: 0;
}

.sins-faq__items details {
    min-width: 0;
    overflow: hidden;

    border: 1px solid #d9e8f4;
    border-radius: 12px;

    background: #ffffff;
}

.sins-faq__items details[open] {
    border-color: #98d0fa;
}

.sins-faq__items summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 19px;

    color: #183b59;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;

    cursor: pointer;
    list-style: none;
}

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

.sins-faq__items summary span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 8px;

    color: var(--sins-blue);
    background: #e8f5ff;

    font-size: 22px;

    transition: transform .2s ease;
}

.sins-faq__items details[open] summary span {
    transform: rotate(45deg);
}

.sins-faq__items details p {
    margin: 0;
    padding: 0 19px 19px;

    color: #5b7890;

    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================================
   SECCIÓN 09 — FINAL CTA
========================================================== */

.sins-cta {
    position: relative;
    isolation: isolate;

    padding: 48px 0;
    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.sins-cta::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .89),
            rgba(4, 23, 42, .85)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.sins-cta__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}

.sins-cta__content {
    max-width: 730px;
    min-width: 0;
}

.sins-cta h2 {
    color: #ffffff;
}

.sins-cta h2 span {
    color: #85e5ff;
}

.sins-cta p {
    margin: 0;

    color: #d5e8f3;

    font-size: 16px;
    line-height: 1.7;
}

.sins-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 12px;
    min-width: 255px;
}

.sins-cta__phone,
.sins-cta__secondary-phone {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.sins-cta__secondary-phone {
    color: #9fdcf2;
    font-size: 15px;
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .sins-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sins-details__layout,
    .sins-intro__layout,
    .sins-faq__layout {
        gap: 30px;
    }

    .sins-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .sins-intro__layout,
    .sins-details__layout,
    .sins-faq__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sins-intro__visual {
        max-width: 690px;
    }

    /* Gallery: main photo above thumbnails. */

    .sins-gallery__layout {
        grid-template-columns: minmax(0, 1fr);

        height: auto;
        overflow: visible;
    }

    .sins-gallery__stage {
        height: clamp(340px, 52vw, 490px);
    }

    .sins-gallery__thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);

        height: 128px;
        gap: 9px;
    }

    .sins-process__grid {
        gap: 12px;
    }

    .sins-step {
        padding: 21px;
    }

    .sins-step h3 {
        font-size: 23px;
    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 650px) {

    .sins-container {
        width: calc(100% - 28px);
    }

    /* HERO */

    .sins-hero {
        min-height: 0;
        padding: 41px 0;
    }

    .sins-hero h1 {
        font-size: clamp(46px, 11vw, 60px);
    }

    .sins-hero__content > p {
        font-size: 15px;
    }

    .sins-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* INTRO */

    .sins-intro {
        padding: 49px 0 55px;
    }

    .sins-intro__visual {
        padding: 10px 26px 25px 0;
    }

    .sins-intro__main-photo {
        height: 290px;
    }

    .sins-intro__secondary-photo {
        height: 123px;
        border-width: 4px;
    }

    .sins-intro__features {
        grid-template-columns: minmax(0, 1fr);
    }

    .sins-intro__content .sins-button {
        width: 100%;
    }

    /* BENEFITS */

    .sins-benefits {
        padding: 53px 0 59px;
    }

    .sins-benefits__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* DETAILS */

    .sins-details {
        padding: 55px 0;
    }

    .sins-details__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* GALLERY */

    .sins-gallery {
        padding: 53px 0 59px;
    }

    .sins-gallery__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .sins-gallery__stage {
        height: clamp(265px, 75vw, 380px);
        border-radius: 12px;
    }

    .sins-gallery__badge {
        top: 11px;
        left: 11px;

        max-width: calc(100% - 111px);

        padding: 8px 9px;
        font-size: 14px;
    }

    .sins-gallery__controls {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .sins-gallery__controls button {
        width: 36px;
        height: 36px;
    }

    .sins-gallery__caption {
        right: 13px;
        bottom: 15px;
        left: 13px;
    }

    .sins-gallery__caption h3 {
        font-size: 24px;
    }

    .sins-gallery__thumbs {
        height: 90px;
        gap: 7px;
    }

    .sins-gallery__thumb {
        border-width: 2px;
        border-radius: 8px;
    }

    .sins-gallery__thumb > span {
        display: none;
    }

    /* PROCESS */

    .sins-process {
        padding: 53px 0 59px;
    }

    .sins-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sins-step {
        padding: 24px;
    }

    .sins-step h3 {
        font-size: 26px;
    }

    /* RELATED */

    .sins-related {
        padding: 53px 0 60px;
    }

    .sins-service-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    /* FAQ */

    .sins-faq {
        padding: 54px 0 60px;
    }

    /* CTA */

    .sins-cta {
        padding: 44px 0;
    }

    .sins-cta__layout {
        flex-direction: column;
        align-items: stretch;

        gap: 25px;
    }

    .sins-cta__actions {
        min-width: 0;
    }

    .sins-cta p {
        font-size: 15px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .sins-container {
        width: calc(100% - 22px);
    }

    .sins-intro__main-photo {
        height: 250px;
    }

    .sins-intro__secondary-photo {
        height: 105px;
    }

    .sins-gallery__stage {
        height: 250px;
    }

    .sins-gallery__thumbs {
        height: 77px;
    }

    .sins-gallery__caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .sins-related__card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 11px;
    }

    .sins-related__card img {
        width: 82px;
        height: 80px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.sins :is(
    a,
    button,
    summary,
    .sins-gallery__stage
):focus-visible {
    outline: 3px solid #70e2ff;
    outline-offset: 4px;
}

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

    .sins *,
    .sins *::before,
    .sins *::after {
        animation: none !important;
        transition: none !important;
    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   RADIANT BARRIER — CSS
========================================================== */


/* ==========================================================
   01. GENERAL
========================================================== */

.srb {
    --srb-navy: #061d36;
    --srb-blue: #087edf;
    --srb-cyan: #77e4ff;
    --srb-red: #e51a30;
    --srb-text: #173856;
    --srb-muted: #5c7891;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: clip;

    color: var(--srb-text);
    background: #ffffff;

    font-family: Inter, Arial, sans-serif;
}

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

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

.srb a {
    text-decoration: none;
}

.srb button {
    font: inherit;
    cursor: pointer;
}

.srb h1,
.srb h2,
.srb h3,
.srb p {
    margin-top: 0;
}

.srb-container {
    width: min(1390px, calc(100% - 54px));
    min-width: 0;
    margin: 0 auto;
}

/* Espacio para la barra flotante lateral. */

@media (min-width: 1200px) {
    .srb-container {
        padding-right: 94px;
    }
}


/* ==========================================================
   02. ELEMENTOS COMPARTIDOS
========================================================== */

.srb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: var(--srb-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.4;
}

.srb-eyebrow::before {
    content: "";

    width: 22px;
    height: 3px;
    flex: 0 0 22px;

    background: var(--srb-red);
}

.srb-eyebrow--light {
    color: #8ce8ff;
}

.srb-heading {
    max-width: 780px;
    margin-bottom: 29px;
}

.srb-heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.srb-heading h2,
.srb-intro h2,
.srb-details h2,
.srb-faq h2,
.srb-cta h2 {
    margin: 0 0 15px;

    color: var(--srb-navy);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(35px, 3.7vw, 51px);
    font-weight: 700;
    line-height: 1.1;
}

.srb-heading h2 span,
.srb-intro h2 span,
.srb-faq h2 span {
    color: var(--srb-blue);
}

.srb-heading p {
    margin: 0;

    color: var(--srb-muted);

    font-size: 15px;
    line-height: 1.75;
}

/* BUTTONS */

.srb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 51px;
    padding: 12px 20px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    transition:
        transform .2s ease,
        background .2s ease;
}

.srb-button:hover {
    transform: translateY(-2px);
}

.srb-button--red {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f12a41,
        #c90b23
    );

    box-shadow: 0 9px 22px rgba(220, 18, 41, .19);
}

.srb-button--blue {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #138ce9,
        #075ca8
    );
}

.srb-button--outline {
    color: #ffffff;

    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .09);
}

.srb-button--outline:hover {
    background: rgba(255, 255, 255, .2);
}


/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.srb-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 420px;
    padding: 52px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.srb-hero::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 29, 55, .92) 50%,
            rgba(4, 31, 57, .6)
        ),
        url("../images/servicio-radiant-barrier.jpg")
        center / cover no-repeat;
}

.srb-hero__line {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf 50%,
        #77e4ff,
        transparent
    );
}

/* BREADCRUMB */

.srb-breadcrumb {
    display: inline-flex;
    max-width: 100%;

    margin-bottom: 28px;
    padding: 10px 15px;

    border: 1px solid rgba(125, 225, 255, .3);
    border-radius: 12px;

    background: rgba(3, 28, 53, .77);
}

.srb-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.srb-breadcrumb li,
.srb-breadcrumb a {
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.srb-breadcrumb [aria-current="page"] {
    color: #89e8ff;
}

.srb-breadcrumb a:hover {
    color: #89e8ff;
}

/* HERO CONTENT */

.srb-hero__content {
    max-width: 780px;
    min-width: 0;
}

.srb-hero h1 {
    margin: 0 0 19px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(49px, 6vw, 78px);
    line-height: 1.02;
}

.srb-hero h1 span {
    display: block;
    color: #82e6ff;
}

.srb-hero__content > p {
    max-width: 670px;
    margin: 0;

    color: #d6e9f5;

    font-size: 16px;
    line-height: 1.7;
}

.srb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 26px;
}

.srb-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 26px;
}

.srb-hero__tags span {
    padding: 8px 12px;

    border: 1px solid rgba(133, 224, 255, .24);
    border-radius: 999px;

    color: #d0edf9;
    background: rgba(5, 45, 77, .65);

    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   SECCIÓN 02 — INTRO
========================================================== */

.srb-intro {
    padding: 76px 0;
    background: #ffffff;
}

.srb-intro__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;
    gap: clamp(30px, 5vw, 75px);
}

.srb-intro__visual {
    position: relative;
    min-width: 0;
    padding: 14px 35px 29px 0;
}

.srb-intro__visual::before {
    content: "";

    position: absolute;

    top: 0;
    right: 12px;
    bottom: 0;
    left: 14px;

    border: 1px solid #d8eaf6;
    border-radius: 24px;
    background: #eff8ff;
}

.srb-intro__main-photo {
    position: relative;

    height: 420px;
    overflow: hidden;

    border-radius: 19px;
    background: #dceaf4;

    box-shadow: 0 17px 34px rgba(5, 56, 101, .13);
}

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

.srb-intro__secondary-photo {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 43%;
    height: 180px;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 17px;

    background: #dceaf4;

    box-shadow: 0 12px 28px rgba(6, 54, 96, .15);
}

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

.srb-intro__photo-label {
    position: absolute;

    top: 30px;
    left: 17px;

    max-width: calc(100% - 75px);
    padding: 11px 15px;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(4, 30, 56, .86);

    font-size: 14px;
    font-weight: 900;
}

/* TEXT */

.srb-intro__content {
    min-width: 0;
}

.srb-intro__content h2 span {
    display: block;
}

.srb-intro__content > p {
    margin: 0 0 16px;

    color: #56728a;

    font-size: 15px;
    line-height: 1.8;
}

.srb-intro__content .srb-intro__lead {
    color: #244967;

    font-size: 17px;
    font-weight: 600;
}

.srb-intro__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
    margin: 24px 0;
}

.srb-intro__features > div {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dcebf6;
    border-radius: 10px;

    color: #254966;
    background: #f4faff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.srb-intro__features > div > span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--srb-blue);
}


/* ==========================================================
   SECCIÓN 03 — BENEFITS
========================================================== */

.srb-benefits {
    padding: 72px 0 77px;
    background: #eff8ff;
}

.srb-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.srb-benefit {
    min-width: 0;
    padding: 25px;

    border: 1px solid #d9e8f5;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(6, 62, 105, .05);
    transition: transform .2s ease;
}

.srb-benefit:hover {
    transform: translateY(-4px);
}

.srb-benefit__number {
    display: block;
    margin-bottom: 15px;

    color: #7997af;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.srb-benefit__icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    margin-bottom: 18px;

    border-radius: 12px;

    color: #ffffff;
    background: var(--srb-blue);

    font-size: 25px;
}

.srb-benefit h3 {
    margin: 0 0 11px;

    color: #123655;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.17;
}

.srb-benefit p {
    margin: 0;

    color: #5b7890;
    font-size: 14px;
    line-height: 1.7;
}

/* NOTE */

.srb-benefits__note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 23px;
    padding: 18px 20px;

    border: 1px solid #cce3f5;
    border-radius: 12px;

    background: #ffffff;
}

.srb-benefits__note > span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--srb-blue);

    font-size: 18px;
    font-weight: 900;
}

.srb-benefits__note p {
    margin: 0;

    color: #55738c;
    font-size: 14px;
    line-height: 1.7;
}

.srb-benefits__note strong {
    color: #123d60;
}


/* ==========================================================
   SECCIÓN 04 — DETAILS
========================================================== */

.srb-details {
    padding: 77px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(20, 145, 237, .18),
            transparent 38%
        ),
        linear-gradient(135deg, #092d4e, #031629);
}

.srb-details__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    align-items: center;
    gap: 55px;
}

.srb-details__intro {
    min-width: 0;
}

.srb-details h2 {
    color: #ffffff;
}

.srb-details h2 span {
    display: block;
    color: #8ce8ff;
}

.srb-details__intro > p {
    margin: 0 0 25px;

    color: #c5dbe9;
    font-size: 15px;
    line-height: 1.8;
}

.srb-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.srb-detail {
    min-width: 0;
    padding: 23px;

    border: 1px solid rgba(126, 218, 255, .23);
    border-radius: 14px;

    background: rgba(255, 255, 255, .045);
}

.srb-detail > span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    margin-bottom: 17px;

    border-radius: 10px;

    color: #8ee8ff;
    background: rgba(11, 143, 232, .19);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.srb-detail h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
}

.srb-detail p {
    margin: 0;

    color: #c1d9e8;
    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   SECCIÓN 05 — GALLERY
   ALTURA CONTROLADA
========================================================== */

.srb-gallery {
    padding: 72px 0 78px;
    background: #ffffff;
}

.srb-gallery__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 27px;
}

.srb-gallery__heading .srb-heading {
    min-width: 0;
    margin-bottom: 0;
}

.srb-gallery__all {
    flex: 0 0 auto;

    color: var(--srb-blue);

    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.srb-gallery__all:hover {
    color: var(--srb-red);
}

/* Main layout */

.srb-gallery__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(0, .65fr);

    gap: 13px;

    width: 100%;
    height: clamp(410px, 38vw, 530px);

    min-width: 0;
    overflow: hidden;
}

/* Main stage */

.srb-gallery__stage {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 16px;
    background: #102e4b;
}

/* Absolute image prevents unwanted height growth. */

.srb-gallery__stage > img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
    object-position: center;
}

.srb-gallery__stage::after {
    content: "";

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

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(4, 22, 42, .24),
        transparent 40%,
        rgba(3, 18, 36, .84)
    );
}

/* Badge */

.srb-gallery__badge {
    position: absolute;
    z-index: 3;

    top: 16px;
    left: 16px;

    max-width: calc(100% - 140px);

    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

/* Controls */

.srb-gallery__controls {
    position: absolute;
    z-index: 4;

    top: 15px;
    right: 15px;

    display: flex;
    gap: 7px;
}

.srb-gallery__controls button {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);

    font-size: 23px;
}

.srb-gallery__controls button:hover {
    background: var(--srb-blue);
}

/* Caption */

.srb-gallery__caption {
    position: absolute;
    z-index: 3;

    right: 22px;
    bottom: 22px;
    left: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;
    min-width: 0;
}

.srb-gallery__caption > div {
    min-width: 0;
}

.srb-gallery__caption > div > span {
    display: block;
    margin-bottom: 7px;

    color: #8ce8ff;

    font-size: 14px;
    font-weight: 900;
}

.srb-gallery__caption h3 {
    margin: 0;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(25px, 3vw, 35px);
}

.srb-gallery__caption > strong {
    flex: 0 0 auto;

    color: #ffffff;
    font-size: 14px;
}

/* Thumbnails */

.srb-gallery__thumbs {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));

    gap: 11px;

    height: 100%;
    min-width: 0;
    min-height: 0;
}

.srb-gallery__thumb {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    padding: 0;

    border: 3px solid transparent;
    border-radius: 12px;

    background: #0b3456;

    text-align: left;
}

.srb-gallery__thumb.is-active {
    border-color: var(--srb-blue);
}

.srb-gallery__thumb > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
}

.srb-gallery__thumb::after {
    content: "";

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

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 25%,
        rgba(3, 20, 40, .83)
    );
}

.srb-gallery__thumb > span {
    position: absolute;
    z-index: 2;

    right: 12px;
    bottom: 12px;
    left: 12px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.srb-gallery__note {
    margin: 17px 0 0;

    color: #647f96;

    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 06 — PROCESS
========================================================== */

.srb-process {
    padding: 72px 0 79px;
    background: #eff8ff;
}

.srb-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.srb-step {
    min-width: 0;
    padding: 27px;

    border: 1px solid #dce9f5;
    border-radius: 15px;

    background: #ffffff;
}

.srb-step > span {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    margin-bottom: 21px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--srb-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.srb-step h3 {
    margin: 0 0 11px;

    color: #123654;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 26px;
}

.srb-step p {
    margin: 0;

    color: #5e7a92;

    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 07 — RELATED SERVICES
========================================================== */

.srb-related {
    padding: 72px 0 79px;
    background: #ffffff;
}

.srb-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.srb-related__card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);

    align-items: center;
    gap: 16px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dce9f5;
    border-radius: 14px;

    color: inherit;
    background: #f5faff;
}

.srb-related__card:hover {
    border-color: #91cff7;
}

.srb-related__card img {
    width: 100px;
    height: 92px;

    object-fit: cover;
    border-radius: 9px;
}

.srb-related__card > div {
    min-width: 0;
}

.srb-related__card h3 {
    margin: 0 0 9px;

    color: #143957;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    line-height: 1.2;
}

.srb-related__card > div > span {
    color: var(--srb-blue);

    font-size: 14px;
    font-weight: 900;
}

/* Previous / Next */

.srb-service-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-top: 28px;
}

.srb-service-nav a {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-width: 0;
    padding: 19px 21px;

    border: 1px solid #d7e9f7;
    border-radius: 12px;

    background: #eff8ff;
}

.srb-service-nav a:last-child {
    align-items: flex-end;
    text-align: right;
}

.srb-service-nav a:hover {
    border-color: #8ccbf5;
    background: #e4f3ff;
}

.srb-service-nav span {
    color: #087edf;

    font-size: 14px;
    font-weight: 900;
}

.srb-service-nav strong {
    color: #153b5b;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    line-height: 1.2;
}


/* ==========================================================
   SECCIÓN 08 — FAQ
========================================================== */

.srb-faq {
    padding: 75px 0 81px;
    background: #eff8ff;
}

.srb-faq__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 50px;
}

.srb-faq__intro {
    min-width: 0;
}

.srb-faq__intro h2 span {
    display: block;
}

.srb-faq__intro > p {
    margin: 0 0 23px;

    color: #5c7890;

    font-size: 15px;
    line-height: 1.75;
}

.srb-faq__items {
    display: grid;
    gap: 11px;

    min-width: 0;
}

.srb-faq__items details {
    min-width: 0;
    overflow: hidden;

    border: 1px solid #d9e8f4;
    border-radius: 12px;

    background: #ffffff;
}

.srb-faq__items details[open] {
    border-color: #98d0fa;
}

.srb-faq__items summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 19px;

    color: #183b59;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;

    cursor: pointer;
    list-style: none;
}

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

.srb-faq__items summary span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    border-radius: 8px;

    color: var(--srb-blue);
    background: #e8f5ff;

    font-size: 22px;

    transition: transform .2s ease;
}

.srb-faq__items details[open] summary span {
    transform: rotate(45deg);
}

.srb-faq__items details p {
    margin: 0;
    padding: 0 19px 19px;

    color: #5b7890;

    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================================
   SECCIÓN 09 — CTA
========================================================== */

.srb-cta {
    position: relative;
    isolation: isolate;

    padding: 48px 0;
    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.srb-cta::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .89),
            rgba(4, 23, 42, .85)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.srb-cta__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.srb-cta__content {
    max-width: 730px;
    min-width: 0;
}

.srb-cta h2 {
    color: #ffffff;
}

.srb-cta h2 span {
    color: #85e5ff;
}

.srb-cta p {
    margin: 0;

    color: #d5e8f3;

    font-size: 16px;
    line-height: 1.7;
}

.srb-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 12px;
    min-width: 255px;
}

.srb-cta__phone,
.srb-cta__secondary-phone {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.srb-cta__secondary-phone {
    color: #9fdcf2;
    font-size: 15px;
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .srb-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .srb-details__layout,
    .srb-intro__layout,
    .srb-faq__layout {
        gap: 30px;
    }

    .srb-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .srb-intro__layout,
    .srb-details__layout,
    .srb-faq__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .srb-intro__visual {
        max-width: 690px;
    }

    .srb-gallery__layout {
        grid-template-columns: minmax(0, 1fr);

        height: auto;
        overflow: visible;
    }

    .srb-gallery__stage {
        height: clamp(340px, 52vw, 490px);
    }

    .srb-gallery__thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);

        height: 128px;
        gap: 9px;
    }

    .srb-process__grid {
        gap: 12px;
    }

    .srb-step {
        padding: 21px;
    }

    .srb-step h3 {
        font-size: 23px;
    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 650px) {

    .srb-container {
        width: calc(100% - 28px);
    }

    /* HERO */

    .srb-hero {
        min-height: 0;
        padding: 41px 0;
    }

    .srb-hero h1 {
        font-size: clamp(46px, 11vw, 60px);
    }

    .srb-hero__content > p {
        font-size: 15px;
    }

    .srb-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* INTRO */

    .srb-intro {
        padding: 49px 0 55px;
    }

    .srb-intro__visual {
        padding: 10px 26px 25px 0;
    }

    .srb-intro__main-photo {
        height: 290px;
    }

    .srb-intro__secondary-photo {
        height: 123px;
        border-width: 4px;
    }

    .srb-intro__features {
        grid-template-columns: minmax(0, 1fr);
    }

    .srb-intro__content .srb-button {
        width: 100%;
    }

    /* BENEFITS */

    .srb-benefits {
        padding: 53px 0 59px;
    }

    .srb-benefits__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* DETAILS */

    .srb-details {
        padding: 55px 0;
    }

    .srb-details__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* GALLERY */

    .srb-gallery {
        padding: 53px 0 59px;
    }

    .srb-gallery__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .srb-gallery__stage {
        height: clamp(265px, 75vw, 380px);
        border-radius: 12px;
    }

    .srb-gallery__badge {
        top: 11px;
        left: 11px;

        max-width: calc(100% - 111px);

        padding: 8px 9px;

        font-size: 14px;
    }

    .srb-gallery__controls {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .srb-gallery__controls button {
        width: 36px;
        height: 36px;
    }

    .srb-gallery__caption {
        right: 13px;
        bottom: 15px;
        left: 13px;
    }

    .srb-gallery__caption h3 {
        font-size: 24px;
    }

    .srb-gallery__thumbs {
        height: 90px;
        gap: 7px;
    }

    .srb-gallery__thumb {
        border-width: 2px;
        border-radius: 8px;
    }

    .srb-gallery__thumb > span {
        display: none;
    }

    /* PROCESS */

    .srb-process {
        padding: 53px 0 59px;
    }

    .srb-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .srb-step {
        padding: 24px;
    }

    .srb-step h3 {
        font-size: 26px;
    }

    /* RELATED */

    .srb-related {
        padding: 53px 0 60px;
    }

    .srb-service-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    /* FAQ */

    .srb-faq {
        padding: 54px 0 60px;
    }

    /* CTA */

    .srb-cta {
        padding: 44px 0;
    }

    .srb-cta__layout {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }

    .srb-cta__actions {
        min-width: 0;
    }

    .srb-cta p {
        font-size: 15px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .srb-container {
        width: calc(100% - 22px);
    }

    .srb-intro__main-photo {
        height: 250px;
    }

    .srb-intro__secondary-photo {
        height: 105px;
    }

    .srb-gallery__stage {
        height: 250px;
    }

    .srb-gallery__thumbs {
        height: 77px;
    }

    .srb-gallery__caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .srb-related__card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 11px;
    }

    .srb-related__card img {
        width: 82px;
        height: 80px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.srb :is(a, button, summary, .srb-gallery__stage):focus-visible {
    outline: 3px solid #70e2ff;
    outline-offset: 4px;
}

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

    .srb *,
    .srb *::before,
    .srb *::after {
        animation: none !important;
        transition: none !important;
    }

}



/* ==========================================================
   SANTOS AC & INSULATION
   VAPOR BARRIER — CSS
========================================================== */


/* ==========================================================
   01. GENERAL
========================================================== */

.svb {
    --svb-navy: #061d36;
    --svb-blue: #087edf;
    --svb-cyan: #77e4ff;
    --svb-red: #e51a30;
    --svb-text: #173856;
    --svb-muted: #5c7891;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    color: var(--svb-text);
    background: #ffffff;

    font-family: Inter, Arial, sans-serif;
}

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

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

.svb a {
    text-decoration: none;
}

.svb button {
    font: inherit;
    cursor: pointer;
}

.svb h1,
.svb h2,
.svb h3,
.svb p {
    margin-top: 0;
}

.svb-container {
    width: min(1390px, calc(100% - 54px));
    min-width: 0;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    .svb-container {
        padding-right: 94px;
    }
}


/* ==========================================================
   02. SHARED ELEMENTS
========================================================== */

.svb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: var(--svb-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.4;
}

.svb-eyebrow::before {
    content: "";

    width: 22px;
    height: 3px;
    flex: 0 0 22px;

    background: var(--svb-red);
}

.svb-eyebrow--light {
    color: #8ce8ff;
}

.svb-heading {
    max-width: 780px;
    margin-bottom: 29px;
}

.svb-heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.svb-heading h2,
.svb-intro h2,
.svb-details h2,
.svb-faq h2,
.svb-cta h2 {
    margin: 0 0 15px;

    color: var(--svb-navy);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(35px, 3.7vw, 51px);
    font-weight: 700;
    line-height: 1.1;
}

.svb-heading h2 span,
.svb-intro h2 span,
.svb-faq h2 span {
    color: var(--svb-blue);
}

.svb-heading p {
    margin: 0;

    color: var(--svb-muted);

    font-size: 15px;
    line-height: 1.75;
}


/* BUTTONS */

.svb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 51px;
    padding: 12px 20px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    transition:
        transform .2s ease,
        background .2s ease;
}

.svb-button:hover {
    transform: translateY(-2px);
}

.svb-button--red {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f12a41,
        #c90b23
    );

    box-shadow: 0 9px 22px rgba(220, 18, 41, .19);
}

.svb-button--blue {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #138ce9,
        #075ca8
    );
}

.svb-button--outline {
    color: #ffffff;

    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .09);
}

.svb-button--outline:hover {
    background: rgba(255, 255, 255, .2);
}


/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.svb-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 420px;
    padding: 52px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.svb-hero::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 29, 55, .92) 50%,
            rgba(4, 31, 57, .6)
        ),
        url("../images/servicio-vapor-barrier.jpg")
        center / cover no-repeat;
}

.svb-hero__line {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf 50%,
        #77e4ff,
        transparent
    );
}

/* BREADCRUMB */

.svb-breadcrumb {
    display: inline-flex;
    max-width: 100%;

    margin-bottom: 28px;
    padding: 10px 15px;

    border: 1px solid rgba(125, 225, 255, .3);
    border-radius: 12px;

    background: rgba(3, 28, 53, .77);
}

.svb-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.svb-breadcrumb li,
.svb-breadcrumb a {
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.svb-breadcrumb [aria-current="page"] {
    color: #89e8ff;
}

.svb-breadcrumb a:hover {
    color: #89e8ff;
}

/* HERO CONTENT */

.svb-hero__content {
    max-width: 780px;
    min-width: 0;
}

.svb-hero h1 {
    margin: 0 0 19px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(49px, 6vw, 78px);
    line-height: 1.02;
}

.svb-hero h1 span {
    display: block;
    color: #82e6ff;
}

.svb-hero__content > p {
    max-width: 670px;
    margin: 0;

    color: #d6e9f5;
    font-size: 16px;
    line-height: 1.7;
}

.svb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.svb-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.svb-hero__tags span {
    padding: 8px 12px;

    border: 1px solid rgba(133, 224, 255, .24);
    border-radius: 999px;

    color: #d0edf9;
    background: rgba(5, 45, 77, .65);

    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   SECCIÓN 02 — INTRO
========================================================== */

.svb-intro {
    padding: 76px 0;
    background: #ffffff;
}

.svb-intro__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;
    gap: clamp(30px, 5vw, 75px);
}

.svb-intro__visual {
    position: relative;
    min-width: 0;
    padding: 14px 35px 29px 0;
}

.svb-intro__visual::before {
    content: "";

    position: absolute;

    top: 0;
    right: 12px;
    bottom: 0;
    left: 14px;

    border: 1px solid #d8eaf6;
    border-radius: 24px;
    background: #eff8ff;
}

.svb-intro__main-photo {
    position: relative;

    height: 420px;
    overflow: hidden;

    border-radius: 19px;
    background: #dceaf4;

    box-shadow: 0 17px 34px rgba(5, 56, 101, .13);
}

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

.svb-intro__secondary-photo {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 43%;
    height: 180px;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 17px;

    background: #dceaf4;

    box-shadow: 0 12px 28px rgba(6, 54, 96, .15);
}

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

.svb-intro__photo-label {
    position: absolute;

    top: 30px;
    left: 17px;

    max-width: calc(100% - 75px);
    padding: 11px 15px;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(4, 30, 56, .86);

    font-size: 14px;
    font-weight: 900;
}

.svb-intro__content {
    min-width: 0;
}

.svb-intro__content h2 span {
    display: block;
}

.svb-intro__content > p {
    margin: 0 0 16px;

    color: #56728a;
    font-size: 15px;
    line-height: 1.8;
}

.svb-intro__content .svb-intro__lead {
    color: #244967;
    font-size: 17px;
    font-weight: 600;
}

.svb-intro__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
    margin: 24px 0;
}

.svb-intro__features > div {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dcebf6;
    border-radius: 10px;

    color: #254966;
    background: #f4faff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.svb-intro__features > div > span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--svb-blue);
}


/* ==========================================================
   SECCIÓN 03 — BENEFITS
========================================================== */

.svb-benefits {
    padding: 72px 0 77px;
    background: #eff8ff;
}

.svb-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.svb-benefit {
    min-width: 0;
    padding: 25px;

    border: 1px solid #d9e8f5;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(6, 62, 105, .05);
    transition: transform .2s ease;
}

.svb-benefit:hover {
    transform: translateY(-4px);
}

.svb-benefit__number {
    display: block;
    margin-bottom: 15px;

    color: #7997af;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.svb-benefit__icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;
    margin-bottom: 18px;

    border-radius: 12px;

    color: #ffffff;
    background: var(--svb-blue);

    font-size: 25px;
}

.svb-benefit h3 {
    margin: 0 0 11px;

    color: #123655;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.17;
}

.svb-benefit p {
    margin: 0;

    color: #5b7890;
    font-size: 14px;
    line-height: 1.7;
}

/* IMPORTANT NOTE */

.svb-benefits__note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 23px;
    padding: 18px 20px;

    border: 1px solid #cce3f5;
    border-radius: 12px;

    background: #ffffff;
}

.svb-benefits__note > span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--svb-blue);

    font-size: 18px;
    font-weight: 900;
}

.svb-benefits__note p {
    margin: 0;

    color: #55738c;
    font-size: 14px;
    line-height: 1.7;
}

.svb-benefits__note strong {
    color: #123d60;
}


/* ==========================================================
   SECCIÓN 04 — DETAILS
========================================================== */

.svb-details {
    padding: 77px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(20, 145, 237, .18),
            transparent 38%
        ),
        linear-gradient(135deg, #092d4e, #031629);
}

.svb-details__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    align-items: center;
    gap: 55px;
}

.svb-details__intro {
    min-width: 0;
}

.svb-details h2 {
    color: #ffffff;
}

.svb-details h2 span {
    display: block;
    color: #8ce8ff;
}

.svb-details__intro > p {
    margin: 0 0 25px;

    color: #c5dbe9;
    font-size: 15px;
    line-height: 1.8;
}

.svb-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.svb-detail {
    min-width: 0;
    padding: 23px;

    border: 1px solid rgba(126, 218, 255, .23);
    border-radius: 14px;

    background: rgba(255, 255, 255, .045);
}

.svb-detail > span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    margin-bottom: 17px;

    border-radius: 10px;

    color: #8ee8ff;
    background: rgba(11, 143, 232, .19);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.svb-detail h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
}

.svb-detail p {
    margin: 0;

    color: #c1d9e8;
    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   SECCIÓN 05 — GALLERY
   ALTURA CONTROLADA
========================================================== */

.svb-gallery {
    padding: 72px 0 78px;
    background: #ffffff;
}

.svb-gallery__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 27px;
}

.svb-gallery__heading .svb-heading {
    min-width: 0;
    margin-bottom: 0;
}

.svb-gallery__all {
    flex: 0 0 auto;

    color: var(--svb-blue);

    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.svb-gallery__all:hover {
    color: var(--svb-red);
}

/* MAIN GRID */

.svb-gallery__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(0, .65fr);

    gap: 13px;

    width: 100%;
    height: clamp(410px, 38vw, 530px);

    min-width: 0;
    overflow: hidden;
}

/* STAGE */

.svb-gallery__stage {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 16px;
    background: #102e4b;
}

.svb-gallery__stage > img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
    object-position: center;
}

.svb-gallery__stage::after {
    content: "";

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

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(4, 22, 42, .24),
        transparent 40%,
        rgba(3, 18, 36, .84)
    );
}

/* BADGE */

.svb-gallery__badge {
    position: absolute;
    z-index: 3;

    top: 16px;
    left: 16px;

    max-width: calc(100% - 140px);

    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

/* CONTROLS */

.svb-gallery__controls {
    position: absolute;
    z-index: 4;

    top: 15px;
    right: 15px;

    display: flex;
    gap: 7px;
}

.svb-gallery__controls button {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);

    font-size: 23px;
}

.svb-gallery__controls button:hover {
    background: var(--svb-blue);
}

/* CAPTION */

.svb-gallery__caption {
    position: absolute;
    z-index: 3;

    right: 22px;
    bottom: 22px;
    left: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;
    min-width: 0;
}

.svb-gallery__caption > div {
    min-width: 0;
}

.svb-gallery__caption > div > span {
    display: block;
    margin-bottom: 7px;

    color: #8ce8ff;

    font-size: 14px;
    font-weight: 900;
}

.svb-gallery__caption h3 {
    margin: 0;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(25px, 3vw, 35px);
}

.svb-gallery__caption > strong {
    flex: 0 0 auto;

    color: #ffffff;
    font-size: 14px;
}

/* THUMBNAILS */

.svb-gallery__thumbs {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));

    gap: 11px;

    height: 100%;
    min-width: 0;
    min-height: 0;
}

.svb-gallery__thumb {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    padding: 0;

    border: 3px solid transparent;
    border-radius: 12px;

    background: #0b3456;
    text-align: left;
}

.svb-gallery__thumb.is-active {
    border-color: var(--svb-blue);
}

.svb-gallery__thumb > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
}

.svb-gallery__thumb::after {
    content: "";

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

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 25%,
        rgba(3, 20, 40, .83)
    );
}

.svb-gallery__thumb > span {
    position: absolute;
    z-index: 2;

    right: 12px;
    bottom: 12px;
    left: 12px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.svb-gallery__note {
    margin: 17px 0 0;

    color: #647f96;

    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 06 — PROCESS
========================================================== */

.svb-process {
    padding: 72px 0 79px;
    background: #eff8ff;
}

.svb-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.svb-step {
    min-width: 0;
    padding: 27px;

    border: 1px solid #dce9f5;
    border-radius: 15px;

    background: #ffffff;
}

.svb-step > span {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;
    margin-bottom: 21px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--svb-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.svb-step h3 {
    margin: 0 0 11px;

    color: #123654;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 26px;
}

.svb-step p {
    margin: 0;

    color: #5e7a92;

    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 07 — RELATED SERVICES
========================================================== */

.svb-related {
    padding: 72px 0 79px;
    background: #ffffff;
}

.svb-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.svb-related__card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);

    align-items: center;
    gap: 16px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dce9f5;
    border-radius: 14px;

    color: inherit;
    background: #f5faff;
}

.svb-related__card:hover {
    border-color: #91cff7;
}

.svb-related__card img {
    width: 100px;
    height: 92px;

    object-fit: cover;
    border-radius: 9px;
}

.svb-related__card > div {
    min-width: 0;
}

.svb-related__card h3 {
    margin: 0 0 9px;

    color: #143957;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    line-height: 1.2;
}

.svb-related__card > div > span {
    color: var(--svb-blue);

    font-size: 14px;
    font-weight: 900;
}

/* PREVIOUS / NEXT */

.svb-service-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-top: 28px;
}

.svb-service-nav a {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-width: 0;
    padding: 19px 21px;

    border: 1px solid #d7e9f7;
    border-radius: 12px;

    background: #eff8ff;
}

.svb-service-nav a:last-child {
    align-items: flex-end;
    text-align: right;
}

.svb-service-nav a:hover {
    border-color: #8ccbf5;
    background: #e4f3ff;
}

.svb-service-nav span {
    color: #087edf;

    font-size: 14px;
    font-weight: 900;
}

.svb-service-nav strong {
    color: #153b5b;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    line-height: 1.2;
}


/* ==========================================================
   SECCIÓN 08 — FAQ
========================================================== */

.svb-faq {
    padding: 75px 0 81px;
    background: #eff8ff;
}

.svb-faq__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 50px;
}

.svb-faq__intro {
    min-width: 0;
}

.svb-faq__intro h2 span {
    display: block;
}

.svb-faq__intro > p {
    margin: 0 0 23px;

    color: #5c7890;

    font-size: 15px;
    line-height: 1.75;
}

.svb-faq__items {
    display: grid;
    gap: 11px;
    min-width: 0;
}

.svb-faq__items details {
    min-width: 0;
    overflow: hidden;

    border: 1px solid #d9e8f4;
    border-radius: 12px;

    background: #ffffff;
}

.svb-faq__items details[open] {
    border-color: #98d0fa;
}

.svb-faq__items summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 19px;

    color: #183b59;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;

    cursor: pointer;
    list-style: none;
}

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

.svb-faq__items summary span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    border-radius: 8px;

    color: var(--svb-blue);
    background: #e8f5ff;

    font-size: 22px;

    transition: transform .2s ease;
}

.svb-faq__items details[open] summary span {
    transform: rotate(45deg);
}

.svb-faq__items details p {
    margin: 0;
    padding: 0 19px 19px;

    color: #5b7890;

    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================================
   SECCIÓN 09 — CTA
========================================================== */

.svb-cta {
    position: relative;
    isolation: isolate;

    padding: 48px 0;
    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.svb-cta::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .89),
            rgba(4, 23, 42, .85)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.svb-cta__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}

.svb-cta__content {
    max-width: 730px;
    min-width: 0;
}

.svb-cta h2 {
    color: #ffffff;
}

.svb-cta h2 span {
    color: #85e5ff;
}

.svb-cta p {
    margin: 0;

    color: #d5e8f3;

    font-size: 16px;
    line-height: 1.7;
}

.svb-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 12px;
    min-width: 255px;
}

.svb-cta__phone,
.svb-cta__secondary-phone {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.svb-cta__secondary-phone {
    color: #9fdcf2;
    font-size: 15px;
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .svb-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .svb-details__layout,
    .svb-intro__layout,
    .svb-faq__layout {
        gap: 30px;
    }

    .svb-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .svb-intro__layout,
    .svb-details__layout,
    .svb-faq__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .svb-intro__visual {
        max-width: 690px;
    }

    /* Gallery: stage above thumbnails */

    .svb-gallery__layout {
        grid-template-columns: minmax(0, 1fr);

        height: auto;
        overflow: visible;
    }

    .svb-gallery__stage {
        height: clamp(340px, 52vw, 490px);
    }

    .svb-gallery__thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);

        height: 128px;
        gap: 9px;
    }

    .svb-process__grid {
        gap: 12px;
    }

    .svb-step {
        padding: 21px;
    }

    .svb-step h3 {
        font-size: 23px;
    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 650px) {

    .svb-container {
        width: calc(100% - 28px);
    }

    /* HERO */

    .svb-hero {
        min-height: 0;
        padding: 41px 0;
    }

    .svb-hero h1 {
        font-size: clamp(46px, 11vw, 60px);
    }

    .svb-hero__content > p {
        font-size: 15px;
    }

    .svb-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* INTRO */

    .svb-intro {
        padding: 49px 0 55px;
    }

    .svb-intro__visual {
        padding: 10px 26px 25px 0;
    }

    .svb-intro__main-photo {
        height: 290px;
    }

    .svb-intro__secondary-photo {
        height: 123px;
        border-width: 4px;
    }

    .svb-intro__features {
        grid-template-columns: minmax(0, 1fr);
    }

    .svb-intro__content .svb-button {
        width: 100%;
    }

    /* BENEFITS */

    .svb-benefits {
        padding: 53px 0 59px;
    }

    .svb-benefits__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* DETAILS */

    .svb-details {
        padding: 55px 0;
    }

    .svb-details__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* GALLERY */

    .svb-gallery {
        padding: 53px 0 59px;
    }

    .svb-gallery__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .svb-gallery__stage {
        height: clamp(265px, 75vw, 380px);
        border-radius: 12px;
    }

    .svb-gallery__badge {
        top: 11px;
        left: 11px;

        max-width: calc(100% - 111px);

        padding: 8px 9px;
        font-size: 14px;
    }

    .svb-gallery__controls {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .svb-gallery__controls button {
        width: 36px;
        height: 36px;
    }

    .svb-gallery__caption {
        right: 13px;
        bottom: 15px;
        left: 13px;
    }

    .svb-gallery__caption h3 {
        font-size: 24px;
    }

    .svb-gallery__thumbs {
        height: 90px;
        gap: 7px;
    }

    .svb-gallery__thumb {
        border-width: 2px;
        border-radius: 8px;
    }

    .svb-gallery__thumb > span {
        display: none;
    }

    /* PROCESS */

    .svb-process {
        padding: 53px 0 59px;
    }

    .svb-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .svb-step {
        padding: 24px;
    }

    .svb-step h3 {
        font-size: 26px;
    }

    /* RELATED */

    .svb-related {
        padding: 53px 0 60px;
    }

    .svb-service-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    /* FAQ */

    .svb-faq {
        padding: 54px 0 60px;
    }

    /* CTA */

    .svb-cta {
        padding: 44px 0;
    }

    .svb-cta__layout {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }

    .svb-cta__actions {
        min-width: 0;
    }

    .svb-cta p {
        font-size: 15px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .svb-container {
        width: calc(100% - 22px);
    }

    .svb-intro__main-photo {
        height: 250px;
    }

    .svb-intro__secondary-photo {
        height: 105px;
    }

    .svb-gallery__stage {
        height: 250px;
    }

    .svb-gallery__thumbs {
        height: 77px;
    }

    .svb-gallery__caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .svb-related__card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 11px;
    }

    .svb-related__card img {
        width: 82px;
        height: 80px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.svb :is(
    a,
    button,
    summary,
    .svb-gallery__stage
):focus-visible {
    outline: 3px solid #70e2ff;
    outline-offset: 4px;
}

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

    .svb *,
    .svb *::before,
    .svb *::after {
        animation: none !important;
        transition: none !important;
    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   CRAWL SPACE CLEANING — CSS
========================================================== */

/* ==========================================================
   01. GENERAL
========================================================== */

.scs {
    --scs-navy: #061d36;
    --scs-blue: #087edf;
    --scs-cyan: #77e4ff;
    --scs-red: #e51a30;
    --scs-text: #173856;
    --scs-muted: #5c7891;

    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: clip;

    color: var(--scs-text);
    background: #ffffff;
    font-family: Inter, Arial, sans-serif;
}

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

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

.scs a {
    text-decoration: none;
}

.scs button {
    font: inherit;
    cursor: pointer;
}

.scs h1,
.scs h2,
.scs h3,
.scs p {
    margin-top: 0;
}

.scs-container {
    width: min(1390px, calc(100% - 54px));
    min-width: 0;
    margin: 0 auto;
}

/* Espacio para la barra flotante lateral */

@media (min-width: 1200px) {
    .scs-container {
        padding-right: 94px;
    }
}


/* ==========================================================
   02. ESTILOS COMPARTIDOS
========================================================== */

.scs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: var(--scs-blue);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.4;
}

.scs-eyebrow::before {
    content: "";

    width: 22px;
    height: 3px;
    flex: 0 0 22px;

    background: var(--scs-red);
}

.scs-eyebrow--light {
    color: #8ce8ff;
}

.scs-heading {
    max-width: 780px;
    margin-bottom: 29px;
}

.scs-heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.scs-heading h2,
.scs-intro h2,
.scs-details h2,
.scs-faq h2,
.scs-cta h2 {
    margin: 0 0 15px;

    color: var(--scs-navy);
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(35px, 3.7vw, 51px);
    font-weight: 700;
    line-height: 1.1;
}

.scs-heading h2 span,
.scs-intro h2 span,
.scs-faq h2 span {
    color: var(--scs-blue);
}

.scs-heading p {
    margin: 0;

    color: var(--scs-muted);
    font-size: 15px;
    line-height: 1.75;
}

/* BUTTONS */

.scs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 51px;
    padding: 12px 20px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    transition: transform .2s ease, background .2s ease;
}

.scs-button:hover {
    transform: translateY(-2px);
}

.scs-button--red {
    color: #ffffff;
    background: linear-gradient(135deg, #f12a41, #c90b23);
    box-shadow: 0 9px 22px rgba(220, 18, 41, .19);
}

.scs-button--blue {
    color: #ffffff;
    background: linear-gradient(135deg, #138ce9, #075ca8);
}

.scs-button--outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .09);
}

.scs-button--outline:hover {
    background: rgba(255, 255, 255, .2);
}


/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.scs-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 420px;
    padding: 52px 0;

    overflow: hidden;
    color: #ffffff;
    background: #061d36;
}

.scs-hero::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 29, 55, .92) 50%,
            rgba(4, 31, 57, .6)
        ),
        url("https://commons.wikimedia.org/wiki/Special:FilePath/Crawlspace_under_house.jpg?width=1600")
        center / cover no-repeat;
}

.scs-hero__line {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg, #e51a30, #087edf 50%, #77e4ff, transparent
    );
}

.scs-breadcrumb {
    display: inline-flex;
    max-width: 100%;

    margin-bottom: 28px;
    padding: 10px 15px;

    border: 1px solid rgba(125, 225, 255, .3);
    border-radius: 12px;

    background: rgba(3, 28, 53, .77);
}

.scs-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.scs-breadcrumb li,
.scs-breadcrumb a {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.scs-breadcrumb [aria-current="page"],
.scs-breadcrumb a:hover {
    color: #89e8ff;
}

.scs-hero__content {
    max-width: 780px;
    min-width: 0;
}

.scs-hero h1 {
    margin: 0 0 19px;

    color: #ffffff;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(49px, 6vw, 78px);
    line-height: 1.02;
}

.scs-hero h1 span {
    display: block;
    color: #82e6ff;
}

.scs-hero__content > p {
    max-width: 670px;
    margin: 0;

    color: #d6e9f5;
    font-size: 16px;
    line-height: 1.7;
}

.scs-hero__actions,
.scs-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.scs-hero__tags span {
    padding: 8px 12px;

    border: 1px solid rgba(133, 224, 255, .24);
    border-radius: 999px;

    color: #d0edf9;
    background: rgba(5, 45, 77, .65);
    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   SECCIÓN 02 — INTRODUCCIÓN
========================================================== */

.scs-intro {
    padding: 76px 0;
    background: #ffffff;
}

.scs-intro__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(30px, 5vw, 75px);
}

.scs-intro__visual {
    position: relative;
    min-width: 0;
    padding: 14px 35px 29px 0;
}

.scs-intro__visual::before {
    content: "";

    position: absolute;
    top: 0;
    right: 12px;
    bottom: 0;
    left: 14px;

    border: 1px solid #d8eaf6;
    border-radius: 24px;
    background: #eff8ff;
}

.scs-intro__main-photo {
    position: relative;
    height: 420px;

    overflow: hidden;
    border-radius: 19px;
    background: #dceaf4;

    box-shadow: 0 17px 34px rgba(5, 56, 101, .13);
}

.scs-intro__main-photo img,
.scs-intro__secondary-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scs-intro__secondary-photo {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 43%;
    height: 180px;

    overflow: hidden;
    border: 5px solid #ffffff;
    border-radius: 17px;

    background: #dceaf4;
    box-shadow: 0 12px 28px rgba(6, 54, 96, .15);
}

.scs-intro__photo-label {
    position: absolute;
    top: 30px;
    left: 17px;

    max-width: calc(100% - 75px);
    padding: 11px 15px;

    border-radius: 9px;
    color: #ffffff;
    background: rgba(4, 30, 56, .86);

    font-size: 14px;
    font-weight: 900;
}

.scs-intro__reference {
    position: absolute;
    right: 6px;
    bottom: 2px;

    color: #607d95;
    font-size: 14px;
    font-weight: 700;
}

.scs-intro__content {
    min-width: 0;
}

.scs-intro__content h2 span {
    display: block;
}

.scs-intro__content > p {
    margin: 0 0 16px;

    color: #56728a;
    font-size: 15px;
    line-height: 1.8;
}

.scs-intro__content .scs-intro__lead {
    color: #244967;
    font-size: 17px;
    font-weight: 600;
}

.scs-intro__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0;
}

.scs-intro__features > div {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dcebf6;
    border-radius: 10px;

    color: #254966;
    background: #f4faff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.scs-intro__features > div > span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    border-radius: 50%;
    color: #ffffff;
    background: var(--scs-blue);
}


/* ==========================================================
   SECCIÓN 03 — COMMON CONCERNS
========================================================== */

.scs-concerns {
    padding: 72px 0 77px;
    background: #eff8ff;
}

.scs-concerns__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.scs-concern {
    min-width: 0;
    padding: 25px;

    border: 1px solid #d9e8f5;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(6, 62, 105, .05);

    transition: transform .2s ease;
}

.scs-concern:hover {
    transform: translateY(-4px);
}

.scs-concern__number {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    margin-bottom: 20px;

    border-radius: 11px;
    color: #ffffff;
    background: var(--scs-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.scs-concern h3 {
    margin: 0 0 11px;

    color: #123655;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.17;
}

.scs-concern p {
    margin: 0;
    color: #5b7890;
    font-size: 14px;
    line-height: 1.7;
}

.scs-concerns__note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 23px;
    padding: 18px 20px;

    border: 1px solid #cce3f5;
    border-radius: 12px;
    background: #ffffff;
}

.scs-concerns__note > span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    border-radius: 50%;
    color: #ffffff;
    background: var(--scs-blue);

    font-size: 18px;
    font-weight: 900;
}

.scs-concerns__note p {
    margin: 0;
    color: #55738c;
    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 04 — PROJECT DETAILS
========================================================== */

.scs-details {
    padding: 77px 0;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(20, 145, 237, .18),
            transparent 38%
        ),
        linear-gradient(135deg, #092d4e, #031629);
}

.scs-details__layout {
    display: grid;
    grid-template-columns:
        minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 55px;
}

.scs-details__intro {
    min-width: 0;
}

.scs-details h2 {
    color: #ffffff;
}

.scs-details h2 span {
    display: block;
    color: #8ce8ff;
}

.scs-details__intro > p {
    margin: 0 0 25px;
    color: #c5dbe9;
    font-size: 15px;
    line-height: 1.8;
}

.scs-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.scs-detail {
    min-width: 0;
    padding: 23px;

    border: 1px solid rgba(126, 218, 255, .23);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
}

.scs-detail > span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    margin-bottom: 17px;

    border-radius: 10px;
    color: #8ee8ff;
    background: rgba(11, 143, 232, .19);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.scs-detail h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
}

.scs-detail p {
    margin: 0;
    color: #c1d9e8;
    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   SECCIÓN 05 — GALERÍA CORREGIDA
========================================================== */

.scs .scsg {
    padding: 72px 0 78px;
    background: #ffffff;
}

.scs .scsg__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 27px;
}

.scs .scsg__heading .scs-heading {
    min-width: 0;
    margin-bottom: 0;
}

.scs .scsg__all {
    flex: 0 0 auto;
    color: var(--scs-blue);
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

/* Altura controlada: evita que crezcan las miniaturas */

.scs .scsg__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, .65fr);
    gap: 13px;

    width: 100%;
    height: clamp(410px, 38vw, 530px);

    min-width: 0;
    overflow: hidden;
}

/* Visor */

.scs .scsg__stage {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    overflow: hidden;
    border-radius: 16px;
    background: #102e4b;
}

.scs .scsg__stage > img {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    max-width: none;

    object-fit: cover;
    object-position: center;
}

.scs .scsg__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(4, 22, 42, .24),
        transparent 40%,
        rgba(3, 18, 36, .84)
    );
}

.scs .scsg__badge {
    position: absolute;
    z-index: 3;

    top: 16px;
    left: 16px;

    max-width: calc(100% - 140px);
    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.scs .scsg__controls {
    position: absolute;
    z-index: 4;
    top: 15px;
    right: 15px;

    display: flex;
    gap: 7px;
}

.scs .scsg__controls button {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);
    font-size: 23px;
}

.scs .scsg__controls button:hover {
    background: var(--scs-blue);
}

.scs .scsg__caption {
    position: absolute;
    z-index: 3;

    right: 22px;
    bottom: 22px;
    left: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    min-width: 0;
}

.scs .scsg__caption-text {
    min-width: 0;
}

.scs .scsg__caption-text > span {
    display: block;
    margin-bottom: 7px;

    color: #8ce8ff;
    font-size: 14px;
    font-weight: 900;
}

.scs .scsg__caption h3 {
    margin: 0;
    color: #ffffff;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(25px, 3vw, 35px);
}

.scs .scsg__counter {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

/* Miniaturas: tres filas dentro de la altura definida */

.scs .scsg__thumbs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 11px;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.scs .scsg__thumb {
    position: relative;
    isolation: isolate;
    display: block;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;

    overflow: hidden;
    border: 3px solid transparent;
    border-radius: 12px;
    background: #0b3456;
    text-align: left;
}

.scs .scsg__thumb.is-active {
    border-color: var(--scs-blue);
}

.scs .scsg__thumb > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
}

.scs .scsg__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        180deg, transparent 25%, rgba(3, 20, 40, .83)
    );
}

.scs .scsg__thumb-label {
    position: absolute;
    z-index: 2;

    right: 12px;
    bottom: 12px;
    left: 12px;

    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.scs .scsg__note {
    margin: 17px 0 0;

    color: #647f96;
    font-size: 14px;
    line-height: 1.75;
}

.scs .scsg__note a {
    color: var(--scs-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ==========================================================
   SECCIÓN 06 — PROCESS
========================================================== */

.scs-process {
    padding: 72px 0 79px;
    background: #eff8ff;
}

.scs-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.scs-step {
    min-width: 0;
    padding: 27px;

    border: 1px solid #dce9f5;
    border-radius: 15px;
    background: #ffffff;
}

.scs-step > span {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;
    margin-bottom: 21px;

    border-radius: 11px;
    color: #ffffff;
    background: var(--scs-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.scs-step h3 {
    margin: 0 0 11px;
    color: #123654;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 26px;
}

.scs-step p {
    margin: 0;
    color: #5e7a92;
    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 07 — RELATED SERVICES
========================================================== */

.scs-related {
    padding: 72px 0 79px;
    background: #ffffff;
}

.scs-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.scs-related__card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 16px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dce9f5;
    border-radius: 14px;
    color: inherit;
    background: #f5faff;
}

.scs-related__card:hover {
    border-color: #91cff7;
}

.scs-related__card img {
    width: 100px;
    height: 92px;
    object-fit: cover;
    border-radius: 9px;
}

.scs-related__card > div {
    min-width: 0;
}

.scs-related__card h3 {
    margin: 0 0 9px;
    color: #143957;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    line-height: 1.2;
}

.scs-related__card > div > span {
    color: var(--scs-blue);
    font-size: 14px;
    font-weight: 900;
}

/* Previous / Next */

.scs-service-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.scs-service-nav a {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-width: 0;
    padding: 19px 21px;

    border: 1px solid #d7e9f7;
    border-radius: 12px;
    background: #eff8ff;
}

.scs-service-nav a:last-child {
    align-items: flex-end;
    text-align: right;
}

.scs-service-nav a:hover {
    border-color: #8ccbf5;
    background: #e4f3ff;
}

.scs-service-nav span {
    color: #087edf;
    font-size: 14px;
    font-weight: 900;
}

.scs-service-nav strong {
    color: #153b5b;
    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    line-height: 1.2;
}


/* ==========================================================
   SECCIÓN 08 — FAQ
========================================================== */

.scs-faq {
    padding: 75px 0 81px;
    background: #eff8ff;
}

.scs-faq__layout {
    display: grid;
    grid-template-columns:
        minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 50px;
}

.scs-faq__intro {
    min-width: 0;
}

.scs-faq__intro h2 span {
    display: block;
}

.scs-faq__intro > p {
    margin: 0 0 23px;
    color: #5c7890;
    font-size: 15px;
    line-height: 1.75;
}

.scs-faq__items {
    display: grid;
    gap: 11px;
    min-width: 0;
}

.scs-faq__items details {
    min-width: 0;
    overflow: hidden;

    border: 1px solid #d9e8f4;
    border-radius: 12px;
    background: #ffffff;
}

.scs-faq__items details[open] {
    border-color: #98d0fa;
}

.scs-faq__items summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 19px;

    color: #183b59;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;

    cursor: pointer;
    list-style: none;
}

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

.scs-faq__items summary span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    border-radius: 8px;
    color: var(--scs-blue);
    background: #e8f5ff;
    font-size: 22px;

    transition: transform .2s ease;
}

.scs-faq__items details[open] summary span {
    transform: rotate(45deg);
}

.scs-faq__items details p {
    margin: 0;
    padding: 0 19px 19px;

    color: #5b7890;
    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================================
   SECCIÓN 09 — FINAL CTA
========================================================== */

.scs-cta {
    position: relative;
    isolation: isolate;

    padding: 48px 0;
    overflow: hidden;
    color: #ffffff;
    background: #061d36;
}

.scs-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .89),
            rgba(4, 23, 42, .85)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.scs-cta__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.scs-cta__content {
    max-width: 730px;
    min-width: 0;
}

.scs-cta h2 {
    color: #ffffff;
}

.scs-cta h2 span {
    color: #85e5ff;
}

.scs-cta p {
    margin: 0;
    color: #d5e8f3;
    font-size: 16px;
    line-height: 1.7;
}

.scs-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-width: 255px;
}

.scs-cta__phone,
.scs-cta__secondary-phone {
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.scs-cta__secondary-phone {
    color: #9fdcf2;
    font-size: 15px;
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .scs-concerns__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scs-intro__layout,
    .scs-details__layout,
    .scs-faq__layout {
        gap: 30px;
    }

    .scs-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .scs-intro__layout,
    .scs-details__layout,
    .scs-faq__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .scs-intro__visual {
        max-width: 690px;
    }

    /* Galería: visor arriba y miniaturas debajo */

    .scs .scsg__layout {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        overflow: visible;
    }

    .scs .scsg__stage {
        height: clamp(340px, 52vw, 490px);
    }

    .scs .scsg__thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        height: 128px;
        gap: 9px;
    }

    .scs-process__grid {
        gap: 12px;
    }

    .scs-step {
        padding: 21px;
    }

    .scs-step h3 {
        font-size: 23px;
    }

}


/* ==========================================================
   RESPONSIVE — CELULAR
========================================================== */

@media (max-width: 650px) {

    .scs-container {
        width: calc(100% - 28px);
    }

    /* HERO */

    .scs-hero {
        min-height: 0;
        padding: 41px 0;
    }

    .scs-hero h1 {
        font-size: clamp(46px, 11vw, 60px);
    }

    .scs-hero__content > p {
        font-size: 15px;
    }

    .scs-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* INTRO */

    .scs-intro {
        padding: 49px 0 55px;
    }

    .scs-intro__visual {
        padding: 10px 26px 25px 0;
    }

    .scs-intro__main-photo {
        height: 290px;
    }

    .scs-intro__secondary-photo {
        height: 123px;
        border-width: 4px;
    }

    .scs-intro__features {
        grid-template-columns: minmax(0, 1fr);
    }

    .scs-intro__content .scs-button {
        width: 100%;
    }

    /* CONCERNS */

    .scs-concerns {
        padding: 53px 0 59px;
    }

    .scs-concerns__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* DETAILS */

    .scs-details {
        padding: 55px 0;
    }

    .scs-details__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* GALLERY */

    .scs .scsg {
        padding: 53px 0 59px;
    }

    .scs .scsg__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .scs .scsg__stage {
        height: clamp(265px, 75vw, 380px);
        border-radius: 12px;
    }

    .scs .scsg__badge {
        top: 11px;
        left: 11px;
        max-width: calc(100% - 111px);
        padding: 8px 9px;
    }

    .scs .scsg__controls {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .scs .scsg__controls button {
        width: 36px;
        height: 36px;
    }

    .scs .scsg__caption {
        right: 13px;
        bottom: 15px;
        left: 13px;
    }

    .scs .scsg__caption h3 {
        font-size: 24px;
    }

    .scs .scsg__thumbs {
        height: 90px;
        gap: 7px;
    }

    .scs .scsg__thumb {
        border-width: 2px;
        border-radius: 8px;
    }

    .scs .scsg__thumb-label {
        display: none;
    }

    /* PROCESS */

    .scs-process {
        padding: 53px 0 59px;
    }

    .scs-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .scs-step {
        padding: 24px;
    }

    /* RELATED */

    .scs-related {
        padding: 53px 0 60px;
    }

    .scs-service-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    /* FAQ */

    .scs-faq {
        padding: 54px 0 60px;
    }

    /* CTA */

    .scs-cta {
        padding: 44px 0;
    }

    .scs-cta__layout {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }

    .scs-cta__actions {
        min-width: 0;
    }

    .scs-cta p {
        font-size: 15px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .scs-container {
        width: calc(100% - 22px);
    }

    .scs-intro__main-photo {
        height: 250px;
    }

    .scs-intro__secondary-photo {
        height: 105px;
    }

    .scs .scsg__stage {
        height: 250px;
    }

    .scs .scsg__thumbs {
        height: 77px;
    }

    .scs .scsg__caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .scs-related__card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 11px;
    }

    .scs-related__card img {
        width: 82px;
        height: 80px;
    }

}


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

.scs :is(a, button, summary, .scsg__stage):focus-visible {
    outline: 3px solid #70e2ff;
    outline-offset: 4px;
}

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

    .scs *,
    .scs *::before,
    .scs *::after {
        animation: none !important;
        transition: none !important;
    }

}


/* ==========================================================
   SANTOS AC & INSULATION
   RAT PROOFING — CSS
========================================================== */


/* ==========================================================
   01. GENERAL
========================================================== */

.srpf {
    --srpf-navy: #061d36;
    --srpf-blue: #087edf;
    --srpf-cyan: #77e4ff;
    --srpf-red: #e51a30;
    --srpf-text: #173856;
    --srpf-muted: #5c7891;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: clip;

    color: var(--srpf-text);
    background: #ffffff;

    font-family: Inter, Arial, sans-serif;
}

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

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

.srpf a {
    text-decoration: none;
}

.srpf button {
    font: inherit;
    cursor: pointer;
}

.srpf h1,
.srpf h2,
.srpf h3,
.srpf p {
    margin-top: 0;
}

.srpf-container {
    width: min(1390px, calc(100% - 54px));
    min-width: 0;
    margin: 0 auto;
}

/* Reservar espacio para barra flotante lateral */

@media (min-width: 1200px) {

    .srpf-container {
        padding-right: 94px;
    }

}


/* ==========================================================
   02. ELEMENTOS COMPARTIDOS
========================================================== */

.srpf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: var(--srpf-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.4;
}

.srpf-eyebrow::before {
    content: "";

    width: 22px;
    height: 3px;
    flex: 0 0 22px;

    background: var(--srpf-red);
}

.srpf-eyebrow--light {
    color: #8ce8ff;
}

.srpf-heading {
    max-width: 780px;
    margin-bottom: 29px;
}

.srpf-heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.srpf-heading h2,
.srpf-intro h2,
.srpf-details h2,
.srpf-faq h2,
.srpf-cta h2 {
    margin: 0 0 15px;

    color: var(--srpf-navy);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(35px, 3.7vw, 51px);
    font-weight: 700;
    line-height: 1.1;
}

.srpf-heading h2 span,
.srpf-intro h2 span,
.srpf-faq h2 span {
    color: var(--srpf-blue);
}

.srpf-heading p {
    margin: 0;

    color: var(--srpf-muted);

    font-size: 15px;
    line-height: 1.75;
}


/* BUTTONS */

.srpf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 51px;
    padding: 12px 20px;

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

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    transition:
        transform .2s ease,
        background .2s ease;
}

.srpf-button:hover {
    transform: translateY(-2px);
}

.srpf-button--red {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f12a41,
        #c90b23
    );

    box-shadow: 0 9px 22px rgba(220, 18, 41, .19);
}

.srpf-button--blue {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #138ce9,
        #075ca8
    );
}

.srpf-button--outline {
    color: #ffffff;

    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .09);
}

.srpf-button--outline:hover {
    background: rgba(255, 255, 255, .2);
}


/* ==========================================================
   SECCIÓN 01 — HERO
========================================================== */

.srpf-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 420px;
    padding: 52px 0;

    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.srpf-hero::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 38, .97),
            rgba(4, 29, 55, .92) 50%,
            rgba(4, 31, 57, .6)
        ),
        url("../images/servicio-rat-proofing.jpg")
        center / cover no-repeat;
}

.srpf-hero__line {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e51a30,
        #087edf 50%,
        #77e4ff,
        transparent
    );
}


/* BREADCRUMB */

.srpf-breadcrumb {
    display: inline-flex;
    max-width: 100%;

    margin-bottom: 28px;
    padding: 10px 15px;

    border: 1px solid rgba(125, 225, 255, .3);
    border-radius: 12px;

    background: rgba(3, 28, 53, .77);
}

.srpf-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.srpf-breadcrumb li,
.srpf-breadcrumb a {
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.srpf-breadcrumb [aria-current="page"] {
    color: #89e8ff;
}

.srpf-breadcrumb a:hover {
    color: #89e8ff;
}


/* HERO CONTENT */

.srpf-hero__content {
    max-width: 780px;
    min-width: 0;
}

.srpf-hero h1 {
    margin: 0 0 19px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(49px, 6vw, 78px);
    line-height: 1.02;
}

.srpf-hero h1 span {
    display: block;
    color: #82e6ff;
}

.srpf-hero__content > p {
    max-width: 670px;
    margin: 0;

    color: #d6e9f5;

    font-size: 16px;
    line-height: 1.7;
}

.srpf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.srpf-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.srpf-hero__tags span {
    padding: 8px 12px;

    border: 1px solid rgba(133, 224, 255, .24);
    border-radius: 999px;

    color: #d0edf9;
    background: rgba(5, 45, 77, .65);

    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   SECCIÓN 02 — INTRO
========================================================== */

.srpf-intro {
    padding: 76px 0;
    background: #ffffff;
}

.srpf-intro__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;
    gap: clamp(30px, 5vw, 75px);
}

.srpf-intro__visual {
    position: relative;
    min-width: 0;

    padding: 14px 35px 29px 0;
}

.srpf-intro__visual::before {
    content: "";

    position: absolute;

    top: 0;
    right: 12px;
    bottom: 0;
    left: 14px;

    border: 1px solid #d8eaf6;
    border-radius: 24px;

    background: #eff8ff;
}

.srpf-intro__main-photo {
    position: relative;

    height: 420px;
    overflow: hidden;

    border-radius: 19px;
    background: #dceaf4;

    box-shadow: 0 17px 34px rgba(5, 56, 101, .13);
}

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

.srpf-intro__secondary-photo {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 43%;
    height: 180px;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 17px;

    background: #dceaf4;

    box-shadow: 0 12px 28px rgba(6, 54, 96, .15);
}

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

.srpf-intro__photo-label {
    position: absolute;

    top: 30px;
    left: 17px;

    max-width: calc(100% - 75px);
    padding: 11px 15px;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(4, 30, 56, .86);

    font-size: 14px;
    font-weight: 900;
}

.srpf-intro__photo-note {
    position: absolute;

    right: 0;
    bottom: 1px;

    color: #607d95;

    font-size: 14px;
    font-weight: 700;
}


/* INTRO TEXT */

.srpf-intro__content {
    min-width: 0;
}

.srpf-intro__content h2 span {
    display: block;
}

.srpf-intro__content > p {
    margin: 0 0 16px;

    color: #56728a;

    font-size: 15px;
    line-height: 1.8;
}

.srpf-intro__content .srpf-intro__lead {
    color: #244967;

    font-size: 17px;
    font-weight: 600;
}

.srpf-intro__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
    margin: 24px 0;
}

.srpf-intro__features > div {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dcebf6;
    border-radius: 10px;

    color: #254966;
    background: #f4faff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.srpf-intro__features > div > span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--srpf-blue);
}


/* ==========================================================
   SECCIÓN 03 — CONCERNS
========================================================== */

.srpf-concerns {
    padding: 72px 0 77px;
    background: #eff8ff;
}

.srpf-concerns__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.srpf-concern {
    position: relative;

    min-width: 0;
    padding: 25px;

    border: 1px solid #d9e8f5;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(6, 62, 105, .05);

    transition: transform .2s ease;
}

.srpf-concern:hover {
    transform: translateY(-4px);
}

.srpf-concern__number {
    display: block;
    margin-bottom: 14px;

    color: #7997af;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.srpf-concern__icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    margin-bottom: 18px;

    border-radius: 12px;

    color: #ffffff;
    background: var(--srpf-blue);

    font-size: 25px;
}

.srpf-concern h3 {
    margin: 0 0 11px;

    color: #123655;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.17;
}

.srpf-concern p {
    margin: 0;

    color: #5b7890;

    font-size: 14px;
    line-height: 1.7;
}


/* IMPORTANT NOTE */

.srpf-concerns__note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 23px;
    padding: 18px 20px;

    border: 1px solid #cce3f5;
    border-radius: 12px;

    background: #ffffff;
}

.srpf-concerns__note > span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--srpf-blue);

    font-size: 18px;
    font-weight: 900;
}

.srpf-concerns__note p {
    margin: 0;

    color: #55738c;

    font-size: 14px;
    line-height: 1.7;
}

.srpf-concerns__note strong {
    color: #123d60;
}


/* ==========================================================
   SECCIÓN 04 — DETAILS
========================================================== */

.srpf-details {
    padding: 77px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(20, 145, 237, .18),
            transparent 38%
        ),
        linear-gradient(135deg, #092d4e, #031629);
}

.srpf-details__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    align-items: center;

    gap: 55px;
}

.srpf-details__intro {
    min-width: 0;
}

.srpf-details h2 {
    color: #ffffff;
}

.srpf-details h2 span {
    display: block;
    color: #8ce8ff;
}

.srpf-details__intro > p {
    margin: 0 0 25px;

    color: #c5dbe9;

    font-size: 15px;
    line-height: 1.8;
}

.srpf-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 13px;
}

.srpf-detail {
    min-width: 0;
    padding: 23px;

    border: 1px solid rgba(126, 218, 255, .23);
    border-radius: 14px;

    background: rgba(255, 255, 255, .045);
}

.srpf-detail > span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    margin-bottom: 17px;

    border-radius: 10px;

    color: #8ee8ff;
    background: rgba(11, 143, 232, .19);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.srpf-detail h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
}

.srpf-detail p {
    margin: 0;

    color: #c1d9e8;

    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   SECCIÓN 05 — GALERÍA CORREGIDA
========================================================== */

.srpf-gallery {
    padding: 72px 0 78px;
    background: #ffffff;
}

.srpf-gallery__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 27px;
}

.srpf-gallery__heading .srpf-heading {
    min-width: 0;
    margin-bottom: 0;
}

.srpf-gallery__all {
    flex: 0 0 auto;

    color: var(--srpf-blue);

    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.srpf-gallery__all:hover {
    color: var(--srpf-red);
}


/* MAIN GRID */

.srpf-gallery__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(0, .65fr);

    gap: 13px;

    width: 100%;
    height: clamp(410px, 38vw, 530px);

    min-width: 0;

    overflow: hidden;
}


/* MAIN STAGE */

.srpf-gallery__stage {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 16px;

    background: #102e4b;
}

/* Imagen absoluta: no puede alterar la altura */

.srpf-gallery__stage > img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
    object-position: center;
}

.srpf-gallery__stage::after {
    content: "";

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

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(4, 22, 42, .24),
        transparent 40%,
        rgba(3, 18, 36, .84)
    );
}


/* BADGE */

.srpf-gallery__badge {
    position: absolute;
    z-index: 3;

    top: 16px;
    left: 16px;

    max-width: calc(100% - 140px);

    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}


/* CONTROLS */

.srpf-gallery__controls {
    position: absolute;
    z-index: 4;

    top: 15px;
    right: 15px;

    display: flex;
    gap: 7px;
}

.srpf-gallery__controls button {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 9px;

    color: #ffffff;
    background: rgba(5, 35, 62, .86);

    font-size: 23px;
}

.srpf-gallery__controls button:hover {
    background: var(--srpf-blue);
}


/* CAPTION */

.srpf-gallery__caption {
    position: absolute;
    z-index: 3;

    right: 22px;
    bottom: 22px;
    left: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;
    min-width: 0;
}

.srpf-gallery__caption-text {
    min-width: 0;
}

.srpf-gallery__caption-text > span {
    display: block;

    margin-bottom: 7px;

    color: #8ce8ff;

    font-size: 14px;
    font-weight: 900;
}

.srpf-gallery__caption h3 {
    margin: 0;

    color: #ffffff;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: clamp(25px, 3vw, 35px);
}

.srpf-gallery__caption strong {
    flex: 0 0 auto;

    color: #ffffff;
    font-size: 14px;
}


/* THUMBNAILS */

.srpf-gallery__thumbs {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));

    gap: 11px;

    height: 100%;
    min-width: 0;
    min-height: 0;
}

.srpf-gallery__thumb {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    padding: 0;

    overflow: hidden;

    border: 3px solid transparent;
    border-radius: 12px;

    background: #0b3456;

    text-align: left;
}

.srpf-gallery__thumb.is-active {
    border-color: var(--srpf-blue);
}

.srpf-gallery__thumb > img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;
    min-height: 0;

    object-fit: cover;
}

.srpf-gallery__thumb::after {
    content: "";

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

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 25%,
        rgba(3, 20, 40, .83)
    );
}

.srpf-gallery__thumb > span {
    position: absolute;
    z-index: 2;

    right: 12px;
    bottom: 12px;
    left: 12px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.srpf-gallery__note {
    margin: 17px 0 0;

    color: #647f96;

    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 06 — PROCESS
========================================================== */

.srpf-process {
    padding: 72px 0 79px;
    background: #eff8ff;
}

.srpf-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 17px;
}

.srpf-step {
    min-width: 0;
    padding: 27px;

    border: 1px solid #dce9f5;
    border-radius: 15px;

    background: #ffffff;
}

.srpf-step > span {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    margin-bottom: 21px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--srpf-blue);

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.srpf-step h3 {
    margin: 0 0 11px;

    color: #123654;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 26px;
}

.srpf-step p {
    margin: 0;

    color: #5e7a92;

    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   SECCIÓN 07 — RELATED SERVICES
========================================================== */

.srpf-related {
    padding: 72px 0 79px;
    background: #ffffff;
}

.srpf-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.srpf-related__card {
    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;

    gap: 16px;

    min-width: 0;
    padding: 12px;

    border: 1px solid #dce9f5;
    border-radius: 14px;

    color: inherit;
    background: #f5faff;
}

.srpf-related__card:hover {
    border-color: #91cff7;
}

.srpf-related__card img {
    width: 100px;
    height: 92px;

    object-fit: cover;
    border-radius: 9px;
}

.srpf-related__card > div {
    min-width: 0;
}

.srpf-related__card h3 {
    margin: 0 0 9px;

    color: #143957;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 22px;
    line-height: 1.2;
}

.srpf-related__card > div > span {
    color: var(--srpf-blue);

    font-size: 14px;
    font-weight: 900;
}


/* PREVIOUS / ALL SERVICES */

.srpf-service-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
    margin-top: 28px;
}

.srpf-service-nav a {
    display: flex;
    flex-direction: column;

    gap: 7px;

    min-width: 0;
    padding: 19px 21px;

    border: 1px solid #d7e9f7;
    border-radius: 12px;

    background: #eff8ff;
}

.srpf-service-nav a:last-child {
    align-items: flex-end;
    text-align: right;
}

.srpf-service-nav a:hover {
    border-color: #8ccbf5;
    background: #e4f3ff;
}

.srpf-service-nav span {
    color: #087edf;

    font-size: 14px;
    font-weight: 900;
}

.srpf-service-nav strong {
    color: #153b5b;

    font-family: Oswald, Impact, Arial, sans-serif;
    font-size: 23px;
    line-height: 1.2;
}


/* ==========================================================
   SECCIÓN 08 — FAQ
========================================================== */

.srpf-faq {
    padding: 75px 0 81px;
    background: #eff8ff;
}

.srpf-faq__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 50px;
}

.srpf-faq__intro {
    min-width: 0;
}

.srpf-faq__intro h2 span {
    display: block;
}

.srpf-faq__intro > p {
    margin: 0 0 23px;

    color: #5c7890;

    font-size: 15px;
    line-height: 1.75;
}

.srpf-faq__items {
    display: grid;
    gap: 11px;

    min-width: 0;
}

.srpf-faq__items details {
    min-width: 0;
    overflow: hidden;

    border: 1px solid #d9e8f4;
    border-radius: 12px;

    background: #ffffff;
}

.srpf-faq__items details[open] {
    border-color: #98d0fa;
}

.srpf-faq__items summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 19px;

    color: #183b59;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;

    cursor: pointer;
    list-style: none;
}

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

.srpf-faq__items summary span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 8px;

    color: var(--srpf-blue);
    background: #e8f5ff;

    font-size: 22px;

    transition: transform .2s ease;
}

.srpf-faq__items details[open] summary span {
    transform: rotate(45deg);
}

.srpf-faq__items details p {
    margin: 0;
    padding: 0 19px 19px;

    color: #5b7890;

    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================================
   SECCIÓN 09 — FINAL CTA
========================================================== */

.srpf-cta {
    position: relative;
    isolation: isolate;

    padding: 48px 0;
    overflow: hidden;

    color: #ffffff;
    background: #061d36;
}

.srpf-cta::before {
    content: "";

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

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 40, .97),
            rgba(4, 32, 60, .89),
            rgba(4, 23, 42, .85)
        ),
        url("../images/fondo-cta-final.jpg")
        center / cover no-repeat;
}

.srpf-cta__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}

.srpf-cta__content {
    max-width: 730px;
    min-width: 0;
}

.srpf-cta h2 {
    color: #ffffff;
}

.srpf-cta h2 span {
    color: #85e5ff;
}

.srpf-cta p {
    margin: 0;

    color: #d5e8f3;

    font-size: 16px;
    line-height: 1.7;
}

.srpf-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 12px;
    min-width: 255px;
}

.srpf-cta__phone,
.srpf-cta__secondary-phone {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.srpf-cta__secondary-phone {
    color: #9fdcf2;
    font-size: 15px;
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .srpf-concerns__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .srpf-details__layout,
    .srpf-intro__layout,
    .srpf-faq__layout {
        gap: 30px;
    }

    .srpf-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .srpf-intro__layout,
    .srpf-details__layout,
    .srpf-faq__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .srpf-intro__visual {
        max-width: 690px;
    }


    /* GALERÍA EN UNA COLUMNA */

    .srpf-gallery__layout {
        grid-template-columns: minmax(0, 1fr);

        height: auto;
        overflow: visible;
    }

    .srpf-gallery__stage {
        height: clamp(340px, 52vw, 490px);
    }

    .srpf-gallery__thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);

        height: 128px;
        gap: 9px;
    }


    .srpf-process__grid {
        gap: 12px;
    }

    .srpf-step {
        padding: 21px;
    }

    .srpf-step h3 {
        font-size: 23px;
    }

}


/* ==========================================================
   RESPONSIVE — CELULAR
========================================================== */

@media (max-width: 650px) {

    .srpf-container {
        width: calc(100% - 28px);
    }


    /* HERO */

    .srpf-hero {
        min-height: 0;
        padding: 41px 0;
    }

    .srpf-hero h1 {
        font-size: clamp(46px, 11vw, 60px);
    }

    .srpf-hero__content > p {
        font-size: 15px;
    }

    .srpf-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }


    /* INTRO */

    .srpf-intro {
        padding: 49px 0 55px;
    }

    .srpf-intro__visual {
        padding: 10px 26px 25px 0;
    }

    .srpf-intro__main-photo {
        height: 290px;
    }

    .srpf-intro__secondary-photo {
        height: 123px;
        border-width: 4px;
    }

    .srpf-intro__features {
        grid-template-columns: minmax(0, 1fr);
    }

    .srpf-intro__content .srpf-button {
        width: 100%;
    }


    /* CONCERNS */

    .srpf-concerns {
        padding: 53px 0 59px;
    }

    .srpf-concerns__grid {
        grid-template-columns: minmax(0, 1fr);
    }


    /* DETAILS */

    .srpf-details {
        padding: 55px 0;
    }

    .srpf-details__grid {
        grid-template-columns: minmax(0, 1fr);
    }


    /* GALLERY */

    .srpf-gallery {
        padding: 53px 0 59px;
    }

    .srpf-gallery__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .srpf-gallery__stage {
        height: clamp(265px, 75vw, 380px);
        border-radius: 12px;
    }

    .srpf-gallery__badge {
        top: 11px;
        left: 11px;

        max-width: calc(100% - 111px);

        padding: 8px 9px;
        font-size: 14px;
    }

    .srpf-gallery__controls {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .srpf-gallery__controls button {
        width: 36px;
        height: 36px;
    }

    .srpf-gallery__caption {
        right: 13px;
        bottom: 15px;
        left: 13px;
    }

    .srpf-gallery__caption h3 {
        font-size: 24px;
    }

    .srpf-gallery__thumbs {
        height: 90px;
        gap: 7px;
    }

    .srpf-gallery__thumb {
        border-width: 2px;
        border-radius: 8px;
    }

    .srpf-gallery__thumb > span {
        display: none;
    }


    /* PROCESS */

    .srpf-process {
        padding: 53px 0 59px;
    }

    .srpf-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .srpf-step {
        padding: 24px;
    }


    /* RELATED */

    .srpf-related {
        padding: 53px 0 60px;
    }

    .srpf-service-nav {
        grid-template-columns: minmax(0, 1fr);
    }


    /* FAQ */

    .srpf-faq {
        padding: 54px 0 60px;
    }


    /* CTA */

    .srpf-cta {
        padding: 44px 0;
    }

    .srpf-cta__layout {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }

    .srpf-cta__actions {
        min-width: 0;
    }

    .srpf-cta p {
        font-size: 15px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .srpf-container {
        width: calc(100% - 22px);
    }

    .srpf-intro__main-photo {
        height: 250px;
    }

    .srpf-intro__secondary-photo {
        height: 105px;
    }

    .srpf-gallery__stage {
        height: 250px;
    }

    .srpf-gallery__thumbs {
        height: 77px;
    }

    .srpf-gallery__caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .srpf-related__card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 11px;
    }

    .srpf-related__card img {
        width: 82px;
        height: 80px;
    }

}


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

.srpf :is(
    a,
    button,
    summary,
    .srpf-gallery__stage
):focus-visible {
    outline: 3px solid #70e2ff;
    outline-offset: 4px;
}

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

    .srpf *,
    .srpf *::before,
    .srpf *::after {
        animation: none !important;
        transition: none !important;
    }

}