:root{
    --yellow:#ffd400;
    --orange:#ff7500;
    --black:#090c11;
    --dark:#10141b;
    --white:#fff;
    --header-height:100px;
    --font-title:"Oswald",sans-serif;
    --font-body:"Roboto",sans-serif;
    --transition:.35s ease;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--dark);overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none;margin:0;padding:0}
button{font:inherit}

.site-header{
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    height:var(--header-height);
    background:transparent;
    transition:background var(--transition),height var(--transition),box-shadow var(--transition);
}
.site-header.scrolled{
    height:78px;
    background:rgba(9,12,17,.94);
    backdrop-filter:blur(14px);
    box-shadow:0 10px 35px rgba(0,0,0,.25);
}
.header-container{
    width:min(calc(100% - 80px),1540px);
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}
.header-logo img{width:220px}
.main-navigation{display:flex;align-items:center;gap:45px}
.navigation-list{display:flex;align-items:center;gap:34px}
.nav-link{
    position:relative;
    padding:15px 0;
    color:#fff;
    font-family:var(--font-title);
    font-weight:600;
    font-size:17px;
    text-transform:uppercase;
    white-space:nowrap;
}
.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:7px;
    width:0;
    height:3px;
    background:var(--yellow);
    transition:width var(--transition);
}
.nav-link:hover,.nav-link.active{color:var(--yellow)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.header-social{display:flex;gap:12px}
.header-social a{
    width:42px;height:42px;
    display:grid;place-items:center;
    color:#fff;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
}
.menu-toggle{display:none}

.hero-slider{position:relative;min-height:100svh;overflow:hidden;background:#090c11}
.hero-slide{
    position:absolute;
    inset:0;
    min-height:100svh;
    display:flex;
    align-items:center;
    background:center/cover no-repeat;
    opacity:0;
    visibility:hidden;
    transform:scale(1.04);
    transition:opacity .9s ease,visibility .9s ease,transform 7s ease;
}
.hero-slide.active{opacity:1;visibility:visible;transform:scale(1)}
.hero-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(90deg,rgba(5,8,13,.88),rgba(8,12,18,.62),rgba(7,10,15,.46)),
      linear-gradient(180deg,rgba(5,8,13,.5),rgba(5,8,13,.08),rgba(5,8,13,.55));
}
.hero-container{
    position:relative;
    z-index:2;
    width:min(calc(100% - 160px),1300px);
    margin:auto;
    padding-top:var(--header-height);
}
.hero-content{max-width:950px;margin:auto;text-align:center;color:#fff}
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
    font-family:var(--font-title);
    font-size:clamp(18px,1.6vw,26px);
    text-transform:uppercase;
}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";width:35px;height:2px;background:var(--yellow)}
.hero-content h1,.hero-content h2{
    margin:0;
    font-family:var(--font-title);
    font-size:clamp(62px,7vw,112px);
    line-height:1.04;
    font-weight:600;
    text-shadow:0 8px 35px rgba(0,0,0,.45);
}
.hero-content h1 span,.hero-content h2 span{display:block}
.hero-description{
    max-width:720px;
    margin:28px auto 0;
    color:rgba(255,255,255,.84);
    font-size:18px;
    line-height:1.7;
}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:38px}
.button{
    min-width:190px;
    min-height:64px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 30px;
    border:2px solid transparent;
    font-family:var(--font-title);
    font-weight:600;
    font-size:17px;
    text-transform:uppercase;
    transition:.3s ease;
}
.button:hover{transform:translateY(-4px)}
.button-primary{background:var(--orange);color:#fff}
.button-outline{border-color:rgba(255,255,255,.65);color:#fff}
.button-outline:hover{background:var(--yellow);border-color:var(--yellow);color:#090c11}

.slider-arrow{
    position:absolute;
    top:50%;
    z-index:5;
    width:72px;height:72px;
    display:grid;place-items:center;
    border:0;
    color:#fff;
    background:rgba(90,106,72,.55);
    transform:translateY(-50%);
    cursor:pointer;
}
.slider-arrow-prev{left:4%}
.slider-arrow-next{right:4%}
.slider-pagination{
    position:absolute;
    left:50%;
    bottom:35px;
    z-index:5;
    display:flex;
    gap:10px;
    transform:translateX(-50%);
}
.slider-dot{
    width:10px;height:10px;
    border:0;border-radius:50%;
    background:rgba(255,255,255,.45);
    cursor:pointer;
}
.slider-dot.active{width:32px;border-radius:20px;background:var(--yellow)}

.whatsapp-button{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:900;
    width:64px;height:64px;
    display:grid;place-items:center;
    color:#fff;
    background:#25d366;
    border:4px solid rgba(255,255,255,.85);
    border-radius:50%;
    font-size:31px;
}

.section-container{width:min(calc(100% - 80px),1280px);margin:auto}
.intro-section{padding:120px 0}
.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.section-eyebrow{color:var(--orange);font-family:var(--font-title);text-transform:uppercase;font-weight:600}
.intro-content h2{font-family:var(--font-title);font-size:clamp(42px,5vw,70px);line-height:1.1;margin:16px 0}
.intro-content p{color:#5f6672;font-size:17px;line-height:1.8}
.intro-statistics{display:grid;gap:15px}
.statistic-card{padding:28px 30px;background:#f5f6f8;border-left:5px solid var(--yellow)}
.statistic-card strong{display:block;font-family:var(--font-title);font-size:28px}
.statistic-card span{color:#6d737d}

.reveal-left,.reveal-right{opacity:0;transition:opacity .85s ease,transform .85s ease}
.reveal-left{transform:translateX(-65px)}
.reveal-right{transform:translateX(65px)}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:translateX(0)}

@media(max-width:1024px){
    :root{--header-height:82px}
    .header-container{width:calc(100% - 40px)}
    .header-logo img{width:170px}
    .menu-toggle{
        position:relative;
        z-index:1002;
        width:48px;height:48px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:6px;
        border:1px solid rgba(255,255,255,.2);
        background:rgba(255,255,255,.08);
        border-radius:6px;
    }
    .menu-toggle span{width:24px;height:2px;background:#fff;transition:.3s}
    .menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
    .menu-toggle.active span:nth-child(2){opacity:0}
    .menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
    .main-navigation{
        position:fixed;
        top:0;right:0;
        width:min(390px,88%);
        height:100svh;
        padding:120px 45px 50px;
        flex-direction:column;
        align-items:flex-start;
        background:rgba(9,12,17,.98);
        transform:translateX(105%);
        visibility:hidden;
        transition:.4s ease;
    }
    .main-navigation.active{transform:translateX(0);visibility:visible}
    .navigation-list{width:100%;flex-direction:column;align-items:flex-start;gap:0}
    .navigation-list li,.nav-link{width:100%}
    .nav-link{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1);white-space:normal}
    .hero-container{width:calc(100% - 100px)}
    .intro-grid{grid-template-columns:1fr;gap:45px}
}

@media(max-width:680px){
    .header-container{width:calc(100% - 28px)}
    .header-logo img{width:145px}
    .main-navigation{width:100%}
    .hero-container{width:calc(100% - 38px);padding-top:95px}
    .hero-content{text-align:left}
    .hero-eyebrow::after{display:none}
    .hero-content h1,.hero-content h2{font-size:clamp(48px,15vw,68px)}
    .hero-description{font-size:15px}
    .hero-actions{flex-direction:column;align-items:stretch}
    .button{width:100%;min-width:0;min-height:56px}
    .slider-arrow{display:none}
    .section-container{width:calc(100% - 36px)}
    .intro-section{padding:80px 0}
}

/* =========================================================
   SECCIÓN RESPALDO SACONICSA
========================================================= */

.support-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background: var(--white);
}

.support-container {
    width: min(calc(100% - 70px), 1500px);
    margin-inline: auto;

    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
    gap: 70px;
}


/* =========================================================
   IMAGEN
========================================================= */

.support-image-column {
    min-width: 0;
}

.support-image-wrapper {
    position: relative;

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

    overflow: hidden;
    border-radius: 4px;

    background: var(--dark);

    box-shadow: 0 25px 60px rgba(10, 15, 22, 0.14);
}

.support-main-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.support-image-wrapper:hover .support-main-image {
    transform: scale(1.04);
}

.support-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7, 10, 15, 0.02) 25%,
            rgba(7, 10, 15, 0.22) 62%,
            rgba(7, 10, 15, 0.88) 100%
        );
}

.support-image-logo {
    position: absolute;
    top: 42%;
    left: 0;

    width: 235px;
    padding: 14px 28px;

    background: rgba(10, 10, 10, 0.94);

    border-radius: 0 40px 40px 0;
}

.support-image-logo img {
    width: 175px;
}

.support-image-text {
    position: absolute;
    left: 70px;
    bottom: 80px;

    display: flex;
    align-items: flex-start;
    flex-direction: column;

    color: var(--white);
    font-family: var(--font-title);
    text-transform: uppercase;

    transform: rotate(-2deg);
}

.support-image-text span {
    margin-left: 5px;

    font-size: clamp(25px, 2vw, 38px);
    font-weight: 700;
    line-height: 1;
}

.support-image-text strong {
    color: #ffb342;

    font-size: clamp(58px, 5vw, 92px);
    font-weight: 700;
    line-height: 0.96;

    text-shadow:
        3px 3px 0 #fff,
        6px 6px 0 rgba(0, 0, 0, 0.45);
}

.support-image-text small {
    margin-top: 10px;
    margin-left: 5px;

    font-size: clamp(18px, 1.4vw, 26px);
    font-weight: 600;
}


/* =========================================================
   CONTENIDO
========================================================= */

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

    min-width: 0;
}

.support-heading {
    max-width: 840px;
}

.support-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;

    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.support-eyebrow::before {
    content: "";

    width: 40px;
    height: 3px;

    background: var(--yellow);
}

.support-heading h2 {
    max-width: 820px;
    margin: 0;

    color: #25272a;
    font-family: var(--font-title);
    font-size: clamp(48px, 4vw, 76px);
    font-weight: 600;
    line-height: 1.08;
}

.support-heading p {
    max-width: 920px;
    margin: 45px 0 0;

    color: #5f6268;
    font-family: var(--font-title);
    font-size: clamp(18px, 1.35vw, 25px);
    font-weight: 400;
    line-height: 1.85;
}


/* =========================================================
   TARJETAS
========================================================= */

.support-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;

    margin-top: 62px;
}

.support-card {
    position: relative;
    overflow: hidden;

    min-height: 390px;
    padding: 58px 58px 50px;

    color: var(--white);
    background: var(--orange);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.support-card::before {
    content: "";

    position: absolute;
    top: -90px;
    right: -90px;

    width: 210px;
    height: 210px;

    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    transition: transform 0.5s ease;
}

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

    box-shadow:
        0 22px 45px rgba(255, 117, 0, 0.24);
}

.support-card:hover::before {
    transform: scale(1.25);
}

.support-card-icon {
    position: relative;
    z-index: 1;

    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    margin-bottom: 30px;

    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;

    font-size: 34px;
}

.support-card h3 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(25px, 2vw, 34px);
    font-weight: 600;
    line-height: 1.28;
}

.support-card p {
    position: relative;
    z-index: 1;

    margin: 26px 0 0;

    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-title);
    font-size: clamp(18px, 1.4vw, 25px);
    line-height: 1.55;
}


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

@media (max-width: 1280px) {

    .support-container {
        width: min(calc(100% - 50px), 1300px);

        grid-template-columns: 0.9fr 1.1fr;
        gap: 48px;
    }

    .support-image-wrapper {
        min-height: 620px;
    }

    .support-image-text {
        left: 45px;
        bottom: 60px;
    }

    .support-card {
        min-height: 355px;
        padding: 46px 40px;
    }

}


@media (max-width: 1024px) {

    .support-section {
        padding: 90px 0;
    }

    .support-container {
        width: calc(100% - 50px);

        grid-template-columns: 1fr;
        gap: 55px;
    }

    .support-image-wrapper {
        min-height: 620px;
        max-height: 720px;
    }

    .support-content-column {
        justify-content: flex-start;
    }

    .support-heading {
        max-width: 100%;
    }

    .support-cards {
        margin-top: 45px;
    }

}


@media (max-width: 700px) {

    .support-section {
        padding: 70px 0;
    }

    .support-container {
        width: calc(100% - 32px);
        gap: 40px;
    }

    .support-image-wrapper {
        min-height: 520px;
    }

    .support-image-logo {
        top: 40%;
        width: 195px;
        padding: 12px 20px;
    }

    .support-image-logo img {
        width: 150px;
    }

    .support-image-text {
        left: 26px;
        right: 20px;
        bottom: 45px;
    }

    .support-image-text strong {
        font-size: 55px;
    }

    .support-heading h2 {
        font-size: 45px;
    }

    .support-heading p {
        margin-top: 28px;

        font-size: 18px;
        line-height: 1.7;
    }

    .support-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .support-card {
        min-height: auto;
        padding: 38px 30px;
    }

    .support-card-icon {
        width: 62px;
        height: 62px;

        font-size: 29px;
    }

}


@media (max-width: 430px) {

    .support-image-wrapper {
        min-height: 450px;
    }

    .support-image-text span {
        font-size: 22px;
    }

    .support-image-text strong {
        font-size: 46px;
    }

    .support-image-text small {
        font-size: 16px;
    }

    .support-heading h2 {
        font-size: 38px;
    }

}

/* =========================================================
   SECCIÓN SOLUCIONES EPP
========================================================= */

.epp-solutions-section {
    position: relative;
    overflow: hidden;

    padding: 0;

    background: #25292c;
}

.epp-solutions-container {
    width: 100%;
    min-height: 530px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    align-items: stretch;
}


/* =========================================================
   IMAGEN
========================================================= */

.epp-solutions-image {
    position: relative;
    overflow: hidden;

    min-height: 530px;
}

.epp-solutions-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.02) 50%,
            rgba(37, 41, 44, 0.22) 100%
        );

    pointer-events: none;
}

.epp-solutions-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.epp-solutions-image:hover img {
    transform: scale(1.045);
}


/* =========================================================
   CONTENIDO
========================================================= */

.epp-solutions-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    padding: 65px 65px 55px 58px;

    color: var(--white);
    background: #25292c;
}

.epp-solutions-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 13px;

    color: var(--orange);
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.epp-solutions-eyebrow::before {
    content: "";

    width: 32px;
    height: 3px;

    background: var(--orange);
}

.epp-solutions-content h2 {
    max-width: 760px;
    margin: 0;

    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(40px, 3.4vw, 64px);
    font-weight: 600;
    line-height: 1.08;
}

.epp-solutions-content p {
    max-width: 820px;
    margin: 42px 0 0;

    color: rgba(255, 255, 255, 0.94);
    font-family: var(--font-title);
    font-size: clamp(17px, 1.28vw, 23px);
    font-weight: 400;
    line-height: 1.85;
}

.epp-solutions-button {
    min-width: 198px;
    min-height: 67px;

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

    margin-top: 54px;
    padding: 16px 30px;

    color: var(--white);
    background: var(--orange);

    border: 2px solid var(--orange);
    border-radius: 3px;

    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;

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

.epp-solutions-button:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);

    transform: translateY(-4px);

    box-shadow:
        0 15px 30px rgba(255, 117, 0, 0.22);
}


/* =========================================================
   DETALLE DECORATIVO
========================================================= */

.epp-solutions-content::after {
    content: "";

    position: absolute;
    right: -80px;
    bottom: -110px;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;

    pointer-events: none;
}

.epp-solutions-content {
    position: relative;
    overflow: hidden;
}


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

@media (max-width: 1200px) {

    .epp-solutions-container {
        grid-template-columns: 0.95fr 1.05fr;
    }

    .epp-solutions-content {
        padding: 55px 45px;
    }

    .epp-solutions-content p {
        margin-top: 30px;
    }

    .epp-solutions-button {
        margin-top: 38px;
    }

}


@media (max-width: 900px) {

    .epp-solutions-container {
        grid-template-columns: 1fr;
    }

    .epp-solutions-image {
        min-height: 470px;
    }

    .epp-solutions-content {
        padding: 65px 50px;
    }

    .epp-solutions-content h2 {
        max-width: 780px;
    }

}


@media (max-width: 600px) {

    .epp-solutions-image {
        min-height: 340px;
    }

    .epp-solutions-content {
        padding: 52px 24px;
    }

    .epp-solutions-eyebrow {
        font-size: 14px;
    }

    .epp-solutions-content h2 {
        font-size: 38px;
    }

    .epp-solutions-content p {
        margin-top: 25px;

        font-size: 17px;
        line-height: 1.7;
    }

    .epp-solutions-button {
        width: 100%;
        min-width: 0;
        min-height: 58px;

        margin-top: 34px;
    }

}

/* =========================================================
   SECCIÓN MISIÓN
========================================================= */

.mission-section {
    position: relative;
    overflow: hidden;

    padding: 115px 0;

    background: #ffffff;
}

.mission-container {
    width: min(calc(100% - 80px), 1500px);
    margin-inline: auto;

    display: grid;
    grid-template-columns: minmax(380px, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 135px;
}


/* =========================================================
   BLOQUE VISUAL
========================================================= */

.mission-visual {
    min-width: 0;
}

.mission-card {
    position: relative;

    min-height: 585px;
    padding: 82px 82px 60px;

    background: #f6f6f6;
}

.mission-icon {
    width: 90px;
    height: 90px;

    display: grid;
    place-items: center;

    color: #2478ff;

    font-size: 58px;
}

.mission-card > p {
    max-width: 430px;
    margin: 65px 0 0;

    color: #60646b;
    font-family: var(--font-title);
    font-size: clamp(32px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.48;
}

.mission-experience {
    position: absolute;
    top: 85px;
    right: -88px;

    width: 335px;
    min-height: 150px;

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

    padding: 25px;

    color: var(--white);
    background: var(--orange);

    text-align: center;

    box-shadow: 0 18px 35px rgba(255, 117, 0, 0.2);
}

.mission-experience strong {
    display: block;

    font-family: var(--font-title);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.mission-experience span {
    display: block;
    margin-top: 22px;

    font-family: var(--font-title);
    font-size: 22px;
    line-height: 1.2;
}


/* =========================================================
   CONTENIDO
========================================================= */

.mission-content {
    min-width: 0;
}

.mission-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;

    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.mission-eyebrow::before {
    content: "";

    width: 38px;
    height: 3px;

    background: var(--yellow);
}

.mission-content h2 {
    max-width: 900px;
    margin: 0;

    color: #292b2e;
    font-family: var(--font-title);
    font-size: clamp(48px, 4vw, 74px);
    font-weight: 600;
    line-height: 1.12;
}

.mission-text {
    max-width: 930px;
    margin-top: 52px;
}

.mission-text p {
    margin: 0;

    color: #62666c;
    font-family: var(--font-title);
    font-size: clamp(18px, 1.35vw, 25px);
    font-weight: 400;
    line-height: 1.9;
}

.mission-text p + p {
    margin-top: 28px;
}


/* =========================================================
   DECORACIÓN SUTIL
========================================================= */

.mission-section::before {
    content: "";

    position: absolute;
    right: -170px;
    top: -170px;

    width: 390px;
    height: 390px;

    border: 1px solid rgba(0, 0, 0, 0.035);
    border-radius: 50%;

    pointer-events: none;
}


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

@media (max-width: 1250px) {

    .mission-container {
        width: min(calc(100% - 60px), 1250px);

        grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.15fr);
        gap: 90px;
    }

    .mission-card {
        min-height: 540px;
        padding: 70px 58px 55px;
    }

    .mission-experience {
        right: -60px;
        width: 280px;
    }

}


@media (max-width: 960px) {

    .mission-section {
        padding: 90px 0;
    }

    .mission-container {
        width: calc(100% - 50px);

        grid-template-columns: 1fr;
        gap: 70px;
    }

    .mission-visual {
        padding-right: 70px;
    }

    .mission-card {
        min-height: 500px;
    }

    .mission-experience {
        right: -70px;
    }

    .mission-content h2 {
        max-width: 820px;
    }

}


@media (max-width: 650px) {

    .mission-section {
        padding: 70px 0;
    }

    .mission-container {
        width: calc(100% - 32px);
        gap: 45px;
    }

    .mission-visual {
        padding-right: 0;
        padding-top: 90px;
    }

    .mission-card {
        min-height: auto;
        padding: 95px 30px 45px;
    }

    .mission-icon {
        width: 70px;
        height: 70px;

        font-size: 45px;
    }

    .mission-card > p {
        margin-top: 35px;

        font-size: 31px;
        line-height: 1.45;
    }

    .mission-experience {
        top: 0;
        right: 20px;
        left: 20px;

        width: auto;
        min-height: 118px;

        transform: translateY(-30%);
    }

    .mission-experience strong {
        font-size: 34px;
    }

    .mission-experience span {
        margin-top: 12px;
        font-size: 18px;
    }

    .mission-content h2 {
        font-size: 40px;
    }

    .mission-text {
        margin-top: 32px;
    }

    .mission-text p {
        font-size: 17px;
        line-height: 1.75;
    }

}
/*=========================================================
CTA FINAL
=========================================================*/

.cta-section{

    position:relative;
    overflow:hidden;

    padding:90px 0;

    background:linear-gradient(
        135deg,
        #ff7700 0%,
        #ff8b0f 100%
    );

}

.cta-section::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-250px;
    top:-280px;

    border-radius:50%;

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

}

.cta-section::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-180px;
    bottom:-180px;

    border-radius:50%;

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

}

.cta-container{

    position:relative;

    z-index:2;

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

    margin:auto;

    display:grid;

    grid-template-columns:1fr auto;

    align-items:center;

    gap:60px;

}

.cta-content h2{

    margin:0;

    color:#fff;

    font-family:var(--font-title);

    font-size:clamp(38px,3vw,64px);

    line-height:1.25;

    font-weight:600;

    max-width:920px;

}

.cta-button{

    display:flex;

    justify-content:flex-end;

}

.cta-button a{

    min-width:240px;

    min-height:72px;

    padding:18px 40px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:#20252d;

    border-radius:4px;

    font-family:var(--font-title);

    font-size:18px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

    transition:.35s;

}

.cta-button a:hover{

    background:#20252d;

    color:#fff;

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.25);

}

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

@media(max-width:992px){

.cta-container{

grid-template-columns:1fr;

text-align:center;

}

.cta-button{

justify-content:center;

}

.cta-content h2{

max-width:100%;

}

}

@media(max-width:600px){

.cta-section{

padding:70px 0;

}

.cta-container{

width:calc(100% - 32px);

gap:35px;

}

.cta-content h2{

font-size:38px;

line-height:1.3;

}

.cta-button a{

width:100%;

min-width:0;

}

}


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

.page-hero{

    position:relative;

    height:420px;

    overflow:hidden;

}

.page-hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.page-hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(10,16,22,.72);

    z-index:1;

}

.page-hero-content{

    position:relative;

    z-index:2;

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

    height:100%;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.page-subtitle{

    color:var(--yellow);

    font-family:var(--font-title);

    font-size:18px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.page-hero h1{

    color:#fff;

    font-family:var(--font-title);

    font-size:clamp(55px,6vw,95px);

    margin:0;

}

.breadcrumb{

    margin-top:18px;

    color:#fff;

    font-family:var(--font-title);

}

.breadcrumb a{

    color:#fff;

}

.breadcrumb span{

    margin:0 10px;

    opacity:.5;

}

.breadcrumb strong{

    color:var(--yellow);

}

/*=========================================================
ABOUT
=========================================================*/

.about-values{

padding:110px 0;

background:#fff;

}

.container{

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

margin:auto;

}

.section-heading{

text-align:center;

max-width:900px;

margin:auto auto 70px;

}

.section-heading span{

color:var(--orange);

font-family:var(--font-title);

text-transform:uppercase;

}

.section-heading h2{

font-size:clamp(45px,4vw,70px);

font-family:var(--font-title);

margin:15px 0;

color:#222;

}

.section-heading p{

font-size:19px;

line-height:1.8;

color:#666;

}

.about-grid{

display:grid;

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

gap:35px;

}

.about-card{

background:#fff;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

overflow:hidden;

}

.about-card:hover{

transform:translateY(-10px);

}

.about-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}

.about-card-image img {
    width: 100%;
    height: 100%;
    display: block;

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

    background: #ffffff;

    transform: none;
    filter: none;
}
.about-card:hover img{

transform:scale(1.05);

}

.about-content{

padding:35px;

}

.about-content h3{

font-family:var(--font-title);

font-size:36px;

margin-bottom:20px;

}

.about-content p{

line-height:1.9;

color:#666;

}

.about-content ul{

padding-left:20px;

line-height:2;

color:#666;

}

.about-content li::marker{

color:var(--orange);

}

/* =========================================================
   EXPERIENCIA EN SEGURIDAD INDUSTRIAL
========================================================= */

.about-experience-section {
    position: relative;
    overflow: hidden;

    background: #f7f7f7;
}

.about-experience-container {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    align-items: stretch;
}


/* =========================================================
   CONTENIDO
========================================================= */

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

    min-width: 0;
    padding: 80px max(60px, calc((100vw - 1400px) / 2)) 80px
        max(60px, calc((100vw - 1400px) / 2));

    background: #f7f7f7;
}

.about-experience-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: fit-content;
    margin-bottom: 12px;

    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.about-experience-eyebrow::before {
    content: "";

    width: 30px;
    height: 3px;

    background: var(--yellow);
}

.about-experience-content h2 {
    max-width: 720px;
    margin: 0;

    color: #202327;
    font-family: var(--font-title);
    font-size: clamp(38px, 3.2vw, 58px);
    font-weight: 600;
    line-height: 1.12;
}

.about-experience-content > p {
    max-width: 730px;
    margin: 35px 0 0;

    color: #666a70;
    font-family: var(--font-title);
    font-size: clamp(17px, 1.25vw, 22px);
    line-height: 1.8;
}

.about-experience-content > p + p {
    margin-top: 4px;
}


/* =========================================================
   LISTADO Y LÍNEAS
========================================================= */

.about-experience-list {
    max-width: 730px;
    margin-top: 35px;
}

.experience-item + .experience-item {
    margin-top: 30px;
}

.experience-item-header {
    margin-bottom: 12px;
}

.experience-item-header span {
    color: #151719;
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 600;
}

.experience-progress {
    position: relative;

    width: 100%;
    height: 6px;

    overflow: hidden;
    background: #dfdfdf;
    border-radius: 20px;
}

.experience-progress span {
    display: block;
    height: 100%;

    background: var(--yellow);
    border-radius: inherit;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* La línea se anima cuando la columna entra en pantalla */
.about-experience-content.visible .experience-progress span {
    transform: scaleX(1);
}


/* =========================================================
   IMAGEN
========================================================= */

.about-experience-image {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    background: #ececec;
}

.about-experience-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(247, 247, 247, 0.06) 0%,
        rgba(0, 0, 0, 0.02) 100%
    );

    pointer-events: none;
}

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

    object-fit: cover;
    object-position: center;

    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-experience-image:hover img {
    transform: scale(1.04);
}


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

@media (max-width: 1180px) {

    .about-experience-container {
        grid-template-columns: 1fr 0.9fr;
    }

    .about-experience-content {
        padding: 70px 50px;
    }

}


@media (max-width: 900px) {

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

    .about-experience-content {
        padding: 70px 40px;
    }

    .about-experience-image {
        min-height: 500px;
    }

}


@media (max-width: 600px) {

    .about-experience-content {
        padding: 55px 24px;
    }

    .about-experience-content h2 {
        font-size: 38px;
    }

    .about-experience-content > p {
        margin-top: 25px;
        font-size: 17px;
        line-height: 1.7;
    }

    .about-experience-list {
        margin-top: 30px;
    }

    .experience-item + .experience-item {
        margin-top: 24px;
    }

    .about-experience-image {
        min-height: 360px;
    }

}

/*=========================================================
CTA EXPERTOS
=========================================================*/

.security-experts-cta{

    position:relative;

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

    min-height:520px;

    padding:120px 20px;

    overflow:hidden;

    background-image:url("../img/home-cta.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    background-attachment:fixed; /* Opcional */
}

/* Oscurece la imagen */

.security-experts-overlay{

    position:absolute;
    inset:0;

    background:rgba(18,22,28,.70);

    z-index:1;

}

/* Contenido */

.security-experts-content{

    position:relative;
    z-index:2;

    width:min(100%,900px);

    text-align:center;

}

.security-experts-eyebrow{

    display:block;

    margin-bottom:18px;

    color:var(--yellow);

    font-family:var(--font-title);

    font-size:18px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}

.security-experts-content h2{

    margin-bottom:45px;

    color:#fff;

    font-family:var(--font-title);

    font-size:clamp(42px,5vw,72px);

    font-weight:700;

    line-height:1.15;

    text-transform:uppercase;

}

.security-experts-button{

    display:inline-flex;

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

    padding:18px 45px;

    background:var(--orange);

    color:#fff;

    border-radius:4px;

    text-decoration:none;

    font-family:var(--font-title);

    font-size:18px;

    font-weight:600;

    text-transform:uppercase;

    transition:.35s ease;

}

.security-experts-button:hover{

    background:var(--yellow);

    color:#111;

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.30);

}

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

@media (max-width: 900px) {

    .security-experts-cta {
        min-height: 440px;
        background-attachment: scroll;
    }

    .security-experts-content h2 {
        font-size: clamp(46px, 8vw, 68px);
    }

}


@media (max-width: 600px) {

    .security-experts-cta {
        min-height: 400px;
        padding: 65px 20px;
    }

    .security-experts-eyebrow {
        font-size: 13px;
        line-height: 1.5;
    }

    .security-experts-eyebrow::before,
    .security-experts-eyebrow::after {
        width: 20px;
    }

    .security-experts-content h2 {
        font-size: 42px;
        line-height: 1.16;
    }

    .security-experts-button {
        width: 100%;
        min-width: 0;
        min-height: 58px;

        margin-top: 38px;
    }

}


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

.internal-hero{

    position:relative;

    height:500px;

    overflow:hidden;

    display:flex;

    align-items:center;

}

.internal-hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1);

    transition:transform 8s ease;

}

.internal-hero:hover .internal-hero-image{

    transform:scale(1.06);

}

.internal-hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(8,12,18,.82),
        rgba(8,12,18,.55),
        rgba(8,12,18,.72)
    );

    z-index:1;

}

.internal-hero-content{

    position:relative;

    z-index:2;

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

    margin:auto;

    padding-top:90px;

}

.internal-hero-subtitle{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    color:var(--yellow);

    font-family:var(--font-title);

    font-size:17px;

    text-transform:uppercase;

    font-weight:600;

}

.internal-hero-subtitle::before{

    content:"";

    width:35px;

    height:3px;

    background:var(--yellow);

}

.internal-hero h1{

    max-width:1000px;

    margin:0;

    color:#fff;

    font-family:var(--font-title);

    font-size:clamp(45px,6vw,75px);


    font-weight:700;

    line-height:1.05;



}

.internal-hero p{

    max-width:650px;

    margin-top:28px;

    color:rgba(255,255,255,.88);

    font-size:20px;

    line-height:1.8;

}

.internal-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:38px;

    font-family:var(--font-title);

    font-size:16px;

}

.internal-breadcrumb a{

    color:#fff;

    transition:.3s;

}

.internal-breadcrumb a:hover{

    color:var(--yellow);

}

.internal-breadcrumb span{

    color:#8f959a;

}

.internal-breadcrumb strong{

    color:var(--yellow);

}


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

@media(max-width:900px){

.internal-hero{

height:430px;

}

.internal-hero-content{

width:calc(100% - 40px);

}

.internal-hero h1{

font-size:58px;

}

.internal-hero p{

font-size:18px;

}

}

@media(max-width:600px){

.internal-hero{

height:360px;

}

.internal-hero-content{

width:calc(100% - 30px);

padding-top:60px;

}

.internal-hero h1{

font-size:42px;

}

.internal-hero p{

display:none;

}

.internal-breadcrumb{

margin-top:25px;

font-size:14px;

}

}



/*=========================================================
CATEGORÍAS
=========================================================*/

.categories-section{

padding:110px 0;

background:#fff;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:var(--orange);

font-family:var(--font-title);

text-transform:uppercase;

}

.section-title h2{

font-size:clamp(45px,4vw,68px);

font-family:var(--font-title);

margin-top:15px;

}

.categories-grid{

display:grid;

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

gap:30px;

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

margin:auto;

}

.category-card{

background:#fff;

overflow:hidden;

border-radius:5px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.4s;

}

.category-card:hover{

transform:translateY(-10px);

}

.category-image{

position:relative;

overflow:hidden;

}

.category-image img{

width:100%;

display:block;

transition:1s;

}

.category-card:hover img{

transform:scale(1.08);

}

.category-overlay{

position:absolute;

inset:0;

background:rgba(20,20,20,.45);

display:flex;

align-items:center;

justify-content:center;

gap:15px;

opacity:0;

transition:.4s;

}

.category-card:hover .category-overlay{

opacity:1;

}

.category-overlay a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

background:var(--orange);

border-radius:50%;

color:#fff;

font-size:20px;

transform:translateY(25px);

transition:.4s;

}

.category-card:hover .category-overlay a{

transform:translateY(0);

}

.category-overlay a:hover{

background:var(--yellow);

color:#111;

}

.category-content{

padding:28px;

position:relative;

}

.category-content::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:4px;

background:var(--orange);

transition:.4s;

}

.category-card:hover .category-content::after{

width:100%;

}

.category-content h3{

margin:0;

font-family:var(--font-title);

font-size:34px;

}

@media(max-width:1100px){

.categories-grid{

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

}

}

@media(max-width:700px){

.categories-grid{

grid-template-columns:1fr;

width:calc(100% - 32px);

}

}


/* =========================================================
   FORMULARIO DE CONTACTO
========================================================= */

.contact-form-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0 110px;

    background: #ffffff;
}

.contact-form-container {
    width: min(calc(100% - 40px), 780px);
    margin-inline: auto;
}


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

.contact-form-heading {
    margin-bottom: 55px;
    text-align: center;
}

.contact-form-heading span {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.contact-form-heading h2 {
    margin: 0;

    color: #202327;
    font-family: var(--font-title);
    font-size: clamp(42px, 4vw, 58px);
    font-weight: 600;
    line-height: 1.1;
}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-form {
    width: 100%;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.contact-field {
    position: relative;
}

.contact-field label {
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 2;

    color: #50545a;
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 600;

    pointer-events: none;

    transition:
        top 0.25s ease,
        font-size 0.25s ease,
        color 0.25s ease;
}

.contact-field input,
.contact-field textarea {
    width: 100%;

    color: #202327;
    background: #f6f6f6;

    border: 1px solid transparent;
    border-radius: 3px;
    outline: none;

    font-family: var(--font-body);
    font-size: 16px;

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-field input {
    height: 60px;
    padding: 27px 30px 10px;
}

.contact-field textarea {
    min-height: 200px;
    margin-top: 30px;
    padding: 45px 30px 20px;

    line-height: 1.65;
    resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: transparent;
}

.contact-field input:focus,
.contact-field textarea:focus {
    background: #ffffff;
    border-color: var(--orange);

    box-shadow: 0 10px 28px rgba(255, 117, 0, 0.1);
}

.contact-field input:focus + label,
.contact-field textarea:focus + label {
    color: var(--orange);
}


/* Mantener el label arriba al escribir */

.contact-field:focus-within label {
    top: 9px;
    color: var(--orange);
    font-size: 12px;
}

.contact-field-message label {
    top: 50px;
}

.contact-field-message:focus-within label {
    top: 38px;
}


/* =========================================================
   BOTÓN
========================================================= */

.contact-form-action {
    display: flex;
    justify-content: center;

    margin-top: 30px;
}

.contact-form-action button {
    min-width: 125px;
    min-height: 62px;

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

    padding: 16px 32px;

    color: var(--white);
    background: var(--orange);

    border: 2px solid var(--orange);
    border-radius: 3px;

    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;

    cursor: pointer;

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

.contact-form-action button:hover {
    color: var(--black);
    background: var(--yellow);
    border-color: var(--yellow);

    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(255, 117, 0, 0.2);
}


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

@media (max-width: 700px) {

    .contact-form-section {
        padding: 75px 0 85px;
    }

    .contact-form-container {
        width: calc(100% - 32px);
    }

    .contact-form-heading {
        margin-bottom: 40px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-field textarea {
        margin-top: 20px;
    }

    .contact-form-action button {
        width: 100%;
    }

}



/*=========================================================
CONTACTO + MAPA
=========================================================*/

.contact-information{

    position:relative;

    padding-top:90px;

}

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

.contact-information-card{

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

    margin:auto;

    background:#fff;

    border-radius:6px;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

    padding:55px 60px;

    display:grid;

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

    gap:50px;

    position:relative;

    z-index:5;

}

/*==============================
ITEM
==============================*/

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

}

.contact-info-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:50%;

    background:var(--orange);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    transition:.35s;

}

.contact-info-item:hover .contact-info-icon{

    transform:rotate(10deg) scale(1.08);

    background:var(--yellow);

    color:#111;

}

.contact-info-item span{

    display:block;

    color:#888;

    font-size:15px;

    margin-bottom:6px;

}

.contact-info-item h3{

    margin:0;

    font-family:var(--font-title);

    font-size:clamp(20px,1.6vw,26px);

    font-weight:600;

    line-height:1.4;

    color:#222;

    word-break:break-word;

}

/*==============================
MAPA
==============================*/

.contact-map{

    margin-top:-55px;

}

.contact-map iframe{

    width:100%;

    height:600px;

    border:none;

    display:block;

    filter:grayscale(.10);

}

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

@media(max-width:1100px){

.contact-information-card{

grid-template-columns:1fr;

gap:40px;

padding:45px;

}

.contact-map{

margin-top:0;

}

}

@media(max-width:700px){

.contact-information{

padding-top:60px;

}

.contact-information-card{

width:calc(100% - 30px);

padding:20px;

}

.contact-info-item{

flex-direction:column;

text-align:center;

align-items:center;

}

.contact-info-item h3{

font-size:26px;

}

.contact-map iframe{

height:450px;

}

}

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

.footer{
    background:#222629;
    color:#fff;
    padding-top:50px;
}
.footer-container{

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

    margin-inline:auto;

    display:grid;

    grid-template-columns:1.2fr .8fr .9fr 1fr;

    gap:45px;

}
.footer-logo{

    width:170px;

    margin-bottom:25px;

}

.footer h2,
.footer h3{

    font-size:25px;

    margin-bottom:18px;

}

.footer-info{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-info li{

    font-size:16px;

    line-height:1.55;

    margin-bottom:16px;

}

.footer-info i{

    color:var(--orange);

    font-size:22px;

    margin-top:6px;

}

.footer-info a{

    color:#fff;

    transition:.3s;

}

.footer-info a:hover{

    color:var(--orange);

}

.footer-hours{

    color:#d8d8d8;

    line-height:1.8;

    font-size:18px;

}

.footer-links{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    font-size:16px;

}

.footer-links a:hover{

    color:var(--orange);

    padding-left:8px;

}

.footer-map{

    overflow:hidden;

    border-radius:8px;

}

.footer-map iframe{

    height:180px;

}

.footer-map-btn{

    min-height:45px;

    font-size:15px;

}

.footer-map-btn:hover{

    background:var(--yellow);

    color:#111;

}

.footer-bottom{

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

    margin:35px auto 0;

    padding:22px 0;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}
.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:#2d3236;

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:var(--orange);

    transform:translateY(-4px);

}

.footer-bottom p{

    color:#bcbcbc;

    margin:0;

}

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

@media(max-width:700px){

    .footer-container{

        width:calc(100% - 32px);

        grid-template-columns:1fr;

        gap:35px;

    }

}

@media(max-width:700px){

.footer-container{

grid-template-columns:1fr;

width:calc(100% - 32px);

}

.footer-bottom{

flex-direction:column;

gap:20px;

text-align:center;

width:calc(100% - 32px);

}

}