/* Estilos movidos desde index.html (sept 2026) */
/* =============================================
           LAVADO Y LIMPIEZA — MODERN REDESIGN 2024
           Namespace: mf2_ para evitar conflictos
        ============================================= */
        :root {
            --mf2-aqua: #5a9a2a;
            --mf2-aqua-dark: #4a8a22;
            --mf2-aqua-deep: #3a6f17;
            --mf2-blue: #0a55b8;
            --mf2-blue-light: #1e7ae0;
            --mf2-navy: #0b2c5f;
            --mf2-white: #ffffff;
            --mf2-light: #f4faef;
            --mf2-gray: #f5f7fa;
            --mf2-text: #1e2d3d;
            --mf2-text-light: #5a7080;
            --mf2-gradient: linear-gradient(135deg, #4a8a22 0%, #0a55b8 100%);
            --mf2-gradient-light: linear-gradient(135deg, #eef6e6 0%, #dde9f8 100%);
            --mf2-shadow: 0 8px 32px rgba(74, 138, 34, 0.18);
            --mf2-shadow-blue: 0 8px 32px rgba(10, 85, 184, 0.18);
            --mf2-radius: 18px;
            --mf2-radius-sm: 10px;
            --mf2-font: 'Outfit', sans-serif;
            --mf2-font-body: 'Nunito', sans-serif;
        }

        * { box-sizing: border-box; }

        /* ── RESET COMPLETO: neutralizar estilos legacy del tema anterior ── */

        /* El body del tema antiguo mete padding-top por el header fijo */
        body.mf2-body {
            font-family: var(--mf2-font-body);
            color: var(--mf2-text);
            background: #fff;
            overflow-x: hidden;
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        /* Bootstrap y style.css estilizan el tag <nav> genérico */
        .mf2-navbar {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            border-radius: 0 !important;
            min-height: unset !important;
        }

        /* Bootstrap .navbar añade margin-bottom: 20px y bordes */
        nav.mf2-navbar,
        nav.mf2-navbar * {
            border-radius: 0;
        }

        /* El tema antiguo usa .page-wrapper con padding o margin top */
        .page-wrapper.mf2-body,
        .home-page.mf2-body,
        .page-style2.mf2-body {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        /* Resetear ul/li dentro de nuestro nav para no heredar Bootstrap */
        .mf2-nav-links,
        .mf2-nav-links li,
        .mf2-dropdown-menu,
        .mf2-dropdown-menu li {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: none;
            list-style: none !important;
            float: none !important;
        }

        /* Bootstrap pone display:block a los <a> dentro de <li> con padding propio */
        .mf2-nav-links > li > a,
        .mf2-dropdown-menu li a {
            padding: unset;
            line-height: unset;
            color: unset;
            display: unset;
        }

        /* El CSS antiguo puede meter un ::before o position en section/header */
        .mf2-topbar,
        .mf2-navbar,
        .mf2-slider,
        .mf2-stats,
        .mf2-about,
        .mf2-services,
        .mf2-process,
        .mf2-content-band,
        .mf2-cta,
        .mf2-why,
        .mf2-zones,
        .mf2-footer {
            position: relative;
        }

        /* Anular cualquier padding/margin heredado en secciones */
        section.mf2-services,
        section.mf2-about,
        section.mf2-process,
        section.mf2-why,
        section.mf2-zones,
        section.mf2-content-band,
        section.mf2-cta {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin: 0 !important;
        }

        /* Footer: anular .bg-dark del tema que mete padding extraño */
        footer.mf2-footer {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin: 0 !important;
            width: 100% !important;
        }

        /* ── BURBUJAS FLOTANTES GLOBALES ── */
        .mf2-bubbles-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 0; overflow: hidden;
        }
        .mf2-bubble {
            position: absolute;
            bottom: -120px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(90,154,42,0.18), rgba(90,154,42,0.04));
            border: 1px solid rgba(90,154,42,0.15);
            animation: mf2FloatUp linear infinite;
        }
        .mf2-bubble:nth-child(1)  { width:40px; height:40px; left:8%;  animation-duration:12s; animation-delay:0s; }
        .mf2-bubble:nth-child(2)  { width:20px; height:20px; left:20%; animation-duration:9s;  animation-delay:2s; }
        .mf2-bubble:nth-child(3)  { width:60px; height:60px; left:35%; animation-duration:15s; animation-delay:5s; }
        .mf2-bubble:nth-child(4)  { width:30px; height:30px; left:52%; animation-duration:11s; animation-delay:1s; }
        .mf2-bubble:nth-child(5)  { width:50px; height:50px; left:65%; animation-duration:13s; animation-delay:3s; }
        .mf2-bubble:nth-child(6)  { width:15px; height:15px; left:78%; animation-duration:8s;  animation-delay:6s; }
        .mf2-bubble:nth-child(7)  { width:45px; height:45px; left:90%; animation-duration:16s; animation-delay:0.5s; }
        .mf2-bubble:nth-child(8)  { width:25px; height:25px; left:42%; animation-duration:10s; animation-delay:4s; }
        .mf2-bubble:nth-child(9)  { width:35px; height:35px; left:15%; animation-duration:14s; animation-delay:7s; }
        .mf2-bubble:nth-child(10) { width:55px; height:55px; left:72%; animation-duration:12s; animation-delay:2.5s; }

        @keyframes mf2FloatUp {
            0%   { transform: translateY(0) scale(1); opacity: 0; }
            10%  { opacity: 1; }
            90%  { opacity: 0.6; }
            100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
        }

        /* ── TOP BAR ── */
        .mf2-topbar {
            background: var(--mf2-navy);
            padding: 8px 0;
            font-size: 13px;
            font-family: var(--mf2-font);
            position: relative; z-index: 1000;
        }
        .mf2-topbar-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 20px;
        }
        .mf2-topbar a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.2s; }
        .mf2-topbar a:hover { color: var(--mf2-aqua); }
        .mf2-topbar i { margin-right: 5px; color: var(--mf2-aqua); }
        .mf2-topbar-phones { display: flex; gap: 20px; flex-wrap: wrap; }
        .mf2-topbar-social { display: flex; gap: 14px; }
        .mf2-topbar-social a { font-size: 15px; }

        /* ── NAVBAR ── */
        nav.mf2-navbar {
            background: #fff !important;
            box-shadow: 0 2px 20px rgba(74,138,34,0.12) !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 999 !important;
            font-family: var(--mf2-font) !important;
            width: 100% !important;
            display: block !important;
            /* Anular Bootstrap .navbar */
            border: none !important;
            border-radius: 0 !important;
            min-height: unset !important;
            margin-bottom: 0 !important;
        }
        nav.mf2-navbar .mf2-navbar-inner {
            max-width: 1200px !important;
            margin: 0 auto !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 12px 20px !important;
            /* Anular bootstrap .container */
            width: 100% !important;
        }
        nav.mf2-navbar .mf2-logo img {
            height: 56px !important;
            width: auto !important;
            display: block !important;
            max-width: none !important;
        }
        nav.mf2-navbar .mf2-nav-links {
            display: flex !important;
            gap: 6px !important;
            align-items: center !important;
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
            float: none !important;
        }
        nav.mf2-navbar .mf2-nav-links > li {
            position: relative !important;
            display: block !important;
            float: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        nav.mf2-navbar .mf2-nav-links > li > a {
            display: flex !important;
            align-items: center !important;
            padding: 9px 14px !important;
            color: var(--mf2-navy) !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            text-decoration: none !important;
            border-radius: 8px !important;
            transition: all 0.2s !important;
            line-height: 1.4 !important;
            background: none !important;
        }
        nav.mf2-navbar .mf2-nav-links > li > a:hover,
        nav.mf2-navbar .mf2-nav-links > li > a.mf2-active {
            background: var(--mf2-gradient-light) !important;
            color: var(--mf2-aqua-dark) !important;
        }

        /* ── Dropdown ── */
        nav.mf2-navbar .mf2-dropdown { position: relative !important; }
        nav.mf2-navbar .mf2-dropdown-menu {
            display: none !important;
            position: absolute !important;
            top: 110% !important;
            left: 0 !important;
            background: #fff !important;
            border-radius: 14px !important;
            min-width: 210px !important;
            box-shadow: 0 12px 40px rgba(74,138,34,0.18) !important;
            padding: 8px 0 !important;
            z-index: 9999 !important;
            border: 1px solid rgba(90,154,42,0.15) !important;
            margin: 0 !important;
            float: none !important;
        }
        nav.mf2-navbar .mf2-dropdown-menu.mf2-sub-menu {
            top: 0 !important;
            left: 100% !important;
        }
        nav.mf2-navbar .mf2-dropdown:hover > .mf2-dropdown-menu {
            display: block !important;
        }
        nav.mf2-navbar .mf2-dropdown-menu li {
            position: relative !important;
            display: block !important;
            float: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        nav.mf2-navbar .mf2-dropdown-menu li a {
            display: block !important;
            padding: 9px 18px !important;
            color: var(--mf2-text) !important;
            font-size: 13.5px !important;
            font-weight: 500 !important;
            text-decoration: none !important;
            transition: all 0.2s !important;
            line-height: 1.4 !important;
            background: none !important;
            border-radius: 0 !important;
        }
        nav.mf2-navbar .mf2-dropdown-menu li a:hover {
            background: var(--mf2-gradient-light) !important;
            color: var(--mf2-aqua-dark) !important;
            padding-left: 24px !important;
        }
        nav.mf2-navbar .mf2-dropdown-menu li > ul { display: none !important; }
        nav.mf2-navbar .mf2-dropdown-menu li:hover > ul { display: block !important; }

        nav.mf2-navbar .mf2-btn-wa {
            background: #25d366 !important;
            color: #fff !important;
            border-radius: 50px !important;
            padding: 9px 18px !important;
            font-weight: 700 !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
        }
        nav.mf2-navbar .mf2-btn-wa:hover { background: #1fa855 !important; transform: translateY(-1px); }
        nav.mf2-navbar .mf2-btn-desinf {
            background: var(--mf2-gradient) !important;
            color: #fff !important;
            border-radius: 50px !important;
            padding: 9px 18px !important;
            font-weight: 700 !important;
        }
        nav.mf2-navbar .mf2-btn-desinf:hover { opacity: 0.9 !important; transform: translateY(-1px); }

        /* Mobile toggle */
        .mf2-menu-toggle {
            display: none !important;
            background: none !important;
            border: 2px solid var(--mf2-aqua) !important;
            border-radius: 8px !important;
            padding: 8px 12px !important;
            cursor: pointer !important;
            color: var(--mf2-aqua) !important;
            font-size: 20px !important;
        }

        @keyframes mf2FadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

        /* ── HERO SLIDER ── */
        .mf2-slider {
            position: relative; overflow: hidden;
            height: 82vh; min-height: 520px; max-height: 820px;
        }
        .mf2-slides { display: flex; height: 100%; transition: transform 0.8s cubic-bezier(0.77,0,0.175,1); }
        .mf2-slide {
            min-width: 100%; height: 100%; position: relative; overflow: hidden;
        }
        .mf2-slide-bg {
            position: absolute; inset: 0;
            background-size: cover; background-position: center;
            transform: scale(1.08);
            transition: transform 6s ease-out;
        }
        .mf2-slide.mf2-active .mf2-slide-bg { transform: scale(1); }
        .mf2-slide-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(105deg, rgba(58,111,23,0.82) 0%, rgba(11,44,95,0.60) 60%, rgba(0,0,0,0.20) 100%);
        }
        .mf2-slide-content {
            position: absolute; inset: 0;
            display: flex; align-items: center;
            padding: 0 8%;
        }
        .mf2-slide-text {
            color: #fff; max-width: 620px;
            opacity: 0; transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.23,1,0.32,1) 0.3s;
        }
        .mf2-slide.mf2-active .mf2-slide-text { opacity: 1; transform: translateY(0); }
        .mf2-slide-tag {
            display: inline-block;
            background: rgba(90,154,42,0.25);
            border: 1px solid rgba(90,154,42,0.6);
            backdrop-filter: blur(6px);
            color: #d7ecc4; font-size: 13px; font-weight: 700;
            padding: 5px 14px; border-radius: 50px;
            letter-spacing: 1.5px; text-transform: uppercase;
            margin-bottom: 16px; font-family: var(--mf2-font);
        }
        .mf2-slide-h1 {
            font-family: var(--mf2-font);
            font-size: clamp(26px, 4vw, 52px);
            font-weight: 800; line-height: 1.15;
            margin-bottom: 14px;
            text-shadow: 0 2px 16px rgba(0,0,0,0.3);
        }
        .mf2-slide-h1 span { color: #b5dd8f; }
        .mf2-slide-p {
            font-size: clamp(14px, 1.5vw, 17px);
            opacity: 0.88; margin-bottom: 28px; line-height: 1.65;
            max-width: 520px;
        }
        .mf2-slide-btns { display: flex; gap: 14px; flex-wrap: wrap; }
        .mf2-slide-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 13px 28px; border-radius: 50px;
            font-family: var(--mf2-font); font-weight: 700; font-size: 14px;
            text-decoration: none; transition: all 0.25s;
            border: none; cursor: pointer;
        }
        .mf2-slide-btn-primary {
            background: var(--mf2-aqua);
            color: #fff;
            box-shadow: 0 4px 20px rgba(90,154,42,0.4);
        }
        .mf2-slide-btn-primary:hover { background: #fff; color: var(--mf2-aqua-dark); transform: translateY(-2px); }
        .mf2-slide-btn-secondary {
            background: rgba(255,255,255,0.12);
            border: 2px solid rgba(255,255,255,0.5);
            color: #fff; backdrop-filter: blur(4px);
        }
        .mf2-slide-btn-secondary:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); }

        /* Slider controls */
        .mf2-slider-dots {
            position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 10px; z-index: 10;
        }
        .mf2-dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: rgba(255,255,255,0.4); border: 2px solid rgba(255,255,255,0.7);
            cursor: pointer; transition: all 0.3s;
        }
        .mf2-dot.mf2-active { background: var(--mf2-aqua); border-color: var(--mf2-aqua); width: 28px; border-radius: 10px; }
        .mf2-slider-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.4);
            backdrop-filter: blur(6px); color: #fff; border-radius: 50%;
            width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 10; transition: all 0.25s; font-size: 18px;
        }
        .mf2-slider-arrow:hover { background: var(--mf2-aqua); border-color: var(--mf2-aqua); }
        .mf2-slider-prev { left: 24px; }
        .mf2-slider-next { right: 24px; }

        /* Slider progress bar */
        .mf2-progress {
            position: absolute; bottom: 0; left: 0; height: 4px;
            background: linear-gradient(90deg, var(--mf2-aqua), var(--mf2-blue-light));
            z-index: 10; transition: width 0.1s linear;
            border-radius: 0 2px 0 0;
        }

        /* Floating service badges on slider */
        .mf2-slider-badges {
            position: absolute; right: 6%; bottom: 80px;
            display: flex; flex-direction: column; gap: 10px; z-index: 10;
        }
        .mf2-badge {
            background: rgba(255,255,255,0.13); backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.25); border-radius: 12px;
            padding: 10px 16px; display: flex; align-items: center; gap: 10px;
            color: #fff; font-family: var(--mf2-font); font-size: 13px; font-weight: 600;
            text-decoration: none; transition: all 0.25s;
            animation: mf2BadgeFloat 3s ease-in-out infinite alternate;
        }
        .mf2-badge:nth-child(2) { animation-delay: 0.5s; }
        .mf2-badge:nth-child(3) { animation-delay: 1s; }
        .mf2-badge:nth-child(4) { animation-delay: 1.5s; }
        .mf2-badge:hover { background: var(--mf2-aqua); border-color: var(--mf2-aqua); transform: translateX(-4px); color: #fff; }
        .mf2-badge i { font-size: 18px; color: #b5dd8f; }
        @keyframes mf2BadgeFloat { from { transform: translateY(0); } to { transform: translateY(-5px); } }

        /* ── STATS BAR ── */
        .mf2-stats {
            background: var(--mf2-gradient);
            padding: 28px 0; position: relative; z-index: 2;
        }
        .mf2-stats::before {
            content: ''; position: absolute; inset: 0;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='2' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E") repeat;
        }
        .mf2-stats-inner {
            max-width: 1100px; margin: 0 auto; padding: 0 20px;
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
            position: relative;
        }
        .mf2-stat { text-align: center; color: #fff; }
        .mf2-stat-num {
            font-family: var(--mf2-font); font-size: 42px; font-weight: 800;
            line-height: 1; display: block;
        }
        .mf2-stat-num sup { font-size: 22px; vertical-align: super; }
        .mf2-stat-label { font-size: 13px; opacity: 0.82; margin-top: 4px; font-weight: 500; }

        /* ── ABOUT SECTION ── */
        .mf2-about {
            padding: 80px 0; background: #fff; position: relative;
        }
        .mf2-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
        .mf2-section-tag {
            display: inline-block; color: var(--mf2-aqua-dark);
            font-family: var(--mf2-font); font-size: 13px; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px;
        }
        .mf2-section-title {
            font-family: var(--mf2-font); font-size: clamp(26px, 3vw, 40px);
            font-weight: 800; color: var(--mf2-navy); line-height: 1.2;
            margin-bottom: 18px;
        }
        .mf2-section-title span { color: var(--mf2-aqua-dark); }
        .mf2-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        .mf2-about-text p { color: var(--mf2-text-light); line-height: 1.8; margin-bottom: 16px; font-size: 15.5px; }
        .mf2-about-img {
            position: relative; border-radius: 24px; overflow: hidden;
            box-shadow: 0 20px 60px rgba(74,138,34,0.2);
        }
        .mf2-about-img img { width: 100%; display: block; border-radius: 24px; }
        .mf2-about-img::before {
            content: ''; position: absolute; inset: -2px;
            background: var(--mf2-gradient); border-radius: 26px; z-index: -1;
        }
        .mf2-about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
        .mf2-feature-chip {
            display: flex; align-items: center; gap: 10px;
            background: var(--mf2-gradient-light); border-radius: 12px;
            padding: 12px 14px; font-weight: 700; color: var(--mf2-navy);
            font-size: 13.5px; font-family: var(--mf2-font);
        }
        .mf2-feature-chip i { color: var(--mf2-aqua-dark); font-size: 18px; }

        /* ── SERVICES SECTION ── */
        .mf2-services { padding: 80px 0; background: var(--mf2-gray); }
        .mf2-section-header { text-align: center; margin-bottom: 50px; }
        .mf2-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
        .mf2-service-card {
            background: #fff; border-radius: 20px; overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
            text-decoration: none; display: block;
            position: relative;
        }
        .mf2-service-card:hover { transform: translateY(-8px); box-shadow: var(--mf2-shadow); }
        .mf2-service-card:hover .mf2-service-overlay { opacity: 1; }
        .mf2-service-img { height: 180px; overflow: hidden; position: relative; }
        .mf2-service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        .mf2-service-card:hover .mf2-service-img img { transform: scale(1.08); }
        .mf2-service-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(0deg, rgba(74,138,34,0.7) 0%, transparent 60%);
            opacity: 0; transition: opacity 0.35s;
        }
        .mf2-service-body { padding: 20px; }
        .mf2-service-icon {
            width: 48px; height: 48px; border-radius: 14px;
            background: var(--mf2-gradient-light);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 12px;
        }
        .mf2-service-icon i { color: var(--mf2-aqua-dark); font-size: 22px; }
        .mf2-service-title {
            font-family: var(--mf2-font); font-weight: 700;
            color: var(--mf2-navy); font-size: 16px; margin-bottom: 8px;
        }
        .mf2-service-desc { color: var(--mf2-text-light); font-size: 13.5px; line-height: 1.6; }
        .mf2-service-link {
            display: inline-flex; align-items: center; gap: 5px;
            color: var(--mf2-aqua-dark); font-weight: 700; font-size: 13px;
            margin-top: 12px; font-family: var(--mf2-font);
            transition: gap 0.2s;
        }
        .mf2-service-card:hover .mf2-service-link { gap: 10px; }
        .mf2-service-badge {
            position: absolute; top: 12px; right: 12px;
            background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
            color: #fff; font-family: var(--mf2-font);
            font-size: 11px; font-weight: 700;
            padding: 5px 11px; border-radius: 999px;
            letter-spacing: 0.5px; text-transform: uppercase;
            box-shadow: 0 4px 12px rgba(239,68,68,0.35);
            z-index: 2; display: inline-flex; align-items: center; gap: 4px;
        }
        .mf2-service-badge i { font-size: 9px; }

        /* ── PROCESS SECTION ── */
        .mf2-process { padding: 80px 0; background: #fff; }
        .mf2-process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; position: relative; }
        .mf2-process-steps::before {
            content: ''; position: absolute; top: 36px; left: 10%; right: 10%; height: 2px;
            background: var(--mf2-gradient-light); z-index: 0;
        }
        .mf2-step { text-align: center; position: relative; z-index: 1; }
        .mf2-step-num {
            width: 72px; height: 72px; border-radius: 50%;
            background: var(--mf2-gradient);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 18px; font-family: var(--mf2-font); font-weight: 800;
            color: #fff; font-size: 22px;
            box-shadow: 0 8px 24px rgba(74,138,34,0.3);
            position: relative;
        }
        .mf2-step-num::after {
            content: ''; position: absolute; inset: -6px;
            border-radius: 50%; border: 2px dashed rgba(74,138,34,0.3);
            animation: mf2Spin 8s linear infinite;
        }
        @keyframes mf2Spin { to { transform: rotate(360deg); } }
        .mf2-step-title { font-family: var(--mf2-font); font-weight: 700; color: var(--mf2-navy); font-size: 16px; margin-bottom: 8px; }
        .mf2-step-desc { color: var(--mf2-text-light); font-size: 13.5px; line-height: 1.6; }

        /* ── VIDEO/CONTENT BAND ── */
        .mf2-content-band { padding: 80px 0; background: var(--mf2-navy); position: relative; overflow: hidden; }
        .mf2-content-band::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(ellipse at 20% 50%, rgba(90,154,42,0.15) 0%, transparent 60%),
                        radial-gradient(ellipse at 80% 50%, rgba(10,85,184,0.15) 0%, transparent 60%);
        }
        /* Mini bubbles in dark band */
        .mf2-band-bubbles span {
            position: absolute; border-radius: 50%;
            background: rgba(90,154,42,0.08); border: 1px solid rgba(90,154,42,0.12);
        }
        .mf2-band-bubbles span:nth-child(1) { width:100px; height:100px; top:10%; left:5%; }
        .mf2-band-bubbles span:nth-child(2) { width:60px;  height:60px;  top:60%; right:8%; }
        .mf2-band-bubbles span:nth-child(3) { width:40px;  height:40px;  top:30%; right:20%; }

        .mf2-content-item {
            display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
            margin-bottom: 70px; position: relative; z-index: 1;
        }
        .mf2-content-item:last-child { margin-bottom: 0; }
        .mf2-content-item.mf2-reverse { direction: rtl; }
        .mf2-content-item.mf2-reverse > * { direction: ltr; }
        .mf2-content-text h2 {
            font-family: var(--mf2-font); font-size: clamp(22px, 2.5vw, 34px);
            font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.25;
        }
        .mf2-content-text h2 span { color: var(--mf2-aqua); }
        .mf2-content-text p { color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 20px; font-size: 15px; }
        .mf2-content-media { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
        .mf2-content-media iframe,
        .mf2-content-media video { width: 100%; border-radius: 20px; display: block; aspect-ratio: 16/9; }
        .mf2-btn-light {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--mf2-aqua); color: #fff;
            padding: 12px 26px; border-radius: 50px;
            font-family: var(--mf2-font); font-weight: 700; font-size: 14px;
            text-decoration: none; transition: all 0.25s;
        }
        .mf2-btn-light:hover { background: #fff; color: var(--mf2-aqua-dark); color: var(--mf2-navy); }

        /* ── CTA BAND ── */
        .mf2-cta {
            padding: 70px 0;
            background: var(--mf2-gradient);
            text-align: center; position: relative; overflow: hidden;
        }
        .mf2-cta::before {
            content: ''; position: absolute; inset: 0;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='3' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E") repeat;
        }
        .mf2-cta-content { position: relative; z-index: 1; }
        .mf2-cta h2 { font-family: var(--mf2-font); font-size: clamp(24px, 3vw, 40px); font-weight: 800; color: #fff; margin-bottom: 10px; }
        .mf2-cta p { color: rgba(255,255,255,0.85); font-size: 17px; margin-bottom: 28px; }
        .mf2-cta-phones { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
        .mf2-cta-phone {
            display: inline-flex; align-items: center; gap: 10px;
            background: rgba(255,255,255,0.15); backdrop-filter: blur(6px);
            border: 2px solid rgba(255,255,255,0.4);
            color: #fff; padding: 13px 26px; border-radius: 50px;
            font-family: var(--mf2-font); font-weight: 700; font-size: 17px;
            text-decoration: none; transition: all 0.25s;
        }
        .mf2-cta-phone:hover { background: #fff; color: var(--mf2-aqua-dark); border-color: #fff; }
        .mf2-cta-phone i { font-size: 20px; }

        /* ── WHY US ── */
        .mf2-why { padding: 80px 0; background: var(--mf2-gray); }
        .mf2-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
        .mf2-why-card {
            background: #fff; border-radius: 20px; padding: 32px 26px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            transition: all 0.3s; border: 2px solid transparent;
            position: relative; overflow: hidden;
        }
        .mf2-why-card:hover { border-color: var(--mf2-aqua); transform: translateY(-4px); }
        .mf2-why-card::before {
            content: ''; position: absolute; top: -40px; right: -40px;
            width: 100px; height: 100px; border-radius: 50%;
            background: var(--mf2-gradient-light); opacity: 0.5;
        }
        .mf2-why-icon {
            width: 60px; height: 60px; border-radius: 18px;
            background: var(--mf2-gradient); display: flex; align-items: center;
            justify-content: center; margin-bottom: 18px;
            box-shadow: 0 6px 20px rgba(74,138,34,0.3);
        }
        .mf2-why-icon i { color: #fff; font-size: 26px; }
        .mf2-why-title { font-family: var(--mf2-font); font-weight: 700; color: var(--mf2-navy); font-size: 18px; margin-bottom: 10px; }
        .mf2-why-desc { color: var(--mf2-text-light); line-height: 1.7; font-size: 14.5px; }

        /* ── ZONES ── */
        .mf2-zones { padding: 70px 0; background: #fff; }
        .mf2-zones-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 40px; }
        .mf2-zone-chip {
            background: var(--mf2-gradient-light); border: 1.5px solid rgba(90,154,42,0.3);
            border-radius: 12px; padding: 14px 10px; text-align: center;
            font-family: var(--mf2-font); font-weight: 700; color: var(--mf2-navy);
            font-size: 13.5px; text-decoration: none; transition: all 0.25s;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
        }
        .mf2-zone-chip i { color: var(--mf2-aqua-dark); font-size: 20px; }
        .mf2-zone-chip:hover { background: var(--mf2-gradient); color: #fff; border-color: transparent; }
        .mf2-zone-chip:hover i { color: #fff; }

        /* ── FOOTER ── */
        .mf2-footer { background: var(--mf2-navy); padding: 60px 0 0; }
        .mf2-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
        .mf2-footer-brand img { height: 52px; margin-bottom: 16px; filter: brightness(1.1); }
        .mf2-footer-desc { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
        .mf2-footer-social { display: flex; gap: 10px; }
        .mf2-social-btn {
            width: 38px; height: 38px; border-radius: 10px;
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.7); text-decoration: none; font-size: 16px;
            transition: all 0.25s;
        }
        .mf2-social-btn:hover { background: var(--mf2-aqua); color: #fff; border-color: var(--mf2-aqua); }
        .mf2-footer-col h4 {
            font-family: var(--mf2-font); font-weight: 700; color: #fff;
            font-size: 15px; margin-bottom: 16px; padding-bottom: 10px;
            border-bottom: 2px solid rgba(90,154,42,0.3);
        }
        .mf2-footer-col ul { list-style: none; }
        .mf2-footer-col ul li { margin-bottom: 9px; }
        .mf2-footer-col ul li a {
            color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px;
            transition: all 0.2s; display: flex; align-items: center; gap: 6px;
        }
        .mf2-footer-col ul li a i { color: var(--mf2-aqua); font-size: 12px; }
        .mf2-footer-col ul li a:hover { color: var(--mf2-aqua); padding-left: 4px; }
        .mf2-footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.08);
            padding: 20px 0; display: flex; justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 10px;
        }
        .mf2-footer-bottom p { color: rgba(255,255,255,0.45); font-size: 13px; }
        .mf2-footer-bottom a { color: rgba(255,255,255,0.45); text-decoration: none; }
        .mf2-footer-bottom a:hover { color: var(--mf2-aqua); }

        /* ── FLOATING BUTTONS ── */
        .mf2-float-btns {
            position: fixed; bottom: 28px; left: 20px;
            display: flex; flex-direction: column; gap: 10px; z-index: 9999;
        }
        .mf2-float-btn {
            width: 50px; height: 50px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            text-decoration: none; font-size: 22px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
            transition: transform 0.25s, box-shadow 0.25s;
        }
        .mf2-float-btn:hover { transform: scale(1.12); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
        .mf2-float-wa { background: #25d366; color: #fff; }
        .mf2-float-phone { background: var(--mf2-blue); color: #fff; }
        .mf2-float-phone2 { background: var(--mf2-aqua-dark); color: #fff; }

        /* ── RIPPLE ANIMATION (limpieza) ── */
        @keyframes mf2Ripple {
            0% { box-shadow: 0 0 0 0 rgba(90,154,42,0.4); }
            70% { box-shadow: 0 0 0 18px rgba(90,154,42,0); }
            100% { box-shadow: 0 0 0 0 rgba(90,154,42,0); }
        }
        .mf2-float-wa { animation: mf2Ripple 2.5s infinite; }

        /* ── RESPONSIVE ── */
        @media (max-width: 1024px) {
            .mf2-services-grid { grid-template-columns: repeat(2, 1fr); }
            .mf2-footer-grid { grid-template-columns: 1fr 1fr; }
            .mf2-why-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .mf2-about-grid, .mf2-content-item { grid-template-columns: 1fr; gap: 30px; }
            .mf2-content-item.mf2-reverse { direction: ltr; }
            .mf2-process-steps { grid-template-columns: 1fr 1fr; }
            .mf2-process-steps::before { display: none; }
            .mf2-stats-inner { grid-template-columns: repeat(2, 1fr); }
            .mf2-zones-grid { grid-template-columns: repeat(3, 1fr); }
            nav.mf2-navbar .mf2-nav-links { display: none !important; }
            .mf2-menu-toggle { display: flex !important; }
            .mf2-slider-badges { display: none; }
            .mf2-footer-grid { grid-template-columns: 1fr; }
            .mf2-topbar-phones { gap: 10px; font-size: 12px; }
        }
        @media (max-width: 480px) {
            .mf2-services-grid, .mf2-why-grid { grid-template-columns: 1fr; }
            .mf2-zones-grid { grid-template-columns: repeat(2, 1fr); }
            .mf2-process-steps { grid-template-columns: 1fr; }
        }

        /* ══════════════════════════════════════════
           OVERRIDE FINAL — matar conflictos legacy
           Todos los !important necesarios aquí
        ══════════════════════════════════════════ */

        /* Bootstrap y style.css antiguo agregan padding-top al body cuando
           hay un navbar fixed-top o la clase .page-wrapper */
        body.mf2-body {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        /* Anular margin-bottom de .navbar en Bootstrap */
        nav.mf2-navbar {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }

        /* Slider pegado al navbar sin gap */
        .mf2-slider {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        /* El CSS antiguo define #header / .header-style2 con position:fixed
           lo que hace que Bootstrap compense con padding-top en el body.
           Como eliminamos esos headers, limpiamos cualquier remanente. */
        .mf2-topbar {
            margin-top: 0 !important;
            padding-top: 8px !important;
        }

        /* FadeIn animation */
        @keyframes mf2FadeIn {
            from { opacity:0; transform:translateY(-6px); }
            to   { opacity:1; transform:translateY(0); }
        }