/*
 * ICONICORP Technologies Inc. — Estilos del Pre-registro (IconiWebsite)
 * Extraídos del HTML conservando el orden original de la cascada.
 */

/* ===== Bloque de estilos 1/12 (cabecera) ===== */
        :root {
            --brand-blue: #C5A059; /* Champagne Ejecutivo Sobrio */
            --brand-purple: #E2E8F0; /* Platino Institucional */
            --azul-celestial: #9A7B3E;
            --oro-sagrado: #C5A059;
            --blanco-lino: #060911; /* Obsidian Dark */
            --text-dark: #F8FAFC;
            --bg-dark: #05080F;
            --bg-white: #090D16;
            --glass-white: rgba(11, 15, 25, 0.82);
            --glass-border: rgba(226, 232, 240, 0.18);
            --layered-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.65), 0 4px 12px -2px rgba(0, 0, 0, 0.45);
            --premium-glow: 0 8px 28px rgba(0, 0, 0, 0.6);
        }

        h1, h2, h3, h4, h5, h6 {
            text-wrap: balance;
        }
        p, li {
            text-wrap: pretty;
        }

        :root {
            --iconi-prebtn-svg: linear-gradient(transparent, transparent);
            --iconi-prebtn-bg-normal:
                radial-gradient(ellipse 82% 95% at 50% 14%, rgba(96, 165, 250, 0.56) 0%, rgba(14, 116, 244, 0.16) 56%, rgba(2, 10, 30, 0.42) 100%),
                linear-gradient(180deg, #2D8FFF 0%, #0A6CE8 50%, #063F96 100%);
            --iconi-prebtn-bg-hover:
                radial-gradient(ellipse 88% 110% at 50% 18%, rgba(186, 230, 253, 0.72) 0%, rgba(56, 189, 248, 0.36) 54%, rgba(10, 88, 202, 0.12) 100%),
                linear-gradient(180deg, #5BB8FF 0%, #1E86FF 48%, #0B54C4 100%);
            --iconi-prebtn-shadow-normal:
                inset 0 2px 1px rgba(224, 242, 254, 0.82),
                inset 0 -2px 2px rgba(2, 8, 24, 0.85),
                inset 2px 0 2px rgba(147, 197, 253, 0.32),
                inset -2px 0 2px rgba(2, 8, 24, 0.52),
                0 0 18px rgba(10, 132, 255, 0.65),
                0 0 34px rgba(30, 64, 175, 0.42),
                0 8px 20px rgba(0, 0, 0, 0.72);
            --iconi-prebtn-shadow-hover:
                inset 0 2px 2px rgba(255, 255, 255, 0.96),
                inset 0 -2px 2px rgba(3, 15, 42, 0.65),
                inset 0 0 20px rgba(125, 211, 252, 0.55),
                0 0 24px rgba(56, 189, 248, 0.95),
                0 0 48px rgba(10, 132, 255, 0.75),
                0 10px 24px rgba(0, 0, 0, 0.78);
            /* Brillo 3D limpio para todos los botones sin textura de líneas */
            --iconi-subtle-btn-svg: linear-gradient(transparent, transparent);
            --iconi-subtle-sheen-normal: radial-gradient(ellipse 80% 92% at 50% 15%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 55%, rgba(0, 0, 0, 0.14) 100%);
            --iconi-subtle-sheen-hover: radial-gradient(ellipse 86% 108% at 50% 18%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.11) 54%, rgba(0, 0, 0, 0.06) 100%);
        }

        .global-pre-btn {
            position: absolute !important;
            bottom: 42px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 100 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            min-height: 44px !important;
            padding: 10px 28px !important;
            min-width: 0 !important;
            width: auto !important;
            border: 1.5px solid rgba(147, 197, 253, 0.68) !important;
            border-radius: 999px !important;
            color: #FFFFFF !important;
            background-image: var(--iconi-prebtn-bg-normal) !important;
            background-size: 100% 100%, 100% 100% !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            box-shadow: var(--iconi-prebtn-shadow-normal) !important;
            text-shadow: 0 2px 4px rgba(1, 8, 24, 0.85), 0 0 10px rgba(56, 189, 248, 0.25) !important;
            font-size: clamp(12.5px, 1.08vw, 15px) !important;
            font-weight: 900 !important;
            letter-spacing: 0.6px !important;
            text-align: center !important;
            text-decoration: none !important;
            text-transform: uppercase !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            transition: transform 0.22s ease, background-image 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, filter 0.22s ease !important;
        }
        .global-pre-btn:hover,
        .global-pre-btn:focus-visible {
            background-image: var(--iconi-prebtn-bg-hover) !important;
            background-size: 100% 100%, 100% 100% !important;
            color: #FFFFFF !important;
            border-color: rgba(224, 242, 254, 0.96) !important;
            filter: brightness(1.07) saturate(1.08) !important;
            box-shadow: var(--iconi-prebtn-shadow-hover) !important;
            text-shadow: 0 2px 5px rgba(1, 8, 24, 0.9), 0 0 14px rgba(186, 230, 253, 0.55) !important;
            transform: translateX(-50%) translateY(-2px) !important;
        }
        .global-pre-btn .b1-cta-arrow {
            font-size: 17px !important;
            line-height: 1 !important;
        }

        @keyframes shine {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        @keyframes flowLine {
            to {
                stroke-dashoffset: -1000;
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Outfit', sans-serif;
            scroll-behavior: smooth;
        }

        html {
            scroll-padding-top: 0px;
            overflow-x: hidden;
            width: 100%;
        }

        body {
            background-color: #161f2e;
            background-image: url('fondo_facetado.svg?v=5');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            background-attachment: fixed;
            color: var(--text-dark);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            width: 100%;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

        /* --- NAVBAR --- */
        nav {
            background: rgba(10, 10, 10, 0.75);
            padding: 16px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        nav.scrolled {
            padding: 10px 0;
            background: rgba(10, 10, 10, 0.95);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .nav-content {
            display: flex;
            flex-direction: column;
        }

        .nav-top-row {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            width: 100%;
            gap: 20px;
        }

        .logo span { color: #38BDF8 !important; font-weight: 300; }
            .logo {
            font-size: 34px;
            font-weight: 900;
            letter-spacing: -1.5px;
            color: var(--text-dark);
            cursor: pointer;
            text-decoration: none;
            justify-self: start;
        }

        .logo span {
            font-weight: 500;
        }

        .nav-center {
            justify-self: center;
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .nav-links-wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 25px;
            justify-self: end;
        }

        .nav-links {
            display: flex;
            gap: 20px;
        }

        .nav-links a {
            color: var(--text-dark);
            text-decoration: none;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            opacity: 0.8;
            transition: 0.3s;
            position: relative;
            padding-bottom: 4px;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--brand-blue);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(-50%);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-links a:hover {
            opacity: 1;
            color: var(--brand-blue);
        }

        .topbar-timer {
            display: flex;
            gap: 10px;
            align-items: center;
            background: rgba(0, 0, 0, 0.03);
            padding: 8px 20px;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .t-mini-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 28px;
        }

        .t-mini-item span:first-child {
            font-size: 36px;
            font-weight: 900;
            color: var(--text-dark);
            line-height: 1;
        }

        .t-mini-item span:last-child {
            font-size: 10px;
            text-transform: uppercase;
            font-weight: 800;
            color: #94A3B8;
            letter-spacing: 1px;
        }

        .btn-nav {
            background-image: var(--iconi-prebtn-bg-normal) !important;
            background-size: 100% 100%, 100% 100%, 100% 100% !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            color: #FFFFFF !important;
            padding: 12px 28px;
            border-radius: 10px;
            font-weight: 900;
            text-decoration: none;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border: 1.5px solid rgba(147, 197, 253, 0.68) !important;
            cursor: pointer;
            box-shadow: var(--iconi-prebtn-shadow-normal) !important;
            text-shadow: 0 2px 4px rgba(1, 8, 24, 0.85), 0 0 10px rgba(56, 189, 248, 0.25) !important;
            transition: all 0.22s ease;
            white-space: nowrap;
            position: relative;
            overflow: hidden;
        }

        .btn-nav::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: 0s;
        }

        .btn-nav:hover::before {
            animation: shine 0.75s forwards;
        }

        .btn-nav:hover,
        .btn-nav:focus-visible {
            background-image: var(--iconi-prebtn-bg-hover) !important;
            background-size: 100% 100%, 100% 100%, 100% 100% !important;
            border-color: rgba(224, 242, 254, 0.96) !important;
            color: #FFFFFF !important;
            filter: brightness(1.07) saturate(1.08) !important;
            transform: translateY(-2px) scale(1.02);
            box-shadow: var(--iconi-prebtn-shadow-hover) !important;
            text-shadow: 0 2px 5px rgba(1, 8, 24, 0.9), 0 0 14px rgba(186, 230, 253, 0.55) !important;
        }

        .btn-nav::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: 0.5s;
        }

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

        .settings-btns {
            display: flex;
            gap: 10px;
        }

        .icon-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-dark);
            transition: 0.3s;
            font-size: 14px;
        }

        .icon-btn:hover {
            background: rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        /* Language Dropdown */
        .lang-dropdown {
            position: relative;
        }

        .lang-list {
            position: absolute;
            top: 110%;
            right: 0;
            background: rgba(15, 15, 15, 0.96);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.14);
            min-width: 150px;
            display: none;
            flex-direction: column;
            gap: 2px;
            padding: 8px;
            z-index: 4200;
        }

        .lang-dropdown.active .lang-list {
            display: flex;
        }

        .lang-list div {
            padding: 10px 15px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            border-radius: 8px;
            transition: 0.2s;
            display: flex;
            align-items: center;
            gap: 9px;
            color: #FFF;
            white-space: nowrap;
        }

        .lang-list div:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #FFF;
        }

        .lang-flag-img {
            width: 20px;
            height: 14px;
            object-fit: cover;
            border-radius: 3px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            flex-shrink: 0;
            display: inline-block;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
        }

        .lang-world-icon {
            font-size: 16px;
            color: #38BDF8;
            width: 20px;
            text-align: center;
            flex-shrink: 0;
            display: inline-block;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
        }

        /* Dark Mode Implementation */
        body.dark-mode {
            background-color: #161f2e;
            background-image: url('fondo_facetado.svg?v=5');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            background-attachment: fixed;
            color: white;
        }

        body.dark-mode nav {
            background: rgba(10, 10, 10, 0.85);
            border-bottom-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        body.dark-mode .logo,
        body.dark-mode .nav-links a,
        body.dark-mode .t-mini-item span {
            color: white;
        }

        body.dark-mode .topbar-timer {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
        }

        body.dark-mode .icon-btn {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.1);
            color: white;
        }

        body.dark-mode .profiles-section {
            background: transparent !important;
        }

        body.dark-mode .p-card.user {
            background: linear-gradient(175deg, rgba(0, 122, 255, 0.35) 0%, rgba(18, 48, 92, 0.88) 45%, rgba(13, 34, 68, 0.94) 100%) !important;
            border: 2px solid rgba(0, 122, 255, 0.52) !important;
            box-shadow: 0 20px 48px rgba(0, 122, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
        }

        body.dark-mode .p-card.prov {
            background: linear-gradient(175deg, rgba(255, 149, 0, 0.35) 0%, rgba(76, 42, 16, 0.88) 45%, rgba(54, 28, 10, 0.94) 100%) !important;
            border: 2px solid rgba(255, 149, 0, 0.52) !important;
            box-shadow: 0 20px 48px rgba(255, 149, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
        }

        body.dark-mode .p-content h3 {
            color: white;
        }

        body.dark-mode .p-content p {
            color: #CBD5E1 !important;
        }

        body.dark-mode .catalogs-section {
            background: transparent !important;
        }

        body.dark-mode .cat-item {
            border-color: #111111;
        }

        body.dark-mode .app-banner,
        body.dark-mode .flags-marquee {
            background: rgba(10, 10, 10, 0.45);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-color: rgba(255, 255, 255, 0.08);
        }

        body.dark-mode .app-banner h2,
        body.dark-mode .f-m-content span {
            color: #F5F5F0;
        }

        body.dark-mode .lang-list {
            background: #0A0A0A;
            border-color: #111111;
        }

        body.dark-mode .lang-list div {
            color: white;
        }

        body.dark-mode .lang-list div:hover {
            background: #111111;
        }

        body.dark-mode .mobile-capsule {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
        }

        body.dark-mode .mobile-capsule .t-mini-item span {
            color: white;
        }

        /* Map Sidebar and Category Styles */
        .btn-back-city {
            background: rgba(0, 0, 0, 0.05);
            border: 1.5px solid rgba(0, 0, 0, 0.08);
            color: var(--text-dark);
        }
        .btn-back-city:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        body.dark-mode .map-sidebar,
        .map-sidebar {
            background: #FFFFFF !important;
            border: 1.5px solid rgba(15, 23, 42, 0.12) !important;
            color: #0F172A !important;
            box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255,255,255,0.9) !important;
        }
        body.dark-mode .map-sidebar h2,
        .map-sidebar h2 {
            color: #0F172A !important;
        }
        body.dark-mode .close-sidebar,
        .close-sidebar {
            color: #0F172A !important;
            background: #F1F5F9 !important;
            border: 1.5px solid rgba(15, 23, 42, 0.15) !important;
        }
        body.dark-mode .close-sidebar:hover,
        .close-sidebar:hover {
            background: #E2E8F0 !important;
            color: #000000 !important;
        }
        body.dark-mode .city-tag,
        .city-tag {
            background: #F8FAFC !important;
            color: #0F172A !important;
            border: 1.5px solid #E2E8F0 !important;
            font-weight: 800 !important;
        }
        body.dark-mode .city-tag:hover,
        .city-tag:hover {
            background: #007AFF !important;
            color: #FFFFFF !important;
            border-color: #007AFF !important;
        }
        body.dark-mode .service-category-col,
        .service-category-col {
            background: #F8FAFC !important;
            border: 1px solid #E2E8F0 !important;
        }
        body.dark-mode .service-category-col h3,
        .service-category-col h3 {
            color: #0F172A !important;
            font-weight: 900 !important;
        }
        body.dark-mode .column-pagination-container,
        .column-pagination-container {
            background: #F1F5F9 !important;
            border: 1px solid #E2E8F0 !important;
        }
        body.dark-mode .pag-text,
        .pag-text {
            color: #0F172A !important;
            font-weight: 800 !important;
        }
        body.dark-mode .pag-arrow,
        .pag-arrow {
            color: #007AFF !important;
        }
        body.dark-mode .pag-arrow:hover,
        .pag-arrow:hover {
            background: rgba(0, 122, 255, 0.12) !important;
        }
        body.dark-mode .pag-arrow:disabled,
        .pag-arrow:disabled {
            color: rgba(15, 23, 42, 0.25) !important;
        }
        body.dark-mode .service-item-container,
        .service-item-container {
            background: #FFFFFF !important;
            border: 1px solid #E2E8F0 !important;
        }
        body.dark-mode .service-name,
        .service-name {
            color: #0F172A !important;
            font-weight: 800 !important;
        }
        body.dark-mode .subservices-list li,
        .subservices-list li {
            color: #475569 !important;
            font-weight: 600 !important;
        }
        body.dark-mode .subservices-list li::before,
        .subservices-list li::before {
            color: #007AFF !important;
        }
        body.dark-mode .status-badge.status-active,
        .status-badge.status-active {
            background: rgba(16, 185, 129, 0.15) !important;
            color: #059669 !important;
            border: 1px solid rgba(16, 185, 129, 0.3) !important;
        }
        body.dark-mode .status-badge.status-pronto,
        .status-badge.status-pronto {
            background: rgba(245, 158, 11, 0.15) !important;
            color: #D97706 !important;
            border: 1px solid rgba(245, 158, 11, 0.3) !important;
        }
        body.dark-mode .btn-back-city,
        .btn-back-city {
            background: #F1F5F9 !important;
            border: 1px solid rgba(15, 23, 42, 0.15) !important;
            color: #0F172A !important;
            font-weight: 800 !important;
        }
        body.dark-mode .btn-back-city:hover,
        .btn-back-city:hover {
            background: #E2E8F0 !important;
            color: #000000 !important;
        }


        .nav-btns-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .btn-nav-prov {
            background: linear-gradient(135deg, var(--oro-sagrado), #F9C851) !important;
            color: #1a2235 !important;
            box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3) !important;
        }

        .mobile-nav-btns {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            align-items: center;
        }

        .mobile-nav-btns .btn-nav-mobile {
            width: 100%;
            max-width: 250px;
        }

        .mobile-only {
            display: none;
        }

        .desktop-only {
            display: flex;
        }

        /* Status Badges & Subservices Styling */
        .status-badge {
            font-size: 8px;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-block;
            line-height: 1;
        }

        .status-badge.status-active {
            background: rgba(16, 185, 129, 0.15);
            color: #10B981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .status-badge.status-pronto {
            background: rgba(255, 255, 255, 0.08);
            color: #CBD5E1;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .service-item-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            padding: 8px 10px;
            border: 1px solid rgba(255, 255, 255, 0.04);
            width: 100%;
        }

        .service-item-container.active-item {
            border-left: 2px solid var(--brand-blue);
            background: rgba(0, 116, 228, 0.03);
        }

        .service-item-container.pronto-item {
            opacity: 0.55;
        }

        .service-main-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
        }

        .service-name {
            font-size: 10px;
            font-weight: 800;
            color: white;
            letter-spacing: 0.2px;
        }

        .subservices-list {
            list-style: none;
            padding-left: 10px;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .subservices-list li {
            font-size: 8.5px !important;
            font-weight: 500 !important;
            color: #CBD5E1 !important;
            position: relative;
            padding-left: 8px;
            text-transform: none !important;
            letter-spacing: 0px !important;
        }

        .subservices-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: rgba(255,255,255,0.3);
            font-size: 8px;
        }

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

            .mobile-only {
                display: flex;
            }

            .nav-top-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }

            .mobile-capsule-wrapper {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 5px;
                padding-bottom: 10px;
            }

            .launch-label {
                font-size: 8px;
                font-weight: 900;
                color: var(--oro-sagrado);
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .mobile-capsule {
                background: rgba(0, 0, 0, 0.03);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(0, 0, 0, 0.05);
                border-radius: 25px;
                padding: 8px 15px;
                width: 95%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            }

            .topbar-timer {
                background: transparent;
                box-shadow: none;
                border: none;
                padding: 0;
                gap: 12px;
            }

            .t-mini-item span:first-child {
                font-size: 16px;
                line-height: 1;
            }

            .t-mini-item span:last-child {
                font-size: 5px;
            }

            .btn-nav-mobile {
                padding: 8px 30px;
                font-size: 9px;
                width: 100%;
                text-align: center;
            }

            .logo span { color: #38BDF8 !important; font-weight: 300; }
            .logo {
                font-size: 30px !important;
            }
        }

        /* --- HERO CAROUSEL --- */
        .hero-carousel {
            position: relative;
            height: 85vh;
            min-height: 700px;
            width: 100%;
            overflow: hidden;
            background: var(--bg-dark);
        }

        .carousel-inner {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%;
        }

        .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            background-size: cover;
            background-position: center bottom !important;
            display: flex;
            align-items: center;
            filter: brightness(1.03) contrast(1.1) saturate(1.1);
        }

        .slide::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(15, 23, 42, 0.4) 0%, transparent 50%);
        }

        .slide.slide-coming::after {
            display: none;
        }

        .slide.slide-portfolio::after {
            display: none;
        }

        .slide-content {
            position: relative;
            z-index: 10;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 100px;
            max-width: 1100px;
            color: white;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
            transition: 0.5s;
        }

        .slide h1 {
            font-size: 72px;
            line-height: 1;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: -2px;
        }

        .slide h1 span.w-900 {
            font-weight: 900;
        }

        .slide h1 span.w-500 {
            font-weight: 500;
        }

        .slide p {
            font-size: 22px;
            color: rgba(255, 255, 255, 1);
            margin-bottom: 35px;
            max-width: 850px;
            line-height: 1.4;
            font-weight: 700;
            background: rgba(0, 0, 0, 0.25);
            padding: 15px 25px;
            border-radius: 15px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .btn-slide {
            width: 280px !important;
            padding: 16px 0 !important;
            border-radius: 100px !important;
            font-weight: 900 !important;
            font-size: 12px !important;
            text-transform: uppercase;
            letter-spacing: 2.5px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--oro-sagrado), #F9C851) !important;
            color: #050505 !important;
            align-self: center;
            box-shadow: 0 15px 40px rgba(212, 175, 55, 0.35) !important;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .btn-slide::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: 0s;
        }

        .btn-slide:hover::before {
            animation: shine 0.75s forwards;
        }

        .btn-slide:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212, 175, 55, 0.5) !important;
            background: linear-gradient(135deg, #F9C851, var(--oro-sagrado)) !important;
            border-color: #CBD5E1;
        }

        /* Slide 4: HIGH-FIDELITY BESPOKE TECHNICAL MAP (MIMICKING USER REFERENCE) */
        .slide-portfolio {
            background: var(--bg-dark);
        }

        .map-wrapper {
            position: absolute;
            top: 0;
            right: 0;
            width: 65%;
            height: 100%;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: radial-gradient(circle, #1e293b 0%, #0f172a 100%);
        }

        .map-bg-globe {
            position: absolute;
            width: 100%;
            height: 100%;
            /* opacity removed */
            filter: brightness(1.2);
            pointer-events: none;
        }

        .svg-connections {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
        }

        /* Central Glowing Globe Effect */
        .globe-glow {
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(40px);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: pulseGlobe 4s infinite alternate;
        }

        @keyframes pulseGlobe {
            from {
                opacity: 0.3;
                transform: translate(-50%, -50%) scale(0.9);
            }

            to {
                /* opacity removed */
                transform: translate(-50%, -50%) scale(1.1);
            }
        }

        /* Connection Lines (Dense technical network) */
        .conn-line {
            fill: none;
            stroke-width: 1;
            /* opacity removed */
            filter: drop-shadow(0 0 5px currentColor);
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: flowLine 30s linear infinite;
        }

        .line-blue {
            stroke: #D4AF37;
        }

        .line-pink {
            stroke: #FF3399;
        }

        /* City Markers & Labels */
        .city-marker {
            fill: #FFF;
            filter: drop-shadow(0 0 5px #FFF);
            r: 2.2;
        }

        .city-text {
            font-size: 5px;
            font-weight: 800;
            fill: #FFF;
            text-transform: uppercase;
            letter-spacing: 1px;
            filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9));
        }

        .slide-coming-container {
            padding-left: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-end !important;
            padding-bottom: 45px !important;
            text-align: center !important;
            height: 100% !important;
            position: relative;
        }

        .slide-coming-container .launch-meta {
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 32px;
            font-weight: 900;
            color: #F8FAFC;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
            line-height: 1;
            width: 100%;
            text-align: center;
        }

        .fintech-title-v3 .highlight-text {
            display: block;
            font-size: 32px !important;
            font-weight: 900;
            color: #FACC15 !important;
            /* Vibrant Gold */
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 0 20px rgba(250, 204, 21, 0.4), 0 2px 10px rgba(0, 0, 0, 0.8);
            margin-top: 5px;
        }

        .slide-coming-container h1 {
            font-size: 14px !important;
            letter-spacing: 2px !important;
            margin-bottom: 10px !important;
            color: #FFFFFF !important;
            font-weight: 800 !important;
            width: 100%;
            text-align: center;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .slide-coming-container p.main-mission {
            max-width: 400px;
            font-weight: 800;
            font-size: 14px;
            color: white;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin: 0 auto 15px !important;
            text-align: center;
            line-height: 1.5;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
            width: 100%;
        }

        .launch-call {
            font-size: 16px;
            font-weight: 900;
            color: white;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
            text-align: center;
            width: 100%;
            opacity: 0.8;
        }

        .hero-timer {
            display: flex;
            gap: 15px;
            margin-bottom: 0;
            justify-content: center;
            width: 100%;
        }

        .ht-item {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 0;
            border-radius: 10px;
            width: 58px !important;
            height: 58px !important;
            min-width: 58px !important;
            backdrop-filter: blur(25px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .ht-item span:first-child {
            display: block;
            font-size: 28px !important;
            font-weight: 800;
            line-height: 0.95;
            margin-bottom: 2px;
            color: #FFFFFF;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        .ht-item span:last-child {
            font-size: 9px !important;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: rgba(255,255,255,0.8);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            margin-top: 1px;
        }

        .carousel-dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 60;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: 0.3s;
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .dot.active {
            background: linear-gradient(135deg, #38BDF8 0%, #007AFF 100%);
            transform: scale(1.4);
            border-color: white;
        }

        /* Transition Bridge Subtilized */
        .hero-carousel::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: linear-gradient(to top, white, transparent);
            z-index: 8;
            /* opacity removed */
        }

        /* --- PROFILES SECTION --- */
        .profiles-section {
            padding: 28px 0 20px;
            background: transparent !important;
        }

        .profiles-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .p-card {
            background: rgba(15, 15, 15, 0.6);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 24px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(212, 175, 55, 0.15);
            box-shadow: var(--layered-shadow);
            height: 100%;
            position: relative;
        }

        .p-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('fondo_facetado.svg?v=5');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            opacity: 0.48;
            pointer-events: none;
            z-index: 0;
            transition: opacity 0.4s ease;
        }

        .p-card:hover::before {
            opacity: 0.62;
        }

        .p-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 30px 60px rgba(212, 175, 55, 0.15);
            border-color: rgba(212, 175, 55, 0.5);
        }

        .p-img {
            width: 100%;
            height: 360px;
            object-fit: cover;
            display: block;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
            z-index: 1;
        }

        .p-card.user .p-img {
            object-position: center 15% !important;
        }

        .p-card.prov .p-img {
            object-position: center 15% !important;
        }

        .p-content {
            padding: 35px 30px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            z-index: 1;
        }

        .p-tag {
            font-size: 18px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 2.5px;
            margin-bottom: 15px;
        }

        .p-card.user {
            background: linear-gradient(175deg, rgba(0, 122, 255, 0.35) 0%, rgba(18, 48, 92, 0.88) 45%, rgba(13, 34, 68, 0.94) 100%) !important;
            border: 2px solid rgba(0, 122, 255, 0.52) !important;
            box-shadow: 0 20px 48px rgba(0, 122, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
        }

        .p-card.user:hover {
            border-color: #007AFF !important;
            box-shadow: 0 30px 65px rgba(0, 122, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        }

        .p-card.prov {
            background: linear-gradient(175deg, rgba(255, 149, 0, 0.35) 0%, rgba(76, 42, 16, 0.88) 45%, rgba(54, 28, 10, 0.94) 100%) !important;
            border: 2px solid rgba(255, 149, 0, 0.52) !important;
            box-shadow: 0 20px 48px rgba(255, 149, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
        }

        .p-card.prov:hover {
            border-color: #FF9500 !important;
            box-shadow: 0 30px 65px rgba(255, 149, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        }

        .p-card.user .p-tag {
            color: #007AFF !important;
        }

        .p-card.prov .p-tag {
            color: #FF9500 !important;
        }

        .p-content h3 {
            font-size: 32px;
            font-weight: 900;
            margin-bottom: 12px;
            text-transform: uppercase;
            color: #FFFFFF;
        }

        .p-card.user h3 span.brand-thin {
            color: #007AFF !important;
        }

        .p-card.prov h3 span.brand-thin {
            color: #FF9500 !important;
        }

        .p-content p {
            font-size: 15px;
            color: #CBD5E1 !important;
            margin-bottom: 25px;
            flex-grow: 1;
            line-height: 1.6;
            text-align: left;
        }

        /* --- FINTECH SLIDE 1 V3: CLEAR CENTER --- */
        .slide-fintech {
            position: relative;
        }

        .fintech-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, #0B1F3A 0%, transparent 45%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 40%);
            z-index: 1;
        }

        .fintech-content-v3 {
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 100px 15px 70px !important;
            text-align: center !important;
            height: 100%;
            width: 100% !important;
            left: 0 !important;
            transform: none !important;
        }

        .fintech-title-v3 {
            line-height: 1.0 !important;
            letter-spacing: -2px !important;
            color: #F8FAFC !important;
            margin-bottom: 0;
            margin-top: 10px;
            text-transform: uppercase;
        }

        .fintech-title-v3 .w-900 {
            font-weight: 900;
            font-size: 52px !important;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
        }

        .fintech-title-v3 .w-500 {
            font-weight: 500;
            font-size: 52px !important;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
        }

        .fintech-title-v3 .highlight-text {
            color: #2563EB !important;
            font-size: 32px !important;
            font-weight: 900;
            text-shadow: 0 0 30px #FFFFFF, 0 0 60px #FFFFFF, 0 0 90px rgba(255, 255, 255, 0.8), 0 2px 15px rgba(0, 0, 0, 0.9);
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
            letter-spacing: 4px;
            margin-top: 5px;
            display: block;
        }


        .fintech-bottom-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            width: 100%;
            margin-top: 0;
            padding-bottom: 0;
            z-index: 10;
        }

        .launch-date-label {
            font-size: 14px;
            font-weight: 800;
            color: #FFFFFF;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-top: 5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        .hero-timer {
            display: flex;
            justify-content: center;
            gap: 10px;
            width: 100%;
            position: relative;
            z-index: 10;
        }

        .fintech-grid-plans {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 25px;
            width: 100%;
            flex-wrap: nowrap;
            margin-top: 15px;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .fintech-plan-card {
            background: rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            border-radius: 15px !important;
            padding: 10px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
            height: auto !important;
            max-height: none !important;
            overflow: hidden !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        .fintech-plan-card::-webkit-scrollbar {
            display: none !important;
        }

        .fintech-plan-card:hover {
            transform: translateY(-3px);
            background: rgba(255, 255, 255, 0.18);
        }

        .plan-col {
            display: flex;
            flex-direction: column;
            align-items: center !important;
            text-shadow: 0 4px 25px rgba(0, 0, 0, 0.9);
            position: relative;
            width: 100%;
            text-align: center;
        }

        .plan-name-row {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            position: relative;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        .plan-col .w-900 {
            font-size: 34px !important;
            line-height: 1;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            /* Cleaned shadow for legibility */
            margin: 0;
            position: relative;
        }

        .plan-badge {
            position: absolute;
            bottom: -4px;
            right: -10px;
            background: #000 !important;
            border: 1px solid #FFF !important;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 9px !important;
            font-weight: 900;
            color: white !important;
            letter-spacing: 1px;
            z-index: 10;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            line-height: 1.2;
            transform: none !important;
            text-transform: uppercase;
        }

        .prime-color {
            background: linear-gradient(to top, #065F46 0%, #10B981 50%, #34D399 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 0 12px rgba(255,255,255,0.3)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
            font-weight: 900 !important;
        }

        .max-color {
            background: linear-gradient(to top, #7C3AED 0%, #A78BFA 50%, #C4B5FD 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 0 15px rgba(167,139,250,0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
            font-weight: 900 !important;
        }

        .gold-color {
            background: linear-gradient(to top, #B49231 0%, #D4AF37 50%, #FFF1B5 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 0 12px rgba(255,255,255,0.3)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
            font-weight: 900 !important;
        }

        .gold-title {
            background: linear-gradient(to top, #D4AF37 0%, #FFF1B5 50%, #FFFFFF 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.35)) !important;
            font-weight: 900 !important;
        }

        .max-title {
            background: linear-gradient(to top, #4C1D95 0%, #A78BFA 50%, #FFFFFF 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.35)) !important;
            font-weight: 900 !important;
        }

        .prime-title {
            background: linear-gradient(to top, #065F46 0%, #34D399 50%, #FFFFFF 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.35)) !important;
            font-weight: 900 !important;
        }

        .gold-prov {
            background: linear-gradient(to right, #BF953F 0%, #FCF6BA 45%, #FBF5B7 55%, #BF953F 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900 !important;
            filter: drop-shadow(0 2px 10px rgba(191, 149, 63, 0.5));
        }

        .gold-prov-branding {
            background: linear-gradient(to right, #BF953F 0%, #FCF6BA 45%, #FBF5B7 55%, #BF953F 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 500 !important;
            filter: drop-shadow(0 2px 10px rgba(191, 149, 63, 0.5));
        }

        .elite-color {
            background: linear-gradient(to top, #94A3B8 0%, #E2E8F0 50%, #FFFFFF 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            font-weight: 900 !important;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
        }

        .plan-count {
            font-size: 24px !important;
            font-weight: 900;
            color: #F8FAFC;
            line-height: 1;
            margin-bottom: 2px;
        }

        .plan-label {
            color: #F8FAFC !important;
            font-size: 10px !important;
            font-weight: 700;
            opacity: 0.9;
            letter-spacing: 1px;
            text-transform: uppercase;
            line-height: 1.1;
        }

        .plan-highlight {
            background: #2563EB !important;
            color: white !important;
            font-size: 11px !important;
            font-weight: 900;
            padding: 4px 12px;
            border-radius: 8px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-top: 8px;
            display: inline-block;
            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
            text-shadow: none !important;
        }

        .fintech-unlock-box {
            background: rgba(11, 31, 58, 0.35);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 20px;
            border-radius: 15px;
            font-size: 14px !important;
            width: 480px;
            max-width: 90vw;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0 auto 0;
            line-height: 1.3;
            color: white !important;
            text-align: center;
            overflow: visible !important;
        }

        .fintech-unlock-box div {
            margin-bottom: 2px;
        }

        .fintech-unlock-box .row-1 {
            font-weight: 700;
            font-size: 16px;
        }

        .fintech-unlock-box .row-2 {
            font-weight: 500;
            font-size: 14px;
            opacity: 0.9;
        }

        .fintech-details-v3 {
            font-size: 16px !important;
            color: #F8FAFC !important;
            opacity: 1;
            line-height: 1.5;
            margin-bottom: 0px;
            text-align: center;
            font-weight: 700;
            text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);
        }

        .fintech-details-v3 div {
            letter-spacing: 0.5px;
        }

        .fintech-p-v3 {
            font-size: 15px !important;
            color: #E2E8F0 !important;
            max-width: 450px;
            line-height: 1.6;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
            margin: 0 !important;
            opacity: 0.9;
            font-weight: 500;
        }

        .fintech-btn-v2 {
            width: auto !important;
            min-width: 220px !important;
            padding: 14px 30px !important;
            background: #2563EB !important;
            border-radius: 100px !important;
            font-weight: 800 !important;
            font-size: 11px !important;
            color: white !important;
            box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35) !important;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .fintech-btn-v2::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: 0s;
        }

        .fintech-btn-v2:hover::before {
            animation: shine 0.75s forwards;
        }

        .fintech-btn-v2:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px rgba(37, 99, 235, 0.45) !important;
            border-color: #CBD5E1;
            background: #1D4ED8 !important;
        }

        .btn-p {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            min-width: 190px;
            height: 52px;
            padding: 0 28px !important;
            font-size: 13px !important;
            font-weight: 900 !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
            border-radius: 100px !important;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
            position: relative;
            overflow: hidden;
            text-decoration: none;
            z-index: 1;
        }

        @keyframes btnShineSweep {
            0% {
                left: -130%;
            }
            32%, 100% {
                left: 140%;
            }
        }

        .btn-p::after {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: -130% !important;
            width: 70% !important;
            height: 100% !important;
            transform: skewX(-25deg) !important;
            animation: btnShineSweep 3.2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
            pointer-events: none !important;
            z-index: 2 !important;
        }

        /* CLIENTE / ICONIAPP: BOTÓN EJECUTIVO CON TEXTURA TENUE E ILUMINACIÓN EN HOVER */
        .p-card.user .btn-p {
            background-color: #F8FAFC !important;
            background-image: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%) !important;
            background-size: 100% 100%, 100% 100% !important;
            color: #0F172A !important;
            border: 1.5px solid rgba(56, 189, 248, 0.68) !important;
            box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 -1.5px 2px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(0, 0, 0, 0.45) !important;
        }

        .p-card.user .btn-p::after {
            background: linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0.2) 50%, rgba(56, 189, 248, 0) 100%) !important;
        }

        .p-card.user .btn-p:hover {
            background-color: #2563EB !important;
            background-image: var(--iconi-subtle-sheen-hover), linear-gradient(180deg, #3B82F6 0%, #1D4ED8 52%, #1E3A8A 100%) !important;
            background-size: 100% 100%, 100% 100%, 100% 100% !important;
            color: #FFFFFF !important;
            border-color: #BAE6FD !important;
            transform: translateY(-3px) !important;
            box-shadow: inset 0 2px 1.5px rgba(255, 255, 255, 0.78), inset 0 -2px 2px rgba(2, 10, 28, 0.5), inset 0 0 16px rgba(125, 211, 252, 0.35), 0 0 20px rgba(56, 189, 248, 0.6), 0 14px 32px rgba(0, 0, 0, 0.65) !important;
        }

        .p-card.user .btn-p:hover::after {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%) !important;
        }

        /* PROVEEDOR / ICONIPRO: BOTÓN EJECUTIVO CHAMPAGNE CON TEXTURA TENUE E ILUMINACIÓN EN HOVER */
        .p-card.prov .btn-p {
            background-color: #F8FAFC !important;
            background-image: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%) !important;
            background-size: 100% 100%, 100% 100% !important;
            color: #0F172A !important;
            border: 1.5px solid rgba(197, 160, 89, 0.78) !important;
            box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 -1.5px 2px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(0, 0, 0, 0.45) !important;
        }

        .p-card.prov .btn-p::after {
            background: linear-gradient(90deg, rgba(197, 160, 89, 0) 0%, rgba(197, 160, 89, 0.22) 50%, rgba(197, 160, 89, 0) 100%) !important;
        }

        .p-card.prov .btn-p:hover {
            background-color: #C5A059 !important;
            background-image: var(--iconi-subtle-sheen-hover), linear-gradient(180deg, #E5C578 0%, #C5A059 52%, #9A7B3E 100%) !important;
            background-size: 100% 100%, 100% 100%, 100% 100% !important;
            color: #060911 !important;
            border-color: #FEF3C7 !important;
            transform: translateY(-3px) !important;
            box-shadow: inset 0 2px 1.5px rgba(255, 255, 255, 0.85), inset 0 -2px 2px rgba(45, 30, 8, 0.45), inset 0 0 16px rgba(254, 243, 199, 0.45), 0 0 20px rgba(212, 175, 55, 0.6), 0 14px 32px rgba(0, 0, 0, 0.65) !important;
        }

        .p-card.prov .btn-p:hover::after {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%) !important;
        }

        .p-card-actions {
            display: flex;
            flex-direction: column;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            gap: 12px;
            width: 100%;
            margin-top: auto;
        }

        .btn-complete-profile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 11px 22px;
            border-radius: 100px;
            font-size: 12.5px;
            font-weight: 800;
            text-decoration: none;
            letter-spacing: 0.4px;
            transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .btn-complete-user {
            background-color: rgba(11, 25, 50, 0.88);
            background-image: var(--iconi-subtle-sheen-normal);
            background-size: 100% 100%, 100% 100%;
            border: 1.5px solid #38BDF8;
            color: #BAE6FD;
            box-shadow: inset 0 1.5px 1px rgba(186, 230, 253, 0.35), inset 0 -1.5px 2px rgba(2, 8, 24, 0.65), 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .btn-complete-user i {
            color: #38BDF8;
        }

        .btn-complete-user:hover {
            background-color: rgba(14, 68, 150, 0.72);
            background-image: var(--iconi-subtle-sheen-hover);
            background-size: 100% 100%, 100% 100%;
            border-color: #FFFFFF;
            color: #FFFFFF;
            transform: translateY(-3px);
            box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65), inset 0 0 14px rgba(56, 189, 248, 0.32), 0 0 18px rgba(56, 189, 248, 0.55), 0 12px 26px rgba(0, 122, 255, 0.45);
        }

        .btn-complete-prov {
            background-color: rgba(28, 16, 8, 0.88);
            background-image: var(--iconi-subtle-sheen-normal);
            background-size: 100% 100%, 100% 100%;
            border: 1.5px solid #F97316;
            color: #FDBA74;
            box-shadow: inset 0 1.5px 1px rgba(254, 215, 170, 0.32), inset 0 -1.5px 2px rgba(10, 5, 2, 0.7), 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .btn-complete-prov i {
            color: #F97316;
        }

        .btn-complete-prov:hover {
            background-color: rgba(154, 52, 18, 0.72);
            background-image: var(--iconi-subtle-sheen-hover);
            background-size: 100% 100%, 100% 100%;
            border-color: #FFFFFF;
            color: #FFFFFF;
            transform: translateY(-3px);
            box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65), inset 0 0 14px rgba(251, 146, 60, 0.35), 0 0 18px rgba(249, 115, 22, 0.55), 0 12px 26px rgba(249, 115, 22, 0.45);
        }

        @media (max-width: 768px) {
            .p-card-actions {
                align-items: stretch;
            }
            .btn-complete-profile {
                width: 100%;
                border-radius: 12px;
                padding: 13px 16px;
                font-size: 12.5px;
            }
        }

        /* --- CAT MODAL STYLES (NEUTRAL CLEAN ARCHITECTURE - ONLY TITLE & ICONS COLORED) --- */
        #catalogContent {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .cat-modal-rich {
            color: #0F172A;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            min-height: 0;
            gap: 10px;
            margin-top: 2px;
            text-align: left;
            position: relative;
            z-index: 2;
        }

        /* === 1. HERO BANNER DEL CATÁLOGO CON IMAGEN DE FONDO RELACIONADA === */
        .cat-hero-banner {
            --hero-fade-start: #FFF7ED;
            --hero-fade-mid: rgba(255, 237, 213, 0.92);
            position: relative;
            border-radius: 18px;
            padding: 16px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 22px;
            overflow: hidden;
            flex-shrink: 0;
            background: linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 55%, #FDE6C4 100%);
            border: 1px solid #FED7AA;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
        }

        .cat-hero-banner.theme-work {
            --hero-fade-start: #FFF7ED;
            --hero-fade-mid: rgba(255, 237, 213, 0.92);
            background: linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 55%, #FDE6C4 100%);
            border-color: #FED7AA;
        }

        .cat-hero-banner.theme-care {
            --hero-fade-start: #FFF1F2;
            --hero-fade-mid: rgba(255, 228, 230, 0.92);
            background: linear-gradient(90deg, #FFF1F2 0%, #FFE4E6 55%, #FECDD3 100%);
            border-color: #FECDD3;
        }

        .cat-hero-banner.theme-pro {
            --hero-fade-start: #ECFDF5;
            --hero-fade-mid: rgba(209, 250, 229, 0.92);
            background: linear-gradient(90deg, #ECFDF5 0%, #D1FAE5 55%, #A7F3D0 100%);
            border-color: #A7F3D0;
        }

        .cat-hero-banner.theme-club {
            --hero-fade-start: #F0F9FF;
            --hero-fade-mid: rgba(224, 242, 254, 0.92);
            background: linear-gradient(90deg, #F0F9FF 0%, #E0F2FE 55%, #BAE6FD 100%);
            border-color: #BAE6FD;
        }

        /* Fotografía real relacionada con cada catálogo a la derecha del Hero Banner */
        .cat-hero-photo {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 48%;
            background-size: cover;
            background-position: center right;
            background-repeat: no-repeat;
            pointer-events: none;
            z-index: 0;
        }

        .cat-hero-banner.theme-work .cat-hero-photo {
            background-image: url('assets/iconi-work.jpg');
            background-position: 75% center;
        }

        .cat-hero-banner.theme-care .cat-hero-photo {
            background-image: url('assets/iconi-care.jpg');
            background-position: 75% center;
        }

        .cat-hero-banner.theme-pro .cat-hero-photo {
            background-image: url('assets/iconi-experts.jpg');
            background-position: 75% center;
        }

        .cat-hero-banner.theme-club .cat-hero-photo {
            background-image: url('../recursos_website/imagenes_preregistro/iconiclub.png');
            background-position: center center;
        }

        .cat-hero-photo::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, var(--hero-fade-start) 0%, var(--hero-fade-mid) 44%, rgba(255, 255, 255, 0.28) 78%, rgba(255, 255, 255, 0.08) 100%);
        }

        .cat-hero-left {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            flex: 1;
            min-width: 0;
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .cat-hero-emblem {
            display: none !important;
        }

        .cat-hero-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 6px;
            min-width: 0;
            width: 100%;
        }

        .cat-hero-headline {
            margin: 0;
            font-size: clamp(18px, 1.8vw, 22.5px);
            font-weight: 900;
            color: #0F172A;
            letter-spacing: -0.35px;
            line-height: 1.22;
            text-align: center;
            text-wrap: balance;
        }

        .cat-hero-desc {
            margin: 0 auto;
            font-size: clamp(13.8px, 1.2vw, 15px);
            font-weight: 600;
            color: #1E293B;
            line-height: 1.48;
            max-width: 680px;
            text-align: center;
            text-wrap: pretty;
        }

        .cat-hero-stats-card {
            position: relative;
            z-index: 1;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1.5px solid rgba(251, 146, 60, 0.36);
            border-radius: 14px;
            padding: 12px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 6px;
            flex-shrink: 0;
            min-width: 275px;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        }

        .cat-hero-banner.theme-care .cat-hero-stats-card {
            border-color: rgba(244, 63, 94, 0.34);
        }

        .cat-hero-banner.theme-pro .cat-hero-stats-card {
            border-color: rgba(16, 185, 129, 0.34);
        }

        .cat-hero-banner.theme-club .cat-hero-stats-card {
            border-color: rgba(14, 165, 233, 0.34);
        }

        .cat-stat-row-main {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 8px;
            font-size: 14.2px;
            font-weight: 900;
            color: var(--cat-accent, #EA580C);
            line-height: 1.25;
        }

        .cat-stat-row-sub {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 8px;
            font-size: 12.6px;
            font-weight: 700;
            color: #1E293B;
            line-height: 1.3;
        }

        /* === 2. FRANJA DE 3 PASOS: PARA EL CLIENTE: SOLICITA EN 3 PASOS === */
        .cat-steps-strip {
            background: rgba(248, 250, 252, 0.72);
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 16px;
            padding: 8px 16px 10px;
            display: flex;
            flex-direction: column;
            gap: 7px;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        .cat-how-steps-head {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 11.5px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #0F172A;
            margin: 0;
        }

        .cat-how-steps-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .cat-step-sep {
            color: #64748B;
            font-size: 12px;
            flex-shrink: 0;
        }

        .cat-step-glass-pill {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid #E2E8F0;
            border-radius: 12px;
            padding: 8px 14px;
            box-shadow: 0 2px 5px rgba(15, 23, 42, 0.025);
            min-width: 0;
        }

        .cat-step-num {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #0F172A;
            color: #FFFFFF;
            font-size: 12px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .cat-step-icon-accent {
            color: var(--cat-accent, #EA580C);
            font-size: 21px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 26px;
            height: 26px;
        }

        .cat-step-label {
            display: flex;
            flex-direction: column;
            gap: 1px;
            min-width: 0;
        }

        .cat-step-label strong {
            font-size: 13px;
            font-weight: 800;
            color: #0F172A;
            line-height: 1.18;
            white-space: nowrap;
        }

        .cat-step-label small {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: #475569;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* === 3. EXPLORADOR DE SERVICIOS (BUSCADOR AMPLIO + CIUDAD + GRID 4x2 + PAGINACIÓN) === */
        .cat-services-showcase {
            background: rgba(248, 250, 252, 0.72);
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 16px;
            padding: 12px 16px 12px;
            box-shadow: none;
            flex: 0 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
            position: relative;
            z-index: 1;
        }

        .cat-services-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 12px;
            flex-shrink: 0;
            position: relative;
            z-index: 50;
        }

        .cat-explorer-titles {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .cat-explorer-titles h5 {
            margin: 0;
            font-size: 15px;
            font-weight: 950;
            letter-spacing: -0.2px;
            color: #0F172A;
            text-transform: uppercase;
            line-height: 1.15;
        }

        .cat-explorer-titles p {
            margin: 0;
            font-size: 12px;
            font-weight: 500;
            color: #475569;
            line-height: 1.25;
        }

        .cat-explorer-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1 1 640px;
            justify-content: flex-end;
            max-width: 820px;
            flex-wrap: nowrap;
            position: relative;
            z-index: 55;
        }

        .cat-search-field {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #FFFFFF;
            border: 1.5px solid #CBD5E1;
            border-radius: 12px;
            padding: 0 14px;
            height: 42px;
            flex: 1 1 240px;
            min-width: 210px;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
            transition: border-color 0.16s ease, box-shadow 0.16s ease;
        }

        .cat-search-field:focus-within {
            border-color: var(--cat-accent, #EA580C);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
        }

        .cat-search-field i {
            color: #64748B;
            font-size: 14px;
            flex-shrink: 0;
        }

        #catModalSearchInput,
        .cat-search-field input,
        .modal-content.modal-cat .cat-search-field input#catModalSearchInput {
            border: none !important;
            outline: none !important;
            background: transparent !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            font-family: 'Outfit', sans-serif !important;
            font-size: 13.5px !important;
            font-weight: 500 !important;
            color: #0F172A !important;
            width: 100% !important;
            min-width: 0 !important;
            height: 100% !important;
            line-height: 40px !important;
            padding: 0 4px !important;
            margin: 0 !important;
        }

        #catModalSearchInput::placeholder,
        .cat-search-field input::placeholder {
            color: #94A3B8 !important;
            font-weight: 500 !important;
        }

        .cat-city-field {
            display: flex;
            align-items: center;
            gap: 7px;
            background: #FFFFFF;
            border: 1.5px solid #94A3B8;
            border-radius: 12px;
            padding: 0 12px;
            height: 42px;
            min-width: 172px;
            flex: 0 1 190px;
            position: relative;
            z-index: 10;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
            cursor: pointer;
            user-select: none;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .cat-city-field:hover,
        .cat-city-field.is-open,
        .cat-city-field.open {
            border-color: #0F172A;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
        }

        .cat-city-field.is-open,
        .cat-city-field.open {
            z-index: 10060;
        }

        .cat-city-field i.city-pin {
            color: var(--cat-accent, #0284C7);
            font-size: 13.5px;
            flex-shrink: 0;
        }

        .cat-loc-trigger-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            outline: none;
            padding: 0 16px 0 2px;
            font-family: 'Outfit', sans-serif;
            font-size: 13px;
            font-weight: 800;
            color: #0F172A;
            cursor: pointer;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cat-loc-menu {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: auto;
            min-width: 240px;
            max-width: 310px;
            max-height: 270px;
            overflow-y: auto;
            background: #FFFFFF;
            border: 2px solid #0F172A;
            border-radius: 14px;
            box-shadow: 0 22px 50px rgba(15, 23, 42, 0.32);
            padding: 6px;
            z-index: 10070;
        }

        .cat-city-field.is-open .cat-loc-menu,
        .cat-city-field.open .cat-loc-menu,
        .cat-loc-menu.show {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .cat-loc-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 11px;
            border-radius: 9px;
            font-family: 'Outfit', sans-serif;
            font-size: 12.8px;
            font-weight: 700;
            color: #0F172A;
            background: #F8FAFC;
            border: 1px solid transparent;
            cursor: pointer;
            transition: background 0.14s ease, border-color 0.14s ease;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
        }

        .cat-loc-option:hover {
            background: #E2E8F0;
            border-color: #94A3B8;
        }

        .cat-loc-option.active,
        .cat-loc-option.selected {
            background: #0F172A;
            color: #FFFFFF;
            border-color: #0F172A;
        }

        #catModalCountrySelect,
        #catModalCitySelect,
        .cat-city-field select,
        .modal-content.modal-cat .cat-city-field select#catModalCountrySelect,
        .modal-content.modal-cat .cat-city-field select#catModalCitySelect {
            display: none !important;
        }

        .cat-city-field i.city-chev {
            color: #475569;
            font-size: 11.5px;
            pointer-events: none;
            position: absolute;
            right: 13px;
        }

        .cat-top-right-stats {
            display: none !important;
        }

        /* Grid 4x2 de Tarjetas de Categorías */
        .cat-services-grid,
        .cat-services-grid.grid-care,
        .cat-services-grid.grid-work,
        .cat-services-grid.grid-pro,
        .cat-services-grid.grid-club {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-auto-rows: 78px;
            gap: 10px 12px;
            max-height: none;
            overflow: visible;
            padding: 2px;
            flex: 1;
            align-content: center;
        }

        @keyframes slideCatPageRight {
            from { opacity: 0; transform: translateX(14px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .cat-services-grid.page-anim {
            animation: slideCatPageRight 0.2s ease-out;
        }

        .cat-service-card,
        .cat-services-grid.grid-care .cat-service-card,
        .cat-services-grid.grid-work .cat-service-card,
        .cat-services-grid.grid-pro .cat-service-card,
        .cat-services-grid.grid-club .cat-service-card {
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid #E2E8F0;
            border-radius: 13px;
            padding: 10px 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            gap: 11px;
            height: 78px;
            min-height: 78px;
            max-height: 78px;
            cursor: pointer;
            transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.035);
            position: relative;
            box-sizing: border-box;
        }

        .cat-service-card:hover {
            transform: translateY(-2px);
            background: #FFFFFF;
            border-color: var(--cat-accent, #EA580C);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        }

        .cat-service-card:active {
            transform: translateY(0);
        }

        .cat-icon-halo,
        .cat-services-grid.grid-care .cat-icon-halo,
        .cat-services-grid.grid-work .cat-icon-halo,
        .cat-services-grid.grid-pro .cat-icon-halo,
        .cat-services-grid.grid-club .cat-icon-halo {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            flex-shrink: 0;
            transition: transform 0.18s ease;
        }

        .cat-service-card:hover .cat-icon-halo {
            transform: scale(1.06);
        }

        .cat-service-icon-3d,
        .cat-services-grid.grid-care .cat-service-icon-3d,
        .cat-services-grid.grid-work .cat-service-icon-3d,
        .cat-services-grid.grid-pro .cat-service-icon-3d,
        .cat-services-grid.grid-club .cat-service-icon-3d {
            width: 46px;
            height: 46px;
            object-fit: contain;
            display: block;
            flex-shrink: 0;
        }

        .cat-service-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .cat-service-head,
        .cat-services-grid.grid-care .cat-service-head,
        .cat-services-grid.grid-work .cat-service-head,
        .cat-services-grid.grid-pro .cat-service-head,
        .cat-services-grid.grid-club .cat-service-head {
            font-size: 12.8px;
            font-weight: 800;
            color: #0F172A;
            line-height: 1.18;
            letter-spacing: -0.2px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .cat-service-subdesc {
            font-size: 11px;
            font-weight: 500;
            color: #64748B;
            line-height: 1.25;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .cat-card-chevron {
            font-size: 11px;
            color: #475569;
            margin-left: 4px;
            flex-shrink: 0;
            transition: transform 0.16s ease, color 0.16s ease;
        }

        .cat-service-card:hover .cat-card-chevron {
            transform: translateX(2px);
            color: #0F172A;
        }

        /* Paginación numérica centrada abajo de las tarjetas (< 1 2 3 4 5 6 >) */
        .cat-pagination-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 12px;
            flex-wrap: wrap;
        }

        .cat-page-arrow {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            border: 1px solid #CBD5E1;
            background: #FFFFFF;
            color: #334155;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.16s ease;
        }

        .cat-page-arrow:hover:not(:disabled) {
            background: #0F172A;
            color: #FFFFFF;
            border-color: #0F172A;
        }

        .cat-page-num {
            min-width: 28px;
            height: 28px;
            padding: 0 7px;
            border-radius: 7px;
            border: 1px solid transparent;
            background: transparent;
            color: #334155;
            font-family: 'Outfit', sans-serif;
            font-size: 12.5px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.16s ease;
        }

        .cat-page-num:hover:not(.active) {
            background: #E2E8F0;
            color: #0F172A;
        }

        .cat-page-num.active {
            background: #0F172A;
            color: #FFFFFF;
            border-color: #0F172A;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
        }

        /* === 4. BARRA INFERIOR DE CONVERSIÓN (QUIERO SER CLIENTE / QUIERO SER PROVEEDOR) === */
        .cat-bottom-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px 0 0;
            background: transparent;
            border: none;
            box-shadow: none;
            flex-shrink: 0;
        }

        .cat-action-row {
            display: flex;
            gap: 16px;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            margin: 0;
        }

        .cat-cta-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-width: 245px;
            padding: 11px 26px;
            border-radius: 999px;
            font-family: 'Outfit', sans-serif;
            font-size: 12.5px;
            font-weight: 800;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.18s ease;
        }

        .cat-cta-pill.cta-client {
            background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
            color: #FFFFFF;
            border: 1.5px solid #007AFF;
            box-shadow: 0 6px 18px rgba(0, 122, 255, 0.34);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
        }

        .cat-cta-pill.cta-client:hover {
            background: linear-gradient(135deg, #0A84FF 0%, #0066CC 100%);
            border-color: #38BDF8;
            color: #FFFFFF;
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(0, 122, 255, 0.46);
        }

        .cat-cta-pill.cta-prov {
            background: linear-gradient(135deg, #FF9500 0%, #E68600 100%);
            color: #FFFFFF;
            border: 1.5px solid #FF9500;
            box-shadow: 0 6px 18px rgba(255, 149, 0, 0.36);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
        }

        .cat-cta-pill.cta-prov:hover {
            background: linear-gradient(135deg, #FFA726 0%, #D97706 100%);
            border-color: #FFB340;
            color: #FFFFFF;
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(255, 149, 0, 0.48);
        }

        .cat-cta-pill .cta-arrow {
            font-size: 11px;
            margin-left: 2px;
            transition: transform 0.16s ease;
        }

        .cat-cta-pill:hover .cta-arrow {
            transform: translateX(3px);
        }

        @media (max-width: 1180px) {
            .cat-services-grid,
            .cat-services-grid.grid-care,
            .cat-services-grid.grid-work,
            .cat-services-grid.grid-pro,
            .cat-services-grid.grid-club {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .cat-hero-banner {
                padding: 16px 18px;
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 12px;
            }
            .cat-hero-stats-card {
                width: 100%;
                min-width: 0;
            }
            .cat-explorer-controls {
                max-width: 100%;
                justify-content: flex-start;
            }
        }

        @media (max-width: 768px) {
            .cat-hero-banner {
                padding: 15px 14px;
                gap: 10px;
            }
            .cat-hero-headline {
                font-size: clamp(17.5px, 4.8vw, 20.5px);
                line-height: 1.22;
            }
            .cat-hero-desc {
                font-size: clamp(13.4px, 3.7vw, 14.5px);
                line-height: 1.45;
                color: #0F172A;
                font-weight: 600;
            }
            .cat-how-steps-bar {
                flex-direction: column;
                align-items: stretch;
                gap: 6px;
            }
            .cat-step-sep {
                display: none;
            }
            .cat-services-header {
                flex-direction: column;
                align-items: stretch;
            }
            .cat-explorer-controls {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                flex: none;
            }
            .cat-search-field,
            .cat-city-field {
                width: 100%;
                min-width: 0;
                flex: none;
            }
            .cat-services-grid,
            .cat-services-grid.grid-care,
            .cat-services-grid.grid-work,
            .cat-services-grid.grid-pro,
            .cat-services-grid.grid-club {
                grid-template-columns: 1fr !important;
                grid-auto-rows: auto !important;
                gap: 10px !important;
            }
            .cat-service-card,
            .cat-services-grid.grid-care .cat-service-card,
            .cat-services-grid.grid-work .cat-service-card,
            .cat-services-grid.grid-pro .cat-service-card,
            .cat-services-grid.grid-club .cat-service-card {
                height: auto !important;
                min-height: 74px !important;
                max-height: none !important;
                padding: 10px 14px !important;
                gap: 12px !important;
                width: 100% !important;
            }
            .cat-cta-pill {
                width: 100%;
            }
        }

        /* Interactive Subservices & Coming Soon Floating Overlay */
        .cat-sub-overlay {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.48);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 120;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border-radius: 20px;
            animation: fadeSubOverlay 0.16s ease-out;
        }

        .cat-sub-overlay.open,
        .cat-sub-overlay.active {
            display: flex !important;
        }

        @keyframes fadeSubOverlay {
            from { opacity: 0; transform: scale(0.98); }
            to { opacity: 1; transform: scale(1); }
        }

        .cat-sub-dialog {
            background: #FFFFFF;
            border: 1px solid #CBD5E1;
            border-radius: 20px;
            width: 100%;
            max-width: min(1060px, 94vw);
            min-height: 0;
            padding: 24px 28px 22px;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
            position: relative;
            color: #0F172A;
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 16px;
        }

        .cat-sub-close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #F8FAFC;
            border: 1px solid #CBD5E1;
            color: #334155;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.16s ease;
            z-index: 5;
        }

        .cat-sub-close:hover {
            background: #0F172A;
            color: #FFFFFF;
            border-color: #0F172A;
        }

        .cat-sub-header {
            display: flex;
            align-items: center;
            gap: 14px;
            padding-bottom: 14px;
            padding-right: 36px;
            margin-bottom: 0;
            border-bottom: 1px solid #E2E8F0;
        }

        .cat-sub-header img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            background: #F8FAFC;
            padding: 6px;
            border-radius: 50%;
            border: 1px solid #E2E8F0;
            flex-shrink: 0;
        }

        .cat-sub-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
            align-items: stretch;
            padding: 2px 0;
            overflow-y: auto;
        }

        .cat-sub-btn {
            background: #F8FAFC;
            border: 1px solid #CBD5E1;
            border-radius: 12px;
            padding: 12px 14px;
            height: 76px;
            min-height: 76px;
            max-height: 76px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: space-between;
            gap: 6px;
            cursor: pointer;
            font-family: 'Outfit', sans-serif;
            color: #0F172A;
            text-align: left;
            transition: all 0.16s ease;
            box-sizing: border-box;
        }

        .cat-sub-btn:hover {
            background: #FFFFFF;
            border-color: #0F172A;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
        }

        .cat-sub-btn .sub-row-title {
            display: block;
            width: 100%;
            font-size: 13.8px;
            font-weight: 800;
            color: #0F172A;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }

        .cat-sub-btn span.req-tag {
            align-self: flex-end;
            margin-left: auto;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: 6px;
            background: #E2E8F0;
            color: #0F172A;
            white-space: nowrap;
            transition: all 0.16s ease;
        }

        .cat-sub-btn:hover span.req-tag {
            background: #0F172A;
            color: #FFFFFF;
        }


        /* --- APP BANNER --- */
        .app-banner {
            background: rgba(255, 255, 255, 0.02);
            padding: 20px 0 !important;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            text-align: center;
        }

        .app-banner-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .app-banner-center-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            text-align: center;
            flex: 1;
        }

        .app-banner-btns-mobile {
            display: none !important;
        }

        .app-store-desktop,
        .google-play-desktop {
            display: inline-flex !important;
            flex-shrink: 0;
        }

        .mobile-only-br {
            display: none;
        }

        @media (max-width: 768px) {
            .app-banner-content {
                flex-direction: column;
                gap: 15px;
            }
            .app-store-desktop,
            .google-play-desktop {
                display: none !important;
            }
            .app-banner-btns-mobile {
                display: flex !important;
                gap: 15px;
                justify-content: center;
            }
            .mobile-only-br {
                display: inline;
            }
        }

        .app-banner-btns {
            display: flex;
            gap: 20px;
            justify-content: center;
        }

        .app-mini-btn {
            background-color: #050811;
            background-image: linear-gradient(180deg, #161F30 0%, #070B14 55%, #020409 100%);
            background-size: 100% 100%, 100% 100%;
            color: #FFFFFF;
            padding: 14px 28px;
            border-radius: 14px;
            border: 1.5px solid rgba(255, 255, 255, 0.28);
            display: inline-flex;
            align-items: center;
            gap: 15px;
            text-decoration: none;
            transition: all 0.25s ease;
            box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.28), inset 0 -1.5px 2px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.45);
        }

        .app-mini-btn:hover {
            background-color: #0F172A;
            background-image: var(--iconi-subtle-sheen-hover), linear-gradient(180deg, #24344D 0%, #0F172A 55%, #060911 100%);
            background-size: 100% 100%, 100% 100%, 100% 100%;
            transform: translateY(-3px);
            border-color: #E2E8F0;
            box-shadow: inset 0 2px 1.5px rgba(255, 255, 255, 0.55), inset 0 0 16px rgba(148, 163, 184, 0.28), 0 0 20px rgba(56, 189, 248, 0.35), 0 12px 30px rgba(0, 0, 0, 0.65);
            color: #FFFFFF;
        }

        .app-mini-btn i {
            font-size: 38px;
            line-height: 1;
        }

        .app-mini-btn div {
            text-align: left;
            line-height: 1.15;
        }

        .app-mini-btn div span {
            font-size: 11px;
            opacity: 0.8;
            display: block;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            font-weight: 600;
        }

        .app-mini-btn div strong {
            font-size: 18px;
            font-weight: 900;
            letter-spacing: 0.5px;
        }

        .app-banner h2 {
            font-size: 26px;
            font-weight: 900;
            text-transform: uppercase;
            color: #FFFFFF;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        .app-launch-date {
            font-size: 13px;
            font-weight: 800;
            color: var(--oro-sagrado);
            text-transform: uppercase;
            letter-spacing: 2px;
            display: inline-block;
            margin-top: 4px;
        }

        /* --- CATALOGS GRID --- */
        .catalogs-section {
            padding: 20px 0 28px;
            background: transparent !important;
            text-align: center;
        }

        .catalog-header {
            margin-bottom: 20px;
            text-align: center;
            position: relative;
            padding: 0 20px;
        }

        .cat-pre-title {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: var(--oro-sagrado);
            margin-bottom: 15px;
            display: block;
            opacity: 0.8;
        }

        .catalog-header h3 {
            font-size: 48px;
            font-weight: 900;
            color: var(--text-dark);
            line-height: 1.1;
            margin-bottom: 20px;
            letter-spacing: -2px;
        }

        .catalog-header h3 span {
            color: var(--brand-blue);
        }

        .cat-divider {
            width: 60px;
            height: 3px;
            background: var(--oro-sagrado);
            margin: 25px auto;
            border-radius: 12px;
        }

        .catalog-header p {
            font-size: 16px;
            color: #444;
            max-width: 850px;
            margin: 0 auto;
            font-weight: 600;
            line-height: 1.6;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .cat-sub-stats {
            font-size: 11px;
            font-weight: 800;
            color: #888;
            margin-top: 15px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .catalogs-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .cat-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: auto;
            min-height: 0;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(212, 175, 55, 0.15);
            background: rgba(15, 15, 15, 0.6);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            display: flex;
            flex-direction: column;
            box-shadow: var(--layered-shadow);
        }

        .cat-item:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 30px 60px rgba(212, 175, 55, 0.15);
            border-color: rgba(212, 175, 55, 0.5);
        }

        .cat-img-box {
            width: 100%;
            height: 240px;
            overflow: hidden;
            position: relative;
        }

        .cat-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: 0.5s;
        }

        .cat-item:hover .cat-img-box img {
            transform: scale(1.08);
        }

        .cat-info {
            padding: 16px 14px 18px;
            text-align: center;
            background: transparent;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }

        .cat-title {
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: -0.5px;
            margin-bottom: 0;
            line-height: 1.05;
        }

        .cat-title span.i-main {
            font-weight: 900;
            color: #FFF;
        }

        .cat-title span.i-sub {
            font-weight: 900;
        }

        /* Brand Colors for Titles - Official Catalog Colors */
        .cat-care .i-sub {
            color: #E11D48;
        }

        .cat-work .i-sub {
            color: #F97316;
        }

        .cat-pro .i-sub {
            color: #10B981;
        }

        .cat-club .i-sub {
            color: #38BDF8;
        }

        .cat-desc {
            font-size: 12px;
            color: #CBD5E1;
            text-transform: uppercase;
            margin-bottom: 6px;
            letter-spacing: 0.5px;
            line-height: 1.3;
        }

        .cat-desc strong {
            font-weight: 900;
            color: #FFFFFF;
        }

        .cat-desc span {
            font-weight: 500;
            color: #94A3B8;
        }

        .btn-cat {
            background-color: #D4AF37;
            background-image: var(--iconi-subtle-sheen-normal), linear-gradient(180deg, #FCE477 0%, #D4AF37 52%, #AA8220 100%);
            background-size: 100% 100%, 100% 100%, 100% 100%;
            color: #050505;
            padding: 9px 24px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 1px solid rgba(254, 243, 199, 0.65);
            cursor: pointer;
            box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.72), inset 0 -1.5px 2px rgba(66, 32, 6, 0.42), 0 4px 15px rgba(212, 175, 55, 0.35);
            transition: all 0.24s ease;
        }

        .btn-cat:hover {
            background-image: var(--iconi-subtle-sheen-hover), linear-gradient(180deg, #FEF08A 0%, #FACC15 50%, #CA8A04 100%);
            background-size: 100% 100%, 100% 100%, 100% 100%;
            border-color: #FFFFFF;
            transform: translateY(-2px);
            box-shadow: inset 0 2px 1.5px rgba(255, 255, 255, 0.9), inset 0 0 14px rgba(254, 249, 195, 0.48), 0 0 18px rgba(250, 204, 21, 0.65), 0 8px 25px rgba(212, 175, 55, 0.55);
        }

        /* --- ESCRITORIO: EN #catalogos SOLO SE MUESTRA ICONICLUB (LOS OTROS 3 YA ESTÁN EN EL BANNER 1) --- */
        @media (min-width: 769px) {
            #catalogos.catalogs-section {
                padding: 36px 0 42px !important;
            }
            #catalogos .catalog-header {
                display: none !important;
            }
            #catalogos .catalogs-grid {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
            }
            #catalogos .cat-item.cat-care,
            #catalogos .cat-item.cat-work,
            #catalogos .cat-item.cat-pro {
                display: none !important;
            }
            #catalogos .cat-item.cat-club {
                width: 100% !important;
                max-width: 100% !important;
                min-height: 310px !important;
                display: grid !important;
                grid-template-columns: calc(50% - 20px) 1fr !important;
                align-items: stretch !important;
                border-radius: 24px !important;
                border: 2px solid rgba(56, 189, 248, 0.52) !important;
                background: linear-gradient(165deg, rgba(14, 165, 233, 0.28) 0%, rgba(15, 36, 72, 0.90) 48%, rgba(10, 22, 46, 0.96) 100%) !important;
                box-shadow: 0 22px 52px rgba(0, 122, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
                overflow: hidden !important;
            }
            #catalogos .cat-item.cat-club .cat-img-box {
                width: 100% !important;
                height: 100% !important;
                min-height: 310px !important;
                max-height: 350px !important;
                border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
            }
            #catalogos .cat-item.cat-club .cat-info {
                padding: 36px 46px !important;
                text-align: left !important;
                align-items: flex-start !important;
                justify-content: center !important;
                gap: 12px !important;
            }
            #catalogos .cat-item.cat-club .cat-title {
                font-size: clamp(32px, 2.8vw, 40px) !important;
                letter-spacing: -0.6px !important;
                line-height: 1 !important;
            }
            #catalogos .cat-item.cat-club .cat-desc {
                font-size: 17px !important;
                letter-spacing: 2px !important;
                margin-bottom: 2px !important;
            }
            #catalogos .cat-item.cat-club .cat-services-preview {
                display: block !important;
                font-size: clamp(15.5px, 1.25vw, 18px) !important;
                line-height: 1.55 !important;
                color: #E2E8F0 !important;
                font-weight: 500 !important;
                margin: 0 0 12px 0 !important;
                max-width: 100% !important;
            }
            #catalogos .cat-item.cat-club .btn-cat {
                padding: 13px 34px !important;
                font-size: 13px !important;
                border-radius: 14px !important;
            }
        }

        /* --- FLAGS MARQUEE --- */
        .flags-marquee {
            background: #FFFFFF;
            padding: 18px 0;
            border-top: 1px solid #E2E8F0;
            border-bottom: 1px solid #E2E8F0;
            overflow: hidden;
            width: 100%;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
        }

        .f-m-container {
            display: flex;
            width: max-content;
        }

        .f-m-content {
            display: flex;
            align-items: center;
            white-space: nowrap;
            animation: marqueeScroll 65s linear infinite;
        }

        .f-m-content span {
            margin-right: 48px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 850;
            color: #0F172A;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .f-m-content span img.marquee-flag {
            width: 24px;
            height: 17px;
            object-fit: cover;
            border-radius: 3px;
            border: 1px solid #CBD5E1;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
            flex-shrink: 0;
            display: inline-block;
        }

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

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



        /* --- MODAL --- */
        .modal {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.58);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(12px) saturate(130%);
            -webkit-backdrop-filter: blur(12px) saturate(130%);
            padding: 20px;
            overflow: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .modal-content {
            background: #FFFFFF;
            border: 1px solid #CBD5E1;
            width: 100%;
            max-width: 1050px;
            border-radius: 24px;
            display: flex;
            box-shadow: 0 30px 90px rgba(15, 23, 42, 0.35);
            position: relative;
            max-height: 92dvh;
            overflow: hidden;
            overscroll-behavior: contain;
            color: #0F172A;
        }

        .modal-content.modal-user::before,
        .modal-content.modal-prov::before,
        .modal-content.modal-cat::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('fondo_facetado_light.svg?v=5');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            opacity: 0.24;
            filter: none;
            pointer-events: none;
            z-index: 0;
        }

        .modal-content.modal-cat::before {
            opacity: 0.22 !important;
            display: block !important;
        }

        .modal-content:not(.modal-user):not(.modal-prov):not(.modal-cat)::before {
            display: none !important;
        }

        .modal-content.modal-user,
        .modal-content.modal-prov {
            width: min(1260px, 96vw) !important;
            max-width: min(1260px, 96vw) !important;
            height: auto !important;
            min-height: min(84dvh, 610px) !important;
            max-height: 95dvh !important;
            overflow: hidden !important;
            color: #0F172A !important;
            align-items: stretch !important;
        }

        .modal-content.modal-user {
            background: #F4F7FB !important;
            border: 2.5px solid #0284C7 !important;
            box-shadow: 0 30px 85px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        }

        .modal-content.modal-prov {
            background: #F4F7FB !important;
            border: 2.5px solid #FC9400 !important;
            box-shadow: 0 30px 85px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        }

        /* Dirección Opcional en Paso 1, Nombres Separados en Paso 2 y Teléfono / Serial en Paso 3 */
        .step1-optional-address-box {
            grid-column: 1 / -1;
            width: 100%;
            background: rgba(255, 255, 255, 0.78);
            border: 1.5px solid #CBD5E1;
            border-radius: 12px;
            padding: 7px 12px 9px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
            box-sizing: border-box;
        }
        .step1-optional-address-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #0F172A;
        }
        .step1-optional-address-head span.opt-badge {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 9.8px;
            font-weight: 800;
            color: #0F172A;
            background: #F1F5F9;
            border: 1.5px solid #CBD5E1;
            border-radius: 10px;
            padding: 3px 10px;
            text-transform: none;
            letter-spacing: 0;
            line-height: 1.14;
            text-align: center;
            flex-shrink: 0;
        }
        .step1-optional-address-head span.opt-badge .opt-badge-line1 {
            display: block;
            font-size: 10px;
            font-weight: 900;
            color: #0F172A;
        }
        .step1-optional-address-head span.opt-badge .opt-badge-line2 {
            display: block;
            font-size: 9px;
            font-weight: 700;
            color: #475569;
        }
        .step1-optional-address-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px 10px;
        }
        .name-triple-grid {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            width: 100%;
        }
        .phone-split-row {
            display: grid;
            grid-template-columns: 104px minmax(0, 1fr);
            gap: 8px;
            align-items: stretch;
            width: 100%;
        }
        .phone-dial-box {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #F8FAFC !important;
            border: 2px solid #64748B !important;
            border-radius: 12px !important;
            padding: 0 10px !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            color: #0F172A !important;
            text-align: center;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
        }
        .serial-code-input {
            font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace !important;
            letter-spacing: 1.4px !important;
            text-transform: uppercase !important;
            font-weight: 800 !important;
            font-size: 13.5px !important;
        }
        @media (max-width: 768px) {
            .step1-optional-address-grid,
            .name-triple-grid {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            .phone-split-row {
                grid-template-columns: 92px minmax(0, 1fr);
            }
        }

        /* Fondo fotográfico ambiental a pantalla completa detrás del modal para cada catálogo */
        .modal.modal-cat-backdrop {
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .modal.modal-cat-backdrop.cat-backdrop-work {
            background-image:
                linear-gradient(180deg, rgba(4, 12, 28, 0.72) 0%, rgba(6, 15, 32, 0.34) 32%, rgba(6, 15, 32, 0.34) 68%, rgba(4, 12, 28, 0.78) 100%),
                radial-gradient(circle at 50% 50%, rgba(6, 15, 32, 0.45) 0%, rgba(6, 15, 32, 0.14) 85%),
                url('../recursos_website/imagenes_preregistro/work.png') !important;
        }

        .modal.modal-cat-backdrop.cat-backdrop-care {
            background-image:
                linear-gradient(180deg, rgba(4, 12, 28, 0.72) 0%, rgba(6, 15, 32, 0.34) 32%, rgba(6, 15, 32, 0.34) 68%, rgba(4, 12, 28, 0.78) 100%),
                radial-gradient(circle at 50% 50%, rgba(6, 15, 32, 0.45) 0%, rgba(6, 15, 32, 0.14) 85%),
                url('../recursos_website/imagenes_preregistro/care.png') !important;
        }

        .modal.modal-cat-backdrop.cat-backdrop-pro {
            background-image:
                linear-gradient(180deg, rgba(4, 12, 28, 0.72) 0%, rgba(6, 15, 32, 0.34) 32%, rgba(6, 15, 32, 0.34) 68%, rgba(4, 12, 28, 0.78) 100%),
                radial-gradient(circle at 50% 50%, rgba(6, 15, 32, 0.45) 0%, rgba(6, 15, 32, 0.14) 85%),
                url('../recursos_website/imagenes_preregistro/pro.png') !important;
        }

        .modal.modal-cat-backdrop.cat-backdrop-club {
            background-image:
                linear-gradient(180deg, rgba(4, 12, 28, 0.72) 0%, rgba(6, 15, 32, 0.34) 32%, rgba(6, 15, 32, 0.34) 68%, rgba(4, 12, 28, 0.78) 100%),
                radial-gradient(circle at 50% 50%, rgba(6, 15, 32, 0.45) 0%, rgba(6, 15, 32, 0.14) 85%),
                url('../recursos_website/imagenes_preregistro/iconiclub.png') !important;
        }

        /* Fondo fotográfico ambiental a pantalla completa detrás del modal para cada catálogo */
        .modal.modal-cat-backdrop {
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .modal.modal-cat-backdrop.cat-backdrop-work {
            background-image:
                linear-gradient(180deg, rgba(4, 12, 28, 0.72) 0%, rgba(6, 15, 32, 0.34) 32%, rgba(6, 15, 32, 0.34) 68%, rgba(4, 12, 28, 0.78) 100%),
                radial-gradient(circle at 50% 50%, rgba(6, 15, 32, 0.45) 0%, rgba(6, 15, 32, 0.14) 85%),
                url('../recursos_website/imagenes_preregistro/work.png') !important;
        }

        .modal.modal-cat-backdrop.cat-backdrop-care {
            background-image:
                linear-gradient(180deg, rgba(4, 12, 28, 0.72) 0%, rgba(6, 15, 32, 0.34) 32%, rgba(6, 15, 32, 0.34) 68%, rgba(4, 12, 28, 0.78) 100%),
                radial-gradient(circle at 50% 50%, rgba(6, 15, 32, 0.45) 0%, rgba(6, 15, 32, 0.14) 85%),
                url('../recursos_website/imagenes_preregistro/care.png') !important;
        }

        .modal.modal-cat-backdrop.cat-backdrop-pro {
            background-image:
                linear-gradient(180deg, rgba(4, 12, 28, 0.72) 0%, rgba(6, 15, 32, 0.34) 32%, rgba(6, 15, 32, 0.34) 68%, rgba(4, 12, 28, 0.78) 100%),
                radial-gradient(circle at 50% 50%, rgba(6, 15, 32, 0.45) 0%, rgba(6, 15, 32, 0.14) 85%),
                url('../recursos_website/imagenes_preregistro/pro.png') !important;
        }

        .modal.modal-cat-backdrop.cat-backdrop-club {
            background-image:
                linear-gradient(180deg, rgba(4, 12, 28, 0.72) 0%, rgba(6, 15, 32, 0.34) 32%, rgba(6, 15, 32, 0.34) 68%, rgba(4, 12, 28, 0.78) 100%),
                radial-gradient(circle at 50% 50%, rgba(6, 15, 32, 0.45) 0%, rgba(6, 15, 32, 0.14) 85%),
                url('../recursos_website/imagenes_preregistro/iconiclub.png') !important;
        }

        .modal-content.modal-cat {
            max-width: min(1260px, 95vw) !important;
            width: min(1260px, 95vw) !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: 95vh !important;
            display: flex !important;
            flex-direction: column !important;
            border-radius: 26px;
            background: #FFFFFF !important;
            border: 1px solid #E2E8F0 !important;
            box-shadow: 0 28px 75px rgba(4, 12, 28, 0.58) !important;
        }

        .modal-content.modal-cat .modal-body {
            padding: 16px 26px 16px;
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .modal-content.modal-cat .modal-header {
            margin-bottom: 8px;
            display: flex;
            flex-direction: column;
            align-items: center !important;
            justify-content: center;
            gap: 2px;
            flex-shrink: 0;
            text-align: center;
            position: relative;
        }

        .modal-content.modal-cat .modal-header-titles {
            align-items: center !important;
            text-align: center !important;
        }

        .modal-content.modal-cat .modal-header h2 {
            font-size: clamp(26px, 2.3vw, 32px) !important;
            line-height: 1.05 !important;
            margin-bottom: 0 !important;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            box-shadow: none !important;
        }

        .modal-content.modal-cat .modal-header p {
            color: #1E293B !important;
            font-weight: 700 !important;
            font-size: clamp(13.5px, 1.2vw, 15px) !important;
            line-height: 1.35 !important;
            text-align: center !important;
            max-width: none !important;
            margin: 3px 0 0 0 !important;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        .modal-content.modal-cat .close-modal {
            top: 16px !important;
            right: 20px !important;
            width: 36px !important;
            height: 36px !important;
            font-size: 20px !important;
            border-radius: 50% !important;
            background: #FFFFFF !important;
            color: #0F172A !important;
            border: 1px solid #E2E8F0 !important;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
        }

        .modal-content.modal-cat .close-modal:hover {
            background: #0F172A !important;
            color: #FFFFFF !important;
            border-color: #0F172A !important;
        }

        @media (max-width: 1024px) {
            .modal-content.modal-cat {
                height: auto !important;
                min-height: 0 !important;
                max-height: 92dvh !important;
                width: 96vw !important;
                max-width: 96vw !important;
                display: block !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                overscroll-behavior: contain !important;
                touch-action: pan-y !important;
            }
            .modal-content.modal-cat > .close-modal {
                position: sticky !important;
                top: 6px !important;
                right: 6px !important;
                float: right !important;
                margin-left: auto !important;
                margin-bottom: -36px !important;
                z-index: 380 !important;
                background: rgba(255, 255, 255, 0.96) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                border: 1.5px solid #94A3B8 !important;
                box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22) !important;
            }
            #catSubservicesOverlay .cat-sub-dialog > .cat-sub-close,
            .modal-content.modal-cat .cat-sub-dialog > .cat-sub-close {
                position: sticky !important;
                top: 0px !important;
                right: 0px !important;
                float: right !important;
                margin-left: auto !important;
                margin-bottom: -28px !important;
                z-index: 380 !important;
                background: rgba(255, 255, 255, 0.96) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                border: 1.5px solid #94A3B8 !important;
                box-shadow: 0 4px 12px rgba(15, 23, 42, 0.20) !important;
            }
            .modal-content.modal-cat .modal-body {
                padding: 16px 12px 24px !important;
                display: block !important;
                flex: none !important;
                height: auto !important;
                min-height: 0 !important;
                overflow: visible !important;
            }
            .modal-content.modal-cat #catalogContent,
            .modal-content.modal-cat .cat-modal-rich,
            .modal-content.modal-cat .cat-services-showcase {
                display: block !important;
                flex: none !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow: visible !important;
            }
            .modal-content.modal-cat .cat-hero-banner,
            .modal-content.modal-cat .cat-steps-strip {
                margin-bottom: 10px !important;
            }
            .modal-content.modal-cat .cat-services-showcase {
                padding: 12px 10px 14px !important;
                margin-bottom: 12px !important;
            }
            .modal-content.modal-cat .cat-services-grid {
                flex: none !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow: visible !important;
            }
            #catSubservicesOverlay,
            .modal-content.modal-cat .cat-sub-overlay {
                position: fixed !important;
                inset: 0 !important;
                z-index: 9999 !important;
                padding: 12px !important;
                overflow-y: auto !important;
                overscroll-behavior: contain !important;
            }
            #catSubservicesOverlay .cat-sub-dialog,
            .modal-content.modal-cat .cat-sub-dialog {
                max-height: 88dvh !important;
                min-height: 0 !important;
                height: auto !important;
                padding: 20px 14px !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                overscroll-behavior: contain !important;
            }
            #catSubservicesOverlay .cat-sub-grid,
            .modal-content.modal-cat .cat-sub-grid {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                overflow: visible !important;
            }
            #catSubservicesOverlay .cat-sub-btn,
            .modal-content.modal-cat .cat-sub-btn {
                height: 70px !important;
                min-height: 70px !important;
                max-height: 70px !important;
                padding: 10px 14px !important;
                flex-direction: column !important;
                justify-content: space-between !important;
                align-items: stretch !important;
                text-align: left !important;
                gap: 4px !important;
            }
            #catSubservicesOverlay .cat-sub-header img,
            .modal-content.modal-cat .cat-sub-header img {
                width: 52px !important;
                height: 52px !important;
            }
            #catSubservicesOverlay .cat-sub-header h4,
            .modal-content.modal-cat .cat-sub-header h4 {
                font-size: 19px !important;
            }
        }

        .modal-content.modal-cat-care {
            --cat-accent: #E11D48;
        }

        .modal-content.modal-cat-work {
            --cat-accent: #EA580C;
        }

        .modal-content.modal-cat-pro {
            --cat-accent: #059669;
        }

        .modal-content.modal-cat-club {
            --cat-accent: #0284C7;
        }

        /* Provider Profile Type Switcher & Interactive Service/Subservice Search */
        .prov-row-inline-switcher {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 16px !important;
            background: #FFFFFF;
            border: 2px solid #64748B;
            border-left: 5px solid #FC9400;
            border-radius: 12px;
            padding: 8px 16px;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
        }

        .prov-inline-question {
            font-size: 13px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #0F172A;
            white-space: nowrap;
            margin: 0 !important;
        }

        .prov-type-switcher {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 0;
            flex: 1;
            max-width: 470px;
        }

        .prov-type-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 9px 14px;
            border-radius: 9px;
            border: 1.5px solid #64748B;
            background: #F1F5F9;
            color: #0F172A;
            font-family: 'Outfit', sans-serif;
            font-size: 13.5px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .prov-type-btn:hover {
            border-color: #0F172A;
            color: #0F172A;
            background: #E2E8F0;
        }

        .prov-type-btn.active {
            background: #0F172A;
            border-color: #0F172A;
            color: #FFFFFF;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.24);
        }

        /* Renglón 3: Tipo de ID cortito a la izquierda + Casilla de números al frente */
        .prov-id-inline-row {
            display: grid !important;
            grid-template-columns: 240px 1fr !important;
            gap: 12px !important;
            align-items: end !important;
        }

        .prov-id-short-col,
        .prov-id-num-col {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .prov-readonly-tax-badge {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background: #E2E8F0;
            border: 2px solid #64748B;
            border-radius: 12px;
            padding: 11px 16px;
            color: #0F172A;
            font-size: 13.5px;
            font-weight: 800;
            letter-spacing: 0.3px;
            min-height: 44px;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
        }

        .service-search-wrap {
            position: relative;
            width: 100%;
        }

        .service-search-input-box {
            position: relative;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .service-search-input-box i.search-ico {
            position: absolute;
            left: 14px;
            color: #0F172A;
            font-size: 14px;
            pointer-events: none;
            z-index: 2;
        }

        .service-search-input-box .search-chevron-btn {
            position: absolute;
            right: 8px;
            background: #0F172A;
            border: 1px solid #0F172A;
            color: #FFFFFF;
            border-radius: 8px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            z-index: 2;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
        }

        .service-search-input-box .search-chevron-btn:hover {
            background: #1E293B;
        }

        .service-search-input-box input {
            padding-left: 38px !important;
            padding-right: 115px !important;
            background: #FFFFFF !important;
            color: #0F172A !important;
            border: 2px solid #64748B !important;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09) !important;
            font-size: 13.5px !important;
            font-weight: 700 !important;
            cursor: pointer;
        }

        .service-search-input-box input::placeholder {
            color: #475569 !important;
        }

        .service-search-dropdown {
            display: none;
            position: absolute;
            top: -135px;
            left: 0;
            right: 0;
            max-height: 445px;
            overflow-y: auto;
            background: #FFFFFF;
            border: 2px solid #0F172A;
            border-radius: 16px;
            box-shadow: 0 28px 75px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.35);
            z-index: 10005;
            padding: 12px 14px;
        }

        .service-search-dropdown.open {
            display: block;
        }

        .service-search-item-block {
            border-radius: 11px;
            margin-bottom: 7px;
            border: 1.5px solid #CBD5E1;
            background: #F8FAFC;
            overflow: hidden;
        }

        .service-search-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            cursor: pointer;
            color: #0F172A;
            font-size: 13.5px;
            font-weight: 800;
            transition: background 0.15s ease;
        }

        .service-search-item:hover,
        .service-search-item.selected {
            background: #F1F5F9;
            color: #0F172A;
        }

        .service-search-item img {
            width: 26px !important;
            height: 26px !important;
            min-width: 26px;
            max-width: 26px;
            max-height: 26px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .service-search-item .sub-hint-tag {
            margin-left: auto;
            font-size: 11.5px;
            font-weight: 700;
            color: #475569;
            background: #FFFFFF;
            border: 1px solid #CBD5E1;
            padding: 2px 8px;
            border-radius: 999px;
        }

        .dropdown-subservices-panel {
            padding: 12px 14px;
            background: #FFFFFF;
            border-top: 1.5px solid #CBD5E1;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 12px;
        }

        .subservices-ok-bar {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 6px;
            padding-top: 10px;
            border-top: 1.5px dashed #CBD5E1;
        }

        .subservices-ok-btn {
            background: linear-gradient(135deg, #FC9400 0%, #E68600 100%);
            color: #FFFFFF;
            border: none;
            border-radius: 9px;
            padding: 8px 20px;
            font-size: 13px;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s ease;
            margin-left: auto;
            box-shadow: 0 4px 14px rgba(252, 148, 0, 0.38);
        }

        .subservices-ok-btn:hover {
            background: linear-gradient(135deg, #E68600 0%, #CC7700 100%);
            color: #FFFFFF;
            transform: translateY(-1px);
        }

        .subservice-pill-btn {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 9px;
            font-size: 13.4px;
            font-weight: 700;
            cursor: pointer;
            border: 1.5px solid #CBD5E1;
            background: #F8FAFC;
            color: #334155;
            transition: all 0.15s ease;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
        }

        .subservice-pill-btn.active {
            background: #FFFDF7;
            border: 1.5px solid #FC9400;
            color: #0F172A;
            font-weight: 800;
            box-shadow: 0 2px 6px rgba(252, 148, 0, 0.22);
        }

        .subservice-pill-btn:hover {
            border-color: #64748B;
            background: #F1F5F9;
            color: #0F172A;
        }

        .subservice-check-box {
            width: 22px;
            height: 22px;
            min-width: 22px;
            border-radius: 6px;
            border: 2px solid #94A3B8;
            background: #FFFFFF;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.15s ease;
        }

        .subservice-pill-btn.active .subservice-check-box {
            background: #FC9400;
            border-color: #E68600;
            color: #FFFFFF;
            box-shadow: 0 2px 5px rgba(252, 148, 0, 0.35);
        }

        .selected-services-chips {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-top: 5px;
            max-height: 96px;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            padding-right: 4px;
        }

        .service-chip-card {
            background: #FFFFFF;
            border: 1.5px solid #CBD5E1;
            border-radius: 12px;
            padding: 9px 13px;
            display: flex;
            flex-direction: column;
            gap: 7px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
        }

        .service-chip-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding-bottom: 5px;
            border-bottom: 1px solid #E2E8F0;
        }

        .service-chip-top img {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px;
            max-width: 28px;
            max-height: 28px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .service-chip-title {
            color: #0F172A;
            font-size: 13.5px;
            font-weight: 800;
            flex: 1;
            min-width: 0;
        }

        .service-chip-subcount {
            font-size: 11.5px;
            font-weight: 700;
            color: #475569;
            background: #F1F5F9;
            border: 1px solid #CBD5E1;
            padding: 2px 9px;
            border-radius: 999px;
            white-space: nowrap;
        }

        .service-chip-ok-btn {
            background: linear-gradient(135deg, #FC9400 0%, #E68600 100%);
            color: #FFFFFF;
            border: none;
            border-radius: 7px;
            padding: 4px 12px;
            font-size: 11.5px;
            font-weight: 900;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(252, 148, 0, 0.32);
        }

        .service-chip-ok-btn:hover {
            background: #E68600;
        }

        .service-chip-remove {
            background: #F1F5F9;
            border: 1px solid #CBD5E1;
            color: #0F172A;
            border-radius: 7px;
            padding: 2px 9px;
            font-size: 13px;
            font-weight: 900;
            cursor: pointer;
            line-height: 1.2;
        }

        .service-chip-remove:hover {
            background: #EF4444;
            border-color: #EF4444;
            color: #FFFFFF;
        }

        .subservice-pills-wrap {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px 10px;
        }

        /* Renglón 5: Checkbox de Certificado Profesional a la derecha y Nota de Confianza compacta */
        .prov-cert-box {
            background: #FFFFFF;
            border: 2px solid #64748B;
            border-left: 5px solid #0F172A;
            border-radius: 12px;
            padding: 8px 14px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
        }

        .prov-cert-checkbox-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            cursor: pointer;
            margin: 0 !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            width: 100%;
        }

        .prov-cert-checkbox-label input[type="checkbox"] {
            width: 22px !important;
            height: 22px !important;
            padding: 0 !important;
            margin: 0 !important;
            accent-color: #FC9400;
            cursor: pointer;
            flex-shrink: 0;
        }

        .prov-cert-title {
            font-size: 13px;
            font-weight: 800;
            color: #0F172A;
            line-height: 1.22;
        }

        .prov-cert-reassurance {
            font-size: 12px;
            color: #1E293B;
            line-height: 1.32;
            margin: 0;
            padding-left: 0;
            font-weight: 700;
        }

        /* Paso 3: Banner Centrado y Neutro de Confirmación de Registro */
        .contact-privacy-box {
            background: #FFFFFF;
            border: 2px solid #64748B;
            border-bottom: 4px solid #0F172A;
            border-radius: 14px;
            padding: 8px 14px;
            margin-top: 2px;
            text-align: center;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
        }

        .contact-privacy-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            text-align: center;
        }

        .contact-privacy-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: #1E293B;
            color: #F8FAFC;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            padding: 3px 12px;
            border-radius: 999px;
            margin-bottom: 2px;
        }

        .contact-privacy-text strong {
            color: #0F172A;
            font-weight: 900;
        }

        .contact-privacy-text p {
            color: #334155;
            font-size: 12.5px;
            line-height: 1.38;
            margin: 0 auto;
            max-width: 100%;
            font-weight: 600;
        }

        /* Autocompletado de Otra Ciudad / Sector por país */
        .custom-city-autocomplete-wrap {
            position: relative;
            width: 100%;
        }

        .custom-city-suggestions {
            display: none;
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            max-height: 220px;
            overflow-y: auto;
            background: #FFFFFF;
            border: 1.5px solid #94A3B8;
            border-radius: 12px;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
            z-index: 9999;
            padding: 6px;
        }

        .custom-city-suggestions.open {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 5px;
        }

        .custom-city-suggestion-item {
            padding: 8px 12px;
            border-radius: 8px;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            color: #0F172A;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .custom-city-suggestion-item:hover {
            background: #F1F5F9;
            border-color: #0F172A;
        }

        .custom-city-reassurance {
            display: none;
            margin-top: 8px;
            background: #FFFFFF;
            border: 1.5px solid #CBD5E1;
            border-radius: 14px;
            padding: 13px 16px;
            color: #0F172A;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        }

        .modal-img {
            width: 35%;
            background-size: cover;
            background-position: center;
            border-radius: 20px 0 0 20px;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            align-self: stretch;
            min-height: 100%;
        }

        .modal-body {
            flex: 1;
            padding: 16px 28px 20px;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
        }

        #registerForm {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .close-modal {
            position: absolute;
            top: 18px;
            right: 20px;
            font-size: 26px;
            cursor: pointer;
            color: #0F172A;
            z-index: 10;
            transition: 0.3s;
            border: 2px solid #475569;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
            background: #FFFFFF;
        }
        
        .close-modal:hover {
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
            background: #0F172A;
            color: #FFFFFF;
            border-color: #0F172A;
            transform: scale(1.08);
        }

        .modal-header {
            margin-bottom: 8px;
            text-align: left;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }

        .modal-header h2 {
            font-size: 24px;
            font-weight: 900;
            text-transform: uppercase;
            margin: 0;
            color: #0F172A;
            letter-spacing: -0.5px;
            line-height: 1.12;
        }

        .modal-header p {
            font-size: 13px;
            color: #1E293B;
            max-width: 100%;
            margin: 0;
            line-height: 1.3;
            font-weight: 700;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 9px 14px;
            margin-bottom: 6px;
            overflow: visible;
            position: relative;
            align-content: start;
            flex: 1;
        }

        .full-row {
            grid-column: 1 / -1;
            width: 100%;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .form-group.step1-loc-group {
            position: static;
        }

        .form-group.step1-loc-group .custom-select {
            position: static;
        }

        .form-group label {
            font-size: 11.5px;
            font-weight: 800;
            text-transform: uppercase;
            color: #0F172A;
            letter-spacing: 0.7px;
            margin-left: 4px;
        }

        /* --- CUSTOM SELECT & INPUTS EN BLANCO CON BORDE CONTRASTADO SOBRE FONDO FACETADO CLARO --- */
        .custom-select {
            position: relative;
            width: 100%;
            user-select: none;
        }

        .form-group input {
            background: #FFFFFF !important;
            border: 2px solid #64748B !important;
            border-radius: 11px !important;
            padding: 9px 14px;
            font-size: 13.5px;
            font-weight: 600;
            color: #0F172A;
            outline: none;
            transition: all 0.2s ease;
            width: 100%;
            box-sizing: border-box;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
        }

        .form-group input::placeholder {
            color: #475569;
            font-weight: 500;
        }

        .form-group input:focus {
            border-color: #0F172A !important;
            background: #FFFFFF !important;
            box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.12) !important;
        }

        .select-selected {
            background: #FFFFFF !important;
            border: 2px solid #64748B !important;
            border-radius: 11px !important;
            padding: 9px 14px;
            font-size: 13.5px;
            font-weight: 700;
            color: #0F172A;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s ease;
            box-sizing: border-box;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
        }

        .select-selected:hover {
            border-color: #0F172A !important;
        }

        .select-selected.invalid, 
        .form-group input.invalid {
            border-color: #EF4444 !important;
            background: #FEF2F2 !important;
            color: #991B1B !important;
            animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
        }

        .error-msg {
            color: #DC2626;
            font-size: 11.5px;
            font-weight: 800;
            margin-left: 10px;
            margin-top: 4px;
            display: none;
            letter-spacing: 0.3px;
        }

        .form-group.has-error .error-msg {
            display: block;
        }

        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        .select-selected:after {
            content: "";
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top-color: #0F172A;
            margin-left: 10px;
            transition: 0.2s;
        }

        .select-selected.select-arrow-active:after {
            border-top-color: transparent;
            border-bottom-color: #0F172A;
            transform: translateY(-5px);
        }

        .select-items {
            position: absolute;
            background: #FFFFFF;
            border: 1.5px solid #94A3B8;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            z-index: 999;
            border-radius: 14px;
            box-shadow: 0 22px 55px rgba(15, 23, 42, 0.35);
            overflow-y: auto;
            max-height: 260px;
        }

        /* Grid sin scroll/slide para País y Ciudad en Paso 1 con margen compacto al selector */
        .select-items.grid-select-items {
            top: 62px;
            left: 0;
            right: 0;
            max-height: none;
            overflow: visible;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 6px;
            border-radius: 14px;
            border: 1.5px solid #94A3B8;
            background: #FFFFFF;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45);
        }

        .select-items div {
            padding: 10px 16px;
            font-size: 13.5px;
            font-weight: 700;
            color: #0F172A;
            cursor: pointer;
            transition: 0.15s;
            border-bottom: 1px solid #F1F5F9;
        }

        .select-items.grid-select-items div {
            padding: 9px 10px;
            font-size: 12.5px;
            font-weight: 700;
            color: #0F172A;
            border: 1px solid #CBD5E1;
            border-radius: 9px;
            background: #F8FAFC;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .select-items div:last-child {
            border-bottom: none;
        }

        .select-items div:hover {
            background: #F1F5F9;
            color: #0F172A;
            padding-left: 20px;
        }

        .select-items.grid-select-items div:hover {
            background: #E2E8F0;
            border-color: #0F172A;
            color: #0F172A;
            padding-left: 10px;
        }

        .select-hide {
            display: none !important;
        }

        .select-arrow-active+.select-items {
            display: block;
        }

        .select-arrow-active+.select-items.grid-select-items {
            display: grid;
        }

        .form-group select {
            display: none !important;
        }

        .btn-submit,
        .modal-content.modal-user .btn-submit {
            width: 100%;
            padding: 15px 24px;
            border-radius: 14px;
            border: 1.5px solid #0369A1 !important;
            color: #FFFFFF !important;
            font-size: 14px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 8px 22px rgba(2, 132, 199, 0.32) !important;
            margin-top: 8px;
            box-sizing: border-box;
            background-color: #0284C7 !important;
            background-image: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
            background-size: 100% 100% !important;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
        }

        .modal-content.modal-prov .btn-submit {
            border: 1.5px solid #E68600 !important;
            color: #FFFFFF !important;
            background-color: #FC9400 !important;
            background-image: linear-gradient(135deg, #FC9400 0%, #E68600 100%) !important;
            box-shadow: 0 8px 22px rgba(252, 148, 0, 0.35) !important;
        }

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

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

        .btn-submit:hover,
        .modal-content.modal-user .btn-submit:hover {
            background-image: linear-gradient(135deg, #0369A1 0%, #075985 100%) !important;
            background-size: 100% 100% !important;
            border-color: #0284C7 !important;
            color: #FFFFFF !important;
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(2, 132, 199, 0.42) !important;
        }

        .modal-content.modal-prov .btn-submit:hover {
            background-image: linear-gradient(135deg, #E68600 0%, #C2410C 100%) !important;
            border-color: #FC9400 !important;
            color: #FFFFFF !important;
            box-shadow: 0 12px 28px rgba(252, 148, 0, 0.45) !important;
        }

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

        .form-hint {
            font-size: 11.5px;
            color: #0F172A;
            background: rgba(255, 255, 255, 0.88);
            border: 1.5px solid #94A3B8;
            border-radius: 10px;
            text-align: center;
            margin-top: 6px;
            margin-bottom: 2px;
            line-height: 1.35;
            font-weight: 700;
            padding: 6px 12px;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
        }

        /* --- MODAL OVERLAY & SUCCESS MODAL (VENTANA EMERGENTE "YA HACES PARTE DEL ECOSISTEMA") --- */
        .modal-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100005;
            background: rgba(5, 9, 18, 0.84);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 16px;
        }

        #successModal {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100010;
        }

        .success-content {
            max-width: 580px;
            width: 94%;
            max-height: 92dvh;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            text-align: center;
            border-radius: 22px;
            padding: 24px 28px 20px;
            background: #FFFFFF !important;
            border: 1.5px solid #CBD5E1 !important;
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
            position: relative;
            animation: modalFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            color: #0F172A;
        }

        .close-success {
            position: absolute;
            top: 14px;
            right: 16px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #F8FAFC;
            border: 1px solid #CBD5E1;
            color: #0F172A;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .close-success:hover {
            background: #0F172A;
            color: #FFFFFF;
            border-color: #0F172A;
        }

        .brand-logo-container { margin-bottom: 4px; }
        .logo-app, .logo-pro {
            font-size: 30px; font-weight: 900; color: #0F172A; letter-spacing: -1px;
            display: inline-flex; align-items: baseline; gap: 0; text-transform: uppercase;
        }
        .logo-app .brand-thin { color: #0284C7; font-weight: 900; }
        .logo-pro span {
            color: #EA580C !important;
            background: none !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: #EA580C !important;
            font-weight: 900;
        }

        .success-content h2 {
            font-size: 21px; font-weight: 900; color: #0F172A; letter-spacing: -0.3px;
            margin-bottom: 4px; text-transform: uppercase; line-height: 1.2;
        }

        .suc-p { font-size: 13.5px; color: #475569; margin-bottom: 8px; font-weight: 700; line-height: 1.3; }

        .suc-main-message {
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 10px;
            padding: 10px 12px;
            color: #334155;
            font-size: 13px;
            line-height: 1.45;
            font-weight: 600;
            text-align: center;
            margin-bottom: 12px;
        }

        .suc-main-message strong {
            color: #0F172A;
            font-weight: 800;
        }

        .suc-steps-title {
            font-size: 11px; font-weight: 900; color: #475569; text-transform: uppercase;
            letter-spacing: 0.9px; margin-bottom: 6px; text-align: left;
        }

        .suc-steps { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }

        .suc-step {
            background: #F8FAFC; padding: 8px 10px; border-radius: 10px;
            border: 1px solid #E2E8F0;
            display: flex; align-items: flex-start; gap: 10px;
            text-align: left;
        }

        .step-num {
            width: 22px; height: 22px; background: #0F172A; color: #FFFFFF; border-radius: 6px;
            border: 1px solid #0F172A;
            display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 11px; flex-shrink: 0;
            margin-top: 1px;
        }

        .suc-step p { font-size: 12.4px; font-weight: 600; color: #1E293B; line-height: 1.35; margin: 0; }

        .suc-referral-header { font-size: 11px; font-weight: 900; color: #64748B; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.6px; }

        .suc-referral {
            background: #F8FAFC; padding: 10px 12px; border-radius: 12px;
            border: 1px solid #CBD5E1; margin-bottom: 12px; text-align: center;
            transition: 0.25s; cursor: pointer; text-decoration: none; display: block;
        }

        .suc-referral:hover { background: #F1F5F9; border-color: #94A3B8; }
        .suc-referral:hover h4 { text-decoration: underline; }

        .suc-referral h4 { color: #0F172A; font-weight: 900; font-size: 13px; margin-bottom: 2px; text-transform: uppercase; }
        .suc-referral p { font-size: 11.8px; color: #475569; font-weight: 600; line-height: 1.35; margin: 0; }

        .btn-success {
            background: #0F172A; color: #FFFFFF; padding: 12px 18px; border-radius: 11px;
            font-weight: 900; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase;
            border: 1px solid #0F172A; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
            transition: 0.25s ease; width: 100%;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-success:hover { transform: translateY(-1px); background: #1E293B; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22); }

        @media (max-width: 640px) {
            .success-content { padding: 20px 18px 16px; border-radius: 18px; max-height: 94dvh; overflow-y: auto; }
            .suc-steps { grid-template-columns: 1fr; gap: 6px; }
            .success-content h2 { font-size: 19px; }
            .suc-p { font-size: 13px; }
        }

        /* Sober Light Override for Success */
        body.dark-mode .success-content {
            background: #FFFFFF !important;
            border-color: #CBD5E1 !important;
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
            color: #0F172A;
        }

        body.dark-mode .close-success {
            background: #F8FAFC;
            color: #0F172A;
        }

        body.dark-mode .success-content h2 {
            color: #0F172A;
        }

        body.dark-mode .suc-p {
            color: #475569;
        }

        body.dark-mode .suc-step p {
            color: #1E293B;
        }

        body.dark-mode .suc-referral h4 {
            color: #0F172A;
        }

        body.dark-mode .suc-referral p {
            color: #475569;
        }

        body.dark-mode .btn-success {
            background: #0F172A;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
            color: #FFFFFF;
        }

        @media (max-width: 992px) {
            .modal-img {
                display: none;
            }

            .modal-content {
                max-width: 600px;
            }

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

            .profiles-grid {
                grid-template-columns: 1fr 1fr;
                gap: 24px;
            }

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

        /* Status Badges & Subservices Styling */
        .status-badge {
            font-size: 8px;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-block;
            line-height: 1;
        }

        .status-badge.status-active {
            background: rgba(16, 185, 129, 0.15);
            color: #10B981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .status-badge.status-pronto {
            background: rgba(255, 255, 255, 0.08);
            color: #CBD5E1;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .service-item-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            padding: 8px 10px;
            border: 1px solid rgba(255, 255, 255, 0.04);
            width: 100%;
        }

        .service-item-container.active-item {
            border-left: 2px solid var(--brand-blue);
            background: rgba(0, 116, 228, 0.03);
        }

        .service-item-container.pronto-item {
            opacity: 0.55;
        }

        .service-main-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
        }

        .service-name {
            font-size: 10px;
            font-weight: 800;
            color: white;
            letter-spacing: 0.2px;
        }

        .subservices-list {
            list-style: none;
            padding-left: 10px;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .subservices-list li {
            font-size: 8.5px !important;
            font-weight: 500 !important;
            color: #CBD5E1 !important;
            position: relative;
            padding-left: 8px;
            text-transform: none !important;
            letter-spacing: 0px !important;
        }

        .subservices-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: rgba(255,255,255,0.3);
            font-size: 8px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }


            /* --- HERO MOBILE LUXURY V45 --- */
            .hero-carousel {
                height: 100svh !important;
                min-height: 550px !important;
            }



            /* --- MOBILE COMPACT TOPBAR --- */
            nav {
                position: fixed !important;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 3850 !important;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 6px 10px !important;
                box-sizing: border-box !important;
            }

            .nav-content {
                display: grid !important;
                grid-template-columns: auto 1fr auto !important;
                align-items: center !important;
                justify-content: space-between !important;
                background: rgba(11, 15, 25, 0.94) !important;
                backdrop-filter: blur(25px) !important;
                -webkit-backdrop-filter: blur(25px) !important;
                border: 1px solid rgba(255, 255, 255, 0.16) !important;
                border-radius: 20px !important;
                padding: 7px 12px !important;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
                gap: 8px !important;
                margin: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .nav-brand-group {
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
            }

            .corp-brand-header-mobile {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                justify-content: center !important;
                line-height: 1 !important;
                text-decoration: none !important;
            }

            .mobile-center-group {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
            }

            .topbar-timer {
                display: flex !important;
                padding: 1px 4px !important;
                gap: 5px !important;
                margin: 0 !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .topbar-timer .t-mini-item {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                min-width: 20px !important;
            }

            .topbar-timer .t-mini-item span:first-child {
                font-size: 16px !important;
                font-weight: 900 !important;
                line-height: 1 !important;
                color: #FFFFFF !important;
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
            }

            .topbar-timer .t-mini-item span:last-child {
                font-size: 7.5px !important;
                text-transform: uppercase !important;
                color: #94A3B8 !important;
                font-weight: 700 !important;
                letter-spacing: 0.5px !important;
            }

            .launch-label {
                margin-top: 2px !important;
                margin-bottom: 0 !important;
                font-size: clamp(7px, 2.05vw, 8.8px) !important;
                font-weight: 800 !important;
                color: #FACC15 !important;
                text-shadow: 0 0 10px rgba(250, 204, 21, 0.4) !important;
                text-transform: uppercase !important;
                letter-spacing: 0.3px !important;
                line-height: 1 !important;
                text-align: center !important;
                white-space: nowrap !important;
            }

            .desktop-sidebar-controls {
                display: none !important;
            }

            .settings-btns {
                display: flex !important;
                align-items: center !important;
                justify-content: flex-end !important;
            }

            .icon-btn {
                width: 32px !important;
                height: 32px !important;
                border-radius: 50% !important;
                background: rgba(255, 255, 255, 0.1) !important;
                border: 1px solid rgba(255, 255, 255, 0.2) !important;
                color: #FFFFFF !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                font-size: 13px !important;
                cursor: pointer !important;
                transition: all 0.2s !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
            }

            .icon-btn:hover {
                background: rgba(255, 255, 255, 0.2) !important;
                border-color: #38BDF8 !important;
                color: #38BDF8 !important;
            }

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

            /* --- BANNER 1 MOBILE OVERRIDES (STRICTLY 2 RENGLONES & SAFE SCREEN MARGINS) --- */
            .banner1-space {
                display: none !important;
            }

            /* Fix Mobile Layout for Family Banner */
            #carouselInner > .slide.slide-family-banner {
                background-size: 100% auto !important;
                background-position: center top !important;
            }
            #carouselInner > .slide.slide-family-banner .fintech-title-v3 {
                position: absolute !important;
                top: 55% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                align-items: center !important;
                text-align: center !important;
                width: 100% !important;
            }

            #carouselInner > .slide.slide-family-banner .banner1-unlock-box,
            .slide.slide-family-banner .banner1-unlock-box,
            #carouselInner > .slide.slide-family-banner .fintech-unlock-box,
            .slide.slide-family-banner .fintech-unlock-box {
                position: absolute !important;
                bottom: 125px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                width: calc(100% - 24px) !important;
                max-width: 430px !important;
                margin: 0 !important;
                padding: 12px 14px !important;
                box-sizing: border-box !important;
                background: rgba(0, 0, 0, 0.55) !important;
                backdrop-filter: blur(12px) !important;
                -webkit-backdrop-filter: blur(12px) !important;
                border-radius: 14px !important;
                border: 1px solid rgba(255, 255, 255, 0.2) !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
            }

            #carouselInner > .slide.slide-family-banner .global-pre-btn {
                position: absolute !important;
                bottom: 52px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
            }

            #carouselInner > .slide.slide-family-banner .banner1-tagline-text,
            .slide.slide-family-banner .banner1-tagline-text,
            #carouselInner > .slide.slide-family-banner .fintech-unlock-box div,
            .slide.slide-family-banner .fintech-unlock-box div {
                font-size: clamp(12.5px, 3.7vw, 14.5px) !important;
                font-weight: 600 !important;
                line-height: 1.45 !important;
                text-align: center !important;
                white-space: normal !important;
                color: #FFFFFF !important;
                margin: 0 auto !important;
                width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 3px !important;
            }

            .banner1-line {
                display: block !important;
                white-space: nowrap !important;
                text-align: center !important;
                width: 100% !important;
            }

            .fintech-content-v3 {
                padding: 125px 15px 40px !important;
                justify-content: space-between !important;
                display: flex !important;
                flex-direction: column !important;
                height: 100% !important;
            }

            .fintech-title-v3 {
                margin-top: 0 !important;
                font-size: 32px !important;
                line-height: 1.1 !important;
                margin-bottom: 4px !important;
            }

            .fintech-section-label {
                font-size: 32px !important;
                margin-top: 0 !important;
                margin-bottom: 10px !important;
            }

            .fintech-title-v3 .w-900,
            .fintech-title-v3 .w-500 {
                font-size: 50px !important;
            }

            .fintech-title-v3 .highlight-text {
                font-size: 28px !important;
                letter-spacing: 2px;
            }

            .fintech-bottom-group {
                gap: 5px !important;
                padding-bottom: 0px !important;
                margin-top: auto !important;
            }

            .fintech-grid-plans {
                gap: 8px !important;
                margin-top: 10px !important;
                margin-bottom: 15px !important;
                flex-wrap: nowrap !important;
                overflow-x: auto;
                padding-bottom: 10px;
            }

            .fintech-plan-card {
                min-width: 140px !important;
                padding: 10px !important;
            }

            .plan-col .w-900 {
                font-size: 20px !important;
            }

            .fintech-details-v3 {
                font-size: 13px !important;
                line-height: 1.3 !important;
                max-width: 90%;
            }

            .hero-timer {
                gap: 8px !important;
            }

            .ht-item {
                width: 55px !important;
                height: 55px !important;
                min-width: 55px !important;
            }

            .ht-item span:first-child {
                font-size: 24px !important;
            }

            .ht-item span:last-child {
                font-size: 8px !important;
            }

            /* Profiles & Scroll - Section 2 */
            html {
                scroll-padding-top: 64px;
            }

            .profiles-section {
                padding: 25px 0 15px;
            }

            .profiles-grid {
                display: flex;
                flex-direction: column;
                gap: 22px;
            }

            .p-card {
                flex-direction: column;
                align-items: stretch;
                height: auto;
                min-height: auto;
                border-radius: 20px;
                overflow: hidden;
            }

            .p-img {
                width: 100%;
                height: 310px;
                object-fit: cover;
                display: block;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .p-card.user .p-img {
                object-position: center 15% !important;
            }

            .p-card.prov .p-img {
                object-position: center 15% !important;
            }

            .p-content {
                padding: 24px 18px;
                text-align: left;
                align-items: flex-start;
                justify-content: flex-start;
            }

            .p-tag {
                margin-bottom: 6px;
                font-size: 11px;
                letter-spacing: 1.5px;
            }

            .p-content h3 {
                font-size: 26px;
                margin-bottom: 8px;
            }

            .p-content p {
                font-size: 13px;
                margin-bottom: 14px;
                line-height: 1.5;
                display: block;
            }

            .btn-p {
                align-self: stretch;
                width: 100%;
                padding: 14px 20px;
                font-size: 13px;
                font-weight: 900;
                text-align: center;
                border-radius: 12px;
            }

            /* App Banner & Catalogs - Section 3 (Compactado en móvil por directiva CEO) */
            .app-banner {
                padding: 14px 12px !important;
                margin-top: 10px !important;
                margin-bottom: 4px !important;
                background: rgba(255, 255, 255, 0.03);
            }

            .app-mini-btn {
                padding: 10px 18px;
                border-radius: 12px;
            }

            .app-mini-btn i {
                font-size: 24px;
            }

            .app-mini-btn div span {
                font-size: 9px;
            }

            .app-mini-btn div strong {
                font-size: 13px;
            }

            .app-banner h2 {
                font-size: 18px !important;
                margin-bottom: 4px;
                color: #FFFFFF !important;
                font-weight: 900;
                line-height: 1.3;
            }

            .app-launch-date {
                font-size: 12px !important;
                font-weight: 800;
                letter-spacing: 1.5px;
                color: var(--oro-sagrado) !important;
            }

            .app-banner-btns-mobile {
                display: flex !important;
                gap: 12px;
                justify-content: center;
                margin-top: 15px;
            }

            .catalog-header {
                margin-bottom: 25px;
                text-align: center;
                padding: 0 15px;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .cat-pre-title {
                font-size: 9px;
                letter-spacing: 3px;
                margin-bottom: 8px;
            }

            .catalog-header h3 {
                font-size: 24px;
                letter-spacing: -1px;
                margin-bottom: 12px;
            }

            .cat-divider {
                margin: 12px auto;
                width: 40px;
            }

            .catalog-header p {
                font-size: 12px;
                line-height: 1.45;
                letter-spacing: 0;
                width: 100%;
            }

            .cat-sub-stats {
                font-size: 10px;
                letter-spacing: 1px;
            }

            .catalogs-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .cat-item {
                height: auto !important;
                min-height: 0 !important;
                border-radius: 16px;
            }

            .cat-img-box {
                height: 155px;
            }

            .cat-info {
                padding: 12px 10px 14px;
                height: auto !important;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 5px;
            }

            .cat-title {
                font-size: 15px;
                margin-bottom: 0;
                font-weight: 900;
            }

            .cat-desc {
                font-size: 10px;
                line-height: 1.25;
                margin-bottom: 4px;
                color: #CBD5E1;
            }

            .btn-cat {
                padding: 7px 16px;
                font-size: 10px;
                font-weight: 800;
                border-radius: 16px;
            }

            .f-m-content span {
                margin-right: 30px;
                font-size: 11px;
            }

            /* Footer mobile rules unified in main #footer block */

            /* Modal Mobile */
            .modal {
                padding: 10px;
            }

            .modal-content {
                flex-direction: column;
                border-radius: 25px;
                max-height: 92vh;
                overflow-y: auto;
            }

            .modal-img {
                display: none;
            }

            .modal-body {
                padding: 30px 20px;
                flex: none;
                width: 100%;
            }

            .modal-header h2 {
                font-size: 20px;
            }

            .modal-header p {
                font-size: 11px;
            }

            .form-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .full-row {
                grid-column: span 1;
            }

            .form-group input,
            .select-selected {
                padding: 12px 20px;
                font-size: 12px;
            }

            .close-modal {
                top: 15px;
                right: 20px;
                font-size: 28px;
            }

            .btn-submit {
                padding: 15px;
                font-size: 12px;
            }

            /* Mobile Map Optimization */
            .map-wrapper {
                width: 100% !important;
                height: 100% !important;
                right: 0 !important;
                opacity: 0.4 !important;
            }

            .map-bg-globe {
                object-fit: cover !important;
            }

            .svg-connections {
                opacity: 0.3 !important;
            }

            .city-text {
                font-size: 8px !important;
            }
        }

        /* --- BACK TO TOP BUTTON (GLOBAL) --- */
        .back-to-top {
            position: fixed;
            bottom: 25px;
            right: 20px;
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
            border: 2px solid #38BDF8 !important;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF !important;
            font-size: 18px;
            z-index: 900;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
            cursor: pointer;
        }

        .back-to-top.visible {
            opacity: 1;
            pointer-events: auto;
        }

        body:has(.modal[style*="flex"]) .back-to-top,
        body:has(.modal-overlay[style*="flex"]) .back-to-top {
            opacity: 0 !important;
            pointer-events: none !important;
            display: none !important;
        }

        .back-to-top:hover {
            box-shadow: 0 8px 24px rgba(56, 189, 248, 0.75) !important;
            background: linear-gradient(135deg, #0369A1 0%, #0284C7 100%) !important;
            color: #FFFFFF !important;
            transform: scale(1.08);
        }

        body.dark-mode .back-to-top {
            background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
            border-color: #38BDF8 !important;
            color: #FFFFFF !important;
        }
        
        body.dark-mode .back-to-top:hover {
            background: linear-gradient(135deg, #0369A1 0%, #0284C7 100%) !important;
            color: #FFFFFF !important;
        }

        /* --- GLOBAL SECURITY SECTION --- */
        .security-section {
            padding: 80px 0;
            background: transparent !important;
            color: #0F172A;
            text-align: center;
        }

        .sec-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 100%;
            margin: 28px auto 0;
        }

        .sec-card {
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
            padding: 18px 20px;
            border-radius: 20px;
            border: 1.5px solid #CBD5E1;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
            transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
            cursor: pointer;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: left;
            overflow: hidden;
        }

        .sec-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 75%;
            height: 100%;
            background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.78) 50%, transparent 80%);
            transition: left 0.65s ease;
            pointer-events: none;
        }

        .sec-card:hover::before {
            left: 140%;
        }

        .sec-card:hover {
            transform: translateY(-6px) scale(1.028);
            border-color: #0F172A;
            background: #FFFFFF !important;
            box-shadow: 0 24px 52px rgba(15, 23, 42, 0.22);
        }

        .sec-card-top {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 12px;
        }

        .sec-card-visual {
            width: 66px;
            height: 66px;
            border-radius: 16px;
            background: linear-gradient(145deg, #0F172A 0%, #1E293B 55%, #334155 100%);
            border: 1.5px solid #94A3B8;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 18px rgba(15, 23, 42, 0.18);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .sec-card:hover .sec-card-visual {
            transform: scale(1.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 24px rgba(15, 23, 42, 0.28);
        }

        .sec-card h4 {
            font-size: 16.5px;
            font-weight: 950;
            margin: 0 0 4px;
            text-transform: uppercase;
            color: #0F172A;
            letter-spacing: -0.2px;
            line-height: 1.2;
        }

        .sec-card p {
            font-size: 12.8px;
            color: #475569;
            line-height: 1.45;
            margin: 0;
            font-weight: 600;
        }

        .sec-card-action {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 11px;
            font-weight: 900;
            color: #0F172A;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            margin-top: 10px;
            padding: 9px 14px;
            border-radius: 10px;
            background-color: #F1F5F9;
            background-image: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%);
            background-size: 100% 100%, 100% 100%;
            border: 1px solid #CBD5E1;
            box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.9), inset 0 -1.5px 1.5px rgba(15, 23, 42, 0.12), 0 3px 10px rgba(15, 23, 42, 0.08);
            transition: all 0.22s ease;
        }

        .sec-card:hover .sec-card-action {
            background-color: #0F172A;
            background-image: var(--iconi-subtle-sheen-hover), linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
            background-size: 100% 100%, 100% 100%, 100% 100%;
            color: #FFFFFF;
            border-color: #38BDF8;
            box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.45), inset 0 0 12px rgba(56, 189, 248, 0.25), 0 0 14px rgba(56, 189, 248, 0.35), 0 6px 16px rgba(15, 23, 42, 0.22);
        }

        .sec-card-action i {
            font-size: 11.5px;
            margin-bottom: 0;
            color: #0F172A;
            transition: transform 0.22s ease, color 0.22s ease;
        }

        .sec-card:hover .sec-card-action i {
            transform: translateX(4px);
            color: #38BDF8;
        }

        /* Animaciones en Escala de Grises (Huella con Sombra Brillante, Radar SOS, Bóveda Escrow) */
        @keyframes secFingerprintBeam {
            0% { top: -18%; opacity: 0.25; }
            50% { top: 92%; opacity: 1; }
            100% { top: -18%; opacity: 0.25; }
        }

        @keyframes secRidgePulse {
            0%, 100% { filter: drop-shadow(0 0 3px rgba(248, 250, 252, 0.35)); opacity: 0.86; }
            50% { filter: drop-shadow(0 0 11px rgba(255, 255, 255, 0.95)); opacity: 1; }
        }

        @keyframes secSonarRing {
            0% { transform: scale(0.65); opacity: 0.85; }
            100% { transform: scale(1.65); opacity: 0; }
        }

        @keyframes secVaultSpin {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(180deg); }
            100% { transform: rotate(360deg); }
        }

        .sec-fp-beam {
            position: absolute;
            left: 6%;
            right: 6%;
            height: 16px;
            background: linear-gradient(180deg, transparent 0%, rgba(226, 232, 240, 0.45) 45%, rgba(255, 255, 255, 0.98) 50%, rgba(226, 232, 240, 0.45) 55%, transparent 100%);
            box-shadow: 0 0 16px rgba(255, 255, 255, 0.92), 0 0 28px rgba(203, 213, 225, 0.75);
            border-radius: 999px;
            animation: secFingerprintBeam 2.6s ease-in-out infinite;
            pointer-events: none;
            z-index: 3;
        }

        .sec-fp-svg {
            animation: secRidgePulse 2.6s ease-in-out infinite;
            position: relative;
            z-index: 2;
        }

        .sec-sonar-wave {
            position: absolute;
            inset: 8px;
            border-radius: 50%;
            border: 1.5px solid rgba(241, 245, 249, 0.75);
            animation: secSonarRing 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
            pointer-events: none;
        }

        .sec-sonar-wave.delay-2 {
            animation-delay: 1.1s;
        }

        .sec-vault-wheel {
            animation: secVaultSpin 11s linear infinite;
            transform-origin: center;
        }

        /* Layout Horizontal Panorámico de las 3 Ventanas Independientes en Navegador y Vertical en Móvil */
        .sec-ind-layout {
            display: grid;
            grid-template-columns: 295px 1fr;
            gap: 18px;
            align-items: stretch;
        }

        .sec-ind-visual-panel {
            background: linear-gradient(160deg, #0F172A 0%, #1E293B 58%, #334155 100%);
            border: 1.5px solid #64748B;
            border-radius: 18px;
            padding: 18px 16px;
            color: #F8FAFC;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 14px 30px rgba(15, 23, 42, 0.16);
        }

        .sec-ind-steps-col {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 12px;
        }

        .sec-ind-steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 11px;
        }

        .sec-ind-step-card {
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
            border: 1.5px solid #CBD5E1;
            border-radius: 16px;
            padding: 14px 12px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
            cursor: pointer;
            position: relative;
        }

        .sec-ind-step-card:hover {
            transform: translateY(-5px) scale(1.035);
            border-color: #0F172A;
            background: #FFFFFF;
            box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
            z-index: 2;
        }

        .sec-ind-sim-btn {
            margin-top: 10px;
            width: 100%;
            background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%);
            color: #0F172A;
            border: 1px solid #FFFFFF;
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            transition: transform 0.18s ease, background 0.18s ease;
        }

        .sec-ind-sim-btn:hover {
            transform: scale(1.03);
            background: #FFFFFF;
        }

        /* Sober Modals Single Scroll Container (Mobile & Desktop) */
        #investorModal .modal-content,
        #securityModal .modal-content,
        #corporateInfoModal .modal-content,
        #termsModal .modal-content {
            display: block !important;
            background: #FFFFFF !important;
            color: #0F172A !important;
            border: 1.5px solid #CBD5E1 !important;
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;
            max-height: 90dvh !important;
            height: auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            overscroll-behavior: contain !important;
            touch-action: pan-y !important;
        }

        #investorModal .modal-body,
        #securityModal .modal-body,
        #corporateInfoModal .modal-body,
        #termsModal .modal-body {
            display: block !important;
            flex: none !important;
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;
        }

        @media (max-width: 860px) {
            .sec-grid {
                grid-template-columns: 1fr;
                gap: 12px;
                margin-top: 20px;
            }

            .sec-card {
                padding: 15px 16px;
                border-radius: 16px;
            }

            .sec-card-top {
                margin-bottom: 0;
            }

            .sec-card-visual {
                width: 56px;
                height: 56px;
            }

            .sec-card h4 {
                font-size: 15px;
                margin-bottom: 3px;
            }

            .sec-card p {
                font-size: 12px;
                line-height: 1.35;
                margin-bottom: 0;
            }

            .sec-card-action {
                margin-top: 8px;
                padding-top: 8px;
                font-size: 10.5px;
            }

            .sec-ind-layout {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .sec-ind-steps-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }

        /* --- BOTÓN PRE-REGÍSTRATE EN ESTA CIUDAD (GLASSMORPHISM PILL) --- */
        .btn-radar-register {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
            border: 1.5px solid var(--oro-sagrado);
            color: #FFFFFF !important;
            padding: 9px 20px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.25);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-left: auto;
        }

        .btn-radar-register:hover {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(212, 175, 55, 0.2) 100%);
            box-shadow: 0 12px 30px rgba(212, 175, 55, 0.45);
            transform: translateY(-2px);
            color: #FFFFFF !important;
        }

        /* --- DESKTOP REVEAL ANIMATIONS --- */
        @media (min-width: 1024px) {
            .reveal {
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .reveal.active {
                opacity: 1;
                transform: translateY(0);
            }

            .profiles-grid, .catalogs-grid, .sec-grid {
                perspective: 1000px;
            }

            .p-card, .cat-item, .sec-card {
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .p-card:hover, .cat-item:hover, .sec-card:hover {
                transform: translateY(-15px) rotateX(2deg) scale(1.02);
                box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
            }
        }
        /* --- DESKTOP OPTIMIZATIONS (1440px+) --- */
        @media (min-width: 1440px) {
            .container {
                max-width: 1600px;
                padding: 0 80px;
            }

            .slide h1 {
                font-size: 88px;
            }

            .slide p {
                font-size: 26px;
                max-width: 950px;
            }

            .fintech-title-v3 .w-900, 
            .fintech-title-v3 .w-500 {
                font-size: 72px !important;
            }

            .fintech-title-v3 .highlight-text {
                font-size: 42px !important;
            }

            .profiles-section {
                padding: 45px 0 20px !important;
            }

            .p-content h3 {
                font-size: 40px;
            }

            .p-content p {
                font-size: 18px;
            }

            .catalogs-section {
                padding: 26px 0 25px !important;
            }

            .catalog-header h3 {
                font-size: 64px;
            }

            .security-section {
                padding: 45px 0 80px;
            }

            #portafolio img {
                max-width: 1300px;
                margin: 0 auto;
                max-height: 70vh;
                object-fit: cover;
                border-radius: 12px;
                transition: 0.8s;
            }

            #portafolio img:hover {
                transform: scale(1.02);
                box-shadow: 0 50px 100px rgba(0,0,0,0.2);
            }
        }

        /* --- CUSTOM DESKTOP SCROLLBAR --- */
        @media (min-width: 1024px) {
            ::-webkit-scrollbar {
                width: 12px;
            }

            ::-webkit-scrollbar-track {
                background: var(--bg-white);
            }

            body.dark-mode ::-webkit-scrollbar-track {
                background: var(--bg-dark);
            }

            ::-webkit-scrollbar-thumb {
                background: #CBD5E1;
                border-radius: 10px;
                border: 3px solid var(--bg-white);
            }

            body.dark-mode ::-webkit-scrollbar-thumb {
                background: #475569;
                border: 3px solid var(--bg-dark);
            }

            ::-webkit-scrollbar-thumb:hover {
                background: var(--brand-blue);
            }
        }

        /* --- FOOTER STYLES --- */
        #footer {
            background: rgba(7, 9, 14, 0.92);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            color: white;
            padding: 56px 0 34px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.55fr 1fr 1fr 1.1fr;
            gap: 36px;
            text-align: left;
            align-items: start;
        }

        @media (max-width: 992px) and (min-width: 769px) {
            .footer-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 24px;
            }
            .footer-col-brand {
                grid-column: 1 / -1;
            }
        }

        .footer-col h5 {
            font-size: 16px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #FFFFFF;
            margin-bottom: 16px;
        }

        .footer-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 11px;
        }

        .footer-col ul li {
            font-size: 14.5px;
            font-weight: 700;
            color: #94A3B8;
            cursor: pointer;
            transition: all 0.25s ease;
            line-height: 1.35;
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .footer-col ul li:hover {
            color: #38BDF8;
            transform: translateX(4px);
        }

        #portafolio {
            padding: 18px 0 24px;
            background: #EEF3F9 url('fondo_facetado_light.svg?v=5') center/cover no-repeat !important;
            text-align: center;
            position: relative;
        }

        .map-container {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 50px 100px rgba(0,0,0,0.2);
            background: #020617;
        }

        .map-image {
            width: 100%;
            display: block;
            opacity: 0.8;
            filter: saturate(0.8);
        }

        /* Country Interaction Zones */
        .country-zone {
            position: absolute;
            z-index: 5;
            cursor: pointer;
            background: rgba(0, 116, 228, 0);
            transition: 0.3s;
            border-radius: 15px;
        }

        .country-zone:hover {
            background: rgba(0, 116, 228, 0.05);
            box-shadow: inset 0 0 30px rgba(0, 116, 228, 0.1);
        }

        /* Country Interaction Zones */
        .country-zone {
            position: absolute;
            z-index: 5;
            cursor: pointer;
            background: rgba(0, 116, 228, 0);
            transition: 0.3s;
            border-radius: 10px;
        }

        .country-zone:hover {
            background: rgba(0, 116, 228, 0.1);
            box-shadow: inset 0 0 20px rgba(0, 116, 228, 0.2);
        }

        /* Country Info Window (Modal/Tooltip) */
        .map-modal {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 25px;
            border-radius: 25px;
            color: white;
            text-align: left;
            width: 320px;
            z-index: 100;
            display: none;
            box-shadow: 0 30px 60px rgba(0,0,0,0.5);
            animation: modalFadeIn 0.4s ease-out;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .map-modal h4 {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 5px;
            color: var(--brand-blue);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .map-modal .city-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 15px;
            max-height: 200px;
            overflow-y: auto;
            padding-right: 10px;
        }

        .map-modal .city-item {
            background: rgba(255,255,255,0.05);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            color: #CBD5E1;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .map-modal .city-list::-webkit-scrollbar { width: 4px; }
        .map-modal .city-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

        .close-map-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            cursor: pointer;
            /* opacity removed */
            transition: 0.3s;
        }

        .close-map-modal:hover { opacity: 1; }

        .map-hint {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0,0,0,0.5);
            padding: 10px 20px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
            color: white;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
            pointer-events: none;
            letter-spacing: 1px;
        }

        .map-wrapper {
            position: relative;
            max-width: 1200px;
            margin: 40px auto 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 50px 100px rgba(0,0,0,0.1);
        }

        .map-hotspot {
            position: absolute;
            width: 14px;
            height: 14px;
            background: var(--brand-blue);
            border-radius: 50%;
            z-index: 5;
            cursor: pointer;
            box-shadow: 0 0 20px var(--brand-blue);
        }

        .map-hotspot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background: var(--brand-blue);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: mapPulse 2.5s infinite;
        }

        @keyframes mapPulse {
            0% { width: 14px; height: 14px; opacity: 0.8; }
            100% { width: 50px; height: 50px; opacity: 0; }
        }

        /* Duplicate map-tooltip styles removed to prevent stretching */

        .map-hotspot:hover .map-tooltip {
            opacity: 1;
            bottom: 30px;
        }

        /* Status Badges & Subservices Styling */
        .status-badge {
            font-size: 8px;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-block;
            line-height: 1;
        }

        .status-badge.status-active {
            background: rgba(16, 185, 129, 0.15);
            color: #10B981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .status-badge.status-pronto {
            background: rgba(255, 255, 255, 0.08);
            color: #CBD5E1;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .service-item-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            padding: 8px 10px;
            border: 1px solid rgba(255, 255, 255, 0.04);
            width: 100%;
        }

        .service-item-container.active-item {
            border-left: 2px solid var(--brand-blue);
            background: rgba(0, 116, 228, 0.03);
        }

        .service-item-container.pronto-item {
            opacity: 0.55;
        }

        .service-main-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
        }

        .service-name {
            font-size: 10px;
            font-weight: 800;
            color: white;
            letter-spacing: 0.2px;
        }

        .subservices-list {
            list-style: none;
            padding-left: 10px;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .subservices-list li {
            font-size: 8.5px !important;
            font-weight: 500 !important;
            color: #CBD5E1 !important;
            position: relative;
            padding-left: 8px;
            text-transform: none !important;
            letter-spacing: 0px !important;
        }

        .subservices-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: rgba(255,255,255,0.3);
            font-size: 8px;
        }

        footer h5 {
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 16px;
            color: #FFFFFF;
            opacity: 1;
            font-weight: 900;
        }

        footer ul li {
            list-style: none;
            margin-bottom: 0;
            opacity: 0.9;
            cursor: pointer;
            transition: all 0.25s ease;
            font-size: 14.5px;
            font-weight: 700;
            color: #94A3B8;
        }

        footer ul li:hover {
            opacity: 1;
            color: #38BDF8;
            transform: translateX(4px);
        }

        .footer-bottom {
            margin-top: 38px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.6px;
        }

        .footer-bottom-loc {
            font-size: 10.5px;
            color: #94A3B8;
            font-weight: 800;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            margin-bottom: 2px;
        }

        .footer-copy-line1 {
            font-size: 11.5px;
            font-weight: 800;
            color: #CBD5E1;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            white-space: nowrap;
            line-height: 1.3;
        }

        .footer-copy-line2 {
            font-size: 10.5px;
            font-weight: 700;
            color: #64748B;
            letter-spacing: 0.6px;
            white-space: nowrap;
            line-height: 1.3;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .reg-r-circle {
            color: var(--oro-sagrado, #D4AF37);
            font-weight: 900;
            font-size: 1.08em;
            line-height: 1;
        }

        @media (max-width: 768px) {
            .catalogs-section, #catalogos {
                padding: 14px 0 18px !important;
            }
            .security-section, #seguridad {
                padding: 22px 0 20px !important;
            }
            #portafolio {
                padding: 26px 0 28px !important;
            }

            #footer {
                padding: 26px 0 18px !important;
            }

            .footer-grid {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 12px 6px !important;
                text-align: center !important;
                align-items: start !important;
            }

            .footer-col-brand {
                grid-column: 1 / -1 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                padding-bottom: 10px !important;
                margin-bottom: 2px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            }

            .footer-corp-logo {
                align-items: center !important;
                margin-bottom: 5px !important;
                gap: 2px !important;
            }

            .footer-corp-logo > div {
                font-size: 22px !important;
            }

            .footer-corp-logo > span {
                font-size: 7.5px !important;
                letter-spacing: 2.5px !important;
            }

            .footer-brand-slogan {
                font-size: 10.5px !important;
                letter-spacing: 1.6px !important;
                margin-bottom: 5px !important;
            }

            .footer-col-brand p.footer-brand-desc {
                font-size: 10.5px !important;
                line-height: 1.38 !important;
                margin: 0 auto !important;
                max-width: 335px !important;
                color: #94A3B8 !important;
            }

            .footer-brand-loc-desktop {
                display: none !important;
            }

            .footer-col-brand .footer-social-stack {
                align-items: center !important;
                width: 100% !important;
            }

            .footer-col-brand .footer-social-row {
                justify-content: center !important;
                flex-wrap: nowrap !important;
                white-space: nowrap !important;
            }

            .footer-col:not(.footer-col-brand) {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                min-width: 0 !important;
            }

            .footer-col h5 {
                display: block !important;
                font-size: 10.5px !important;
                font-weight: 900 !important;
                color: #FFFFFF !important;
                margin-bottom: 7px !important;
                padding-bottom: 4px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
                letter-spacing: 0.8px !important;
                text-transform: uppercase !important;
                width: 100% !important;
            }

            .footer-col ul {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 5px !important;
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
            }

            .footer-col ul li,
            .footer-col ul li a {
                margin: 0 !important;
                font-size: clamp(9.2px, 2.55vw, 10.8px) !important;
                font-weight: 700 !important;
                line-height: 1.25 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 4px !important;
                white-space: nowrap !important;
                text-align: center !important;
            }

            .footer-col ul li:hover {
                transform: none !important;
            }

            .footer-bottom {
                margin-top: 14px !important;
                padding-top: 12px !important;
                justify-content: center !important;
                align-items: center !important;
                text-align: center !important;
                gap: 3px !important;
            }

            .footer-bottom-loc {
                font-size: 9px !important;
                letter-spacing: 0.9px !important;
                margin-bottom: 1px !important;
            }

            .footer-copy-line1 {
                font-size: clamp(9px, 2.6vw, 10.8px) !important;
                letter-spacing: 0.25px !important;
                white-space: nowrap !important;
            }

            .footer-copy-line2 {
                font-size: clamp(8.6px, 2.4vw, 10px) !important;
                letter-spacing: 0.4px !important;
                white-space: nowrap !important;
            }
        }

/* ===== Bloque de estilos 2/12 (cabecera) ===== */
    @media (min-width: 769px) {
        /* NAVBAR FIJA */
        nav { position: fixed !important; top: 0 !important; width: 100% !important; z-index: 10000 !important; padding: 16px 0 !important; background: #fff !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; }
        
        /* CORRECCIÓN MODO OSCURO TOPBAR */
        body.dark-mode nav { background: #0F172A !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
        body.dark-mode nav .logo, 
        body.dark-mode nav .nav-links a, 
        body.dark-mode nav .t-mini-item span:first-child, 
        body.dark-mode nav i { color: #FFF !important; }
        body.dark-mode nav .t-mini-item span:last-child { color: #94A3B8 !important; }

        .hero-carousel { height: 100vh !important; min-height: 650px !important; margin-top: 0 !important; position: relative !important; width: 100% !important; overflow: hidden !important; }
        
        .slide-content { 
            position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
            width: 100% !important; max-width: none !important; height: 100% !important; 
            display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
            padding: 0 !important; margin: 0 !important;
        }

        /* BRAND WEIGHTS (Definitive: Both parts share 900 bold weight) */
        .brand-bold { font-weight: 900 !important; }
        .brand-thin { font-weight: 900 !important; opacity: 1 !important; }

        /* =========================================
           1. BANNER FAMILIA (ICONIAPP GRATIS)
           ========================================= */
        #carouselInner > .slide.slide-family-banner .fintech-title-v3 {
            position: absolute !important; top: 40px !important; left: 40px !important; width: auto !important;
            display: flex !important; flex-direction: column !important; align-items: flex-start !important; 
            text-align: left !important; z-index: 100 !important; margin: 0 !important; gap: 0 !important;
        }
        #carouselInner > .slide.slide-family-banner .w-950 { font-size: 90px !important; letter-spacing: -2px !important; line-height: 0.9 !important; color: white !important; display: block !important; text-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; }
        
        #carouselInner > .slide.slide-family-banner span[data-tr="hero_free"] {
            display: inline-block !important; width: auto !important;
            background: #2563EB !important; color: white !important; 
            padding: 8px 30px !important; font-size: 24px !important; font-weight: 900 !important;
            border-radius: 8px !important; margin-top: 5px !important; 
            box-shadow: none !important; text-shadow: none !important; border: none !important;
        }
        #carouselInner > .slide.slide-family-banner span[data-tr="hero_free"]::before, 
        #carouselInner > .slide.slide-family-banner span[data-tr="hero_free"]::after { display: none !important; }

        .banner1-space {
            display: inline !important;
        }

        .banner1-line {
            display: inline !important;
            white-space: nowrap !important;
        }

        #carouselInner > .slide.slide-family-banner .banner1-unlock-box,
        .slide.slide-family-banner .banner1-unlock-box,
        #carouselInner > .slide.slide-family-banner .fintech-unlock-box,
        .slide.slide-family-banner .fintech-unlock-box {
            position: absolute !important; 
            bottom: 130px !important; 
            left: 50% !important; transform: translateX(-50%) !important;
            width: auto !important; 
            max-width: 1050px !important; 
            padding: 16px 40px !important; 
            background: rgba(11, 31, 58, 0.55) !important; 
            border-radius: 20px !important;
            display: flex !important; 
            flex-direction: row !important; 
            align-items: center !important; 
            justify-content: center !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(255, 255, 255, 0.25) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
            white-space: nowrap !important;
        }
        #carouselInner > .slide.slide-family-banner .banner1-tagline-text,
        .slide.slide-family-banner .banner1-tagline-text,
        #carouselInner > .slide.slide-family-banner .fintech-unlock-box div,
        .slide.slide-family-banner .fintech-unlock-box div {
            font-size: clamp(24px, 2.5vw, 32px) !important; 
            font-weight: 700 !important; 
            letter-spacing: 0.5px !important; 
            line-height: 1.2 !important; 
            text-align: center !important;
            white-space: nowrap !important;
            color: #FFFFFF !important;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
        }

        /* =========================================
           2. BANNER VIDEO (NUEVO CHILD 2)
           ========================================= */
        #carouselInner > .slide:nth-child(2) .fintech-video-container {
            width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
        }
        
        /* =========================================
           3. BANNER CONTADOR (Original 2)
           ========================================= */
        #carouselInner > .slide:nth-child(3) { background-size: 80% !important; background-position: center bottom !important; }
        
        #carouselInner > .slide:nth-child(3) .fintech-title-v3 {
            position: absolute !important; top: 0 !important; left: 0 !important; 
            width: 100% !important; height: 100% !important; pointer-events: none !important; 
            display: block !important; margin: 0 !important;
        }
        
        #carouselInner > .slide:nth-child(3) .w-950 { 
            position: absolute !important; top: 60px !important; left: 100px !important; bottom: auto !important; transform: none !important;
            font-size: 90px !important; letter-spacing: -2px !important; line-height: 0.85 !important; color: white !important; display: block !important; 
            text-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; z-index: 100 !important;
            white-space: nowrap !important; opacity: 1 !important; visibility: visible !important;
            pointer-events: auto !important;
        }

        #carouselInner > .slide:nth-child(3) .highlight-text {
            position: absolute !important;
            top: auto !important;
            bottom: 135px !important; 
            left: 50% !important; transform: translateX(-50%) !important;
            display: inline-block !important; width: auto !important;
            background: #2563EB !important; color: white !important; 
            padding: 8px 30px !important; font-size: 24px !important; font-weight: 900 !important;
            border-radius: 8px !important; margin: 0 !important; 
            background-image: none !important; box-shadow: none !important; text-shadow: none !important; border: none !important;
            pointer-events: auto !important; z-index: 9999 !important;
        }
        #carouselInner > .slide:nth-child(3) .highlight-text::before, #carouselInner > .slide:nth-child(3) .highlight-text::after { display: none !important; }

        #carouselInner > .slide:nth-child(3) .fintech-unlock-box { 
            position: absolute !important; 
            bottom: 210px !important; 
            left: 50% !important; transform: translateX(-50%) !important;
            width: 620px !important; padding: 15px 30px !important; background: rgba(255, 255, 255, 0.15) !important; border-radius: 20px !important;
            display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
            backdrop-filter: blur(20px) !important;
        }
        
        #carouselInner > .slide:nth-child(3) .fintech-unlock-box .row-1 { color: #0F172A !important; text-shadow: 0 0 15px rgba(255,255,255,0.8) !important; font-size: 20px !important; font-weight: 900 !important; }
        #carouselInner > .slide:nth-child(3) .fintech-unlock-box .row-2 { color: #1E293B !important; text-shadow: 0 0 15px rgba(255,255,255,0.8) !important; font-size: 16px !important; font-weight: 800 !important; }

        /* =========================================
           BOTÓN "PRE-REGÍSTRATE" GLOBAL EN BANNERS (LUXURY GOLDEN)
           ========================================= */
        .fintech-btn-v2 {
            display: inline-flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 8px !important;
            width: auto !important;
            min-width: 280px !important;
            max-width: 340px !important;
            padding: 14px 28px !important;
            font-size: 17px !important;
            font-weight: 900 !important;
            letter-spacing: 2px !important;
            border-radius: 8px !important;
            background: linear-gradient(180deg, #FDE047 0%, #F59E0B 100%) !important;
            color: #000000 !important;
            border: 1px solid rgba(255, 255, 255, 0.4) !important;
            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            text-shadow: none !important;
            cursor: pointer !important;
            text-decoration: none !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .fintech-btn-v2::before, .fintech-btn-v2::after { display: none !important; }
        .fintech-btn-v2:hover {
            background: linear-gradient(180deg, #FEF08A 0%, #FBBF24 100%) !important;
            color: #000000 !important;
            box-shadow: 0 12px 30px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
            transform: translateY(-2px) scale(1.02) !important;
        }

        /* Botón en Slides Familia y 3 (Posicionamiento inferior centrado) */
        #carouselInner > .slide.slide-family-banner .fintech-btn-v2,
        #carouselInner > .slide:nth-child(3) .fintech-btn-v2 {
            position: absolute !important;
            bottom: 50px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 50 !important;
        }
        #carouselInner > .slide.slide-family-banner .fintech-btn-v2:hover,
        #carouselInner > .slide:nth-child(3) .fintech-btn-v2:hover {
            transform: translateX(-50%) translateY(-2px) scale(1.02) !important;
        }

        /* =========================================
           4, 5 y 6. BANNERS DE PLANES Y PORTAFOLIO GLOBAL
           ========================================= */
        #carouselInner > .slide.slide-portfolio .slide-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            padding-top: 35px !important;
            padding-bottom: 40px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            height: 100% !important;
        }

        #carouselInner > .slide {
            flex: 0 0 100% !important;
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
            box-sizing: border-box !important;
        }

        #carouselInner > .slide:nth-child(4) .slide-content,
        #carouselInner > .slide:nth-child(6) .slide-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding-top: 16px !important;
            padding-bottom: 120px !important;
            overflow: visible !important;
            height: 100% !important;
        }

        @media (max-width: 991px) {
            #carouselInner > .slide:nth-child(4) .slide-content,
            #carouselInner > .slide:nth-child(6) .slide-content {
                justify-content: flex-start !important;
                padding-top: 24px !important;
                padding-bottom: 40px !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
            }
        }

        #carouselInner > .slide:nth-child(4) .fintech-title-v3,
        #carouselInner > .slide:nth-child(6) .fintech-title-v3 { 
            position: relative !important;
            top: auto !important;
            left: auto !important;
            transform: none !important;
            margin-bottom: 4px !important;
            flex-shrink: 0 !important;
            z-index: 30 !important; 
        }

        #carouselInner > .slide:nth-child(4) .global-pre-btn,
        #carouselInner > .slide:nth-child(6) .global-pre-btn {
            bottom: 42px !important;
            padding: 10px 28px !important;
            font-size: clamp(12.5px, 1.08vw, 15px) !important;
            min-width: 0 !important;
            z-index: 100 !important;
        }

        /* Botón Pre-regístrate en flujo natural para los banners 4, 5 y 6 */
        #carouselInner > .slide:nth-child(4) .fintech-btn-v2,
        #carouselInner > .slide:nth-child(5) .fintech-btn-v2,
        #carouselInner > .slide:nth-child(6) .fintech-btn-v2 {
            position: relative !important;
            bottom: auto !important;
            left: auto !important;
            transform: none !important;
            width: auto !important;
            min-width: 200px !important;
            max-width: 280px !important;
            margin: 25px auto 35px auto !important;
            z-index: 100 !important;
            cursor: pointer !important;
            pointer-events: auto !important;
        }
        #carouselInner > .slide:nth-child(4) .fintech-btn-v2:hover,
        #carouselInner > .slide:nth-child(5) .fintech-btn-v2:hover,
        #carouselInner > .slide:nth-child(6) .fintech-btn-v2:hover {
            transform: scale(1.03) !important;
        }
        }


        /* Leaflet & Custom Interactive Map Styles */
        #map {
            width: 100%;
            height: 100%;
            min-height: 400px;
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .leaflet-container {
            background: #f4f5f7 !important;
            outline: 0;
            border-radius: 12px;
        }
        .leaflet-bar {
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        }
        .leaflet-bar a {
            background-color: #ffffff !important;
            color: #333333 !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
            transition: 0.3s;
        }
        .leaflet-bar a:hover {
            background-color: var(--brand-blue) !important;
            color: white !important;
        }
        .leaflet-control-attribution {
            background: rgba(255, 255, 255, 0.8) !important;
            color: rgba(0, 0, 0, 0.4) !important;
            font-size: 9px !important;
            border-bottom-right-radius: 40px;
        }
        .leaflet-control-attribution a {
            color: rgba(0, 0, 0, 0.6) !important;
        }

        .custom-country-icon {
            background: none !important;
            border: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 0 !important;
            height: 0 !important;
        }
        .premium-country-marker {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(15, 23, 42, 0.88);
            backdrop-filter: blur(10px);
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            padding: 5px 10px;
            border-radius: 20px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
            white-space: nowrap;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        .premium-country-marker:hover {
            transform: scale(1.1);
            background: var(--brand-blue);
            border-color: rgba(255, 255, 255, 0.35);
            box-shadow: 0 8px 20px rgba(0, 116, 228, 0.5);
        }
        .marker-dot {
            width: 8px;
            height: 8px;
            background: var(--brand-blue);
            border-radius: 50%;
            transition: all 0.3s ease;
            position: relative;
        }
        .premium-country-marker:hover .marker-dot {
            background: #ffffff;
        }
        .marker-label {
            font-size: 10px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: 0.5px;
            line-height: 1;
            text-transform: uppercase;
        }
        .marker-dot::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border-radius: 50%;
            border: 1px solid rgba(0, 116, 228, 0.6);
            animation: dot-pulse 1.8s infinite;
            pointer-events: none;
        }
        .premium-country-marker:hover .marker-dot::after {
            border-color: rgba(255, 255, 255, 0.8);
        }
        @keyframes dot-pulse {
            0% { transform: scale(0.8); opacity: 1; }
            100% { transform: scale(2.2); opacity: 0; }
        }

        .custom-marker-icon {
            background: none !important;
            border: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 0 !important;
            height: 0 !important;
        }
        .city-radar-marker {
            position: relative;
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .radar-dot {
            width: 8px;
            height: 8px;
            background: var(--brand-blue);
            border: 2px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0, 74, 228, 0.4);
            z-index: 2;
            transition: all 0.2s ease;
        }
        .city-radar-marker:hover .radar-dot {
            transform: scale(1.3);
            background: #ffffff;
            border-color: var(--brand-blue);
        }
        .radar-pulse {
            position: absolute;
            width: 24px;
            height: 24px;
            background: rgba(0, 116, 228, 0.25);
            border-radius: 50%;
            z-index: 1;
            animation: radar-pulse-ring 1.8s infinite;
        }
        @keyframes radar-pulse-ring {
            0% { transform: scale(0.4); opacity: 1; }
            100% { transform: scale(2.0); opacity: 0; }
        }

        /* Cuando el mapa está bloqueado: mostrar solo puntitos parpadeantes sin tapar los países */
        .map-container.map-is-locked .premium-country-marker {
            padding: 3px !important;
            width: 16px !important;
            height: 16px !important;
            border-radius: 50% !important;
            background: rgba(0, 122, 255, 0.28) !important;
            border: 1.5px solid #38BDF8 !important;
            box-shadow: 0 0 14px rgba(0, 122, 255, 0.75) !important;
            justify-content: center !important;
            gap: 0 !important;
        }
        .map-container.map-is-locked .premium-country-marker .marker-label {
            display: none !important;
        }
        .map-container.map-is-locked .premium-country-marker .marker-dot {
            width: 8px !important;
            height: 8px !important;
            background: #38BDF8 !important;
            box-shadow: 0 0 8px #FFFFFF !important;
        }
        .map-container.map-is-locked .premium-country-marker .marker-dot::after {
            top: -6px;
            left: -6px;
            right: -6px;
            bottom: -6px;
            border: 1.8px solid #38BDF8;
            animation: dot-pulse 1.3s infinite;
        }

        .map-tooltip {
            position: absolute;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 18px;
            border-radius: 12px;
            pointer-events: none;
            opacity: 0;
            transition: 0.2s ease;
            z-index: 650;
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            color: white;
        }
        .map-container:has(.map-sidebar.active) .map-tooltip {
            opacity: 0 !important;
            visibility: hidden !important;
        }

        .map-sidebar {
            position: absolute;
            right: -1000px;
            top: 8px;
            bottom: 8px;
            height: calc(100% - 16px);
            max-height: calc(100% - 16px);
            width: 390px;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(35px);
            -webkit-backdrop-filter: blur(35px);
            border: 1.5px solid rgba(15, 23, 42, 0.10);
            padding: 12px 14px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1450;
            border-radius: 18px;
            box-shadow: -15px 0 45px rgba(0,0,0,0.18);
            display: flex;
            flex-direction: column;
            color: #0F172A;
            overflow: hidden;
        }

        .map-sidebar.active {
            right: 10px;
        }

        .map-sidebar.wide-active {
            width: 50%;
            max-width: 660px;
            min-width: 490px;
            right: 10px;
        }

        .sidebar-close-btn {
            width: 28px;
            height: 28px;
            border-radius: 50% !important;
            border: 1px solid rgba(15, 23, 42, 0.14) !important;
            background: #F1F5F9 !important;
            color: #0F172A !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 12px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            flex-shrink: 0 !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
            padding: 0 !important;
        }

        .sidebar-close-btn:hover {
            background: #0F172A !important;
            color: #FFFFFF !important;
            border-color: #0F172A !important;
            transform: scale(1.08) !important;
        }

        /* 2-Column Alphabetical Cities Grid */
        .sidebar-cities-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            overflow-y: auto;
            flex-grow: 1;
            padding-right: 4px;
            align-content: flex-start;
        }

        .sidebar-cities-grid::-webkit-scrollbar { width: 4px; }
        .sidebar-cities-grid::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); border-radius: 4px; }

        .sidebar-cities-grid .city-tag {
            background: #F8FAFC;
            padding: 8px 10px;
            border-radius: 10px;
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #0F172A;
            border: 1px solid #E2E8F0;
            transition: all 0.2s ease;
            cursor: pointer;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-cities-grid .city-tag:hover {
            background: #0F172A;
            color: #FFFFFF;
            border-color: #0F172A;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
        }

        /* Services Grid Styling - 3 Catalog Columns with subtle signature tint */
        .services-columns-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
            margin-top: 4px;
            overflow-y: auto;
            flex-grow: 1;
            padding-right: 2px;
        }

        .services-columns-grid::-webkit-scrollbar { width: 3px; }
        .services-columns-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }

        .column-pagination-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;
            padding: 4px 8px;
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 9px;
            color: #0F172A;
            flex-shrink: 0;
        }

        .pag-arrow {
            background: none;
            border: none;
            color: #0F172A;
            cursor: pointer;
            padding: 3px 6px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            border-radius: 6px;
        }

        .pag-arrow:hover {
            background: rgba(15, 23, 42, 0.08);
            transform: scale(1.1);
        }

        .pag-arrow:disabled {
            color: rgba(15, 23, 42, 0.2);
            cursor: not-allowed;
            pointer-events: none;
        }

        .pag-text {
            font-size: 8.5px;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: #334155;
        }

        .service-category-col {
            border-radius: 14px;
            padding: 8px 7px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
        }

        /* Subtle catalog tints & borders so each catalog is distinct without tiring the eyes */
        .service-category-col.cat-care {
            background: rgba(239, 68, 68, 0.035);
            border: 1.5px solid rgba(239, 68, 68, 0.18);
        }
        .service-category-col.cat-work {
            background: rgba(249, 115, 22, 0.035);
            border: 1.5px solid rgba(249, 115, 22, 0.18);
        }
        .service-category-col.cat-expert {
            background: rgba(16, 185, 129, 0.035);
            border: 1.5px solid rgba(16, 185, 129, 0.18);
        }

        /* Distinct Catalog Header Badge (Black + Catalog Signature Color) */
        .service-category-col h3 {
            font-size: 11px;
            font-weight: 950;
            letter-spacing: 0.4px;
            margin: 0 0 2px 0;
            padding: 6px 8px;
            border-radius: 9px;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            text-transform: uppercase;
            flex-shrink: 0;
            box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
        }

        .service-category-col.cat-care h3 {
            border-bottom: 2.5px solid #EF4444;
            color: #0F172A;
        }
        .service-category-col.cat-care h3 i,
        .service-category-col.cat-care h3 .cat-accent {
            color: #EF4444;
        }

        .service-category-col.cat-work h3 {
            border-bottom: 2.5px solid #F97316;
            color: #0F172A;
        }
        .service-category-col.cat-work h3 i,
        .service-category-col.cat-work h3 .cat-accent {
            color: #F97316;
        }

        .service-category-col.cat-expert h3 {
            border-bottom: 2.5px solid #10B981;
            color: #0F172A;
        }
        .service-category-col.cat-expert h3 i,
        .service-category-col.cat-expert h3 .cat-accent {
            color: #10B981;
        }

        .service-col-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
            overflow-y: auto;
            flex-grow: 1;
        }

        .service-item-container {
            display: flex;
            flex-direction: column;
            gap: 2px;
            background: #FFFFFF;
            border-radius: 9px;
            padding: 5px 7px;
            border: 1px solid rgba(15, 23, 42, 0.07);
            width: 100%;
            cursor: pointer;
            transition: all 0.18s ease;
            text-align: left;
        }

        .service-item-container:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
            border-color: rgba(15, 23, 42, 0.22);
        }

        .service-item-container.active-item {
            background: #FFFFFF;
        }

        /* Inactive service card in soft gray */
        .service-item-container.inactive-item {
            background: #F8FAFC;
            border: 1px dashed #CBD5E1;
        }

        .service-main-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            width: 100%;
            min-width: 0;
        }

        /* Single-line service name: Black when active, Gray when inactive */
        .service-name {
            font-size: 9px;
            font-weight: 850;
            color: #0F172A;
            letter-spacing: 0px;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            width: 100%;
        }

        .service-item-container.inactive-item .service-name {
            color: #94A3B8 !important;
            font-weight: 700;
        }

        .subservices-list {
            list-style: none;
            padding-left: 4px;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        /* Single-line subservice name: Black when active, Gray when inactive */
        .subservices-list li {
            font-size: 7.8px !important;
            font-weight: 600 !important;
            color: #1E293B !important;
            position: relative;
            padding-left: 7px;
            text-transform: none !important;
            letter-spacing: 0px !important;
            line-height: 1.22 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            display: block !important;
        }

        .subservices-list li.sub-inactive {
            color: #94A3B8 !important;
            font-weight: 500 !important;
        }

        .subservices-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #64748B;
            font-size: 7.5px;
        }

        .subservices-list li.sub-inactive::before {
            color: #CBD5E1;
        }

        /* Active City Highlight Pin */
        .active-city-pin-icon {
            overflow: visible !important;
        }
        .active-city-highlight {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            transform: translate(-50%, -100%);
            pointer-events: none;
            z-index: 999;
        }
        .active-city-pulse {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.45);
            animation: activeCityPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
            transform: translate(-50%, 50%);
        }
        @keyframes activeCityPing {
            0% { transform: translate(-50%, 50%) scale(0.4); opacity: 1; }
            100% { transform: translate(-50%, 50%) scale(2.4); opacity: 0; }
        }
        .active-city-core {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #F59E0B, #D97706);
            color: #FFFFFF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            box-shadow: 0 4px 16px rgba(217, 119, 6, 0.7);
            border: 2.5px solid #FFFFFF;
            position: relative;
            z-index: 2;
        }
        .active-city-label {
            margin-top: 5px;
            background: rgba(15, 23, 42, 0.95);
            color: #FFFFFF;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 1px;
            padding: 4px 10px;
            border-radius: 8px;
            white-space: nowrap;
            border: 1.5px solid rgba(212, 175, 55, 0.6);
            box-shadow: 0 6px 16px rgba(0,0,0,0.35);
            position: relative;
            z-index: 2;
        }

        @media (max-width: 768px) {
            .map-container {
                aspect-ratio: auto !important;
                height: 480px !important;
                min-height: 480px !important;
                border-radius: 16px !important;
                overflow: hidden !important;
            }
            #map {
                height: 480px !important;
                min-height: 480px !important;
                width: 100% !important;
            }
            .map-controls {
                left: 8px !important;
                right: 8px !important;
                bottom: 10px !important;
                padding: 5px !important;
                gap: 5px !important;
                justify-content: space-between !important;
                flex-wrap: nowrap !important;
                border-radius: 12px !important;
            }
            .control-btn {
                font-size: 11px !important;
                padding: 8px 10px !important;
                border-radius: 8px !important;
                flex: 1 1 0 !important;
                min-height: 34px !important;
            }
            .map-sidebar {
                top: 8px !important;
                bottom: 8px !important;
                left: auto !important;
                right: -120% !important;
                height: calc(100% - 16px) !important;
                max-height: calc(100% - 16px) !important;
                width: calc(100% - 16px) !important;
                min-width: 0 !important;
                max-width: calc(100% - 16px) !important;
                opacity: 0 !important;
                pointer-events: none !important;
                z-index: 1300 !important;
            }
            .map-sidebar.active,
            .map-sidebar.wide-active {
                left: 8px !important;
                right: 8px !important;
                width: calc(100% - 16px) !important;
                min-width: 0 !important;
                max-width: calc(100% - 16px) !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }
            .services-columns-grid {
                grid-template-columns: 1fr !important;
                max-height: none !important;
                overflow-y: auto !important;
            }
        }

        .sidebar-header h2 { 
            font-size: 28px; 
            font-weight: 900; 
            margin-bottom: 25px; 
            display: flex; 
            align-items: center; 
            gap: 15px; 
            color: var(--brand-blue); 
        }
        
        .country-badge {
            font-size: 11px;
            font-weight: 800;
            background: rgba(0, 116, 228, 0.12);
            color: var(--brand-blue);
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid rgba(0, 116, 228, 0.25);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .sidebar-cities {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            max-height: 60vh;
            overflow-y: auto;
            padding-right: 15px;
        }

        .sidebar-cities::-webkit-scrollbar { width: 3px; }
        .sidebar-cities::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

        .city-tag {
            background: rgba(0, 0, 0, 0.04);
            padding: 6px 12px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(26, 34, 53, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.05);
            transition: 0.3s;
            cursor: pointer;
        }
        .city-tag:hover {
            background: rgba(0, 116, 228, 0.1);
            color: var(--brand-blue);
            border-color: var(--brand-blue);
        }

        .map-controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            align-items: stretch;
            gap: 6px;
            background: rgba(15, 23, 42, 0.86);
            padding: 6px;
            border-radius: 14px;
            backdrop-filter: blur(12px);
            border: 1.5px solid rgba(148, 163, 184, 0.28);
            box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45);
            z-index: 1000;
        }

        .control-btn {
            background: rgba(30, 41, 59, 0.82);
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 10px;
            color: #F8FAFC;
            font-size: 12.5px;
            font-weight: 800;
            line-height: 1.15;
            padding: 10px 18px;
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 auto;
            white-space: nowrap;
            cursor: pointer;
            transition: 0.25s ease;
            letter-spacing: 0.7px;
            outline: none;
        }

        .control-btn.active {
            opacity: 1;
            background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
            border-color: #38BDF8 !important;
            color: #FFFFFF !important;
        }

        /* === CANDADO DE BLOQUEO DE SCROLL/ZOOM DEL MAPA (~1 PULGADA ARRIBA A MANO DERECHA) === */
        .map-scroll-lock-btn {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 74px;
            height: 74px;
            border-radius: 20px;
            background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
            border: 2px solid #F59E0B;
            border-bottom: 5px solid #B45309;
            color: #FBBF24;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            z-index: 1200;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.42), 0 0 0 4px rgba(245, 158, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
            transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
            user-select: none;
            padding: 6px;
        }
        .map-scroll-lock-btn:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.5), 0 0 0 6px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        .map-scroll-lock-btn:active {
            transform: translateY(1px) scale(0.98);
        }
        .map-scroll-lock-btn.unlocked {
            background: linear-gradient(180deg, #059669 0%, #047857 100%);
            border: 2px solid #34D399;
            border-bottom: 5px solid #065F46;
            color: #FFFFFF;
            box-shadow: 0 14px 32px rgba(5, 150, 105, 0.38), 0 0 0 4px rgba(16, 185, 129, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
        }
        .map-scroll-lock-btn .lock-svg-icon {
            width: 34px;
            height: 34px;
            display: block;
            filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
            transition: transform 0.25s ease;
        }
        .map-scroll-lock-btn .lock-state-label {
            font-size: 9px;
            font-weight: 950;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            line-height: 1;
            color: #FFFFFF;
        }
        .map-scroll-lock-btn.lock-attention {
            animation: mapPadlockPulse 0.75s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2;
        }
        @keyframes mapPadlockPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.42), 0 0 0 4px rgba(245, 158, 11, 0.25); }
            25% { transform: scale(1.18) rotate(-6deg); box-shadow: 0 20px 44px rgba(245, 158, 11, 0.65), 0 0 0 12px rgba(245, 158, 11, 0.38); }
            50% { transform: scale(1.18) rotate(6deg); box-shadow: 0 20px 44px rgba(245, 158, 11, 0.65), 0 0 0 14px rgba(245, 158, 11, 0.28); }
            75% { transform: scale(1.12) rotate(-3deg); }
        }
        .map-container:has(.map-sidebar.active) .map-scroll-lock-btn {
            right: 412px;
        }
        .map-container:has(.map-sidebar.wide-active) .map-scroll-lock-btn {
            right: calc(50% + 22px);
        }
        .map-scroll-lock-shield {
            position: absolute;
            inset: 0;
            z-index: 950;
            background: transparent;
            cursor: pointer;
            pointer-events: auto;
        }
        .map-scroll-lock-shield.unlocked {
            pointer-events: none;
            display: none;
        }
        .map-lock-hint-banner {
            position: absolute;
            top: 22px;
            right: 106px;
            z-index: 1205;
            background: rgba(15, 23, 42, 0.96);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid #F59E0B;
            border-bottom: 4px solid #B45309;
            border-radius: 16px;
            padding: 12px 18px;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: 390px;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
            opacity: 0;
            transform: translateX(12px) scale(0.96);
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
            text-align: left;
        }
        .map-lock-hint-banner.visible {
            opacity: 1;
            transform: translateX(0) scale(1);
            pointer-events: auto;
            cursor: pointer;
        }
        .map-container:has(.map-sidebar.active) .map-lock-hint-banner {
            right: 500px;
        }
        .map-container:has(.map-sidebar.wide-active) .map-lock-hint-banner {
            right: calc(50% + 110px);
        }
        @media (max-width: 768px) {
            .map-scroll-lock-btn {
                width: 64px;
                height: 64px;
                top: 12px;
                right: 12px !important;
                border-radius: 16px;
            }
            .map-container:has(.map-sidebar.active) .map-scroll-lock-btn,
            .map-container:has(.map-sidebar.wide-active) .map-scroll-lock-btn,
            .map-container:has(.map-sidebar.active) .map-lock-hint-banner,
            .map-container:has(.map-sidebar.wide-active) .map-lock-hint-banner {
                display: none !important;
            }
            .map-lock-hint-banner {
                top: 84px;
                right: 12px !important;
                left: 12px !important;
                max-width: none;
            }
        }

        .close-sidebar {
            position: absolute;
            top: 25px;
            left: 25px;
            cursor: pointer;
            /* opacity removed */
            transition: 0.3s;
            color: var(--text-dark);
            font-size: 18px;
        }
        .close-sidebar:hover {
            opacity: 1;
            color: var(--brand-blue);
        }

        .map-section {
            width: 100%;
            max-width: 1450px;
            text-align: center;
            transition: max-width 0.3s ease;
            margin: 0 auto;
        }
        
        .map-container {
            position: relative;
            background: #f4f5f7;
            border-radius: 20px;
            padding: 0;
            border: 1.5px solid rgba(212, 175, 55, 0.25);
            width: 100%;
            max-width: 1320px;
            height: clamp(460px, calc(100vh - 145px), 650px);
            display: block;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0,0,0,0.18);
            margin: 0 auto;
        }

        #map {
            width: 100% !important;
            height: clamp(460px, calc(100vh - 145px), 650px) !important;
            min-height: 460px !important;
            background: #e2e8f0;
            border-radius: inherit;
            display: block !important;
        }

        @media (max-width: 992px) {
            .map-container {
                height: 480px;
                max-width: 100%;
            }
            #map {
                height: 480px !important;
                min-height: 480px !important;
            }
        }

        @media (max-width: 768px) {
            #portafolio {
                padding: 26px 0 28px !important;
            }
            #portafolio h3 {
                font-size: clamp(28px, 8vw, 38px) !important;
            }
            #mapGlobalSubtitle {
                font-size: 12px !important;
                letter-spacing: 1px !important;
                margin-bottom: 18px !important;
                padding: 0 10px !important;
            }
            .map-container {
                height: 440px !important;
                min-height: 440px !important;
                border-radius: 16px !important;
                overflow: hidden !important;
            }
            #map {
                height: 440px !important;
                min-height: 440px !important;
                width: 100% !important;
            }
            .map-scroll-lock-btn {
                width: 56px !important;
                height: 56px !important;
                top: 10px !important;
                right: 10px !important;
                border-radius: 14px !important;
                padding: 4px !important;
            }
            .map-scroll-lock-btn .lock-svg-icon {
                width: 26px !important;
                height: 26px !important;
            }
            .map-scroll-lock-btn .lock-state-label {
                font-size: 7.5px !important;
            }
            .map-controls {
                left: 8px !important;
                right: 8px !important;
                bottom: 8px !important;
                padding: 5px !important;
                gap: 5px !important;
                justify-content: space-between !important;
                flex-wrap: nowrap !important;
                border-radius: 12px !important;
            }
            .control-btn {
                font-size: 11px !important;
                padding: 8px 10px !important;
                letter-spacing: 0.4px !important;
                border-radius: 8px !important;
                flex: 1 1 0 !important;
                min-height: 34px !important;
            }

            /* === MODAL REGISTRO (CLIENTES & PROVEEDORES) — MOBILE FIX (SAMSUNG & IPHONE) === */
            #registerModal {
                padding: 8px !important;
                align-items: center !important;
            }
            .modal-content.modal-user,
            .modal-content.modal-prov {
                width: 96vw !important;
                max-width: 96vw !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: 92dvh !important;
                border-radius: 20px !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                display: flex !important;
                flex-direction: column !important;
            }
            .modal-content.modal-user .modal-body,
            .modal-content.modal-prov .modal-body {
                padding: 16px 14px 20px !important;
                overflow-y: visible !important;
                overflow-x: hidden !important;
                flex: 1 1 auto !important;
            }
            .modal-content.modal-user .close-modal,
            .modal-content.modal-prov .close-modal {
                top: 10px !important;
                right: 10px !important;
                width: 34px !important;
                height: 34px !important;
                font-size: 20px !important;
            }
            .modal-content.modal-user .modal-header,
            .modal-content.modal-prov .modal-header {
                margin-bottom: 10px !important;
                padding-right: 36px !important;
                padding-left: 4px !important;
                text-align: center !important;
            }
            .modal-content.modal-user #modalTitle,
            .modal-content.modal-prov #modalTitle {
                font-size: clamp(17px, 4.8vw, 21px) !important;
                line-height: 1.2 !important;
                margin-bottom: 4px !important;
            }
            .modal-content.modal-user #modalDesc,
            .modal-content.modal-prov #modalDesc {
                font-size: 11.5px !important;
                line-height: 1.3 !important;
            }
            #wizardStepBar {
                gap: 4px !important;
                margin-bottom: 10px !important;
            }
            #wizardStepBar > div {
                padding: 6px 4px !important;
                font-size: 10px !important;
                letter-spacing: 0.2px !important;
                border-radius: 8px !important;
            }

            /* Step 1: Country & City Dropdowns (2 columns floating over without pushing Ciudad down) */
            .select-items.grid-select-items {
                position: absolute !important;
                top: 60px !important;
                left: 0 !important;
                right: 0 !important;
                z-index: 1005 !important;
                margin-top: 0 !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                max-height: 46vh !important;
                overflow-y: auto !important;
                padding: 8px !important;
                gap: 6px !important;
                box-sizing: border-box !important;
            }
            .select-items.grid-select-items div {
                padding: 8px 8px !important;
                font-size: 11.5px !important;
            }

            /* Step 2: Provider Independent/Company Switcher, ID Row & Services Dropdown */
            #regStep2 {
                max-width: 100% !important;
                overflow-x: hidden !important;
            }
            .prov-row-inline-switcher {
                flex-direction: column !important;
                align-items: stretch !important;
                justify-content: center !important;
                gap: 8px !important;
                padding: 10px 12px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .prov-inline-question {
                white-space: normal !important;
                text-align: center !important;
                font-size: 11.5px !important;
                line-height: 1.25 !important;
            }
            .prov-type-switcher {
                grid-template-columns: 1fr 1fr !important;
                width: 100% !important;
                max-width: 100% !important;
                gap: 8px !important;
            }
            .prov-type-btn {
                font-size: 11.5px !important;
                padding: 8px 6px !important;
                white-space: normal !important;
                text-align: center !important;
                line-height: 1.2 !important;
                justify-content: center !important;
            }
            .prov-id-inline-row {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                width: 100% !important;
            }
            .service-search-dropdown {
                padding: 8px !important;
                max-height: 55vh !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .service-search-item {
                flex-wrap: wrap !important;
                gap: 6px !important;
                padding: 8px 10px !important;
            }
            .dropdown-subservices-panel,
            .subservice-pills-wrap {
                grid-template-columns: 1fr !important;
                gap: 6px !important;
                padding: 8px !important;
            }
            .subservices-ok-bar {
                flex-wrap: wrap !important;
                gap: 6px !important;
            }
            .subservices-ok-bar button {
                flex: 1 1 auto !important;
                justify-content: center !important;
                font-size: 11px !important;
                padding: 7px 10px !important;
            }
            .service-chip-top {
                flex-wrap: wrap !important;
                gap: 6px !important;
            }
            .wizard-nav-row {
                gap: 8px !important;
                margin-top: 10px !important;
            }
            .wizard-btn-prev,
            .wizard-btn-next {
                padding: 0 14px !important;
                font-size: 12px !important;
                height: 44px !important;
            }

            /* === MODAL CATÁLOGO (.modal-cat) — MOBILE FIX === */
            .modal-content.modal-cat {
                width: 96vw !important;
                max-width: 96vw !important;
                max-height: 92dvh !important;
                padding: 12px 10px 14px !important;
                border-radius: 20px !important;
            }
            .modal-content.modal-cat .modal-header {
                padding: 4px 34px 0 34px !important;
                margin-bottom: 6px !important;
            }
            .modal-content.modal-cat #modalTitle {
                font-size: 20px !important;
            }
            .modal-content.modal-cat #modalDesc {
                font-size: 11px !important;
                line-height: 1.25 !important;
                margin-top: 4px !important;
            }
            .modal-content.modal-cat .cat-top-right-stats {
                display: none !important;
            }
            .modal-content.modal-cat .cat-top-right-stats .stat-line-1,
            .modal-content.modal-cat .cat-top-right-stats .stat-line-2 {
                font-size: 10.5px !important;
                white-space: nowrap !important;
            }
        }

        @media (min-width: 769px) {
        /* === PREMIUM UPGRADE v2.0 - Website === */
        /* Buttons CTA Premium */
        .btn-nav {
            box-shadow: var(--iconi-prebtn-shadow-normal) !important;
            border: 1.5px solid rgba(147, 197, 253, 0.68) !important;
        }
        .btn-nav:hover,
        .btn-nav:focus-visible {
            box-shadow: var(--iconi-prebtn-shadow-hover) !important;
            border-color: rgba(224, 242, 254, 0.96) !important;
        }

        /* Icon buttons premium */
        .icon-btn {
            background: rgba(255,255,255,0.7) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(255,255,255,0.5) !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
        }
        .icon-btn:hover {
            box-shadow: 0 8px 18px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
            transform: translateY(-2px);
        }

        /* Form inputs premium */
        input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
        input[type="password"], select, textarea {
            border-radius: 12px !important;
            border: 2px solid #64748B !important;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
            transition: all 0.2s ease !important;
        }
        input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
        input[type="number"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
            border-color: #0F172A !important;
            box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.12) !important;
            outline: none !important;
        }
        #serviceSearchInput,
        #catModalSearchInput,
        #catModalCitySelect,
        #catModalSearchInput:focus,
        #catModalCitySelect:focus {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
            border-radius: 0 !important;
            outline: none !important;
        }

        /* Form submission button */
        button[type="submit"], .btn-submit, .cta-btn, .hero-btn {
            box-shadow: 0 12px 28px rgba(0, 116, 228, 0.3), inset 0 2px 0 rgba(255,255,255,0.15) !important;
            border: 1px solid rgba(255,255,255,0.2) !important;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        }
        button[type="submit"]:hover, .btn-submit:hover, .cta-btn:hover, .hero-btn:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 18px 40px rgba(0, 116, 228, 0.4), inset 0 2px 0 rgba(255,255,255,0.2) !important;
        }

        /* Cards premium */
        .feature-card, .p-card, .service-card, .step-card, .app-banner {
            border: 1px solid rgba(255,255,255,0.6) !important;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8) !important;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            transition: all 0.3s ease !important;
        }

        /* Navbar premium */
        nav {
            box-shadow: 0 4px 20px rgba(0,0,0,0.06), inset 0 -1px 0 rgba(255,255,255,0.5) !important;
        }
    }

/* ===== Bloque de estilos 3/12 (cabecera) ===== */
        /* --- FLOATING HAMBURGER DRAWER NAVIGATION (100% DEPTH, NO FIXED SIDEBAR) --- */
        .iconi-hamburger-trigger {
            position: fixed;
            top: 18px;
            left: 18px;
            z-index: 3600;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-radius: 999px;
            background-color: rgba(11, 15, 25, 0.88);
            background-image: var(--iconi-subtle-sheen-normal);
            background-size: 100% 100%, 100% 100%;
            border: 1.5px solid rgba(56, 189, 248, 0.48);
            color: #FFFFFF;
            cursor: pointer;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: inset 0 1.5px 1px rgba(186, 230, 253, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.65), 0 8px 25px rgba(0, 0, 0, 0.55), 0 0 15px rgba(0, 122, 255, 0.25);
            transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
            font-family: inherit;
        }
        .iconi-hamburger-trigger:hover {
            background-color: rgba(15, 30, 62, 0.94);
            background-image: var(--iconi-subtle-sheen-hover);
            background-size: 100% 100%, 100% 100%;
            border-color: #7DD3FC;
            transform: translateY(-1px) scale(1.03);
            box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65), inset 0 0 14px rgba(56, 189, 248, 0.3), 0 0 20px rgba(56, 189, 248, 0.55), 0 12px 30px rgba(0, 122, 255, 0.45);
        }
        .iconi-hamburger-bars {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            width: 20px;
            height: 16px;
        }
        .iconi-hamburger-bars span {
            display: block;
            height: 2.2px;
            width: 100%;
            background: #38BDF8;
            border-radius: 2px;
            transition: all 0.25s ease;
        }
        .iconi-hamburger-trigger:hover .iconi-hamburger-bars span:nth-child(1),
        body.drawer-open .iconi-hamburger-bars span:nth-child(1) {
            background: #FFFFFF;
        }
        .iconi-hamburger-label {
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: #F8FAFC;
        }
        .iconi-drawer-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(4, 7, 15, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 3400;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        body.drawer-open .iconi-drawer-backdrop {
            opacity: 1;
            pointer-events: auto;
        }

        @media (min-width: 1024px) {
            body { margin: 0; overflow-x: hidden; }
            .layout-wrapper { display: block; width: 100%; min-height: 100vh; }
            nav {
                width: 285px !important; min-width: 285px !important; max-width: 285px !important; height: 100vh !important; position: fixed !important; left: 0 !important; top: 0 !important;
                background: rgba(11, 15, 25, 0.96) !important; border-right: 1px solid rgba(56, 189, 248, 0.22) !important;
                padding: 76px 20px 32px 20px !important; display: flex !important; flex-direction: column !important;
                z-index: 3500 !important; box-shadow: 15px 0 45px rgba(0,0,0,0.75) !important; box-sizing: border-box !important;
                backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
                transform: translateX(-105%) !important;
                transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
                overflow: visible !important;
            }
            body.drawer-open nav {
                transform: translateX(0) !important;
            }
            .nav-content { height: 100% !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
            .nav-brand-group { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; overflow: visible !important; position: relative !important; z-index: 4200 !important; }
            .corp-brand-header {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                gap: 4px !important;
                text-decoration: none !important;
            }

            .desktop-sidebar-controls {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                margin-top: 14px !important;
                margin-bottom: 16px !important;
                overflow: visible !important;
                position: relative !important;
                z-index: 4200 !important;
            }
            .desktop-sidebar-controls .lang-dropdown {
                position: relative !important;
                overflow: visible !important;
                z-index: 4200 !important;
            }
            .header-icon-btn {
                background: rgba(255,255,255,0.08) !important;
                border: 1px solid rgba(255,255,255,0.15) !important;
                color: #FFFFFF !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 38px !important;
                height: 38px !important;
                border-radius: 50% !important;
                cursor: pointer !important;
                font-size: 15px !important;
                transition: all 0.2s ease !important;
            }
            .header-icon-btn:hover {
                background: rgba(255,255,255,0.18) !important;
                border-color: #38BDF8 !important;
                color: #38BDF8 !important;
                transform: scale(1.06) !important;
            }
            .desktop-sidebar-controls .lang-list {
                top: 50% !important;
                left: calc(100% + 12px) !important;
                transform: translateY(-50%) !important;
                right: auto !important;
                flex-direction: row !important;
                align-items: center !important;
                flex-wrap: nowrap !important;
                width: max-content !important;
                min-width: max-content !important;
                padding: 6px 8px !important;
                gap: 4px !important;
                border-radius: 999px !important;
                background: rgba(11, 15, 25, 0.98) !important;
                border: 1px solid rgba(56, 189, 248, 0.38) !important;
                box-shadow: 0 14px 36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
                z-index: 4200 !important;
            }
            .desktop-sidebar-controls .lang-list::before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: -16px;
                width: 16px;
            }
            .desktop-sidebar-controls .lang-list div {
                padding: 8px 13px !important;
                border-radius: 999px !important;
                white-space: nowrap !important;
                font-size: 13px !important;
                font-weight: 700 !important;
                gap: 8px !important;
                transition: all 0.18s ease !important;
            }
            .desktop-sidebar-controls .lang-list div:hover {
                background: rgba(56, 189, 248, 0.18) !important;
                color: #38BDF8 !important;
                transform: translateY(-1px) !important;
            }

            .nav-links-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; gap: 22px !important; margin-top: 16px; }
            .nav-links { display: flex !important; flex-direction: column !important; gap: 14px !important; width: 100% !important; align-items: center !important; padding: 0 !important; margin: 0 !important; }
            .nav-links a { font-size: 17px !important; width: 100%; text-align: center; font-weight: 800; letter-spacing: 1px; padding: 11px 10px; border-radius: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
            .nav-links a::after { display: none !important; }
            .nav-links a:hover { background: rgba(56, 189, 248, 0.12); color: #38BDF8 !important; }
            .nav-center.desktop-only { display: none !important; }
            .btn-nav.desktop-only {
                width: auto !important;
                min-width: 180px !important;
                max-width: 220px !important;
                margin: 12px auto 0 auto !important;
                padding: 14px 24px !important;
                font-size: 15px !important;
                font-weight: 900 !important;
                letter-spacing: 1px !important;
                border-radius: 12px !important;
                text-align: center !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-shadow: 0 4px 20px rgba(0, 116, 228, 0.4) !important;
            }
            .main-content { width: 100% !important; margin-left: 0 !important; position: relative !important; }
            .mobile-only { display: none !important; }
            .corp-brand-header-mobile { display: none !important; }
        }
        @media (max-width: 1023px) {
            nav { z-index: 3850 !important; }
            .iconi-hamburger-trigger { display: none !important; }
            .desktop-only { display: none !important; }
            .corp-brand-header { display: none !important; }
            .desktop-sidebar-controls { display: none !important; }
            .mobile-only { display: flex !important; }
            /* Menú desplegable móvil al tocar el icono hamburguesa de la barra superior */
            body.drawer-open .nav-links-wrapper.mobile-drawer-capable {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                position: fixed !important;
                top: 64px !important;
                left: 10px !important;
                right: 10px !important;
                width: calc(100% - 20px) !important;
                background: rgba(11, 15, 25, 0.97) !important;
                backdrop-filter: blur(22px) !important;
                -webkit-backdrop-filter: blur(22px) !important;
                border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
                border-radius: 18px !important;
                padding: 16px !important;
                gap: 12px !important;
                z-index: 3800 !important;
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
                box-sizing: border-box !important;
            }
            body.drawer-open .nav-links-wrapper.mobile-drawer-capable .nav-links {
                display: flex !important;
                flex-direction: column !important;
                gap: 6px !important;
                width: 100% !important;
            }
            body.drawer-open .nav-links-wrapper.mobile-drawer-capable .nav-links a {
                color: #FFFFFF !important;
                font-size: 14px !important;
                font-weight: 800 !important;
                padding: 10px 12px !important;
                border-radius: 10px !important;
                text-align: center !important;
                background: rgba(255, 255, 255, 0.04) !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
            }
            body.drawer-open .nav-links-wrapper.mobile-drawer-capable .btn-nav {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                width: 100% !important;
                padding: 12px !important;
                font-size: 13px !important;
                font-weight: 900 !important;
                border-radius: 12px !important;
                box-sizing: border-box !important;
            }
        }

/* ===== Bloque de estilos 4/12 (cuerpo) ===== */
                        /* === SCOPED STYLES FOR BANNER 1 (.slide.slide-portfolio) ONLY === */
                        #carouselInner > .slide.slide-portfolio {
                            --b1-navy: #0F172A;
                            --b1-navy-light: #1E293B;
                            --b1-blue: #0284C7;
                            --b1-cyan: #0284C7;
                            --b1-white: #FFFFFF;
                            --b1-muted: #475569;
                            --b1-care: #E11D48;
                            --b1-work: #EA580C;
                            --b1-experts: #059669;
                            --b1-line: #CBD5E1;
                            position: relative;
                            isolation: isolate;
                            overflow: hidden !important;
                            background: linear-gradient(180deg, #E8F1FA 0%, #EEF5FC 48%, #E6EEF7 100%) !important;
                        }

                        #carouselInner > .slide.slide-portfolio > .slide-content.b1-hero-wrapper {
                            justify-content: space-between !important;
                            align-items: stretch !important;
                            padding: 0 !important;
                            max-width: 100% !important;
                            width: 100% !important;
                            height: 100% !important;
                            text-shadow: none !important;
                            overflow-x: hidden !important;
                            overflow-y: auto !important;
                        }

                        /* Reset inherited .slide h1 and .slide p rules inside Banner 1 */
                        #carouselInner > .slide.slide-portfolio h1.b1-title {
                            margin: 0 !important;
                            padding: 0 !important;
                            background: transparent !important;
                            border: none !important;
                            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
                            font-size: 16px !important;
                            font-weight: 900 !important;
                            letter-spacing: 0 !important;
                            line-height: 1 !important;
                            color: var(--b1-white) !important;
                            text-shadow: none !important;
                            text-transform: uppercase !important;
                            display: flex !important;
                            flex-direction: column !important;
                            align-items: center !important;
                        }

                        #carouselInner > .slide.slide-portfolio p {
                            background: transparent !important;
                            border: none !important;
                            backdrop-filter: none !important;
                            -webkit-backdrop-filter: none !important;
                            border-radius: 0 !important;
                            box-shadow: none !important;
                            padding: 0 !important;
                            margin: 0 !important;
                            text-shadow: none !important;
                        }

                        /* ESCENA PANORÁMICA COMPLETA DE FONDO (CLIENTE + PLANETA + PROVEEDOR + MONUMENTOS) */
                        #carouselInner > .slide.slide-portfolio .b1-scene-bg {
                            position: absolute;
                            z-index: 1;
                            top: 46px;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            pointer-events: none;
                            overflow: hidden;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-scene-img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center 28%;
                            display: block;
                            filter: brightness(1.02) saturate(1.05) contrast(1.02);
                        }

                        /* Velo atmosférico progresivo y translúcido que difumina suavemente los puntos de color hacia el fondo claro */
                        #carouselInner > .slide.slide-portfolio .b1-scene-overlay {
                            position: absolute;
                            z-index: 2;
                            inset: 0;
                            pointer-events: none;
                            background:
                                radial-gradient(ellipse 36% 50% at 48% 38%, rgba(236, 244, 252, 0.52) 0%, rgba(236, 244, 252, 0.16) 58%, transparent 100%),
                                linear-gradient(180deg,
                                    #E8F1FA 0%,
                                    rgba(232, 241, 250, 0.48) 6%,
                                    rgba(232, 241, 250, 0.0) 16%,
                                    rgba(232, 241, 250, 0.0) 74%,
                                    rgba(230, 238, 247, 0.62) 89%,
                                    #E6EEF7 100%);
                        }

                        /* CABECERA SUPERIOR DE BANNER 1 */
                        #carouselInner > .slide.slide-portfolio .b1-header {
                            position: relative;
                            z-index: 10;
                            width: 100%;
                            max-width: 1560px;
                            margin: 0 auto;
                            padding: 6px 28px 3px 132px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 16px;
                            background: linear-gradient(180deg, rgba(232, 241, 250, 0.94) 0%, rgba(238, 245, 252, 0.78) 100%);
                            border-bottom: 1px solid rgba(148, 163, 184, 0.28);
                            flex-shrink: 0;
                        }
                        #carouselInner > .slide.slide-portfolio .b1-hero-coverage-bar {
                            flex-shrink: 0;
                            z-index: 12;
                            padding: 4px 14px;
                            margin: 0;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand {
                            display: inline-flex;
                            flex-direction: column;
                            align-items: center;
                            font-family: 'Plus Jakarta Sans', sans-serif;
                            font-size: clamp(23px, 2.3vw, 34px);
                            font-weight: 900;
                            letter-spacing: -1.3px;
                            line-height: 0.92;
                            color: #0F172A;
                            text-decoration: none;
                            text-shadow: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand .app {
                            color: #0284C7;
                            text-shadow: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand .pro {
                            color: #B48327;
                            text-shadow: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand small {
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            margin-top: 3px;
                            color: #475569;
                            font-size: 8.5px;
                            font-weight: 800;
                            letter-spacing: 2px;
                            text-transform: uppercase;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand small::before,
                        #carouselInner > .slide.slide-portfolio .b1-brand small::after {
                            content: "";
                            width: 14px;
                            height: 1px;
                            background: #94A3B8;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand.b1-brand-pro small::before,
                        #carouselInner > .slide.slide-portfolio .b1-brand.b1-brand-pro small::after {
                            background: rgba(180, 131, 39, 0.65);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-header-tagline {
                            flex: 1;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 18px;
                            font-family: 'Plus Jakarta Sans', sans-serif;
                            color: #0F172A;
                            font-size: clamp(18px, 1.95vw, 28px);
                            font-weight: 900;
                            letter-spacing: clamp(7px, 1.05vw, 16px);
                            text-transform: uppercase;
                            text-align: center;
                            white-space: nowrap;
                            text-shadow: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-header-tagline::before,
                        #carouselInner > .slide.slide-portfolio .b1-header-tagline::after {
                            content: "";
                            flex: 1;
                            max-width: 120px;
                            height: 1.5px;
                            border-radius: 999px;
                            background: linear-gradient(90deg, transparent, #94A3B8);
                            box-shadow: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-header-tagline::after {
                            background: linear-gradient(270deg, transparent, #94A3B8);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand-corp {
                            text-align: right;
                            font-family: 'Plus Jakarta Sans', sans-serif;
                            font-size: clamp(15px, 1.4vw, 21px);
                            font-weight: 900;
                            letter-spacing: -0.4px;
                            line-height: 0.95;
                            color: #0F172A;
                            text-decoration: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand-corp span {
                            color: #475569;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand-corp .corp-star {
                            color: #0284C7;
                            font-size: 0.72em;
                            vertical-align: super;
                            margin-left: 2px;
                            text-shadow: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-brand-corp small {
                            display: block;
                            margin-top: 3px;
                            font-size: 7.8px;
                            letter-spacing: 2.3px;
                            font-weight: 700;
                            color: #64748B;
                        }

                        /* CONTENIDO CENTRAL DEL HERO */
                        #carouselInner > .slide.slide-portfolio .b1-main-body {
                            position: relative;
                            z-index: 10;
                            width: 100%;
                            max-width: 1760px;
                            margin: 0 auto;
                            padding: 0 14px 0;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            text-align: center;
                            flex: 1 1 auto;
                            justify-content: flex-start;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-hero-top-copy {
                            flex: 1 1 auto;
                            display: grid;
                            grid-template-rows: 1fr auto 1fr;
                            align-items: center;
                            justify-items: center;
                            width: min(95vw, 1640px);
                            max-width: 1640px;
                            margin: 0 auto;
                            padding: 0;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-question-block {
                            width: 100%;
                            max-width: 1280px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            margin: auto 0;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-eyebrow {
                            width: 100%;
                            color: #0F172A !important;
                            font-size: clamp(16.5px, 1.72vw, 24px) !important;
                            font-weight: 900 !important;
                            letter-spacing: clamp(1.1px, 0.16vw, 2.2px) !important;
                            line-height: 1.12 !important;
                            transform: scaleY(1.1);
                            transform-origin: center center;
                            text-transform: uppercase !important;
                            white-space: nowrap !important;
                            margin-top: 0 !important;
                            margin-bottom: 5px !important;
                            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95) !important;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-familiar-apps {
                            width: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: clamp(22px, 2.8vw, 44px);
                            margin: 2px auto 0 !important;
                            color: #0F172A;
                            font-size: clamp(15px, 1.55vw, 21.5px);
                            font-weight: 900;
                            letter-spacing: 1.3px;
                            transform: scaleY(1.08);
                            transform-origin: center center;
                            text-transform: uppercase;
                            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-familiar-apps span {
                            display: inline-flex;
                            align-items: center;
                            gap: 10px;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-familiar-apps svg {
                            width: 32px;
                            height: 32px;
                            color: #0284C7;
                            filter: none;
                            flex: 0 0 auto;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-familiar-apps i {
                            height: 24px;
                            width: 2px;
                            background: #94A3B8;
                            display: inline-block;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-title-brand {
                            display: block;
                            white-space: nowrap;
                            font-size: clamp(70px, 8.1vw, 118px) !important;
                            font-weight: 900 !important;
                            letter-spacing: -2.6px !important;
                            line-height: 0.86 !important;
                            margin: 0 !important;
                            text-shadow: none !important;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-title-brand .b1-title-iconi {
                            display: inline-block;
                            color: #0F172A;
                            background: none;
                            -webkit-text-fill-color: #0F172A;
                            text-shadow: none !important;
                            filter: drop-shadow(0 3px 8px rgba(15, 23, 42, 0.12));
                        }

                        #carouselInner > .slide.slide-portfolio .b1-title-brand .b1-title-app {
                            display: inline-block;
                            color: #0284C7;
                            background: linear-gradient(180deg, #0A84FF 0%, #0284C7 60%, #0369A1 100%);
                            -webkit-background-clip: text;
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                            text-shadow: none !important;
                            filter: drop-shadow(0 3px 8px rgba(2, 132, 199, 0.16));
                        }

                        #carouselInner > .slide.slide-portfolio .b1-title-middle {
                            display: block;
                            margin: 4px 0 2px !important;
                            font-size: clamp(23px, 2.55vw, 38px) !important;
                            font-weight: 900 !important;
                            letter-spacing: 1.5px !important;
                            line-height: 1.02 !important;
                            color: #0F172A !important;
                            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95) !important;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-title-number {
                            display: block;
                            font-size: clamp(50px, 5.75vw, 85px) !important;
                            font-weight: 900 !important;
                            letter-spacing: -1.2px !important;
                            line-height: 0.9 !important;
                            color: #0284C7;
                            background: linear-gradient(180deg, #0A84FF 0%, #0284C7 55%, #0369A1 100%);
                            -webkit-background-clip: text;
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                            text-shadow: none !important;
                            filter: drop-shadow(0 3px 8px rgba(2, 132, 199, 0.16));
                        }

                        #carouselInner > .slide.slide-portfolio .b1-desc-and-roles-wrap {
                            width: 100%;
                            height: 100%;
                            align-self: stretch;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin: 0 auto;
                        }

                        /* FILA POR ENCIMA DE LAS 3 TARJETAS: PARA CLIENTES (IZQ) | TEXTO 2 RENGLONES EQUIDISTANTE (CENTRO) | PARA PROVEEDORES (DER) */
                        #carouselInner > .slide.slide-portfolio .b1-roles-and-free-row {
                            display: grid;
                            grid-template-columns: minmax(255px, 345px) 1fr minmax(255px, 345px);
                            align-items: center;
                            gap: 14px;
                            width: 100%;
                            height: 100%;
                            margin: 0 auto;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-roles-and-free-row > .b1-audience-item {
                            align-self: end;
                            margin-bottom: 6px;
                        }

                        #carouselInner > .slide.slide-portfolio p.b1-description {
                            align-self: center !important;
                            max-width: 880px !important;
                            width: 100% !important;
                            margin: auto !important;
                            color: #0F172A !important;
                            font-size: clamp(14px, 1.3vw, 19px) !important;
                            font-weight: 700 !important;
                            line-height: 1.36 !important;
                            letter-spacing: 0.15px !important;
                            text-align: center !important;
                            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95) !important;
                        }

                        #carouselInner > .slide.slide-portfolio p.b1-description .b1-desc-line {
                            display: block;
                        }

                        #carouselInner > .slide.slide-portfolio p.b1-description strong {
                            color: #0284C7;
                            font-weight: 900;
                            letter-spacing: 0.4px;
                            text-shadow: none;
                        }

                        #carouselInner > .slide.slide-portfolio p.b1-description strong.b1-desc-latam {
                            display: inline-block;
                            color: #0284C7 !important;
                            font-size: 1.28em !important;
                            font-weight: 900 !important;
                            letter-spacing: 0.8px !important;
                            line-height: 1 !important;
                            vertical-align: -1px;
                            text-shadow: none !important;
                        }

                        /* LAS TRES TARJETAS DE CATÁLOGOS DISTRIBUIDAS EN CASI TODO EL ANCHO DE LA PÁGINA (MÁS HORIZONTALES Y MENOS CUADRADAS) */
                        #carouselInner > .slide.slide-portfolio .b1-catalogs {
                            display: grid;
                            grid-template-columns: repeat(3, minmax(0, 1fr));
                            gap: 18px;
                            width: min(95vw, 1640px);
                            max-width: 1640px;
                            margin: 0 auto 6px;
                            text-align: left;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog {
                            --accent: var(--b1-cyan);
                            position: relative;
                            min-width: 0;
                            height: 172px;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-end;
                            overflow: hidden;
                            border: 1.5px solid rgba(255, 255, 255, 0.92);
                            border-radius: 15px;
                            background: #0F172A;
                            box-shadow: 0 12px 28px rgba(4, 14, 30, 0.48), 0 0 0 1px rgba(148, 163, 184, 0.25);
                            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
                            cursor: pointer;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog:hover,
                        #carouselInner > .slide.slide-portfolio .b1-catalog:focus-visible {
                            transform: translateY(-3px);
                            border-color: var(--accent);
                            box-shadow: 0 16px 32px rgba(4, 14, 30, 0.6), 0 0 16px rgba(255, 255, 255, 0.28);
                            outline: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-care { --accent: var(--b1-care); }
                        #carouselInner > .slide.slide-portfolio .b1-catalog-work { --accent: var(--b1-work); }
                        #carouselInner > .slide.slide-portfolio .b1-catalog-experts { --accent: var(--b1-experts); }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-top {
                            position: absolute;
                            inset: 0;
                            width: 100%;
                            height: 100%;
                            display: block;
                            padding: 0;
                            overflow: hidden;
                            z-index: 0;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-image {
                            position: absolute;
                            inset: 0;
                            width: 100%;
                            height: 100%;
                            background-size: cover;
                            background-position: center 20%;
                            background-repeat: no-repeat;
                            z-index: 0;
                            filter: brightness(1.04) contrast(1.03) saturate(1.06);
                            transition: transform 0.35s ease;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-image::after {
                            content: "";
                            position: absolute;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            height: 54px;
                            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 38%, rgba(255, 255, 255, 0.95) 72%, #FFFFFF 100%);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog:hover .b1-catalog-image {
                            transform: scale(1.03);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-care .b1-catalog-image {
                            background-image: url("assets/iconi-care.jpg?v=2");
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-work .b1-catalog-image {
                            background-image: url("assets/iconi-work.jpg?v=2");
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-experts .b1-catalog-image {
                            background-image: url("assets/iconi-experts.jpg?v=2");
                        }

                        /* FRANJA INFERIOR ULTRA COMPACTA (SOLO 2 RENGLONES EN LA BASE DE LA TARJETA) */
                        #carouselInner > .slide.slide-portfolio .b1-catalog-body {
                            position: relative;
                            z-index: 1;
                            padding: 2px 14px 5px;
                            background: transparent;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-title-row {
                            display: flex;
                            align-items: baseline;
                            gap: 7px;
                            flex-wrap: nowrap;
                            white-space: nowrap;
                            margin-bottom: 1px;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog h2 {
                            margin: 0 !important;
                            font-family: 'Plus Jakarta Sans', sans-serif !important;
                            font-size: clamp(15.5px, 1.25vw, 18.5px) !important;
                            font-weight: 900 !important;
                            letter-spacing: -0.3px !important;
                            color: #0F172A !important;
                            line-height: 1.05 !important;
                            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog h2 span {
                            color: var(--accent);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-catalog-sep {
                            color: var(--accent);
                            font-weight: 900;
                            font-size: 12.5px;
                        }

                        #carouselInner > .slide.slide-portfolio p.b1-catalog-subtitle {
                            margin: 0 !important;
                            font-size: 12.2px !important;
                            font-weight: 800 !important;
                            color: #0F172A !important;
                            line-height: 1.1 !important;
                            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
                        }

                        #carouselInner > .slide.slide-portfolio p.b1-catalog-description {
                            margin: 0 !important;
                            color: #0F172A !important;
                            font-size: clamp(10.2px, 0.76vw, 11.4px) !important;
                            font-weight: 700 !important;
                            line-height: 1.2 !important;
                            white-space: nowrap !important;
                            overflow: hidden !important;
                            text-overflow: ellipsis !important;
                            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95) !important;
                        }

                        /* BLOQUES LATERALES DEBAJO DE CADA PROTAGONISTA: PARA CLIENTES | PARA PROVEEDORES */
                        #carouselInner > .slide.slide-portfolio .b1-audience-item {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            text-align: left;
                            min-width: 0;
                            width: 100%;
                            cursor: pointer;
                            padding: 7px 14px;
                            border-radius: 12px;
                            background: rgba(255, 255, 255, 0.96);
                            border: 1.5px solid #CBD5E1;
                            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
                            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-audience-item:hover {
                            transform: translateY(-2px);
                            border-color: #0284C7;
                            box-shadow: 0 10px 24px rgba(2, 132, 199, 0.16);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-audience-item.right {
                            justify-self: end;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-audience-symbol {
                            width: 34px;
                            height: 34px;
                            flex: 0 0 34px;
                            display: grid;
                            place-items: center;
                            color: #0284C7;
                            filter: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-audience-symbol svg {
                            width: 30px;
                            height: 30px;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-audience-item h2 {
                            margin: 0 0 1px !important;
                            font-size: clamp(13px, 1.05vw, 15px) !important;
                            font-weight: 900 !important;
                            letter-spacing: 0.3px !important;
                            color: #0F172A !important;
                            line-height: 1.12 !important;
                            text-shadow: none !important;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-audience-item h2 span {
                            color: #0284C7;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-audience-item p {
                            margin: 0 !important;
                            color: #475569 !important;
                            font-size: 11px !important;
                            line-height: 1.22 !important;
                            max-width: none !important;
                            text-shadow: none !important;
                        }

                        /* FILA LIMPIA DEL BOTÓN CENTRAL PRE-REGÍSTRATE */
                        #carouselInner > .slide.slide-portfolio .b1-conversion-row {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            margin: 3px auto 3px;
                            padding: 2px 8px;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-cta {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            gap: 10px;
                            min-height: 44px;
                            padding: 10px 28px;
                            border: 1.5px solid rgba(147, 197, 253, 0.85) !important;
                            border-radius: 999px;
                            color: #FFFFFF !important;
                            background-image: var(--iconi-prebtn-bg-normal) !important;
                            background-size: 100% 100%, 100% 100%, 100% 100% !important;
                            background-position: center !important;
                            background-repeat: no-repeat !important;
                            box-shadow: inset 0 2px 1px rgba(224, 242, 254, 0.82), inset 0 -2px 2px rgba(2, 54, 122, 0.45), 0 6px 16px rgba(2, 132, 199, 0.28) !important;
                            text-shadow: 0 1px 3px rgba(1, 8, 24, 0.55) !important;
                            font-size: clamp(12.5px, 1.08vw, 15px);
                            font-weight: 900;
                            letter-spacing: 0.6px;
                            text-align: center;
                            text-decoration: none;
                            overflow: hidden;
                            transition: transform 0.22s ease, background-image 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
                            white-space: nowrap;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-cta:hover,
                        #carouselInner > .slide.slide-portfolio .b1-cta:focus-visible {
                            background-image: var(--iconi-prebtn-bg-hover) !important;
                            background-size: 100% 100%, 100% 100%, 100% 100% !important;
                            border-color: rgba(224, 242, 254, 0.96) !important;
                            transform: translateY(-2px);
                            filter: brightness(1.07) saturate(1.08);
                            box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.96), inset 0 -2px 2px rgba(3, 15, 42, 0.45), 0 8px 22px rgba(2, 132, 199, 0.38) !important;
                            text-shadow: 0 1px 4px rgba(1, 8, 24, 0.65) !important;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-cta-arrow {
                            font-size: 17px;
                            line-height: 1;
                        }

                        /* BLOQUE INFERIOR: 7 ÍTEMS DE CONFIANZA EQUIDISTANTES ENTRE EL BOTÓN PRE-REGÍSTRATE Y LOS PUNTOS DEL CARRUSEL */
                        #carouselInner > .slide.slide-portfolio .b1-bottom {
                            position: relative;
                            z-index: 10;
                            width: 100%;
                            padding-top: 4px;
                            padding-bottom: 42px;
                            background: transparent !important;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-trust-strip {
                            display: grid;
                            grid-template-columns: repeat(7, minmax(0, 1fr));
                            gap: 6px;
                            max-width: 1480px;
                            margin: 0 auto;
                            padding: 7px 18px;
                            border-top: 1px solid rgba(148, 163, 184, 0.38);
                            border-bottom: 1px solid rgba(148, 163, 184, 0.38);
                            background: rgba(255, 255, 255, 0.75);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-trust-item {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            color: #475569;
                            font-size: 9.6px;
                            line-height: 1.22;
                            text-align: left;
                            border-right: 1px solid #CBD5E1;
                            padding-right: 6px;
                            min-width: 0;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-trust-item:last-child {
                            border-right: none;
                            padding-right: 0;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-trust-item strong {
                            color: #0F172A;
                            display: block;
                            font-weight: 800;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-trust-icon {
                            color: var(--b1-cyan);
                            width: 20px;
                            height: 20px;
                            flex: 0 0 20px;
                            filter: none;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-coverage {
                            max-width: 1480px;
                            margin: 0 auto;
                            padding: 6px 20px 2px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-wrap: wrap;
                            gap: 6px 14px;
                            color: #334155;
                            font-size: 11.5px;
                            font-weight: 700;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-coverage-list {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-wrap: wrap;
                            gap: 6px 18px;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-country,
                        #carouselInner > .slide.slide-portfolio .b1-country span {
                            display: inline-flex;
                            align-items: center;
                            gap: 6px;
                            color: #FFFFFF !important;
                            font-weight: 800;
                            letter-spacing: 0.25px;
                            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
                        }

                        #carouselInner > .slide.slide-portfolio .b1-country-sep {
                            color: rgba(56, 189, 248, 0.65) !important;
                            font-weight: 700;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-flag {
                            width: 22px;
                            height: 15px;
                            object-fit: cover;
                            border-radius: 3px;
                            border: 1px solid rgba(255, 255, 255, 0.65);
                            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
                            display: inline-block;
                        }

                        #carouselInner > .slide.slide-portfolio .b1-latam-icon {
                            width: 15px;
                            height: 15px;
                            color: var(--b1-cyan);
                            flex: 0 0 auto;
                        }

                        /* TABLETA (max-width: 1100px) */
                        @media (max-width: 1100px) {
                            #carouselInner > .slide.slide-portfolio .b1-header {
                                padding: 10px 18px 4px 120px;
                            }
                            #carouselInner > .slide.slide-portfolio .b1-header-tagline {
                                display: none;
                            }
                            #carouselInner > .slide.slide-portfolio .b1-roles-and-free-row {
                                grid-template-columns: 1fr;
                                justify-items: center;
                            }
                            #carouselInner > .slide.slide-portfolio p.b1-description {
                                order: -1;
                            }
                            #carouselInner > .slide.slide-portfolio .b1-catalogs {
                                width: min(92vw, 940px);
                            }
                            #carouselInner > .slide.slide-portfolio .b1-audience-item,
                            #carouselInner > .slide.slide-portfolio .b1-audience-item.right {
                                justify-self: center;
                            }
                            #carouselInner > .slide.slide-portfolio .b1-trust-strip {
                                grid-template-columns: repeat(4, 1fr);
                                gap: 8px;
                            }
                            #carouselInner > .slide.slide-portfolio .b1-trust-item {
                                border-right: none;
                                justify-content: flex-start;
                            }
                        }

/* ===== Bloque de estilos 5/12 (cuerpo) ===== */
                        #videoPosterOverlay {
                            position: absolute;
                            inset: 0;
                            background-image: url('../recursos_website/imagenes_preregistro/portada_video_banner2.jpg?v=20261022_int');
                            background-size: cover;
                            background-position: center;
                            display: grid;
                            grid-template-columns: 1fr;
                            z-index: 15;
                            transition: opacity 0.45s ease, visibility 0.45s ease;
                            overflow: hidden;
                        }
                        .story-split-zone {
                            position: relative;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            transition: background 0.35s ease, opacity 0.35s ease;
                            box-sizing: border-box;
                            padding: 110px 28px 135px 28px;
                        }
                        .story-split-zone::before {
                            content: '';
                            position: absolute;
                            inset: 0;
                            background: linear-gradient(to top, rgba(4, 9, 20, 0.78) 0%, rgba(4, 9, 20, 0.25) 38%, transparent 65%);
                            pointer-events: none;
                            transition: background 0.35s ease;
                        }
                        .story-split-right:hover::before {
                            background: radial-gradient(circle at 50% 48%, rgba(56, 189, 248, 0.16) 0%, transparent 68%),
                                        linear-gradient(to top, rgba(4, 9, 20, 0.84) 0%, rgba(4, 9, 20, 0.2) 42%, transparent 70%);
                        }
                        .story-play-btn {
                            position: relative;
                            z-index: 2;
                            display: inline-flex;
                            align-items: center;
                            gap: 12px;
                            padding: 11px 22px 11px 14px;
                            border-radius: 999px;
                            background: rgba(6, 12, 24, 0.76);
                            backdrop-filter: blur(14px);
                            -webkit-backdrop-filter: blur(14px);
                            color: #FFFFFF;
                            cursor: pointer;
                            transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
                            text-align: left;
                        }
                        .story-play-btn-right {
                            border: 1.5px solid rgba(56, 189, 248, 0.65);
                            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 0 12px rgba(56, 189, 248, 0.15);
                        }
                        .story-split-right:hover .story-play-btn-right {
                            transform: scale(1.05) translateY(-2px);
                            border-color: #38BDF8;
                            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 22px rgba(56, 189, 248, 0.45);
                        }
                        .story-bottom-info {
                            position: absolute;
                            bottom: 184px;
                            left: 24px;
                            right: 24px;
                            z-index: 2;
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                            pointer-events: none;
                        }
                        .story-bottom-right {
                            align-items: center;
                            text-align: center;
                        }
                        @media (max-width: 900px) {
                            .story-bottom-info {
                                bottom: 186px;
                                left: 12px;
                                right: 12px;
                            }
                            .story-play-btn {
                                padding: 9px 16px 9px 11px;
                                gap: 9px;
                            }
                        }

/* ===== Bloque de estilos 6/12 (cuerpo) ===== */
                            #videoSeekbar {
                                -webkit-appearance: none; width: 100%; height: 6px; background: rgba(255, 255, 255, 0.25); border-radius: 5px; outline: none; transition: opacity .2s; cursor: pointer; accent-color: #C5A059; margin: 0; padding: 0;
                            }
                            #videoSeekbar::-webkit-slider-thumb {
                                -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #C5A059; cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.5);
                            }
                            #videoSeekbar::-moz-range-thumb {
                                width: 16px; height: 16px; border-radius: 50%; background: #C5A059; cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.5); border: none;
                            }

/* ===== Bloque de estilos 7/12 (cuerpo) ===== */
                    .slide3-brand-row {
                        position: absolute;
                        top: 30px;
                        left: 0;
                        width: 100%;
                        padding: 0 5%;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        z-index: 30;
                        box-sizing: border-box;
                    }
                    .slide3-brand-left {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        text-align: left;
                        flex: 1;
                    }
                    .slide3-brand-center {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                        flex: 1.2;
                    }
                    .slide3-brand-right {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        text-align: right;
                        flex: 1;
                    }
                    @media (max-width: 820px) {
                        .slide.slide-coming {
                            flex-direction: column !important;
                            justify-content: center !important;
                            align-items: center !important;
                        }
                        .slide3-brand-row {
                            position: absolute !important;
                            top: 74px !important;
                            left: 0 !important;
                            width: 100% !important;
                            padding: 0 10px !important;
                            box-sizing: border-box !important;
                            display: flex !important;
                            flex-direction: row !important;
                            justify-content: space-between !important;
                            align-items: flex-start !important;
                            gap: 4px !important;
                            z-index: 30 !important;
                        }
                        .slide3-brand-left {
                            align-items: flex-start !important;
                            text-align: left !important;
                            flex: 1 !important;
                        }
                        .slide3-brand-center {
                            align-items: center !important;
                            text-align: center !important;
                            flex: 1.15 !important;
                        }
                        .slide3-brand-right {
                            align-items: flex-end !important;
                            text-align: right !important;
                            flex: 1 !important;
                        }
                        .slide3-brand-left .w-900,
                        .slide3-brand-center .w-900,
                        .slide3-brand-right .w-900 {
                            font-size: clamp(14.5px, 4.2vw, 19px) !important;
                            line-height: 1 !important;
                        }
                        .slide3-brand-left > span:last-child,
                        .slide3-brand-center > span:last-child,
                        .slide3-brand-right > span:last-child {
                            font-size: clamp(5.5px, 1.5vw, 7.2px) !important;
                            letter-spacing: 0.6px !important;
                            margin-top: 3px !important;
                        }
                        .slide3-countdown-box {
                            bottom: 126px !important;
                            width: 92vw !important;
                            max-width: 92vw !important;
                            padding: 12px 10px !important;
                        }
                    }
                    .slide3-countdown-box {
                        width: 580px;
                        max-width: 92vw;
                        padding: 18px 25px;
                        background: rgba(9, 14, 26, 0.72);
                        backdrop-filter: blur(18px);
                        -webkit-backdrop-filter: blur(18px);
                        border: 1px solid rgba(226, 232, 240, 0.24);
                        border-radius: 16px;
                        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        position: absolute !important;
                        bottom: 148px !important;
                        left: 50% !important;
                        transform: translateX(-50%) !important;
                        z-index: 20;
                    }
                    .slide3-ht-item {
                        width: clamp(66px, 12vw, 82px) !important;
                        height: clamp(66px, 12vw, 82px) !important;
                        min-width: clamp(66px, 12vw, 82px) !important;
                        border-radius: 12px !important;
                        background: rgba(15, 23, 42, 0.78) !important;
                        border: 1px solid rgba(226, 232, 240, 0.22) !important;
                        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55) !important;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                    }
                    .slide3-ht-item span:first-child {
                        font-size: clamp(30px, 5.5vw, 42px) !important;
                        font-weight: 900 !important;
                        line-height: 1 !important;
                        color: #FFFFFF !important;
                        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
                    }
                    .slide3-ht-item span:last-child {
                        font-size: clamp(9px, 1.2vw, 11px) !important;
                        font-weight: 700 !important;
                        letter-spacing: 1.5px !important;
                        color: #C5A059 !important;
                        text-transform: uppercase !important;
                        margin-top: 4px !important;
                    }

/* ===== Bloque de estilos 8/12 (cuerpo) ===== */
                        /* ============================================================================
                           3D STAGE: ANIMATED REAR PALETTES ("PALETAS TRASERAS") & 3D CAROUSEL CARDS
                           ============================================================================ */
                        .plans-3d-stage-wrap {
                            position: relative;
                            width: 100%;
                            max-width: 1360px;
                            margin: 0 auto;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            z-index: 25;
                            /* Flat stacking context so rear-palettes (z-index:1) NEVER intersect card planes (z-index:20) */
                            transform-style: flat !important;
                            isolation: isolate;
                            padding: 4px 14px 0 14px;
                            box-sizing: border-box;
                            overflow: visible !important;
                        }

                        /* --- Animated 3D Rear Palettes (Paletas Traseras con Rotación 3D, siempre detrás de las tarjetas) --- */
                        .rear-palettes-3d {
                            position: absolute;
                            top: -14px;
                            left: 0;
                            right: 0;
                            height: 318px;
                            pointer-events: none !important;
                            z-index: 1 !important;
                            isolation: isolate;
                            perspective: 1400px;
                            transform-style: preserve-3d;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0 2.5%;
                        }
                        .rear-palette-monolith {
                            position: relative;
                            width: clamp(210px, 19.5vw, 280px);
                            height: 100%;
                            border-radius: 22px;
                            background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(15, 23, 42, 0.42) 45%, rgba(5, 8, 16, 0.76) 100%);
                            border: 1.5px solid rgba(148, 163, 184, 0.30);
                            overflow: hidden;
                            transform-style: preserve-3d;
                            translate: 0px;
                            rotate: 0deg;
                            scale: 1;
                            transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
                        }
                        /* Sober architectural rear palettes (neon spinning beams disabled) */
                        .rear-palette-monolith::before {
                            display: none !important;
                        }
                        .rear-palette-monolith::after {
                            content: '';
                            position: absolute;
                            inset: 2px;
                            border-radius: 20px;
                            background: linear-gradient(180deg, rgba(11, 16, 28, 0.92) 0%, rgba(6, 9, 17, 0.97) 100%);
                            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
                        }
                        .rear-palette-inner-grid {
                            position: absolute;
                            inset: 12px;
                            border-radius: 14px;
                            border: 1px solid rgba(255, 255, 255, 0.06);
                            z-index: 2;
                            background: radial-gradient(circle at 50% 25%, rgba(148, 163, 184, 0.06), transparent 70%);
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            padding: 14px;
                        }
                        .rear-palette-inner-grid::before,
                        .rear-palette-inner-grid::after {
                            content: '';
                            display: block;
                            height: 1px;
                            width: 65%;
                            margin: 0 auto;
                            border-radius: 4px;
                            background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.35), transparent);
                        }

                        /* Slide 4 Specific Rear Palette Subtle Borders */
                        .rear-palette-monolith.palette-left-s4 {
                            border-color: rgba(148, 163, 184, 0.25);
                            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
                            animation: rearPaletteOrbitLeft 8.5s ease-in-out infinite;
                        }
                        .rear-palette-monolith.palette-right-s4 {
                            border-color: rgba(197, 160, 89, 0.28);
                            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
                            animation: rearPaletteOrbitRight 8.5s ease-in-out infinite;
                        }
                        .rear-palette-monolith.palette-center-s4 {
                            width: clamp(240px, 22vw, 320px);
                            height: calc(100% + 14px);
                            border-color: rgba(56, 189, 248, 0.28);
                            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
                            animation: rearPaletteOrbitCenter 10s ease-in-out infinite;
                        }

                        /* Slide 6 Specific Rear Palette Subtle Borders */
                        .rear-palette-monolith.palette-left-s6 {
                            border-color: rgba(197, 160, 89, 0.28);
                            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
                            animation: rearPaletteOrbitLeft 8.5s ease-in-out infinite;
                        }
                        .rear-palette-monolith.palette-center-s6 {
                            width: clamp(240px, 22vw, 320px);
                            height: calc(100% + 14px);
                            border-color: rgba(197, 160, 89, 0.35);
                            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
                            animation: rearPaletteOrbitCenter 10s ease-in-out infinite;
                        }
                        .rear-palette-monolith.palette-right-s6 {
                            border-color: rgba(226, 232, 240, 0.28);
                            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
                            animation: rearPaletteOrbitRight 8.5s ease-in-out infinite;
                        }

                        /* Reaction of rear palettes when user hovers the card stage */
                        .plans-3d-stage-wrap:hover .rear-palette-monolith {
                            scale: 1.02;
                            border-color: rgba(226, 232, 240, 0.42);
                        }

                        @keyframes rearPaletteBeamSpin {
                            0% { transform: rotate(0deg); }
                            100% { transform: rotate(360deg); }
                        }
                        @keyframes rearPaletteOrbitLeft {
                            0%, 100% {
                                transform: perspective(1000px) translate3d(-18px, -6px, 0px) rotateY(22deg) rotateX(3deg) rotateZ(-3deg);
                            }
                            50% {
                                transform: perspective(1000px) translate3d(6px, 8px, 0px) rotateY(-12deg) rotateX(-4deg) rotateZ(2deg);
                            }
                        }
                        @keyframes rearPaletteOrbitRight {
                            0%, 100% {
                                transform: perspective(1000px) translate3d(18px, -6px, 0px) rotateY(-22deg) rotateX(3deg) rotateZ(3deg);
                            }
                            50% {
                                transform: perspective(1000px) translate3d(-6px, 8px, 0px) rotateY(12deg) rotateX(-4deg) rotateZ(-2deg);
                            }
                        }
                        @keyframes rearPaletteOrbitCenter {
                            0%, 100% {
                                transform: perspective(1000px) translate3d(0px, -5px, 0px) rotateY(-10deg) rotateX(4deg) rotateZ(-1.5deg);
                            }
                            50% {
                                transform: perspective(1000px) translate3d(0px, 6px, 0px) rotateY(10deg) rotateX(-4deg) rotateZ(1.5deg);
                            }
                        }

                        /* --- 3D Interactive Plan Cards Carousel (100% Crisp Vector Text & Instant Hover Zones) --- */
                        .slide4-layout, .slide6-layout {
                            display: flex;
                            flex-direction: column;
                            gap: 16px;
                            width: 100%;
                            max-width: 1340px;
                            margin: 0 auto;
                            align-items: center;
                            font-family: 'Outfit', sans-serif !important;
                            z-index: 20 !important;
                            padding: 0 14px;
                            box-sizing: border-box;
                            position: relative;
                            transform-style: flat !important;
                            isolation: isolate;
                        }
                        .slide4-center, .slide6-center { order: 1; width: 100%; max-width: 500px; }
                        .slide4-left, .slide4-right, .slide6-left, .slide6-right { order: 2; width: 100%; max-width: 460px; }

                        /* Base card identity transforms — NO filter/will-change bitmap blur */
                        .carousel-3d-card {
                            position: relative;
                            cursor: pointer;
                            user-select: none;
                            translate: 0px;
                            rotate: 0deg;
                            scale: 1;
                            transform-style: flat;
                            backface-visibility: hidden;
                            -webkit-font-smoothing: antialiased;
                            text-rendering: geometricPrecision;
                            filter: none !important;
                            backdrop-filter: none !important;
                            -webkit-backdrop-filter: none !important;
                            transition:
                                transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                                box-shadow 0.22s ease,
                                opacity 0.22s ease,
                                border-color 0.22s ease !important;
                        }
                        /* Disable milky glare overlay over text so typography remains 100% sharp */
                        .carousel-3d-card::after {
                            display: none !important;
                        }

                        /* Centered, high-contrast feature pills without left-side checkmarks */
                        .plan-perk-list {
                            list-style: none;
                            padding: 0;
                            margin: 6px 0 0 0;
                            display: flex;
                            flex-direction: column;
                            gap: 5px;
                            width: 100%;
                            text-align: center;
                        }
                        .plan-perk-list li {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            gap: 1px;
                            font-size: clamp(11.5px, 1.15vw, 13.5px);
                            font-weight: 800;
                            color: #FFFFFF;
                            background: rgba(255, 255, 255, 0.065);
                            padding: 6px 12px;
                            border-radius: 10px;
                            border: 1px solid rgba(255, 255, 255, 0.14);
                            text-align: center !important;
                            line-height: 1.24;
                            letter-spacing: 0.2px;
                            transition: background 0.2s ease, border-color 0.2s ease;
                        }
                        .plan-perk-list li > i.fa-check {
                            display: none !important;
                        }
                        .carousel-3d-card:hover .plan-perk-list li,
                        .carousel-3d-card.is-active-hover .plan-perk-list li {
                            background: rgba(255, 255, 255, 0.11);
                        }

                        @media (min-width: 992px) {
                            .slide4-layout, .slide6-layout {
                                display: grid !important;
                                grid-template-columns: 1fr !important;
                                place-items: center !important;
                                min-height: 298px;
                                padding: 4px 0 !important;
                            }
                            .slide4-layout > .carousel-3d-card,
                            .slide6-layout > .carousel-3d-card {
                                grid-area: 1 / 1 !important;
                                width: min(400px, 29.8vw) !important;
                                max-width: 414px !important;
                                min-height: 294px !important;
                                margin: 0 !important;
                            }

                            /* 3D Carousel Slot Postures — Contiguous coverage so exiting Center immediately enters Left or Right */
                            .carousel-3d-card[data-slot="center"] {
                                transform: perspective(1350px) translate3d(0px, -2px, 0px) rotateY(0deg) rotateZ(0deg);
                                z-index: 35;
                                opacity: 1;
                            }
                            .carousel-3d-card[data-slot="left"] {
                                transform: perspective(1350px) translate3d(-94%, 6px, 0px) rotateY(16deg) rotateZ(-1deg) scale(0.94);
                                z-index: 20;
                                opacity: 0.93;
                            }
                            .carousel-3d-card[data-slot="right"] {
                                transform: perspective(1350px) translate3d(94%, 6px, 0px) rotateY(-16deg) rotateZ(1deg) scale(0.94);
                                z-index: 20;
                                opacity: 0.93;
                            }

                            /* Instant, Crisp Highlight when Hovered or in Active Coverage Zone (.is-active-hover) */
                            .carousel-3d-card[data-slot="center"]:hover,
                            .carousel-3d-card[data-slot="center"].is-active-hover {
                                transform: perspective(1350px) translate3d(0px, -12px, 0px) rotateY(0deg) rotateZ(0deg) scale(1.15) !important;
                                z-index: 80 !important;
                                opacity: 1 !important;
                            }
                            .carousel-3d-card[data-slot="left"]:hover,
                            .carousel-3d-card[data-slot="left"].is-active-hover {
                                transform: perspective(1350px) translate3d(-94%, -10px, 0px) rotateY(0deg) rotateZ(0deg) scale(1.15) !important;
                                z-index: 80 !important;
                                opacity: 1 !important;
                            }
                            .carousel-3d-card[data-slot="right"]:hover,
                            .carousel-3d-card[data-slot="right"].is-active-hover {
                                transform: perspective(1350px) translate3d(94%, -10px, 0px) rotateY(0deg) rotateZ(0deg) scale(1.15) !important;
                                z-index: 80 !important;
                                opacity: 1 !important;
                            }

                            /* Subtle dimming of non-active cards while a sibling is actively hovered (without shrinking hit areas!) */
                            .slide4-layout.has-hover-card .carousel-3d-card:not(.is-active-hover),
                            .slide6-layout.has-hover-card .carousel-3d-card:not(.is-active-hover) {
                                opacity: 0.82 !important;
                            }
                        }

                        /* Sober Executive Elevation on Hovered Plan Cards (Banner 4 & Banner 6) */
                        .slide4-left:hover, .slide4-left.is-active-hover {
                            box-shadow: 0 22px 52px rgba(0, 0, 0, 0.92), 0 0 24px rgba(148, 163, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
                        }
                        .slide4-center:hover, .slide4-center.is-active-hover {
                            box-shadow: 0 22px 52px rgba(0, 0, 0, 0.92), 0 0 28px rgba(56, 189, 248, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
                        }
                        .slide4-right:hover, .slide4-right.is-active-hover {
                            box-shadow: 0 22px 52px rgba(0, 0, 0, 0.92), 0 0 26px rgba(197, 160, 89, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
                        }
                        .slide6-left:hover, .slide6-left.is-active-hover {
                            box-shadow: 0 22px 52px rgba(0, 0, 0, 0.92), 0 0 26px rgba(197, 160, 89, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
                        }
                        .slide6-center:hover, .slide6-center.is-active-hover {
                            box-shadow: 0 22px 52px rgba(0, 0, 0, 0.92), 0 0 28px rgba(197, 160, 89, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
                        }
                        .slide6-right:hover, .slide6-right.is-active-hover {
                            box-shadow: 0 22px 52px rgba(0, 0, 0, 0.92), 0 0 26px rgba(226, 232, 240, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
                        }

                        /* Interactive 3D Carousel Orbit Bar — Centrado en el espacio entre las tarjetas y el dock inferior */
                        .carousel-orbit-controls {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            gap: 10px;
                            margin: 22px auto 6px auto;
                            padding: 2px 0;
                            background: transparent;
                            border: none;
                            z-index: 40;
                        }
                        .orbit-btn {
                            background: linear-gradient(135deg, rgba(14, 116, 144, 0.45), rgba(56, 189, 248, 0.25));
                            border: 1.5px solid #38BDF8;
                            color: #FFFFFF;
                            width: 48px;
                            height: 28px;
                            border-radius: 999px;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 13px;
                            cursor: pointer;
                            transition: all 0.25s ease;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.35);
                            flex-shrink: 0;
                        }
                        #slide6StageWrap .orbit-btn {
                            background: linear-gradient(135deg, rgba(180, 83, 9, 0.45), rgba(250, 204, 21, 0.25));
                            border-color: #FACC15;
                            color: #FEF08A;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 12px rgba(250, 204, 21, 0.35);
                        }
                        .orbit-btn:hover {
                            background: #38BDF8;
                            color: #000;
                            border-color: #FFF;
                            scale: 1.1;
                        }
                        #slide6StageWrap .orbit-btn:hover {
                            background: #FACC15;
                            color: #000;
                            border-color: #FFF;
                            scale: 1.1;
                        }
                        .orbit-pill-label {
                            font-size: 10.5px;
                            font-weight: 900;
                            letter-spacing: 1px;
                            color: #FFFFFF;
                            text-transform: uppercase;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            padding: 5px 16px;
                            border-radius: 999px;
                            background: rgba(12, 20, 38, 0.95);
                            border: 1.5px solid rgba(56, 189, 248, 0.55);
                            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
                            white-space: nowrap;
                        }
                        #slide6StageWrap .orbit-pill-label {
                            border-color: rgba(250, 204, 21, 0.55);
                        }
                        .orbit-pill-label i {
                            color: #38BDF8;
                            animation: rearPaletteBeamSpin 4s linear infinite;
                        }

                        /* Luxury 3-Capsule Inclusion & Payment Dock — Elevado y más amplio verticalmente (~1 cm adicional) para lectura cómoda */
                        .fintech-inclusion-dock {
                            position: relative !important;
                            bottom: auto !important;
                            left: auto !important;
                            transform: none !important;
                            max-width: 1290px;
                            width: 94.5%;
                            min-height: 98px;
                            margin: -8px auto 12px auto !important;
                            padding: 15px 22px;
                            background: linear-gradient(180deg, rgba(15, 20, 32, 0.95) 0%, rgba(8, 11, 19, 0.98) 100%);
                            border: 1.5px solid rgba(148, 163, 184, 0.42);
                            border-radius: 16px;
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            align-items: stretch;
                            gap: 14px;
                            box-shadow: 0 14px 35px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.15);
                            z-index: 45;
                            box-sizing: border-box;
                            flex-shrink: 0;
                        }
                        .inclusion-capsule {
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 10px 16px;
                            border-radius: 12px;
                            background: rgba(255, 255, 255, 0.03);
                            border-right: 1px solid rgba(255, 255, 255, 0.10);
                            text-align: left;
                            translate: 0px;
                            scale: 1;
                            transition: scale 0.25s ease, background 0.25s ease;
                        }
                        .inclusion-capsule:hover {
                            background: rgba(255, 255, 255, 0.07);
                            scale: 1.02;
                        }
                        .inclusion-capsule:last-child {
                            border-right: none;
                        }
                        .inclusion-capsule-icon {
                            width: 38px;
                            height: 38px;
                            border-radius: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 17px;
                            flex-shrink: 0;
                        }
                        .inclusion-capsule-body {
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                            min-width: 0;
                        }
                        .inclusion-capsule-title {
                            font-size: clamp(11.4px, 1.12vw, 13.8px);
                            font-weight: 900;
                            text-transform: uppercase;
                            letter-spacing: 0.8px;
                            line-height: 1.22;
                        }
                        .inclusion-capsule-desc {
                            font-size: clamp(11.8px, 1.18vw, 14.5px);
                            font-weight: 600;
                            color: #E2E8F0;
                            line-height: 1.34;
                        }
                        @media (max-width: 991px) {
                            .rear-palettes-3d, .carousel-orbit-controls { display: none !important; }
                            .slide-fintech .slide-content { padding-bottom: 40px !important; }
                            .carousel-3d-card:hover { scale: 1.03 !important; }
                            .fintech-inclusion-dock {
                                position: static !important;
                                transform: none !important;
                                grid-template-columns: 1fr !important;
                                margin: 16px auto 95px auto !important;
                                width: 94% !important;
                            }
                            .inclusion-capsule {
                                border-right: none !important;
                                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                            }
                        }
                        
                        .ribbon-badge {
                            position: absolute !important;
                            bottom: -15px;
                            right: -25px;
                            background: linear-gradient(90deg, #F59E0B, #DC2626);
                            color: #FFF !important;
                            -webkit-text-fill-color: #FFF !important;
                            font-weight: 900;
                            font-size: clamp(14px, 2vw, 18px);
                            padding: 4px 18px 4px 12px;
                            transform: rotate(12deg);
                            clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%);
                            letter-spacing: 2px;
                            z-index: 10;
                            border: none !important;
                            box-shadow: none !important;
                            font-family: 'Outfit', sans-serif !important;
                        }

/* ===== Bloque de estilos 9/12 (cuerpo) ===== */
            .hero-arrow {
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                background: rgba(0, 0, 0, 0.6) !important;
                color: #FFFFFF !important;
                border: 2px solid rgba(255, 255, 255, 0.4) !important;
                border-radius: 50% !important;
                width: 52px !important;
                height: 52px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                font-size: 22px !important;
                cursor: pointer !important;
                z-index: 150 !important;
                transition: all 0.3s ease !important;
                backdrop-filter: blur(8px) !important;
                box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6) !important;
                outline: none !important;
            }
            .hero-arrow:hover {
                background: var(--oro-sagrado, #D4AF37) !important;
                color: #000000 !important;
                border-color: #FFFFFF !important;
                transform: translateY(-50%) scale(1.12) !important;
                box-shadow: 0 0 25px rgba(212, 175, 55, 0.85) !important;
            }
            .hero-arrow.prev-slide {
                left: 25px !important;
            }
            .hero-arrow.next-slide {
                right: 25px !important;
            }
            @media (max-width: 768px) {
                .hero-arrow {
                    width: 34px !important;
                    height: 34px !important;
                    font-size: 14px !important;
                    top: 42% !important;
                }
                .hero-arrow.prev-slide { left: 6px !important; }
                .hero-arrow.next-slide { right: 6px !important; }

                /* === SLIDE 2: SPLIT STORIES (#videoPosterOverlay) & VIDEO PLAYER — MOBILE REDESIGN === */
                #heroVideo::-internal-media-controls-overlay-cast-button {
                    display: none !important;
                }
                .slide-fintech > .slide-content.fintech-video-container {
                    padding: 108px 10px 0 10px !important;
                    justify-content: flex-start !important;
                    align-items: center !important;
                }
                #heroVideo {
                    width: 100% !important;
                    height: auto !important;
                    max-height: 36vh !important;
                    aspect-ratio: 16 / 9 !important;
                    object-fit: contain !important;
                    object-position: center top !important;
                    border-radius: 14px !important;
                    background-color: #030712 !important;
                    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75) !important;
                    border: 1px solid rgba(56, 189, 248, 0.28) !important;
                    margin: 2px auto 0 auto !important;
                }
                #videoFloatingControls {
                    position: absolute !important;
                    right: auto !important;
                    left: 50% !important;
                    transform: translateX(-50%) !important;
                    bottom: 166px !important;
                    display: flex !important;
                    flex-direction: row !important;
                    align-items: center !important;
                    justify-content: center !important;
                    gap: 14px !important;
                    width: auto !important;
                    padding: 6px 14px !important;
                    border-radius: 999px !important;
                    background: rgba(6, 12, 24, 0.78) !important;
                    border: 1px solid rgba(148, 163, 184, 0.32) !important;
                    backdrop-filter: blur(12px) !important;
                    -webkit-backdrop-filter: blur(12px) !important;
                    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65) !important;
                    z-index: 25 !important;
                }
                #videoFloatingControls button {
                    width: 42px !important;
                    height: 42px !important;
                    flex-shrink: 0 !important;
                }
                #videoFloatingControls button i {
                    font-size: 17px !important;
                }
                #videoFloatingControls button svg {
                    width: 18px !important;
                    height: 18px !important;
                }
                #videoPosterOverlay {
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: space-between !important;
                    gap: 6px !important;
                    padding: 70px 10px 162px 10px !important;
                    background-image: none !important;
                    background-color: #030814 !important;
                    box-sizing: border-box !important;
                }
                /* Logo ICONIAPP / ELEVATING LIFESTYLE en 2 renglones arriba a la izquierda (igual al estilo del Banner 3) */
                #videoPosterOverlay > div:first-child {
                    position: absolute !important;
                    top: 84px !important;
                    left: 24px !important;
                    right: auto !important;
                    transform: none !important;
                    z-index: 10 !important;
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: flex-start !important;
                    justify-content: flex-start !important;
                    text-align: left !important;
                    gap: 0 !important;
                    width: auto !important;
                    white-space: nowrap !important;
                }
                #videoPosterOverlay > div:first-child > div {
                    font-size: clamp(20px, 5.6vw, 24px) !important;
                    font-weight: 900 !important;
                    line-height: 0.95 !important;
                    letter-spacing: -0.4px !important;
                }
                #videoPosterOverlay > div:first-child > span {
                    font-size: clamp(7.5px, 2vw, 9px) !important;
                    font-weight: 600 !important;
                    letter-spacing: 2.2px !important;
                    margin-top: 4px !important;
                    color: #FFFFFF !important;
                }
                .story-split-zone {
                    flex: 1 1 100% !important;
                    width: 100% !important;
                    min-height: 0 !important;
                    padding: 12px 14px 14px 14px !important;
                    border-radius: 16px !important;
                    overflow: hidden !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: flex-end !important;
                    align-items: flex-start !important;
                    box-sizing: border-box !important;
                    background-image: url('../recursos_website/imagenes_preregistro/portada_video_banner2.jpg?v=20261022_int') !important;
                    background-repeat: no-repeat !important;
                }
                .story-split-right {
                    border: 1.5px solid rgba(56, 189, 248, 0.65) !important;
                    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 14px rgba(56, 189, 248, 0.2) !important;
                    background-size: cover !important;
                    background-position: 28% center !important;
                }
                .story-split-zone::before {
                    background: linear-gradient(
                        to bottom,
                        rgba(4, 9, 20, 0.62) 0%,
                        rgba(4, 9, 20, 0.08) 28%,
                        rgba(4, 9, 20, 0.72) 72%,
                        rgba(4, 9, 20, 0.94) 100%
                    ) !important;
                }
                /* Botón VER HISTORIA • DESDE EL EXTERIOR en todo el centro de la portada */
                .story-bottom-info {
                    display: contents !important;
                }
                .story-play-btn {
                    position: absolute !important;
                    top: 47% !important;
                    left: 50% !important;
                    transform: translate(-50%, -50%) !important;
                    margin: 0 !important;
                    padding: 7px 15px 7px 9px !important;
                    gap: 9px !important;
                    border-width: 1.5px !important;
                    background: rgba(6, 12, 24, 0.88) !important;
                    z-index: 5 !important;
                    white-space: nowrap !important;
                }
                .story-play-btn > span:first-child {
                    width: 32px !important;
                    height: 32px !important;
                }
                .story-play-btn > span:first-child i {
                    font-size: 12px !important;
                }
                .story-play-btn > span:last-child > span:first-child {
                    font-size: 11px !important;
                    letter-spacing: 0.8px !important;
                }
                .story-play-btn > span:last-child > span:last-child {
                    font-size: 9px !important;
                    letter-spacing: 0.6px !important;
                }
                .story-bottom-info > div:first-child {
                    order: 2 !important;
                    align-self: flex-start !important;
                    margin-top: auto !important;
                    margin-bottom: 3px !important;
                    white-space: nowrap !important;
                    font-size: clamp(16px, 4.7vw, 20px) !important;
                    font-weight: 900 !important;
                    letter-spacing: -0.4px !important;
                    padding: 0 !important;
                    line-height: 1 !important;
                    border-radius: 0 !important;
                    max-width: 100% !important;
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                    z-index: 2 !important;
                }
                .story-bottom-info > div:last-child {
                    order: 3 !important;
                    align-self: flex-start !important;
                    text-align: left !important;
                    width: 100% !important;
                    z-index: 2 !important;
                }
                .story-bottom-info > div:last-child div {
                    white-space: normal !important;
                    font-size: clamp(9.2px, 2.5vw, 10.8px) !important;
                    font-weight: 800 !important;
                    letter-spacing: 0.6px !important;
                    text-transform: uppercase !important;
                    line-height: 1.2 !important;
                }
                #videoBottomBarWrap,
                #videoPosterOverlay + div {
                    bottom: 96px !important;
                    width: 94% !important;
                    gap: 13px !important;
                }
                #videoSeekbar + div {
                    white-space: normal !important;
                    overflow: visible !important;
                    text-overflow: clip !important;
                    font-size: 8.2px !important;
                    line-height: 1.22 !important;
                    padding: 4px 10px !important;
                    border-radius: 10px !important;
                }
                #activeStoryTopBar {
                    top: 68px !important;
                    left: 12px !important;
                    right: auto !important;
                    gap: 6px !important;
                    flex-wrap: wrap !important;
                    z-index: 26 !important;
                }

                /* === SLIDES 4 & 6: ICONIAPP & ICONIPRO PLANS — MOBILE FIX === */
                #carouselInner > .slide:nth-child(4) > .slide-content,
                #carouselInner > .slide:nth-child(6) > .slide-content {
                    padding-top: 72px !important;
                    padding-bottom: 94px !important;
                    justify-content: space-between !important;
                    gap: 2px !important;
                    overflow: hidden !important;
                }
                .fintech-title-v3 {
                    margin-bottom: 0px !important;
                    margin-top: 0px !important;
                }
                .fintech-title-v3 .w-900 {
                    font-size: clamp(26px, 7vw, 33px) !important;
                }
                .fintech-title-v3 > span:nth-child(2) {
                    font-size: 8.5px !important;
                    letter-spacing: 2.8px !important;
                    margin-top: 2px !important;
                }
                /* Textos de Protección Base 100% y Respaldo 100% limpios fuera de contenedor */
                .unified-quality-pill {
                    margin-top: 3px !important;
                    padding: 1px 4px !important;
                    border-radius: 0 !important;
                    width: 100% !important;
                    max-width: 356px !important;
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                    backdrop-filter: none !important;
                    -webkit-backdrop-filter: none !important;
                    box-sizing: border-box !important;
                    justify-content: center !important;
                }
                .unified-quality-pill .uqp-desktop-icon,
                .unified-quality-pill .uqp-sep {
                    display: none !important;
                }
                .unified-quality-pill .uqp-mobile-icon {
                    display: inline-block !important;
                    font-size: 10px !important;
                }
                .unified-quality-pill .uqp-text-wrap {
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    gap: 1.5px !important;
                    width: 100% !important;
                }
                .unified-quality-pill .uqp-line {
                    display: block !important;
                    width: 100% !important;
                    text-align: center !important;
                    line-height: 1.2 !important;
                    white-space: nowrap !important;
                }
                .unified-quality-pill .uqp-line-1 {
                    font-size: 10px !important;
                    font-weight: 900 !important;
                    color: #FFFFFF !important;
                    letter-spacing: 0.6px !important;
                }
                .unified-quality-pill .uqp-line-2 {
                    font-size: 9.6px !important;
                    font-weight: 800 !important;
                    letter-spacing: 0.7px !important;
                }
                .unified-quality-pill .uqp-line-3 {
                    font-size: 9.2px !important;
                    font-weight: 700 !important;
                    color: #E2E8F0 !important;
                    letter-spacing: 0.5px !important;
                }
                /* Show 1 active plan card at a time on mobile with interactive switcher & ZERO vertical shift */
                .plans-3d-stage-wrap {
                    width: 100% !important;
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    padding: 0 10px !important;
                    margin: 0 auto !important;
                }
                .slide4-layout, .slide6-layout {
                    padding: 0 !important;
                    gap: 0 !important;
                    height: 224px !important;
                    min-height: 224px !important;
                    max-height: 224px !important;
                    width: 100% !important;
                    display: flex !important;
                    align-items: stretch !important;
                    justify-content: center !important;
                }
                .slide4-layout > .carousel-3d-card:not([data-slot="center"]),
                .slide6-layout > .carousel-3d-card:not([data-slot="center"]) {
                    display: none !important;
                }
                .slide4-layout > .carousel-3d-card[data-slot="center"],
                .slide6-layout > .carousel-3d-card[data-slot="center"] {
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: space-between !important;
                    width: 100% !important;
                    max-width: 356px !important;
                    height: 224px !important;
                    min-height: 224px !important;
                    max-height: 224px !important;
                    padding: 7px 12px !important;
                    gap: 2px !important;
                    margin: 0 auto !important;
                    box-sizing: border-box !important;
                    transform: none !important;
                    scale: 1 !important;
                    overflow: hidden !important;
                }
                /* Unificar tamaños de cabeceras y píldoras en Banner 4 y Banner 6 para que todo encaje dentro del recuadro sin desbordes ni desplazamientos */
                .slide4-center > div:first-child > div:first-child,
                .slide6-center > div:first-child > div:first-child {
                    margin-bottom: 2px !important;
                    gap: 1px !important;
                    white-space: nowrap !important;
                }
                .slide4-center > div:first-child > div:first-child > span:first-child,
                .slide6-center > div:first-child > div:first-child > span:first-child {
                    font-size: 19px !important;
                    line-height: 1.02 !important;
                }
                .slide4-center > div:first-child > div:first-child > span:last-child,
                .slide6-center > div:first-child > div:first-child > span:last-child {
                    font-size: 9.8px !important;
                    line-height: 1.05 !important;
                }
                /* Destacado central de PLAN FREE y SOCIO FREE sin contenedor: 2 renglones grandes y llamativos */
                .slide4-center > div:first-child > div:last-child,
                .slide6-center > div:first-child > div:last-child {
                    margin: 2px auto !important;
                    padding: 2px 0 !important;
                    width: 100% !important;
                    min-height: 38px !important;
                    max-height: 40px !important;
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                    box-sizing: border-box !important;
                }
                .slide4-center > div:first-child > div:last-child > span:first-child,
                .slide6-center > div:first-child > div:last-child > span:first-child {
                    font-size: 14.8px !important;
                    font-weight: 950 !important;
                    letter-spacing: 0.6px !important;
                    line-height: 1.12 !important;
                    white-space: nowrap !important;
                }
                .slide4-center > div:first-child > div:last-child > span:last-child,
                .slide6-center > div:first-child > div:last-child > span:last-child {
                    font-size: 12px !important;
                    font-weight: 900 !important;
                    letter-spacing: 0.5px !important;
                    line-height: 1.15 !important;
                    white-space: nowrap !important;
                }
                /* Cabeceras y destacados sin contenedor de planes pagos (PRIME, MAX, GOLD, ELITE) */
                .slide4-left > div:first-child > div:nth-child(1),
                .slide4-right > div:first-child > div:nth-child(1),
                .slide6-left > div:first-child > div:nth-child(1),
                .slide6-right > div:first-child > div:nth-child(1) {
                    margin-bottom: 1px !important;
                }
                .slide4-left > div:first-child > div:nth-child(1) > span:first-child,
                .slide4-right > div:first-child > div:nth-child(1) > span:first-child,
                .slide6-left > div:first-child > div:nth-child(1) > span:first-child,
                .slide6-right > div:first-child > div:nth-child(1) > span:first-child {
                    font-size: 21px !important;
                    line-height: 1 !important;
                }
                .slide4-left > div:first-child > div:nth-child(1) > span:last-child,
                .slide4-right > div:first-child > div:nth-child(1) > span:last-child,
                .slide6-left > div:first-child > div:nth-child(1) > span:last-child,
                .slide6-right > div:first-child > div:nth-child(1) > span:last-child {
                    font-size: 13.5px !important;
                    line-height: 1 !important;
                }
                .slide4-left > div:first-child > div:nth-child(2),
                .slide4-right > div:first-child > div:nth-child(2),
                .slide6-left > div:first-child > div:nth-child(2),
                .slide6-right > div:first-child > div:nth-child(2) {
                    font-size: 12px !important;
                    margin: 1px 0 2px 0 !important;
                    line-height: 1.1 !important;
                }
                .slide4-left > div:first-child > div:nth-child(3),
                .slide4-right > div:first-child > div:nth-child(3),
                .slide6-left > div:first-child > div:nth-child(3),
                .slide6-right > div:first-child > div:nth-child(3) {
                    padding: 2px 0 !important;
                    margin: 2px auto !important;
                    min-height: 36px !important;
                    max-height: 38px !important;
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                    box-sizing: border-box !important;
                }
                .slide4-left > div:first-child > div:nth-child(3) > span:first-child,
                .slide4-right > div:first-child > div:nth-child(3) > span:first-child,
                .slide6-left > div:first-child > div:nth-child(3) > span:first-child,
                .slide6-right > div:first-child > div:nth-child(3) > span:first-child {
                    font-size: 22px !important;
                    font-weight: 950 !important;
                }
                .slide4-left > div:first-child > div:nth-child(3) > span:last-child,
                .slide4-right > div:first-child > div:nth-child(3) > span:last-child,
                .slide6-left > div:first-child > div:nth-child(3) > span:last-child,
                .slide6-right > div:first-child > div:nth-child(3) > span:last-child {
                    font-size: 10px !important;
                    line-height: 1.12 !important;
                }
                /* Contenedores de beneficios centrados al ancho de su texto (sin ocupar de esquina a esquina) */
                .plan-perk-list,
                .slide4-center .plan-perk-list,
                .slide6-center .plan-perk-list {
                    margin: 0 !important;
                    gap: 3.5px !important;
                    align-items: center !important;
                    justify-content: center !important;
                    width: 100% !important;
                }
                .plan-perk-list li,
                .slide4-center .plan-perk-list li,
                .slide6-center .plan-perk-list li {
                    width: fit-content !important;
                    max-width: 96% !important;
                    margin: 0 auto !important;
                    padding: 3.5px 12px !important;
                    font-size: 9.6px !important;
                    line-height: 1.18 !important;
                    white-space: nowrap !important;
                    box-sizing: border-box !important;
                }
                /* Barra comparativa inferior de FREE ajustada al ancho de su texto y centrada */
                .slide4-center > div:last-child,
                .slide6-center > div:last-child {
                    padding: 3.5px 12px !important;
                    margin: 0 auto !important;
                    width: fit-content !important;
                    max-width: 98% !important;
                    justify-content: center !important;
                    gap: 7px !important;
                    height: 22px !important;
                    box-sizing: border-box !important;
                }
                .slide4-center > div:last-child span,
                .slide6-center > div:last-child span {
                    font-size: 9.2px !important;
                    white-space: nowrap !important;
                }
                /* Flechas afuera de la píldora central y más grandes horizontalmente */
                .carousel-orbit-controls {
                    display: inline-flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    width: 100% !important;
                    max-width: 356px !important;
                    box-sizing: border-box !important;
                    margin-top: 4px !important;
                    padding: 2px 0 !important;
                    gap: 10px !important;
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                }
                .orbit-btn {
                    width: 54px !important;
                    height: 28px !important;
                    border-radius: 999px !important;
                    font-size: 13px !important;
                    background: linear-gradient(135deg, rgba(14, 116, 144, 0.48), rgba(56, 189, 248, 0.28)) !important;
                    border: 1.5px solid #38BDF8 !important;
                    color: #FFFFFF !important;
                    display: inline-flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    flex-shrink: 0 !important;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 12px rgba(56, 189, 248, 0.4) !important;
                }
                #slide6StageWrap .orbit-btn {
                    background: linear-gradient(135deg, rgba(180, 83, 9, 0.48), rgba(250, 204, 21, 0.28)) !important;
                    border-color: #FACC15 !important;
                    color: #FEF08A !important;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 12px rgba(250, 204, 21, 0.4) !important;
                }
                .orbit-pill-label {
                    font-size: 9.4px !important;
                    font-weight: 900 !important;
                    color: #FFFFFF !important;
                    letter-spacing: 0.6px !important;
                    white-space: nowrap !important;
                    padding: 5px 14px !important;
                    border-radius: 999px !important;
                    background: rgba(12, 20, 38, 0.96) !important;
                    border: 1.5px solid rgba(56, 189, 248, 0.65) !important;
                    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75) !important;
                }
                #slide6StageWrap .orbit-pill-label {
                    border-color: rgba(250, 204, 21, 0.65) !important;
                }
                .fintech-inclusion-dock {
                    margin: 0 auto 2px auto !important;
                    padding: 6px 10px !important;
                    gap: 4px !important;
                    width: 94vw !important;
                    max-width: 356px !important;
                    border-radius: 14px !important;
                    grid-template-columns: 1fr !important;
                    border: 1.5px solid rgba(148, 163, 184, 0.45) !important;
                    box-sizing: border-box !important;
                    overflow: hidden !important;
                }
                .inclusion-capsule {
                    padding: 3.5px 6px !important;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
                    justify-content: center !important;
                    text-align: center !important;
                    width: 100% !important;
                    box-sizing: border-box !important;
                }
                .inclusion-capsule:last-child {
                    border-bottom: none !important;
                }
                .inclusion-capsule-body {
                    width: 100% !important;
                    align-items: center !important;
                    justify-content: center !important;
                    text-align: center !important;
                    gap: 2px !important;
                }
                .inclusion-capsule-title {
                    display: flex !important;
                    flex-wrap: wrap !important;
                    align-items: center !important;
                    justify-content: center !important;
                    white-space: normal !important;
                    text-align: center !important;
                    font-size: 9.4px !important;
                    font-weight: 900 !important;
                    letter-spacing: 0.4px !important;
                    line-height: 1.18 !important;
                    gap: 3px !important;
                    width: 100% !important;
                }
                .inclusion-capsule-desc {
                    display: block !important;
                    white-space: normal !important;
                    text-align: center !important;
                    font-size: 9.2px !important;
                    font-weight: 600 !important;
                    color: #F1F5F9 !important;
                    line-height: 1.2 !important;
                    width: 100% !important;
                }

                /* === SLIDE PORTAFOLIO (BANNER 1) & ECOSISTEMA MÓVIL INTEGRAL (MAX-WIDTH: 768PX) === */
                /* 1. Fijar ancho exacto de cada slide en 100% y transición ágil para eliminar desfases laterales en Slides 2-6 */
                .carousel-inner {
                    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1) !important;
                }
                #carouselInner > .slide {
                    flex: 0 0 100% !important;
                    width: 100% !important;
                    min-width: 100% !important;
                    max-width: 100% !important;
                    overflow-x: hidden !important;
                    box-sizing: border-box !important;
                }

                /* 2. Flechas del carrusel en móvil: posición central lateral con parpadeo luminoso y pulso direccional para invitar a descubrir los demás banners */
                @keyframes heroArrowBlinkRight {
                    0%, 100% {
                        transform: translateY(-50%) translateX(0) scale(1);
                        border-color: rgba(125, 211, 252, 0.88);
                        box-shadow: 0 0 12px rgba(56, 189, 248, 0.65), 0 4px 12px rgba(0, 0, 0, 0.75);
                        opacity: 0.92;
                    }
                    50% {
                        transform: translateY(-50%) translateX(3.5px) scale(1.1);
                        border-color: #FFFFFF;
                        box-shadow: 0 0 22px rgba(56, 189, 248, 1), 0 0 32px rgba(14, 165, 233, 0.75), 0 4px 14px rgba(0, 0, 0, 0.85);
                        opacity: 1;
                    }
                }
                @keyframes heroArrowBlinkLeft {
                    0%, 100% {
                        transform: translateY(-50%) translateX(0) scale(1);
                        border-color: rgba(186, 230, 253, 0.72);
                        box-shadow: 0 0 10px rgba(56, 189, 248, 0.45), 0 4px 12px rgba(0, 0, 0, 0.75);
                        opacity: 0.85;
                    }
                    50% {
                        transform: translateY(-50%) translateX(-2.5px) scale(1.06);
                        border-color: #E0F2FE;
                        box-shadow: 0 0 18px rgba(56, 189, 248, 0.85), 0 4px 14px rgba(0, 0, 0, 0.85);
                        opacity: 1;
                    }
                }
                .hero-arrow,
                #hero .hero-arrow {
                    width: 38px !important;
                    height: 38px !important;
                    font-size: 15px !important;
                    top: 238px !important;
                    top: 34.2svh !important;
                    bottom: auto !important;
                    transform: translateY(-50%) !important;
                    background-color: rgba(10, 25, 54, 0.92) !important;
                    border: 1.8px solid rgba(125, 211, 252, 0.88) !important;
                    color: #FFFFFF !important;
                    box-shadow: 0 0 14px rgba(56, 189, 248, 0.7), 0 4px 12px rgba(0, 0, 0, 0.75) !important;
                    z-index: 160 !important;
                }
                .hero-arrow:hover,
                .hero-arrow:active {
                    transform: translateY(-50%) scale(1.12) !important;
                }
                .hero-arrow.prev-slide,
                #hero .hero-arrow.prev-slide {
                    left: 6px !important;
                    right: auto !important;
                    animation: heroArrowBlinkLeft 2.1s ease-in-out infinite !important;
                }
                .hero-arrow.next-slide,
                #hero .hero-arrow.next-slide {
                    right: 6px !important;
                    left: auto !important;
                    animation: heroArrowBlinkRight 1.45s ease-in-out infinite !important;
                }

                /* 3. Rediseño integral de Banner 1 en Móvil (Android + iPhone): distribución equidistante real entre todos los bloques */
                #carouselInner > .slide.slide-portfolio > .slide-content.b1-hero-wrapper {
                    padding: 75px 10px 30px 10px !important;
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    justify-content: space-between !important;
                    gap: 0 !important;
                    overflow: hidden !important;
                    box-sizing: border-box !important;
                    height: 100% !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-header {
                    display: none !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-scene-bg {
                    top: 64px !important;
                    bottom: auto !important;
                    height: 58% !important;
                    opacity: 0.9 !important;
                    z-index: 1 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-scene-img {
                    object-position: 50% 25% !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-scene-overlay {
                    background:
                        radial-gradient(circle at 50% 36%, rgba(235, 242, 250, 0.25) 0%, rgba(235, 242, 250, 0.82) 100%),
                        linear-gradient(180deg, #E8F1FA 0%, transparent 16%, transparent 64%, #EEF5FC 100%) !important;
                }
                /* Aplanar contenedores intermedios para que los 7 bloques visuales se distribuyan equidistantemente con space-between */
                #carouselInner > .slide.slide-portfolio .b1-main-body,
                #carouselInner > .slide.slide-portfolio .b1-hero-top-copy,
                #carouselInner > .slide.slide-portfolio .b1-question-block {
                    display: contents !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-eyebrow,
                #carouselInner > .slide.slide-portfolio .b1-familiar-apps,
                #carouselInner > .slide.slide-portfolio h1.b1-title,
                #carouselInner > .slide.slide-portfolio .b1-desc-and-roles-wrap,
                #carouselInner > .slide.slide-portfolio .b1-conversion-row,
                #carouselInner > .slide.slide-portfolio .b1-bottom,
                #carouselInner > .slide.slide-portfolio .b1-hero-coverage-bar {
                    position: relative !important;
                    z-index: 5 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-eyebrow {
                    font-size: clamp(16.8px, 4.7vw, 20.2px) !important;
                    font-weight: 900 !important;
                    line-height: 1.15 !important;
                    letter-spacing: 0.3px !important;
                    white-space: normal !important;
                    transform: none !important;
                    max-width: 96% !important;
                    width: 100% !important;
                    margin: 0 auto !important;
                    text-align: center !important;
                    color: #0F172A !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-familiar-apps {
                    gap: clamp(8px, 2.2vw, 12px) !important;
                    margin: 0 auto !important;
                    padding: clamp(5.5px, 0.85svh, 7.5px) clamp(14px, 3.8vw, 18px) !important;
                    font-size: clamp(10.4px, 2.85vw, 12px) !important;
                    transform: none !important;
                    max-width: 100% !important;
                    box-sizing: border-box !important;
                    background: rgba(255, 255, 255, 0.95) !important;
                    border: 1.5px solid #94A3B8 !important;
                    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
                    border-radius: 999px !important;
                    width: fit-content !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-familiar-apps svg {
                    width: clamp(13.5px, 3.6vw, 15.5px) !important;
                    height: clamp(13.5px, 3.6vw, 15.5px) !important;
                }
                #carouselInner > .slide.slide-portfolio h1.b1-title {
                    margin: 0 auto 8px auto !important;
                    line-height: 0.94 !important;
                    width: 100% !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-title-brand {
                    font-size: clamp(43px, 11.8vw, 52px) !important;
                    line-height: 0.92 !important;
                    letter-spacing: -1.4px !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-title-middle {
                    font-size: clamp(15.5px, 4.3vw, 18.8px) !important;
                    line-height: 1.12 !important;
                    letter-spacing: 0.7px !important;
                    margin-top: 4px !important;
                    margin-bottom: 2px !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-title-number {
                    font-size: clamp(31px, 8.6vw, 38px) !important;
                    line-height: 0.95 !important;
                    letter-spacing: -0.8px !important;
                    margin-top: 1px !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-desc-and-roles-wrap {
                    width: 100% !important;
                    height: auto !important;
                    flex: 0 0 auto !important;
                    margin: 0 !important;
                    padding-top: 0 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-roles-and-free-row {
                    display: grid !important;
                    grid-template-columns: 1fr 1fr !important;
                    row-gap: clamp(11px, 1.9svh, 17px) !important;
                    column-gap: 10px !important;
                    width: 100% !important;
                    height: auto !important;
                    align-items: stretch !important;
                    margin: 0 !important;
                }
                #carouselInner > .slide.slide-portfolio p.b1-description {
                    grid-column: 1 / -1 !important;
                    order: -1 !important;
                    width: 100% !important;
                    font-size: clamp(11px, 3.02vw, 13px) !important;
                    line-height: 1.35 !important;
                    margin: 0 !important;
                    padding: clamp(7px, 1.05svh, 10px) 10px !important;
                    border-radius: 12px !important;
                    background: rgba(255, 255, 255, 0.94) !important;
                    border: 1.5px solid #CBD5E1 !important;
                    color: #0F172A !important;
                    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07) !important;
                    box-sizing: border-box !important;
                    text-align: center !important;
                    text-shadow: none !important;
                }
                #carouselInner > .slide.slide-portfolio p.b1-description .b1-desc-line {
                    display: contents !important;
                }
                #carouselInner > .slide.slide-portfolio p.b1-description .b1-desc-m-line {
                    display: block !important;
                    white-space: nowrap !important;
                }
                #carouselInner > .slide.slide-portfolio p.b1-description strong.b1-desc-latam {
                    font-size: 1.06em !important;
                    vertical-align: 0 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-roles-and-free-row > .b1-audience-item,
                #carouselInner > .slide.slide-portfolio .b1-audience-item,
                #carouselInner > .slide.slide-portfolio .b1-audience-item.right {
                    align-self: stretch !important;
                    margin-bottom: 0 !important;
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: flex-start !important;
                    justify-content: center !important;
                    text-align: left !important;
                    gap: 2px !important;
                    background: rgba(255, 255, 255, 0.95) !important;
                    border: 1.5px solid #CBD5E1 !important;
                    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07) !important;
                    border-radius: 12px !important;
                    padding: clamp(7.5px, 1.1svh, 10.5px) clamp(9px, 2.5vw, 12px) !important;
                    width: 100% !important;
                    min-width: 0 !important;
                    box-sizing: border-box !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-audience-item.right {
                    border-color: rgba(180, 131, 39, 0.55) !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-audience-symbol {
                    display: none !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-audience-item h2 {
                    font-size: clamp(11.2px, 3.05vw, 13.2px) !important;
                    line-height: 1.14 !important;
                    margin: 0 0 2px 0 !important;
                    letter-spacing: 0.25px !important;
                    color: #0F172A !important;
                    text-shadow: none !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-audience-item p {
                    font-size: clamp(9.8px, 2.65vw, 11.4px) !important;
                    line-height: 1.24 !important;
                    max-width: 100% !important;
                    margin: 0 !important;
                    color: #334155 !important;
                    text-shadow: none !important;
                    text-wrap: normal !important;
                }
                /* Ocultar los 3 catálogos dentro del Banner 1 en móvil (se muestran completos en la sección #catalogos inferior) */
                #carouselInner > .slide.slide-portfolio .b1-catalogs {
                    display: none !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-conversion-row {
                    display: flex !important;
                    justify-content: center !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    flex-shrink: 0 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-cta-wrap {
                    width: 100% !important;
                    margin: 0 !important;
                    padding: 0 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-cta {
                    width: 100% !important;
                    min-height: clamp(41px, 5.6svh, 46px) !important;
                    padding: 8px 16px !important;
                    font-size: clamp(12.2px, 3.3vw, 14px) !important;
                    letter-spacing: 0.7px !important;
                    border-radius: 999px !important;
                    box-sizing: border-box !important;
                    margin: 0 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-bottom {
                    margin-top: 0 !important;
                    padding-top: 0 !important;
                    padding-bottom: 0 !important;
                    width: 100% !important;
                    z-index: 5 !important;
                    flex-shrink: 0 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-trust-strip {
                    display: grid !important;
                    grid-template-columns: auto auto !important;
                    justify-content: center !important;
                    justify-items: start !important;
                    gap: clamp(4px, 0.7svh, 6px) clamp(14px, 4vw, 22px) !important;
                    padding: clamp(6.5px, 1svh, 9.5px) 10px !important;
                    border-radius: 10px !important;
                    width: 100% !important;
                    box-sizing: border-box !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-trust-item {
                    border-right: none !important;
                    justify-content: flex-start !important;
                    text-align: left !important;
                    font-size: clamp(8.8px, 2.42vw, 10.3px) !important;
                    line-height: 1.16 !important;
                    padding-right: 0 !important;
                    gap: 5px !important;
                    width: auto !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-trust-item:nth-child(n+5) {
                    display: none !important;
                }
                /* Franja de banderas dentro del Banner 1 en móvil, en 2 renglones justo encima de los 6 botones del carrusel */
                #carouselInner > .slide.slide-portfolio .b1-hero-coverage-bar {
                    order: 10 !important;
                    width: 100% !important;
                    margin: 0 !important;
                    padding: clamp(4.5px, 0.75svh, 7px) 8px !important;
                    border-radius: 10px !important;
                    background: #040E1E !important;
                    border: 1px solid rgba(56, 189, 248, 0.35) !important;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32) !important;
                    box-sizing: border-box !important;
                    flex-shrink: 0 !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-hero-coverage-bar .b1-coverage-list {
                    gap: 3px 6px !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-hero-coverage-bar .b1-country {
                    font-size: clamp(10px, 2.7vw, 11.5px) !important;
                    gap: 4px !important;
                    color: #F8FAFC !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-hero-coverage-bar .b1-flag {
                    width: 15px !important;
                    height: 11px !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-hero-coverage-bar .b1-latam-icon {
                    width: 14px !important;
                    height: 14px !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-hero-coverage-bar .b1-sep-break-mobile {
                    flex-basis: 100% !important;
                    width: 100% !important;
                    height: 0 !important;
                    font-size: 0 !important;
                    line-height: 0 !important;
                    overflow: hidden !important;
                    opacity: 0 !important;
                }

                /* 4. Ajuste de proporción en Slides 3, 4, 5 y 6 en Móvil */
                #carouselInner > .slide.slide-coming .slide3-countdown-box {
                    bottom: 110px !important;
                    width: 92vw !important;
                    max-width: 92vw !important;
                    padding: 11px 10px !important;
                }
                #carouselInner > .slide:nth-child(4) > .slide-content,
                #carouselInner > .slide:nth-child(6) > .slide-content {
                    padding-top: 72px !important;
                    padding-bottom: 94px !important;
                    justify-content: space-between !important;
                    gap: 2px !important;
                }
                /* Banner 5 (Familia): ICONIAPP / ELEVATING LIFESTYLE arriba de las cabezas de los personajes */
                #carouselInner > .slide.slide-family-banner .fintech-title-v3 {
                    position: absolute !important;
                    top: 74px !important;
                    bottom: auto !important;
                    left: 50% !important;
                    transform: translateX(-50%) !important;
                    align-items: center !important;
                    text-align: center !important;
                    width: 100% !important;
                    margin: 0 !important;
                }
                #carouselInner > .slide.slide-family-banner .banner1-unlock-box,
                #carouselInner > .slide.slide-family-banner .fintech-unlock-box {
                    bottom: 96px !important;
                }

                /* === GLOBAL PRE-REGÍSTRATE BUTTON & DOTS ON MOBILE (SLIDES 2-6) === */
                .global-pre-btn,
                #carouselInner > .slide .global-pre-btn,
                #carouselInner > .slide.slide-family-banner .global-pre-btn {
                    bottom: 44px !important;
                    min-height: 44px !important;
                    padding: 10px 22px !important;
                    font-size: 12.5px !important;
                    letter-spacing: 0.5px !important;
                    border-radius: 999px !important;
                    white-space: nowrap !important;
                }
                #hero .carousel-dots,
                .carousel-dots {
                    bottom: 6px !important;
                    gap: 8px !important;
                    padding: 4px 12px !important;
                    background: rgba(6, 12, 24, 0.86) !important;
                    border: 1px solid rgba(56, 189, 248, 0.5) !important;
                    border-radius: 999px !important;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65) !important;
                }
                #hero .dot,
                .dot {
                    width: 8.5px !important;
                    height: 8.5px !important;
                }
                #hero .dot.active,
                .dot.active {
                    width: 22px !important;
                    border-radius: 999px !important;
                    transform: none !important;
                    background: linear-gradient(90deg, #38BDF8 0%, #007AFF 100%) !important;
                    border-color: #E0F2FE !important;
                    box-shadow: 0 0 12px rgba(56, 189, 248, 0.9) !important;
                }
                /* iOS Safari (iPhone): extender el fondo del hero a 100lvh para que la segunda sección no se asome detrás de la barra flotante de Safari, manteniendo los controles en 100svh */
                @supports (-webkit-touch-callout: none) {
                    .hero-carousel {
                        height: 100lvh !important;
                    }
                    #carouselInner > .slide.slide-portfolio > .slide-content.b1-hero-wrapper {
                        padding-bottom: calc(100lvh - 100svh + 30px) !important;
                    }
                    #hero .carousel-dots,
                    .carousel-dots {
                        bottom: calc(100lvh - 100svh + 6px) !important;
                    }
                    .global-pre-btn,
                    #carouselInner > .slide .global-pre-btn,
                    #carouselInner > .slide.slide-family-banner .global-pre-btn {
                        bottom: calc(100lvh - 100svh + 44px) !important;
                    }
                }
            }
            @media (max-width: 768px) and (max-height: 670px) {
                #carouselInner > .slide.slide-portfolio > .slide-content.b1-hero-wrapper {
                    padding-top: 70px !important;
                }
                #carouselInner > .slide.slide-portfolio h1.b1-title {
                    margin: 0 auto 4px auto !important;
                }
                #carouselInner > .slide.slide-portfolio .b1-roles-and-free-row {
                    row-gap: 8px !important;
                }
            }

            .carousel-dots {
                position: absolute !important;
                bottom: 20px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                display: flex !important;
                gap: 12px !important;
                z-index: 150 !important;
                pointer-events: auto !important;
            }

            .dot {
                width: 12px !important;
                height: 12px !important;
                border-radius: 50% !important;
                background: rgba(15, 23, 42, 0.35) !important;
                cursor: pointer !important;
                transition: all 0.3s ease !important;
                border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55) !important;
            }

            .dot.active {
                background: linear-gradient(135deg, #38BDF8 0%, #007AFF 100%) !important;
                transform: scale(1.35) !important;
                border-color: #FFFFFF !important;
                box-shadow: 0 0 12px rgba(0, 122, 255, 0.85), 0 2px 6px rgba(0, 0, 0, 0.75) !important;
            }

/* ===== Bloque de estilos 10/12 (cuerpo) ===== */
            .main-content > .b1-section-border-coverage {
                display: none !important;
            }
            .b1-section-border-coverage {
                position: relative;
                z-index: 25;
                width: 100%;
                background: #040E1E;
                border-top: 1px solid rgba(255, 255, 255, 0.14);
                border-bottom: 1px solid #1E293B;
                box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
                padding: 4px 14px;
            }
            .b1-section-border-inner {
                max-width: 1540px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 6px 14px;
            }
            .b1-cov-badge-label {
                display: none !important;
            }
            .b1-section-border-coverage .b1-coverage-list {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 5px 12px;
            }
            .b1-section-border-coverage .b1-country,
            .b1-section-border-coverage .b1-country span {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                color: #FFFFFF !important;
                font-size: clamp(12px, 1.05vw, 14px);
                font-weight: 800;
                letter-spacing: 0.3px;
                white-space: nowrap;
                text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
            }
            .b1-section-border-coverage .b1-latam-icon {
                width: 18px;
                height: 18px;
                color: #38BDF8;
                filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.38));
                flex-shrink: 0;
            }
            .b1-section-border-coverage .b1-flag {
                width: 20px;
                height: 14px;
                object-fit: cover;
                border-radius: 3px;
                border: 1px solid rgba(255, 255, 255, 0.45);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
            }
            .b1-section-border-coverage .b1-country-sep {
                color: rgba(56, 189, 248, 0.45);
                font-weight: 900;
                font-size: 13px;
            }
            @media (max-width: 768px) {
                .b1-section-border-coverage {
                    padding: 4px 8px;
                }
                .b1-section-border-coverage .b1-coverage-list {
                    gap: 4px 8px;
                }
                .b1-section-border-coverage .b1-country {
                    font-size: 11px;
                }
            }

/* ===== Bloque de estilos 11/12 (cuerpo) ===== */
            .analogia-light-section {
                background: #E6EEF7 url('fondo_facetado_light.svg?v=5') center/cover no-repeat !important;
                color: #0F172A;
                padding: clamp(18px, 2.2vw, 28px) 0;
                position: relative;
                z-index: 12;
                border-top: 2px solid #FFFFFF;
                border-bottom: 2px solid #FFFFFF;
                box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22), inset 0 2px 6px rgba(255, 255, 255, 0.95);
            }
            .analogia-container {
                max-width: 1480px;
                width: 94%;
                margin: 0 auto;
            }
            .analogia-header {
                text-align: center;
                max-width: 980px;
                margin: 0 auto 16px auto;
            }
            .analogia-pill {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 16px;
                border-radius: 999px;
                background: #E0F2FE;
                border: 1px solid #7DD3FC;
                color: #0369A1;
                font-size: 11.5px;
                font-weight: 900;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                margin-bottom: 10px;
            }
            .analogia-title {
                font-size: clamp(25px, 3.5vw, 44px);
                font-weight: 950;
                color: #0F172A;
                line-height: 1.1;
                letter-spacing: -0.7px;
                margin: 0 0 8px 0;
            }
            .analogia-subtitle {
                font-size: clamp(14px, 1.35vw, 17.5px);
                font-weight: 700;
                color: #475569;
                margin: 0;
            }

            /* Grid de 3 Pantallas de Celular Reales */
            .analogia-carousel-shell {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 18px;
            }
            .analogia-track {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 24px;
                align-items: stretch;
            }
            @media (max-width: 1080px) {
                .analogia-track {
                    display: flex;
                    overflow-x: auto;
                    scroll-snap-type: x mandatory;
                    gap: 16px;
                    padding: 8px 4px 16px 4px;
                    scrollbar-width: none;
                }
                .analogia-track::-webkit-scrollbar { display: none; }
                .analogia-card {
                    min-width: 300px;
                    flex: 0 0 86%;
                    max-width: 360px;
                    scroll-snap-align: center;
                }
            }

            .analogia-card {
                background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
                border-radius: 26px;
                border: 2px solid #E2E8F0;
                padding: 18px 18px 20px 18px;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                position: relative;
                transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
                box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
                cursor: pointer;
                overflow: hidden;
            }
            .analogia-card:hover,
            .analogia-card.is-spotlight {
                transform: translateY(-6px);
                border-color: #0284C7;
                box-shadow: 0 22px 48px rgba(2, 132, 199, 0.2);
            }

            .analogia-step-badge {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 11px;
                font-weight: 900;
                text-transform: uppercase;
                letter-spacing: 1.1px;
                padding: 5px 14px;
                border-radius: 999px;
                background: #0F172A;
                color: #FFFFFF;
                margin-bottom: 14px;
                box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
            }
            .analogia-card.is-spotlight .analogia-step-badge {
                background: linear-gradient(90deg, #007AFF, #0284C7);
                color: #FFFFFF;
            }

            /* === HARDWARE REALISTA DE TELÉFONO INTELIGENTE (CHASIS TITANIO + DYNAMIC ISLAND + UI REAL) === */
            .phone-hardware-wrap {
                position: relative;
                width: 268px;
                max-width: 100%;
                margin: 0 auto 14px auto;
                padding: 10px;
                border-radius: 42px;
                background: linear-gradient(145deg, #334155 0%, #0F172A 45%, #1E293B 100%);
                box-shadow:
                    0 20px 40px rgba(15, 23, 42, 0.32),
                    0 4px 12px rgba(15, 23, 42, 0.22),
                    inset 0 1px 2px rgba(255, 255, 255, 0.45),
                    inset 0 -2px 4px rgba(0, 0, 0, 0.7);
                border: 2px solid #475569;
                user-select: none;
            }
            /* Botones físicos laterales del celular */
            .phone-hardware-wrap::before {
                content: '';
                position: absolute;
                left: -4px;
                top: 84px;
                width: 3px;
                height: 58px;
                background: linear-gradient(180deg, #64748B, #1E293B);
                border-radius: 3px 0 0 3px;
                box-shadow: 0 42px 0 #475569;
            }
            .phone-hardware-wrap::after {
                content: '';
                position: absolute;
                right: -4px;
                top: 104px;
                width: 3px;
                height: 46px;
                background: linear-gradient(180deg, #64748B, #1E293B);
                border-radius: 0 3px 3px 0;
            }

            .phone-screen-viewport {
                background: #060E1F;
                border-radius: 32px;
                overflow: hidden;
                position: relative;
                height: 428px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border: 1.5px solid rgba(255, 255, 255, 0.12);
                text-align: left;
                color: #FFFFFF;
                font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
            }

            /* Barra de estado iOS/Android + Dynamic Island */
            .phone-statusbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 14px 6px 14px;
                font-size: 10px;
                font-weight: 800;
                color: #F8FAFC;
                background: rgba(3, 9, 22, 0.9);
                position: relative;
                z-index: 5;
            }
            .phone-dynamic-island {
                width: 76px;
                height: 18px;
                background: #000000;
                border-radius: 999px;
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 7px;
                border: 1px solid rgba(255, 255, 255, 0.14);
            }
            .phone-island-cam {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: radial-gradient(circle, #38BDF8 0%, #0F172A 70%);
            }
            .phone-island-led {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #10B981;
                box-shadow: 0 0 6px #10B981;
            }

            /* Cabecera de la App dentro del teléfono */
            .phone-app-topbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 6px 12px 8px 12px;
                background: rgba(6, 16, 34, 0.95);
                border-bottom: 1px solid rgba(56, 189, 248, 0.2);
            }
            .phone-app-brand {
                font-family: 'Outfit', sans-serif;
                font-size: 13px;
                font-weight: 950;
                letter-spacing: -0.4px;
            }
            .phone-app-brand .b-ic { color: #FFFFFF; }
            .phone-app-brand .b-ap { color: #38BDF8; }
            .phone-loc-pill {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: 9px;
                font-weight: 800;
                padding: 3px 8px;
                border-radius: 999px;
                background: rgba(56, 189, 248, 0.15);
                border: 1px solid rgba(56, 189, 248, 0.4);
                color: #E0F2FE;
            }

            /* Cuerpo de la pantalla del teléfono */
            .phone-app-body {
                flex: 1;
                padding: 10px 12px;
                display: flex;
                flex-direction: column;
                gap: 8px;
                overflow: hidden;
            }

            /* Barra inferior Home Indicator */
            .phone-home-bar-wrap {
                padding: 6px 0 7px 0;
                background: #040A17;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .phone-home-indicator {
                width: 88px;
                height: 4px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.45);
            }

            /* Animaciones internas de la App */
            @keyframes pulseRingBtn {
                0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6), 0 6px 16px rgba(0, 122, 255, 0.45); }
                50% { box-shadow: 0 0 0 6px rgba(56, 189, 248, 0), 0 6px 16px rgba(0, 122, 255, 0.65); }
            }
            @keyframes gpsRouteVehicle {
                0% { transform: translate(0px, 0px); }
                50% { transform: translate(32px, -22px); }
                100% { transform: translate(0px, 0px); }
            }
            .phone-cta-requesting {
                animation: pulseRingBtn 2.2s infinite;
            }
            .phone-gps-mover {
                animation: gpsRouteVehicle 3.8s ease-in-out infinite;
            }

            .analogia-card-title {
                font-size: clamp(17px, 1.45vw, 20px);
                font-weight: 950;
                color: #0F172A;
                margin: 0 0 5px 0;
                line-height: 1.2;
            }
            .analogia-card-desc {
                font-size: 13.5px;
                font-weight: 650;
                color: #475569;
                margin: 0;
                line-height: 1.38;
                max-width: 320px;
            }

            /* Controles e Indicadores del Carrusel: solo el botón centrado sin contenedor ni indicador 1/3 */
            .analogia-controls-bar {
                display: flex;
                align-items: center;
                justify-content: center !important;
                flex-wrap: wrap;
                gap: 0 !important;
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 2px 0 0 0 !important;
                box-shadow: none !important;
            }
            .analogia-controls-top,
            .analogia-dots,
            #analogiaStatusLabel {
                display: none !important;
            }
            .analogia-dot {
                height: 10px;
                width: 28px;
                border-radius: 999px;
                background: #CBD5E1;
                border: none;
                cursor: pointer;
                transition: all 0.25s ease;
            }
            .analogia-dot.active {
                width: 48px;
                background: #007AFF;
            }
            .analogia-cta-inline {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 11px 28px;
                border-radius: 999px;
                border: 1.5px solid rgba(147, 197, 253, 0.68) !important;
                background-image: var(--iconi-prebtn-bg-normal) !important;
                background-size: 100% 100%, 100% 100%, 100% 100% !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                color: #FFFFFF !important;
                font-size: 13.5px;
                font-weight: 900;
                letter-spacing: 0.8px;
                text-transform: uppercase;
                text-decoration: none;
                text-shadow: 0 2px 4px rgba(1, 8, 24, 0.85), 0 0 10px rgba(56, 189, 248, 0.25) !important;
                box-shadow: var(--iconi-prebtn-shadow-normal) !important;
                overflow: hidden;
                transition: transform 0.22s ease, background-image 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
            }
            .analogia-cta-inline:hover,
            .analogia-cta-inline:focus-visible {
                background-image: var(--iconi-prebtn-bg-hover) !important;
                background-size: 100% 100%, 100% 100%, 100% 100% !important;
                border-color: rgba(224, 242, 254, 0.96) !important;
                transform: translateY(-2px);
                filter: brightness(1.07) saturate(1.08);
                box-shadow: var(--iconi-prebtn-shadow-hover) !important;
                text-shadow: 0 2px 5px rgba(1, 8, 24, 0.9), 0 0 14px rgba(186, 230, 253, 0.55) !important;
            }
            @media (max-width: 768px) {
                .analogia-light-section {
                    padding: 10px 0 12px 0 !important;
                }
                .analogia-header {
                    margin-bottom: 4px !important;
                    padding: 0 4px !important;
                }
                .analogia-title {
                    font-size: clamp(19px, 5.2vw, 22.5px) !important;
                    line-height: 1.08 !important;
                    margin-bottom: 4px !important;
                }
                .analogia-title > span:last-child {
                    font-size: clamp(15px, 4.2vw, 18px) !important;
                    margin-top: 2px !important;
                    line-height: 1.12 !important;
                }
                .analogia-subtitle {
                    font-size: clamp(11.3px, 3.1vw, 12.8px) !important;
                    line-height: 1.26 !important;
                    margin: 0 auto !important;
                    max-width: 344px !important;
                }
                .analogia-subtitle > span:first-child {
                    color: #0F172A !important;
                    font-weight: 800 !important;
                    margin-bottom: 2px !important;
                }
                .analogia-subtitle > span:last-child {
                    color: #334155 !important;
                    font-weight: 650 !important;
                    max-width: 312px !important;
                    margin: 0 auto !important;
                    text-wrap: balance !important;
                }
                .analogia-carousel-shell {
                    gap: 6px !important;
                }
                .analogia-track {
                    padding: 6px 8px 6px 8px !important;
                    gap: 12px !important;
                }
                .analogia-controls-bar {
                    flex-direction: row !important;
                    align-items: center !important;
                    justify-content: center !important;
                    text-align: center !important;
                    padding: 0 !important;
                    margin: 0 !important;
                    gap: 0 !important;
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                }
                .analogia-controls-top {
                    display: none !important;
                }
                .analogia-cta-inline {
                    justify-content: center !important;
                    width: 100% !important;
                    max-width: 324px !important;
                    min-height: 40px !important;
                    box-sizing: border-box !important;
                    padding: 9px 18px !important;
                    font-size: 12.2px !important;
                    border-radius: 999px !important;
                    margin: 0 auto !important;
                }
            }

/* ===== Bloque de estilos 12/12 (cuerpo) ===== */
        #iconiBannerContainer {
            position: fixed;
            top: max(16px, env(safe-area-inset-top));
            left: 50%;
            transform: translateX(-50%);
            z-index: 100050;
            width: max-content;
            max-width: min(92vw, 560px);
            pointer-events: none;
        }
        .iconi-banner-pill {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 22px 12px 14px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.88);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 14px 38px rgba(2, 6, 23, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10);
            color: #FFFFFF;
            font-family: 'Outfit', sans-serif;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.35;
            overflow: hidden;
            pointer-events: auto;
            cursor: pointer;
            opacity: 0;
            transform: translateY(-18px) scale(0.98);
            transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .iconi-banner-pill.is-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .iconi-banner-pill .iconi-banner-icon {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            background: rgba(255, 255, 255, 0.10);
        }
        .iconi-banner-pill.success .iconi-banner-icon { color: #10B981; background: rgba(16, 185, 129, 0.16); }
        .iconi-banner-pill.warning .iconi-banner-icon { color: #F59E0B; background: rgba(245, 158, 11, 0.16); }
        .iconi-banner-pill.error .iconi-banner-icon { color: #F87171; background: rgba(239, 68, 68, 0.18); }
        .iconi-banner-pill.info .iconi-banner-icon { color: #38BDF8; background: rgba(56, 189, 248, 0.16); }
        .iconi-banner-pill .iconi-banner-text {
            overflow-wrap: anywhere;
        }
        .iconi-banner-pill .iconi-banner-progress {
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 4px;
            height: 2px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.85);
            transform-origin: left center;
            opacity: 0.55;
        }
        @media (max-width: 480px) {
            #iconiBannerContainer { max-width: calc(100vw - 24px); }
            .iconi-banner-pill { font-size: 13px; padding: 10px 18px 10px 12px; border-radius: 26px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .iconi-banner-pill { transition: opacity 0.2s ease; transform: none; }
        }


/* === OPTIMIZACIÓN RESPONSIVE INTEGRAL DE SECCIONES INFERIORES EN MÓVIL (MAX-WIDTH: 768PX) === */
.cat-services-preview {
    display: none;
}

@media (max-width: 768px) {
    /* 1. Sección Analogía (#comparativa-apps): Teléfonos más compactos sin recorte superior y botón 100% dentro de la sección */
    .analogia-card,
    .analogia-card:hover,
    .analogia-card.is-spotlight {
        min-width: 268px !important;
        flex: 0 0 84% !important;
        max-width: 324px !important;
        padding: 8px 12px 9px 12px !important;
        border-radius: 20px !important;
        transform: none !important;
        margin-top: 0 !important;
    }
    .analogia-step-badge {
        font-size: 9.6px !important;
        padding: 3.5px 11px !important;
        margin-bottom: 5px !important;
    }
    .phone-hardware-wrap {
        width: 234px !important;
        padding: 6.5px !important;
        border-radius: 30px !important;
        margin-bottom: 6px !important;
    }
    .phone-screen-viewport {
        height: 298px !important;
        border-radius: 24px !important;
    }
    .phone-statusbar {
        padding: 5px 11px 4px 11px !important;
        font-size: 9px !important;
    }
    .phone-dynamic-island {
        width: 62px !important;
        height: 13.5px !important;
    }
    .phone-app-topbar {
        padding: 4.5px 10px 5.5px 10px !important;
    }
    .phone-app-body {
        padding: 8px 10px !important;
        gap: 7px !important;
        justify-content: space-between !important;
    }
    /* Pantalla 1 (Paso 1): simplificar dejando buscador, tarjeta de Jardinería amplia y botón de solicitud */
    .analogia-card[data-analogia-idx="0"] .phone-app-body > div:nth-child(1),
    .analogia-card[data-analogia-idx="0"] .phone-app-body > div:nth-child(3) > div:last-child > div:last-child {
        display: none !important;
    }
    .analogia-card[data-analogia-idx="0"] .phone-app-body > div:nth-child(3) > div:first-child {
        height: 98px !important;
        padding: 8px 10px !important;
    }
    .analogia-card[data-analogia-idx="0"] .phone-cta-requesting {
        padding: 8px 10px !important;
        margin-top: 0 !important;
    }
    /* Pantalla 2 (Paso 2): mapa GPS amplio y despejado sin etiqueta flotante superpuesta + tarjeta del especialista con aire */
    .analogia-card[data-analogia-idx="1"] .phone-app-body > div:nth-child(2) {
        height: 102px !important;
    }
    .analogia-card[data-analogia-idx="1"] .phone-app-body > div:nth-child(2) > div {
        display: none !important;
    }
    .analogia-card[data-analogia-idx="1"] .phone-app-body > div:nth-child(3) {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    /* Pantalla 3 (Paso 3): simplificar dejando foto amplia de trabajo terminado, calificación 5 estrellas limpia y botón Escrow */
    .analogia-card[data-analogia-idx="2"] .phone-app-body > div:nth-child(1),
    .analogia-card[data-analogia-idx="2"] .phone-app-body > div:nth-child(3) > div:last-child {
        display: none !important;
    }
    .analogia-card[data-analogia-idx="2"] .phone-app-body > div:nth-child(2) {
        height: 86px !important;
        padding: 7px 9px !important;
    }
    .analogia-card[data-analogia-idx="2"] .phone-app-body > div:nth-child(3) {
        padding: 8px 10px !important;
        gap: 4px !important;
    }
    .analogia-card[data-analogia-idx="2"] .phone-app-body > div:nth-child(3) > div:first-child {
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }
    .analogia-card[data-analogia-idx="2"] .phone-app-body > div:nth-child(4) {
        padding: 8px 8px !important;
        margin-top: 0 !important;
        font-size: 9.2px !important;
        white-space: nowrap !important;
    }
    .phone-home-bar-wrap {
        padding: 4px 0 4.5px 0 !important;
    }
    .analogia-card-title {
        font-size: 14px !important;
        margin-bottom: 2px !important;
        line-height: 1.14 !important;
    }
    .analogia-card-desc {
        font-size: 11px !important;
        line-height: 1.24 !important;
        max-width: 100% !important;
        text-wrap: normal !important;
    }

    /* 2. Sección Perfiles (#perfiles): Tarjetas de Cliente y Proveedor equilibradas y de conversión rápida */
    .profiles-section {
        padding: 16px 0 8px !important;
    }
    .profiles-grid {
        gap: 16px !important;
    }
    .p-card .p-img {
        height: 195px !important;
        object-position: center 15% !important;
    }
    .p-card .p-content {
        padding: 16px 16px 18px !important;
    }
    .p-card .p-content h3 {
        font-size: 25px !important;
        margin-bottom: 6px !important;
    }
    .p-card .p-content p {
        font-size: 12.5px !important;
        line-height: 1.42 !important;
        margin-bottom: 12px !important;
    }
    .p-card-actions {
        gap: 8px !important;
    }
    .p-card .btn-p {
        padding: 12px 18px !important;
        font-size: 12.5px !important;
    }
    .p-card .btn-complete-profile {
        padding: 9px 14px !important;
        font-size: 11.5px !important;
    }

    /* 3. Sección Catálogos (#catalogos): Diseño horizontal enriquecido con las listas de servicios del Banner 1 */
    .catalogs-section {
        padding: 26px 0 32px !important;
    }
    .catalog-header .cat-divider {
        margin: 4px auto 14px !important;
    }
    .catalog-header > p[data-tr="cat_p"] {
        margin-bottom: 8px !important;
        font-size: 15px !important;
    }
    .cat-headline-group {
        margin-bottom: 18px !important;
    }
    .cat-headline-group > div[data-tr="cat_line1"] {
        font-size: clamp(22px, 6.2vw, 28px) !important;
        margin-bottom: 4px !important;
    }
    .cat-headline-group > div[data-tr="cat_line2"] {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }
    .cat-headline-group > div[data-tr="cat_desc_2"] {
        font-size: 11.5px !important;
        letter-spacing: 1.2px !important;
    }
    .catalogs-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .cat-item {
        display: grid !important;
        grid-template-columns: 114px 1fr !important;
        align-items: stretch !important;
        border-radius: 16px !important;
        background: rgba(10, 18, 34, 0.88) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        overflow: hidden !important;
    }
    .cat-item.cat-care { border-color: rgba(225, 29, 72, 0.4) !important; }
    .cat-item.cat-work { border-color: rgba(249, 115, 22, 0.4) !important; }
    .cat-item.cat-pro { border-color: rgba(16, 185, 129, 0.4) !important; }
    .cat-item.cat-club { border-color: rgba(56, 189, 248, 0.4) !important; }
    .cat-img-box {
        width: 114px !important;
        height: 100% !important;
        min-height: 124px !important;
    }
    .cat-info {
        padding: 10px 12px !important;
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 4px !important;
    }
    .cat-title {
        font-size: 16px !important;
        line-height: 1.05 !important;
    }
    .cat-desc {
        font-size: 10.5px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }
    .cat-services-preview {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.32 !important;
        color: #CBD5E1 !important;
        font-weight: 500 !important;
        margin: 0 0 4px 0 !important;
    }
    .btn-cat {
        padding: 6px 14px !important;
        font-size: 9.8px !important;
        border-radius: 999px !important;
        align-self: flex-start !important;
    }

    /* 4. Sección Seguridad (#seguridad): Compactación y jerarquía limpia */
    #seguridad {
        padding: 28px 0 42px !important;
    }
    #seguridad h3.w-950 {
        font-size: clamp(24px, 6.8vw, 32px) !important;
        line-height: 1.1 !important;
        margin-bottom: 8px !important;
    }
    #seguridad > .container > p {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-bottom: 18px !important;
    }
    .sec-grid {
        gap: 12px !important;
    }

    /* 5. Sección Mapa Global (#portafolio) y Botón Subir (#backToTop) */
    #portafolio {
        padding: 34px 0 42px !important;
    }
    #portafolio h3 {
        font-size: clamp(28px, 8vw, 36px) !important;
        margin-bottom: 6px !important;
    }
    #mapGlobalSubtitle {
        font-size: 11.5px !important;
        margin-bottom: 16px !important;
        letter-spacing: 1px !important;
    }
    .map-container {
        height: 380px !important;
        border-radius: 20px !important;
    }
    .map-controls {
        bottom: 18px !important;
        width: 92% !important;
        max-width: 350px !important;
        padding: 5px !important;
        gap: 5px !important;
        justify-content: space-between !important;
        border-radius: 12px !important;
    }
    .map-controls .control-btn {
        padding: 8px 10px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        flex: 1 1 0 !important;
        min-height: 34px !important;
        text-align: center !important;
    }
    #backToTop {
        width: 40px !important;
        height: 40px !important;
        bottom: 14px !important;
        right: 12px !important;
    }
    /* Reducción de aires en Próximamente la APP en tiendas oficiales (#app) en móvil */
    .app-banner {
        padding: 8px 12px 10px 12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .app-banner-content {
        gap: 6px !important;
    }
    .app-banner-center-text {
        gap: 2px !important;
    }
    .app-banner h2 {
        font-size: 16.5px !important;
        margin: 0 !important;
        line-height: 1.18 !important;
    }
    .app-launch-date {
        font-size: 10.5px !important;
        margin-top: 1px !important;
        letter-spacing: 1px !important;
        line-height: 1.2 !important;
    }
    .app-banner-btns-mobile {
        margin-top: 4px !important;
        gap: 10px !important;
    }
    .app-mini-btn {
        padding: 8px 14px !important;
        gap: 9px !important;
        border-radius: 11px !important;
    }
    .app-mini-btn i {
        font-size: 24px !important;
    }
    .app-mini-btn div span {
        display: block !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.4px !important;
        white-space: nowrap !important;
    }
    .app-mini-btn div strong {
        display: block !important;
        font-size: 15px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
    }

    /* Elevar y centrar el dock financiero en Slides 4 y 6 con margen superior despejado respecto al navbar */
    #carouselInner > .slide:nth-child(4) > .slide-content,
    #carouselInner > .slide:nth-child(6) > .slide-content {
        padding-top: 72px !important;
        padding-bottom: 96px !important;
        justify-content: space-between !important;
        gap: 2px !important;
    }
    .fintech-inclusion-dock {
        padding: 7px 10px !important;
        gap: 4px !important;
        margin: -2px auto 2px auto !important;
    }
    .inclusion-capsule {
        padding: 4px 8px !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .inclusion-capsule-body {
        gap: 2px !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .inclusion-capsule-title {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 9.4px !important;
        line-height: 1.18 !important;
        width: 100% !important;
    }
    .inclusion-capsule-desc {
        display: block !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 9.4px !important;
        line-height: 1.22 !important;
        width: 100% !important;
    }
}

/* Modales siempre por encima del navbar móvil (3850) y del backdrop del menú (3400) */
.modal {
    z-index: 4200 !important;
}

.app-mini-btn div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    line-height: 1.1 !important;
}
.app-mini-btn div span {
    display: block !important;
    white-space: nowrap !important;
}
.app-mini-btn div strong {
    display: block !important;
    font-size: 21px;
    font-weight: 900 !important;
    line-height: 1.06 !important;
    white-space: nowrap !important;
}

/* ============================================================================
   UNIFORMIDAD DE TEXTURA FACETADA TENUE, BISEL 3D SUAVE E ILUMINACIÓN EN HOVER
   PARA TODOS LOS DEMÁS BOTONES DE LA PÁGINA (CONSERVANDO SU COLOR DE FONDO)
   ============================================================================ */
.orbit-btn {
    background-color: rgba(14, 116, 144, 0.55) !important;
}
#slide6StageWrap .orbit-btn {
    background-color: rgba(180, 83, 9, 0.55) !important;
}
.map-scroll-lock-btn {
    background-color: #0F172A !important;
}

.orbit-btn,
.hero-arrow,
.story-play-btn,
.map-scroll-lock-btn,
.map-controls .control-btn,
.header-icon-btn,
.icon-btn,
.prov-type-btn,
#btnOtherServiceMode,
.btn-success,
#btnSubmitInvestor,
#adminGateSubmitBtn {
    background-image: var(--iconi-subtle-sheen-normal) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.28), inset 0 -1.5px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.32) !important;
    transition: transform 0.22s ease, background-color 0.22s ease, background-image 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, filter 0.22s ease !important;
}

.orbit-btn:hover,
.hero-arrow:hover,
.story-play-btn:hover,
.map-scroll-lock-btn:hover,
.map-controls .control-btn:hover,
.map-controls .control-btn.active,
.header-icon-btn:hover,
.icon-btn:hover,
.prov-type-btn:hover,
.prov-type-btn.active,
#btnOtherServiceMode:hover,
.btn-success:hover,
#btnSubmitInvestor:hover,
#adminGateSubmitBtn:hover {
    background-image: var(--iconi-subtle-sheen-hover) !important;
    background-size: 100% 100%, 100% 100% !important;
    filter: brightness(1.08) !important;
    box-shadow: inset 0 2px 1.5px rgba(255, 255, 255, 0.55), inset 0 -1.5px 2px rgba(0, 0, 0, 0.35), inset 0 0 14px rgba(255, 255, 255, 0.22), 0 0 16px rgba(56, 189, 248, 0.38), 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}

#adminGateModal .modal-content.admin-gate-modal-box {
    max-width: 430px;
    width: 92%;
    flex-direction: column;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
    position: relative;
    padding: 28px 26px 24px;
    text-align: center;
    color: #0F172A;
}

#adminGateModal input.admin-gate-input {
    width: 100%;
    box-sizing: border-box;
    background: #F8FAFC;
    border: 1.5px solid #94A3B8;
    border-radius: 12px;
    padding: 11px 16px;
    color: #0F172A;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    outline: none;
}

/* Justificación de textos en modal de Términos y Condiciones (#termsModal) y ajuste de botones del wizard en móvil */
#termsModal .modal-body p,
#termsModal #shareNotificationPreview {
    text-align: justify !important;
}

@media (max-width: 600px) {
    #wizardNavBar {
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #wizardPrevBtn {
        flex: 0 0 auto !important;
        padding: 11px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    #wizardNextBtn,
    #submitBtn {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 11px 12px !important;
        font-size: 12px !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================================
   ESTABILIZACIÓN DE FOTO DEL FORMULARIO Y PALETA SOBRIA EN REGISTRO PROVEEDOR
   (Cero cambio de tamaño de foto entre Independiente y Empresa + Grises suaves)
   ============================================================================ */
@media (min-width: 993px) {
    .modal-content.modal-user,
    .modal-content.modal-prov {
        height: min(90dvh, 700px) !important;
        min-height: min(90dvh, 700px) !important;
        max-height: min(90dvh, 700px) !important;
    }
    .modal-content.modal-user .modal-img,
    .modal-content.modal-prov .modal-img {
        width: 35% !important;
        flex: 0 0 35% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
    }
}

#provCompSubFields > .form-group.full-row {
    margin: 0 !important;
}

.prov-id-short-col,
.prov-id-num-col {
    gap: 3px !important;
    margin: 0 !important;
}

.modal-content.modal-user .form-group input,
.modal-content.modal-prov .form-group input,
.modal-content.modal-user .select-selected,
.modal-content.modal-prov .select-selected,
.modal-content.modal-prov .prov-readonly-tax-badge {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    color: #1E293B !important;
}

.modal-content.modal-prov .prov-readonly-tax-badge {
    background: #F8FAFC !important;
    color: #475569 !important;
    font-weight: 700 !important;
}

.modal-content.modal-user .form-group input:focus,
.modal-content.modal-prov .form-group input:focus,
.modal-content.modal-user .select-selected:hover,
.modal-content.modal-prov .select-selected:hover {
    border-color: #94A3B8 !important;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.16) !important;
}

.modal-content.modal-prov {
    border: 1.5px solid rgba(245, 158, 11, 0.50) !important;
}

.modal-content.modal-user {
    border: 1.5px solid rgba(148, 163, 184, 0.65) !important;
}

.modal-content.modal-user .close-modal,
.modal-content.modal-prov .close-modal {
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
    background: #F8FAFC !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

.modal-content.modal-user .close-modal:hover,
.modal-content.modal-prov .close-modal:hover {
    background: #E2E8F0 !important;
    color: #1E293B !important;
    border-color: #94A3B8 !important;
}

.modal-content.modal-user .form-group label,
.modal-content.modal-prov .form-group label {
    color: #475569 !important;
    font-weight: 700 !important;
}

.prov-row-inline-switcher {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-left: 3.5px solid #F59E0B !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.prov-inline-question {
    color: #334155 !important;
    font-weight: 800 !important;
}

.prov-type-btn {
    background: #F8FAFC !important;
    background-image: none !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    filter: none !important;
}

.prov-type-btn:hover {
    background: #F1F5F9 !important;
    background-image: none !important;
    border-color: #94A3B8 !important;
    color: #334155 !important;
    box-shadow: none !important;
    filter: none !important;
}

.prov-type-btn.active {
    background: #FFF7ED !important;
    background-image: none !important;
    border: 1.5px solid #F59E0B !important;
    color: #B45309 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.12) !important;
    filter: none !important;
}

#btnOtherServiceMode,
#btnOtherServiceMode:hover {
    background: #F1F5F9 !important;
    background-image: none !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    box-shadow: none !important;
    filter: none !important;
}

.service-search-input-box i.search-ico {
    color: #64748B !important;
}

.service-search-input-box .search-chevron-btn,
.service-search-input-box .search-chevron-btn:hover {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

.prov-cert-box {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-left: 3.5px solid #F59E0B !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.prov-cert-title {
    color: #334155 !important;
    font-weight: 700 !important;
}

.prov-cert-reassurance {
    color: #64748B !important;
    font-weight: 600 !important;
}

.contact-privacy-box,
.form-hint {
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.contact-privacy-box {
    padding: 7px 12px !important;
    margin-top: 0 !important;
    margin-bottom: -4px !important;
}

#humanLegalCheckGroup {
    padding: 8px 14px !important;
    margin-top: 0 !important;
    margin-bottom: -4px !important;
}

.form-hint {
    font-size: 11.8px !important;
    letter-spacing: -0.08px !important;
    color: #334155 !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    padding: 8px 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
}

@media (min-width: 769px) {
    .form-hint-highlight-line,
    .step3-single-line {
        white-space: nowrap;
    }
}

/* PRE-A05: Checkboxes de consentimiento con accent-color, validación diferida (:user-invalid/:user-valid) y fallback @supports not */
#humanLegalCheckGroup input[type="checkbox"] {
    accent-color: #FC9400;
}

#humanLegalCheckGroup:has(input[type="checkbox"]:user-invalid) {
    border-color: #DC2626 !important;
    background-color: #FEF2F2 !important;
}

#humanLegalCheckGroup input[type="checkbox"]:user-invalid + span {
    color: #991B1B;
}

#humanLegalCheckGroup input[type="checkbox"]:user-valid {
    outline-color: #16A34A;
}

@supports not (accent-color: #FC9400) {
    #humanLegalCheckGroup label.consent-checkbox-label {
        position: relative;
        padding-left: 2rem;
    }
    #humanLegalCheckGroup label.consent-checkbox-label input[type="checkbox"] {
        position: absolute !important;
        clip-path: inset(50%) !important;
        overflow: hidden !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        white-space: nowrap !important;
    }
    #humanLegalCheckGroup label.consent-checkbox-label input[type="checkbox"] + span::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.15rem;
        width: 1.25rem;
        height: 1.25rem;
        border: 2px solid #64748B;
        background: #FFFFFF;
        border-radius: 4px;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }
    #humanLegalCheckGroup label.consent-checkbox-label input[type="checkbox"]:focus-visible + span::before {
        outline: 2px solid #0F172A;
        outline-offset: 2px;
    }
    #humanLegalCheckGroup label.consent-checkbox-label input[type="checkbox"]:checked + span::before {
        background-color: #FC9400;
        border-color: #FC9400;
    }
    #humanLegalCheckGroup label.consent-checkbox-label input[type="checkbox"]:checked + span::after {
        content: "✓";
        position: absolute;
        left: 0.25rem;
        top: 0.15rem;
        color: #FFFFFF;
        font-weight: 800;
        font-size: 0.9rem;
    }
}


/* ============================================================================
   ENCUADRE SIMÉTRICO MÓVIL EN BANNER 1: PROTAGONISTA FEMENINA + ICONIAPP + PLANETA
   Acerca la protagonista femenina hacia el centro en móvil con la misma
   proporción y ubicación respecto al bloque central ICONIAPP que el planeta.
   ============================================================================ */
@media (max-width: 768px) {
    #carouselInner > .slide.slide-portfolio .b1-scene-bg {
        top: 64px !important;
        bottom: auto !important;
        height: 58% !important;
        opacity: 0.96 !important;
        z-index: 1 !important;
    }

    #carouselInner > .slide.slide-portfolio .b1-scene-bg::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 22.5% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        background-image: url('assets/iconi-hero-bg.jpg?v=9') !important;
        background-repeat: no-repeat !important;
        background-size: auto 72% !important;
        background-position: -64px 45% !important;
        filter: brightness(1.03) saturate(1.06) contrast(1.03) !important;
        -webkit-mask-image:
            linear-gradient(90deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.42) 80%, transparent 98%),
            linear-gradient(180deg, transparent 0%, #000 15%, #000 83%, transparent 98%) !important;
        -webkit-mask-composite: source-in !important;
        mask-image:
            linear-gradient(90deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.42) 80%, transparent 98%),
            linear-gradient(180deg, transparent 0%, #000 15%, #000 83%, transparent 98%) !important;
        mask-composite: intersect !important;
    }

    #carouselInner > .slide.slide-portfolio .b1-scene-img {
        object-position: 50% 25% !important;
        transform: translateX(22px) !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 78%, rgba(0, 0, 0, 0.48) 84%, #000 91%, #000 100%) !important;
        mask-image: linear-gradient(90deg, transparent 0%, transparent 78%, rgba(0, 0, 0, 0.48) 84%, #000 91%, #000 100%) !important;
    }

    #carouselInner > .slide.slide-portfolio .b1-scene-overlay {
        background:
            radial-gradient(ellipse 40% 50% at 50% 42%, rgba(242, 247, 253, 0.88) 0%, rgba(238, 245, 252, 0.52) 64%, rgba(235, 242, 250, 0.14) 100%),
            linear-gradient(180deg, #E8F1FA 0%, rgba(232, 241, 250, 0.25) 15%, transparent 28%, transparent 66%, rgba(238, 245, 252, 0.72) 86%, #EEF5FC 100%) !important;
    }

    .hero-arrow,
    #hero .hero-arrow {
        top: 330px !important;
        top: 44.6svh !important;
    }
}

/* Centrado exacto de títulos e iconos más grandes en tarjetas de catálogo y ventana de subservicios */
.cat-icon-halo,
.cat-services-grid.grid-care .cat-icon-halo,
.cat-services-grid.grid-work .cat-icon-halo,
.cat-services-grid.grid-pro .cat-icon-halo,
.cat-services-grid.grid-club .cat-icon-halo,
.cat-service-icon-3d,
.cat-services-grid.grid-care .cat-service-icon-3d,
.cat-services-grid.grid-work .cat-service-icon-3d,
.cat-services-grid.grid-pro .cat-service-icon-3d,
.cat-services-grid.grid-club .cat-service-icon-3d {
    width: 54px !important;
    height: 54px !important;
}

#catSubservicesOverlay .cat-sub-header img,
.modal-content.modal-cat .cat-sub-header img {
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#catSubservicesOverlay .cat-sub-header h4,
.modal-content.modal-cat .cat-sub-header h4 {
    text-align: center !important;
}

/* Prevención de desbordamiento horizontal en tarjetas de catálogo y subservicios (móvil y escritorio) */
#catSubservicesOverlay .cat-sub-dialog,
.modal-content.modal-cat .cat-sub-dialog {
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: min(1060px, 94vw) !important;
}

#catSubservicesOverlay .cat-sub-grid,
.modal-content.modal-cat .cat-sub-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

#catSubservicesOverlay .cat-sub-btn,
.modal-content.modal-cat .cat-sub-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .cat-services-grid,
    .cat-services-grid.grid-care,
    .cat-services-grid.grid-work,
    .cat-services-grid.grid-pro,
    .cat-services-grid.grid-club {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1024px) {
    .cat-service-card,
    .cat-services-grid.grid-care .cat-service-card,
    .cat-services-grid.grid-work .cat-service-card,
    .cat-services-grid.grid-pro .cat-service-card,
    .cat-services-grid.grid-club .cat-service-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #catSubservicesOverlay .cat-sub-dialog,
    .modal-content.modal-cat .cat-sub-dialog {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #catSubservicesOverlay .cat-sub-grid,
    .modal-content.modal-cat .cat-sub-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #catSubservicesOverlay .cat-sub-btn,
    .modal-content.modal-cat .cat-sub-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 70px !important;
        max-height: none !important;
        padding: 10px 12px !important;
        gap: 6px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #catSubservicesOverlay .cat-sub-btn .sub-row-title,
    .modal-content.modal-cat .cat-sub-btn .sub-row-title {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 13.4px !important;
        line-height: 1.25 !important;
    }

    #catSubservicesOverlay .cat-sub-btn span.req-tag,
    .modal-content.modal-cat .cat-sub-btn span.req-tag {
        align-self: flex-end !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================================
   PARPADEO GLOBAL (PC Y MÓVIL) EN FLECHAS DE CARRUSEL Y BOTÓN "VER HISTORIA"
   + ALINEACIÓN EN 1 RENGLÓN PARA ICONIEXPERTS ("40 especialidades · 190 subservicios")
   ============================================================================ */
@keyframes iconiHeroArrowPulseRightGlobal {
    0%, 100% {
        transform: translateY(-50%) translateX(0) scale(1);
        border-color: rgba(125, 211, 252, 0.78);
        filter: brightness(1) drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
        opacity: 0.90;
    }
    50% {
        transform: translateY(-50%) translateX(5px) scale(1.14);
        border-color: #FFFFFF;
        filter: brightness(1.32) drop-shadow(0 0 16px rgba(56, 189, 248, 1)) drop-shadow(0 0 26px rgba(14, 165, 233, 0.9));
        opacity: 1;
    }
}

@keyframes iconiHeroArrowPulseLeftGlobal {
    0%, 100% {
        transform: translateY(-50%) translateX(0) scale(1);
        border-color: rgba(125, 211, 252, 0.75);
        filter: brightness(1) drop-shadow(0 0 6px rgba(56, 189, 248, 0.5));
        opacity: 0.88;
    }
    50% {
        transform: translateY(-50%) translateX(-5px) scale(1.12);
        border-color: #FFFFFF;
        filter: brightness(1.30) drop-shadow(0 0 15px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 24px rgba(14, 165, 233, 0.85));
        opacity: 1;
    }
}

@keyframes iconiStoryPlayPulseGlobal {
    0%, 100% {
        transform: scale(1);
        border-color: rgba(56, 189, 248, 0.72);
        filter: brightness(1) drop-shadow(0 0 8px rgba(56, 189, 248, 0.45));
    }
    50% {
        transform: scale(1.07);
        border-color: #FFFFFF;
        filter: brightness(1.25) drop-shadow(0 0 18px rgba(56, 189, 248, 0.98)) drop-shadow(0 0 28px rgba(14, 165, 233, 0.8));
    }
}

.hero-arrow.next-slide,
#hero .hero-arrow.next-slide {
    animation: iconiHeroArrowPulseRightGlobal 1.25s ease-in-out infinite !important;
    border: 2px solid #38BDF8 !important;
}

.hero-arrow.prev-slide,
#hero .hero-arrow.prev-slide {
    animation: iconiHeroArrowPulseLeftGlobal 1.45s ease-in-out infinite !important;
    border: 2px solid #38BDF8 !important;
}

.story-play-btn,
.story-play-btn-right {
    animation: iconiStoryPlayPulseGlobal 1.35s ease-in-out infinite !important;
    border: 2px solid #38BDF8 !important;
}

/* Mantener "40 especialidades · 190 subservicios" en 1 solo renglón en ICONIEXPERTS igual que ICONICARE e ICONIWORK (respetando ICONICLUB en 3 renglones) */
.cat-hero-banner:not(.theme-club) .cat-stat-row-main {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    font-size: clamp(12.2px, 3.3vw, 14.2px) !important;
}

.cat-hero-banner:not(.theme-club) .cat-stat-row-main span {
    white-space: nowrap !important;
}


/* === FIX SELECTOR DE SERVICIOS PROVEEDOR (ALTO CONTRASTE Y VENTANA SUPERIOR) === */
.service-search-wrap {
    position: static !important;
    width: 100% !important;
}

.service-search-input-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    cursor: pointer !important;
}

.modal-content.modal-prov .form-group .service-search-input-box input#serviceSearchInput,
.service-search-input-box input#serviceSearchInput {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 8px 142px 8px 40px !important;
    background: #FFFFFF !important;
    border: 2px solid #0284C7 !important;
    border-radius: 11px !important;
    color: #0F172A !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.12) !important;
    cursor: text !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modal-content.modal-prov .form-group .service-search-input-box input#serviceSearchInput:focus,
.service-search-input-box input#serviceSearchInput:focus {
    border-color: #F59E0B !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22) !important;
}

.service-search-input-box i.search-ico {
    position: absolute !important;
    left: 14px !important;
    color: #0284C7 !important;
    font-size: 15px !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.service-search-input-box .search-chevron-btn,
.service-search-input-box .search-chevron-btn:hover {
    position: absolute !important;
    right: 6px !important;
    height: 32px !important;
    padding: 0 12px !important;
    background: #0F172A !important;
    border: 1px solid #0F172A !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
    z-index: 3 !important;
}

.service-search-dropdown {
    display: none;
    position: absolute !important;
    top: -4px !important;
    left: 0 !important;
    right: 0 !important;
    max-height: min(495px, calc(88dvh - 155px)) !important;
    background: #FFFFFF !important;
    border: 2px solid #0F172A !important;
    border-radius: 16px !important;
    box-shadow: 0 28px 75px rgba(15, 23, 42, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
    z-index: 10050 !important;
    padding: 12px 14px !important;
    overflow: hidden !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.service-search-dropdown.open {
    display: flex !important;
}

.modal-content.modal-prov .form-group .service-search-dropdown input#dropdownInternalSearchInput,
#dropdownInternalSearchInput {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 6px 84px 6px 38px !important;
    background: #F8FAFC !important;
    border: 2px solid #0284C7 !important;
    border-radius: 10px !important;
    color: #0F172A !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}