:root {
   --sb-green: #007f24;
   --sb-green-dark: #005f1b;
   --sb-black: #111827;
   --sb-gray: #5f6b76;
   --sb-soft: #f5f7f4;
   --sb-white: #fff;
 }

 ::selection {
   background-color: var(--sb-green);
   color: var(--sb-white);
 }

 ::-moz-selection {
   background-color: var(--sb-green);
   color: var(--sb-white);
 }

 * {
   box-sizing: border-box
 }

 body {
   overflow-x: hidden;
 }

 html {
   scroll-behavior: smooth
 }

 body {
   font-family: 'Poppins', sans-serif;
   color: var(--sb-black);
   background: #fff
 }

 a {
   text-decoration: none
 }

 .text-white-75 {
   color: rgba(255, 255, 255, .82)
 }

 .section-padding {
   padding: 42px 0
 }

 .soft-bg {
   background: var(--sb-soft)
 }

 .sb-navbar {
   background: rgba(255, 255, 255, .95);
   backdrop-filter: blur(16px);
   box-shadow: 0 12px 36px rgba(15, 23, 42, .08);
   padding: 14px 0
 }

 .navbar-brand {
   display: inline-flex;
   align-items: center;
   padding: 0;
   line-height: 1;
 }

 .navbar-brand-logo {
   height: 75px;
   width: auto;
   max-width: 220px;
   object-fit: contain;
   display: block;
 }

 .nav-link {
   font-weight: 650;
   color: #1f2937 !important;
   margin: 0 6px
 }

 .nav-link:hover {
   color: var(--sb-green) !important
 }

 .nav-item.dropdown {
   position: relative;
 }

 .dropdown-menu {
   position: absolute;
   border-radius: 16px;
   border: 1px solid rgba(17, 24, 39, .08);
   box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
   padding: 10px 8px;
   margin-top: 12px;
 }

 .dropdown-item {
   border-radius: 10px;
   padding: 10px 12px;
   color: #1f2937;
   font-weight: 500;
 }

 .dropdown-item.active,
 .dropdown-item:active {
   background-color: var(--sb-green) !important;
   color: #ffffff !important;
 }

 .dropdown-item:hover,
 .dropdown-item:focus {
   background: rgba(0, 127, 36, .08);
   color: var(--sb-green);
 }

 @media(max-width:991px) {

   .sb-navbar+.hero-section,
   .sb-navbar+.hero-abrasivos,
   .sb-navbar+.hero-corte-ux,
   .sb-navbar+.landing-hero-ux,
   .sb-navbar+.hero-mro,
   .sb-navbar+.hero-filtracion,
   .sb-navbar+main {
     padding-top: 72px;
   }

   .sb-navbar {
     padding: 8px 0;
   }

   .navbar-brand-logo {
     height: 52px;
     max-width: 175px;
   }

   .navbar-toggler {
     padding: 7px 9px;
     border-color: rgba(17, 24, 39, .2);
   }

   .navbar-collapse {
     margin-top: 8px;
     padding: 8px 0 4px;
   }

   .navbar-nav {
     align-items: stretch !important;
   }

   .navbar-nav .nav-link {
     margin: 0;
     padding: 11px 4px;
   }

   .navbar-nav .btn-sb {
     display: block;
     margin-top: 8px;
     text-align: center;
   }

   .dropdown-menu {
     position: static !important;
     background-color: rgba(245, 247, 244, .98);
     border: none;
     box-shadow: inset 0 4px 12px rgba(0, 0, 0, .05);
     padding: 8px 0;
     margin-top: 8px;
   }

   .dropdown-item {
     border-radius: 0;
     padding: 12px 24px;
     font-size: .95rem;
   }
 }

 .btn-sb {
   background: var(--sb-green);
   color: #fff;
   border-radius: 999px;
   padding: 12px 26px;
   font-weight: 700;
   border: none;
   box-shadow: 0 12px 28px rgba(0, 127, 36, .22)
 }

 .btn-sb:hover {
   background: var(--sb-green-dark);
   color: #fff;
   transform: translateY(-2px)
 }

 .hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
 }

 .hero-actions .hero-btn {
   min-height: 48px;
   padding: 11px 23px;
   border-radius: 999px;
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.35;
 }

 .hero-actions .hero-btn-whatsapp {
   background: #fff;
   border: 1px solid #e1e5e2;
   color: var(--sb-green);
   box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
 }

 .hero-actions .hero-btn-whatsapp:hover {
   background: #f4faf5;
   border-color: #c8dfcd;
   color: var(--sb-green-dark);
   transform: translateY(-2px);
 }

 .hero-actions .hero-btn-whatsapp i {
   font-size: 1.2rem;
 }

 .hero-section {
   position: relative;
   overflow: hidden;
   background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .34)), url('../assets/images/HERO_MAQUINAS.jpg') center center / cover no-repeat;
 }

 .hero-section>* {
   position: relative;
   z-index: 1;
 }

 .hero-section .row.min-vh-100 {
   min-height: 72vh !important;
 }

 .hero-section .display-3 {
   font-size: clamp(2.2rem, 4vw, 3.4rem);
   line-height: 1.08;
   max-width: 650px;
 }

 .hero-section .lead {
   font-size: .98rem;
   line-height: 1.7;
   max-width: 620px;
 }

 .hero-section .hero-metrics {
   gap: 12px;
   margin-top: 22px;
 }

 .hero-section .hero-metrics div {
   padding: 14px 16px;
   min-width: 136px;
 }

 .hero-section .btn-sb {
   padding: 10px 22px;
 }

 .hero-section .col-lg-5 {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 72px;
 }

 .hero-lead-card {
   background: rgba(255, 255, 255, .94);
   border-radius: 22px;
   padding: 18px 18px 16px;
   box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
   border: 1px solid rgba(255, 255, 255, .2);
   backdrop-filter: blur(12px);
   margin-top: 30px;
   width: min(100%, 400px);
 }

 .hero-lead-header {
   margin-bottom: 14px;
 }

 .hero-lead-header h3 {
   margin-top: 10px;
   margin-bottom: 0;
   font-size: clamp(1.35rem, 1.8vw, 1.8rem);
   font-weight: 800;
   line-height: 1.15;
   color: var(--sb-black);
 }

 .hero-lead-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .hero-lead-form label {
   display: block;
   margin-bottom: 5px;
   font-size: .73rem;
   font-weight: 700;
   color: #334155;
 }

 .hero-lead-form input,
 .hero-lead-form textarea {
   width: 100%;
   border: 1px solid #dfe6ea;
   border-radius: 12px;
   background: #fff;
   color: var(--sb-black);
   padding: 10px 12px;
   font-size: .9rem;
   transition: border-color .2s ease, box-shadow .2s ease;
 }

 .hero-lead-form input:focus,
 .hero-lead-form textarea:focus {
   border-color: var(--sb-green);
   box-shadow: 0 0 0 .2rem rgba(0, 127, 36, .12);
   outline: none;
 }

 .hero-lead-form textarea {
   resize: vertical;
   min-height: 82px;
 }

 .eyebrow,
 .section-label {
   display: inline-flex;
   gap: 12px;
   align-items: center;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-weight: 800;
   color: var(--sb-green);
   font-size: .85rem
 }

 .eyebrow {
   color: #d7ffe0;
   background: rgba(0, 127, 36, .28);
   border: 1px solid rgba(255, 255, 255, .18);
   padding: 10px 14px;
   border-radius: 999px;
   margin-bottom: 18px
 }

 .section-label:after,
 .eyebrow:after {
   content: '';
   display: block;
   width: 44px;
   height: 3px;
   background: currentColor;
   border-radius: 3px
 }

 .section-label.light {
   color: var(--sb-green)
 }

 .section-title {
   font-weight: 800;
   font-size: clamp(1.7rem, 2.6vw, 2.5rem);
   line-height: 1.15;
   margin: 10px 0 14px
 }

 .section-title span {
   color: var(--sb-green)
 }

 .section-text {
   color: var(--sb-gray);
   line-height: 1.7;
   font-size: .98rem;
   margin-bottom: .9rem
 }

 .hero-metrics {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: 34px
 }

 .hero-metrics div {
   padding: 18px 22px;
   border-radius: 22px;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .18);
   backdrop-filter: blur(10px);
   color: #fff;
   min-width: 155px
 }

 .hero-metrics strong {
   display: block;
   font-size: 1.55rem
 }

 .hero-metrics span {
   color: rgba(255, 255, 255, .75);
   font-size: .86rem
 }

 .image-card,
 .side-photo {
   min-height: 320px;
   height: clamp(300px, 42vw, 400px);
   border-radius: 24px;
   background-size: cover;
   background-position: center;
   box-shadow: 0 20px 55px rgba(17, 24, 39, .14)
 }

 .about-layout {
   display: flex;
   flex-wrap: wrap;
   gap: 1.25rem;
   align-items: flex-start;
 }

 .about-layout>.col-lg-7,
 .about-layout>.col-lg-5 {
   display: flex;
   flex-direction: column;
 }

 .about-side {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 100%;
 }

 .about-image-wrap {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
 }

 @media (min-width: 992px) {
   .about-layout {
     flex-wrap: nowrap;
   }

   .about-layout>.col-lg-7 {
     flex: 0 0 58%;
     max-width: 58%;
   }

   .about-layout>.col-lg-5 {
     flex: 0 0 40%;
     max-width: 40%;
   }
 }

 .about-photo-image {
   width: 100%;
   max-width: 100%;
   aspect-ratio: 4 / 3;
   height: auto;
   max-height: 360px;
   object-fit: cover;
   object-position: center;
   border-radius: 24px;
   display: block;
   box-shadow: 0 18px 45px rgba(17, 24, 39, .14);
 }

 .about-content {
   max-width: 620px;
   margin-left: 0;
 }

 .about-story-shell {
   display: grid;
   grid-template-columns: minmax(0, 1.25fr) minmax(260px, .8fr);
   gap: 32px;
   align-items: center;
 }

 .about-story-copy {
   width: 100%;
 }

 .about-story-mobile {
   display: none;
 }

 .about-story-visual {
   width: 100%;
 }

 .about-image-wrap {
   display: flex;
   justify-content: center;
   width: 100%;
 }

 .about-story-carousel {
   margin-top: 26px;
   overflow: hidden;
   position: relative;
 }

 .about-story-track {
   display: flex;
   width: max-content;
   gap: 18px;
   animation: aboutStorySlide 20s linear infinite;
 }

 .about-story-card {
   flex: 0 0 260px;
   min-height: 132px;
   padding: 18px 20px;
   border-radius: 20px;
   background: #fff;
   border: 1px solid rgba(17, 24, 39, .06);
   box-shadow: 0 12px 24px rgba(17, 24, 39, .07);
 }

 .about-story-card i {
   color: var(--sb-green);
   font-size: 1.5rem;
   display: inline-flex;
   margin-bottom: 10px;
 }

 .about-story-card strong {
   display: block;
   margin-bottom: 8px;
   font-size: 1rem;
   line-height: 1.3;
 }

 .about-story-card span {
   color: var(--sb-gray);
   font-size: .85rem;
   line-height: 1.5;
 }

 @keyframes aboutStorySlide {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 .about-highlights .mini-card {
   min-height: 112px;
 }

 @media (min-width: 992px) {
   .about-layout {
     justify-content: space-between;
   }

   .about-side {
     margin-left: auto;
     max-width: 500px;
   }
 }

 .services-photo {
   background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&w=900&q=80');
   min-height: 260px;
   margin-top: 26px
 }

 .mini-card {
   height: 100%;
   padding: 18px;
   border-radius: 20px;
   background: #fff;
   border: 1px solid rgba(17, 24, 39, .06);
   box-shadow: 0 10px 30px rgba(17, 24, 39, .06)
 }

 .mini-card i {
   color: var(--sb-green);
   font-size: 1.5rem
 }

 .mini-card strong {
   display: block;
   margin-top: 8px
 }

 .mini-card span {
   font-size: .87rem;
   color: var(--sb-gray)
 }

 .service-card {
   height: 100%;
   padding: 32px;
   border-radius: 26px;
   background: rgba(255, 255, 255, .84);
   box-shadow: 0 15px 48px rgba(17, 24, 39, .08);
   border: 1px solid rgba(17, 24, 39, .06);
   transition: .3s
 }

 .service-card.small-service-card {
   padding: 18px 20px;
   border-radius: 20px;
   background: rgba(255, 255, 255, .96);
   box-shadow: 0 10px 28px rgba(17, 24, 39, .06);
   border: 1px solid rgba(17, 24, 39, .07);
   min-width: 260px;
   max-width: 280px;
 }

 .service-card:hover,
 .product-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 70px rgba(17, 24, 39, .14)
 }

 .service-card i {
   font-size: 2.8rem;
   color: var(--sb-green);
   display: block;
   margin-bottom: 22px
 }

 .service-card h3,
 .product-card h3,
 .adv-card h3 {
   font-size: 1.05rem;
   text-transform: uppercase;
   font-weight: 800;
   line-height: 1.35
 }

 .service-card p,
 .product-card p,
 .adv-card p {
   color: var(--sb-gray);
   line-height: 1.75;
   font-size: .94rem
 }

 .products-section {
   background: linear-gradient(180deg, #fff 0%, #f9faf8 100%)
 }

 .product-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(220px, 1fr));
   justify-items: center;
   gap: 20px
 }

 .services-carousel {
   overflow: hidden;
   position: relative;
   padding: 8px 0;
 }

 .carousel-track {
   display: flex;
   gap: 18px;
   animation: slideServices 12s linear infinite;
 }

 .service-card.small-service-card h3 {
   font-size: .95rem;
 }

 .service-card.small-service-card p {
   font-size: .87rem;
   line-height: 1.6;
 }

 @keyframes slideServices {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 .product-card {
   display: flex;
   flex-direction: column;
   color: inherit;
   text-decoration: none;
   background: #fff;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 12px 36px rgba(17, 24, 39, .08);
   border: 1px solid rgba(17, 24, 39, .06);
   transition: .3s;
   height: 100%
 }

 .product-card-body {
   padding: 18px 18px 10px
 }

 .product-card-actions {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 10px;
   padding: 0 18px 18px;
   margin-top: auto
 }

 .product-card-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 10px 12px;
   border-radius: 12px;
   font-size: .78rem;
   font-weight: 700;
   line-height: 1.2;
   transition: .2s ease;
 }

 .product-card-btn--primary {
   background: var(--sb-green);
   color: #fff;
   box-shadow: 0 8px 18px rgba(0, 127, 36, .18)
 }

 .product-card-btn--primary:hover {
   background: var(--sb-green-dark);
   color: #fff
 }

 .product-card-btn--secondary {
   background: #edf6ef;
   color: var(--sb-green-dark);
   border: 1px solid rgba(0, 127, 36, .14)
 }

 .product-card-btn--secondary:hover {
   background: #e1f3e3;
   color: var(--sb-green-dark)
 }

 .product-card i {
   display: inline-flex;
   width: 38px;
   height: 38px;
   border-radius: 10px;
   align-items: center;
   justify-content: center;
   background: rgba(0, 127, 36, .12);
   color: var(--sb-green);
   font-size: 1.2rem;
   margin-bottom: 12px
 }

 .product-img {
   width: 100%;
   height: 150px;
   object-fit: cover;
   object-position: center;
   display: block;
 }

 @media(max-width:575px) {
   .product-card-actions {
     grid-template-columns: 1fr;
   }
 }

 .img-cutting {
   background-image: url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=700&q=80')
 }

 .img-abrasives {
   background-image: url('https://images.unsplash.com/photo-1581092919535-7146ff1a590b?auto=format&fit=crop&w=700&q=80')
 }

 .img-measure {
   background-image: url('https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?auto=format&fit=crop&w=700&q=80')
 }

 .img-mro {
   background-image: url('https://images.unsplash.com/photo-1581092335397-9583eb92d232?auto=format&fit=crop&w=700&q=80')
 }

 .img-filtration {
   background-image: url('https://images.unsplash.com/photo-1519821172141-bb9ad1e5ab7b?auto=format&fit=crop&w=700&q=80')
 }

 .img-safety {
   background-image: url('https://images.unsplash.com/photo-1579154204601-01588f351e67?auto=format&fit=crop&w=700&q=80')
 }

 .img-consumables {
   background-image: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=700&q=80')
 }

 .img-lubes {
   background-image: url('https://images.unsplash.com/photo-1615900119312-2acd3a71f3aa?auto=format&fit=crop&w=700&q=80')
 }

 .img-production {
   background-image: url('https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=700&q=80')
 }

 .advantages-section {
   background: linear-gradient(135deg, rgba(0, 127, 36, .96), rgba(0, 74, 21, .96)), url('https://images.unsplash.com/photo-1581091870622-3c7d9a285dce?auto=format&fit=crop&w=1900&q=80') center/cover
 }

 .adv-card {
   height: 100%;
   padding: 28px;
   border-radius: 24px;
   background: rgba(255, 255, 255, .13);
   border: 1px solid rgba(255, 255, 255, .2);
   color: #fff
 }

 .adv-card i {
   font-size: 2rem;
   margin-bottom: 16px
 }

 .adv-card p {
   color: rgba(255, 255, 255, .78);
   margin-bottom: 0
 }

 .contact-list>div {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   margin-bottom: 22px
 }

 .contact-list i {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 127, 36, .12);
   color: var(--sb-green);
   font-size: 1.3rem;
   flex: 0 0 auto
 }

 .contact-list p {
   margin: 0;
   color: #344054
 }

 .contact-list a {
   color: #344054
 }

 .map-card {
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 18px 55px rgba(17, 24, 39, .14);
   border: 1px solid rgba(17, 24, 39, .08);
   position: relative;
   background: #f6f7f8;
 }

 /* Mexico map removed, no special iframe height needed now */

 .map-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
 }

 .map-image-card {
   min-height: 520px;
 }

 .map-image-card {
   position: relative;
 }

 .map-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 14px 18px;
   background: rgba(0, 0, 0, .5);
   color: #fff;
   font-size: .95rem;
   font-weight: 600;
 }

 .location-menu {
   margin-top: 32px;
   padding: 18px;
   border-radius: 24px;
   background: #fff;
   box-shadow: 0 18px 45px rgba(17, 24, 39, .08);
   border: 1px solid rgba(17, 24, 39, .08);
 }

 .location-menu.compact {
   padding: 16px;
 }

 .location-menu h3 {
   margin-bottom: 12px;
   font-size: 1rem;
 }

 .location-note {
   margin-bottom: 12px;
   color: var(--sb-gray);
   font-size: .9rem;
 }

 .location-menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 10px;
 }

 .location-menu li {}

 .location-menu a {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 12px 14px;
   border-radius: 16px;
   background: #f9fafb;
   color: #102a43;
   text-decoration: none;
   transition: .25s;
 }

 .location-menu a:hover {
   background: rgba(0, 127, 36, .08);
 }

 .location-menu strong {
   display: block;
   font-weight: 700;
   margin-bottom: 3px;
 }

 .location-menu span {
   color: var(--sb-gray);
   font-size: .85rem;
 }

 @media(max-width:991px) {
   .location-menu {
     margin-top: 22px;
   }

   .location-menu ul {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }

 @media(max-width:575px) {
   .location-menu ul {
     grid-template-columns: 1fr;
   }
 }

 .location-benefits {
   margin-top: 20px;
   background: var(--sb-green);
   color: #fff;
   border-radius: 0 0 22px 22px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   overflow: hidden
 }

 .location-benefits div {
   padding: 20px;
   text-align: center;
   border-right: 1px solid rgba(255, 255, 255, .18)
 }

 .location-benefits i {
   display: block;
   font-size: 1.45rem;
   margin-bottom: 8px
 }

 .location-benefits span {
   font-size: .85rem;
   font-weight: 700
 }

 .clients-section {
   background: linear-gradient(180deg, #f8fbf8 0%, #f2f6f2 100%);
   border-top: 1px solid rgba(17, 24, 39, .05);
   border-bottom: 1px solid rgba(17, 24, 39, .05);
 }

 .clients-logo-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
   align-items: center;
   margin-top: 24px;
   padding: 0 8px;
 }

 .client-logo-card {
   min-height: auto;
   border-radius: 0;
   background: transparent;
   border: 0;
   box-shadow: none;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   text-align: center;
 }

 .client-logo-card img {
   max-width: 100%;
   max-height: 50px;
   width: auto;
   height: auto;
   object-fit: contain;
   filter: none;
   opacity: 1;
   display: block;
   margin: 0 auto;
 }

 .stellantis-logo-card {
   justify-content: center;
 }

 .stellantis-logo-img {
   position: relative;
   left: 0px;
   flex-shrink: 0;
 }

 .contact-section {
   background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .86) 48%, rgba(255, 255, 255, .55)), url('https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?auto=format&fit=crop&w=1700&q=80') center/cover
 }

 .contact-list.big i {
   width: 58px;
   height: 58px;
   font-size: 1.65rem
 }

 .contact-list .whatsapp {
   background: #0cae4f;
   color: #fff
 }

 .contact-list .email {
   background: #0b5ea8;
   color: #fff
 }

 .contact-form {
   background: rgba(255, 255, 255, .94);
   border-radius: 22px;
   padding: 24px 28px;
   box-shadow: 0 14px 40px rgba(17, 24, 39, .12);
   border: 10px solid rgba(17, 24, 39, .08);
   width: 100%;
   max-width: 100%;
   margin-left: 0;
   margin-right: 0;
 }

 .form-control {
   border-radius: 12px;
   border: 1px solid #d8dee5;
   padding: 14px 16px
 }

 .form-control:focus {
   border-color: var(--sb-green);
   box-shadow: 0 0 0 .2rem rgba(0, 127, 36, .14)
 }

 /* SECTION: Cobertura Comercial */
 .map-interactive-card {
   width: 100%;
   aspect-ratio: 1.528;
   max-height: 480px;
   border-radius: 24px;
   border: 1px solid rgba(17, 24, 39, .08);
   background: #ffffff;
   overflow: visible;
   position: relative;
   transition: transform .35s ease, box-shadow .35s ease;
 }

 .map-interactive-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 28px 90px rgba(0, 0, 0, .16);
 }

 .map-background {
   position: absolute;
   inset: 0;
   background-image: url('../assets/images/mapa.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   filter: saturate(1.02) brightness(1);
   border-radius: 24px;
 }

 .map-overlay {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 24% 26%, rgba(0, 127, 36, .18), transparent 18%),
     radial-gradient(circle at 54% 46%, rgba(0, 127, 36, .14), transparent 22%),
     inset 0 0 0 1000px rgba(15, 23, 39, .24);
   transition: background .35s ease;
   pointer-events: none;
 }

 .pin-wrapper {
   position: absolute;
   top: var(--pin-top);
   left: var(--pin-left);
   transform: translate(-50%, -50%);
   z-index: 2;
 }

 .map-pin {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: 1.5px solid #fff;
   background: #008f28;
   cursor: pointer;
   position: relative;
   transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
   outline: none;
   display: block;
 }

 .map-pin::before {
   content: '';
   position: absolute;
   inset: -3px;
   border-radius: 50%;
   box-shadow: 0 0 0 0 rgba(0, 143, 40, .45);
   animation: map-pin-pulse 1.8s infinite;
 }

 .map-pin:hover,
 .map-pin.highlighted,
 .pin-wrapper.active .map-pin {
   transform: scale(1.4);
   box-shadow: 0 0 0 5px rgba(0, 143, 40, .3);
   background: #00aa30;
 }

 @keyframes map-pin-pulse {
   0% {
     transform: scale(0.9);
     opacity: .9;
   }

   70% {
     transform: scale(1.6);
     opacity: 0;
   }

   100% {
     transform: scale(1.7);
     opacity: 0;
   }
 }

 .pin-popup {
   position: absolute;
   left: 50%;
   top: -12px;
   transform: translate(-50%, -95%) scale(.95);
   width: min(260px, calc(100vw - 32px));
   max-width: 260px;
   background: #fff;
   border-radius: 22px;
   box-shadow: 0 28px 70px rgba(17, 24, 39, .16);
   opacity: 0;
   visibility: hidden;
   transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
   pointer-events: none;
   z-index: 20;
   overflow: visible;
 }

 .pin-wrapper:hover .pin-popup,
 .pin-wrapper.active .pin-popup {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, -100%) scale(1);
   pointer-events: auto;
 }

 /* Popup below pin for pins near the top of the map */
 .pin-wrapper.popup-down .pin-popup {
   top: auto;
   bottom: auto;
   top: calc(100% + 12px);
   transform: translate(-50%, 0) scale(.95);
 }

 .pin-wrapper.popup-down:hover .pin-popup,
 .pin-wrapper.popup-down.active .pin-popup {
   transform: translate(-50%, 0) scale(1);
 }

 .pin-wrapper.popup-down .pin-popup::after {
   bottom: auto;
   top: -10px;
   border-width: 0 10px 10px 10px;
   border-color: transparent transparent #fff transparent;
 }

 .pin-popup::after {
   content: '';
   position: absolute;
   left: 50%;
   bottom: -10px;
   transform: translateX(-50%);
   border-width: 10px 10px 0 10px;
   border-style: solid;
   border-color: #fff transparent transparent transparent;
 }

 .pin-popup-header {
   padding: 14px 14px 10px;
   border-bottom: 1px solid rgba(15, 23, 39, .08);
   overflow: hidden;
 }

 .pin-city {
   display: block;
   font-size: 1rem;
   font-weight: 800;
   color: #111827;
 }

 .pin-zone {
   display: block;
   font-size: .825rem;
   color: #4b5563;
   margin-top: 4px;
 }

 .pin-card-body {
   display: flex;
   gap: 10px;
   padding: 14px 14px 12px;
   align-items: flex-start;
   overflow: hidden;
 }

 .pin-card-body>div {
   min-width: 0;
   overflow: hidden;
 }

 .pin-card-body>div strong {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .pin-card-photo {
   width: 48px;
   height: 48px;
   min-width: 48px;
   max-width: 48px;
   min-height: 48px;
   max-height: 48px;
   flex-shrink: 0;
   border-radius: 12px;
   object-fit: cover;
   border: 1px solid rgba(17, 24, 39, .1);
   background: #eef2ff;
 }

 .pin-role {
   font-size: .8rem;
   margin: 2px 0 0;
   color: var(--sb-green);
   font-weight: 600;
 }

 .pin-contact {
   font-size: .775rem;
   margin: 3px 0 0;
   color: #4b5563;
   line-height: 1.3;
   word-break: break-all;
   overflow-wrap: anywhere;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .pin-contact-btn {
   width: calc(100% - 28px);
   margin: 0 14px 14px;
   text-align: center;
 }

 .coverage-panel {
   background: rgba(255, 255, 255, .96);
   border-radius: 20px;
   padding: 16px 18px;
   border: 1px solid rgba(17, 24, 39, .08);
   box-shadow: 0 18px 60px rgba(17, 24, 39, .1);
 }

 .coverage-panel-title {
   display: inline-flex;
   font-size: .78rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .2em;
   color: var(--sb-green);
   margin-bottom: 4px;
 }

 .coverage-panel-copy {
   color: #334155;
   line-height: 1.4;
   font-size: .84rem;
   margin-bottom: 10px;
 }

 .location-zone-card {
   width: 100%;
   text-align: left;
   padding: 8px 12px;
   border-radius: 14px;
   background: #fff;
   border: 1px solid rgba(17, 24, 39, .08);
   transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
   cursor: pointer;
 }

 .location-zone-card:hover,
 .location-zone-card.active {
   transform: translateY(-2px);
   border-color: rgba(0, 127, 36, .28);
   background: rgba(0, 127, 36, .06);
   box-shadow: 0 12px 28px rgba(0, 127, 36, .08);
 }

 .zone-title {
   font-size: .88rem;
   font-weight: 700;
   color: #111827;
 }

 .zone-subtitle {
   display: block;
   margin-top: 2px;
   font-size: .78rem;
   color: #475569;
   line-height: 1.3;
 }

 .map-interactive-card.zona-norte .map-overlay,
 .map-card.zona-norte .map-overlay {
   background: radial-gradient(circle at 31.7% 67.3%, rgba(0, 127, 36, .35), transparent 22%),
     inset 0 0 0 1000px rgba(15, 23, 39, .06);
 }

 .map-interactive-card.zona-noroeste .map-overlay,
 .map-card.zona-noroeste .map-overlay {
   background: radial-gradient(circle at 21.0% 61.5%, rgba(0, 127, 36, .35), transparent 20%),
     inset 0 0 0 1000px rgba(15, 23, 39, .06);
 }

 .map-interactive-card.zona-bajio .map-overlay,
 .map-card.zona-bajio .map-overlay {
   background: radial-gradient(circle at 29.4% 81.2%, rgba(0, 127, 36, .35), transparent 20%),
     inset 0 0 0 1000px rgba(15, 23, 39, .06);
 }

 .map-interactive-card.zona-centro .map-overlay,
 .map-card.zona-centro .map-overlay {
   background: radial-gradient(circle at 33.7% 87.2%, rgba(0, 127, 36, .35), transparent 20%),
     inset 0 0 0 1000px rgba(15, 23, 39, .06);
 }

 .map-interactive-card.zona-centro-sur .map-overlay,
 .map-card.zona-centro-sur .map-overlay {
   background: radial-gradient(circle at 34.8% 77.8%, rgba(0, 127, 36, .35), transparent 20%),
     inset 0 0 0 1000px rgba(15, 23, 39, .06);
 }

 .map-pin.highlighted {
   background: #00833b;
   box-shadow: 0 0 0 14px rgba(0, 127, 36, .18);
 }

 @media(max-width:767px) {
   .location-section .row {
     row-gap: 0 !important;
     --bs-gutter-y: 1rem !important;
   }

   .pin-popup {
     left: 16px;
     right: 16px;
     top: auto;
     bottom: 100%;
     transform: translateY(-14px) scale(.98);
     width: calc(100% - 32px);
   }

   .pin-popup::after {
     display: none;
   }

   .coverage-panel {
     margin-top: 0;
   }
 }

 .footer {
   background: #101617;
   color: #d1d5db;
   padding: 60px 0 24px
 }

 .footer h3 {
   color: #fff;
   font-weight: 800
 }

 .footer h4 {
   color: #fff;
   font-size: 1rem;
   font-weight: 800
 }

 .footer a {
   display: block;
   color: #d1d5db;
   margin-bottom: 8px
 }

 .footer a:hover {
   color: #fff
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .12);
   margin-top: 32px;
   padding-top: 20px;
   text-align: center;
   color: #94a3b8
 }

 .whatsapp-float {
   position: fixed;
   right: 22px;
   bottom: 92px;
   width: 54px;
   height: 54px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #1ec85b 0%, #0cae4f 100%);
   color: #fff;
   text-decoration: none;
   z-index: 998;
   box-shadow: 0 16px 34px rgba(12, 174, 79, .34);
   animation: whatsapp-float 2.6s ease-in-out infinite;
   transition: transform .25s ease, box-shadow .25s ease;
 }

 .whatsapp-float:hover {
   transform: translateY(-3px) scale(1.04);
   box-shadow: 0 18px 38px rgba(12, 174, 79, .44);
 }

 .whatsapp-float i {
   font-size: 1.7rem;
   line-height: 1;
 }

 @keyframes whatsapp-float {

   0%,
   100% {
     transform: translateY(0px);
   }

   50% {
     transform: translateY(-6px);
   }
 }

 .back-to-top {
   position: fixed;
   right: 22px;
   bottom: 22px;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 0;
   background: var(--sb-green);
   color: #fff;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 999;
   box-shadow: 0 12px 26px rgba(0, 127, 36, .3)
 }

 .back-to-top.show {
   display: flex
 }

 .reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: all .75s ease
 }

 .reveal.visible {
   opacity: 1;
   transform: none
 }

 @media(max-width:991px) {
   .about-story-shell {
     grid-template-columns: 1fr;
     gap: 22px;
   }

   .about-story-desktop {
     display: none;
   }

   .about-story-mobile {
     display: block;
   }

   .about-photo-image {
     max-height: 280px;
   }

   .section-padding {
     padding: 36px 0
   }

   .about-content {
     margin-left: 0;
     margin-right: auto;
   }

   .image-card,
   .side-photo {
     height: clamp(280px, 55vw, 360px);
   }

   .product-grid {
     grid-template-columns: repeat(2, minmax(200px, 1fr));
   }

   .service-card.small-service-card {
     min-width: 200px;
     max-width: 240px;
   }

   .location-benefits {
     grid-template-columns: repeat(2, 1fr)
   }

   .clients-logo-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 18px;
   }

   .hero-section {
     background-attachment: scroll
   }

   .min-vh-100 {
     min-height: 760px !important
   }
 }

 @media(max-width:575px) {
   .product-grid {
     grid-template-columns: 1fr
   }

   .services-highlight-row,
   .services-highlight-carousel {
     display: none !important;
   }

   .service-card.small-service-card {
     min-width: unset;
     max-width: 100%;
   }

   .hero-metrics {
     display: grid
   }

   .location-benefits {
     grid-template-columns: 1fr
   }

   .clients-logo-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 8px 14px;
     padding: 0;
   }

   .client-logo-card {
     min-height: 74px;
   }

   .client-logo-card img {
     max-width: 100%;
     max-height: 42px;
   }

   .contact-form {
     padding: 22px
   }

   .section-title {
     font-size: 2rem
   }
 }