/*
Theme Name: Palena SPA
Theme URI: https://palenaspa.cl
Description: Tema personalizado para la landing page de Ingeniería Solar de Alta Gama.
Version: 1.0
Author: Agencia Exequiel Araya
Description: Custom WordPress theme for Palena SPA landing page.
Text Domain: palena-spa
*/
        :root {
            --primary: #0064e0;
            --primary-deep: #0457cb;
            --primary-soft: #0091ff;
            --on-primary: #ffffff;
            --ink-button: #000000;
            --on-ink-button: #ffffff;
            --success: #31a24c;
            --attention: #f2a918;
            --warning: #f7b928;
            --critical: #e41e3f;
            --canvas: #ffffff;
            --surface-soft: #f1f4f7;
            --ink-deep: #0a1317;
            --ink: #1c1e21;
            --ink-medium: #4b4c4f;
            --ink-soft: #6e767d;
            --charcoal: #444950;
            --slate: #4b4c4f;
            --stone: #8595a4;
            --hairline: #ced0d4;
            --hairline-soft: #dee3e9;

            --font-family: 'Montserrat', Helvetica, sans-serif;

            --spacing-xxs: 4px;
            --spacing-xs: 8px;
            --spacing-sm: 10px;
            --spacing-md: 12px;
            --spacing-base: 16px;
            --spacing-lg: 20px;
            --spacing-xl: 24px;
            --spacing-xxl: 32px;
            --spacing-xxxl: 40px;
            --spacing-section-sm: 48px;
            --spacing-section: 64px;
            --spacing-section-lg: 80px;
            --spacing-hero: 120px;

            --rounded-sm: 4px;
            --rounded-md: 6px;
            --rounded-lg: 8px;
            --rounded-xl: 16px;
            --rounded-xxl: 24px;
            --rounded-xxxl: 32px;
            --rounded-full: 100px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: clip;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 15px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--ink-deep) 0%, var(--primary) 100%);
            border-radius: 20px;
            border: 2px solid transparent;
            background-clip: content-box;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, var(--primary) 0%, var(--primary-deep) 100%);
            background-clip: content-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--canvas);
            color: var(--ink);
            margin: 0;
            padding: 0;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            overflow-x: clip;
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
        }

        /* HEADER STYLES */
        .main-header {
            background-color: var(--ink-deep);
            background-image:
                radial-gradient(circle at 50% -50%, rgba(0, 100, 224, 0.25) 0%, transparent 70%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
            height: 80px;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
        }

        .main-header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 100, 224, 0.4), transparent);
            opacity: 0.5;
        }

        .main-header::after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 100, 224, 0.3), transparent);
            z-index: 1;
        }

        .main-header.header-hidden {
            transform: translateY(-100%) !important;
        }

        .container-header {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            padding: 0 var(--spacing-xl);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-logo {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            padding: 4px;
            border-radius: var(--rounded-md);
        }

        .header-logo img {
            height: 44px;
            width: auto;
            display: block;
            transition: all 0.4s ease;
        }

        .header-logo::after {
            content: "";
            position: absolute;
            top: 0;
            left: -200%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.2),
                    transparent);
            transform: skewX(-20deg);
            transition: left 0.6s ease-in-out;
        }

        @media (hover: hover) {
            .header-logo:hover img {
                filter: drop-shadow(0 0 15px rgba(0, 100, 224, 0.7));
                transform: scale(1.05) translateY(-2px);
            }

            .header-logo:hover::before {
                transform: translate(-50%, -50%) scale(1);
                animation: pulse-glow 3s infinite ease-in-out;
            }

            .header-logo:hover::after {
                left: 200%;
                transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }
        }

        .header-logo::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(0, 100, 224, 0.4) 0%, transparent 70%);
            transform: translate(-50%, -50%) scale(0);
            z-index: -1;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
            border-radius: 50%;
        }

        .header-nav {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: nowrap;
        }

        .nav-link {
            color: var(--on-ink-button);
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            opacity: 0.8;
            padding: 6px 10px;
            border-radius: var(--rounded-full);
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .nav-link:hover {
            opacity: 1;
            background-color: rgba(255, 255, 255, 0.05);
        }

        @media (min-width: 901px) and (max-width: 1100px) {
            .header-nav {
                gap: 3px;
            }

            .nav-link {
                font-size: 11px;
                padding: 5px 6px;
            }

            .container-header {
                padding: 0 var(--spacing-md);
            }
        }

        .btn {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: var(--primary);
            color: var(--on-primary);
            text-decoration: none;
            text-align: center;
            border-radius: var(--rounded-full);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px 0 rgba(0, 100, 224, 0.35);
            position: relative;
            overflow: hidden;
            font-weight: 700;
            padding: 14px 32px;
        }

        .btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.25),
                    transparent);
            transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn:hover {
            background-color: var(--primary-deep);
            box-shadow: 0 8px 24px rgba(0, 100, 224, 0.45);
        }

        .btn:hover::after {
            left: 100%;
        }

        .btn:active {
            transform: translateY(-1px) scale(0.98);
        }

        /* BUTTON VARIANTS */
        .btn-outline {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 145, 255, 0.4) !important;
            color: white;
            box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }

        .btn-outline:hover {
            background: rgba(0, 145, 255, 0.15);
            border-color: var(--primary-soft) !important;
            box-shadow: 0 0 20px rgba(0, 145, 255, 0.3);
            color: white;
        }

        .btn-outline .btn-text-sub {
            color: rgba(255, 255, 255, 0.6);
        }

        .btn-primary-premium {
            background-color: var(--primary);
            color: white;
            padding: 18px 48px;
            border-radius: var(--rounded-full);
            border: 1px solid var(--primary-soft);
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 10px 30px rgba(0, 100, 224, 0.3);
            text-decoration: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            z-index: 1;
            width: fit-content;
        }

        .btn-primary-premium::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, var(--primary-soft) 0%, var(--primary) 100%);
            transition: opacity 0.4s ease;
            z-index: -1;
            border-radius: inherit;
        }

        .btn-primary-premium::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
            z-index: 2;
        }

        .btn-primary-premium:hover {
            background-color: var(--primary-soft);
            box-shadow: 0 15px 45px rgba(0, 145, 255, 0.5);
            border-color: white;
        }

        .btn-primary-premium:hover::before {
            opacity: 0;
        }

        .btn-primary-premium:hover::after {
            left: 100%;
        }

        .btn-primary-premium .btn-text-main {
            font-size: 17px;
            font-weight: 700;
            text-transform: none;
            letter-spacing: 0.01em;
            color: white;
            line-height: 1.1;
        }

        .btn-primary-premium .btn-text-sub {
            font-size: 12px;
            font-weight: 500;
            margin-top: 6px;
            opacity: 0.9;
            color: white;
            line-height: 1;
        }

        /* Base size for complex buttons */

        .cta-speed-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: center;
            font-size: 13px;
            font-weight: 600;
            color: var(--primary);
            margin-top: 12px;
            margin-bottom: 8px;
            letter-spacing: 0.02em;
            opacity: 0.85;
        }

        @media (min-width: 901px) {
            .cta-speed-badge {
                justify-content: flex-start;
                padding-left: 20px;
            }
        }

        .btn-text-main {
            font-size: inherit;
            font-weight: 700;
            line-height: 1.2;
            position: relative;
            z-index: 2;
        }

        .btn-text-sub {
            font-size: 13px;
            font-weight: 400;
            margin-top: 4px;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }

        /* PREMIUM SUBTLE HIGHLIGHT */
        .text-highlight {
            position: relative;
            z-index: 1;
            display: inline;
            background-image:
                linear-gradient(120deg, var(--primary), var(--primary)),
                linear-gradient(0deg, rgba(0, 100, 224, 0.15) 2.21%, rgba(0, 100, 224, 0.05) 23.32%, rgba(0, 100, 224, 0.02) 53.92%, transparent 81.87%);
            background-repeat: no-repeat, no-repeat;
            background-size: 100% .1875rem, 100% calc(89% - .1875rem);
            background-position: 0 89%, 0 calc(55% - .1875rem);
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
            color: var(--ink-deep);
            padding: 0 2px;
            font-weight: 700;
        }

        .text-highlight-sm {
            position: relative;
            z-index: 1;
            display: inline;
            background-image:
                linear-gradient(120deg, var(--primary), var(--primary)),
                linear-gradient(0deg, rgba(0, 100, 224, 0.1) 0%, rgba(0, 100, 224, 0.04) 50%, transparent 100%);
            background-repeat: no-repeat, no-repeat;
            background-size: 100% 2px, 100% calc(80% - 2px);
            background-position: 0 95%, 0 100%;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
            color: var(--ink-deep);
            padding: 0 2px;
            font-weight: 700;
        }

        /* SUCCESS SECTION (DETAILED) */
        .casos-exito-section {
            padding: var(--spacing-section) 0;
            background-color: var(--canvas);
        }

        .casos-header {
            text-align: center;
            margin-bottom: var(--spacing-xxxl);
        }

        .casos-header h2 {
            font-size: 38px;
            margin-bottom: var(--spacing-md);
            margin-top: 0;
        }

        .casos-header p {
            color: var(--ink-soft);
            font-size: 18px;
            text-wrap: balance;
            margin-top: 0;
            margin-bottom: 0;
        }

        .casos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-xl);
        }

        .caso-card {
            background: white;
            border-radius: var(--rounded-xxl);
            overflow: hidden;
            border: 1px solid var(--hairline-soft);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        @media (hover: hover) {
            .caso-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
            }
        }

        .caso-img-wrapper {
            position: relative;
            height: 240px;
            overflow: hidden;
        }

        .caso-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .caso-badge {
            position: absolute;
            bottom: var(--spacing-md);
            left: var(--spacing-md);
            background: var(--primary);
            color: white;
            padding: 6px 12px;
            border-radius: var(--rounded-full);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .caso-content {
            padding: var(--spacing-xl);
            flex-grow: 1;
        }

        .caso-title {
            font-size: 20px;
            margin-top: 0;
            margin-bottom: var(--spacing-sm);
            color: var(--ink-deep);
        }

        .caso-drop {
            color: var(--primary);
            font-weight: 700;
            font-size: 18px;
            margin-bottom: var(--spacing-md);
        }

        @media (max-width: 600px) {
            .caso-drop {
                font-size: 16px;
            }
        }

        .caso-specs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-md);
            padding-top: var(--spacing-md);
            border-top: 1px solid var(--hairline-soft);
            margin-top: auto;
        }

        .spec-item span {
            display: block;
            font-size: 11px;
            text-transform: uppercase;
            color: var(--ink-soft);
            margin-bottom: 2px;
        }

        .spec-item strong {
            font-size: 14px;
            color: var(--ink-deep);
        }

        /* MOBILE MENU MODAL */
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: var(--ink-deep);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            padding: var(--spacing-lg);
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            overflow-y: auto;
        }

        .mobile-menu-overlay.active {
            transform: translateX(0);
        }

        body.menu-open {
            overflow: hidden !important;
        }

        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-xxxl);
            width: 100%;
        }

        .close-menu {
            background: rgba(255, 255, 255, 0.05);
            border: none;
            color: white;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;
        }

        .close-menu:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .mobile-nav {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
            margin-bottom: auto;
            width: 100%;
        }

        .mobile-nav-link {
            color: white;
            text-decoration: none;
            font-size: 22px;
            font-weight: 600;
            padding: var(--spacing-md) 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: color 0.3s ease;
            letter-spacing: 0.5px;
        }

        .mobile-nav-link:hover {
            color: var(--primary-light);
        }

        .mobile-menu-footer {
            margin-top: var(--spacing-xxxl);
            margin-bottom: 24px;
            width: 100%;
        }

        .mobile-menu-cta {
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px 24px !important;
            background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary) 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 10px 25px rgba(0, 100, 224, 0.4) !important;
        }

        .mobile-menu-cta span {
            font-size: 18px !important;
            font-weight: 700;
            letter-spacing: 0.2px;
            color: white !important;
        }

        .mobile-menu-cta svg {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            color: white;
            flex-shrink: 0;
        }

        .mobile-menu-cta:active svg {
            transform: translateX(6px);
        }

        .burger-menu {
            display: none;
            background: rgba(255, 255, 255, 0.05);
            border: none;
            color: white;
            cursor: pointer;
            padding: 10px;
            border-radius: var(--rounded-lg);
            transition: all 0.3s ease;
        }

        .burger-menu:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .hero-description {
            text-wrap: balance;
            font-size: 20px;
            color: var(--ink-deep);
            margin-bottom: var(--spacing-xl);
            line-height: 1.6;
        }

        /* CAROUSEL DOTS */
        .casos-dots {
            display: none;
            justify-content: center;
            gap: 8px;
            margin-top: var(--spacing-xl);
            z-index: 10;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #cbd5e1;
            /* Visible light grey */
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
        }

        .dot.active {
            background: var(--primary);
            width: 24px;
            border-radius: 4px;
        }

        @media (max-width: 900px) {
            .hero-description {
                font-size: 18px;
                text-wrap: balance;
                line-height: 1.5;
            }

            .main-header {
                height: 70px;
                background-image: none;
            }

            .main-header::before,
            .main-header::after {
                display: none;
            }

            .header-logo img {
                height: 34px;
            }

            .btn-lg {
                font-size: 20px;
                padding: 18px 32px;
                width: 100%;
            }

            .btn-text-sub {
                font-size: 0.8em;
                margin-top: 4px;
                line-height: 1.35;
            }

            .btn-primary-premium .btn-text-sub {
                line-height: 1.35;
            }

            .casos-exito-section {
                padding: var(--spacing-xxl) 0;
            }

            .casos-header {
                margin-bottom: var(--spacing-xxl);
            }

            .casos-header h2 {
                font-size: 28px;
            }

            .casos-header p {
                font-size: 15px;
            }

            .casos-grid {
                display: flex;
                grid-template-columns: none;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: var(--spacing-lg);
                padding: 0 var(--spacing-xl) 8px;
                margin: 0 calc(var(--spacing-xl) * -1);
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .casos-grid::-webkit-scrollbar {
                display: none;
            }

            .caso-card {
                flex: 0 0 85%;
                scroll-snap-align: center;
                scroll-snap-stop: always;
                margin-bottom: 8px;
            }

            .casos-dots {
                display: flex;
                margin-top: 8px;
            }

            .burger-menu {
                display: block;
            }

            .header-nav,
            .header-actions {
                display: none;
            }
        }

        /* REINFORCEMENT SECTION */
        .reinforcement-section {
            background-color: #f8fafc;
            padding: var(--spacing-section) 0;
            border-bottom: 1px solid var(--hairline-soft);
            position: relative;
            background-image: radial-gradient(#e2e8f0 0.5px, transparent 0.5px);
            background-size: 20px 20px;
        }

        .reinforcement-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: var(--spacing-xxxl);
            align-items: center;
        }

        .reinforcement-content h2 {
            font-size: 38px;
            line-height: 1.15;
            margin-bottom: var(--spacing-xl);
            color: var(--ink-deep);
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .reinforcement-tech-card {
            background: white;
            padding: var(--spacing-xxl);
            border-radius: var(--rounded-xxl);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
            border: 1px solid var(--hairline-soft);
            position: relative;
        }

        .reinforcement-tech-card::before {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 9px;
            font-weight: 700;
            color: var(--slate);
            opacity: 0.5;
            letter-spacing: 1px;
        }

        .reinforcement-trust-pillars-wrapper {
            position: relative;
            margin-top: var(--spacing-xxl);
            padding-top: var(--spacing-xxxl);
            border-top: 1px solid var(--hairline-soft);
        }

        .reinforcement-trust-pillars {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 24px;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
        }

        .reinforcement-trust-pillars::-webkit-scrollbar {
            display: none;
        }

        .pillars-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-lg);
        }

        .pillars-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: 1.5px;
            text-transform: uppercase;
            opacity: 0.9;
        }

        .pillar-arrows {
            display: flex;
            gap: 6px;
        }

        .pillar-arrow {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid var(--hairline-soft);
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--ink-deep);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .pillar-arrow:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: #f0f7ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 100, 224, 0.1);
        }

        .pillar-arrow svg {
            width: 18px;
            height: 18px;
        }

        @media (max-width: 900px) {
            .reinforcement-trust-pillars-wrapper {
                border-top: none;
                margin-top: var(--spacing-md);
                padding-top: 0;
            }

            .pillars-header {
                display: none;
            }
        }

        .trust-pillar-item {
            flex: 0 0 calc(50% - 12px);
            scroll-snap-align: start;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .trust-pillar-item svg {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            padding: 8px;
            background: #eff6ff;
            border-radius: 8px;
            color: var(--primary);
        }

        .trust-pillar-item span {
            font-size: 14px;
            font-weight: 800;
            color: var(--ink-deep);
            line-height: 1.4;
            text-wrap: balance;
        }

        @media (max-width: 900px) {
            .reinforcement-grid {
                grid-template-columns: 1fr;
                gap: var(--spacing-xxl);
            }

            .reinforcement-content h2 {
                font-size: 30px;
            }

            .reinforcement-tech-card {
                padding: var(--spacing-xl);
                min-height: 400px;
            }

            .reinforcement-trust-pillars {
                display: block;
                position: relative;
                height: 50px;
                margin-top: var(--spacing-xl);
                padding-top: 0;
                border-top: none;
                overflow: hidden;
            }

            .trust-pillar-item {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                justify-content: center;
                align-items: center;
                animation: trustRotate4 12s infinite;
            }

            .trust-pillar-item:nth-child(1) {
                animation-delay: 0s;
            }

            .trust-pillar-item:nth-child(2) {
                animation-delay: 3s;
            }

            .trust-pillar-item:nth-child(3) {
                animation-delay: 6s;
            }

            .trust-pillar-item:nth-child(4) {
                animation-delay: 9s;
            }

            @keyframes trustRotate4 {

                0%,
                2% {
                    opacity: 0;
                    transform: translateY(10px);
                }

                5%,
                22% {
                    opacity: 1;
                    transform: translateY(0);
                }

                25%,
                27% {
                    opacity: 0;
                    transform: translateY(-10px);
                }

                100% {
                    opacity: 0;
                }
            }
        }

        /* NETBILLING UNIFIED SVG VIZ */
        .netbilling-viz {
            width: 100%;
            aspect-ratio: 680 / 600;
            max-height: 600px;
            background: transparent;
            position: relative;
            overflow: hidden;
        }

        .viz-narrative {
            position: absolute;
            top: 4%;
            left: 0;
            width: 100%;
            text-align: center;
            z-index: 50;
            pointer-events: none;
        }

        @media (max-width: 600px) {
            .netbilling-viz {
                aspect-ratio: 680 / 780;
            }

            .viz-narrative {
                left: 0;
                width: 100%;
            }

            .narrative-step {
                font-size: 15px;
                letter-spacing: 0.3px;
            }

            .narrative-sub {
                font-size: 14px;
            }

            #main-svg {
                transform: scale(1.06);
                transform-origin: center center;
            }

            #node-sun {
                transform: scale(1.35);
                transform-origin: 150px 150px;
            }

            #node-house {
                transform: scale(1.35);
                transform-origin: 400px 250px;
            }

            #node-grid {
                transform: scale(1.35);
                transform-origin: 650px 150px;
            }

            #node-wallet {
                transform: scale(1.35);
                transform-origin: 400px 470px;
            }

            .node-label {
                font-size: 11px;
            }
        }

        .narrative-step {
            font-size: clamp(20px, 5vw, 32px);
            font-weight: 900;
            color: var(--ink-deep);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
            display: block;
            line-height: 1.1;
        }

        .narrative-sub {
            font-size: clamp(16px, 4vw, 19px);
            color: var(--primary);
            font-weight: 600;
            letter-spacing: 0.3px;
            line-height: 1.3;
        }

        #main-svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .viz-node {
            cursor: default;
        }

        .node-bg {
            fill: white;
            stroke: var(--hairline);
            stroke-width: 1.5;
            transition: all 0.4s ease;
            filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.06));
        }

        .node-label {
            fill: var(--slate);
            font-size: 13px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .node-icon {
            fill: none;
            stroke: var(--slate);
            stroke-width: 1.5;
            transition: all 0.4s ease;
        }

        /* Active States */
        .active-sun .node-bg {
            stroke: var(--warning);
            fill: #fffdf5;
        }

        .active-sun .node-icon {
            stroke: var(--warning);
            filter: drop-shadow(0 0 6px rgba(247, 185, 40, 0.4));
        }

        .active-sun .node-label {
            fill: var(--warning);
        }

        .active-grid .node-bg {
            stroke: #0091ff;
            fill: #f0f7ff;
        }

        .active-grid .node-icon {
            stroke: #0091ff;
            filter: drop-shadow(0 0 6px rgba(0, 145, 255, 0.4));
        }

        .active-grid .node-label {
            fill: #0091ff;
        }

        .active-wallet .node-bg {
            stroke: #31a24c;
            fill: #f2fdf5;
        }

        .active-wallet .node-icon {
            stroke: #31a24c;
            filter: drop-shadow(0 0 6px rgba(49, 162, 76, 0.4));
        }

        .active-wallet .node-label {
            fill: #31a24c;
        }



        .connection-path {
            fill: none;
            stroke: var(--hairline);
            stroke-width: 2;
            stroke-dasharray: 4 4;
        }

        .particle-svg {
            filter: blur(1px);
        }

        .warning-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-xl);
            margin-top: var(--spacing-xxl);
        }

        .warning-card {
            background: white;
            padding: var(--spacing-xl);
            border-radius: var(--rounded-xl);
            border-left: 4px solid #ef4444;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .warning-card:hover {
            transform: translateY(-5px);
        }

        .warning-card h4 {
            color: #ef4444;
            font-size: 18px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .warning-card p {
            font-size: 15px;
            line-height: 1.6;
            color: var(--ink-soft);
        }

        .audit-table {
            width: 100%;
            background: #f8fafc;
            border-radius: var(--rounded-xl);
            overflow: hidden;
            margin-top: var(--spacing-xxl);
            border: 1px solid var(--hairline-soft);
        }

        .audit-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-bottom: 1px solid var(--hairline-soft);
        }

        .audit-row:last-child {
            border-bottom: none;
        }

        .audit-cell {
            padding: var(--spacing-lg) var(--spacing-xl);
        }

        .audit-header {
            background: var(--ink-deep);
            color: white;
            font-weight: 800;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 1px;
        }

        .audit-competitor {
            color: #94a3b8;
            border-right: 1px solid var(--hairline-soft);
        }

        .audit-palena {
            background: white;
            color: var(--ink-deep);
            font-weight: 700;
            border-left: 2px solid var(--primary);
        }

        /* METHODOLOGY CARDS */
        .method-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-xl);
            margin-top: var(--spacing-xxl);
        }

        .method-card {
            background: white;
            padding: var(--spacing-xl);
            border-radius: var(--rounded-xl);
            border: 1px solid var(--hairline-soft);
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .method-number {
            width: 32px;
            height: 32px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 14px;
        }

        .method-card h4 {
            font-size: 20px;
            color: var(--ink-deep);
        }

        @media (max-width: 900px) {

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

            /* Audit Table Mobile Improvement */
            .audit-header {
                display: none;
                /* Hide standard header on mobile */
            }

            .audit-row {
                grid-template-columns: 1fr;
                gap: 0;
                border: 1px solid var(--hairline-soft);
                border-radius: var(--rounded-md);
                margin-bottom: var(--spacing-base);
                overflow: hidden;
            }

            .audit-cell {
                padding: var(--spacing-base);
                position: relative;
                padding-top: 40px;
                /* Space for label */
            }

            .audit-cell::before {
                content: attr(data-label);
                position: absolute;
                top: var(--spacing-sm);
                left: var(--spacing-base);
                font-size: 10px;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 1px;
                opacity: 0.6;
            }

            .audit-competitor {
                border-right: none;
                border-bottom: 1px solid var(--hairline-soft);
                background: #f8fafc;
            }

            .audit-palena {
                border-left: none;
                background: white;
            }
        }

        /* QUALIFIER SECTION */
        .qualifier-section {
            background-color: var(--ink-deep);
            color: white;
            padding: var(--spacing-section) 0;
            position: relative;
            overflow: hidden;
        }

        .qualifier-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                radial-gradient(rgba(0, 145, 255, 0.05) 1px, transparent 1px),
                linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 40px 40px, 120px 120px, 120px 120px;
            pointer-events: none;
        }

        .qualifier-grid {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            gap: var(--spacing-xxxl);
            align-items: center;
        }

        .qualifier-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
            padding: var(--spacing-xxl);
            border-radius: var(--rounded-xxl);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            backdrop-filter: blur(15px);
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .qualifier-card::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 145, 255, 0.05) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .qualifier-card-glow {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary-soft), transparent);
            opacity: 0.5;
        }

        .qualifier-title {
            font-size: 42px;
            font-weight: 800;
            margin-bottom: var(--spacing-lg);
            line-height: 1.1;
            color: white;
            letter-spacing: -1px;
        }

        .qualifier-list {
            list-style: none;
            padding: 0;
            margin: var(--spacing-xl) 0;
            position: relative;
            z-index: 1;
        }

        .btn-qualifier-toggle {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            padding: 16px 20px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 12px;
            color: white;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            z-index: 5;
            margin-top: -10px;
            margin-bottom: var(--spacing-md);
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .btn-qualifier-toggle:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
            border-color: rgba(0, 145, 255, 0.3);
            color: white;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        }

        .btn-qualifier-toggle svg {
            position: absolute;
            right: 20px;
            top: calc(50% - 9px);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .qualifier-item {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: var(--spacing-lg);
            padding: 12px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid transparent;
            font-size: 15px;
            line-height: 1.4;
            color: rgba(255, 255, 255, 0.9);
            transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .qualifier-item:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(0, 145, 255, 0.2);
            transform: translateX(8px);
        }

        .qualifier-item strong {
            color: white;
        }

        .qualifier-item svg {
            color: var(--primary-soft);
            flex-shrink: 0;
            background: rgba(0, 145, 255, 0.1);
            padding: 8px;
            border-radius: 8px;
            width: 32px;
            height: 32px;
        }

        .qualifier-item:hover svg {
            background: var(--primary-soft);
            color: white;
            box-shadow: 0 0 15px rgba(0, 145, 255, 0.4);
        }

        .qualifier-deco-line {
            position: absolute;
            background: linear-gradient(90deg, var(--primary-soft), transparent);
            height: 1px;
            opacity: 0.2;
        }

        .section-marker {
            font-size: 11px;
            font-weight: 800;
            color: var(--primary-soft);
            letter-spacing: 4px;
            margin-bottom: var(--spacing-lg);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .section-marker::after {
            content: "";
            height: 1px;
            width: 40px;
            background: var(--primary-soft);
            opacity: 0.5;
        }

        .qualifier-specs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .qualifier-section .spec-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .qualifier-section .spec-item span {
            font-size: 10px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .qualifier-section .spec-item strong {
            font-size: 14px;
            color: white;
            font-weight: 600;
        }

        .qualifier-status {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            background: rgba(0, 145, 255, 0.1);
            border: 1px solid rgba(0, 145, 255, 0.2);
            border-radius: 100px;
            margin-top: 30px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: #00ff88;
            border-radius: 50%;
            box-shadow: 0 0 10px #00ff88;
            animation: pulse-green 2s infinite;
        }

        @keyframes pulse-green {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.5);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .status-text {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--primary-soft);
            text-transform: uppercase;
        }

        @media (max-width: 900px) {
            .qualifier-section {
                padding: 60px 0 40px 0 !important;
            }

            .qualifier-grid {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-xxl);
            }

            .qualifier-intro {
                display: contents;
            }

            .qualifier-intro-text {
                order: 1;
            }

            .qualifier-card {
                order: 2;
            }

            .qualifier-status {
                order: 3;
                margin-top: 0 !important;
                align-self: center;
            }

            .qualifier-section .btn-container {
                order: 4;
                margin-top: -10px !important;
                margin-bottom: 0 !important;
                justify-content: center !important;
                display: flex;
                width: 100%;
            }

            .qualifier-title {
                font-size: 32px;
            }

            .qualifier-item {
                background: rgba(255, 255, 255, 0.05) !important;
                border-color: rgba(0, 145, 255, 0.2) !important;
                transform: none !important;
                align-items: flex-start !important;
            }

            .qualifier-item svg {
                background: var(--primary-soft) !important;
                color: white !important;
                box-shadow: 0 0 15px rgba(0, 145, 255, 0.4) !important;
                margin-top: 3px !important;
            }

            .qualifier-item span {
                margin-top: 0 !important;
            }

            .btn-qualifier-toggle {
                display: flex;
            }

            .qualifier-list.collapsed {
                max-height: 250px;
                overflow: hidden;
                position: relative;
                -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
                mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
            }
        }

        /* SUCCESS BAR */
        .success-bar {
            background-color: var(--ink-deep);
            color: white;
            padding: var(--spacing-lg) 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            overflow: hidden;
            position: relative;
        }

        .success-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-xl);
            align-items: center;
        }

        .success-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-md) var(--spacing-lg);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .success-item:last-child {
            border-right: none;
        }

        .success-icon {
            width: 48px;
            height: 48px;
            background: rgba(0, 100, 224, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            flex-shrink: 0;
        }

        .success-text {
            font-size: 15px;
            line-height: 1.4;
        }

        .success-text strong {
            color: var(--primary-light);
            display: block;
            font-size: 18px;
        }

        @media (max-width: 900px) {
            .success-grid {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .success-item {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            .success-item:last-child {
                border-bottom: none;
            }
        }

        @media (max-width: 768px) {
            .header-nav {
                display: none;
            }

            .main-header {
                height: 64px;
            }
        }

        .container {
            max-width: 800px;
            /* Narrower for better readability of direct-response copy */
            margin: 0 auto;
            padding: 0 var(--spacing-xl);
        }

        section {
            padding: var(--spacing-section) 0;
            border-bottom: 1px solid var(--hairline-soft);
        }

        section:last-child {
            border-bottom: none;
        }

        h1,
        h2,
        h3 {
            margin-top: 0;
            color: var(--ink-deep);
        }

        h1 {
            font-size: 64px;
            font-weight: 500;
            line-height: 1.16;
            letter-spacing: -0.02em;
            margin-bottom: var(--spacing-xxl);
        }

        h2 {
            font-size: 48px;
            font-weight: 500;
            line-height: 1.17;
            margin-bottom: var(--spacing-xl);
        }

        h3 {
            font-size: 28px;
            font-weight: 500;
            line-height: 1.28;
            margin-top: var(--spacing-xxl);
            margin-bottom: var(--spacing-lg);
        }

        p {
            font-size: 18px;
            font-weight: 400;
            line-height: 1.5;
            margin-bottom: var(--spacing-lg);
        }

        strong {
            font-weight: 700;
            color: var(--ink-deep);
        }

        ul,
        ol {
            font-size: 18px;
            line-height: 1.5;
            margin-bottom: var(--spacing-xl);
            padding-left: var(--spacing-xl);
        }

        li {
            margin-bottom: var(--spacing-md);
        }

        .btn-container {
            margin: var(--spacing-xxl) 0;
            text-align: center;
        }


        .btn strong {
            color: var(--on-primary);
        }

        /* ANIMATIONS */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.96) translateY(10px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        @keyframes float {

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

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

        @keyframes pulse-glow {

            0%,
            100% {
                opacity: 0.12;
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                opacity: 0.2;
                transform: translate(-50%, -50%) scale(1.05);
            }
        }

        /* Hero section specific */
        .hero-section {
            background-color: #f9fafb;
            padding: var(--spacing-section) 0 var(--spacing-section);
            position: relative;
            overflow: hidden;
            background-image:
                radial-gradient(circle at 80% 20%, rgba(0, 100, 224, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 20% 80%, rgba(0, 145, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
                url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40 L40 40 L40 0' fill='none' stroke='%230064e0' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/svg%3E");
            background-attachment: fixed;
        }

        @media (max-width: 900px) {
            .hero-section {
                background-color: #ffffff;
                background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 L60 60 L60 0' fill='none' stroke='%23e2e8f0' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E");
                background-attachment: scroll;
            }
        }

        .hero-section>.container-wide {
            position: relative;
            z-index: 5;
        }


        .hero-section h1 {
            font-size: 56px;
        }

        /* FAQ specific */
        .faq-card {
            background-color: var(--canvas);
            border-radius: var(--rounded-xl);
            padding: var(--spacing-xl);
            border: 1px solid var(--hairline-soft);
            margin-bottom: var(--spacing-lg);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .faq-card h3 {
            margin-top: 0;
            font-size: 20px;
            font-weight: 700;
        }

        /* Numbered list styling */
        ol {
            counter-reset: custom-counter;
            list-style: none;
            padding-left: 0;
        }

        ol>li {
            counter-increment: custom-counter;
            position: relative;
            padding-left: 48px;
            margin-bottom: var(--spacing-xl);
        }

        ol>li::before {
            content: counter(custom-counter);
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
            background-color: var(--primary);
            color: var(--canvas);
            border-radius: var(--rounded-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
        }

        /* Testimonials */
        .testimonial-card {
            background-color: var(--surface-soft);
            border-radius: var(--rounded-xl);
            padding: var(--spacing-xxl);
            margin-bottom: var(--spacing-lg);
            border-left: 4px solid var(--primary);
        }

        .testimonial-card h3 {
            margin-top: 0;
            font-size: 20px;
            font-style: italic;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 38px !important;
            }

            h2 {
                font-size: 32px;
            }

            h3 {
                font-size: 24px;
            }

            section {
                padding: var(--spacing-section) 0;
            }

            .hero-section {
                padding: var(--spacing-section-sm) 0 var(--spacing-xxxl);
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 30px !important;
            }

            h2 {
                font-size: 28px;
            }

            .btn {
                width: 100%;
                box-sizing: border-box;
                padding: 16px 24px;
                font-size: 16px;
            }

            .faq-card {
                padding: var(--spacing-lg);
            }

            .testimonial-card {
                padding: var(--spacing-xl);
            }
        }

        /* NEW HERO STYLES */
        .container-wide {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-xl);
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: var(--spacing-xxxl);
            align-items: center;
        }

        .hero-content {
            text-align: left;
        }

        .hero-content h1 {
            text-wrap: balance;
            font-size: 52px;
            line-height: 1.1;
            margin-bottom: var(--spacing-lg);
            animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
        }

        .hero-content p {
            animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
        }

        .hero-visual {
            position: relative;
            animation: fadeInScale 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
        }

        .hero-image-wrapper {
            border-radius: var(--rounded-xxxl);
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--hairline);
            line-height: 0;
        }

        .hero-image-wrapper img {
            width: 100%;
            height: auto;
            display: block;
        }


        .hero-trust-list {
            margin-top: var(--spacing-xxl);
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-base);
        }

        .hero-trust-list li {
            font-size: 14px;
            margin-bottom: 0;
            padding-left: 28px;
            position: relative;
            color: var(--steel);
            line-height: 1.3;
        }

        .hero-trust-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--success);
            font-weight: bold;
            font-size: 16px;
        }

        .hero-cta-wrapper {
            margin-top: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
        }

        .hero-cta-wrapper .btn {
            margin: 0;
            margin-bottom: var(--spacing-base);
        }

        .hero-cta-main {
            display: flex;
            align-items: center;
            gap: var(--spacing-lg);
        }

        .hero-cta-main .btn {
            margin-bottom: 0;
        }

        .hero-cta-main .cta-speed-badge {
            margin: 0;
            padding-left: 0;
        }

        .hero-trust-small {
            font-size: 13px;
            color: var(--ink);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 32px;
            margin-top: 32px;
            opacity: 0.85;
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .trust-icon {
            width: 16px;
            height: 16px;
            color: var(--success);
            flex-shrink: 0;
        }

        .trust-divider {
            width: 1px;
            height: 24px;
            background-color: var(--hairline);
        }

        .trust-text {
            display: flex;
            flex-direction: column;
            line-height: 1.25;
            text-align: left;
        }

        .trust-label {
            font-size: 8px;
            font-weight: 700;
            color: var(--ink-soft);
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .trust-value {
            font-size: 13px;
            font-weight: 700;
            color: var(--ink-deep);
        }

        /* Scoped to prevent overrides from later CSS rules */
        .hero-trust-small .trust-label {
            color: var(--ink-soft) !important;
        }

        .hero-trust-small .trust-value {
            color: var(--ink-deep) !important;
        }

        @media (max-width: 1024px) {
            .hero-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-content {
                text-align: center;
            }

            .hero-cta-wrapper {
                align-items: center;
            }

            .hero-cta-main {
                flex-direction: column;
                gap: 0;
                width: 100%;
            }

            .hero-cta-main .btn {
                margin-bottom: var(--spacing-base);
            }

            .hero-cta-main .cta-speed-badge {
                margin-top: 12px;
                margin-bottom: 8px;
            }

            .hero-visual {
                width: 100%;
                margin-top: 0;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }

            .hero-trust-list {
                justify-content: center;
            }

            .hero-trust-small {
                position: relative;
                height: 48px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: var(--spacing-lg);
            }

            .trust-divider {
                display: none;
            }

            .trust-item {
                position: absolute;
                width: 100%;
                justify-content: center;
                opacity: 0;
                animation: trustRotate 6s infinite;
            }
        }

        .trust-item:nth-child(1) {
            animation-delay: 0s;
        }

        .trust-item:nth-child(3) {
            animation-delay: 3s;
        }

        @keyframes trustRotate {

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

            10%,
            45% {
                opacity: 1;
                transform: translateY(0);
            }

            50%,
            55% {
                opacity: 0;
                transform: translateY(-5px);
            }

            100% {
                opacity: 0;
            }
        }

        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 36px !important;
            }

            .hero-trust-list {
                grid-template-columns: 1fr;
                text-align: left;
                display: inline-grid;
            }
        }

        /* REINFORCEMENT SECTION */
        .reinforcement-section {
            background-color: var(--canvas);
            padding: var(--spacing-section) 0;
            border-bottom: 1px solid var(--hairline-soft);
        }

        .reinforcement-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-xxxl);
            align-items: center;
        }

        .reinforcement-content p {
            font-size: 18px;
            color: var(--ink);
            line-height: 1.6;
        }

        .reinforcement-tech-card {
            background: var(--surface-soft);
            padding: var(--spacing-xxl);
            border-radius: var(--rounded-xxl);
            border: 1px solid var(--hairline-soft);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
        }

        .reinforcement-tech-card ul {
            margin-bottom: 0;
            padding-left: 0;
            list-style: none;
        }

        .reinforcement-tech-card li {
            font-size: 15px;
            padding-left: 30px;
            position: relative;
            margin-bottom: var(--spacing-lg);
            color: var(--ink-deep);
        }

        .reinforcement-tech-card li:last-child {
            margin-bottom: 0;
        }

        .reinforcement-tech-card li::before {
            content: "→";
            position: absolute;
            left: 0;
            color: var(--primary);
            font-weight: bold;
        }

        /* ==========================================================================
           SECCIÓN 3 — EXPERIENCIA INTERACTIVA: LA TRAMPA DE LA COMPETENCIA
           ========================================================================== */
        .calculator-lies-experience {
            margin-top: var(--spacing-xxxl);
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xxl);
            position: relative;
        }

        /* Subtle Shifting Ambient Glow Background */
        .calculator-lies-experience::after {
            content: "";
            position: absolute;
            bottom: 50px;
            right: 0px;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0;
            pointer-events: none;
            transition: background 0.8s ease-in-out, opacity 0.8s ease-in-out;
            z-index: 0;
            will-change: background, opacity;
            transform: translate3d(0, 0, 0);
        }

        .calculator-lies-experience.active-step-1::after {
            background: rgba(242, 169, 24, 0.4);
            opacity: 0.12;
        }

        .calculator-lies-experience.active-step-2::after {
            background: rgba(228, 30, 63, 0.4);
            opacity: 0.15;
        }

        .calculator-lies-experience.active-step-3::after {
            background: rgba(0, 100, 224, 0.4);
            opacity: 0.12;
        }

        .calculator-lies-experience.active-step-4::after {
            background: rgba(49, 162, 76, 0.4);
            opacity: 0.12;
        }

        /* Stepper navigation bar */
        .lies-stepper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-md);
            border-bottom: none;
            padding-bottom: 0;
            background: rgba(10, 19, 23, 0.03);
            padding: 8px;
            border-radius: var(--rounded-xl);
            border: 1px solid var(--hairline-soft);
        }

        .lie-step-btn {
            font-family: inherit;
            background: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(10, 19, 23, 0.06);
            padding: var(--spacing-md) var(--spacing-base);
            text-align: left;
            cursor: pointer;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            /* Base shadow value to prevent interpolation flash */
            transform: translate3d(0, 0, 0);
            /* 3D layer composition */
            backface-visibility: hidden;
            /* Lock subpixel text rendering */
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
            margin-bottom: 0;
            border-radius: var(--rounded-lg);
            will-change: transform, box-shadow;
        }

        .lie-step-btn:not(.active):hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 100, 224, 0.25);
            box-shadow: 0 6px 20px rgba(0, 100, 224, 0.08);
            /* slightly larger and smoother shadow */
            transform: translate3d(0, -2px, 0);
            /* explicit 3d translate for subpixel text stability */
            opacity: 1;
        }

        .lie-step-btn:not(.active):hover .step-num {
            background: rgba(0, 100, 224, 0.1);
            color: var(--primary);
        }

        .lie-step-btn:not(.active):hover .step-title {
            color: var(--primary);
        }

        .lie-step-btn.active {
            border-color: var(--primary);
            background: #f0f7ff;
            box-shadow: 0 4px 12px rgba(0, 100, 224, 0.08);
            transform: translate3d(0, 0, 0);
            /* Flat on the ground */
        }

        .lie-step-btn .step-num {
            font-size: 11px;
            font-weight: 800;
            color: var(--charcoal);
            background: rgba(10, 19, 23, 0.09);
            padding: 2px 8px;
            border-radius: var(--rounded-full);
            width: fit-content;
            transition: background-color 0.2s ease, color 0.2s ease;
            flex-shrink: 0;
            pointer-events: none;
        }

        .lie-step-btn.active .step-num {
            color: white;
            background: var(--primary);
            box-shadow: 0 4px 12px rgba(0, 100, 224, 0.2);
        }

        .lie-step-btn .step-title {
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--charcoal);
            transition: color 0.2s ease;
            pointer-events: none;
        }

        .lie-step-btn.active .step-title {
            color: var(--primary);
            font-weight: 700;
        }

        .lie-step-btn br {
            display: none;
        }

        /* Stage layout (Details on Left, Simulator on Right) */
        .lies-stage {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: var(--spacing-xxxl);
            align-items: stretch;
            min-height: 480px;
        }

        /* Left Side: Warning Content Details */
        .lie-details-container {
            position: relative;
            background: white;
            border-radius: var(--rounded-xxl);
            border: 1px solid var(--hairline-soft);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
            padding: var(--spacing-xxl);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .lie-content-pane {
            display: none;
            opacity: 0;
            transform: translateY(15px);
            flex-direction: column;
            justify-content: flex-start;
            will-change: transform, opacity;
        }

        .lie-content-pane.active {
            display: flex;
            opacity: 1;
            transform: translateY(0);
        }

        .lie-card-header {
            margin: 0;
            margin-bottom: var(--spacing-md);
            padding: 0;
        }

        .lie-badge-group {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            margin-bottom: 13px;
        }

        .lie-badge-tag {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: var(--critical);
            background: rgba(228, 30, 63, 0.08);
            border: 1px solid rgba(228, 30, 63, 0.15);
            padding: 4px 8px;
            border-radius: 4px;
            line-height: 1;
            display: inline-block;
        }

        .lie-badge-category {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--primary);
            line-height: 1;
            display: inline-block;
        }

        .lie-card-header h3 {
            font-size: 26px;
            color: var(--ink-deep);
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
        }

        .lie-card-header h3 svg {
            stroke: var(--primary);
            flex-shrink: 0;
        }

        .lie-description {
            font-size: 15.5px;
            line-height: 1.6;
            color: var(--ink);
            margin: 0;
            margin-bottom: var(--spacing-lg);
            padding: 0;
            min-height: 75px;
        }

        /* Comparison Widget (Competitor vs Palena) */
        .comparison-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-lg);
        }

        .comp-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-lg);
            border-radius: var(--rounded-xl);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            background: #ffffff;
            will-change: transform;
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .comp-col.competitor {
            background: rgba(228, 30, 63, 0.04);
            border: 1.5px dashed var(--critical);
            opacity: 0.9;
        }

        .comp-col.competitor:hover {
            opacity: 1;
            background: rgba(228, 30, 63, 0.07);
            border-style: solid;
            border-color: var(--critical);
            box-shadow: 0 6px 16px rgba(228, 30, 63, 0.12);
        }

        .comp-col.palena {
            border: 2px solid transparent;
            background: linear-gradient(135deg, #ffffff, #f0f7ff) padding-box,
                linear-gradient(135deg, var(--primary-soft), var(--primary)) border-box;
            box-shadow: 0 4px 12px rgba(0, 100, 224, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .comp-col.palena:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0, 100, 224, 0.18);
            background: linear-gradient(135deg, #f0f7ff, #e0efff) padding-box,
                linear-gradient(135deg, var(--primary-soft), var(--primary)) border-box;
        }

        .comp-col.palena:hover .comp-icon-badge {
            transform: scale(1.15);
            background: var(--primary);
            color: white;
            box-shadow: 0 0 12px rgba(0, 100, 224, 0.3);
        }

        .comp-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-xs);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .competitor .comp-label {
            color: var(--critical);
        }

        .palena .comp-label {
            color: var(--primary);
        }

        .comp-icon-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .competitor .comp-icon-badge {
            background: rgba(228, 30, 63, 0.08);
            border: 1px solid rgba(228, 30, 63, 0.2);
            color: var(--critical);
        }

        .palena .comp-icon-badge {
            background: rgba(0, 100, 224, 0.08);
            border: 1px solid rgba(0, 100, 224, 0.25);
            color: var(--primary);
            box-shadow: 0 0 8px rgba(0, 100, 224, 0.12);
        }

        .comp-text {
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
        }

        .competitor .comp-text {
            color: var(--charcoal);
            opacity: 0.85;
        }

        .palena .comp-text {
            color: var(--ink-deep);
            font-weight: 700;
        }

        /* Right Side: Simulator Container */
        .lie-simulator-container {
            background: radial-gradient(circle at 10% 10%, #ffffff 0%, var(--surface-soft) 100%);
            border-radius: var(--rounded-xxl);
            border: 1px solid var(--hairline-soft);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
            padding: var(--spacing-xxl);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: visible;
        }

        .simulator-glass {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .sim-view {
            display: none;
            opacity: 0;
            flex-direction: column;
            gap: var(--spacing-lg);
        }

        .sim-view.active {
            display: flex;
            opacity: 1;
        }

        .sim-header {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1px;
            color: var(--stone);
            text-transform: uppercase;
            border-bottom: 1px solid var(--hairline-soft);
            padding-bottom: 8px;
        }

        /* Simulator 1: Empalme Grid */
        .sim-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-lg);
        }

        .sim-box {
            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
            border-radius: var(--rounded-lg);
            padding: var(--spacing-lg);
            text-align: left;
            border: 1px solid var(--hairline-soft);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .sim-box.competitor-calc {
            background: linear-gradient(145deg, #f8fafc 0%, #f1f4f7 100%);
            border: 1px dashed var(--hairline);
            box-shadow: none;
            overflow: visible !important;
        }

        .sim-box.state-danger {
            background: linear-gradient(145deg, #ffffff 0%, #fff5f5 100%);
            border: 1px solid rgba(228, 30, 63, 0.3);
            box-shadow: 0 8px 25px rgba(228, 30, 63, 0.12), inset 0 2px 10px rgba(228, 30, 63, 0.05);
        }

        .sim-box.state-warning {
            background: linear-gradient(145deg, #ffffff 0%, #fffcf5 100%);
            border: 1px solid rgba(242, 169, 24, 0.3);
            box-shadow: 0 8px 25px rgba(242, 169, 24, 0.12), inset 0 2px 10px rgba(242, 169, 24, 0.05);
        }

        .sim-box.state-success {
            background: linear-gradient(145deg, #ffffff 0%, #f5fff7 100%);
            border: 1px solid rgba(49, 162, 76, 0.3);
            box-shadow: 0 8px 25px rgba(49, 162, 76, 0.12), inset 0 2px 10px rgba(49, 162, 76, 0.05);
        }

        .sim-label {
            font-size: 10px;
            font-weight: 800;
            color: var(--stone);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }

        #empalme-icon {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

        .sim-value {
            font-size: 32px;
            font-weight: 800;
            color: var(--ink-deep);
            line-height: 1;
            letter-spacing: -1px;
        }

        .sim-value-limit {
            font-size: 32px;
            font-weight: 800;
            color: var(--critical);
            line-height: 1;
            letter-spacing: -1px;
            text-shadow: 0 0 15px rgba(228, 30, 63, 0.2);
        }

        .sim-value-select-container {
            position: relative;
            display: inline-flex;
            align-items: center;
            width: fit-content;
            border-bottom: 2px dashed rgba(0, 100, 224, 0.4);
            padding-bottom: 2px;
            cursor: pointer;
            transition: border-color 0.2s ease;
        }

        .sim-value-select-container:hover {
            border-bottom-color: var(--primary);
        }

        .system-select-val {
            font-size: 32px;
            font-weight: 800;
            color: var(--ink-deep);
            line-height: 1;
            letter-spacing: -1px;
            padding-right: 20px;
            user-select: none;
        }

        .sim-value-select-container::after {
            content: "▾";
            font-size: 16px;
            color: var(--primary);
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-55%);
            pointer-events: none;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sim-value-select-container.open::after {
            transform: translateY(-55%) rotate(180deg);
        }

        .custom-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            transform: translateY(-10px);
            background: #ffffff;
            border: 1px solid var(--hairline);
            border-radius: var(--rounded-xl);
            box-shadow: 0 12px 30px rgba(0, 100, 224, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
            min-width: 140px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 100;
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .custom-dropdown-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .custom-dropdown-option {
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 700;
            color: var(--ink-medium);
            border-radius: var(--rounded-md);
            transition: all 0.2s ease;
            cursor: pointer;
            white-space: nowrap;
            text-align: center;
        }

        .custom-dropdown-option:hover {
            background: rgba(0, 100, 224, 0.06);
            color: var(--primary);
        }

        .custom-dropdown-option.active {
            background: var(--primary);
            color: white;
        }

        .sim-sub {
            font-size: 12px;
            color: var(--slate);
            margin-top: 6px;
            font-weight: 500;
        }

        .sim-alert {
            font-size: 10px;
            font-weight: 800;
            color: white;
            background: var(--critical);
            padding: 4px 8px;
            border-radius: var(--rounded-sm);
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 12px;
            align-self: flex-start;
            box-shadow: 0 2px 8px rgba(228, 30, 63, 0.3);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .sim-footer-note {
            font-size: 13px;
            color: var(--slate);
            line-height: 1.4;
            border-top: 1px dashed var(--hairline-soft);
            padding-top: var(--spacing-md);
        }

        .text-danger {
            color: var(--critical) !important;
            font-weight: 700;
        }

        .text-success {
            color: var(--success) !important;
            font-weight: 700;
        }

        /* Simulator 2: Temperature Slider */
        .temp-slider-wrap {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }

        .temp-slider-wrap label {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink-deep);
            display: flex;
            justify-content: space-between;
        }

        .sim-range {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--hairline-soft);
            outline: none;
        }

        .sim-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 100, 224, 0.4);
            transition: transform 0.1s ease;
        }

        .sim-range::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

        .sim-grid-horizontal {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .wire-box {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .wire-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--slate);
        }

        .wire-line-wrapper {
            height: 12px;
            background: #e2e8f0;
            border-radius: var(--rounded-sm);
            position: relative;
            overflow: hidden;
            border: 1px solid var(--hairline-soft);
        }

        .wire-line {
            height: 100%;
            width: 100%;
            border-radius: var(--rounded-sm);
        }

        .wire-line.hot {
            background: linear-gradient(90deg, #ff8a00, #e41e3f);
            animation: warm-pulse 1s infinite alternate;
        }

        .wire-line.cool {
            background: linear-gradient(90deg, #0091ff, #0064e0);
        }

        .wire-temp {
            font-size: 11px;
            font-weight: 700;
            text-align: right;
        }

        /* Premium Meter Device */
        .meter-illustration {
            display: flex;
            justify-content: center;
            padding: var(--spacing-lg) 0;
            perspective: 800px;
        }

        .meter-device {
            width: 180px;
            min-height: 250px;
            background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
            border-radius: 12px 12px 60px 60px;
            box-shadow:
                0 20px 40px rgba(0, 0, 0, 0.15),
                inset 0 2px 0 rgba(255, 255, 255, 0.8),
                inset 0 -5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            padding: 12px;
            transition: border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .meter-device.smart-mode {
            background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%);
            box-shadow:
                0 20px 40px rgba(0, 100, 224, 0.12),
                inset 0 2px 0 rgba(255, 255, 255, 1),
                inset 0 -5px 15px rgba(0, 100, 224, 0.05);
            border: 1px solid rgba(0, 100, 224, 0.2);
        }

        .meter-glass {
            width: 100%;
            flex-grow: 1;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
            border-radius: 8px 8px 50px 50px;
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.6);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px 10px;
            position: relative;
            backdrop-filter: blur(4px);
        }

        .meter-device.smart-mode .meter-glass {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 100%);
            border: 1px solid rgba(255, 255, 255, 0.9);
            box-shadow: inset 0 0 20px rgba(0, 100, 224, 0.05);
        }

        .meter-brand {
            text-align: center;
            margin-bottom: 15px;
            width: 100%;
        }

        .brand-name {
            display: block;
            font-size: 12px;
            font-weight: 800;
            color: var(--charcoal);
            letter-spacing: 1px;
        }

        .meter-device.smart-mode .brand-name {
            color: var(--primary);
        }

        .brand-specs {
            display: block;
            font-size: 9px;
            color: var(--slate);
            margin-top: 2px;
        }

        .meter-device.smart-mode .brand-specs {
            color: var(--slate);
        }

        .meter-screen-modern {
            width: 100%;
            background: #cbd5e1;
            border: 2px solid #94a3b8;
            border-radius: 4px;
            padding: 6px 8px;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
            margin-bottom: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 50px;
        }

        .meter-device.smart-mode .meter-screen-modern {
            background: #f0fdf4;
            border-color: #bbf7d0;
            box-shadow: inset 0 2px 6px rgba(22, 163, 74, 0.15);
        }

        .screen-indicator {
            font-size: 10px;
            font-weight: 800;
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
            font-family: 'Courier New', Courier, monospace;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .meter-device.smart-mode .screen-indicator {
            font-size: 9px;
        }

        .screen-digits {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            font-weight: 800;
            text-align: right;
            display: flex;
            align-items: baseline;
            justify-content: flex-end;
            gap: 2px;
            letter-spacing: -1px;
        }

        .meter-device.smart-mode .screen-digits {
            font-size: 15px;
        }

        .screen-digits .unit {
            font-size: 11px;
            font-weight: 700;
            font-family: var(--font-sans);
            letter-spacing: 0;
        }

        .meter-screen-modern .text-danger {
            color: #dc2626 !important;
            text-shadow: 0 0 1px rgba(220, 38, 38, 0.2);
        }

        .meter-device.smart-mode .meter-screen-modern .text-success {
            color: #16a34a !important;
            text-shadow: 0 0 1px rgba(22, 163, 74, 0.3);
        }

        /* Analog Disc Window */
        .meter-mechanism {
            width: 80px;
            height: 25px;
            background: #0f172a;
            border-radius: 4px;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8);
            position: relative;
            overflow: hidden;
            border: 2px solid #94a3b8;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .meter-device.smart-mode .meter-mechanism {
            display: none;
        }

        .analog-disc {
            width: 100%;
            height: 6px;
            background: repeating-linear-gradient(90deg,
                    #94a3b8 0px,
                    #ffffff 30px,
                    #94a3b8 60px,
                    #94a3b8 115px,
                    #000000 115px,
                    #000000 120px);
            background-size: 120px 100%;
            border-radius: 1px;
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
        }

        .analog-disc.rotating {
            animation: spin-disc 1.5s linear infinite;
        }

        @keyframes spin-disc {
            0% {
                background-position: 120px 0;
            }

            100% {
                background-position: 0px 0;
            }
        }

        /* Smart Meter LEDs */
        .smart-leds {
            display: none;
            gap: 10px;
            margin-bottom: 15px;
        }

        .meter-device.smart-mode .smart-leds {
            display: flex;
        }

        .led {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #334155;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .led.active-green {
            background: #10b981;
            box-shadow: 0 0 8px #10b981, inset 0 1px 2px rgba(255, 255, 255, 0.5);
            animation: pulse-led 2s infinite;
        }

        @keyframes pulse-led {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        .meter-barcode {
            font-family: monospace;
            font-size: 8px;
            color: rgba(0, 0, 0, 0.4);
            letter-spacing: 1px;
            margin-top: auto;
            white-space: nowrap;
        }

        .meter-device.smart-mode .meter-barcode {
            color: rgba(0, 100, 224, 0.4);
        }

        .sim-flex {
            display: flex;
            gap: var(--spacing-sm);
        }

        .sec-manual-link {
            font-size: 12px;
            color: var(--slate);
            text-decoration: underline;
            text-decoration-color: transparent;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
            transition: all 0.3s ease;
            margin-top: 8px;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.7;
        }

        .sec-manual-link:hover {
            opacity: 1;
            text-decoration-color: var(--slate);
        }

        .sim-toggle-btn {
            flex: 1;
            background: var(--surface-soft);
            border: 1px solid var(--hairline-soft);
            color: var(--slate);
            font-size: 13px;
            font-weight: 700;
            padding: 10px 14px;
            border-radius: var(--rounded-md);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .sim-toggle-btn.active {
            background: var(--ink-deep);
            color: white;
            border-color: var(--ink-deep);
        }

        .sim-horizontal-layout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-xl);
            width: 100%;
            padding: var(--spacing-xs) 0;
        }

        .sim-controls-side {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            flex: 1;
            max-width: 280px;
        }

        .sim-controls-side .sim-footer-note {
            text-align: left;
            margin-top: 0;
            line-height: 1.4;
        }

        .sim-controls-side .sec-manual-link {
            margin-left: 0;
            margin-right: auto;
            margin-top: 0;
        }

        .sim-flex-vertical {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
            width: 100%;
        }

        @media (max-width: 640px) {
            .sim-horizontal-layout {
                flex-direction: column;
                gap: var(--spacing-lg);
            }

            .sim-controls-side {
                max-width: 100%;
            }

            .sim-controls-side .sim-footer-note {
                text-align: center;
            }

            .sim-controls-side .sec-manual-link {
                margin-left: auto;
                margin-right: auto;
                margin-top: 8px;
            }
        }

        /* Simulator 4: Legal Timeline */
        .timeline-box {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
            padding: var(--spacing-xs) 0;
        }

        .time-step {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-md);
            position: relative;
        }

        .time-step:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 11px;
            top: 24px;
            width: 2px;
            bottom: calc(-1 * var(--spacing-lg));
            background: var(--hairline-soft);
            transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .time-step.completed:not(:last-child)::after {
            background: var(--success);
        }

        .time-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--surface-soft);
            border: 2px solid var(--hairline-soft);
            color: var(--stone);
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
            z-index: 1;
            flex-shrink: 0;
        }

        .time-step.completed .time-dot {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }

        .time-step.in-progress .time-dot {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
            box-shadow: 0 0 12px rgba(0, 100, 224, 0.5);
            animation: pulse-timeline-dot 1.8s infinite ease-in-out;
        }

        @keyframes pulse-timeline-dot {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 8px rgba(0, 100, 224, 0.4);
            }

            50% {
                transform: scale(1.12);
                box-shadow: 0 0 16px rgba(0, 100, 224, 0.8);
            }
        }

        .time-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--slate);
            margin-top: 3px;
            line-height: 1.4;
            transition: color 0.4s ease, font-weight 0.4s ease;
        }

        .time-step.completed .time-text,
        .time-step.in-progress .time-text {
            color: var(--ink-deep);
            font-weight: 700;
        }

        /* Premium CGE Status Panel */
        .cge-status-panel {
            background: var(--canvas);
            border: 1px solid var(--hairline-soft);
            border-radius: var(--rounded-xxl);
            padding: var(--spacing-xl);
            margin-top: var(--spacing-lg);
            width: 100%;
            max-width: 440px;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 12px 30px rgba(0, 100, 224, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
            text-align: left;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .status-panel-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
            border-bottom: 1px solid var(--hairline-soft);
            padding-bottom: var(--spacing-md);
        }

        .status-step-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .status-progress-track {
            width: 130px;
            height: 6px;
            background: var(--surface-soft);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--hairline-soft);
        }

        .status-progress-bar {
            width: 5%;
            height: 100%;
            background: linear-gradient(90deg, var(--primary-soft), var(--primary));
            border-radius: 10px;
            transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .status-panel-main {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-md);
        }

        .status-icon-wrapper {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(0, 100, 224, 0.06);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(0, 100, 224, 0.1);
        }

        .status-info {
            flex-grow: 1;
        }

        .status-title {
            margin: 0 0 6px 0;
            font-size: 16px;
            font-weight: 700;
            color: var(--ink-deep);
            letter-spacing: -0.01em;
        }

        .status-description {
            margin: 0;
            font-size: 13px;
            line-height: 1.45;
            color: var(--ink-soft);
            min-height: 38px;
        }

        .timeline-actions {
            display: flex;
            justify-content: center;
        }

        .btn-timeline-push {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--rounded-md);
            padding: 10px 18px;
            font-weight: 700;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 100, 224, 0.2);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-timeline-push:hover {
            background: var(--primary-deep);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 100, 224, 0.3);
        }

        /* Controls Footer */
        .lies-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: none;
            padding-top: var(--spacing-lg);
        }

        .btn-lie-nav {
            background: var(--surface-soft);
            border: 1px solid var(--hairline-soft);
            color: var(--ink-deep);
            font-size: 14px;
            font-weight: 700;
            padding: 12px 20px;
            border-radius: var(--rounded-lg);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-lie-nav:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        .btn-lie-nav:active {
            transform: translateY(0);
        }

        .btn-lie-nav.prev svg {
            margin-right: 2px;
        }

        .btn-lie-nav.next svg {
            margin-left: 2px;
        }

        .lies-dots {
            display: flex;
            gap: var(--spacing-xs);
        }

        .lie-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--hairline);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .lie-dot.active {
            background: var(--primary);
            transform: scale(1.3);
        }

        /* KEYFRAMES FOR ANIMATIONS */
        @keyframes pulse-glow {

            0%,
            100% {
                text-shadow: 0 0 4px rgba(228, 30, 63, 0.1);
                transform: scale(1);
            }

            50% {
                text-shadow: 0 0 12px rgba(228, 30, 63, 0.4);
                transform: scale(1.02);
            }
        }

        @keyframes warm-pulse {
            0% {
                opacity: 0.9;
            }

            100% {
                opacity: 1;
                filter: brightness(1.2) drop-shadow(0 0 4px #e41e3f);
            }
        }

        @keyframes blink-light {

            0%,
            100% {
                opacity: 0.4;
            }

            50% {
                opacity: 1;
            }
        }

        /* MEDIA QUERIES FOR RESPONSIVENESS */
        @media (max-width: 768px) {
            .calculator-lies-experience {
                gap: var(--spacing-lg);
                margin-top: 20px !important;
                margin-bottom: 0 !important;
            }

            .lies-stepper {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                gap: 8px !important;
                padding: 10px var(--spacing-xl) !important;
                margin: 0 calc(var(--spacing-xl) * -1) 8px calc(var(--spacing-xl) * -1) !important;
                background: #ffffff !important;
                box-shadow: 0 4px 12px rgba(10, 19, 23, 0.05) !important;
                border: 1px solid var(--hairline-soft) !important;
                border-left: none !important;
                border-right: none !important;
                border-radius: 0 !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                white-space: nowrap !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
                position: -webkit-sticky !important;
                position: sticky !important;
                top: 63px !important;
                z-index: 900 !important;
                transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }

            .main-header.header-hidden~main .lies-stepper {
                top: 0 !important;
            }

            .lies-stepper::-webkit-scrollbar {
                display: none !important;
            }

            .lie-step-btn {
                flex: 0 0 auto !important;
                width: auto !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 8px !important;
                padding: 10px 14px !important;
                margin: 0 !important;
                background: #ffffff !important;
                border: 1px solid rgba(10, 19, 23, 0.15) !important;
                border-radius: var(--rounded-lg) !important;
                box-shadow: 0 2px 8px rgba(10, 19, 23, 0.04) !important;
                opacity: 1 !important;
                transform: none !important;
                transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
                box-sizing: border-box !important;
            }

            .lie-step-btn:not(.active):hover {
                background: rgba(255, 255, 255, 0.9) !important;
                border-color: rgba(10, 19, 23, 0.12) !important;
            }

            .lie-step-btn.active {
                opacity: 1 !important;
                border-color: var(--primary) !important;
                background: #f0f7ff !important;
                box-shadow: 0 4px 12px rgba(0, 100, 224, 0.08) !important;
                border-width: 1px !important;
                border-style: solid !important;
            }

            .lie-step-btn.active .step-num {
                background: var(--primary) !important;
                color: white !important;
                box-shadow: 0 4px 12px rgba(0, 100, 224, 0.2) !important;
            }

            .lie-step-btn.active .step-title {
                color: var(--primary) !important;
                font-weight: 700 !important;
            }

            .lie-step-btn .step-num {
                font-size: 11px !important;
                font-weight: 800 !important;
                color: var(--charcoal) !important;
                background: rgba(10, 19, 23, 0.09) !important;
                padding: 3px 8px !important;
                border-radius: var(--rounded-full) !important;
                width: fit-content !important;
                display: inline-block !important;
                flex-shrink: 0 !important;
                margin-right: 0 !important;
            }

            .lie-step-btn .step-title {
                font-size: 12px !important;
                color: var(--charcoal) !important;
                font-weight: 700 !important;
                text-transform: uppercase !important;
                letter-spacing: 0.4px !important;
                white-space: normal !important;
                line-height: 1.2 !important;
                display: block !important;
                max-width: none !important;
            }

            .lie-step-btn br {
                display: inline !important;
            }

            .lies-stage {
                grid-template-columns: 1fr !important;
                gap: 0 !important;
                min-height: auto !important;
                margin-left: calc(var(--spacing-xl) * -1) !important;
                margin-right: calc(var(--spacing-xl) * -1) !important;
                width: auto !important;
            }

            .lie-details-container {
                padding: var(--spacing-lg) !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                position: relative !important;
            }

            .lie-details-container::before {
                display: none !important;
            }

            .lie-simulator-container {
                padding: var(--spacing-lg) !important;
                border: none !important;
                border-top: 1px dashed var(--hairline-soft) !important;
                border-radius: 0 !important;
                box-shadow: none !important;
            }

            .lie-badge-group {
                justify-content: center !important;
                margin: 0 !important;
                margin-bottom: 13px !important;
            }

            .lie-badge-tag {
                font-size: 8.5px !important;
                padding: 3px 6px !important;
            }

            .lie-badge-category {
                font-size: 9px !important;
            }

            .lie-card-header {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                margin: 0 !important;
                margin-bottom: var(--spacing-md) !important;
                padding: 0 !important;
            }

            .lie-details-container h3 {
                font-size: 20px !important;
                justify-content: center !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .lie-content-pane {
                text-align: center !important;
                align-items: center !important;
            }

            .lie-description {
                font-size: 14px !important;
                line-height: 1.5 !important;
                margin: 0 !important;
                margin-bottom: var(--spacing-lg) !important;
                padding: 0 !important;
                min-height: 85px !important;
            }

            .comparison-row {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }

            .comp-col {
                padding: 12px 8px !important;
                gap: 8px !important;
            }

            .comp-col.palena {
                background: linear-gradient(135deg, #f0f7ff, #e0efff) padding-box,
                    linear-gradient(135deg, var(--primary-soft), var(--primary)) border-box !important;
                box-shadow: 0 4px 12px rgba(0, 100, 224, 0.12) !important;
                transform: none !important;
            }

            .comp-col.palena:hover {
                transform: none !important;
            }

            .comp-icon-badge {
                display: none !important;
            }

            .comp-label {
                font-size: 11px !important;
                letter-spacing: 0.5px !important;
            }

            .comp-text {
                font-size: 12px !important;
                line-height: 1.35 !important;
            }

            #empalme-icon {
                width: 20px !important;
                height: 20px !important;
                min-width: 20px !important;
                min-height: 20px !important;
                flex-shrink: 0 !important;
            }

            #empalme-label-container {
                font-size: 12px !important;
                gap: 6px !important;
            }

            .simulator-glass {
                padding: var(--spacing-lg) !important;
            }

            .sim-header {
                font-size: 12px !important;
                text-align: center !important;
            }

            .sim-value,
            .sim-value-limit,
            .system-select,
            .system-select-val {
                font-size: 22px !important;
            }

            .meter-circle {
                width: 120px !important;
                height: 120px !important;
            }

            .meter-screen {
                width: 90px !important;
                height: 52px !important;
            }

            .meter-num {
                font-size: 11px !important;
            }

            .meter-arrow {
                font-size: 7px !important;
            }

            .sim-toggle-btn {
                font-size: 12px !important;
                padding: 10px 12px !important;
            }

            .time-text {
                font-size: 12px !important;
            }

            .lies-controls {
                margin-top: calc(var(--spacing-lg) * -1) !important;
                padding-top: var(--spacing-lg) !important;
                padding-bottom: var(--spacing-lg) !important;
                padding-left: var(--spacing-xl) !important;
                padding-right: var(--spacing-xl) !important;
                margin-left: calc(var(--spacing-xl) * -1) !important;
                margin-right: calc(var(--spacing-xl) * -1) !important;
                width: auto !important;
                background: var(--surface-soft) !important;
                border-top: 1px dashed var(--hairline-soft) !important;
                border-bottom: 1px solid var(--hairline-soft) !important;
            }

            .btn-lie-nav {
                padding: 10px 14px !important;
                font-size: 12px !important;
                background: #ffffff !important;
                border: 1px solid var(--hairline-soft) !important;
                color: var(--ink-deep) !important;
            }

            .btn-lie-nav:hover,
            .btn-lie-nav:active {
                background: var(--primary) !important;
                color: white !important;
                border-color: var(--primary) !important;
            }

            .btn-lie-nav span {
                display: none !important;
            }

            /* ==========================================
               ACCESIBILIDAD Y TAMAÑO MÍNIMO DE FUENTES (MÓVIL)
               ========================================== */

            /* --- Textos Estándar y Descripciones (Mínimo 16px) --- */
            .lie-description,
            .sim-header,
            .sim-toggle-btn,
            .time-text,
            .btn-lie-nav,
            .nav-link,
            .caso-card p,
            .qualifier-header,
            .tramites-description,
            .warranty-desc,
            .warranty-stat-name,
            .integrity-title,
            .integrity-desc,
            #sec-status-note,
            .read-more-btn,
            #btn-credito-verde {
                font-size: 16px !important;
            }

            /* --- Elementos Auxiliares y Detalles (Mínimo 14px) --- */
            .lie-step-btn .step-num,
            .comparison-header,
            .meter-num,
            .meter-arrow,
            .btn-text-sub,
            .btn-primary-premium .btn-text-sub,
            .cta-speed-badge,
            .hero-trust-small,
            .solucion-card-number,
            .solucion-warning-box,
            .tramite-tab,
            .equipos-toggle-btn,
            .sim-outage-btn,
            .viz-caption,
            .qualifier-note,
            .thermal-note,
            #cge-status-badge,
            #btn-replay-cge,
            .tramite-badge,
            .roi-label,
            .roi-investment-info,
            .roi-cuotas-info,
            .warranty-cert-label,
            .warranty-stat-unit,
            .warranty-stat-sub {
                font-size: 14px !important;
            }

            .lie-step-btn .step-title {
                font-size: 12px !important;
            }

            .btn-text-sub,
            .btn-primary-premium .btn-text-sub {
                line-height: 1.35 !important;
            }

            .lie-badge {
                font-size: 11px !important;
            }
        }

        @media (max-width: 900px) {
            .reinforcement-grid {
                grid-template-columns: 1fr;
                gap: var(--spacing-xl);
            }

            #riesgos {
                padding-top: 60px !important;
                padding-bottom: 0 !important;
            }
        }

        /* ==========================================================================
           LEY DE NET BILLING MODAL STYLES
           ========================================================================== */
        .garantias-link,
        .nb-modal-trigger {
            color: var(--primary);
            text-decoration: underline;
            text-underline-offset: 4px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline;
        }

        .garantias-link:hover,
        .nb-modal-trigger:hover {
            color: var(--primary-soft);
            text-shadow: 0 0 10px rgba(0, 145, 255, 0.2);
        }

        .info-trigger {
            transition: all 0.2s ease;
        }

        .info-trigger:hover {
            transform: scale(1.15);
            filter: brightness(1.2);
        }

        .nb-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(10, 19, 23, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            padding: var(--spacing-xl);
        }

        .nb-modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .nb-modal-container {
            background: var(--canvas);
            border-radius: var(--rounded-xxl);
            width: 100%;
            max-width: 600px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.05);
            position: relative;
            transform: scale(0.95) translateY(10px);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--hairline-soft);
        }

        .nb-modal-overlay.active .nb-modal-container {
            transform: scale(1) translateY(0);
        }

        .nb-modal-close {
            position: absolute;
            top: var(--spacing-lg);
            right: var(--spacing-lg);
            background: var(--surface-soft);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--ink-soft);
            transition: all 0.2s ease;
            z-index: 10;
        }

        .nb-modal-close:hover {
            background: var(--hairline-soft);
            color: var(--ink-deep);
            transform: rotate(90deg);
        }

        .nb-modal-close svg {
            width: 20px;
            height: 20px;
        }

        .nb-modal-header {
            padding: var(--spacing-xxl) 60px var(--spacing-md) var(--spacing-xxl);
            border-bottom: 1px solid var(--hairline-soft);
        }

        .nb-modal-title {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: var(--ink-deep);
            line-height: 1.3;
        }

        .nb-modal-body {
            padding: var(--spacing-xxl);
            overflow-y: auto;
            max-height: 60vh;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-base);
        }

        .nb-modal-body p {
            margin: 0;
            font-size: 15px;
            line-height: 1.6;
            color: var(--ink-medium);
        }

        .nb-modal-links-section {
            margin-top: var(--spacing-base);
            border-top: 1px solid var(--hairline-soft);
            padding-top: var(--spacing-lg);
        }

        .nb-modal-links-section h4 {
            margin: 0 0 var(--spacing-md);
            font-size: 14px;
            font-weight: 700;
            color: var(--ink-deep);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .nb-modal-links-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }

        .nb-document-link {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-base);
            padding: var(--spacing-md) var(--spacing-lg);
            border-radius: var(--rounded-lg);
            background: var(--surface-soft);
            border: 1px solid var(--hairline-soft);
            border-left: 4px solid var(--primary);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .nb-document-link:hover {
            background: #fff;
            border-color: var(--primary);
            box-shadow: 0 8px 24px rgba(0, 100, 224, 0.08);
            transform: translateY(-2px);
        }

        .nb-link-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex-grow: 1;
        }

        .nb-link-text strong {
            font-size: 14px;
            color: var(--ink-deep);
            font-weight: 700;
        }

        .nb-link-text span {
            font-size: 12px;
            color: var(--ink-soft);
            line-height: 1.4;
        }

        .nb-link-action {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(0, 100, 224, 0.05);
            border: 1px solid rgba(0, 100, 224, 0.1);
            color: var(--primary);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            flex-shrink: 0;
        }

        .nb-document-link:hover .nb-link-action {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            box-shadow: 0 4px 10px rgba(0, 100, 224, 0.2);
        }

        .nb-link-action svg {
            width: 16px;
            height: 16px;
            transition: transform 0.2s ease;
        }

        .nb-document-link:hover .nb-link-action svg {
            transform: translate(2px, -2px);
        }

        .nb-modal-footer {
            padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-xxl);
            border-top: 1px solid var(--hairline-soft);
            display: flex;
            justify-content: flex-end;
            background: var(--surface-soft);
        }

        .btn-primary-style {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 28px;
            border-radius: var(--rounded-full);
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 100, 224, 0.2);
            font-size: 14px;
        }

        .btn-primary-style:hover {
            background: var(--primary-deep);
            box-shadow: 0 6px 14px rgba(0, 100, 224, 0.3);
            transform: translateY(-1px);
        }

        .btn-primary-style:active {
            transform: translateY(0);
        }

        body.nb-modal-open {
            overflow: hidden !important;
        }

        /* Floating CTA Button */
        .btn-floating-cta {
            position: fixed;
            z-index: 999;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary) 100%);
            color: var(--on-primary);
            text-decoration: none;
            font-weight: 700;
            font-size: 15px;
            padding: 14px 24px;
            border-radius: 50px;
            box-shadow: 0 10px 25px rgba(0, 100, 224, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
            opacity: 0;
            visibility: hidden;
            cursor: pointer;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s ease,
                box-shadow 0.2s ease;
        }

        /* Desktop specific styling */
        @media (min-width: 769px) {
            .btn-floating-cta {
                right: 30px;
                bottom: 30px;
                transform: translateY(20px) scale(0.95);
            }

            .btn-floating-cta.show {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
            }

            .btn-floating-cta.show:hover {
                transform: translateY(-2px) scale(1.02);
                box-shadow: 0 14px 30px rgba(0, 100, 224, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
                background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
            }

            .btn-floating-cta.show:active {
                transform: translateY(0) scale(0.98);
            }
        }

        /* Mobile specific styling */
        @media (max-width: 768px) {
            .btn-floating-cta {
                left: 50%;
                bottom: 24px;
                transform: translate(-50%, 20px) scale(0.95);
                width: calc(100% - 48px);
                max-width: 320px;
                font-size: 16px;
                padding: 16px 20px;
            }

            .btn-floating-cta.show {
                opacity: 1;
                visibility: visible;
                transform: translate(-50%, 0) scale(1);
            }

            .btn-floating-cta.show:active {
                transform: translate(-50%, 0) scale(0.97);
            }
        }

        /* Micro-animation (pulse effect for the icon) */
        .btn-floating-cta .floating-cta-icon {
            animation: cta-icon-pulse 2s infinite ease-in-out;
        }

        @keyframes cta-icon-pulse {

            0%,
            100% {
                transform: scale(1);
                filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
            }

            50% {
                transform: scale(1.18);
                filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1));
            }
        }

        /* ==========================================================================
           HERO VARIANTE PREMIUM CON UX/UI AVANZADO (WOW EFFECT EDITION)
           ========================================================================== */
        .hero-variant-section {
            position: relative;
            background-image: url("img/cel7-0047.avif");
            background-size: 125% 125%;
            /* Zoom in slightly to cut off outer edges and raw borders */
            background-position: 50% 12%;
            /* Shift higher up to completely crop out the bottom pink house wall */
            background-repeat: no-repeat;
            padding: 50px 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            min-height: calc(100vh - 80px);
            transition: background-position 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hero-video-variant {
            background-image: none !important;
        }

        .hero-video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
            will-change: transform;
            transform: scale(1.08);
            /* scale slightly to allow smooth translation parallax */
        }

        /* Centered Video Variant Layout */
        #hero-variant-video .hero-variant-bento {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            grid-template-columns: none;
        }

        #hero-variant-video .hero-variant-right-col-empty {
            display: none !important;
        }

        #hero-variant-video .hero-variant-main-card {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            background: rgba(12, 22, 28, 0.42) !important;
            /* Slightly darker translucent blue-slate tint */
            backdrop-filter: blur(16px) !important;
            /* Clearer refraction, less muddy than 25px */
            -webkit-backdrop-filter: blur(16px) !important;
            border: none !important;
            box-shadow:
                0 40px 100px rgba(0, 0, 0, 0.7),
                0 0 80px rgba(0, 145, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            /* Internal edge highlight */
        }

        #hero-variant-video .hero-variant-main-card::before {
            display: none !important;
        }

        #hero-variant-video .hero-variant-main-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                /* light highlight from top center */
                linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
            border-radius: var(--rounded-xxxl) !important;
            border: 1px solid rgba(255, 255, 255, 0.06) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
            z-index: -1;
            pointer-events: none;
        }

        #hero-variant-video .hero-variant-card-content {
            align-items: center;
            text-align: center;
        }

        #hero-variant-video .hero-variant-badge {
            align-self: center;
            margin-left: auto;
            margin-right: auto;
        }

        #hero-variant-video .hero-variant-main-card h1 {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            max-width: 850px;
            line-height: 1.28 !important;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.55), 0 0 25px rgba(0, 145, 255, 0.12) !important;
        }

        #hero-variant-video .hero-variant-description {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            max-width: 800px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        }

        #hero-variant-video .hero-variant-cta-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            width: 100%;
        }

        #hero-variant-video .hero-variant-divider {
            margin-left: auto;
            margin-right: auto;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent 100%) !important;
        }

        #hero-variant-video .hero-variant-trust-row {
            justify-content: center;
            width: 100%;
        }

        #hero-variant-video .text-highlight-variant {
            background: linear-gradient(135deg, #00f2fe 0%, #00bcff 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.5)) !important;
        }

        #hero-variant-video .text-highlight-variant::after {
            background: linear-gradient(90deg, #00f2fe, #00bcff) !important;
            box-shadow: 0 0 12px rgba(0, 242, 254, 0.6) !important;
        }

        #hero-variant-video .hero-variant-badge {
            background: rgba(0, 145, 255, 0.18) !important;
            border: 1px solid rgba(0, 210, 255, 0.35) !important;
            color: #00d2ff !important;
            text-shadow: 0 0 10px rgba(0, 210, 255, 0.2) !important;
        }

        #hero-variant-video .pulse-dot {
            background-color: #00d2ff !important;
            box-shadow: 0 0 10px #00d2ff !important;
        }

        #hero-variant-video .hero-variant-overlay {
            background: radial-gradient(circle at 50% 50%, rgba(0, 145, 255, 0.18) 0%, rgba(10, 19, 23, 0.5) 60%, rgba(10, 19, 23, 0.85) 100%) !important;
        }

        .hero-variant-glow-orb {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 215, 120, 0.28) 0%, rgba(255, 150, 60, 0.08) 50%, transparent 100%);
            filter: blur(80px);
            pointer-events: none;
            z-index: 2;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 30%;
            will-change: transform;
        }

        .hero-variant-glow-orb-2 {
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 242, 254, 0.15) 0%, rgba(0, 100, 224, 0.05) 50%, transparent 100%);
            filter: blur(100px);
            pointer-events: none;
            z-index: 2;
            top: 20%;
            right: 10%;
            animation: float-glow 15s infinite ease-in-out;
            will-change: transform, opacity;
        }

        @keyframes float-glow {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.7;
            }

            33% {
                transform: translate(-60px, 40px) scale(1.15);
                opacity: 0.95;
            }

            66% {
                transform: translate(40px, -70px) scale(0.9);
                opacity: 0.6;
            }
        }

        .hero-variant-sun-flare {
            position: absolute;
            top: -200px;
            right: -200px;
            width: 700px;
            height: 700px;
            border-radius: 50%;
            background: radial-gradient(circle,
                    rgba(255, 235, 180, 0.35) 0%,
                    rgba(255, 180, 100, 0.12) 40%,
                    rgba(255, 120, 50, 0.03) 70%,
                    transparent 100%);
            filter: blur(120px);
            mix-blend-mode: screen;
            /* Blends additively with the background photo to look like real light exposure */
            pointer-events: none;
            z-index: 2;
            opacity: 0.85;
        }

        @media (min-width: 1024px) {
            .hero-variant-sun-flare {
                width: 1000px;
                height: 1000px;
                top: -350px;
                right: -350px;
                filter: blur(180px);
            }
        }

        .hero-variant-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgba(10, 19, 23, 0.98) 0%, rgba(10, 19, 23, 0.88) 35%, rgba(10, 19, 23, 0.2) 75%, rgba(10, 19, 23, 0) 100%);
            z-index: 1;
        }

        .hero-variant-section .container-wide {
            position: relative;
            z-index: 3;
            width: 100%;
        }

        .hero-variant-bento {
            display: grid;
            grid-template-columns: 1.4fr 0.6fr;
            gap: var(--spacing-xxxl);
            align-items: center;
        }

        /* Hero Section 1A Specific Layout Enhancements */
        .hero-before-after .container-wide {
            max-width: 1400px;
        }

        @media (min-width: 1025px) {
            .hero-before-after .hero-variant-bento {
                grid-template-columns: 1.15fr 0.85fr;
                gap: var(--spacing-xxxl);
            }
        }

        /* Premium Overlapping Card Stack Comparison Styling */
        .bill-stack-container {
            position: relative;
            width: 100%;
            height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 1200px;
            margin-top: 10px;
        }

        .bill-card {
            position: absolute;
            width: 78%;
            max-width: 410px;
            aspect-ratio: 674 / 757;
            height: auto;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            border-radius: 24px;
        }

        .bill-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
            border-radius: 24px;
        }

        .bill-card.before-card {
            left: 2%;
            top: 12%;
            z-index: 1;
            transform: rotate(-5deg) scale(0.92);
            filter: brightness(0.7) blur(1px);
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.35);
        }

        .bill-card.after-card {
            right: 2%;
            top: 4%;
            z-index: 2;
            transform: rotate(2deg) scale(1.0);
            box-shadow: 0 25px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 145, 255, 0.2);
        }

        /* Swapped state: when 'before' is hovered/active */
        .bill-stack-container.show-before .before-card {
            z-index: 3;
            transform: rotate(-1deg) scale(1.03) translateY(-15px);
            filter: brightness(1) blur(0);
            box-shadow: 0 25px 35px rgba(0, 0, 0, 0.55), 0 0 25px rgba(228, 30, 63, 0.3);
        }

        .bill-stack-container.show-before .after-card {
            z-index: 1;
            transform: rotate(6deg) scale(0.88) translateY(35px) translateX(25px);
            filter: brightness(0.6) blur(2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
        }

        /* Hovering after-card directly or default state when not showing before */
        .bill-stack-container.show-after .after-card {
            z-index: 3;
            transform: rotate(1deg) scale(1.03) translateY(-15px);
            filter: brightness(1) blur(0);
            box-shadow: 0 25px 35px rgba(0, 0, 0, 0.55), 0 0 25px rgba(34, 197, 94, 0.3);
        }

        .bill-stack-container.show-after .before-card {
            z-index: 1;
            transform: rotate(-7deg) scale(0.88) translateY(35px) translateX(-25px);
            filter: brightness(0.6) blur(2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
        }

        /* Borderless and Backgroundless Navigation controls */
        .bill-stack-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 24px;
            user-select: none;
            -webkit-user-select: none;
        }

        .stack-nav-btn {
            background: none;
            border: none;
            font-family: var(--font-primary, inherit);
            font-size: 1.05rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            outline: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .stack-nav-btn:hover {
            color: rgba(255, 255, 255, 0.85);
        }

        .stack-nav-btn.active {
            color: #ffffff;
            font-weight: 700;
        }

        /* Nav values (the prices) */
        .stack-nav-btn .nav-price-red {
            color: rgba(255, 255, 255, 0.5);
            transition: color 0.3s ease;
        }

        .stack-nav-btn.active .nav-price-red {
            color: rgb(244, 63, 94);
            text-shadow: 0 0 10px rgba(244, 63, 94, 0.3);
        }

        .stack-nav-btn .nav-price-green {
            color: rgba(255, 255, 255, 0.5);
            transition: color 0.3s ease;
        }

        .stack-nav-btn.active .nav-price-green {
            color: rgb(34, 197, 94);
            text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
        }

        /* Underline indicator for active selection */
        .stack-nav-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: currentColor;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transform: translateX(-50%);
            border-radius: 2px;
        }

        .stack-nav-btn.active::after {
            width: 80%;
        }

        .stack-nav-btn[data-target="before"].active::after {
            background: rgb(244, 63, 94);
            box-shadow: 0 0 8px rgba(244, 63, 94, 0.5);
        }

        .stack-nav-btn[data-target="after"].active::after {
            background: rgb(34, 197, 94);
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
        }

        .nav-divider {
            color: rgba(255, 255, 255, 0.2);
            font-size: 1.1rem;
            font-weight: 300;
        }

        /* Dot Indicators */
        .label-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            display: inline-block;
            flex-shrink: 0;
        }

        .dot-red {
            background-color: rgb(244, 63, 94);
            box-shadow: 0 0 8px rgba(244, 63, 94, 0.8);
        }

        .dot-green {
            background-color: rgb(34, 197, 94);
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
        }

        /* Floating label styling INSIDE cards, top-left corner */
        .bill-card .bill-label {
            position: absolute;
            top: -12px;
            /* Positioned slightly higher, overlapping the top border */
            left: 16px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #ffffff;
            background: #0f172a;
            /* Slate-900 contrast background */
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            pointer-events: none;
            z-index: 10;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Dim the background card's label */
        .bill-stack-container.show-after .before-card .bill-label,
        .bill-stack-container.show-before .after-card .bill-label {
            opacity: 0.3;
            transform: scale(0.92);
        }

        /* Premium capsule dark theme styling (for .hero-variant-right-col / Section 1A) */
        .hero-variant-right-col .bill-stack-container {
            position: relative;
        }

        .hero-variant-right-col .bill-stack-nav {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 0;
            background: rgba(15, 23, 42, 0.85);
            /* Deep slate-900 contrast background */
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 999px;
            padding: 6px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
            z-index: 20;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Dynamic glow based on active state (dark theme) */
        .hero-variant-right-col .bill-stack-container.show-before .bill-stack-nav {
            border-color: rgba(244, 63, 94, 0.25);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 20px rgba(244, 63, 94, 0.15);
        }

        .hero-variant-right-col .bill-stack-container.show-after .bill-stack-nav {
            border-color: rgba(34, 197, 94, 0.25);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 20px rgba(34, 197, 94, 0.15);
        }

        .hero-variant-right-col .stack-nav-btn {
            font-size: 1.05rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.65);
            padding: 8px 16px;
            border-radius: 999px;
            background: transparent;
            border: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hero-variant-right-col .stack-nav-btn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.05);
        }

        .hero-variant-right-col .stack-nav-btn[data-target="before"].active {
            color: #ffffff !important;
            background: #f43f5e !important;
            box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
        }

        .hero-variant-right-col .stack-nav-btn[data-target="after"].active {
            color: #ffffff !important;
            background: #22c55e !important;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
        }

        .hero-variant-right-col .stack-nav-btn .nav-price-red,
        .hero-variant-right-col .stack-nav-btn .nav-price-green {
            color: rgba(255, 255, 255, 0.5);
            transition: color 0.3s ease;
        }

        .hero-variant-right-col .stack-nav-btn.active .nav-price-red,
        .hero-variant-right-col .stack-nav-btn.active .nav-price-green {
            color: #ffffff !important;
        }

        .hero-variant-right-col .nav-divider {
            color: rgba(255, 255, 255, 0.15);
            font-size: 1.1rem;
            margin: 0 4px;
        }


        /* Premium capsule light theme styling (only in #hero with white background) */
        #hero .bill-stack-container {
            position: relative;
        }

        #hero .bill-stack-nav {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 0;
            background: rgba(255, 255, 255, 0.85);
            /* Frosted glass white background */
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 999px;
            padding: 6px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
            z-index: 20;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Dynamic glow based on active state (light theme) */
        #hero .bill-stack-container.show-before .bill-stack-nav {
            border-color: rgba(244, 63, 94, 0.2);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 0 15px rgba(244, 63, 94, 0.1);
        }

        #hero .bill-stack-container.show-after .bill-stack-nav {
            border-color: rgba(34, 197, 94, 0.2);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 0 15px rgba(34, 197, 94, 0.1);
        }

        #hero .stack-nav-btn {
            font-size: 1.05rem;
            font-weight: 700;
            color: rgba(10, 19, 23, 0.55);
            padding: 8px 16px;
            border-radius: 999px;
            background: transparent;
            border: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #hero .stack-nav-btn:hover {
            color: rgba(10, 19, 23, 0.85);
            background: rgba(0, 0, 0, 0.04);
        }

        #hero .stack-nav-btn[data-target="before"].active {
            color: #ffffff !important;
            background: #f43f5e !important;
            box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
        }

        #hero .stack-nav-btn[data-target="after"].active {
            color: #ffffff !important;
            background: #22c55e !important;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
        }

        #hero .stack-nav-btn .nav-price-red,
        #hero .stack-nav-btn .nav-price-green {
            color: rgba(10, 19, 23, 0.45);
            transition: color 0.3s ease;
        }

        #hero .stack-nav-btn.active .nav-price-red,
        #hero .stack-nav-btn.active .nav-price-green {
            color: #ffffff !important;
        }

        #hero .nav-divider {
            color: rgba(10, 19, 23, 0.15);
            font-size: 1.1rem;
            margin: 0 4px;
        }


        /* Common elements shared overrides */
        #hero .bill-stack-nav .label-dot,
        .hero-variant-right-col .bill-stack-nav .label-dot {
            display: none !important;
        }

        #hero .stack-nav-btn::after,
        .hero-variant-right-col .stack-nav-btn::after {
            display: none !important;
        }

        /* Color coded floating labels on the bills (Solid colored pill badges) */
        .bill-card .bill-label .label-dot {
            display: none !important;
        }

        .before-card .bill-label {
            color: #ffffff !important;
            background: #f43f5e !important;
            /* Solid brand rose */
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 6px 15px rgba(244, 63, 94, 0.35) !important;
            text-shadow: none !important;
        }

        .after-card .bill-label {
            color: #ffffff !important;
            background: #22c55e !important;
            /* Solid brand green */
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 6px 15px rgba(34, 197, 94, 0.35) !important;
            text-shadow: none !important;
        }

        /* Mobile adjustments for the premium capsule */
        @media (max-width: 600px) {

            #hero .bill-stack-nav,
            .hero-variant-right-col .bill-stack-nav {
                bottom: 20px;
                padding: 4px;
            }

            #hero .stack-nav-btn,
            .hero-variant-right-col .stack-nav-btn {
                font-size: 0.95rem;
                padding: 6px 12px;
            }
        }


        /* Decorative Background Solar Blueprints (Pinned to Sides) */
        .bg-blueprint-panel {
            position: absolute;
            z-index: 1;
            pointer-events: none;
            opacity: 0.45;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            filter: drop-shadow(0 0 15px rgba(0, 242, 254, 0.25));
        }

        .bg-blueprint-panel.left-panel {
            left: 2%;
            top: 50%;
            transform: translateY(-50%) rotate(-4deg);
        }

        .bg-blueprint-panel.right-panel {
            right: 2%;
            top: 50%;
            transform: translateY(-50%) rotate(4deg);
        }

        /* Hover animation response to make the blueprint glow and rise */
        .hero-video-variant:hover .bg-blueprint-panel.left-panel {
            transform: translateY(-52%) rotate(-2deg) scale(1.02);
            opacity: 0.7;
            filter: drop-shadow(0 0 25px rgba(0, 242, 254, 0.45));
        }

        .hero-video-variant:hover .bg-blueprint-panel.right-panel {
            transform: translateY(-48%) rotate(2deg) scale(1.02);
            opacity: 0.7;
            filter: drop-shadow(0 0 25px rgba(0, 242, 254, 0.45));
        }

        /* Hide or scale down on smaller viewports to prevent layout overlap */
        @media (max-width: 1400px) {
            .bg-blueprint-panel {
                width: 360px;
                height: auto;
            }

            .bg-blueprint-panel.left-panel {
                left: 0.5%;
            }

            .bg-blueprint-panel.right-panel {
                right: 0.5%;
            }
        }

        @media (max-width: 1100px) {
            .bg-blueprint-panel {
                opacity: 0.2;
                width: 280px;
            }
        }

        @media (max-width: 900px) {
            .bg-blueprint-panel {
                display: none;
            }
        }

        @media (max-width: 1024px) {
            .bill-stack-container {
                height: 480px;
                margin-top: 15px;
            }

            .bill-card {
                width: 80%;
                max-width: 330px;
            }
        }

        @media (max-width: 600px) {
            .bill-stack-container {
                height: 350px;
            }

            .bill-card {
                width: 85%;
                max-width: 250px;
            }
        }

        .hero-variant-main-card {
            background: rgba(10, 19, 23, 0.82);
            /* Semi-solid background to block internal rotation */
            backdrop-filter: blur(35px);
            -webkit-backdrop-filter: blur(35px);
            border-radius: var(--rounded-xxxl);
            padding: 44px 48px;
            box-shadow:
                0 40px 100px rgba(0, 0, 0, 0.55),
                0 0 120px rgba(0, 145, 255, 0.06);
            max-width: 840px;
            position: relative;
            overflow: hidden;
            z-index: 3;
            transition: box-shadow 0.5s ease;
        }

        .hero-variant-card-content {
            position: relative;
            z-index: 3;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 360 rotating border glow core */
        .hero-variant-main-card::before {
            content: "";
            position: absolute;
            top: -150%;
            left: -150%;
            width: 400%;
            height: 400%;
            background: conic-gradient(from 0deg at 50% 50%,
                    transparent 0%,
                    transparent 40%,
                    rgba(0, 145, 255, 0.85) 50%,
                    rgba(0, 242, 254, 1) 55%,
                    rgba(0, 145, 255, 0.85) 60%,
                    transparent 70%,
                    transparent 100%);
            animation: rotate-border-glow 6s linear infinite;
            z-index: -2;
            pointer-events: none;
            will-change: transform;
        }

        /* Glass cover inside card to hide the rotating core and show only the border */
        .hero-variant-main-card::after {
            content: "";
            position: absolute;
            inset: 1.5px;
            /* Border thickness */
            background:
                radial-gradient(circle at 0% 0%, rgba(0, 145, 255, 0.12) 0%, transparent 60%),
                linear-gradient(135deg, rgba(14, 23, 29, 0.95) 0%, rgba(10, 18, 22, 0.98) 100%);
            border-radius: calc(var(--rounded-xxxl) - 1.5px);
            z-index: -1;
            pointer-events: none;
        }

        @keyframes rotate-border-glow {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .hero-variant-main-card:hover {
            box-shadow:
                0 40px 100px rgba(0, 0, 0, 0.7),
                0 0 100px rgba(0, 100, 224, 0.22);
        }

        .hero-variant-badge {
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            /* Prevent stretching to full width inside flex column */
            gap: 8px;
            background: rgba(0, 145, 255, 0.12);
            border: 1px solid rgba(0, 145, 255, 0.25);
            padding: 8px 16px;
            border-radius: 100px;
            color: var(--primary-soft);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 18px;
            box-shadow: 0 4px 15px rgba(0, 145, 255, 0.15);
        }

        .pulse-dot {
            width: 8px;
            height: 8px;
            background-color: var(--primary-soft);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--primary-soft);
            animation: pulse-glow 2s infinite ease-in-out;
        }

        .hero-variant-main-card h1 {
            color: #ffffff;
            font-size: 40px;
            line-height: 1.18;
            margin-top: 0;
            margin-bottom: var(--spacing-md);
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .text-highlight-variant {
            color: #ffffff;
            background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            display: inline;
            position: relative;
        }

        .text-highlight-variant::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-soft), var(--primary));
            box-shadow: 0 0 10px rgba(0, 145, 255, 0.5);
        }

        .hero-variant-description {
            color: rgba(255, 255, 255, 0.85) !important;
            font-size: 17px;
            line-height: 1.6;
            margin-bottom: 24px;
            max-width: 560px;
            width: 100%;
        }

        .hero-variant-description strong {
            color: #ffffff !important;
        }

        .hero-variant-cta-container {
            display: flex;
            align-items: center;
            gap: 24px;
            flex-wrap: wrap;
            margin-bottom: 0;
        }

        /* Advanced Hover CTA */
        .btn-variant-premium {
            display: inline-flex;
            align-items: center;
            gap: 20px;
            background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary) 100%);
            color: #ffffff;
            text-decoration: none;
            padding: 18px 36px;
            border-radius: var(--rounded-full);
            font-weight: 700;
            box-shadow: 0 10px 30px rgba(0, 100, 224, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transform: skewX(-25deg);
            transition: none;
        }

        .btn-variant-premium:hover .btn-shine {
            left: 150%;
            transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-variant-premium:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 145, 255, 0.5);
            background: linear-gradient(135deg, #00c6ff 0%, var(--primary-deep) 100%);
        }

        .btn-variant-premium:active {
            transform: translateY(-1px) scale(0.99);
        }

        .btn-text-container {
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .btn-variant-text-main {
            font-size: 17px;
            font-weight: 700;
            line-height: 1.1;
            color: #ffffff;
        }

        .btn-variant-text-sub {
            font-size: 12px;
            font-weight: 500;
            margin-top: 4px;
            color: rgba(255, 255, 255, 0.9);
        }

        .btn-arrow {
            color: #ffffff;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-variant-premium:hover .btn-arrow {
            transform: translateX(5px);
        }

        .cta-variant-speed-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
        }

        .speed-pulse {
            width: 8px;
            height: 8px;
            background-color: var(--success);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--success);
            animation: pulse-glow 1.5s infinite ease-in-out;
        }

        /* Bento Footer Row */
        .hero-variant-bento-footer {
            display: flex;
            gap: var(--spacing-xl);
            flex-wrap: wrap;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding-top: 28px;
        }

        .trust-variant-card {
            flex: 1;
            min-width: 220px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: var(--rounded-xl);
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .trust-variant-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.12);
            transform: translateY(-2px);
        }

        .trust-variant-icon-wrapper {
            width: 44px;
            height: 44px;
            border-radius: var(--rounded-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.05);
            color: #ffffff;
            transition: transform 0.3s ease;
        }

        .trust-variant-card:hover .trust-variant-icon-wrapper {
            transform: scale(1.1);
        }

        .trust-variant-icon-wrapper.sec-icon {
            background: #ffffff;
        }

        .trust-variant-icon-wrapper.huawei-icon {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.2);
        }

        .trust-variant-info {
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .trust-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--primary-soft);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .trust-value {
            font-size: 15px;
            color: #ffffff;
            font-weight: 700;
            margin-top: 2px;
        }

        @media (max-width: 1024px) {
            .hero-variant-bento {
                grid-template-columns: 1fr;
            }

            .hero-variant-main-card {
                max-width: 100%;
            }
        }

        @keyframes hero-pan-mobile {
            0% {
                transform: translate3d(-5%, 0, 0);
            }

            50% {
                transform: translate3d(5%, 0, 0);
            }

            100% {
                transform: translate3d(-5%, 0, 0);
            }
        }

        @keyframes trust-fade-carousel {

            0%,
            100% {
                opacity: 0;
            }

            5%,
            45% {
                opacity: 1;
            }

            50%,
            95% {
                opacity: 0;
            }
        }

        @media (max-width: 900px) {
            .hero-variant-section {
                padding: 40px 0 40px 0;
                background-image: none !important;
                min-height: auto;
                position: relative;
                overflow: hidden;
            }

            .hero-variant-bento {
                gap: 20px !important;
            }

            .hero-variant-section::before {
                content: "";
                position: absolute;
                top: 0;
                left: -10%;
                width: 120%;
                height: 100%;
                background-image: url("img/cel7-0047.avif");
                background-size: cover;
                background-position: 50% 12%;
                background-repeat: no-repeat;
                z-index: 0;
                pointer-events: none;
                animation: hero-pan-mobile 45s infinite ease-in-out;
                will-change: transform;
            }

            .hero-video-variant::before {
                display: none !important;
            }

            .hero-video-variant .hero-video-bg {
                transform: scale(1.0) !important;
            }

            #hero-variant-video .hero-variant-main-card {
                background: rgba(8, 16, 20, 0.45) !important;
                backdrop-filter: blur(20px) !important;
                -webkit-backdrop-filter: blur(20px) !important;
            }

            #hero-variant-video .hero-variant-cta-container {
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
            }

            #hero-variant-video .cta-variant-speed-badge {
                justify-content: center !important;
                align-self: center !important;
                width: 100% !important;
            }

            #hero-variant-video .trust-row-item {
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
            }

            @media (max-width: 650px) {
                #hero-variant-video .hero-variant-cta-container {
                    align-items: center !important;
                    flex-direction: column !important;
                }
            }

            .hero-variant-glow-orb,
            .hero-variant-glow-orb-2,
            .hero-variant-sun-flare {
                display: none !important;
            }

            /* Custom vignette overlay: light on top (panels visible), dark at bottom (text contrast) */
            .hero-variant-overlay {
                background: linear-gradient(180deg,
                        rgba(10, 19, 23, 0.4) 0%,
                        rgba(10, 19, 23, 0.7) 40%,
                        rgba(10, 19, 23, 0.9) 100%) !important;
            }

            /* Subtle frosted glass card on mobile — structured but transparent enough to see the panels */
            .hero-variant-main-card {
                padding: 28px 24px !important;
                background: rgba(8, 16, 20, 0.82) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
                border-radius: var(--rounded-xxl) !important;
                box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
                text-align: center !important;
            }

            .hero-variant-card-content {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
            }

            .hero-variant-badge {
                align-self: center !important;
                margin-bottom: 16px !important;
            }

            /* Disable rotating border pseudo-elements on mobile */
            .hero-variant-main-card::before,
            .hero-variant-main-card::after {
                display: none !important;
            }

            .hero-variant-main-card h1 {
                font-size: 28px !important;
                line-height: 1.25 !important;
                margin-bottom: var(--spacing-sm) !important;
                text-align: center !important;
            }

            .hero-variant-description {
                font-size: 15px !important;
                line-height: 1.5 !important;
                margin-bottom: 20px !important;
                text-align: center !important;
            }

            .hero-variant-trust-row {
                position: relative;
                height: 48px;
                width: 100%;
                display: block !important;
            }

            .trust-row-item {
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 12px !important;
                width: max-content !important;
                opacity: 0;
                animation: trust-fade-carousel 8s infinite ease-in-out;
            }

            .trust-row-item:nth-child(1) {
                animation-delay: 0s;
            }

            .trust-row-item:nth-child(3) {
                animation-delay: 4s;
            }

            .trust-row-divider {
                display: none !important;
            }
        }

        @media (max-width: 650px) {
            .hero-variant-cta-container {
                flex-direction: column;
                align-items: center;
                gap: 14px;
            }

            .btn-variant-premium {
                width: auto;
                justify-content: center;
                gap: 12px;
                padding: 15px 22px;
                align-self: center;
            }

            .btn-variant-text-main {
                font-size: 14px !important;
                white-space: nowrap;
                /* Force single line — no wrapping */
            }

            .btn-variant-text-sub {
                font-size: 11px !important;
            }

            .cta-variant-speed-badge {
                justify-content: center;
                align-self: center;
            }
        }

        /* Fila de Certificados (Failsafe Trust Row) */
        .hero-variant-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.08);
            margin: 28px 0 20px 0;
            width: 100%;
        }

        .hero-variant-trust-row {
            display: flex;
            align-items: center;
            gap: 28px;
            flex-wrap: wrap;
        }

        .trust-row-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .trust-row-logo {
            height: 22px;
            width: auto;
            display: block;
        }

        .trust-row-logo-sec {
            width: 90px;
            height: 24px;
            display: block;
            object-fit: contain;
        }

        .trust-row-logo-huawei {
            width: 48px;
            height: 48px;
            display: block;
            object-fit: contain;
        }

        .trust-row-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .trust-row-text {
            display: flex;
            flex-direction: column;
            line-height: 1.25;
            text-align: left;
        }

        .trust-row-label {
            font-size: 8px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.45);
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .trust-row-value {
            font-size: 13px;
            font-weight: 700;
            color: #ffffff;
        }

        .trust-row-divider {
            width: 1px;
            height: 24px;
            background: rgba(255, 255, 255, 0.12);
        }

        @media (max-width: 650px) {
            .trust-row-divider {
                display: none;
            }

            .hero-variant-trust-row {
                gap: 16px;
            }
        }

        @media (max-width: 1024px) {
            .hero-variant-right-col {
                width: 100%;
                margin-top: 10px;
            }
        }

        /* GALLERY SECTION STYLES */
        .galeria-section {
            padding: var(--spacing-section) 0;
            background-color: var(--surface-soft);
            border-top: 1px solid var(--hairline-soft);
            border-bottom: 1px solid var(--hairline-soft);
            overflow: hidden;
        }

        .section-header-centered {
            text-align: center;
            max-width: 700px;
            margin: 0 auto var(--spacing-xxl) auto;
        }

        .section-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1.5px;
            color: var(--primary);
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .section-header-centered h2 {
            font-size: 38px;
            font-weight: 700;
            color: var(--ink-deep);
            margin-top: 0;
            margin-bottom: var(--spacing-md);
            letter-spacing: -0.01em;
        }

        .section-header-centered p {
            font-size: 18px;
            color: var(--ink-soft);
            line-height: 1.5;
            text-wrap: balance;
            margin: 0;
        }

        .galeria-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-xxl);
            flex-wrap: wrap;
        }

        /* Tabs Filter */
        .galeria-tabs {
            display: flex;
            gap: 8px;
            background: rgba(0, 0, 0, 0.03);
            padding: 4px;
            border-radius: var(--rounded-full);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .galeria-tab {
            background: transparent;
            border: none;
            color: var(--ink-soft);
            font-size: 13px;
            font-weight: 700;
            padding: 8px 20px;
            border-radius: var(--rounded-full);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .galeria-tab:hover {
            color: var(--ink-deep);
        }

        .galeria-tab.active {
            background: white;
            color: var(--primary);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* Layout Switch */
        .galeria-layout-switch {
            display: flex;
            gap: 6px;
            background: rgba(0, 0, 0, 0.03);
            padding: 4px;
            border-radius: var(--rounded-xl);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .layout-btn {
            background: transparent;
            border: none;
            color: var(--ink-soft);
            font-size: 13px;
            font-weight: 700;
            padding: 8px 14px;
            border-radius: var(--rounded-lg);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .layout-btn svg {
            color: var(--ink-soft);
            transition: color 0.3s ease;
        }

        .layout-btn:hover {
            color: var(--ink-deep);
        }

        .layout-btn:hover svg {
            color: var(--ink-deep);
        }

        .layout-btn.active {
            background: white;
            color: var(--ink-deep);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .layout-btn.active svg {
            color: var(--primary);
        }

        /* Viewport and Track */
        .galeria-viewport {
            position: relative;
            width: 100%;
            padding: 0 40px;
            /* Side gutter to look elegant full-width */
            box-sizing: border-box;
        }

        /* MASONRY LAYOUT */
        .galeria-track.layout-masonry {
            column-count: 4;
            /* 4 columns on desktop by default */
            column-gap: 20px;
            width: 100%;
            transition: all 0.5s ease;
        }

        /* CAROUSEL LAYOUT */
        .galeria-track.layout-carousel {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 20px;
            width: 100%;
            padding: var(--spacing-sm) 0 var(--spacing-lg) 0;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE 10+ */
            transition: all 0.5s ease;
            scroll-behavior: smooth;
        }

        .galeria-track.layout-carousel::-webkit-scrollbar {
            display: none;
            /* Safari & Chrome */
        }

        /* Carousel Navigation Buttons */
        .carousel-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: white;
            border: 1px solid var(--hairline-soft);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            color: var(--ink-deep);
            display: none;
            /* hidden by default, shown in carousel layout */
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .carousel-nav-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-50%) scale(1.05);
            box-shadow: 0 8px 24px rgba(0, 100, 224, 0.25);
        }

        .carousel-nav-btn.prev {
            left: 12px;
            /* positioned inside the 40px viewport padding */
        }

        .carousel-nav-btn.next {
            right: 12px;
            /* positioned inside the 40px viewport padding */
        }

        /* Show Carousel Buttons only if Layout is Carousel */
        .galeria-viewport:has(.layout-carousel) .carousel-nav-btn {
            display: flex;
        }

        /* GALLERY ITEMS */
        .galeria-item {
            width: 100%;
            margin-bottom: 20px;
            break-inside: avoid;
            /* Masonry fix */
            cursor: pointer;
            position: relative;
            border-radius: var(--rounded-xxl);
            overflow: hidden;
            border: 1px solid var(--hairline-soft);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
        }

        .galeria-item.hidden {
            display: none !important;
        }

        .layout-carousel .galeria-item {
            flex: 0 0 calc(25% - 15px);
            /* 4 columns on wide desktop by default */
            scroll-snap-align: start;
            margin-bottom: 0;
            height: 380px;
        }

        .galeria-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* Height presets for masonry aspect ratios - Overridden for dynamic natural flow */
        .layout-masonry .galeria-item {
            height: auto;
        }

        .layout-masonry .galeria-card-inner {
            height: 100%;
        }

        .layout-masonry .galeria-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .layout-masonry .video-preview-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .galeria-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            display: block;
        }

        /* Video Preview Overlay */
        .video-preview-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .play-button-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 64px;
            height: 64px;
            background: rgba(0, 100, 224, 0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(0, 100, 224, 0.35);
            border: 2px solid white;
            z-index: 2;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .play-button-overlay svg {
            width: 24px;
            height: 24px;
            color: white;
        }

        @media (hover: hover) and (pointer: fine) {
            .galeria-item:hover .play-button-overlay {
                background: var(--primary-soft);
                transform: translate(-50%, -50%) scale(1.1);
                box-shadow: 0 12px 30px rgba(0, 145, 255, 0.5);
            }
        }

        .expand-button-overlay {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 36px;
            height: 36px;
            background: rgba(10, 19, 23, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--rounded-md);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            opacity: 0.85;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            color: rgba(255, 255, 255, 0.9);
        }

        .expand-button-overlay svg {
            display: block;
            transition: transform 0.3s ease;
        }

        .expand-button-overlay .expand-tr {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: center;
        }

        .expand-button-overlay .expand-bl {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: center;
        }

        /* Hover animation: slide top-right corner up/right, and bottom-left corner down/left */
        .caso-card:hover .expand-button-overlay .expand-tr,
        .galeria-item:hover .expand-button-overlay .expand-tr {
            transform: translate(2px, -2px);
        }

        .caso-card:hover .expand-button-overlay .expand-bl,
        .galeria-item:hover .expand-button-overlay .expand-bl {
            transform: translate(-2px, 2px);
        }

        .expand-button-overlay .expand-tr {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: center;
        }

        .expand-button-overlay .expand-bl {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: center;
        }

        /* Hover animation: slide top-right corner up/right, and bottom-left corner down/left */
        .caso-card:hover .expand-button-overlay .expand-tr,
        .galeria-item:hover .expand-button-overlay .expand-tr {
            transform: translate(2px, -2px);
        }

        .caso-card:hover .expand-button-overlay .expand-bl,
        .galeria-item:hover .expand-button-overlay .expand-bl {
            transform: translate(-2px, 2px);
        }

        @media (hover: hover) and (pointer: fine) {
            .galeria-item:hover .expand-button-overlay {
                opacity: 1;
                transform: scale(1.1);
                background: var(--primary);
                border-color: var(--primary);
                color: #ffffff;
                box-shadow: 0 6px 16px rgba(0, 100, 224, 0.4);
            }

            .galeria-item:hover .expand-button-overlay svg {
                transform: scale(1.05);
            }
        }

        /* Item Info Overlay */
        .galeria-item-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30px 24px 24px 24px;
            background: linear-gradient(180deg, transparent 0%, rgba(10, 19, 23, 0.75) 45%, rgba(10, 19, 23, 0.95) 100%);
            color: white;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 3;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .galeria-badge {
            align-self: flex-start;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 1px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(5px);
            padding: 4px 8px;
            border-radius: var(--rounded-sm);
            text-transform: uppercase;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .galeria-item-overlay h3 {
            font-size: 18px;
            margin: 0;
            font-weight: 700;
            color: white;
        }

        .galeria-item-overlay p {
            font-size: 13px;
            margin: 0;
            color: rgba(255, 255, 255, 0.75);
            line-height: 1.4;
            font-weight: 400;
        }

        /* Hover States */
        @media (hover: hover) and (pointer: fine) {
            .galeria-item:hover {
                transform: translateY(-6px);
                box-shadow: 0 20px 40px rgba(0, 100, 224, 0.15);
                border-color: rgba(0, 100, 224, 0.3);
            }

            .galeria-item:hover img {
                transform: scale(1.08);
            }

            .galeria-item:hover .galeria-item-overlay {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* CUSTOM LIGHTBOX STYLES */
        .galeria-lightbox {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        .galeria-lightbox.active {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }

        body.lightbox-open {
            overflow: hidden !important;
        }

        /* =====================================================
           VIEW TRANSITIONS API — Shared Element Gallery→Lightbox
           ===================================================== */

        /* Suppress the default full-page crossfade so only the
           shared element (the image) animates between states.   */
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none;
            mix-blend-mode: normal;
        }

        /* Keyframe that animates the border-radius of the group container
           from the card's radius (open state) to the lightbox radius.
           On close the browser plays it in reverse automatically.       */
        @keyframes gallery-image-border-radius {
            from {
                border-radius: var(--rounded-lg);
            }

            to {
                border-radius: var(--rounded-xxl);
            }
        }

        /* The group element manages position/size. Adding overflow:hidden
           here clips the snapshot images to the group's border-radius.
           We stack our custom border-radius keyframe alongside the
           browser's built-in UA position/size animation.               */
        ::view-transition-group(gallery-active-image) {
            animation-duration: 0.42s;
            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            animation-name: -ua-view-transition-group-anim-gallery-active-image,
                gallery-image-border-radius;
        }

        ::view-transition-group(testimonial-active-image) {
            animation-duration: 0.42s;
            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            animation-name: -ua-view-transition-group-anim-testimonial-active-image,
                gallery-image-border-radius;
        }

        /* Disable transition for users who prefer reduced motion */
        @media (prefers-reduced-motion: reduce) {

            ::view-transition-group(gallery-active-image),
            ::view-transition-group(testimonial-active-image) {
                animation-duration: 0.001s;
            }
        }

        .lightbox-close svg,
        .lightbox-nav-btn svg {
            width: 24px;
            height: 24px;
            display: block;
        }

        .lightbox-overlay-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Layered background: White base with boosted 75% opacity brand blue gradients */
            background:
                radial-gradient(circle at 15% 30%, rgba(0, 100, 224, 0.75), transparent 60%),
                radial-gradient(circle at 85% 70%, rgba(0, 145, 255, 0.75), transparent 60%),
                rgba(255, 255, 255, 0.97);
            z-index: 1;
        }

        /* Lightbox Close button — brand primary color (same as testimonials) */
        .lightbox-close {
            position: absolute;
            top: var(--spacing-lg);
            right: var(--spacing-lg);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--primary);
            border: none;
            color: var(--on-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 15;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: auto;
            box-shadow: 0 4px 12px rgba(0, 100, 224, 0.35);
        }

        .lightbox-close:hover {
            background: var(--primary-deep);
            box-shadow: 0 6px 20px rgba(0, 100, 224, 0.5);
            transform: scale(1.08);
        }

        /* Lightbox Nav Buttons — live inside the footer bar */
        .lightbox-nav-btn {
            position: static;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid rgba(0, 0, 0, 0.08);
            color: #64748b;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .lightbox-nav-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #ffffff;
            transform: scale(1.08);
        }

        /* Lightbox Stage */
        .lightbox-stage {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 900px;
            padding: 0 var(--spacing-xl);
            transform: scale(0.95);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .galeria-lightbox.active .lightbox-stage {
            transform: scale(1);
        }

        /* The Sheet itself (White Background) */
        .lightbox-sheet {
            background: #ffffff;
            border-radius: 24px;
            width: 100%;
            /* Fixed height: footer always stays pinned at bottom */
            height: 85vh;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
            position: relative;
            transform: translateY(0);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.3s ease;
        }

        .lightbox-sheet.dragging {
            transition: none;
            cursor: grabbing;
        }

        /* Sticky Header with Fade-out Gradient and Handle */
        .lightbox-sheet-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 65px;
            background: linear-gradient(to bottom, #ffffff 65%, rgba(255, 255, 255, 0));
            z-index: 12;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 14px;
            pointer-events: none;
        }

        .lightbox-drag-handle {
            display: none;
            width: 44px;
            height: 5px;
            background: #cbd5e1;
            border-radius: 3px;
            cursor: grab;
            transition: background-color 0.2s;
        }

        .lightbox-drag-handle:hover {
            background: #94a3b8;
        }

        /* Scrollable Sheet Body — takes all available height between header and footer */
        .lightbox-sheet-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding-top: 40px;
            scroll-behavior: smooth;
            /* Fade-out at top under the handle */
            mask-image: linear-gradient(to bottom, transparent 0%, black 50px);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50px);
        }

        .lightbox-content {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            flex: 1;
            padding: var(--spacing-xl) var(--spacing-xxl) var(--spacing-lg) var(--spacing-xxl);
            gap: var(--spacing-lg);
            box-sizing: border-box;
        }

        .lightbox-media-container {
            position: relative;
            background: transparent;
            border-radius: 20px;
            overflow: hidden;
            width: 100%;
            /* No fixed height — image drives the height; cap at 60vh for very tall portraits */
            max-height: 60vh;
        }

        .lightbox-media-container img {
            /* Always fill the full width — border-radius clips the corners naturally */
            display: block;
            width: 100%;
            height: auto;
            max-height: 60vh;
            object-fit: cover;
        }

        .lightbox-media-container video {
            display: block;
            width: 100%;
            height: auto;
            max-height: 60vh;
            object-fit: contain;
            background: #000;
        }

        /* Lightbox Zoom Toggle Button */
        .lightbox-zoom-btn {
            position: absolute;
            bottom: 16px;
            right: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(10, 19, 23, 0.85);
            border: 1.5px solid rgba(255, 255, 255, 0.35);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 0;
        }

        .lightbox-zoom-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
            transform: scale(1.05);
        }

        .lightbox-zoom-btn svg {
            color: white;
            display: block;
        }

        /* Lightbox Info Panel */
        .lightbox-info-panel {
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: none;
            border: none;
            padding: 0;
            color: inherit;
            backdrop-filter: none;
        }

        .lightbox-meta-badge {
            display: inline-block;
            background: var(--primary);
            color: var(--on-primary);
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            padding: 5px 12px;
            border-radius: var(--rounded-sm);
            width: fit-content;
            box-shadow: 0 4px 12px rgba(0, 100, 224, 0.15);
            margin-bottom: 4px;
        }

        .lightbox-meta-title {
            font-size: 32px;
            font-weight: 800;
            color: #0f172a;
            margin: 0 0 2px 0;
        }

        .lightbox-meta-desc {
            font-size: 16px;
            line-height: 1.6;
            color: #334155;
            margin: 0;
        }

        .lightbox-progress-bar-container {
            width: 100%;
            height: 3px;
            background: #f1f5f9;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
        }

        .lightbox-progress-bar {
            height: 100%;
            width: 0%;
            background: var(--primary);
            transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Footer: sticky bar at the bottom of the sheet with prev / counter / next */
        .lightbox-footer {
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            padding: var(--spacing-xs) var(--spacing-lg);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-base);
            flex-shrink: 0;
            background: #ffffff;
        }

        .lightbox-meta-counter {
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
            letter-spacing: 0.5px;
            flex: 1;
            text-align: center;
        }

        /* RESPONSIVE DESIGN FOR GALLERY */
        @media (max-width: 1280px) {
            .galeria-viewport {
                padding: 0 24px;
            }

            .galeria-track.layout-masonry {
                column-count: 3;
                /* 3 columns on mid-sized screens */
            }

            .layout-carousel .galeria-item {
                flex: 0 0 calc(33.333% - 14px);
                /* 3 items on mid-sized screens */
            }

            .carousel-nav-btn.prev {
                left: 4px;
            }

            .carousel-nav-btn.next {
                right: 4px;
            }
        }

        @media (max-width: 1024px) {
            .galeria-track.layout-masonry {
                column-count: 2;
                /* 2 columns on tablet */
            }

            .layout-carousel .galeria-item {
                flex: 0 0 calc(50% - 10px);
                /* 2 items on tablet */
            }

            .lightbox-stage {
                max-width: 750px;
            }
        }

        @media (max-width: 768px) {
            .galeria-section {
                padding: var(--spacing-xxl) 0;
            }

            .section-header-centered h2 {
                font-size: 30px;
            }

            .section-header-centered p {
                font-size: 15px;
            }

            .galeria-controls {
                flex-direction: column;
                align-items: stretch;
                gap: var(--spacing-base);
            }

            .galeria-tabs,
            .galeria-layout-switch {
                justify-content: center;
                width: 100%;
            }

            .galeria-tab {
                flex: 1;
                padding: 8px 10px;
                text-align: center;
                font-size: 12px;
            }

            .layout-btn {
                flex: 1;
                justify-content: center;
                font-size: 12px;
            }

            .galeria-track.layout-masonry {
                column-count: 2;
                /* 2 columns on phone! */
                column-gap: 12px;
            }

            .layout-carousel .galeria-item {
                flex: 0 0 85%;
                height: 340px;
            }

            .layout-masonry .galeria-item {
                margin-bottom: 12px;
                height: auto;
            }

            .layout-masonry .galeria-card-inner {
                height: 100%;
            }

            .layout-masonry .galeria-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .layout-masonry .video-preview-wrapper {
                height: 100%;
            }

            .lightbox-stage {
                padding: 0;
                align-items: flex-end;
                /* Align sheet to bottom on mobile */
                height: 100%;
                max-width: 100%;
            }

            .lightbox-sheet {
                border-radius: 24px 24px 0 0;
                /* Rounded top corners only on mobile */
                height: 90vh;
                max-height: 90vh;
            }

            .lightbox-drag-handle {
                display: block;
                /* Show drag handle on mobile */
            }

            .lightbox-content {
                display: flex;
                flex-direction: column;
                padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
                min-height: auto;
                justify-content: flex-start;
            }

            .lightbox-media-container {
                max-height: 45vh;
                border-radius: 16px;
            }

            .lightbox-media-container img,
            .lightbox-media-container video {
                max-height: 45vh;
            }

            .lightbox-info-panel {
                gap: var(--spacing-xs);
            }

            .lightbox-meta-title {
                font-size: 22px;
            }

            .lightbox-meta-desc {
                font-size: 14px;
            }

            .lightbox-close {
                top: 10px;
                right: 15px;
            }

            .lightbox-footer {
                padding: var(--spacing-sm) var(--spacing-lg);
            }

            /* Play Button Optimization on Mobile */
            .play-button-overlay {
                width: 44px;
                height: 44px;
                box-shadow: 0 6px 18px rgba(0, 100, 224, 0.25);
            }

            .play-button-overlay svg {
                width: 20px;
                height: 20px;
            }

            /* Lightbox Media Size Restrictions for Vertical Assets */
            .lightbox-media-container {
                max-height: 52vh;
            }

            .lightbox-media-container img,
            .lightbox-media-container video {
                max-height: 52vh;
            }
        }

        /* --- Testimonial Leer Testimonio Button --- */
        .btn-leer-testimonio {
            display: inline-flex;
            /* Show on both PC and mobile */
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            margin-bottom: var(--spacing-sm);
            cursor: pointer;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .btn-leer-testimonio:hover {
            opacity: 0.8;
            transform: translateY(-1px);
        }

        .btn-leer-testimonio svg {
            width: 14px;
            height: 14px;
            transition: transform 0.2s ease;
        }

        .btn-leer-testimonio:hover svg {
            transform: scale(1.1);
        }

        /* Hide full text and specs on the page cards to keep them simplified */
        .caso-card p,
        .caso-specs {
            display: none !important;
        }

        .caso-card {
            position: relative;
            cursor: pointer;
        }

        .caso-card:hover .expand-button-overlay {
            opacity: 1;
            transform: scale(1.1);
            background: var(--primary);
            border-color: var(--primary);
            color: #ffffff;
            box-shadow: 0 6px 16px rgba(0, 100, 224, 0.4);
        }

        .caso-card:hover .expand-button-overlay svg {
            transform: scale(1.05);
        }

        /* --- Testimonial Lightbox Overlay & Structure --- */
        .testimonial-lightbox {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        .testimonial-lightbox.active {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }

        .testimonial-lightbox-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Layered background: White base with boosted 75% opacity brand blue gradients */
            background:
                radial-gradient(circle at 15% 30%, rgba(0, 100, 224, 0.75), transparent 60%),
                radial-gradient(circle at 85% 70%, rgba(0, 145, 255, 0.75), transparent 60%),
                rgba(255, 255, 255, 0.97);
            z-index: 1;
        }

        .testimonial-lightbox-stage {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 900px;
            padding: 0 var(--spacing-xl);
            transform: scale(0.95);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            /* Center sheet vertically on PC */
            height: 100%;
        }

        .testimonial-lightbox.active .testimonial-lightbox-stage {
            transform: scale(1);
        }

        /* The Sheet itself (White Background) */
        .testimonial-lightbox-sheet {
            background: #ffffff;
            border-radius: 24px;
            /* Rounded corners on all sides for PC */
            width: 100%;
            height: auto;
            /* Shrink-wrap content on PC */
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
            position: relative;
            transform: translateY(0);
            /* Smooth transitions when snapping back */
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.3s ease;
        }

        /* Dragging state disables transition for real-time responsiveness */
        .testimonial-lightbox-sheet.dragging {
            transition: none;
            cursor: grabbing;
        }

        /* Sticky Header with Fade-out Gradient and Handle */
        .testimonial-sheet-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 65px;
            background: linear-gradient(to bottom, #ffffff 65%, rgba(255, 255, 255, 0));
            z-index: 12;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 14px;
            pointer-events: none;
            /* Let clicks pass to header buttons */
        }

        .testimonial-drag-handle {
            display: none;
            /* Hide on PC */
            width: 44px;
            height: 5px;
            background: #cbd5e1;
            border-radius: 10px;
            pointer-events: auto;
            cursor: grab;
            transition: background-color 0.2s;
        }

        .testimonial-drag-handle:hover {
            background: #94a3b8;
        }

        .testimonial-lightbox-close {
            position: absolute;
            top: var(--spacing-lg);
            right: var(--spacing-lg);
            background: var(--primary);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #ffffff;
            transition: all 0.2s ease;
            z-index: 15;
            pointer-events: auto;
            box-shadow: 0 4px 12px rgba(0, 100, 224, 0.2);
        }

        .testimonial-lightbox-close:hover {
            background: #0052b8;
            color: #ffffff;
            transform: rotate(90deg) scale(1.05);
            box-shadow: 0 6px 16px rgba(0, 100, 224, 0.35);
        }

        .testimonial-lightbox-close svg {
            width: 20px;
            height: 20px;
            display: block;
        }

        /* Scrollable body with top fade-out mask */
        .testimonial-sheet-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            max-height: 100%;
            padding-top: 40px;
            /* Start below handle but text will scroll up underneath the header */
            scroll-behavior: smooth;
        }

        /* Modern fade-out effect at the top of scroll container */
        .testimonial-sheet-body {
            mask-image: linear-gradient(to bottom, transparent 0%, black 50px);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50px);
        }

        .testimonial-lightbox-content {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            flex: 1;
            min-height: 100%;
            padding: var(--spacing-xl) var(--spacing-xxl) var(--spacing-xxl) var(--spacing-xxl);
            gap: var(--spacing-xl);
            box-sizing: border-box;
            justify-content: flex-start;
        }

        .testimonial-lightbox-top-section {
            display: grid;
            grid-template-columns: 1.45fr 1fr;
            gap: var(--spacing-xl);
            align-items: start;
        }

        .testimonial-lightbox-media {
            position: relative;
            aspect-ratio: 1.5 / 1;
            background: #f8fafc;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
        }

        .testimonial-lightbox-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-lightbox-meta-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-xs);
        }

        .testimonial-lightbox-badge {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 6px 14px;
            border-radius: var(--rounded-full);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(0, 100, 224, 0.15);
            margin-bottom: 4px;
        }

        .testimonial-lightbox-title {
            font-size: 32px;
            font-weight: 800;
            color: #0f172a;
            margin: 0 0 2px 0;
        }

        .testimonial-lightbox-drop {
            color: var(--primary);
            font-weight: 700;
            font-size: 18px;
            text-wrap: balance;
            margin: 0 0 var(--spacing-xs) 0;
        }

        .testimonial-lightbox-specs {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
            width: 100%;
            box-sizing: border-box;
        }

        .testimonial-lightbox-specs .spec-item {
            background: #f8fafc;
            border: 1.5px solid #e2e8f0;
            padding: 10px 16px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
        }

        .testimonial-lightbox-specs .spec-item span {
            display: block;
            font-size: 10px;
            text-transform: uppercase;
            color: #64748b;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        .testimonial-lightbox-specs .spec-item strong {
            font-size: 16px;
            color: #0f172a;
            font-weight: 800;
        }

        .testimonial-lightbox-bottom-section {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
            padding-top: var(--spacing-lg);
        }

        .testimonial-lightbox-quote-container {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 var(--spacing-xl);
        }

        .testimonial-quote-icon {
            position: absolute;
            top: -24px;
            left: 8px;
            width: 44px;
            height: 44px;
            color: rgba(0, 100, 224, 0.08);
            pointer-events: none;
        }

        .testimonial-lightbox-text {
            font-size: 18px;
            line-height: 1.8;
            color: #334155;
            margin: 0;
            text-align: center;
            font-style: italic;
            font-weight: 450;
        }

        .testimonial-lightbox-footer {
            border-top: none;
            padding: 20px var(--spacing-xl);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-base);
            flex-shrink: 0;
            background: #ffffff;
            color: #64748b;
            font-weight: 600;
            font-size: 13px;
        }

        .testimonial-lightbox-footer .lightbox-nav-btn {
            display: none;
        }

        .testimonial-lightbox-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        /* Nav Buttons styled cleanly next to the stage */
        .testimonial-lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 56px;
            height: 56px;
            background: rgba(255, 255, 255, 0.95);
            border: 1.5px solid #e2e8f0;
            color: #0f172a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }

        .testimonial-lightbox-nav:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
            transform: translateY(-50%) scale(1.08);
            box-shadow: 0 0 30px rgba(0, 100, 224, 0.2);
        }

        .testimonial-lightbox-nav svg {
            width: 24px;
            height: 24px;
            display: block;
        }

        .testimonial-lightbox-nav.prev {
            left: -80px;
        }

        .testimonial-lightbox-nav.next {
            right: -80px;
        }

        @media (max-width: 1080px) {
            .testimonial-lightbox-nav.prev {
                left: 15px;
            }

            .testimonial-lightbox-nav.next {
                right: 15px;
            }
        }

        /* Responsive styles for testimonial lightbox and card */
        @media (max-width: 900px) {
            .btn-leer-testimonio {
                display: inline-flex;
            }

            .testimonial-lightbox-stage {
                padding: 0;
                align-items: flex-end;
                /* Align sheet to bottom on mobile */
                height: 100%;
            }

            .testimonial-lightbox-sheet {
                border-radius: 24px 24px 0 0;
                /* Rounded top corners only on mobile */
                height: 90vh;
                max-height: 90vh;
            }

            .testimonial-drag-handle {
                display: block;
                /* Show drag handle on mobile */
            }

            .testimonial-lightbox-content {
                display: flex;
                flex-direction: column;
                padding: var(--spacing-lg);
                gap: var(--spacing-lg);
                min-height: auto;
                justify-content: flex-start;
            }

            .testimonial-lightbox-top-section {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-md);
            }

            .testimonial-lightbox-media {
                aspect-ratio: 1.5 / 1;
                height: auto;
                min-height: auto;
                border-radius: 16px;
            }

            .testimonial-lightbox-meta-col {
                gap: var(--spacing-xs);
                width: 100%;
            }

            .testimonial-lightbox-title {
                font-size: 24px;
            }

            .testimonial-lightbox-drop {
                font-size: 18px;
                margin-bottom: var(--spacing-xs);
            }

            .testimonial-lightbox-specs {
                flex-direction: row;
                gap: var(--spacing-xs);
            }

            .testimonial-lightbox-specs .spec-item {
                flex: 1;
                padding: 8px 12px;
                border-radius: 10px;
            }

            .testimonial-lightbox-bottom-section {
                padding-top: var(--spacing-md);
            }

            .testimonial-lightbox-quote-container {
                padding: 0;
            }

            .testimonial-lightbox-text {
                font-size: 15px;
                text-align: left;
            }

            .testimonial-lightbox-nav {
                display: none;
                /* Hide navigation arrows on mobile, use swipe */
            }

            .testimonial-lightbox-close {
                top: 10px;
                right: 15px;
            }

            .testimonial-lightbox-footer .lightbox-nav-btn {
                display: flex;
            }
        }