/* ==========================================================
   OSORIO PLUMBING SERVICES
   PREMIUM DESIGN SYSTEM V3
   Compatible con las clases originales
   ========================================================== */

/* ==========================================================
   01. DESIGN TOKENS
   ========================================================== */

:root {
    --os-navy: #071a30;
    --os-navy-2: #0c2845;
    --os-navy-3: #123653;

    --os-blue: #087fca;
    --os-blue-light: #18a7ee;
    --os-blue-soft: #eaf6fd;

    --os-wine: #842b45;
    --os-wine-hover: #a23754;

    --os-white: #ffffff;
    --os-ice: #f4f8fc;
    --os-surface: #ffffff;

    --os-text: #17314a;
    --os-muted: #60748a;
    --os-border: #e0e9f1;

    --os-shadow-sm:
        0 8px 24px rgba(7, 26, 48, .055);

    --os-shadow-md:
        0 18px 46px rgba(7, 26, 48, .10);

    --os-shadow-lg:
        0 28px 70px rgba(7, 26, 48, .15);

    --os-radius-sm: 8px;
    --os-radius-md: 14px;
    --os-radius-lg: 22px;

    --os-ease: cubic-bezier(.22, 1, .36, 1);
    --os-transition: 320ms var(--os-ease);
}


/* ==========================================================
   02. SAFE GLOBAL REFINEMENTS
   ========================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

body {
    margin: 0;
    background: var(--os-white);
    color: var(--os-text);
    font-family: "DM Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family: "DM Sans", Arial, sans-serif;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

img,
video {
    max-width: 100%;
}

a,
button {
    transition:
        color var(--os-transition),
        background-color var(--os-transition),
        border-color var(--os-transition),
        box-shadow var(--os-transition),
        transform var(--os-transition);
}

:where(a, button, input, textarea, select):focus-visible {
    outline: 3px solid var(--os-blue-light);
    outline-offset: 4px;
}

::selection {
    background: var(--os-blue);
    color: #fff;
}


/* ==========================================================
   03. UNIFIED CONTAINERS
   No modifica grids internos.
   ========================================================== */

.os-container,
.os3-container,
.osgr-container,
.os8-container {
    max-width: 1440px;
    margin-inline: auto;
}

.os-container,
.osgr-container {
    width: calc(100% - 80px);
}


/* ==========================================================
   04. PREMIUM TOP BAR
   ========================================================== */

.os-topbar {
    position: relative;
    z-index: 1110;

    background: linear-gradient(
        105deg,
        #06172b 0%,
        #0b2947 55%,
        #102f4b 100%
    );

    color: #eaf4fc;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.os-topbar-inner {
    min-height: 42px;
}

.os-topbar a,
.os-topbar span {
    font-size: 14px;
}

.os-topbar a {
    color: #e3edf7;
    text-decoration: none;
}

.os-topbar a:hover {
    color: #74ceff;
}

.os-topbar i {
    color: #55bdf5;
}

.os-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    letter-spacing: .65px;
}

.os-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;
    background: #55c8ff;

    box-shadow: 0 0 0 4px rgba(85,200,255,.12);

    animation: osPremiumPulse 2.8s ease-in-out infinite;
}


/* ==========================================================
   05. MAIN HEADER
   ========================================================== */

.os-header {
    position: sticky;
    top: 0;
    z-index: 1100;

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

    border-bottom: 1px solid rgba(7,26,48,.075);

    box-shadow:
        0 5px 25px rgba(7,26,48,.055);

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

    transition:
        background var(--os-transition),
        box-shadow var(--os-transition);
}

.os-header.is-scrolled {
    background: rgba(255,255,255,.985);

    box-shadow:
        0 12px 35px rgba(7,26,48,.105);
}

.os-header-inner {
    min-height: 88px;
}

.os-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.os-logo img {
    display: block;
    object-fit: contain;

    transition:
        transform 450ms var(--os-ease),
        filter 450ms var(--os-ease);
}

.os-logo:hover img {
    transform: scale(1.035);
}


/* ==========================================================
   06. DESKTOP NAVIGATION
   ========================================================== */

.os-desktop-nav > a,
.os-nav-dropdown > a {
    color: var(--os-text);
    font-weight: 800;
    letter-spacing: -.15px;
}

.os-desktop-nav > a:hover,
.os-nav-dropdown > a:hover,
.os-desktop-nav a.active,
.os-nav-dropdown > a.active {
    color: var(--os-blue);
}

.os-desktop-nav > a::after,
.os-nav-dropdown > a::after {
    background: linear-gradient(
        90deg,
        var(--os-blue),
        var(--os-blue-light)
    );

    height: 3px;
    border-radius: 20px;
}

.os-dropdown-button {
    color: var(--os-text);
}

.os-dropdown-button:hover,
.os-dropdown-button[aria-expanded="true"] {
    color: var(--os-blue);
}


/* ==========================================================
   07. MEGAMENU
   ========================================================== */

.os-megamenu {
    border: 1px solid var(--os-border);
    border-top: 3px solid var(--os-blue);

    border-radius: 0 0 18px 18px;

    background: #fff;

    box-shadow:
        0 30px 75px rgba(7,26,48,.17);
}

.os-megamenu-header {
    border-color: var(--os-border);
}

.os-megamenu-header h3 {
    color: var(--os-navy);
    letter-spacing: -.65px;
}

.os-megamenu-header span {
    color: var(--os-blue);
}

.os-megamenu-header p {
    color: var(--os-muted);
}

.os-megamenu-header > a {
    border-radius: var(--os-radius-sm);

    background: linear-gradient(
        120deg,
        var(--os-blue),
        #0b96df
    );

    box-shadow:
        0 8px 20px rgba(8,127,202,.16);
}

.os-megamenu-header > a:hover {
    background: var(--os-wine);
    transform: translateY(-2px);
}

.os-megamenu-item {
    position: relative;
    overflow: hidden;

    border: 1px solid var(--os-border);
    border-radius: 10px;

    background: #f8fbfe;
    color: var(--os-text);

    transition:
        transform var(--os-transition),
        background var(--os-transition),
        border-color var(--os-transition),
        box-shadow var(--os-transition);
}

.os-megamenu-item:hover {
    transform: translateY(-4px);

    background: #fff;
    border-color: #b5def4;

    box-shadow: var(--os-shadow-sm);

    color: var(--os-blue);
}

.os-megamenu-icon {
    background: var(--os-blue-soft);
    color: var(--os-blue);

    border-radius: 9px;

    transition:
        background var(--os-transition),
        color var(--os-transition),
        transform var(--os-transition);
}

.os-megamenu-item:hover .os-megamenu-icon {
    background: var(--os-blue);
    color: #fff;

    transform: rotate(-5deg);
}

.os-megamenu-arrow {
    color: var(--os-blue);

    transition: transform var(--os-transition);
}

.os-megamenu-item:hover .os-megamenu-arrow {
    transform: translateX(4px);
}

.os-megamenu-bottom {
    border-radius: 10px;

    background: linear-gradient(
        115deg,
        var(--os-navy),
        var(--os-navy-2)
    );
}


/* ==========================================================
   08. OUR WORK DROPDOWN
   ========================================================== */

.os-work-menu {
    border: 1px solid var(--os-border);
    border-top: 3px solid var(--os-blue);

    border-radius: 0 0 14px 14px;

    box-shadow:
        0 25px 60px rgba(7,26,48,.16);
}

.os-work-menu > a {
    border-radius: 9px;
}

.os-work-menu > a:hover {
    background: var(--os-blue-soft);
}

.os-work-menu > a > i:first-child {
    background: var(--os-blue-soft);
    color: var(--os-blue);
}


/* ==========================================================
   09. HEADER ACTIONS
   ========================================================== */

.os-header-call {
    border: 1px solid #d3e8f5;

    border-radius: 10px;

    background: #edf8ff;
    color: var(--os-blue);

    box-shadow:
        0 4px 12px rgba(8,127,202,.06);
}

.os-header-call:hover {
    background: var(--os-blue);
    border-color: var(--os-blue);

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 10px 22px rgba(8,127,202,.22);
}

.os-header-cta {
    position: relative;
    overflow: hidden;

    border-radius: 9px;

    background: linear-gradient(
        120deg,
        var(--os-blue),
        #0796e2
    );

    color: #fff;

    box-shadow:
        0 8px 22px rgba(8,127,202,.20);
}

.os-header-cta:hover {
    background: var(--os-wine);
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(132,43,69,.22);
}

.os-header-cta > i:last-child {
    transition: transform var(--os-transition);
}

.os-header-cta:hover > i:last-child {
    transform: translateX(4px);
}


/* ==========================================================
   10. MOBILE OFFCANVAS
   ========================================================== */

.os-offcanvas {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(24,167,238,.13),
            transparent 45%
        ),
        linear-gradient(
            160deg,
            #06182d,
            #0c2947
        );

    color: #fff;

    box-shadow:
        -20px 0 60px rgba(0,0,0,.22);
}

.os-offcanvas-overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.os-offcanvas-nav > a,
.os-offcanvas-dropdown-head {
    border-color: rgba(255,255,255,.09);
}

.os-offcanvas-nav > a:hover,
.os-offcanvas-dropdown-head:hover {
    background: rgba(255,255,255,.055);
}

.os-offcanvas-subtoggle {
    border-radius: 9px;
}

.os-offcanvas-submenu a:hover {
    color: #75ccff;
}

.os-offcanvas-contact {
    border-radius: 16px;

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

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

.os-offcanvas-estimate {
    border-radius: 9px;

    background: linear-gradient(
        110deg,
        var(--os-blue),
        #119ce4
    );
}

.os-offcanvas-estimate:hover {
    background: var(--os-wine);
}


/* ==========================================================
   11. MOBILE FLOATING NAV
   ========================================================== */

.os-floating-nav {
    border: 1px solid rgba(255,255,255,.12);

    background: rgba(7,26,48,.97);

    box-shadow:
        0 15px 40px rgba(7,26,48,.25);

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

.os-floating-nav a,
.os-floating-nav button {
    color: #dceaf7;
}

.os-floating-nav a:hover,
.os-floating-nav button:hover,
.os-floating-nav a.active {
    color: #70ccff;
}

.os-floating-main > span {
    background: linear-gradient(
        135deg,
        var(--os-blue),
        var(--os-blue-light)
    );

    box-shadow:
        0 8px 20px rgba(8,127,202,.35);
}


/* ==========================================================
   12. SECTION 03 — ABOUT
   ========================================================== */

.os3-about {
    --os3-navy: var(--os-navy);
    --os3-blue: var(--os-blue);
    --os3-wine: var(--os-wine);
}

.os3-photo {
    border-radius: 16px;

    box-shadow:
        0 24px 55px rgba(7,26,48,.15);
}

.os3-photo img {
    transition: transform 850ms var(--os-ease);
}

.os3-photo:hover img {
    transform: scale(1.045);
}

.os3-button {
    border-radius: 9px;

    box-shadow:
        0 10px 24px rgba(8,127,202,.16);
}

.os3-button:hover {
    transform: translateY(-3px);
}

.os3-benefits {
    border-radius: 14px;
}


/* ==========================================================
   13. SECTION 05 — WHY CHOOSE US
   ========================================================== */

.os5-why {
    --os5-navy: var(--os-navy);
    --os5-navy-light: var(--os-navy-2);
    --os5-blue: var(--os-blue);
    --os5-electric: var(--os-blue-light);
    --os5-wine: var(--os-wine);

    background:
        radial-gradient(
            ellipse at 80% 12%,
            rgba(24,167,238,.14),
            transparent 44%
        ),
        linear-gradient(
            125deg,
            #06182c 0%,
            #0b2b49 55%,
            #06182c 100%
        );
}

.os5-photo {
    border-radius: 15px;

    box-shadow:
        0 28px 60px rgba(0,0,0,.25);
}

.os5-photo img {
    transition: transform 900ms var(--os-ease);
}

.os5-photo:hover img {
    transform: scale(1.045);
}


/* ==========================================================
   14. SECTION 08 — CTA
   ========================================================== */

.os8-cta {
    --os8-navy: var(--os-navy);
    --os8-blue: var(--os-blue);
    --os8-wine: var(--os-wine);
}

.os8-contact-card {
    border-radius: 20px;

    box-shadow:
        0 25px 65px rgba(7,26,48,.15);
}

.os8-button {
    border-radius: 10px;
}

.os8-button:hover {
    transform: translateY(-3px);
}


/* ==========================================================
   15. REVIEWS
   ========================================================== */

.osgr {
    --osgr-navy: var(--os-navy);
    --osgr-blue: var(--os-blue);
    --osgr-border: var(--os-border);
    --osgr-muted: var(--os-muted);

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(8,127,202,.075),
            transparent 65%
        ),
        #f6f9fc;
}


/* ==========================================================
   16. SAFE IMAGE ENHANCEMENTS
   ========================================================== */

.os3-photo,
.os5-photo,
.os7-visual-frame {
    overflow: hidden;
}

.os7-visual-frame img {
    transition: transform 850ms var(--os-ease);
}

.os7-visual-frame:hover img {
    transform: scale(1.035);
}


/* ==========================================================
   17. SCROLL REVEAL
   JS adds the class only when supported.
   ========================================================== */

html.os-motion-ready .os-reveal {
    opacity: 0;

    transform: translate3d(0, 26px, 0);

    transition:
        opacity 850ms var(--os-ease),
        transform 850ms var(--os-ease);

    transition-delay: var(--os-reveal-delay, 0ms);
}

html.os-motion-ready .os-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================
   18. KEYFRAMES
   ========================================================== */

@keyframes osPremiumPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(85,200,255,.12);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(85,200,255,0);
    }

}


/* ==========================================================
   19. TABLET
   ========================================================== */

@media (max-width: 1180px) {

    .os-container,
    .osgr-container {
        width: calc(100% - 64px);
    }

    .os-header-inner {
        min-height: 80px;
    }

}


/* ==========================================================
   20. MOBILE
   ========================================================== */

@media (max-width: 800px) {

    .os-container,
    .osgr-container {
        width: calc(100% - 44px);
    }

    .os-header {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .os-header-cta {
        display: none;
    }

}


/* ==========================================================
   21. SMALL MOBILE
   ========================================================== */

@media (max-width: 600px) {

    html {
        scroll-padding-top: 80px;
    }

    .os-container,
    .osgr-container {
        width: calc(100% - 36px);
    }

    .os-header-inner {
        min-height: 73px;
    }

    .os-logo img {
        max-width: 130px;
        height: auto;
        max-height: 60px;
    }

    .os-header-call {
        width: 40px;
        height: 40px;
    }

    .os3-photo,
    .os5-photo {
        border-radius: 12px;
    }

    .os8-contact-card {
        border-radius: 15px;
    }

}


/* ==========================================================
   22. VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 380px) {

    .os-container,
    .osgr-container {
        width: calc(100% - 32px);
    }

}


/* ==========================================================
   23. REDUCED MOTION
   ========================================================== */

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

    html {
        scroll-behavior: auto;
    }

    .os-status-dot {
        animation: none;
    }

    html.os-motion-ready .os-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .os3-photo img,
    .os5-photo img,
    .os7-visual-frame img {
        transition: none;
    }

}