/* ==========================================================
   BSNET MÉXICO
   Website 2026
========================================================== */

:root {
    --bsnet-navy: #071b2e;
    --bsnet-navy-light: #0b2945;
    --bsnet-blue: #0067c9;
    --bsnet-cyan: #00a3e0;

    --bsnet-dark: #101820;
    --bsnet-gray: #64748b;
    --bsnet-gray-light: #e5eaf0;
    --bsnet-light: #f4f7fa;
    --bsnet-white: #ffffff;

    --bsnet-radius: 14px;

    --bsnet-shadow:
        0 15px 40px rgba(0, 25, 50, 0.08);

    --bsnet-transition:
        all 0.25s ease;
}


/* ==========================================================
   GENERAL
========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--bsnet-dark);

    background: var(--bsnet-white);

    line-height: 1.7;
}

a {
    text-decoration: none;
}

.section {
    padding: 110px 0;
}

.section-light {
    background: var(--bsnet-light);
}


/* ==========================================================
   HEADER
========================================================== */

.bsnet-header {
    background:
        rgba(7, 27, 46, 0.94);

    backdrop-filter: blur(12px);

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

.navbar {
    min-height: 92px;
}

.navbar-brand {
    display: flex;

    align-items: baseline;

    gap: 7px;
}

.bsnet-logo {
    width: 145px;
    height: auto;
    display: block;
    transition: var(--bsnet-transition);
}

.navbar-brand:hover .bsnet-logo {
    transform: scale(1.03);
}

.nav-link {
    color:
        rgba(255, 255, 255, 0.78) !important;

    font-size: 0.94rem;

    font-weight: 500;

    margin: 0 4px;

    transition: var(--bsnet-transition);
}

.nav-link:hover,
.nav-link.active {
    color: white !important;
}

.dropdown-menu {
    padding: 12px;

    border: 0;

    border-radius: 10px;

    box-shadow: var(--bsnet-shadow);
}

.dropdown-item {
    border-radius: 7px;

    padding: 9px 14px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.btn {
    border-radius: 7px;

    font-weight: 600;

    padding: 11px 22px;

    transition: var(--bsnet-transition);
}

.btn-bsnet-primary {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--bsnet-blue),
            var(--bsnet-cyan)
        );

    border: none;
}

.btn-bsnet-primary:hover {
    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 103, 201, 0.28);
}

.btn-bsnet-secondary {
    color: white;

    background: var(--bsnet-navy);

    border: 1px solid var(--bsnet-navy);
}

.btn-bsnet-secondary:hover {
    color: white;

    background: var(--bsnet-blue);

    border-color: var(--bsnet-blue);
}


/* ==========================================================
   HERO
========================================================== */

/* ==========================================================
   HERO
========================================================== */

.hero {
    position: relative;

    min-height: 780px;

    overflow: hidden;

    color: white;

    background: #041525;
}


/* Fotografía real BSNET */

.hero-background {
    position: absolute;

    top: 0;
    right: 0;

    width: 60%;
    height: 100%;

    background-image:
        url("../img/proyectos/rack-despues.jpg");

    background-size: cover;

    background-position: center center;

    opacity: 0.78;

    transform: scale(1.02);
}


/* Integración fotografía + fondo */

.hero-background::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #041525 0%,
            rgba(4,21,37,0.92) 12%,
            rgba(4,21,37,0.50) 45%,
            rgba(4,21,37,0.10) 100%
        );
}


.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 15% 45%,
            rgba(0, 103, 201, 0.18),
            transparent 38%
        ),
        linear-gradient(
            90deg,
            #041525 0%,
            #061b2d 45%,
            rgba(6,27,45,0.05) 100%
        );
}


.hero-content {
    position: relative;

    z-index: 2;
}


.hero-eyebrow {
    display: inline-flex;

    align-items: center;

    color: #5bd0ff;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    margin-bottom: 24px;
}


.hero h1 {
    max-width: 850px;

    margin-bottom: 28px;

    font-size:
        clamp(3rem, 5.4vw, 5.2rem);

    font-weight: 760;

    letter-spacing: -0.047em;

    line-height: 1.02;
}


.hero h1 span {
    color: #64d4ff;
}


.hero-description {
    max-width: 650px;

    margin-bottom: 35px;

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

    font-size: 1.13rem;

    line-height: 1.8;
}


.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}


.hero-capabilities {
    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 40px;

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

    font-size: 0.87rem;

    font-weight: 500;
}


.hero-capabilities i {
    margin-right: 6px;

    color: var(--bsnet-cyan);
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.section-heading {
    max-width: 760px;

    margin-bottom: 55px;
}

.section-heading h2,
.about-section h2,
.contact-section h2 {
    margin-bottom: 20px;

    font-size:
        clamp(2rem, 4vw, 3.3rem);

    font-weight: 740;

    letter-spacing: -0.035em;

    line-height: 1.12;
}

.section-heading p {
    color: var(--bsnet-gray);

    font-size: 1.05rem;
}


/* ==========================================================
   SECTOR CARDS
========================================================== */

.sector-card {
    height: 100%;

    padding: 35px;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius: var(--bsnet-radius);

    transition: var(--bsnet-transition);
}

.sector-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(0, 103, 201, 0.28);

    box-shadow: var(--bsnet-shadow);
}

.sector-icon {
    display: grid;

    width: 56px;

    height: 56px;

    margin-bottom: 25px;

    color: var(--bsnet-blue);

    background:
        rgba(0, 103, 201, 0.08);

    border-radius: 12px;

    place-items: center;

    font-size: 1.6rem;
}

.sector-card h3 {
    margin-bottom: 14px;

    font-size: 1.35rem;

    font-weight: 700;
}

.sector-card p {
    min-height: 105px;

    color: var(--bsnet-gray);
}

.sector-card a {
    color: var(--bsnet-blue);

    font-weight: 650;
}

/* ==========================================================
   SOLUTION TAGS
========================================================== */

.solution-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px 0 22px;
}

.solution-tags span {
    padding: 5px 9px;

    color: var(--bsnet-blue);

    background:
        rgba(0, 103, 201, 0.07);

    border:
        1px solid rgba(0, 103, 201, 0.12);

    border-radius: 5px;

    font-size: 0.68rem;
    font-weight: 650;
}

/* ==========================================================
   SOLUTIONS
========================================================== */

.solution-card {
    height: 100%;

    padding: 34px;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius: var(--bsnet-radius);

    transition: var(--bsnet-transition);
}

.solution-card:hover {
    transform: translateY(-6px);

    border-color: var(--bsnet-cyan);

    box-shadow: var(--bsnet-shadow);
}

.solution-card > i {
    display: block;

    margin-bottom: 24px;

    color: var(--bsnet-blue);

    font-size: 2.4rem;
}

.solution-card h3 {
    font-size: 1.3rem;

    font-weight: 700;
}

.solution-card p {
    min-height: 88px;

    color: var(--bsnet-gray);
}

.solution-card a {
    color: var(--bsnet-blue);

    font-weight: 650;
}


/* ==========================================================
   METHODOLOGY
========================================================== */

.methodology {
    color: white;

    background:
        linear-gradient(
            135deg,
            #071b2e,
            #092b49
        );
}

.section-heading-light p {
    color:
        rgba(255, 255, 255, 0.68);
}

.process-step {
    position: relative;

    min-height: 200px;

    padding: 28px 18px;

    text-align: center;

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

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

    border-radius: 12px;
}

.process-step span {
    position: absolute;

    top: 14px;

    left: 16px;

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

    font-size: 0.75rem;

    font-weight: 800;
}

.process-step i {
    display: block;

    margin:
        25px auto 20px;

    color: var(--bsnet-cyan);

    font-size: 2rem;
}

.process-step h3 {
    font-size: 1rem;

    font-weight: 650;
}


/* ==========================================================
   PROJECTS
========================================================== */

.project-card {
    height: 100%;

    overflow: hidden;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius: var(--bsnet-radius);

    transition: var(--bsnet-transition);
}

.project-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--bsnet-shadow);
}

.project-image {
    position: relative;

    height: 255px;

    overflow: hidden;

    background: var(--bsnet-navy);
}


.project-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(4,17,29,0.40)
        );
}


.project-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.project-card:hover .project-image img {
    transform:
        scale(1.045);
}

.project-content {
    padding: 28px;
}

.project-content > span {
    color: var(--bsnet-blue);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}

.project-content h3 {
    margin:
        11px 0 15px;

    font-size: 1.35rem;

    font-weight: 700;
}

.project-content p {
    color: var(--bsnet-gray);
}

.project-content a {
    color: var(--bsnet-blue);

    font-weight: 650;
}

/* ==========================================================
   INGENIERÍA EN CAMPO
========================================================== */

.field-section {
    overflow: hidden;
    background: var(--bsnet-navy);
}


.field-image {
    position: relative;
    height: 100%;
    min-height: 620px;
    overflow: hidden;
}


.field-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.field-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 17, 29, 0.05),
            rgba(4, 17, 29, 0.22)
        );
}


.field-image-label {
    position: absolute;
    z-index: 2;

    left: 38px;
    bottom: 35px;

    padding: 10px 15px;

    color: white;

    background:
        rgba(4, 17, 29, 0.82);

    border-left:
        3px solid var(--bsnet-cyan);

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

    letter-spacing: 0.14em;
}


.field-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 620px;

    padding:
        80px clamp(45px, 8vw, 120px);

    color: white;
}


.field-content h2 {
    max-width: 620px;

    margin-bottom: 24px;

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

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.08;
}


.field-intro {
    max-width: 680px;

    margin-bottom: 35px;

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

    font-size: 1.03rem;
}


.field-checklist {
    display: grid;

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

    gap: 22px 30px;

    margin-bottom: 40px;
}


.field-checklist > div {
    display: flex;

    gap: 13px;

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

    font-size: 0.85rem;

    line-height: 1.5;
}


.field-checklist i {
    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--bsnet-cyan);

    font-size: 1.1rem;
}


.field-checklist strong {
    display: block;

    margin-bottom: 3px;

    color: white;

    font-size: 0.9rem;
}


.field-content .btn {
    align-self: flex-start;
}


/* Responsive */

@media (max-width: 991px) {

    .field-image {
        min-height: 500px;
    }

    .field-content {
        min-height: auto;

        padding:
            70px 35px;
    }

}


@media (max-width: 575px) {

    .field-image {
        min-height: 420px;
    }

    .field-checklist {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   ANTES / DESPUÉS
========================================================== */

.before-after-section {
    background: var(--bsnet-light);
}


.before-after-section h2 {
    max-width: 700px;

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

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.1;
}


.before-after-intro {
    color: var(--bsnet-gray);
}


.comparison-card {
    overflow: hidden;

    height: 100%;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius: var(--bsnet-radius);

    box-shadow:
        0 15px 35px rgba(0, 30, 60, 0.05);
}


.comparison-image span {
    position: absolute;

    top: 22px;
    left: 22px;

    padding: 8px 14px;

    color: white;

    background:
        rgba(4, 17, 29, 0.88);

    border-radius: 5px;

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

    letter-spacing: 0.10em;

    max-width: calc(100% - 44px);
}


.comparison-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.comparison-image span {
    position: absolute;

    top: 22px;
    left: 22px;

    padding: 8px 14px;

    color: white;

    background:
        rgba(4, 17, 29, 0.88);

    border-radius: 5px;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.13em;
}


.comparison-after .comparison-image span {
    background: var(--bsnet-blue);
}


.comparison-content {
    padding: 30px;
}


.comparison-content h3 {
    margin-bottom: 14px;

    font-size: 1.3rem;

    font-weight: 700;
}


.comparison-content p {
    margin: 0;

    color: var(--bsnet-gray);
}


.comparison-result {
    display: flex;

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

    gap: 30px;

    margin-top: 50px;

    padding: 30px;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius: 12px;
}


.comparison-result > div {
    display: flex;

    align-items: center;

    gap: 10px;
}


.comparison-result i {
    color: var(--bsnet-blue);

    font-size: 1.2rem;
}


.result-arrow {
    color:
        #b7c1cc !important;
}


@media (max-width: 767px) {

    .comparison-image {
        height: 380px;
    }

    .comparison-result {
        flex-direction: column;

        align-items: flex-start;
    }

    .result-arrow {
        transform:
            rotate(90deg);
    }

}

/* ==========================================================
   TECHNOLOGIES
========================================================== */

.technology-section {
    background: white;
}

.technology-section h2 {
    max-width: 720px;

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

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.1;
}

.technology-intro {
    color: var(--bsnet-gray);
}

.technology-grid {
    display: grid;

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

    border-top:
        1px solid var(--bsnet-gray-light);

    border-left:
        1px solid var(--bsnet-gray-light);
}

.technology-brand {
    display: grid;

    min-height: 140px;

    padding: 25px;

    place-items: center;

    color: #748090;

    background: white;

    border-right:
        1px solid var(--bsnet-gray-light);

    border-bottom:
        1px solid var(--bsnet-gray-light);

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

    letter-spacing: 0.05em;

    transition:
        var(--bsnet-transition);
}

.technology-brand:hover {
    position: relative;
    z-index: 2;

    color: var(--bsnet-blue);

    background:
        var(--bsnet-light);

    box-shadow:
        0 12px 30px rgba(0, 30, 60, 0.06);
}

.technology-note {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    max-width: 850px;

    margin-top: 30px;

    color: var(--bsnet-gray);

    font-size: 0.87rem;
}

.technology-note i {
    margin-top: 2px;

    color: var(--bsnet-blue);

    font-size: 1.1rem;
}

.technology-note p {
    margin: 0;
}


@media (max-width: 991px) {

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

}


@media (max-width: 575px) {

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

}

/* ==========================================================
   COMMERCIAL PATHS
========================================================== */

.commercial-paths {
    background: var(--bsnet-light);
}

.commercial-card {
    position: relative;

    height: 100%;

    padding: 38px;

    overflow: hidden;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius: var(--bsnet-radius);

    transition:
        var(--bsnet-transition);
}

.commercial-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(0, 103, 201, 0.25);

    box-shadow:
        var(--bsnet-shadow);
}

.commercial-number {
    position: absolute;

    top: 25px;
    right: 28px;

    color: #dde4eb;

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

.commercial-icon {
    display: grid;

    width: 58px;
    height: 58px;

    margin-bottom: 27px;

    place-items: center;

    color: var(--bsnet-blue);

    background:
        rgba(0, 103, 201, 0.08);

    border-radius: 12px;

    font-size: 1.6rem;
}

.commercial-card h3 {
    margin-bottom: 16px;

    color: var(--bsnet-navy);

    font-size: 1.35rem;
    font-weight: 720;
}

.commercial-card p {
    min-height: 125px;

    color: var(--bsnet-gray);

    font-size: 0.92rem;
}

.commercial-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--bsnet-blue);

    font-weight: 650;
}

.commercial-link i {
    transition:
        transform 0.25s ease;
}

.commercial-card:hover
.commercial-link i {
    transform:
        translateX(5px);
}


/* Tarjeta principal */

.commercial-card-featured {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--bsnet-navy),
            #0b416c
        );

    border-color:
        transparent;
}

.commercial-card-featured h3 {
    color: white;
}

.commercial-card-featured p {
    color:
        rgba(255,255,255,0.68);
}

.commercial-card-featured
.commercial-icon {
    color: var(--bsnet-cyan);

    background:
        rgba(255,255,255,0.08);
}

.commercial-card-featured
.commercial-number {
    color:
        rgba(255,255,255,0.10);
}

.commercial-card-featured
.commercial-link {
    color: #62d5ff;
}
/* ==========================================================
   ABOUT
========================================================== */

.about-section {
    background: white;
}

.about-section p {
    color: var(--bsnet-gray);

    font-size: 1.04rem;
}

.about-panel {
    display: grid;

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

    gap: 20px;
}

.about-panel > div {
    padding: 28px;

    background: var(--bsnet-light);

    border-radius: 12px;
}

.about-panel i {
    display: block;

    margin-bottom: 14px;

    color: var(--bsnet-blue);

    font-size: 1.8rem;
}

.about-panel strong {
    display: block;

    margin-bottom: 5px;
}

.about-panel span {
    color: var(--bsnet-gray);

    font-size: 0.9rem;
}


/* ==========================================================
   CONTACT
========================================================== */

.contact-section {
    color: white;

    background:
        linear-gradient(
            130deg,
            #071b2e,
            #064d87
        );
}

.contact-section p {
    max-width: 700px;

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

    font-size: 1.05rem;
}
.contact-actions {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 12px;

    max-width: 340px;

    margin-left: auto;
}

.contact-actions .btn {
    display: flex;

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

    gap: 9px;
}


@media (max-width: 991px) {

    .contact-actions {
        margin-left: 0;
    }

}

/* ==========================================================
   FOOTER
========================================================== */

.footer {
    padding:
        75px 0 30px;

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

    background: #04111d;
}

.footer-logo {
    margin-bottom: 17px;

    color: white;

    font-size: 1.55rem;

    font-weight: 800;
}

.footer-logo span {
    color: var(--bsnet-cyan);

    font-size: 1.2rem;

    letter-spacing: 0.15em;
}

.footer h4 {
    margin-bottom: 17px;

    color: white;

    font-size: 0.95rem;
}

.footer a {
    display: block;

    margin-bottom: 8px;

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

    font-size: 0.9rem;
}

.footer a:hover {
    color: white;
}

.footer-bottom {
    display: flex;

    justify-content: space-between;

    gap: 25px;

    margin-top: 55px;

    padding-top: 25px;

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

    font-size: 0.8rem;
}

.footer-provider-note {
    max-width: 340px;

    margin-top: 18px;

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

    font-size: 0.78rem;

    line-height: 1.6;
}


.footer-legal {
    display: flex;

    gap: 18px;
}


.footer-legal a {
    margin: 0;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .navbar-collapse {
        padding:
            20px 0 30px;
    }

    .hero {
        min-height: 680px;
    }

    .section {
        padding:
            80px 0;
    }
    .hero-background {
    width: 100%;

    opacity: 0.32;
}

.hero-background::after {
    background:
        linear-gradient(
            90deg,
            rgba(4,21,37,0.92),
            rgba(4,21,37,0.72)
        );
}

.hero-overlay {
    background:
        rgba(4,21,37,0.68);
}

}


@media (max-width: 767px) {

    .hero h1 {
        font-size: 2.65rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-capabilities {
        flex-direction: column;

        gap: 8px;
    }

    .about-panel {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }

}
/* ==========================================================
   TRUST BAR
========================================================== */

.trust-bar {
    position: relative;

    z-index: 5;

    background: white;

    border-bottom:
        1px solid var(--bsnet-gray-light);

    box-shadow:
        0 8px 30px rgba(0,30,60,0.04);
}


.trust-grid {
    display: grid;

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

    min-height: 125px;
}


.trust-item {
    display: flex;

    align-items: center;

    gap: 17px;

    padding: 28px 24px;

    border-right:
        1px solid var(--bsnet-gray-light);
}


.trust-item:first-child {
    border-left:
        1px solid var(--bsnet-gray-light);
}


.trust-item > i {
    color: var(--bsnet-blue);

    font-size: 1.7rem;
}


.trust-item strong {
    display: block;

    color: var(--bsnet-navy);

    font-size: 0.94rem;
}


.trust-item span {
    display: block;

    margin-top: 3px;

    color: var(--bsnet-gray);

    font-size: 0.77rem;

    line-height: 1.4;
}


@media (max-width: 991px) {

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

}


@media (max-width: 575px) {

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

    .trust-item {
        border-right: none;

        border-bottom:
            1px solid var(--bsnet-gray-light);
    }

}

/* ==========================================================
   PÁGINAS INTERIORES
========================================================== */


/* ==========================================================
   INNER HERO
========================================================== */

.inner-hero {
    position: relative;

    overflow: hidden;

    padding:
        190px 0 115px;

    color: white;

    background:
        linear-gradient(
            125deg,
            #04111d 0%,
            #071b2e 55%,
            #0a385d 100%
        );
}


.inner-hero::after {
    content: "";

    position: absolute;

    top: -180px;
    right: -120px;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 163, 224, 0.17),
            transparent 67%
        );
}


.inner-hero-grid {
    position: absolute;

    inset: 0;

    opacity: 0.08;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.12) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;
}


.inner-hero-content {
    position: relative;

    z-index: 2;

    max-width: 900px;
}


.bsnet-breadcrumb {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 30px;

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

    font-size: 0.77rem;
}


.bsnet-breadcrumb a {
    color:
        rgba(255,255,255,0.65);
}


.bsnet-breadcrumb a:hover {
    color: white;
}


.bsnet-breadcrumb i {
    font-size: 0.6rem;
}


.inner-hero h1 {
    max-width: 900px;

    margin-bottom: 28px;

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

    font-weight: 760;

    letter-spacing: -0.05em;

    line-height: 1.02;
}


.inner-hero h1 span {
    display: block;

    color: #64d4ff;
}


.inner-hero p {
    max-width: 720px;

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

    font-size: 1.08rem;

    line-height: 1.8;
}


.inner-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 35px;
}



/* ==========================================================
   SOLUTIONS INTRO
========================================================== */

.solution-intro h2 {
    max-width: 760px;

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

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.1;
}


.solution-intro-text {
    color: var(--bsnet-gray);

    font-size: 1rem;
}


.solution-principles {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    margin-top: 65px;

    border-top:
        1px solid var(--bsnet-gray-light);

    border-left:
        1px solid var(--bsnet-gray-light);
}


.solution-principles > div {
    padding: 30px 25px;

    border-right:
        1px solid var(--bsnet-gray-light);

    border-bottom:
        1px solid var(--bsnet-gray-light);
}


.solution-principles i {
    display: block;

    margin-bottom: 17px;

    color: var(--bsnet-blue);

    font-size: 1.5rem;
}


.solution-principles strong {
    display: block;

    margin-bottom: 6px;

    color: var(--bsnet-navy);

    font-size: 0.94rem;
}


.solution-principles span {
    color: var(--bsnet-gray);

    font-size: 0.77rem;

    line-height: 1.5;
}



/* ==========================================================
   SOLUTION DIRECTORY
========================================================== */

.solution-directory {
    background: var(--bsnet-light);
}


.solution-directory-card {
    position: relative;

    height: 100%;

    padding: 35px;

    overflow: hidden;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);

    transition:
        var(--bsnet-transition);
}


.solution-directory-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(0, 103, 201, 0.28);

    box-shadow:
        var(--bsnet-shadow);
}


.directory-icon {
    display: grid;

    width: 58px;
    height: 58px;

    margin-bottom: 27px;

    place-items: center;

    color: var(--bsnet-blue);

    background:
        rgba(0, 103, 201, 0.07);

    border-radius: 12px;

    font-size: 1.65rem;
}


.directory-number {
    position: absolute;

    top: 29px;
    right: 29px;

    color: #e0e6ec;

    font-size: 2.2rem;

    font-weight: 800;
}


.solution-directory-card h3 {
    margin-bottom: 15px;

    color: var(--bsnet-navy);

    font-size: 1.35rem;

    font-weight: 720;
}


.solution-directory-card > p {
    min-height: 135px;

    color: var(--bsnet-gray);

    font-size: 0.91rem;
}


.directory-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin:
        20px 0 25px;
}


.directory-tags span {
    padding:
        5px 8px;

    color: var(--bsnet-blue);

    background:
        rgba(0, 103, 201, 0.06);

    border-radius: 4px;

    font-size: 0.66rem;

    font-weight: 650;
}


.directory-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--bsnet-blue);

    font-weight: 650;

    font-size: 0.88rem;
}


.directory-link i {
    transition:
        transform 0.25s ease;
}


.solution-directory-card:hover
.directory-link i {
    transform:
        translateX(5px);
}



/* INTEGRACIÓN A LA MEDIDA */

.solution-custom-card {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--bsnet-navy),
            #0b416c
        );

    border-color: transparent;
}


.solution-custom-card
.directory-icon {
    color: var(--bsnet-cyan);

    background:
        rgba(255,255,255,0.09);
}


.solution-custom-card
.directory-number {
    color:
        rgba(255,255,255,0.10);
}


.solution-custom-card h3 {
    color: white;
}


.solution-custom-card > p {
    color:
        rgba(255,255,255,0.68);
}


.solution-custom-card
.directory-tags span {
    color: #7cddff;

    background:
        rgba(255,255,255,0.08);
}


.solution-custom-card
.directory-link {
    color: #64d4ff;
}



/* ==========================================================
   SOLUTION PROCESS
========================================================== */

.solution-process {
    padding:
        100px 0;

    color: white;

    background:
        var(--bsnet-navy);
}


.solution-process h2 {
    margin-bottom: 22px;

    font-size:
        clamp(2rem, 4vw, 3.25rem);

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.1;
}


.solution-process .col-lg-5 > p {
    color:
        rgba(255,255,255,0.62);
}


.solution-process-grid {
    display: grid;

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

    gap: 15px;
}


.solution-process-grid > div {
    min-height: 175px;

    padding: 27px;

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

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

    border-radius: 10px;
}


.solution-process-grid span {
    display: block;

    margin-bottom: 18px;

    color: var(--bsnet-cyan);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.solution-process-grid strong {
    display: block;

    margin-bottom: 8px;

    color: white;
}


.solution-process-grid p {
    margin: 0;

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

    font-size: 0.8rem;
}



/* ==========================================================
   INTERIOR RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .inner-hero {
        padding:
            160px 0 95px;
    }


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

}


@media (max-width: 767px) {

    .inner-hero h1 {
        font-size: 2.8rem;
    }


    .solution-principles {
        grid-template-columns: 1fr;
    }


    .solution-process-grid {
        grid-template-columns: 1fr;
    }


    .solution-directory-card > p {
        min-height: auto;
    }

}

/* ==========================================================
   SERVICE PAGE
========================================================== */


/* HERO */

.service-hero {
    position: relative;

    min-height: 760px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: white;

    background: #041525;
}


.service-hero-image {
    position: absolute;

    top: 0;
    right: 0;

    width: 58%;
    height: 100%;

    background-size: cover;

    background-position: center;
}


.service-hero-network {
    background-image:
        url("../img/proyectos/rack-corporativo.jpg");
}


.service-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #041525 0%,
            rgba(4,21,37,0.98) 38%,
            rgba(4,21,37,0.72) 62%,
            rgba(4,21,37,0.28) 100%
        );
}


.service-hero-content {
    position: relative;

    z-index: 2;

    max-width: 850px;

    padding-top: 95px;
}


.service-hero h1 {
    max-width: 850px;

    margin-bottom: 27px;

    font-size:
        clamp(3rem, 5.7vw, 5.3rem);

    font-weight: 760;

    letter-spacing: -0.05em;

    line-height: 1.02;
}


.service-hero h1 span {
    display: block;

    color: #64d4ff;
}


.service-hero-content > p {
    max-width: 660px;

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

    font-size: 1.08rem;

    line-height: 1.8;
}


.service-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 34px;
}


.service-hero-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 34px;
}


.service-hero-tags span {
    padding:
        6px 10px;

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

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

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

    border-radius: 5px;

    font-size: 0.7rem;
}



/* INTRO */

.service-intro h2 {
    max-width: 760px;

    font-size:
        clamp(2.3rem, 4vw, 3.7rem);

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.08;
}


.service-intro p {
    color: var(--bsnet-gray);
}



/* PROBLEMS */

.problem-section {
    background: var(--bsnet-light);
}


.problem-card {
    height: 100%;

    padding: 32px;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);
}


.problem-card > i {
    display: block;

    margin-bottom: 24px;

    color: var(--bsnet-blue);

    font-size: 1.8rem;
}


.problem-card h3 {
    margin-bottom: 13px;

    font-size: 1.18rem;

    font-weight: 700;
}


.problem-card p {
    margin: 0;

    color: var(--bsnet-gray);

    font-size: 0.88rem;
}



/* CAPABILITIES */

.service-capabilities {
    background: white;
}


.sticky-service-heading {
    position: sticky;

    top: 135px;
}


.sticky-service-heading h2 {
    margin-bottom: 22px;

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

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.08;
}


.sticky-service-heading p {
    margin-bottom: 30px;

    color: var(--bsnet-gray);
}


.capability-list {
    border-top:
        1px solid var(--bsnet-gray-light);
}


.capability-item {
    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 24px;

    padding:
        32px 0;

    border-bottom:
        1px solid var(--bsnet-gray-light);
}


.capability-icon {
    display: grid;

    width: 58px;
    height: 58px;

    place-items: center;

    color: var(--bsnet-blue);

    background:
        rgba(0,103,201,0.07);

    border-radius: 12px;

    font-size: 1.5rem;
}


.capability-item h3 {
    margin-bottom: 10px;

    font-size: 1.18rem;

    font-weight: 700;
}


.capability-item p {
    margin: 0;

    color: var(--bsnet-gray);

    font-size: 0.9rem;
}


.capability-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 15px;
}


.capability-tags span {
    padding:
        4px 8px;

    color: var(--bsnet-blue);

    background:
        var(--bsnet-light);

    border-radius: 4px;

    font-size: 0.67rem;

    font-weight: 650;
}



/* EXPERIENCE */

.network-experience {
    color: white;

    background:
        var(--bsnet-navy);
}


.network-experience-image {
    height: 100%;

    min-height: 630px;
}


.network-experience-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.network-experience-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 630px;

    padding:
        75px clamp(40px, 7vw, 100px);
}


.network-experience-content h2 {
    margin-bottom: 24px;

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

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.08;
}


.network-experience-content > p {
    color:
        rgba(255,255,255,0.65);
}


.network-benefits {
    display: grid;

    gap: 13px;

    margin:
        24px 0 0;

    padding: 0;

    list-style: none;
}


.network-benefits li {
    display: flex;

    gap: 10px;

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

    font-size: 0.88rem;
}


.network-benefits i {
    color:
        var(--bsnet-cyan);
}



/* SERVICE METHOD */

.service-method {
    background:
        var(--bsnet-light);
}


.service-method-grid {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 12px;
}


.service-method-grid > div {
    position: relative;

    min-height: 220px;

    padding: 25px 20px;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius: 10px;
}


.service-method-grid > div > span {
    position: absolute;

    top: 17px;
    right: 18px;

    color: #dce3e9;

    font-size: 1.2rem;

    font-weight: 800;
}


.service-method-grid i {
    display: block;

    margin:
        25px 0 25px;

    color: var(--bsnet-blue);

    font-size: 1.45rem;
}


.service-method-grid h3 {
    font-size: 0.98rem;

    font-weight: 700;
}


.service-method-grid p {
    color: var(--bsnet-gray);

    font-size: 0.78rem;
}



/* TECHNOLOGIES */

.network-technologies {
    background: white;
}


.network-technologies h2 {
    max-width: 650px;

    margin-bottom: 22px;

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

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.08;
}


.network-technologies p {
    color: var(--bsnet-gray);
}


.network-tech-grid {
    display: grid;

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

    border-top:
        1px solid var(--bsnet-gray-light);

    border-left:
        1px solid var(--bsnet-gray-light);
}


.network-tech-grid span {
    display: grid;

    min-height: 100px;

    place-items: center;

    color: #687583;

    border-right:
        1px solid var(--bsnet-gray-light);

    border-bottom:
        1px solid var(--bsnet-gray-light);

    font-size: 0.95rem;

    font-weight: 800;

    letter-spacing: 0.05em;
}



/* FAQ */

.faq-section {
    background: var(--bsnet-light);
}


.faq-section h2 {
    margin-bottom: 18px;

    font-size:
        clamp(2.1rem, 4vw, 3.4rem);

    font-weight: 750;

    letter-spacing: -0.04em;

    line-height: 1.08;
}


.faq-section .col-lg-5 > p {
    color:
        var(--bsnet-gray);
}


.bsnet-accordion
.accordion-item {
    overflow: hidden;

    margin-bottom: 12px;

    background: white;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius: 8px;
}


.bsnet-accordion
.accordion-button {
    padding:
        22px 24px;

    color:
        var(--bsnet-navy);

    background: white;

    font-size: 0.94rem;

    font-weight: 650;

    box-shadow: none;
}


.bsnet-accordion
.accordion-button:not(.collapsed) {
    color:
        var(--bsnet-blue);

    background:
        rgba(0,103,201,0.03);
}


.bsnet-accordion
.accordion-body {
    padding:
        0 24px 24px;

    color:
        var(--bsnet-gray);

    font-size: 0.88rem;

    line-height: 1.7;
}



/* RESPONSIVE */

@media (max-width: 1199px) {

    .service-method-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 991px) {

    .service-hero {
        min-height: 720px;
    }


    .service-hero-image {
        width: 100%;

        opacity: 0.30;
    }


    .service-hero-overlay {
        background:
            rgba(4,21,37,0.78);
    }


    .sticky-service-heading {
        position: static;
    }


    .network-experience-image {
        min-height: 520px;
    }


    .network-experience-content {
        min-height: auto;
    }

}


@media (max-width: 767px) {

    .service-hero h1 {
        font-size: 2.8rem;
    }


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

}


@media (max-width: 575px) {

    .capability-item {
        grid-template-columns: 1fr;
    }


    .service-method-grid {
        grid-template-columns: 1fr;
    }


    .network-tech-grid {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   /* ==========================================================
   BSNET SPLIT DROPDOWN
   Texto = página
   Flecha = dropdown
========================================================== */

.bsnet-split-dropdown {
    display: flex;
    align-items: center;
    position: relative;
}


/* Enlace principal */

.bsnet-split-dropdown .bsnet-main-nav-link {
    padding-right: 3px;
}


/* Botón independiente para la flecha */

.bsnet-dropdown-toggle {
    display: inline-flex;

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

    width: 22px;
    height: 38px;

    margin-right: 7px;
    padding: 0;

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

    background: transparent;

    border: 0;

    outline: none;

    cursor: pointer;

    transition:
        color 0.2s ease;
}


.bsnet-dropdown-toggle:hover,
.bsnet-dropdown-toggle:focus,
.bsnet-dropdown-toggle.show {
    color: #ffffff;
}


/* Flecha Bootstrap */

.bsnet-dropdown-toggle::after {
    margin-left: 0;
}


/* Posición del menú */

.bsnet-split-dropdown .dropdown-menu {
    margin-top: 12px;
}


/* Enlace hacia la página general */

.bsnet-dropdown-main {
    color: var(--bsnet-blue);

    font-weight: 700;
}


/* Separador */

.bsnet-split-dropdown .dropdown-divider {
    margin:
        7px 0;
}



/* ==========================================================
   ESTADO ACTIVO
========================================================== */

.bsnet-split-dropdown .bsnet-main-nav-link.active {
    color: #ffffff;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .bsnet-split-dropdown {
        display: grid;

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

        width: 100%;
    }


    .bsnet-split-dropdown .bsnet-main-nav-link {
        width: 100%;

        padding-right: 10px;
    }


    .bsnet-dropdown-toggle {
        width: 46px;
        height: 44px;

        margin: 0;

        justify-self: end;
    }


    .bsnet-split-dropdown .dropdown-menu {
        grid-column:
            1 / -1;

        position: static !important;

        width: 100%;

        margin:
            2px 0 10px;

        transform: none !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 991px) {

    .nav-split-dropdown {
        display: grid;

        grid-template-columns:
            1fr 46px;

        width: 100%;

        align-items: center;
    }


    .nav-split-dropdown .nav-main-link {
        width: 100%;

        padding-right: 10px;
    }


    .nav-dropdown-toggle {
        width: 46px;

        height: 44px;

        margin: 0;

        justify-self: end;
    }


    .nav-split-dropdown .dropdown-menu {
        grid-column:
            1 / -1;

        position: static !important;

        width: 100%;

        margin:
            2px 0 10px;

        transform: none !important;
    }

}

/* ==========================================================
   PROJECTS PAGE
========================================================== */

.project-showcase-section {
    background:
        var(--bsnet-light);
}


/* ==========================================================
   PROJECT CARDS
========================================================== */

.project-showcase-card {
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.project-showcase-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--bsnet-shadow);
}


.project-showcase-image {
    position: relative;

    height: 360px;

    overflow: hidden;

    background:
        #dfe5ea;
}


.project-showcase-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}


.project-showcase-card:hover
.project-showcase-image img {
    transform:
        scale(1.025);
}


.project-showcase-number {
    position: absolute;

    top: 20px;
    right: 20px;

    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    color: white;

    background:
        rgba(4, 21, 37, 0.88);

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

    border-radius: 50%;

    font-size: 0.72rem;

    font-weight: 800;
}


.project-showcase-body {
    padding:
        32px;
}


.project-showcase-category {
    display: block;

    margin-bottom: 13px;

    color:
        var(--bsnet-blue);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.project-showcase-body h3 {
    margin-bottom: 16px;

    color:
        var(--bsnet-navy);

    font-size:
        clamp(1.35rem, 2vw, 1.75rem);

    font-weight: 750;

    letter-spacing:
        -0.025em;

    line-height: 1.15;
}


.project-showcase-body p {
    color:
        var(--bsnet-gray);

    font-size: 0.9rem;

    line-height: 1.7;
}


.project-showcase-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin:
        22px 0;
}


.project-showcase-tags span {
    padding:
        5px 8px;

    color:
        var(--bsnet-blue);

    background:
        var(--bsnet-light);

    border-radius: 4px;

    font-size: 0.66rem;

    font-weight: 700;
}


.project-showcase-body > a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--bsnet-blue);

    font-size: 0.82rem;

    font-weight: 700;

    text-decoration: none;
}


.project-showcase-body > a:hover {
    text-decoration:
        underline;
}



/* ==========================================================
   BEFORE / AFTER
========================================================== */

.project-case-section {
    background:
        #ffffff;
}


.project-case-section h2 {
    max-width: 800px;

    font-size:
        clamp(2.3rem, 4vw, 3.8rem);

    font-weight: 750;

    letter-spacing:
        -0.04em;

    line-height:
        1.06;
}


.project-case-section
.row > div > p {
    color:
        var(--bsnet-gray);
}


.project-before-after-grid {
    display: grid;

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

    gap: 24px;
}


.project-before-after-card {
    overflow: hidden;

    background:
        var(--bsnet-light);

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);
}


.project-before-after-image {
    position: relative;

    height: 520px;

    overflow: hidden;
}


.project-before-after-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.project-before-label,
.project-after-label {
    position: absolute;

    top: 20px;
    left: 20px;

    padding:
        9px 13px;

    color: white;

    border-radius: 5px;

    font-size: 0.67rem;

    font-weight: 800;

    letter-spacing:
        0.06em;
}


.project-before-label {
    background:
        rgba(4,21,37,0.90);
}


.project-after-label {
    background:
        var(--bsnet-blue);
}


.project-before-after-content {
    padding:
        28px;
}


.project-before-after-content h3 {
    margin-bottom: 12px;

    color:
        var(--bsnet-navy);

    font-size: 1.3rem;

    font-weight: 750;
}


.project-before-after-content p {
    margin: 0;

    color:
        var(--bsnet-gray);

    font-size: 0.88rem;

    line-height: 1.7;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .project-showcase-image {
        height: 320px;
    }


    .project-before-after-grid {
        grid-template-columns:
            1fr;
    }


    .project-before-after-image {
        height: 500px;
    }

}


@media (max-width: 575px) {

    .project-showcase-image {
        height: 260px;
    }


    .project-showcase-body {
        padding:
            24px;
    }


    .project-before-after-image {
        height: 380px;
    }


    .project-before-label,
    .project-after-label {
        top: 14px;
        left: 14px;

        max-width:
            calc(100% - 28px);
    }

}

/* ==========================================================
   PROJECT DETAIL PAGE
========================================================== */


/* ==========================================================
   PROJECT SUMMARY
========================================================== */

.project-detail-summary {
    padding:
        0;

    background:
        #ffffff;
}


.project-detail-summary-grid {
    display: grid;

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

    border-left:
        1px solid var(--bsnet-gray-light);
}


.project-detail-summary-grid > div {
    min-height: 130px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        30px;

    border-right:
        1px solid var(--bsnet-gray-light);

    border-bottom:
        1px solid var(--bsnet-gray-light);
}


.project-detail-summary-label {
    display: block;

    margin-bottom:
        8px;

    color:
        var(--bsnet-gray);

    font-size:
        0.63rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.project-detail-summary-grid strong {
    color:
        var(--bsnet-navy);

    font-size:
        1.05rem;

    font-weight:
        750;
}



/* ==========================================================
   WIDE IMAGE
========================================================== */

.project-detail-wide-image {
    padding:
        0 0 90px;

    background:
        #ffffff;
}


.project-detail-image-frame {
    position:
        relative;

    height:
        650px;

    overflow:
        hidden;

    border-radius:
        var(--bsnet-radius);

    background:
        var(--bsnet-light);
}


.project-detail-image-frame img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}



/* ==========================================================
   GALLERY
========================================================== */

.project-detail-gallery-section {
    background:
        var(--bsnet-light);
}


.project-detail-gallery {
    display:
        grid;

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

    grid-auto-rows:
        300px;

    gap:
        16px;
}


.project-detail-gallery figure {
    margin:
        0;

    overflow:
        hidden;

    border-radius:
        10px;

    background:
        #dfe5ea;
}


.project-detail-gallery-large {
    grid-row:
        span 2;
}


.project-detail-gallery img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.35s ease;
}


.project-detail-gallery figure:hover img {
    transform:
        scale(1.025);
}



/* ==========================================================
   RESULT
========================================================== */

.project-result-section {
    background:
        #ffffff;
}


.project-result-section h2 {
    max-width:
        650px;

    margin-bottom:
        23px;

    color:
        var(--bsnet-navy);

    font-size:
        clamp(2.3rem, 4vw, 3.8rem);

    font-weight:
        750;

    letter-spacing:
        -0.04em;

    line-height:
        1.06;
}


.project-result-section p {
    color:
        var(--bsnet-gray);

    line-height:
        1.75;
}


.project-result-image {
    height:
        560px;

    overflow:
        hidden;

    border-radius:
        var(--bsnet-radius);
}


.project-result-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}



/* ==========================================================
   NEXT PROJECT
========================================================== */

.project-next-section {
    padding-top:
        40px;

    padding-bottom:
        40px;

    background:
        var(--bsnet-light);
}


.project-next-box {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        42px;

    background:
        #ffffff;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);
}


.project-next-box h2 {
    max-width:
        700px;

    margin:
        0;

    color:
        var(--bsnet-navy);

    font-size:
        clamp(1.8rem, 3vw, 2.8rem);

    font-weight:
        750;

    letter-spacing:
        -0.035em;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

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


    .project-detail-image-frame {
        height:
            520px;
    }


    .project-detail-gallery {
        grid-auto-rows:
            260px;
    }


    .project-result-image {
        height:
            480px;
    }


    .project-next-box {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


@media (max-width: 575px) {

    .project-detail-summary-grid {
        grid-template-columns:
            1fr;
    }


    .project-detail-summary-grid > div {
        min-height:
            100px;
    }


    .project-detail-image-frame {
        height:
            400px;
    }


    .project-detail-wide-image {
        padding-bottom:
            60px;
    }


    .project-detail-gallery {
        grid-template-columns:
            1fr;

        grid-auto-rows:
            260px;
    }


    .project-detail-gallery-large {
        grid-row:
            span 1;
    }


    .project-result-image {
        height:
            400px;
    }


    .project-next-box {
        padding:
            28px;
    }

}

/* ==========================================================
   CONTACT PAGE
========================================================== */

.contact-path-section {
    background:
        var(--bsnet-light);
}


/* ==========================================================
   CONTACT PATH CARDS
========================================================== */

.contact-path-card {
    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    min-height: 420px;

    padding: 34px;

    color:
        var(--bsnet-navy);

    background:
        #ffffff;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.contact-path-card:hover {
    transform:
        translateY(-5px);

    color:
        var(--bsnet-navy);

    border-color:
        rgba(0, 103, 201, 0.30);

    box-shadow:
        var(--bsnet-shadow);
}


.contact-path-featured {
    color:
        #ffffff;

    background:
        var(--bsnet-navy);

    border-color:
        var(--bsnet-navy);
}


.contact-path-featured:hover {
    color:
        #ffffff;

    background:
        var(--bsnet-navy-light);

    border-color:
        var(--bsnet-navy-light);
}


.contact-path-icon {
    display: grid;

    width: 54px;
    height: 54px;

    place-items: center;

    margin-bottom:
        28px;

    color:
        var(--bsnet-blue);

    background:
        rgba(0, 103, 201, 0.08);

    border-radius:
        10px;

    font-size:
        1.45rem;
}


.contact-path-featured
.contact-path-icon {
    color:
        #ffffff;

    background:
        rgba(255,255,255,0.10);
}


.contact-path-number {
    position:
        absolute;

    top:
        34px;

    right:
        34px;

    color:
        var(--bsnet-gray);

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.contact-path-featured
.contact-path-number {
    color:
        rgba(255,255,255,0.45);
}


.contact-path-card h3 {
    margin-bottom:
        15px;

    font-size:
        1.55rem;

    font-weight:
        750;

    letter-spacing:
        -0.025em;
}


.contact-path-card p {
    color:
        var(--bsnet-gray);

    font-size:
        0.9rem;

    line-height:
        1.7;
}


.contact-path-featured p {
    color:
        rgba(255,255,255,0.70);
}


.contact-path-list {
    display: flex;

    flex-direction: column;

    gap:
        7px;

    margin:
        18px 0 28px;
}


.contact-path-list span {
    font-size:
        0.78rem;

    font-weight:
        650;
}


.contact-path-list i {
    margin-right:
        5px;

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


.contact-path-featured
.contact-path-list i {
    color:
        var(--bsnet-cyan);
}


.contact-path-card strong {
    display: flex;

    align-items: center;

    gap:
        8px;

    margin-top:
        auto;

    color:
        var(--bsnet-blue);

    font-size:
        0.82rem;
}


.contact-path-featured strong {
    color:
        #ffffff;
}



/* ==========================================================
   FORM SECTION
========================================================== */

.contact-form-section {
    background:
        #ffffff;
}


.contact-form-intro {
    position:
        sticky;

    top:
        130px;
}


.contact-form-intro h2 {
    margin-bottom:
        22px;

    color:
        var(--bsnet-navy);

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

    font-weight:
        750;

    letter-spacing:
        -0.045em;

    line-height:
        1.05;
}


.contact-form-intro > p {
    max-width:
        500px;

    color:
        var(--bsnet-gray);

    line-height:
        1.75;
}



/* ==========================================================
   EXPECTATIONS
========================================================== */

.contact-expectations {
    margin-top:
        36px;
}


.contact-expectations > div {
    display:
        grid;

    grid-template-columns:
        42px 1fr;

    gap:
        16px;

    padding:
        20px 0;

    border-bottom:
        1px solid var(--bsnet-gray-light);
}


.contact-expectations > div > span {
    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

    color:
        var(--bsnet-blue);

    background:
        var(--bsnet-light);

    border-radius:
        50%;

    font-size:
        0.65rem;

    font-weight:
        800;
}


.contact-expectations h3 {
    margin:
        0 0 5px;

    color:
        var(--bsnet-navy);

    font-size:
        0.95rem;

    font-weight:
        750;
}


.contact-expectations p {
    margin:
        0;

    color:
        var(--bsnet-gray);

    font-size:
        0.78rem;

    line-height:
        1.55;
}



/* ==========================================================
   DIRECT CONTACT
========================================================== */

.contact-direct-box {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    margin-top:
        30px;

    padding:
        20px;

    background:
        var(--bsnet-light);

    border-radius:
        10px;
}


.contact-direct-box > i {
    color:
        var(--bsnet-blue);

    font-size:
        1.4rem;
}


.contact-direct-box span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--bsnet-gray);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;
}


.contact-direct-box a {
    color:
        var(--bsnet-navy);

    font-size:
        0.92rem;

    font-weight:
        750;

    text-decoration:
        none;
}



/* ==========================================================
   FORM CARD
========================================================== */

.contact-form-card {
    padding:
        42px;

    background:
        var(--bsnet-light);

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);
}


.contact-form-group {
    margin-bottom:
        24px;
}


.contact-form-group label,
.contact-form-group legend {
    display:
        block;

    width:
        100%;

    margin-bottom:
        9px;

    color:
        var(--bsnet-navy);

    font-size:
        0.76rem;

    font-weight:
        750;
}


.contact-form-group label span {
    color:
        var(--bsnet-blue);
}


.contact-form-card
.form-control,
.contact-form-card
.form-select {
    min-height:
        52px;

    padding:
        12px 15px;

    color:
        var(--bsnet-dark);

    background:
        #ffffff;

    border:
        1px solid #d9e0e6;

    border-radius:
        7px;

    font-size:
        0.88rem;

    box-shadow:
        none;
}


.contact-form-card textarea.form-control {
    min-height:
        170px;

    resize:
        vertical;
}


.contact-form-card
.form-control:focus,
.contact-form-card
.form-select:focus {
    border-color:
        var(--bsnet-blue);

    box-shadow:
        0 0 0 3px rgba(0, 103, 201, 0.08);
}



/* ==========================================================
   CONTACT PREFERENCE
========================================================== */

.contact-preference-options {
    display:
        grid;

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

    gap:
        10px;
}


.contact-preference-options label {
    margin:
        0;

    cursor:
        pointer;
}


.contact-preference-options input {
    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.contact-preference-options label span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        50px;

    padding:
        10px;

    color:
        var(--bsnet-gray);

    background:
        #ffffff;

    border:
        1px solid #d9e0e6;

    border-radius:
        7px;

    transition:
        all 0.2s ease;
}


.contact-preference-options
input:checked + span {
    color:
        var(--bsnet-blue);

    border-color:
        var(--bsnet-blue);

    background:
        rgba(0,103,201,0.05);
}



/* ==========================================================
   PRIVACY
========================================================== */

.contact-privacy {
    margin:
        10px 0 28px;
}


.contact-privacy label {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        var(--bsnet-gray);

    font-size:
        0.75rem;

    line-height:
        1.5;

    cursor:
        pointer;
}


.contact-privacy input {
    margin-top:
        3px;
}


.contact-privacy a {
    color:
        var(--bsnet-blue);
}



/* ==========================================================
   SUBMIT
========================================================== */

.contact-submit-button {
    width:
        100%;
}


.contact-form-development-note {
    display:
        flex;

    gap:
        8px;

    margin:
        16px 0 0;

    color:
        var(--bsnet-gray);

    font-size:
        0.7rem;

    line-height:
        1.5;
}



/* ==========================================================
   INFORMATION CARDS
========================================================== */

.contact-info-section {
    background:
        var(--bsnet-light);
}


.contact-info-card {
    height:
        100%;

    padding:
        30px;

    background:
        #ffffff;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);
}


.contact-info-card > i {
    display:
        block;

    margin-bottom:
        20px;

    color:
        var(--bsnet-blue);

    font-size:
        1.45rem;
}


.contact-info-card h3 {
    margin-bottom:
        10px;

    color:
        var(--bsnet-navy);

    font-size:
        1rem;

    font-weight:
        750;
}


.contact-info-card p {
    margin:
        0;

    color:
        var(--bsnet-gray);

    font-size:
        0.8rem;

    line-height:
        1.65;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .contact-form-intro {
        position:
            static;
    }


    .contact-path-card {
        min-height:
            350px;
    }

}


@media (max-width: 575px) {

    .contact-form-card {
        padding:
            25px;
    }


    .contact-preference-options {
        grid-template-columns:
            1fr;
    }


    .contact-path-card {
        min-height:
            auto;

        padding:
            28px;
    }

}

/* ==========================================================
   SUPPORT PAGE
========================================================== */

.support-types-section {
    background:
        var(--bsnet-light);
}


/* ==========================================================
   SUPPORT TYPE CARDS
========================================================== */

.support-type-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        350px;

    height:
        100%;

    padding:
        34px;

    color:
        var(--bsnet-navy);

    background:
        #ffffff;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);

    text-decoration:
        none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.support-type-card:hover {
    transform:
        translateY(-5px);

    color:
        var(--bsnet-navy);

    border-color:
        rgba(0, 103, 201, 0.30);

    box-shadow:
        var(--bsnet-shadow);
}


.support-type-featured {
    color:
        #ffffff;

    background:
        var(--bsnet-navy);

    border-color:
        var(--bsnet-navy);
}


.support-type-featured:hover {
    color:
        #ffffff;

    background:
        var(--bsnet-navy-light);

    border-color:
        var(--bsnet-navy-light);
}


.support-type-icon {
    display:
        grid;

    width:
        54px;

    height:
        54px;

    place-items:
        center;

    margin-bottom:
        28px;

    color:
        var(--bsnet-blue);

    background:
        rgba(0, 103, 201, 0.08);

    border-radius:
        10px;

    font-size:
        1.45rem;
}


.support-type-featured
.support-type-icon {
    color:
        #ffffff;

    background:
        rgba(255,255,255,0.10);
}


.support-type-number {
    position:
        absolute;

    top:
        34px;

    right:
        34px;

    color:
        var(--bsnet-gray);

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.support-type-featured
.support-type-number {
    color:
        rgba(255,255,255,0.45);
}


.support-type-card h3 {
    margin-bottom:
        15px;

    font-size:
        1.55rem;

    font-weight:
        750;

    letter-spacing:
        -0.025em;
}


.support-type-card p {
    color:
        var(--bsnet-gray);

    font-size:
        0.9rem;

    line-height:
        1.7;
}


.support-type-featured p {
    color:
        rgba(255,255,255,0.70);
}


.support-type-card strong {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        auto;

    color:
        var(--bsnet-blue);

    font-size:
        0.82rem;
}


.support-type-featured strong {
    color:
        #ffffff;
}



/* ==========================================================
   SUPPORT EVIDENCE
========================================================== */

.support-evidence-box {
    display:
        grid;

    grid-template-columns:
        52px 1fr;

    gap:
        18px;

    margin:
        10px 0 28px;

    padding:
        22px;

    background:
        #ffffff;

    border:
        1px dashed #c9d3dc;

    border-radius:
        9px;
}


.support-evidence-box > div:first-child {
    display:
        grid;

    width:
        48px;

    height:
        48px;

    place-items:
        center;

    color:
        var(--bsnet-blue);

    background:
        rgba(0,103,201,0.07);

    border-radius:
        8px;

    font-size:
        1.3rem;
}


.support-evidence-box strong {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--bsnet-navy);

    font-size:
        0.85rem;
}


.support-evidence-box p {
    margin:
        0 0 8px;

    color:
        var(--bsnet-gray);

    font-size:
        0.76rem;

    line-height:
        1.6;
}


.support-evidence-box span {
    display:
        block;

    color:
        var(--bsnet-blue);

    font-size:
        0.68rem;

    font-weight:
        650;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 575px) {

    .support-type-card {
        min-height:
            auto;

        padding:
            28px;
    }


    .support-evidence-box {
        grid-template-columns:
            1fr;
    }

}

/* ==========================================================
   LEGAL / PRIVACY PAGE
========================================================== */

.legal-development-section {
    padding:
        32px 0;

    background:
        #fff8e8;

    border-bottom:
        1px solid #f1dfad;
}


.legal-development-box {
    display:
        grid;

    grid-template-columns:
        48px 1fr;

    gap:
        18px;

    align-items:
        start;
}


.legal-development-icon {
    display:
        grid;

    width:
        44px;

    height:
        44px;

    place-items:
        center;

    color:
        #8b6508;

    background:
        rgba(139, 101, 8, 0.08);

    border-radius:
        8px;

    font-size:
        1.25rem;
}


.legal-development-box strong {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #5f4809;

    font-size:
        0.86rem;
}


.legal-development-box p {
    max-width:
        900px;

    margin:
        0;

    color:
        #79621c;

    font-size:
        0.78rem;

    line-height:
        1.65;
}



/* ==========================================================
   LEGAL DOCUMENT
========================================================== */

.legal-page-section {
    background:
        var(--bsnet-light);
}


.legal-index {
    position:
        sticky;

    top:
        125px;

    padding:
        30px;

    background:
        var(--bsnet-navy);

    border-radius:
        var(--bsnet-radius);
}


.legal-index h2 {
    margin:
        8px 0 25px;

    color:
        #ffffff;

    font-size:
        1.55rem;

    font-weight:
        750;
}


.legal-index nav {
    display:
        flex;

    flex-direction:
        column;
}


.legal-index nav a {
    padding:
        11px 0;

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

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

    font-size:
        0.75rem;

    text-decoration:
        none;

    transition:
        color 0.2s ease;
}


.legal-index nav a:hover {
    color:
        #ffffff;
}



/* ==========================================================
   DOCUMENT CONTENT
========================================================== */

.legal-document {
    padding:
        48px;

    background:
        #ffffff;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);
}


.legal-document > section {
    scroll-margin-top:
        130px;

    padding:
        0 0 44px;

    margin:
        0 0 44px;

    border-bottom:
        1px solid var(--bsnet-gray-light);
}


.legal-document > section:last-of-type {
    margin-bottom:
        30px;
}


.legal-number {
    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--bsnet-blue);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.legal-document h2 {
    margin-bottom:
        22px;

    color:
        var(--bsnet-navy);

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

    font-weight:
        750;

    letter-spacing:
        -0.03em;
}


.legal-document p,
.legal-document li {
    color:
        var(--bsnet-gray);

    font-size:
        0.86rem;

    line-height:
        1.8;
}


.legal-document ul {
    padding-left:
        20px;

    margin:
        20px 0;
}


.legal-document li {
    margin-bottom:
        7px;
}



/* ==========================================================
   PLACEHOLDER
========================================================== */

.legal-placeholder-box {
    display:
        grid;

    grid-template-columns:
        38px 1fr;

    gap:
        15px;

    margin-top:
        25px;

    padding:
        20px;

    background:
        #fff8e8;

    border:
        1px solid #f1dfad;

    border-radius:
        8px;
}


.legal-placeholder-box > i {
    color:
        #8b6508;

    font-size:
        1.2rem;
}


.legal-placeholder-box strong {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #5f4809;

    font-size:
        0.76rem;
}


.legal-placeholder-box p {
    margin:
        0;

    color:
        #79621c;

    font-size:
        0.73rem;

    line-height:
        1.6;
}



/* ==========================================================
   CONTACT
========================================================== */

.legal-contact-line {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        5px 0 20px;

    padding:
        12px 16px;

    background:
        var(--bsnet-light);

    border-radius:
        7px;
}


.legal-contact-line i {
    color:
        var(--bsnet-blue);
}


.legal-contact-line a {
    color:
        var(--bsnet-navy);

    font-size:
        0.84rem;

    font-weight:
        750;

    text-decoration:
        none;
}


.legal-contact-card {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    max-width:
        440px;

    margin-top:
        24px;

    padding:
        20px;

    background:
        var(--bsnet-light);

    border-radius:
        8px;
}


.legal-contact-card > div:first-child {
    display:
        grid;

    width:
        44px;

    height:
        44px;

    place-items:
        center;

    color:
        var(--bsnet-blue);

    background:
        #ffffff;

    border-radius:
        7px;

    font-size:
        1.15rem;
}


.legal-contact-card span {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--bsnet-gray);

    font-size:
        0.6rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;
}


.legal-contact-card a {
    color:
        var(--bsnet-navy);

    font-size:
        0.85rem;

    font-weight:
        750;

    text-decoration:
        none;
}



/* ==========================================================
   VERSION
========================================================== */

.legal-update-note {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.legal-update-note > i {
    color:
        var(--bsnet-blue);

    font-size:
        1.2rem;
}


.legal-update-note span {
    display:
        block;

    color:
        var(--bsnet-gray);

    font-size:
        0.6rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;
}


.legal-update-note strong {
    color:
        var(--bsnet-navy);

    font-size:
        0.82rem;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .legal-index {
        position:
            static;
    }

}


@media (max-width: 575px) {

    .legal-document {
        padding:
            28px 22px;
    }


    .legal-development-box {
        grid-template-columns:
            1fr;
    }


    .legal-placeholder-box {
        grid-template-columns:
            1fr;
    }

}

/* ==========================================================
   ERROR 404
========================================================== */

.error-page-section {
    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    padding:
        170px 0 100px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--bsnet-navy) 0%,
            #092a49 100%
        );
}


.error-page-section::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.06) 1px,
            transparent 1px
        );

    background-size:
        40px 40px;
}


.error-page-section .container {
    position: relative;

    z-index: 2;
}



/* ==========================================================
   CONTENT
========================================================== */

.error-page-code {
    display: block;

    margin-bottom:
        12px;

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

    font-size:
        clamp(8rem, 18vw, 14rem);

    font-weight:
        900;

    line-height:
        0.7;

    letter-spacing:
        -0.08em;
}


.error-page-content h1 {
    max-width:
        780px;

    margin:
        15px 0 25px;

    color:
        #ffffff;

    font-size:
        clamp(2.8rem, 5vw, 5rem);

    font-weight:
        750;

    line-height:
        1.02;

    letter-spacing:
        -0.05em;
}


.error-page-content h1 span {
    display:
        block;

    color:
        var(--bsnet-cyan);
}


.error-page-content p {
    max-width:
        650px;

    margin-bottom:
        10px;

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

    font-size:
        0.95rem;

    line-height:
        1.75;
}


.error-page-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        32px;
}



/* ==========================================================
   NETWORK VISUAL
========================================================== */

.error-page-visual {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


.error-network {
    position:
        relative;

    width:
        360px;

    height:
        360px;
}


.error-network-center {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        3;

    display:
        grid;

    width:
        110px;

    height:
        110px;

    place-items:
        center;

    color:
        #ffffff;

    background:
        rgba(0,163,224,0.16);

    border:
        1px solid rgba(0,163,224,0.55);

    border-radius:
        50%;

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

    box-shadow:
        0 0 50px rgba(0,163,224,0.16);
}


.error-network-center i {
    font-size:
        2.6rem;
}


.error-node {
    position:
        absolute;

    z-index:
        2;

    width:
        25px;

    height:
        25px;

    background:
        var(--bsnet-cyan);

    border:
        6px solid rgba(255,255,255,0.15);

    border-radius:
        50%;
}


.error-node-1 {
    top: 20px;

    left: 168px;
}


.error-node-2 {
    top: 168px;

    right: 20px;
}


.error-node-3 {
    bottom: 20px;

    left: 168px;
}


.error-node-4 {
    top: 168px;

    left: 20px;
}


.error-line {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        140px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(0,163,224,0.60),
            rgba(255,255,255,0.15)
        );

    transform-origin:
        left center;
}


.error-line-1 {
    transform:
        rotate(-90deg);
}


.error-line-2 {
    transform:
        rotate(0deg);
}


.error-line-3 {
    transform:
        rotate(90deg);
}


.error-line-4 {
    transform:
        rotate(180deg);
}


.error-visual-label {
    color:
        rgba(255,255,255,0.45);

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;
}



/* ==========================================================
   ERROR NAVIGATION
========================================================== */

.error-navigation-section {
    background:
        var(--bsnet-light);
}


.error-navigation-card {
    display:
        flex;

    flex-direction:
        column;

    height:
        100%;

    min-height:
        270px;

    padding:
        30px;

    color:
        var(--bsnet-navy);

    background:
        #ffffff;

    border:
        1px solid var(--bsnet-gray-light);

    border-radius:
        var(--bsnet-radius);

    text-decoration:
        none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.error-navigation-card:hover {
    transform:
        translateY(-5px);

    color:
        var(--bsnet-navy);

    border-color:
        rgba(0,103,201,0.25);

    box-shadow:
        var(--bsnet-shadow);
}


.error-navigation-card > i {
    display:
        grid;

    width:
        48px;

    height:
        48px;

    place-items:
        center;

    margin-bottom:
        22px;

    color:
        var(--bsnet-blue);

    background:
        rgba(0,103,201,0.07);

    border-radius:
        8px;

    font-size:
        1.25rem;
}


.error-navigation-card h3 {
    margin-bottom:
        10px;

    font-size:
        1.15rem;

    font-weight:
        750;
}


.error-navigation-card p {
    color:
        var(--bsnet-gray);

    font-size:
        0.8rem;

    line-height:
        1.65;
}


.error-navigation-card > span {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        auto;

    color:
        var(--bsnet-blue);

    font-size:
        0.75rem;

    font-weight:
        750;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .error-page-section {
        min-height:
            auto;

        padding:
            150px 0 90px;
    }


    .error-page-visual {
        margin-top:
            25px;
    }

}


@media (max-width: 575px) {

    .error-page-code {
        font-size:
            7rem;
    }


    .error-network {
        width:
            280px;

        height:
            280px;
    }


    .error-network-center {
        width:
            90px;

        height:
            90px;
    }


    .error-line {
        width:
            105px;
    }


    .error-node-1 {
        top:
            15px;

        left:
            128px;
    }


    .error-node-2 {
        top:
            128px;

        right:
            15px;
    }


    .error-node-3 {
        bottom:
            15px;

        left:
            128px;
    }


    .error-node-4 {
        top:
            128px;

        left:
            15px;
    }

}

/* ==========================================================
   NOSOTROS - TRAYECTORIA
========================================================== */

.company-history-section {
    background: var(--bsnet-light);
}

.company-history-section h2 {
    margin-bottom: 24px;
    color: var(--bsnet-navy);
    font-size: clamp(2.2rem, 4vw, 3.7rem);
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.company-history-section p {
    color: var(--bsnet-gray);
    line-height: 1.75;
}

.company-history-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.company-history-card {
    min-height: 280px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid var(--bsnet-gray-light);
    border-radius: var(--bsnet-radius);
}

.company-history-year {
    display: block;
    margin-bottom: 28px;
    color: var(--bsnet-blue);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.company-history-card h3 {
    margin-bottom: 14px;
    color: var(--bsnet-navy);
    font-size: 1.1rem;
    font-weight: 750;
}

.company-history-card p {
    margin: 0;
    color: var(--bsnet-gray);
    font-size: 0.8rem;
    line-height: 1.65;
}


/* ==========================================================
   NOSOTROS - CERTIFICACIONES
========================================================== */

.company-certifications-section {
    background: #ffffff;
}

.company-certification-card {
    height: 100%;
    padding: 30px;
    background: var(--bsnet-light);
    border: 1px solid var(--bsnet-gray-light);
    border-radius: var(--bsnet-radius);
}

.company-certification-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    margin-bottom: 22px;
    color: var(--bsnet-blue);
    background: #ffffff;
    border-radius: 9px;
    font-size: 1.25rem;
}

.company-certification-card > span {
    display: block;
    margin-bottom: 9px;
    color: var(--bsnet-blue);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.company-certification-card h3 {
    margin-bottom: 13px;
    color: var(--bsnet-navy);
    font-size: 1.05rem;
    font-weight: 750;
}

.company-certification-card p {
    margin: 0;
    color: var(--bsnet-gray);
    font-size: 0.78rem;
    line-height: 1.65;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .company-history-grid {
        grid-template-columns: 1fr;
    }

    .company-history-card {
        min-height: auto;
    }

}

@media (max-width: 575px) {

    .company-history-card,
    .company-certification-card {
        padding: 24px;
    }

}

/* ==========================================================
   CONTACTO - DATOS CORPORATIVOS
========================================================== */

.contact-direct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
}


.contact-direct-item {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 88px;

    padding: 16px;

    color: var(--bsnet-navy);

    background: var(--bsnet-light);

    border: 1px solid var(--bsnet-gray-light);

    border-radius: 9px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


a.contact-direct-item:hover {
    transform: translateY(-2px);

    color: var(--bsnet-navy);

    border-color: rgba(0, 103, 201, 0.25);

    box-shadow: 0 8px 20px rgba(0, 25, 50, 0.06);
}


.contact-direct-item-icon {
    flex: 0 0 auto;

    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    color: var(--bsnet-blue);

    background: #ffffff;

    border-radius: 8px;

    font-size: 1.1rem;
}


.contact-direct-item span {
    display: block;

    margin-bottom: 3px;

    color: var(--bsnet-gray);

    font-size: 0.57rem;

    font-weight: 800;

    letter-spacing: 0.07em;
}


.contact-direct-item strong {
    display: block;

    color: var(--bsnet-navy);

    font-size: 0.77rem;

    font-weight: 750;

    word-break: break-word;
}


.contact-direct-item small {
    display: block;

    margin-top: 2px;

    color: var(--bsnet-gray);

    font-size: 0.67rem;

    line-height: 1.4;
}


/* ==========================================================
   CONTACTO RÁPIDO
========================================================== */

.contact-quick-box {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 36px;

    padding: 28px 32px;

    background: #ffffff;

    border: 1px solid var(--bsnet-gray-light);

    border-radius: var(--bsnet-radius);
}


.contact-quick-content {
    display: flex;

    align-items: center;

    gap: 20px;
}


.contact-quick-icon {
    flex: 0 0 auto;

    display: grid;

    width: 54px;
    height: 54px;

    place-items: center;

    color: var(--bsnet-blue);

    background: var(--bsnet-light);

    border-radius: 10px;

    font-size: 1.45rem;
}


.contact-quick-content span {
    display: block;

    margin-bottom: 5px;

    color: var(--bsnet-blue);

    font-size: 0.6rem;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.contact-quick-content h3 {
    margin-bottom: 5px;

    color: var(--bsnet-navy);

    font-size: 1rem;

    font-weight: 750;
}


.contact-quick-content p {
    max-width: 650px;

    margin: 0;

    color: var(--bsnet-gray);

    font-size: 0.76rem;

    line-height: 1.55;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199px) {

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

}


@media (max-width: 767px) {

    .contact-quick-box {
        flex-direction: column;

        align-items: stretch;
    }


    .contact-quick-box > .btn {
        width: 100%;
    }

}


@media (max-width: 575px) {

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


    .contact-quick-content {
        align-items: flex-start;
    }


    .contact-quick-box {
        padding: 24px;
    }

}

/* ==========================================================
   FOOTER - DATOS CORPORATIVOS 2026
========================================================== */

.footer-brand {
    display: inline-block;
    margin-bottom: 22px;
}


.footer-logo {
    width: auto;
    max-width: 165px;
    height: 42px;
    object-fit: contain;
}


.footer-description {
    max-width: 420px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
    line-height: 1.7;
}


.footer-provider-note {
    max-width: 420px;
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.7rem;
    line-height: 1.65;
}


/* ==========================================================
   FOOTER HEADINGS
========================================================== */

.footer-heading {
    margin-bottom: 21px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 750;
}


/* ==========================================================
   FOOTER LINKS
========================================================== */

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}


.footer-links li {
    margin-bottom: 9px;
}


.footer-links a {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.73rem;
    text-decoration: none;
    transition: color 0.2s ease;
}


.footer-links a:hover {
    color: #ffffff;
}


/* ==========================================================
   SOCIAL
========================================================== */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}


.footer-social a {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;

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

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

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

    border-radius: 7px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.footer-social a:hover {
    transform: translateY(-2px);

    color: #ffffff;

    background: rgba(0, 163, 224, 0.12);

    border-color: rgba(0, 163, 224, 0.40);
}


/* ==========================================================
   CONTACT LIST
========================================================== */

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.footer-contact-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
}


.footer-contact-item > i {
    margin-top: 2px;
    color: var(--bsnet-cyan);
    font-size: 0.8rem;
}


.footer-contact-item span {
    display: block;
    margin-bottom: 2px;

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

    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.07em;
}


.footer-contact-item p,
.footer-contact-item a {
    margin: 0;

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

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


.footer-contact-item a {
    text-decoration: none;
}


.footer-contact-item a:hover {
    color: #ffffff;
}


/* ==========================================================
   CORPORATE ROW
========================================================== */

.footer-corporate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 50px;
    padding: 24px 0;

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


.footer-corporate-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.footer-corporate-row strong {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.7rem;
}


.footer-corporate-row span {
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.62rem;
}


.footer-corporate-row p {
    max-width: 530px;
    margin: 0;

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

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

    text-align: right;
}


/* ==========================================================
   LEGAL
========================================================== */

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 25px 0 30px;
}


.footer-legal p {
    margin: 0;

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

    font-size: 0.62rem;
}


.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}


.footer-legal-links a {
    color: rgba(255, 255, 255, 0.45);

    font-size: 0.62rem;

    text-decoration: none;
}


.footer-legal-links a:hover {
    color: #ffffff;
}


/* ==========================================================
   FOOTER RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .footer-corporate-row {
        flex-direction: column;
        align-items: flex-start;
    }


    .footer-corporate-row p {
        text-align: left;
    }

}


@media (max-width: 575px) {

    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
    }


    .footer-corporate-row {
        margin-top: 35px;
    }

}

/* ==========================================================
   BSNET FOOTER - CORRECCIÓN DEFINITIVA
   Este bloque debe permanecer al FINAL de bsnet.css
========================================================== */

.bsnet-footer {
    position: relative;

    width: 100%;

    padding: 70px 0 0;

    color: #ffffff;

    background: var(--bsnet-navy) !important;

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


/* ==========================================================
   LOGO Y DESCRIPCIÓN
========================================================== */

.bsnet-footer .footer-brand {
    display: inline-block;

    margin-bottom: 22px;

    text-decoration: none;
}


.bsnet-footer .footer-logo {
    display: block;

    width: 170px !important;

    max-width: 100%;

    height: auto !important;

    object-fit: contain;
}


.bsnet-footer .footer-description {
    max-width: 420px;

    margin: 0 0 14px;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 0.8rem;

    line-height: 1.7;
}


.bsnet-footer .footer-provider-note {
    max-width: 420px;

    margin: 0;

    color: rgba(255, 255, 255, 0.45) !important;

    font-size: 0.7rem;

    line-height: 1.65;
}


/* ==========================================================
   TÍTULOS
========================================================== */

.bsnet-footer .footer-heading {
    margin: 0 0 21px;

    color: #ffffff !important;

    font-size: 0.78rem;

    font-weight: 750;
}


/* ==========================================================
   LINKS
========================================================== */

.bsnet-footer .footer-links {
    margin: 0;

    padding: 0;

    list-style: none;
}


.bsnet-footer .footer-links li {
    margin-bottom: 9px;
}


.bsnet-footer .footer-links a {
    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 0.73rem;

    text-decoration: none;

    transition: color 0.2s ease;
}


.bsnet-footer .footer-links a:hover {
    color: #ffffff !important;
}


/* ==========================================================
   REDES SOCIALES
========================================================== */

.bsnet-footer .footer-social {
    display: flex;

    flex-direction: row !important;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;
}


.bsnet-footer .footer-social a {
    display: grid;

    width: 38px;

    height: 38px;

    place-items: center;

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

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

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

    border-radius: 7px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.bsnet-footer .footer-social a:hover {
    transform: translateY(-2px);

    color: #ffffff !important;

    background: rgba(0, 163, 224, 0.16);

    border-color: rgba(0, 163, 224, 0.40);
}


/* ==========================================================
   CONTACTO
========================================================== */

.bsnet-footer .footer-contact-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.bsnet-footer .footer-contact-item {
    display: grid;

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

    gap: 10px;

    align-items: start;
}


.bsnet-footer .footer-contact-item > i {
    margin-top: 2px;

    color: var(--bsnet-cyan) !important;

    font-size: 0.82rem;
}


.bsnet-footer .footer-contact-item span {
    display: block;

    margin-bottom: 2px;

    color: rgba(255, 255, 255, 0.40) !important;

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.07em;
}


.bsnet-footer .footer-contact-item p,
.bsnet-footer .footer-contact-item a {
    display: block;

    margin: 0;

    color: rgba(255, 255, 255, 0.70) !important;

    font-size: 0.7rem;

    line-height: 1.5;
}


.bsnet-footer .footer-contact-item a {
    text-decoration: none;
}


.bsnet-footer .footer-contact-item a:hover {
    color: #ffffff !important;
}


/* ==========================================================
   INFORMACIÓN CORPORATIVA
========================================================== */

.bsnet-footer .footer-corporate-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 50px;

    padding: 24px 0;

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

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


.bsnet-footer .footer-corporate-row > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.bsnet-footer .footer-corporate-row strong {
    color: rgba(255, 255, 255, 0.82) !important;

    font-size: 0.7rem;
}


.bsnet-footer .footer-corporate-row span {
    color: rgba(255, 255, 255, 0.42) !important;

    font-size: 0.62rem;
}


.bsnet-footer .footer-corporate-row p {
    max-width: 530px;

    margin: 0;

    color: rgba(255, 255, 255, 0.44) !important;

    font-size: 0.66rem;

    line-height: 1.55;

    text-align: right;
}


/* ==========================================================
   LEGAL
========================================================== */

.bsnet-footer .footer-legal {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 25px 0 30px;
}


.bsnet-footer .footer-legal p {
    margin: 0;

    color: rgba(255, 255, 255, 0.38) !important;

    font-size: 0.62rem;
}


.bsnet-footer .footer-legal-links {
    display: flex;

    flex-direction: row !important;

    flex-wrap: wrap;

    gap: 20px;
}


.bsnet-footer .footer-legal-links a {
    color: rgba(255, 255, 255, 0.48) !important;

    font-size: 0.62rem;

    text-decoration: none;
}


.bsnet-footer .footer-legal-links a:hover {
    color: #ffffff !important;
}


/* ==========================================================
   BOOTSTRAP ROW
========================================================== */

.bsnet-footer > .container > .row {
    align-items: flex-start;
}


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

@media (max-width: 991px) {

    .bsnet-footer {
        padding-top: 55px;
    }


    .bsnet-footer .footer-corporate-row {
        flex-direction: column;

        align-items: flex-start;
    }


    .bsnet-footer .footer-corporate-row p {
        max-width: 100%;

        text-align: left;
    }

}


/* ==========================================================
   RESPONSIVE MÓVIL
========================================================== */

@media (max-width: 575px) {

    .bsnet-footer {
        padding-top: 45px;
    }


    .bsnet-footer .footer-logo {
        width: 155px !important;
    }


    .bsnet-footer .footer-corporate-row {
        margin-top: 35px;

        gap: 18px;
    }


    .bsnet-footer .footer-legal {
        flex-direction: column;

        align-items: flex-start;
    }


    .bsnet-footer .footer-legal-links {
        gap: 14px;
    }

}
/* ==========================================================
   BSNET PICTURE / WEBP
   Mantiene el layout existente al usar <picture>.
========================================================== */

.bsnet-picture {
    display: contents;
}


/* ==========================================================
   BSNET CURATED PHOTO OVERRIDES
   Fotografías reales seleccionadas para producción.
========================================================== */

.hero-background {
    background-image: url("../img/curadas/rack-hero.jpg");
    background-image: image-set(
        url("../img/curadas/rack-hero.webp") type("image/webp"),
        url("../img/curadas/rack-hero.jpg") type("image/jpeg")
    );
    background-position: center center;
}

.service-hero-network {
    background-image: url("../img/curadas/rack-network-close.jpg");
    background-image: image-set(
        url("../img/curadas/rack-network-close.webp") type("image/webp"),
        url("../img/curadas/rack-network-close.jpg") type("image/jpeg")
    );
    background-position: center center;
}