:root{
            --fondo:#050510;
            --superficie:#0e0e18;
            --superficie-alta:#14141f;
            --superficie-suave:#1c1c2b;
            --borde:#24243c;
            --texto:#f2f2f7;
            --texto-medio:#c3c3d2;
            --texto-suave:#9a9ab0;
            --texto-tenue:#83839a;
            --marca:#8500fe;
            --marca-texto:#b47cff;
        }
        *,::before,::after{box-sizing:border-box}
        html{scroll-behavior:smooth;scrollbar-width:none;max-width:100%;overflow-x:hidden}
        body{margin:0;font-family:"Space Grotesk",sans-serif;background:var(--fondo);color:var(--texto);overflow-x:clip}
        header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(5,5,16,0.82);border-bottom:1px solid var(--borde);max-width:100vw}
        header>div{max-width:1200px;margin:0 auto;padding:0 1rem;height:4rem;display:flex;align-items:center;justify-content:space-between;width:100%}
        main{padding-top:4rem;width:100%;overflow-x:clip}
        #hero{position:relative;background:var(--fondo);width:100%;max-width:100vw}
        #hero .hero-content{position:relative;z-index:10;width:100%;max-width:1200px;margin:0 auto}
        #hero h1{font-size:clamp(1.875rem,4.2vw,3.5rem);font-weight:700;line-height:1.1;letter-spacing:-0.025em;color:#fff;margin-bottom:1.5rem;width:100%}
        .bg-primary{background-color:#8500fe}
        .text-primary{color:#8500fe}
        .text-white{color:#fff}
        .font-bold{font-weight:700}
        img{max-width:100%;height:auto}
        .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
    

        /* ===== SKIP LINK ===== */
        .skip-link {
            position: absolute;
            top: -100%;
            left: 1rem;
            z-index: 9999;
            background: #8500fe;
            color: #fff;
            padding: 0.5rem 1rem;
            border-radius: 0 0 0.5rem 0.5rem;
            font-weight: 700;
            font-size: 0.875rem;
            transition: top 0.2s ease;
            text-decoration: none;
        }
        .skip-link:focus {
            top: 0;
            outline: 3px solid #fff;
            outline-offset: 2px;
        }
        /* ===== FOCUS RING ===== */
        :focus-visible {
            outline: 2px solid var(--marca-texto);
            outline-offset: 2px;
            border-radius: 4px;
        }

        body {
            font-family: "Space Grotesk", sans-serif;
            overflow-x: clip;
            width: 100%;
            position: relative;
        }

        /* Fix horizontal scroll */
        html {
            max-width: 100%;
            overflow-x: hidden;
        }

        body {
            max-width: 100%;
            overflow-x: clip;
        }
        
        * {
            box-sizing: border-box;
            scroll-behavior: smooth;
        }
        
        .hero-gradient {
            background: radial-gradient(circle at 50% 50%, rgba(19, 19, 236, 0.15) 0%, rgba(5, 5, 16, 0) 70%);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Scrollbar Styles */
        body::-webkit-scrollbar {
            display: none;
        }
        
        html {
            scrollbar-width: none;
        }
        
        body {
            -ms-overflow-style: none;
            overflow-y: visible;
            min-height: auto !important;
        }
        
        /* ===== BENTO FEATURES SECTION ===== */
        .bento-card {
            position: relative;
            border-radius: 1.5rem;
            border: 1px solid #e8edf4;
            background: #ffffff;
            padding: 2rem;
            overflow: hidden;
            transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
        }
        .bento-card:hover {
            border-color: rgba(133,0,254,0.25);
            box-shadow: 0 12px 40px rgba(133,0,254,0.08);
            transform: translateY(-3px);
        }
        .bento-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1.5rem;
            background: radial-gradient(ellipse at top left, rgba(133,0,254,0.05) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }
        .bento-card:hover::before { opacity: 1; }

        /* ===== CARRUSEL DE BENEFICIOS ===== */
        @media (min-width: 1024px) {
        }

        .benefit-question,
        .benefit-scroll:not(.is-open) .benefit-answer,
        .benefit-scroll.is-open .benefit-question {
            opacity: 0;
            pointer-events: none;
        }

        .is-in .blur-word {
            opacity: 1;
            filter: blur(0px);
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
        }

        .benefit-scroll:not(.is-open) .benefit-layout {
            position: absolute;
            left: 0;
            right: 0;
            opacity: 0;
            transform: translateY(40px);
            pointer-events: none;
        }

        @media (min-width: 1024px) {
        }

        .benefit-image.is-active {
            opacity: 1;
            visibility: visible;
            transform: rotateY(var(--tilt)) rotateX(3deg) scale(1.4);
            filter: blur(0px);
        }

        .benefit-image.is-active:hover {
            transform: rotateY(var(--tilt)) rotateX(3deg) scale(1.47);
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }

        @media (prefers-reduced-motion: reduce) {
            .benefit-image.is-active:hover {
                transform: rotateY(var(--tilt)) rotateX(3deg) scale(1.4);
            }
        }

        @media (prefers-reduced-motion: reduce) {
        }

        @media (min-width: 768px) {
        }

        .benefit-card.is-active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            filter: blur(0px);
        }

        @media (min-width: 1024px) {
        }

        .benefit-scroll.is-reverse .benefit-visual {
            order: 1;
        }

        .benefit-scroll.is-reverse .benefit-carousel {
            order: 2;
        }

        @media (min-width: 1024px) {
            .benefit-scroll.is-reverse .benefit-layout {
                grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
            }
        }

        .benefit-scroll.is-vehicles .benefit-cart {
            opacity: 1;
        }

        .benefit-scroll.is-vehicles .benefit-cart--carro {
            animation: cruzaCarro 17s linear infinite;
        }

        .benefit-scroll.is-vehicles .benefit-cart--moto {
            animation: cruzaMoto 17s linear infinite;
        }

        .benefit-scroll.is-vehicles .benefit-cart--persona {
            animation: cruzaPersona 17s linear infinite;
        }

        @keyframes cruzaCarro {
            0%   { transform: translateX(-120%); }
            54%  { transform: translateX(100vw); }
            100% { transform: translateX(100vw); }
        }

        @keyframes cruzaMoto {
            0%, 45% { transform: translateX(-120%); }
            84%     { transform: translateX(100vw); }
            100%    { transform: translateX(100vw); }
        }

        @keyframes cruzaPersona {
            0%, 48% { transform: translateX(-130%); }
            87%     { transform: translateX(100vw); }
            100%    { transform: translateX(100vw); }
        }

        @media (prefers-reduced-motion: reduce) {
            .benefit-scroll.is-vehicles .benefit-cart {
                animation: none;
                opacity: 0;
            }
        }

        /* ===== CANALES DE COMUNICACIÓN ===== */
        @media (min-width: 1024px) {
        }

        .channel.is-on {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }

        .channel-badge .material-symbols-outlined {
            font-size: 26px;
        }

        .benefit-scroll.is-channels .channel-glow {
            opacity: 0.13;
        }

        .benefit-scroll.is-channels .benefit-image {
            box-shadow: -20px 38px 76px -34px var(--canal, rgba(0, 0, 0, 0.6));
            transition: box-shadow 0.7s ease;
        }

        @media (prefers-reduced-motion: reduce) {
        }

        /* ===== FLUJO DE ANUNCIOS ===== */
        @media (min-width: 1024px) {
        }

        @media (min-width: 1024px) {
        }

        .bubble--icon .material-symbols-outlined {
            font-size: 13px;
        }

        .benefit-scroll.is-ads .bubble {
            animation: entraBurbuja var(--t) linear var(--d) infinite;
        }

        @keyframes entraBurbuja {
            0%   { left: -22%; opacity: 0; }
            12%  { opacity: 1; }
            72%  { opacity: 1; }
            92%  { opacity: 0; }
            100% { left: 104%; opacity: 0; }
        }


        .benefit-scroll.is-ads .ad-phone {
            animation: entraFono 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        @keyframes entraFono {
            from { opacity: 0; transform: translateX(-32px) scale(0.95); }
            to   { opacity: 1; transform: none; }
        }

        .ad-phone-status,
        .ad-phone-top,
        .ad-phone-status .material-symbols-outlined {
            font-size: 11px;
        }

        .ad-phone-top .material-symbols-outlined {
            font-size: 13px;
        }

        .ad-slide.is-on {
            opacity: 1;
        }

        .ad-rail .material-symbols-outlined {
            font-size: 15px;
        }

        .ad-account-name .material-symbols-outlined {
            font-size: 10px;
            color: #93c5fd;
        }

        .ad-chip .material-symbols-outlined {
            font-size: 9px;
        }

        .ad-phone-nav .material-symbols-outlined {
            font-size: 13px;
        }

        @media (prefers-reduced-motion: reduce) {
            .benefit-scroll.is-ads .ads-side--in::after,
            .benefit-scroll.is-ads .ads-side--out::before {
                animation: none;
            }
        }

        @media (min-width: 1024px) {
            .benefit-scroll.is-ads .ads-side--in::after,
            .benefit-scroll.is-ads .ads-side--out::before {
                animation: fluyePuntos 0.75s linear infinite;
            }
        }

        @keyframes fluyePuntos {
            from { background-position-x: 0; }
            to   { background-position-x: 9px; }
        }

        .benefit-scroll.is-ads .benefit-visual {
            display: none;
        }

        @media (min-width: 1024px) {
            .benefit-scroll.is-ads .benefit-layout {
                grid-template-columns: minmax(0, 1fr);
                gap: 0;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .benefit-scroll.is-ads .bubble,
            .benefit-scroll.is-ads .ad-phone {
                animation: none;
                opacity: 1;
                transform: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .benefit-scroll.is-ads .ads-track {
                animation: none;
            }
        }

        /* ===== SECCION: GENERACION DE LANDING CON IA ===== */

        /* ===== TARJETA DE CONSTRUCCION DE LANDING ===== */
        .benefit-scroll.is-ai .ai-block {
            position: static;
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
            pointer-events: auto;
        }

        .benefit-scroll.is-ai .benefit-layout {
            display: none;
        }

        .benefit-scroll.is-ai .benefit-heading {
            color: #f8fafc;
        }

        .benefit-scroll.is-ai .benefit-answer {
            color: #c084fc;
        }

        .benefit-scroll.is-ai .ai-dark {
            opacity: 1;
        }

        @media (prefers-reduced-motion: reduce) {
        }

        .builder {
            display: grid;
            gap: 1.5rem;
            justify-items: center;
            justify-self: stretch;
        }

        @media (min-width: 1024px) {
            .builder {
                gap: 1.75rem;
            }
        }

        .brand-google {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.85rem;
            letter-spacing: -0.03em;
            line-height: 1;
        }

        .brand-google b {
            font-weight: 700;
            color: #ffffff;
        }

        .brand-google i {
            font-style: normal;
            font-weight: 400;
            color: #94a3b8;
        }

        .brand-ai {
            display: block;
            width: 2.3rem;
            height: 2.3rem;
            object-fit: contain;
        }

        .brand-plus {
            font-size: 1.5rem;
            font-weight: 300;
            color: var(--texto-suave);
        }

        .brand-lucid {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 1.85rem;
            letter-spacing: -0.03em;
            line-height: 1;
        }

        .brand-lucid img {
            width: 2.1rem;
            height: 2.1rem;
        }

        .brand-lucid b {
            font-weight: 700;
            color: #ffffff;
        }

        .brand-lucid i {
            font-style: normal;
            font-weight: 400;
            font-size: 0.62em;
            color: #94a3b8;
        }




        @keyframes latido {
            0%, 100% { opacity: 0.25; transform: scale(0.85); }
            50%      { opacity: 1; transform: scale(1); }
        }





        /* --- estados de la secuencia --- */
        .ai-block.is-intro .builder-brand {
            transform: translateY(19vh) scale(1.55);
        }

        .builder-prompt,
        .builder-templates,
        .builder-status,
        .ai-block.is-input .builder-prompt,
        .ai-block.is-built .builder-prompt {
            opacity: 1;
            transform: translateY(0);
        }

        .ai-block.is-built .builder-templates,
        .ai-block.is-built .builder-status,
        .ai-block.is-built .builder-stage {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes cursorParpadea {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0; }
        }

        .ai-block.is-built .builder-template {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .ai-block.is-built .builder-template:nth-child(2) { transition-delay: 0.12s; }
        .ai-block.is-built .builder-template:nth-child(3) { transition-delay: 0.24s; }

        .builder-template.is-picked {
            border-color: color-mix(in srgb, var(--acento) 75%, transparent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 26%, transparent);
            background: color-mix(in srgb, var(--acento) 12%, transparent);
        }

        .ai-block.is-built .builder-template.is-picked {
            transform: translateY(0) scale(1.04);
            transition-delay: 0.4s;
        }

        .ai-block.is-built .bblock {
            opacity: 1;
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
            .builder-brand,
            .builder-prompt,
            .builder-templates,
            .builder-status,
            .builder-stage,
            .ai-block.is-intro .builder-brand {
                transform: none;
            }
        }



        @media (prefers-reduced-motion: reduce) {
            .benefit-scroll.is-ai .builder-typed span,
            .benefit-scroll.is-ai .builder-template,
            .benefit-scroll.is-ai .bblock {
                animation: none;
                opacity: 1;
                transform: none;
            }
            .benefit-scroll.is-ai .builder-typed span {
                width: 100%;
            }
        }


        .benefit-scroll.is-split .benefit-visual {
            display: none;
        }

        @media (min-width: 1024px) {
            .benefit-scroll.is-split .benefit-layout {
                grid-template-columns: minmax(0, 1fr);
                gap: 0;
            }
        }


        @media (prefers-reduced-motion: reduce) {
        }

        /* Waveform bars */
        @keyframes waveAnim {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(0.25); }
        }
        /* Mini bar chart */
        @keyframes barGrow {
            from { transform: scaleY(0); }
            to { transform: scaleY(1); }
        }
        /* ===== AGENT CARDS ===== */
        .agent-card .body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; gap: 0.875rem; }
        .agent-card .install-btn {
            margin-top: auto;
            width: 100%;
            padding: 0.75rem 1rem;
            border-radius: 0.875rem;
            background: #0f172a;
            color: #fff;
            font-size: 0.8125rem;
            font-weight: 700;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: background 0.3s ease;
        }
        .agent-card .install-btn:hover { background: #8500fe; }

        /* ===== ANIMATE ON SCROLL ===== */
        .aos-item {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .aos-item.aos-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .aos-item.aos-left {
            transform: translateX(-28px);
        }
        .aos-item.aos-right {
            transform: translateX(28px);
        }
        .aos-item.aos-visible.aos-left,
        .aos-item.aos-visible.aos-right {
            transform: translateX(0);
        }
        
        /* slideInBenefit removed — unused section */
        
        /* Efecto de glassmorphism mejorado */
        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .glass-card:hover {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(132, 0, 254, 0.3);
        }

        /* .floating class removed — @keyframes float was undefined */

        /* Carousel No Scrollbar */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* FAQ Details Animation */
        details summary .expand-icon {
            display: inline-block;
        }
        
        details[open] summary .expand-icon {
            transform: rotate(180deg);
        }
        /* Mobile Menu Animation */
        .mobile-menu {
            transition: all 0.3s ease-in-out;
        }
        .mobile-menu.hidden {
            visibility: hidden;
            opacity: 0;
            transform: translateY(-10px);
        }
        .mobile-menu:not(.hidden) {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }
        /* Hamburger Animation */
        .hamburger-line {
            transition: all 0.3s ease-in-out;
        }
        .hamburger.active .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(8px, 8px);
        }
        .hamburger.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -7px);
        }

        #main-content > *:not(#hero),
        body > footer {
            position: relative;
            z-index: 1;
        }

        #pricing {
            position: relative;
            padding: 23rem 1.5rem 7rem;
            background: var(--fondo);
        }

        #pricing::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: 18rem;
            background: linear-gradient(180deg,
                #000000 0%,
                #01010a 22%,
                #03030e 48%,
                #040412 74%,
                var(--fondo) 100%);
            pointer-events: none;
        }

        #pricing [hidden] { display: none !important; }

        .precio-caja {
            position: relative;
            z-index: 1;
            max-width: 76rem;
            margin: 0 auto;
        }

        .precio-cabecera {
            display: grid;
            justify-items: center;
            text-align: center;
            gap: 0.9rem;
            margin-bottom: 2.25rem;
        }

        .precio-eyebrow {
            padding: 0.35rem 0.9rem;
            border-radius: 9999px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--marca-texto);
            background: rgba(133, 0, 254, 0.16);
        }

        .precio-titulo {
            font-size: clamp(2rem, 4.2vw, 3.25rem);
            font-weight: 800;
            line-height: 1.05;
            letter-spacing: -0.035em;
            color: var(--texto);
        }

        .precio-bajada {
            max-width: 38rem;
            font-size: 1.05rem;
            line-height: 1.6;
            color: var(--texto-suave);
        }

        .precio-switch[aria-checked="true"] { background: #8500fe; }

        .precio-switch[aria-checked="true"] .precio-switch-bola { transform: translateX(1.25rem); }

        .precio-conmutador-ahorro { color: var(--marca-texto); }

        .precio-abanico {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1.25rem;
            perspective: 1400px;
        }

        @media (min-width: 1024px) {
            .precio-abanico {
                grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.16fr) minmax(0, 0.92fr);
                gap: 1rem;
                align-items: center;
            }
        }

        .precio-card {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 1.9rem 1.75rem;
            border-radius: 1.5rem;
            background: var(--superficie);
            border: 1px solid var(--borde);
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.55s ease,
                        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
                        border-color 0.4s ease,
                        box-shadow 0.4s ease;
            transition-delay: 0.35s;
        }

        .precio-card--pop {
            padding: 2.4rem 2rem 2rem;
            border: 2px solid #8500fe;
            box-shadow: 0 40px 90px -40px rgba(133, 0, 254, 0.6);
            z-index: 2;
        }

        #pricing.is-visible .precio-card {
            opacity: 1;
            transform: translateY(0);
        }

        @media (min-width: 1024px) {
            #pricing.is-visible .precio-card--pop { transform: translateY(-20px); }

            .precio-card--izq { transform-origin: right center; }
            .precio-card--der { transform-origin: left center; }

            #pricing.is-visible .precio-card--izq {
                transform: translateX(14px) translateZ(-38px) rotateY(8deg) scale(0.965);
            }

            #pricing.is-visible .precio-card--der {
                transform: translateX(-14px) translateZ(-38px) rotateY(-8deg) scale(0.965);
            }
        }

        @media (max-width: 1023px) {
            .precio-card--pop { order: -1; }
        }

        .precio-card-nombre {
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            text-align: center;
            color: var(--texto-tenue);
        }

        .precio-numero {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 0.12em;
            margin: 1.25rem 0 0;
            font-size: clamp(3.2rem, 6.5vw, 4.4rem);
            font-weight: 800;
            line-height: 1;
            letter-spacing: -0.05em;
            color: var(--texto);
        }

        .precio-simbolo {
            font-size: 0.62em;
            font-weight: 800;
        }

        .precio-periodo {
            align-self: center;
            font-size: 0.24em;
            font-weight: 700;
            letter-spacing: 0;
            color: var(--texto-suave);
        }

        .precio-facturacion {
            margin: 0.55rem 0 0;
            font-size: 0.95rem;
            font-weight: 700;
            text-align: center;
            color: var(--texto-medio);
        }

        .precio-prueba {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            margin-top: 1.15rem;
            padding: 0.65rem 0.9rem;
            border-radius: 0.85rem;
            background: rgba(16, 185, 129, 0.14);
            border: 1px solid rgba(16, 185, 129, 0.38);
            font-size: 0.85rem;
            font-weight: 700;
            line-height: 1.35;
            text-align: center;
            color: #34d399;
        }

        .precio-prueba .material-symbols-outlined {
            font-size: 18px !important;
            flex-shrink: 0;
        }

        .precio-pasos {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1rem;
            margin-top: 2.5rem;
        }

        @media (min-width: 860px) {
            .precio-pasos {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        .precio-paso {
            display: grid;
            align-content: start;
            gap: 0.5rem;
            padding: 1.5rem;
            border-radius: 1.25rem;
            background: var(--superficie);
            border: 1px solid var(--borde);
        }

        .precio-paso-numero {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            font-size: 0.9rem;
            font-weight: 800;
            color: #ffffff;
            background: #8500fe;
        }

        .precio-paso h3 {
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--texto);
        }

        .precio-paso p {
            font-size: 0.92rem;
            line-height: 1.5;
            color: var(--texto-suave);
        }

        .precio-paso strong {
            font-weight: 700;
            color: var(--texto);
        }

        .precio-aviso {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            max-width: 48rem;
            margin: 1.5rem auto 0;
            padding: 1rem 1.25rem;
            border-radius: 1rem;
            background: rgba(133, 0, 254, 0.12);
            border: 1px solid rgba(133, 0, 254, 0.32);
            font-size: 0.92rem;
            line-height: 1.5;
            text-align: left;
            color: var(--texto-medio);
        }

        .precio-aviso .material-symbols-outlined {
            font-size: 20px !important;
            color: var(--marca-texto);
            flex-shrink: 0;
        }

        .precio-conmutador-opcion.is-activa { color: var(--texto); }

        .precio-digitos {
            display: inline-flex;
            gap: 0.02em;
        }

        .precio-moneda {
            align-self: center;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: var(--texto-tenue);
        }


        .precio-features {
            display: grid;
            gap: 0.6rem;
            margin-top: 1.35rem;
        }

        .precio-features li {
            display: flex;
            align-items: flex-start;
            gap: 0.55rem;
            font-size: 0.92rem;
            line-height: 1.4;
            text-align: left;
            color: var(--texto-medio);
        }

        .precio-features .material-symbols-outlined {
            font-size: 18px !important;
            margin-top: 0.1rem;
            color: var(--marca-texto);
            flex-shrink: 0;
        }

        .precio-separador {
            width: 100%;
            height: 1px;
            margin: 1.35rem 0;
            border: 0;
            background: var(--borde);
        }

        .precio-cta {
            display: block;
            width: 100%;
            padding: 0.95rem 1.25rem;
            border-radius: 0.85rem;
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            text-align: center;
            text-decoration: none;
            color: #ffffff;
            background: #8500fe;
            box-shadow: 0 20px 40px -22px rgba(133, 0, 254, 0.9);
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        }

        .precio-cta:hover {
            transform: translateY(-2px);
            background: #7400e0;
            box-shadow: 0 26px 50px -22px rgba(133, 0, 254, 0.95);
        }

        .precio-legal {
            margin-top: 1.1rem;
            font-size: 0.76rem;
            line-height: 1.5;
            text-align: center;
            color: var(--texto-tenue);
        }

        .cta-final {
            position: relative;
            padding: 7rem 1.5rem;
            background: radial-gradient(120% 140% at 50% 0%, #1b1030 0%, #0a0a16 55%, #050510 100%);
            overflow: hidden;
        }

        .cta-final::before {
            content: '';
            position: absolute;
            top: -30%;
            left: 50%;
            width: 46rem;
            height: 46rem;
            transform: translateX(-50%);
            border-radius: 9999px;
            background: radial-gradient(circle, rgba(133, 0, 254, 0.35) 0%, rgba(133, 0, 254, 0) 62%);
            pointer-events: none;
        }

        .cta-caja {
            position: relative;
            z-index: 1;
            display: grid;
            justify-items: center;
            text-align: center;
            gap: 1.4rem;
            max-width: 44rem;
            margin: 0 auto;
        }

        .cta-marca {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 2.1rem;
            line-height: 1;
            letter-spacing: -0.03em;
        }

        .cta-marca img {
            width: 2.4rem;
            height: 2.4rem;
        }

        .cta-marca b {
            font-weight: 700;
            color: #ffffff;
        }

        .cta-marca i {
            font-style: normal;
            font-weight: 400;
            font-size: 0.62em;
            color: #94a3b8;
        }

        .cta-titulo {
            font-size: clamp(2rem, 4.4vw, 3.35rem);
            font-weight: 800;
            line-height: 1.05;
            letter-spacing: -0.035em;
            color: #ffffff;
        }

        .cta-bajada {
            max-width: 34rem;
            font-size: 1.05rem;
            line-height: 1.6;
            color: rgba(226, 232, 240, 0.72);
        }

        .cta-botones {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.85rem;
            margin-top: 0.6rem;
        }

        .cta-principal,
        .cta-secundario {
            padding: 1.05rem 2.1rem;
            border-radius: 1rem;
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            text-decoration: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        }

        .cta-principal {
            color: #ffffff;
            background: linear-gradient(120deg, #9b1bff, #8500fe 55%, #6a00cc);
            box-shadow: 0 24px 48px -20px rgba(133, 0, 254, 0.95);
        }

        .cta-principal:hover {
            transform: translateY(-2px);
            box-shadow: 0 30px 58px -20px rgba(133, 0, 254, 1);
        }

        .cta-secundario {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.22);
        }

        .cta-secundario:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .cta-nota {
            font-size: 0.85rem;
            font-weight: 600;
            color: rgba(196, 181, 253, 0.9);
        }

        @media (max-width: 640px) {
            .cta-final { padding: 5rem 1.25rem; }

            .cta-principal,
            .cta-secundario {
                width: 100%;
                text-align: center;
            }
        }

@media (max-width: 640px) {
            #pricing { padding: 15rem 1.25rem 4.5rem; }

            #pricing::before { height: 11rem; }
            .precio-card { padding: 1.6rem 1.25rem; }
            .precio-card--pop { padding: 2.2rem 1.35rem 1.75rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .precio-card,
            #pricing.is-visible .precio-card--pop,
            #pricing.is-visible .precio-card--izq,
            #pricing.is-visible .precio-card--der {
                transform: none;
                transition: opacity 0.3s ease;
            }

            .precio-rueda { transition: none; }
        }

        .hero-spline {
            touch-action: pan-y;
            position: absolute;
            top: -30%;
            left: -30%;
            display: block;
            width: 160%;
            height: 160%;
            transform: scale(0.9375);
            transform-origin: center;
            opacity: 0;
            transition: opacity 0.9s ease;
        }

        .hero-spline.is-ready {
            opacity: 1;
        }

        #hero h1 {
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 6px 30px rgba(0, 0, 0, 0.85);
        }


        .hero-titular-palabra {
            display: inline-block;
            white-space: pre;
            will-change: transform, filter, opacity;
        }

        .hero-logos {
            position: absolute;
            bottom: 4rem;
            left: 50%;
            transform: translateX(-50%) translateY(var(--hero-desplazamiento, 0px));
            opacity: var(--hero-salida, 1);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: clamp(0.75rem, 1.6vw, 1.75rem);
            width: min(100%, 1180px);
            padding: 0 1rem;
        }

        .hero-logo-caja {
            display: inline-flex;
            align-items: center;
            will-change: transform, filter, opacity;
        }

        .hero-logo {
            width: auto;
            height: clamp(16px, 3.4vw, 50px);
            opacity: 0.72;
            filter: grayscale(1) brightness(0) invert(1);
        }

        .hero-logo--icono {
            height: clamp(22px, 4.8vw, 70px);
        }

        .hero-logo--relleno {
            filter: grayscale(1) invert(1);
        }

        .hero-logos--rotulos {
            align-items: flex-start;
        }

        .hero-logo-caja--rotulo {
            flex-direction: column;
            gap: 0.55rem;
            width: clamp(4.5rem, 7.5vw, 7rem);
        }

        .hero-logo-rotulo {
            font-size: clamp(0.6rem, 0.85vw, 0.72rem);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--texto-suave);
            text-align: center;
            line-height: 1.25;
        }

        @media (max-width: 1023px) {
            .hero-logos {
                bottom: 3rem;
            }

        }

        .hero-grid {
            display: grid;
            gap: 2.5rem;
            align-items: center;
            width: 100%;
        }

        .hero-copy {
            order: 1;
            text-align: left;
        }

        .hero-fondo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .hero-fondo canvas {
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        .hero-fondo.is-ready canvas {
            opacity: 1;
        }

        .hero-visual {
            order: 2;
            position: relative;
            width: 100%;
            height: min(calc(78vw + 150px), 530px, calc(100vh - 31rem));
            border-radius: 1.75rem;
            overflow: hidden;
        }

        .hero-visual-fallback {
            position: absolute;
            inset: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            text-align: center;
            font-size: 0.9rem;
            color: var(--texto-tenue);
            background: var(--superficie);
            border: 1px solid var(--borde);
            border-radius: 1.75rem;
        }

        .hero-spline.is-ready ~ .hero-visual-fallback {
            display: none;
        }

        .hero-sello {
            position: absolute;
            top: max(0px, calc(clamp(0.6rem, 2.2vh, 1.5rem) - 20px));
            left: 50%;
            z-index: 3;
            width: clamp(78px, 17vw, 104px);
            transform: translateX(-50%);
            border-radius: 0.7rem;
            overflow: hidden;
            display: block;
            padding: 2px;
            background: #171106;
            transition: transform 0.25s ease;
            box-shadow:
                0 0 0 1px rgba(214, 168, 88, 0.36),
                0 10px 26px rgba(0, 0, 0, 0.5),
                0 0 18px rgba(226, 178, 92, 0.14);
            animation: selloResplandor 5.4s ease-in-out infinite;
        }

        .hero-sello:hover { transform: translateX(-50%) scale(1.04); }
        .hero-sello:focus-visible { outline: 2px solid var(--marca-texto); outline-offset: 3px; }

        .hero-sello--fijo {
            position: relative;
            top: auto;
            left: auto;
            width: clamp(132px, 21vw, 186px);
            margin: 0 0 1.6rem;
            transform: none;
        }

        .hero-sello--fijo:hover { transform: none; }

        .hero-sello img {
            position: relative;
            z-index: 1;
            display: block;
            width: 100%;
            height: auto;
            border-radius: 0.55rem;
        }

        .hero-sello::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 0;
            width: 190%;
            aspect-ratio: 1;
            background: conic-gradient(
                #6d5321, #b98f3d, #f7dfa2, #fffaef, #f7dfa2, #b98f3d,
                #6d5321, #a97f34, #f2d492, #b98f3d, #6d5321
            );
            transform: translate(-50%, -50%);
            animation: selloAro 6s linear infinite;
        }

        @keyframes selloAro {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .hero-sello::after {
            content: '';
            position: absolute;
            z-index: 2;
            top: -60%;
            left: -60%;
            width: 55%;
            height: 220%;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 246, 219, 0.18) 35%,
                rgba(255, 253, 240, 0.82) 50%,
                rgba(255, 246, 219, 0.18) 65%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(18deg) translateX(-140%);
            animation: selloBarrido 5.4s cubic-bezier(0.3, 0, 0.25, 1) infinite;
        }

        @keyframes selloBarrido {
            0%, 10% { transform: rotate(18deg) translateX(-140%); opacity: 0; }
            16% { opacity: 1; }
            38% { opacity: 1; }
            46%, 100% { transform: rotate(18deg) translateX(420%); opacity: 0; }
        }

        @keyframes selloResplandor {
            0%, 100% {
                box-shadow:
                    0 0 0 1px rgba(214, 168, 88, 0.36),
                    0 10px 26px rgba(0, 0, 0, 0.5),
                    0 0 18px rgba(226, 178, 92, 0.14);
            }
            50% {
                box-shadow:
                    0 0 0 1px rgba(238, 199, 120, 0.6),
                    0 10px 26px rgba(0, 0, 0, 0.5),
                    0 0 34px rgba(238, 199, 120, 0.32);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-sello {
                animation: none;
            }

            .hero-sello::before {
                animation: none;
            }

            .hero-sello::after {
                animation: none;
                opacity: 0;
            }
        }

        #hero .hero-copy h1 {
            margin-bottom: 0;
        }

        @media (min-width: 1024px) {
            .hero-grid {
                grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
                gap: 2.75rem;
            }
            .hero-visual {
                height: min(clamp(510px, calc(34vw + 150px), 630px), calc(100vh - 20rem));
            }

            .hero-sello {
                width: clamp(88px, 6.6vw, 98px);
            }
        }

        #hero {
            position: relative;
            width: 100%;
            max-width: 100vw;
            min-height: calc(512vh - 4rem);
        }

        .hero-pin {
            position: sticky;
            top: 4rem;
            height: calc(100vh - 4rem);
            display: flex;
            align-items: center;
            padding: 5rem 1rem 11rem;
        }
        @media (prefers-reduced-motion: reduce) {
            #hero {
                min-height: calc(100vh - 4rem);
            }

            .hero-pin {
                position: static;
                height: auto;
                min-height: calc(100vh - 4rem);
            }
        }
        @media (max-width: 1023px) {
            .hero-pin {
                padding-bottom: 10rem;
            }

        }

        .hero-content {
            position: relative;
            z-index: 10;
            width: 100%;
            opacity: var(--hero-salida, 1);
            transform: translateY(var(--hero-desplazamiento, 0px));
            will-change: opacity, transform;
        }

        /* Animación de entrada suave */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Animación de brillo al terminar */
        @keyframes pulse-light {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        .stat-item {
            animation: slideInUp 0.6s ease-out forwards;
            opacity: 0;
        }

        .stat-item:nth-child(1) { animation-delay: 0.1s; }
        .stat-item:nth-child(2) { animation-delay: 0.2s; }
        .stat-item:nth-child(3) { animation-delay: 0.3s; }
        .stat-item:nth-child(4) { animation-delay: 0.4s; }

        .stat-number {
            font-variant-numeric: tabular-nums;
            transition: all 0.3s ease-out;
        }

        .stat-number.animating {
            animation: pulse-light 0.5s ease-out;
        }

        
        /* Fix for mobile carousel */
        @media (max-width: 768px) {
            .carousel-card {
                width: 280px !important;
                min-width: 280px !important;
                max-width: 280px !important;
            }
            
            #carousel-container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            .hero-content h1 {
                font-size: 2.5rem !important;
                line-height: 1.2 !important;
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            #grid-demo {
                padding-left: 1rem;
                padding-right: 1rem;
                width: 100%;
            }
            
            .glass-card-light {
                width: 100%;
                max-width: 100%;
            }
        }
        
        /* Force full width containers on mobile */
        @media (max-width: 640px) {
            section, .max-w-\[1200px\], .max-w-4xl, .max-w-7xl {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
                width: 100% !important;
                max-width: 100vw !important;
                overflow: hidden !important;
            }
            
            .px-6, .px-4, .px-8 {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
            
            .grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 1rem !important;
            }
            
            .text-4xl, .text-5xl {
                font-size: 1.875rem !important;
                line-height: 2.25rem !important;
            }

            #hero {
                overflow: visible !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .tab-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .tab-content {
            animation: fadeIn 0.3s ease-in-out;
        }

        .tab-content.hidden {
            display: none;
        }

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

        @media (max-width: 768px) {
            .tab-btn {
                padding: 0.75rem 1rem;
                font-size: 0.875rem;
            }
            
            table {
                font-size: 0.875rem;
            }
            
            table th, table td {
                padding: 0.75rem;
            }
        }
        /* ================ ESTILOS BASE ================ */
        .code-glow {
            box-shadow: 0 0 30px rgba(59, 130, 246, 0.1);
            transition: all 0.3s ease-in-out;
        }

        .code-glow:hover {
            box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.5);
        }

        /* ================ MOBILE (< 640px) ================ */
        @media (max-width: 639px) {
            /* Ajustar el tamaño del código */
            .code-glow {
                font-size: 0.65rem; /* text-xs */
                margin: 0 -1rem; /* Extender a los lados si está dentro de un contenedor con padding */
            }

            .code-glow pre {
                word-break: break-word;
                white-space: pre-wrap;
                overflow-wrap: break-word;
            }

            /* Header más compacto */
            .code-glow .size-2 {
                width: 0.5rem;
                height: 0.5rem;
        }

        /* Reducir padding en móvil extremo */
        @media (max-width: 374px) {
                .code-glow {
                    font-size: 0.6rem;
                    border-radius: 0.5rem;
                }

                .code-glow > div:first-child {
                    gap: 0.25rem;
                    padding: 0.5rem 0.75rem;
                }

                .code-glow code {
                    display: block;
                    word-break: break-all;
                }
            }
        }

        /* ================ PEQUEÑO (640px - 767px) ================ */
        @media (min-width: 640px) and (max-width: 767px) {
            .code-glow {
                font-size: 0.875rem; /* text-sm */
            }

            .code-glow pre {
                padding: 1rem;
            }

            /* Scroll horizontal suave */
            .code-glow .overflow-x-auto {
                scroll-behavior: smooth;
            }
        }

        /* ================ TABLET (768px - 1023px) ================ */
        @media (min-width: 768px) and (max-width: 1023px) {
            .code-glow {
                font-size: 0.875rem; /* text-sm */
            }

            .code-glow pre {
                padding: 1.5rem;
            }
        }

        /* ================ DESKTOP (1024px+) ================ */
        @media (min-width: 1024px) {
            .code-glow {
                font-size: 0.875rem; /* text-sm */
            }

            .code-glow:hover {
                transform: translateY(-2px);
            }

            .code-glow pre {
                padding: 1.5rem;
            }
        }

        /* ================ PANTALLAS MUY GRANDES (1440px+) ================ */
        @media (min-width: 1440px) {
            .code-glow {
                font-size: 1rem;
            }
        }

        /* ================ PANTALLAS EXTRA GRANDES (2000px+) ================ */
        @media (min-width: 2000px) {
            .code-glow {
                font-size: 1.125rem;
                padding: 2rem;
            }
        }

        /* ================ TERMINAL ================ */
        .code-glow {
            background-color: #0a0a14;
            border-color: var(--borde);
        }

        .code-glow > div:first-child {
            background-color: var(--superficie-alta);
            border-color: var(--borde);
        }

        /* ================ ORIENTACIÓN (OPCIONAL) ================ */
        @media (orientation: landscape) and (max-height: 500px) {
            .code-glow {
                max-height: 300px;
                overflow-y: auto;
            }
        }

        /* ================ SCROLL SMOOTH EN MÓVIL ================ */
        @media (prefers-reduced-motion: no-preference) {
            .code-glow {
                scroll-behavior: smooth;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }

        /* ================ PANTALLAS TÁCTILES ================ */
        @media (hover: none) and (pointer: coarse) {
            .code-glow {
                border: 2px solid;
                border-color: rgba(59, 130, 246, 0.3);
            }

            .code-glow:active {
                box-shadow: 0 0 50px rgba(59, 130, 246, 0.3);
            }
        }

        /* ================ HIGH DENSITY DISPLAYS (Retina) ================ */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .code-glow {
                border-width: 0.5px;
            }
        }

        /* ================ IMPROVED ACCESSIBILITY ================ */
        @media (prefers-contrast: more) {
            .code-glow {
                border-width: 2px;
                background-color: #000;
            }

            .code-glow pre {
                color: #fff;
            }
        }

        /* ===== CONTENT VISIBILITY (performance) ===== */
        section:not(:first-child) {
            content-visibility: auto;
            contain-intrinsic-size: 0 700px;
        }

        /* ================ IMPRESIÓN ================ */
        @media print {
            .code-glow {
                page-break-inside: avoid;
                border: 1px solid #000;
                box-shadow: none;
            }

            .code-glow pre {
                background-color: #fff;
                color: #000;
            }
        }

        /* Estilos para la funcionalidad de cards */
        .card-content {
            display: none;
        }

        .card-content.active {
            display: block;
        }

        .card-btn.active {
            background-color: #8500fe;
            color: white;
            border-color: #8500fe;
        }

        /* Colores adicionales para las diferentes cards */
        .text-accent-blue {
            color: #3b82f6;
        }

        .bg-accent-blue\/20 {
            background-color: rgba(59, 130, 246, 0.2);
        }

        .text-accent-red {
            color: #ef4444;
        }

        .bg-accent-red\/20 {
            background-color: rgba(239, 68, 68, 0.2);
        }

        .hero-app {
            --app-fondo: #0b0f19;
            --app-panel: #0f1522;
            --app-borde: #1e2636;
            --app-texto: #e8ecf5;
            --app-suave: #8b95ab;
            --app-lila: #cfa6ff;
            --app-azul: #2b7fff;
            --app-ancho: 1240px;
            --app-alto: 600px;
            position: absolute;
            inset: 1rem 1rem 2.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
            pointer-events: none;
            z-index: 12;
        }

        .hero-app.is-on { pointer-events: auto; }

        .hero-app-titulo {
            margin: 0;
            font-size: clamp(1.75rem, 3.4vw, 3rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            text-align: center;
            color: var(--texto);
        }

        .hero-app-titulo b { color: var(--marca-texto); }

        .hero-app-banda {
            flex: 1;
            min-height: 0;
            width: 100%;
            display: grid;
            place-items: center;
        }

        .hero-app-caja {
            position: relative;
            flex: 0 0 auto;
            width: 100%;
            display: grid;
            place-items: center;
        }

        .hero-app.is-on {
            opacity: var(--inbox-entrada, 0);
            visibility: visible;
        }

        .app {
            width: var(--app-ancho);
            height: var(--app-alto);
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            border-radius: 0.9rem;
            overflow: hidden;
            background: var(--app-fondo);
            border: 1px solid var(--app-borde);
            box-shadow: 0 50px 110px -45px rgba(0, 0, 0, 0.95);
            transform: scale(var(--app-escala, 1)) translateY(calc((1 - var(--inbox-entrada, 0)) * 26px));
            transform-origin: top center;
            font-size: 13px;
            line-height: 1.4;
            color: var(--app-texto);
            text-align: left;
        }

        .app-top {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--app-borde);
        }

        .app-top img { width: 104px; height: auto; }

        .app-agente {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-weight: 600;
        }

        .app-agente i {
            display: grid;
            place-items: center;
            width: 22px;
            height: 22px;
            border-radius: 0.35rem;
            background: #1b2233;
            font-style: normal;
            font-size: 12px;
        }

        .app-top-fin {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            margin-left: auto;
            color: var(--app-suave);
        }

        .app-punto {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            margin-right: 0.4rem;
        }

        .app-cuerpo {
            display: grid;
            grid-template-columns: 200px 296px minmax(0, 1fr) 300px;
            grid-template-rows: minmax(0, 1fr);
            height: 100%;
        }

        .app-nav {
            padding: 0.7rem 0.6rem;
            border-right: 1px solid var(--app-borde);
        }

        .app-nav a {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.5rem 0.6rem;
            border-radius: 0.5rem;
            color: var(--app-suave);
            text-decoration: none;
        }

        .app-nav a b {
            margin-left: auto;
            font-weight: 600;
        }

        .app-nav a .material-symbols-outlined {
            font-size: 17px !important;
            color: var(--app-lila);
        }

        .app-nav a.is-activa {
            background: rgba(133, 0, 254, 0.22);
            color: var(--app-texto);
        }

        .app-nav-grupo {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            margin-top: 0.55rem;
            padding: 0.55rem 0.6rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.5rem;
            color: var(--app-suave);
        }

        .app-nav-grupo .material-symbols-outlined { font-size: 17px !important; }
        .app-nav-grupo span:last-child { margin-left: auto; }

        .app-lista { border-right: 1px solid var(--app-borde); }

        .app-lista-top {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 0.7rem;
        }

        .app-tabs {
            display: inline-flex;
            border-radius: 0.45rem;
            overflow: hidden;
            border: 1px solid var(--app-borde);
        }

        .app-tabs span {
            padding: 0.3rem 0.8rem;
            font-weight: 600;
            color: var(--app-suave);
        }

        .app-tabs span.is-on { background: #e8ecf5; color: #10161f; }

        .app-lista-top .material-symbols-outlined {
            font-size: 17px !important;
            color: var(--app-suave);
        }

        .app-lista-top .material-symbols-outlined:first-of-type { margin-left: auto; }

        .app-chat {
            display: flex;
            gap: 0.6rem;
            align-items: flex-start;
            padding: 0.6rem 0.7rem;
            border-radius: 0.5rem;
            margin: 0 0.5rem;
            opacity: 0;
            transform: translateX(-12px);
            transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
        }

        .app-chat.is-on { opacity: 1; transform: translateX(0); }
        .app-chat.is-activo { background: #171d2b; box-shadow: inset 0 0 0 1px var(--app-borde); }

        .app-avatar {
            position: relative;
            flex-shrink: 0;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #4b5567;
            display: grid;
            place-items: center;
        }

        .app-avatar .material-symbols-outlined {
            font-size: 22px !important;
            color: #cdd4e2;
        }

        .app-canal {
            position: absolute;
            right: -3px;
            bottom: -3px;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            border: 2px solid var(--app-fondo);
            background: #fff;
            display: grid;
            place-items: center;
            overflow: hidden;
        }

        .app-canal img { width: 13px; height: 13px; }

        .app-chat { cursor: pointer; }
        .app-chat:hover { background: #141a27; }

        .app-foto {
            max-width: 62%;
            align-self: flex-end;
            flex-shrink: 0;
            border-radius: 1rem;
            overflow: hidden;
            background: #131a26;
            opacity: 0;
            transform: translateY(9px);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .app-foto.is-on { opacity: 1; transform: translateY(0); }
        .app-foto img { display: block; width: 100%; height: 108px; object-fit: cover; }
        .app-foto span { display: block; padding: 0.4rem 0.7rem; color: var(--app-suave); font-size: 12px; }

        .app-chat-txt { min-width: 0; flex: 1; }
        .app-chat-txt p { margin: 0; }
        .app-chat-nombre { font-weight: 700; }

        .app-chat-linea {
            color: var(--app-suave);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .app-chat-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.3rem;
            color: var(--app-suave);
            font-size: 11px;
        }

        .app-chat-meta .material-symbols-outlined { font-size: 15px !important; }

        .app-conv { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--app-borde); }

        .app-conv-top {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 0.9rem;
            color: var(--app-suave);
        }

        .app-conv-top .material-symbols-outlined { font-size: 17px !important; }
        .app-conv-top .app-conv-iconos { margin-left: auto; display: inline-flex; gap: 0.8rem; }

        .app-bot-activo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            padding: 0.42rem;
            background: var(--app-lila);
            color: #241638;
            font-weight: 700;
        }

        .app-bot-activo .material-symbols-outlined { font-size: 16px !important; }

        .app-mensajes {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 0.5rem;
            padding: 0.85rem;
            overflow-x: hidden;
            overflow-y: auto;
            scroll-behavior: auto;
            scrollbar-width: thin;
            scrollbar-color: #2a3446 transparent;
        }

        .app-mensajes::-webkit-scrollbar { width: 6px; }
        .app-mensajes::-webkit-scrollbar-track { background: transparent; }
        .app-mensajes::-webkit-scrollbar-thumb { background: #2a3446; border-radius: 999px; }

        .app-burbuja {
            max-width: 76%;
            flex-shrink: 0;
            padding: 0.5rem 0.8rem;
            border-radius: 1rem;
            opacity: 0;
            transform: translateY(9px);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .app-burbuja.is-on { opacity: 1; transform: translateY(0); }
        .app-burbuja--in { align-self: flex-start; background: #2a3140; }
        .app-burbuja--out { align-self: flex-end; background: var(--app-azul); color: #fff; }

        .app-visto {
            align-self: flex-end;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--app-suave);
            font-size: 11px;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .app-visto.is-on { opacity: 1; }
        .app-visto .material-symbols-outlined { font-size: 14px !important; }

        .app-foto--in { align-self: flex-start; }

        .app-video {
            max-width: 62%;
            align-self: flex-end;
            flex-shrink: 0;
            position: relative;
            border-radius: 1rem;
            overflow: hidden;
            background: #131a26;
            opacity: 0;
            transform: translateY(9px);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .app-video.is-on { opacity: 1; transform: translateY(0); }
        .app-video--in { align-self: flex-start; }
        .app-video video { display: block; width: 100%; height: 128px; object-fit: cover; background: #0d121c; }
        .app-video span { display: block; padding: 0.4rem 0.7rem; color: var(--app-suave); font-size: 12px; }

        .app-video i {
            position: absolute;
            top: 0.45rem;
            left: 0.55rem;
            display: inline-flex;
            align-items: center;
            gap: 0.2rem;
            padding: 0.1rem 0.4rem;
            border-radius: 999px;
            background: rgba(5, 5, 16, 0.72);
            font-style: normal;
            font-size: 10px;
            font-weight: 600;
            color: #fff;
        }

        .app-escribiendo {
            align-self: flex-start;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 0.6rem 0.8rem;
            border-radius: 1rem;
            background: #2a3140;
        }

        .app-escribiendo i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--app-suave);
            animation: appPunto 1.1s infinite ease-in-out;
        }

        .app-escribiendo i:nth-child(2) { animation-delay: 0.15s; }
        .app-escribiendo i:nth-child(3) { animation-delay: 0.3s; }

        @keyframes appPunto {
            0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
            30% { opacity: 1; transform: translateY(-3px); }
        }

        .app-tabs span { cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }

        .app-bot-activo--humano { background: var(--app-azul); color: #fff; }

        .app-chat-sin-leer {
            display: grid;
            place-items: center;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 999px;
            background: var(--app-azul);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
        }

        .app-lista-hilos { overflow-y: auto; max-height: 100%; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #2a3446 transparent; }
        .app-lista-hilos::-webkit-scrollbar { width: 6px; }
        .app-lista-hilos::-webkit-scrollbar-thumb { background: #2a3446; border-radius: 999px; }
        .app-lista { display: flex; flex-direction: column; min-height: 0; }
        .app-lista-top { flex-shrink: 0; }

        .app-composer input {
            flex: 1;
            min-width: 0;
            padding: 0;
            border: 0;
            background: none;
            color: var(--app-texto);
            font: inherit;
            outline: none;
        }

        .app-composer input::placeholder { color: var(--app-suave); }

        .app-enviar {
            display: grid;
            place-items: center;
            width: 26px;
            height: 26px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: var(--app-azul);
            color: #fff;
            cursor: pointer;
        }

        .app-enviar .material-symbols-outlined { font-size: 15px !important; }

        .app-composer {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin: 0 0.85rem 0.85rem;
            padding: 0.6rem 0.8rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.6rem;
            color: var(--app-suave);
        }

        .app-composer .material-symbols-outlined { font-size: 17px !important; }
        .app-composer .app-composer-iconos { margin-left: auto; display: inline-flex; gap: 0.75rem; }
        .app-composer-wa { color: #25d366; }

        .app-ficha { padding: 0.9rem; min-height: 0; overflow-y: auto; }

        .app-ficha-avatar {
            position: relative;
            width: 74px;
            height: 74px;
            margin: 0.2rem auto 1rem;
            border-radius: 50%;
            background: #4b5567;
            display: grid;
            place-items: center;
        }

        .app-ficha-avatar .material-symbols-outlined { font-size: 46px !important; color: #cdd4e2; }

        .app-ficha dl {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 0.5rem 0.8rem;
            margin: 0;
        }

        .app-ficha dt { color: var(--app-texto); }

        .app-ficha dd {
            margin: 0;
            color: var(--app-suave);
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .app-ficha-pie {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 1rem;
            padding-top: 0.7rem;
            border-top: 1px solid var(--app-borde);
        }

        .app-ficha-boton {
            padding: 0.4rem 0.8rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.4rem;
        }

        .app-pantallas {
            position: relative;
            flex: 1;
            min-height: 0;
        }

        .app-pantalla {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transform: translateX(26px);
            transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease;
        }

        .app-pantalla.is-previa { transform: translateX(-26px); }
        .app-pantalla.is-on { opacity: 1; visibility: visible; transform: none; }

        .app-fuente-txt { flex: 1; min-width: 0; }
        .app-fuente-txt p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .app-fuente-txt p:last-child { color: var(--app-suave); font-size: 11px; }

        .app-estado--curso { background: rgba(207, 166, 255, 0.16); color: var(--app-lila); }

        .hero-app-flecha {
            position: absolute;
            top: 50%;
            z-index: 3;
            display: grid;
            place-items: center;
            width: 3rem;
            height: 3rem;
            margin-top: -1.5rem;
            padding: 0;
            border: 1px solid var(--borde);
            border-radius: 50%;
            background: rgba(14, 14, 24, 0.76);
            color: var(--texto);
            cursor: pointer;
            transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
        }

        .hero-app-flecha:hover { background: var(--marca); border-color: var(--marca); }
        .hero-app-flecha:disabled { opacity: 0.28; cursor: default; }
        .hero-app-flecha:disabled:hover { background: rgba(14, 14, 24, 0.76); border-color: var(--borde); }
        .hero-app-flecha .material-symbols-outlined { font-size: 26px !important; }
        .hero-app-flecha--izq { right: min(calc(50% + var(--app-ancho) * var(--app-escala, 1) / 2 + 1rem), calc(100% - 3.5rem)); }
        .hero-app-flecha--der { left: min(calc(50% + var(--app-ancho) * var(--app-escala, 1) / 2 + 1rem), calc(100% - 3.5rem)); }

        .hero-app-puntos {
            position: absolute;
            left: 50%;
            bottom: -3.5rem;
            z-index: 3;
            display: flex;
            gap: 0.5rem;
            transform: translateX(-50%);
        }

        .hero-app-punto {
            width: 0.5rem;
            height: 0.5rem;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: var(--superficie-suave);
            cursor: pointer;
            transition: width 0.3s ease, background-color 0.3s ease;
        }

        .hero-app-punto.is-on { width: 1.6rem; background: var(--marca-texto); }

        @media (max-width: 1023px) {
            .hero-app-flecha { width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; }
            .hero-app-flecha .material-symbols-outlined { font-size: 21px !important; }
            .hero-app-flecha--izq { right: auto; left: 0; }
            .hero-app-flecha--der { left: auto; right: 0; }
        }

        @media (max-width: 1023px) {
            .hero-app { --app-ancho: 900px; --app-alto: 560px; }
            .app-cuerpo { grid-template-columns: 176px 244px minmax(0, 1fr); }
            .app-cuerpo > .app-ficha { display: none; }
        }

        @media (max-width: 639px) {
            .hero-app { --app-ancho: 380px; --app-alto: 540px; }
            .app-top { gap: 0.5rem; padding: 0.6rem 0.7rem; }
            .app-top img { width: 78px; }
            .app-top .app-agente { display: none; }
            .app-top-fin { gap: 0.6rem; }
            .app-top-fin > span:not(:last-child) { display: none; }
            .app-cuerpo { grid-template-columns: 148px minmax(0, 1fr); }
            .app-cuerpo > .app-nav { display: none; }
            .app-chat { gap: 0.45rem; padding: 0.5rem 0.45rem; margin: 0 0.3rem; }
            .app-chat-meta { display: none; }
            .app-lista-top { gap: 0.35rem; padding: 0.5rem; }
            .app-lista-top .material-symbols-outlined:not(:first-of-type) { display: none; }
        }

        .app-top--flujo {
            justify-content: flex-start;
            gap: 0.75rem;
            padding: 0.5rem 0.9rem;
        }

        .app-top--flujo .fruta {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            margin: 0 auto;
            font-size: 15px;
            color: var(--app-suave);
        }

        .app-top--flujo .fruta button {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.15rem 0.35rem;
            border: 0;
            border-radius: 0.35rem;
            background: none;
            color: inherit;
            font: inherit;
            cursor: pointer;
        }

        .app-top--flujo .fruta button:hover { background: rgba(255, 255, 255, 0.07); }
        .app-top--flujo .fruta .material-symbols-outlined { font-size: 18px !important; }
        .app-top--flujo .fruta b { color: var(--app-texto); font-weight: 600; }

        .fbarra-fin { display: inline-flex; align-items: center; gap: 0.7rem; margin-left: auto; }
        .fbarra-fin .material-symbols-outlined { font-size: 19px !important; color: var(--app-lila); }

        .fpublicar {
            padding: 0.42rem 1.15rem;
            border: 0;
            border-radius: 0.5rem;
            background: var(--marca);
            color: #fff;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .fmas {
            display: grid;
            place-items: center;
            width: 30px;
            height: 26px;
            border: 1px solid var(--app-borde);
            border-radius: 0.45rem;
            color: var(--app-suave);
        }

        .flienzo {
            position: relative;
            height: 100%;
            overflow: hidden;
            background: #0a0f1c;
        }

        .fcables { position: absolute; inset: 0; width: 100%; height: 100%; }
        .fcables path { fill: none; stroke: #9aa6bd; stroke-width: 1.4; opacity: 0.75; }
        .fcables path.es-rojo { stroke: #ef4444; opacity: 1; }

        .fpaso {
            position: absolute;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 11px;
            color: var(--app-suave);
        }

        .fpaso .material-symbols-outlined { font-size: 14px !important; color: var(--app-lila); }

        .fnodo {
            position: absolute;
            border-radius: 0.35rem;
            background: #10182a;
            border: 1px solid #1c2740;
            box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.95);
            cursor: pointer;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }

        .fnodo:hover { border-color: #33405e; }
        .fnodo.is-sel { border-color: var(--app-lila); box-shadow: 0 0 0 2px rgba(207, 166, 255, 0.28); }

        .fnodo-cab {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.4rem 0.5rem 0.45rem;
            border-bottom: 2px solid var(--fcolor, #8b95ab);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.25;
            color: var(--app-texto);
        }

        .fnodo-cab .material-symbols-outlined { font-size: 14px !important; color: var(--fcolor, #8b95ab); flex-shrink: 0; }
        .fnodo--cond { --fcolor: #2dd4bf; }
        .fnodo--accion { --fcolor: #b47cff; }
        .fnodo--salto { --fcolor: #cbd5e1; }
        .fnodo--mensaje { --fcolor: #cbd5e1; }

        .fnodo-cuerpo { padding: 0.4rem; display: grid; gap: 0.35rem; }

        .fcond {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.4rem;
            border: 1px solid #1c2740;
            border-radius: 0.3rem;
            font-size: 10px;
            line-height: 1.3;
            color: var(--app-suave);
        }

        .fcond span { flex: 1; min-width: 0; }
        .fcond .material-symbols-outlined { flex: 0 0 auto; font-size: 13px !important; color: var(--app-lila); }
        .fcond b { color: var(--app-texto); font-weight: 600; }

        .fcaja {
            padding: 0.4rem;
            border: 1px solid #1c2740;
            border-radius: 0.3rem;
            font-size: 10px;
            line-height: 1.4;
            color: var(--app-suave);
        }

        .fcaja p { margin: 0; }
        .fmarca { display: flex; align-items: center; justify-content: center; gap: 0.3rem; color: var(--app-texto); font-weight: 600; }
        .fmarca img { width: 11px; height: 11px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); }
        .fmarca .material-symbols-outlined { font-size: 12px !important; color: #f59e0b; }
        .fcentro { text-align: center; }
        .fsalida { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; }

        .fpunto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .fpunto--ok { background: #22c55e; }
        .fpunto--no { border: 1.5px solid #ef4444; }

        .fburbuja {
            padding: 0.4rem 0.5rem;
            border-radius: 0.4rem;
            background: #1b2740;
            font-size: 10px;
            line-height: 1.35;
            color: var(--app-texto);
        }

        .fcampo {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.35rem 0.4rem;
            border: 1px solid #1c2740;
            border-radius: 0.3rem;
            font-size: 10px;
            color: var(--app-suave);
        }

        .fcampo span { flex: 1; min-width: 0; }
        .fcampo .material-symbols-outlined { font-size: 13px !important; }

        .fnodo-pie {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.3rem;
            padding: 0.3rem 0.5rem 0.4rem;
            font-size: 10px;
            color: var(--app-suave);
        }

        .fanilla { width: 7px; height: 7px; border: 1.5px solid #8b95ab; border-radius: 50%; }

        .fherramientas {
            position: absolute;
            left: 50%;
            bottom: 0.7rem;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 0.55rem;
        }

        .fherramientas span,
        .fherramientas .fojo {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border-radius: 0.4rem;
            color: var(--app-suave);
        }

        .fherramientas .material-symbols-outlined { font-size: 18px !important; }
        .fojo { border: 1px solid #d7dbe4; color: var(--app-texto); }

        .fanadir {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            border-radius: 0.5rem;
            background: #f59e0b;
        }

        .fanadir i {
            display: grid;
            place-items: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #22c55e;
            color: #fff;
            font-style: normal;
            font-size: 15px;
            font-weight: 700;
            line-height: 1;
        }

        .fmapa {
            position: absolute;
            right: 0.7rem;
            bottom: 0.7rem;
            width: 132px;
            padding: 0.45rem;
            border: 1px solid var(--marca);
            border-radius: 0.4rem;
            background: #171a12;
            overflow: hidden;
        }

        .fmapa-piezas { display: flex; flex-wrap: wrap; gap: 3px; opacity: 0.55; }
        .fmapa-piezas i { display: block; width: 13px; height: 9px; border-radius: 1px; background: #7b8296; }
        .fmapa b { display: block; margin-top: 0.35rem; font-size: 11px; font-weight: 700; color: var(--app-texto); }
        .fmapa img { position: absolute; right: 0.3rem; bottom: 0.2rem; width: 46px; height: 46px; }

        .flujos-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 5;
            margin-top: 0.3rem;
            min-width: 190px;
            padding: 0.3rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.5rem;
            background: var(--app-panel);
            box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.95);
        }

        .flujos-menu[hidden] { display: none; }

        .flujos-menu button {
            display: block;
            width: 100%;
            padding: 0.4rem 0.55rem;
            border: 0;
            border-radius: 0.35rem;
            background: none;
            color: var(--app-suave);
            font: inherit;
            font-size: 12px;
            text-align: left;
            cursor: pointer;
        }

        .flujos-menu button:hover { background: rgba(255, 255, 255, 0.07); }
        .flujos-menu button.is-on { background: rgba(133, 0, 254, 0.24); color: var(--app-texto); font-weight: 600; }

        @media (max-width: 1023px) {
            .fmapa { display: none; }
        }

        .app-ia {
            display: grid;
            grid-template-columns: 212px minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr);
            height: 100%;
            background: #0b0f1a;
        }

        .ia-lateral {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
            min-height: 0;
            padding: 0.6rem 0.5rem;
            border-right: 1px solid var(--app-borde);
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #2a3446 transparent;
        }

        .ia-lateral::-webkit-scrollbar { width: 5px; }
        .ia-lateral::-webkit-scrollbar-thumb { background: #2a3446; border-radius: 999px; }

        .ia-lateral button {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            gap: 0.6rem;
            padding: 0.5rem 0.55rem;
            border: 0;
            border-radius: 0.45rem;
            background: none;
            color: var(--app-suave);
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .ia-lateral button .material-symbols-outlined { font-size: 18px !important; color: var(--app-lila); }
        .ia-lateral button:hover { background: rgba(255, 255, 255, 0.05); }
        .ia-lateral button.is-on { background: #161c2b; color: var(--marca-texto); }
        .ia-lateral button.is-on .material-symbols-outlined { color: var(--marca-texto); }

        .ia-cuerpo { min-width: 0; min-height: 0; padding: 0.8rem; }

        .ia-tarjeta {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            border: 1px solid var(--app-borde);
            border-radius: 0.6rem;
            background: #0d121f;
            overflow: hidden;
        }

        .ia-tabs {
            display: flex;
            gap: 0.3rem;
            flex-shrink: 0;
            padding: 0.4rem 0.5rem 0;
            background: #121828;
            border-bottom: 1px solid var(--app-borde);
        }

        .ia-tabs button {
            padding: 0.5rem 0.8rem;
            border: 0;
            border-bottom: 2px solid transparent;
            background: none;
            color: var(--app-suave);
            font: inherit;
            cursor: pointer;
        }

        .ia-tabs button.is-on { color: var(--app-texto); border-bottom-color: var(--marca-texto); }

        .ia-fila {
            display: grid;
            grid-template-columns: 178px minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr);
            gap: 0.9rem;
            flex: 1;
            min-height: 0;
            padding: 0.9rem;
        }

        .ia-fila--solo { grid-template-columns: minmax(0, 1fr); }

        .ia-submenu {
            align-self: start;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--app-borde);
            border-radius: 0.5rem;
            background: #121828;
            overflow: hidden;
        }

        .ia-submenu button {
            padding: 0.6rem 0.7rem;
            border: 0;
            border-right: 2px solid transparent;
            background: none;
            color: var(--app-suave);
            font: inherit;
            text-align: right;
            cursor: pointer;
        }

        .ia-submenu button:hover { background: rgba(255, 255, 255, 0.05); }
        .ia-submenu button.is-on { color: var(--app-texto); border-right-color: var(--marca-texto); }

        .ia-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

        .ia-nuevo {
            align-self: flex-end;
            flex-shrink: 0;
            margin-bottom: 0.7rem;
            padding: 0.5rem 1.1rem;
            border: 0;
            border-radius: 0.4rem;
            background: var(--marca);
            color: #fff;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .ia-cab {
            flex-shrink: 0;
            margin: 0 0 0.2rem;
            padding-bottom: 0.6rem;
            text-align: center;
            font-weight: 700;
            color: var(--app-texto);
        }

        .ia-tabla {
            min-height: 0;
            overflow-y: auto;
            scroll-behavior: auto;
            scrollbar-width: thin;
            scrollbar-color: #2a3446 transparent;
        }

        .ia-tabla::-webkit-scrollbar { width: 6px; }
        .ia-tabla::-webkit-scrollbar-thumb { background: #2a3446; border-radius: 999px; }

        .ia-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.62rem 0.5rem;
            border-top: 1px solid var(--app-borde);
            cursor: pointer;
        }

        .ia-item:hover { background: rgba(255, 255, 255, 0.04); }
        .ia-item.is-on { background: rgba(133, 0, 254, 0.16); }
        .ia-item span { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ia-item .material-symbols-outlined { font-size: 17px !important; color: var(--app-suave); flex-shrink: 0; }

        .ia-soporte {
            position: absolute;
            right: 0.8rem;
            bottom: 0.8rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
            color: var(--app-texto);
            font-size: 11px;
            font-weight: 700;
        }

        .ia-soporte i {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #25d366;
        }

        .ia-soporte i .material-symbols-outlined { font-size: 20px !important; color: #fff; }

        @media (max-width: 1023px) {
            .app-ia { grid-template-columns: 168px minmax(0, 1fr); }
            .ia-fila { grid-template-columns: 150px minmax(0, 1fr); gap: 0.6rem; padding: 0.6rem; }
            .ia-soporte { display: none; }
        }

        @media (max-width: 639px) {
            .app-ia { grid-template-columns: minmax(0, 1fr); }
            .ia-lateral { display: none; }
            .ia-fila { grid-template-columns: minmax(0, 1fr); }
            .ia-submenu { flex-direction: row; }
            .ia-submenu button { flex: 1; text-align: center; border-right: 0; border-bottom: 2px solid transparent; }
            .ia-submenu button.is-on { border-right-color: transparent; border-bottom-color: var(--marca-texto); }
        }

        .app-crm {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            padding: 0.9rem;
            background: #0b0f1a;
        }

        .crm-cab {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex-shrink: 0;
            margin-bottom: 0.85rem;
        }

        .crm-titulo { margin: 0; font-size: 16px; font-weight: 600; color: var(--app-texto); }

        .crm-herramientas {
            display: flex;
            align-items: center;
            gap: 1.05rem;
            margin: 0 auto;
            color: var(--app-texto);
        }

        .crm-herramientas button {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.2rem 0.3rem;
            border: 0;
            border-radius: 0.35rem;
            background: none;
            color: inherit;
            font: inherit;
            cursor: pointer;
        }

        .crm-herramientas button:hover { background: rgba(255, 255, 255, 0.06); }
        .crm-herramientas .material-symbols-outlined { font-size: 17px !important; }
        .crm-herramientas button:nth-child(4) .material-symbols-outlined { color: var(--app-lila); }

        .crm-nuevo {
            flex-shrink: 0;
            padding: 0.5rem 1.05rem;
            border: 0;
            border-radius: 0.4rem;
            background: var(--marca);
            color: #fff;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .crm-tablero {
            display: flex;
            gap: 0.7rem;
            flex: 1;
            min-height: 0;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: auto;
            scrollbar-width: thin;
            scrollbar-color: #2a3446 transparent;
        }

        .crm-tablero::-webkit-scrollbar { height: 7px; }
        .crm-tablero::-webkit-scrollbar-thumb { background: #2a3446; border-radius: 999px; }

        .crm-col {
            flex: 0 0 232px;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            border: 1px solid var(--app-borde);
            border-radius: 0.5rem;
            background: #0d121f;
            overflow: hidden;
        }

        .crm-col-cab {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
            padding: 0.6rem 0.7rem;
            border-bottom: 1px solid var(--app-borde);
            color: var(--app-texto);
            font-weight: 700;
        }

        .crm-col-cab b { font-weight: 700; }
        .crm-col-cab .material-symbols-outlined { font-size: 16px !important; margin-left: auto; color: var(--app-suave); }

        .crm-cuenta {
            padding: 0 0.4rem;
            border-radius: 999px;
            background: #1b2334;
            color: var(--app-suave);
            font-size: 10px;
            font-weight: 700;
        }

        .crm-lista {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 0.5rem;
            overflow-y: auto;
            scroll-behavior: auto;
            scrollbar-width: thin;
            scrollbar-color: #2a3446 transparent;
        }

        .crm-lista::-webkit-scrollbar { width: 5px; }
        .crm-lista::-webkit-scrollbar-thumb { background: #2a3446; border-radius: 999px; }

        .crm-card {
            flex-shrink: 0;
            padding: 0.55rem 0.6rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.45rem;
            background: #121828;
            cursor: pointer;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .crm-card:hover { border-color: #33405e; }
        .crm-card.is-on { border-color: var(--app-lila); box-shadow: 0 0 0 2px rgba(207, 166, 255, 0.22); }

        .crm-card-top { display: flex; align-items: center; gap: 0.45rem; }

        .crm-ini {
            display: grid;
            place-items: center;
            flex-shrink: 0;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #2a3140;
            color: var(--app-texto);
            font-size: 10px;
            font-weight: 700;
        }

        .crm-nom {
            flex: 1;
            min-width: 0;
            color: var(--app-texto);
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .crm-card-top img { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }
        .crm-card-top img.es-glifo { filter: grayscale(1) brightness(0) invert(1); }

        .crm-nota {
            margin: 0.45rem 0 0.5rem;
            color: var(--app-suave);
            font-size: 11px;
            line-height: 1.35;
        }

        .crm-pie { display: flex; align-items: center; gap: 0.4rem; font-size: 11px; }
        .crm-valor { font-weight: 700; color: #4ade80; }
        .crm-tiempo { margin-left: auto; color: var(--app-suave); }

        .crm-tag {
            display: inline-block;
            margin-top: 0.45rem;
            padding: 0.12rem 0.45rem;
            border-radius: 999px;
            background: rgba(133, 0, 254, 0.2);
            color: var(--app-lila);
            font-size: 10px;
            font-weight: 600;
        }

        .crm-tag--frio { background: rgba(43, 127, 255, 0.18); color: #7fb2ff; }
        .crm-tag--spam { background: rgba(239, 68, 68, 0.16); color: #f87171; }

        .crm-vacio {
            margin: auto;
            padding: 0.5rem 0.8rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.4rem;
            background: none;
            color: var(--app-texto);
            font: inherit;
            cursor: pointer;
        }

        @media (max-width: 1023px) {
            .crm-herramientas { gap: 0.7rem; }
            .crm-herramientas button span:not(.material-symbols-outlined) { display: none; }
            .crm-col { flex: 0 0 190px; }
        }

        @media (max-width: 639px) {
            .app-crm { padding: 0.6rem; }
            .crm-titulo { font-size: 14px; }
            .crm-herramientas { display: none; }
            .crm-nuevo { padding: 0.42rem 0.7rem; }
            .crm-col { flex: 0 0 176px; }
        }

        .app-rep {
            position: relative;
            display: grid;
            grid-template-columns: 212px minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr);
            height: 100%;
            background: #0b0f1a;
        }

        .rep-cuerpo {
            min-width: 0;
            min-height: 0;
            padding: 0.8rem 0.9rem;
            overflow-y: auto;
            scroll-behavior: auto;
            scrollbar-width: thin;
            scrollbar-color: #2a3446 transparent;
        }

        .rep-cuerpo::-webkit-scrollbar { width: 6px; }
        .rep-cuerpo::-webkit-scrollbar-thumb { background: #2a3446; border-radius: 999px; }

        .rep-top { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-bottom: 0.8rem; }
        .rep-top .rep-refrescar { font-size: 18px !important; color: #4ade80; }

        .rep-rango {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.4rem 0.7rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.4rem;
            color: var(--app-texto);
        }

        .rep-rango .material-symbols-outlined { font-size: 16px !important; color: var(--app-suave); }

        .rep-kpis {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0.55rem;
            margin-bottom: 0.9rem;
        }

        .rep-kpi {
            padding: 0.65rem 0.5rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.4rem;
            background: #0d121f;
            text-align: center;
        }

        .rep-kpi p { margin: 0; color: var(--app-texto); font-size: 11px; }
        .rep-kpi b { display: block; margin: 0.3rem 0 0.15rem; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
        .rep-kpi i { display: inline-flex; align-items: center; gap: 0.15rem; font-style: normal; font-size: 11px; color: #4ade80; }
        .rep-kpi i .material-symbols-outlined { font-size: 12px !important; }

        .rep-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }

        .rep-card {
            display: flex;
            flex-direction: column;
            padding: 0.7rem 0.75rem 0.6rem;
            border: 1px solid var(--app-borde);
            border-radius: 0.5rem;
            background: #0d121f;
        }

        .rep-card-cab { display: flex; align-items: flex-start; gap: 0.4rem; margin-bottom: 0.7rem; }
        .rep-card-cab b { flex: 1; min-width: 0; color: var(--app-texto); font-weight: 600; line-height: 1.3; }
        .rep-card-cab .material-symbols-outlined { font-size: 16px !important; color: var(--app-suave); flex-shrink: 0; }

        .rep-lienzo { display: flex; gap: 0.45rem; height: 168px; }

        .rep-eje {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-shrink: 0;
            text-align: right;
            color: var(--app-suave);
            font-size: 10px;
        }

        .rep-trazo { position: relative; flex: 1; min-width: 0; }
        .rep-trazo svg { display: block; width: 100%; height: 100%; }
        .rep-trazo .rep-area { fill: rgba(56, 130, 184, 0.55); stroke: #4a9ad0; stroke-width: 1.4; }

        .rep-barras { display: flex; align-items: flex-end; gap: 0.4rem; flex: 1; min-width: 0; height: 100%; }
        .rep-barras i { display: block; flex: 1; border-radius: 2px 2px 0 0; background: #3882b8; }

        .rep-dias { display: flex; gap: 0.4rem; margin-top: 0.35rem; padding-left: 2.1rem; color: var(--app-suave); font-size: 10px; }
        .rep-dias span { flex: 1; min-width: 0; text-align: center; overflow: hidden; }

        @media (max-width: 1023px) {
            .app-rep { grid-template-columns: 168px minmax(0, 1fr); }
            .rep-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .rep-rejilla { grid-template-columns: minmax(0, 1fr); }
            .rep-lienzo { height: 140px; }
        }

        @media (max-width: 639px) {
            .app-rep { grid-template-columns: minmax(0, 1fr); }
            .app-rep .ia-lateral { display: none; }
            .rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .rep-kpi b { font-size: 17px; }
            .rep-lienzo { height: 118px; }
        }

        #industrias {
            position: relative;
            width: 100%;
            min-height: 100vh;
            background: var(--fondo);
        }

        .ind-pin {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .ind-fondos { position: absolute; inset: 0; z-index: 0; }

        .ind-fondo {
            position: absolute;
            inset: 0;
            background-position: center;
            background-size: cover;
            opacity: 0;
            transform: scale(1.06);
            filter: saturate(1.05);
            transition: opacity 0.9s ease, transform 8s ease-out, filter 0.6s ease;
            will-change: opacity, transform;
        }

        .ind-fondo.is-on { opacity: 1; transform: scale(1.16); }
        #industrias:hover .ind-fondo.is-on { filter: saturate(1.18) brightness(1.08); }

        .ind-velo {
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                linear-gradient(90deg, rgba(5, 5, 16, 0.9) 0%, rgba(5, 5, 16, 0.64) 44%, rgba(5, 5, 16, 0.38) 100%),
                linear-gradient(180deg, var(--fondo) 0%, rgba(5, 5, 16, 0) 16%, rgba(5, 5, 16, 0) 84%, var(--fondo) 100%);
        }

        .ind-contenido {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr);
            align-items: center;
            column-gap: 2rem;
            width: 100%;
            max-width: 1200px;
            min-height: 100vh;
            margin: 0 auto;
            padding: 5rem 1.5rem;
        }

        .ind-texto { grid-column: 1; grid-row: 1; max-width: 32rem; }


        #main-content > footer { display: none; }

        .ind-logos {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.55rem 0.7rem;
            min-height: 2.2rem;
            margin-bottom: 1.1rem;
        }

        .ind-logos img {
            flex: none;
            height: clamp(1.25rem, 1.75vw, 1.7rem);
            width: auto;
        }

        .ind-logos i {
            font-style: normal;
            font-size: 0.9rem;
            font-weight: 300;
            color: var(--texto-tenue);
        }

        .ind-titulo {
            margin: 0 0 1rem;
            font-size: clamp(1.9rem, 3.4vw, 2.9rem);
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.02em;
            white-space: nowrap;
            color: var(--texto);
            text-shadow: 0 2px 10px rgba(5, 5, 16, 0.85), 0 1px 3px rgba(5, 5, 16, 0.9);
        }

        .ind-titulo b { color: var(--marca-texto); font-weight: 700; }

        .ind-detalle {
            margin: 0 0 2rem;
            min-height: 4.5rem;
            font-size: clamp(1rem, 1.5vw, 1.12rem);
            line-height: 1.6;
            color: var(--texto-medio);
            text-shadow: 0 1px 8px rgba(5, 5, 16, 0.9);
        }

        .ind-rueda {
            position: relative;
            grid-column: 2;
            grid-row: 1;
            height: 100%;
            min-height: 0;
            outline: none;
            overflow-x: visible;
            overflow-y: clip;
            touch-action: pan-y;
            --ow-texto: #a6a6a6;
            --ow-activo: #ffffff;
            --ow-fuente: 4.75rem;
            --ow-inset: clamp(160px, 50vw - 554px, 400px);
            margin-right: calc(-1 * (max(0px, (100vw - 1200px) / 2) + 1.5rem));
        }

        .ind-opcion {
            position: absolute;
            top: 50%;
            right: var(--ow-inset);
            transform-origin: right center;
            white-space: nowrap;
            line-height: 1;
            font-size: var(--ow-fuente);
            font-weight: 200;
            color: color-mix(in srgb, var(--ow-activo) calc(var(--ow-p, 0) * 100%), var(--ow-texto));
            cursor: pointer;
            will-change: transform, opacity, filter;
        }

        .ind-opcion.is-sel { font-weight: 500; }

        .ind-opcion:hover { color: var(--ow-activo); }

        .ind-guia {
            position: absolute;
            top: 50%;
            right: calc(var(--ow-inset) - 134px);
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.62);
            filter: drop-shadow(0 1px 5px rgba(5, 5, 16, 0.95));
            pointer-events: none;
        }

        .ind-guia-flecha {
            position: relative;
            width: 30px;
            height: 26px;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: none;
            color: inherit;
            cursor: pointer;
            pointer-events: auto;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .ind-guia-flecha:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
        .ind-guia-flecha:active { transform: scale(0.92); }
        .ind-guia-flecha:focus-visible { outline: 2px solid var(--marca-texto); outline-offset: 2px; }

        .ind-guia-flecha::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 9px;
            height: 9px;
            border-top: 2px solid currentColor;
            border-left: 2px solid currentColor;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .ind-guia-flecha--despues::before { transform: translate(-50%, -50%) rotate(225deg); }
        .ind-guia-flecha--arriba { animation: indSubir 2.2s ease-in-out infinite; }
        .ind-guia-flecha--despues { animation: indBajar 2.2s ease-in-out infinite; }

        .ind-guia-pista {
            position: relative;
            width: 2px;
            height: clamp(90px, 16vh, 150px);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.22);
        }

        .ind-guia-pulgar {
            position: absolute;
            left: 50%;
            top: calc(13px + var(--ind-pos, 0) * (100% - 26px));
            width: 4px;
            height: 26px;
            border-radius: 999px;
            background: var(--marca-texto);
            box-shadow: 0 0 12px rgba(180, 124, 255, 0.75);
            transform: translate(-50%, -50%);
            transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .ind-guia-cuenta {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 1px 6px rgba(5, 5, 16, 0.9);
        }

        .ind-ayuda {
            position: absolute;
            right: var(--ow-inset);
            bottom: 0.5rem;
            z-index: 3;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            margin: 0;
            padding: 0.5rem 0.95rem 0.5rem 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            background: rgba(5, 5, 16, 0.45);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: var(--texto-suave);
            font-size: 0.82rem;
            line-height: 1;
            white-space: nowrap;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .ind-ayuda b { color: var(--texto); font-weight: 600; }
        .ind-ayuda i { font-style: normal; opacity: 0.45; }
        .ind-rueda.ya-usada .ind-ayuda { opacity: 0; }

        .ind-ayuda-raton {
            position: relative;
            flex: none;
            width: 15px;
            height: 24px;
            border: 1.5px solid currentColor;
            border-radius: 999px;
            opacity: 0.8;
        }

        .ind-ayuda-raton::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 4px;
            width: 2.5px;
            height: 5px;
            border-radius: 999px;
            background: currentColor;
            transform: translate(-50%, 0);
            animation: indRueda 1.7s ease-in-out infinite;
        }

        @keyframes indSubir {
            0%, 100% { transform: translateY(0); opacity: 0.55; }
            50% { transform: translateY(-3px); opacity: 1; }
        }

        @keyframes indBajar {
            0%, 100% { transform: translateY(0); opacity: 0.55; }
            50% { transform: translateY(3px); opacity: 1; }
        }

        @keyframes indRueda {
            0%, 100% { transform: translate(-50%, 0); opacity: 1; }
            55% { transform: translate(-50%, 9px); opacity: 0.15; }
        }

        .ind-boton-caja { margin-top: 0.5rem; }

        .ind-cristal-svg { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

        .ind-boton {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin: 0;
            padding: 1.05rem 2.4rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
            -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
            color: var(--texto);
            font: inherit;
            font-size: 1.05rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1;
            cursor: pointer;
            outline: none;
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
            transition: transform 0.15s ease, opacity 0.26s ease-out;
        }

        .ind-boton.es-cristal {
            border: 0;
            box-shadow:
                0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,
                0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,
                0 4px 16px rgba(17, 17, 26, 0.05),
                0 8px 24px rgba(17, 17, 26, 0.05),
                0 16px 56px rgba(17, 17, 26, 0.05),
                0 4px 16px rgba(17, 17, 26, 0.05) inset,
                0 8px 24px rgba(17, 17, 26, 0.05) inset,
                0 16px 56px rgba(17, 17, 26, 0.05) inset;
        }

        .ind-boton:active { transform: scale(0.97); }
        .ind-boton:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; }
        .ind-boton-txt { position: relative; z-index: 2; }

        @media (max-width: 900px) {
            .ind-contenido { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 1.5rem; padding: 4.5rem 1.25rem; }
            .ind-texto { max-width: none; }
            .ind-titulo { font-size: clamp(1.7rem, 6.5vw, 2.3rem); white-space: normal; }
            .ind-rueda { grid-column: 1; grid-row: 2; height: clamp(320px, 46vh, 460px); --ow-fuente: 3.1rem; --ow-inset: 50%; margin-right: 0; }
            .ind-texto { grid-column: 1; grid-row: 1; }
            .ind-opcion { right: auto; left: 20px; transform-origin: left center; }
            .ind-guia { right: 14px; gap: 0.55rem; }
            .ind-guia-pista { height: clamp(70px, 12vh, 110px); }
            .ind-ayuda { right: auto; left: 50%; bottom: 0.25rem; font-size: 0.74rem; transform: translateX(-50%); }
            .ind-velo { background: linear-gradient(180deg, var(--fondo) 0%, rgba(5, 5, 16, 0.88) 30%, rgba(5, 5, 16, 0.9) 70%, var(--fondo) 100%); }
        }

        @media (prefers-reduced-motion: reduce) {
            .ind-fondo, .ind-fondo.is-on { transform: none; transition: opacity 0.3s ease; }
            .ind-guia-flecha--arriba, .ind-guia-flecha--despues, .ind-ayuda-raton::after { animation: none; }
            .ind-guia-pulgar { transition: none; }
            #industrias { min-height: 100vh; }
            .ind-pin { position: static; height: auto; min-height: 100vh; }
        }

        .ind-contenido, .ind-panel {
            transition: opacity 0.45s ease, transform 0.45s ease;
        }


        .ind-panel {
            position: relative;
            z-index: 2;
            display: none;
            width: 100%;
            opacity: 0;
            transform: translateY(14px);
        }

        .ind-plantilla {
            display: none;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 5rem 1.5rem;
        }

        .ind-panel[data-activa="cristal"] .ind-plantilla[data-plantilla="cristal"] {
            display: grid;
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            align-items: start;
            gap: 2.5rem;
        }

        .ind-panel[data-activa="collage"] .ind-plantilla[data-plantilla="collage"] {
            display: grid;
            grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
            align-items: center;
            gap: 3rem;
        }

        .ind-panel[data-activa="retrato"] .ind-plantilla[data-plantilla="retrato"] {
            display: flex;
            flex-direction: column;
            gap: clamp(2rem, 3.5vw, 3.5rem);
        }

        #industrias.is-detalle .ind-panel { display: grid; }
        #industrias.is-detalle.is-visible .ind-panel { opacity: 1; transform: translateY(0); }

        #industrias.is-detalle { min-height: 100vh; }

        #industrias.is-detalle .ind-pin {
            position: static;
            height: auto;
            min-height: 100vh;
            overflow: visible;
        }

        #industrias.is-detalle .ind-contenido { display: none; }

        .ind-panel { min-height: 100vh; align-content: center; }


        .col-collage {
            position: relative;
            height: clamp(320px, 42vw, 460px);
        }

        .col-foto {
            position: absolute;
            margin: 0;
            padding: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 1.4rem;
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 26px 70px rgba(5, 5, 16, 0.6);
            opacity: 0;
            transform: scale(0.85);
        }

        .col-foto img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 1rem;
            object-fit: cover;
        }

        .col-foto--a { left: 50%; top: 0; width: clamp(9rem, 17vw, 15rem); height: clamp(9rem, 17vw, 15rem); margin-left: calc(clamp(9rem, 17vw, 15rem) / -2); transform-origin: bottom center; }
        .col-foto--b { right: 0; top: 30%; width: clamp(8rem, 15vw, 13.5rem); height: clamp(8rem, 15vw, 13.5rem); transform-origin: left center; }
        .col-foto--c { left: 0; bottom: 0; width: clamp(7rem, 13vw, 11.5rem); height: clamp(7rem, 13vw, 11.5rem); transform-origin: top right; }

        .col-forma {
            position: absolute;
            display: block;
            border-radius: 999px;
            filter: blur(0.5px);
        }

        .col-forma--a { left: 22%; top: -1rem; width: 4rem; height: 4rem; background: rgba(180, 124, 255, 0.28); }
        .col-forma--b { right: 22%; bottom: 0; width: 3rem; height: 3rem; border-radius: 0.9rem; background: rgba(133, 0, 254, 0.3); }
        .col-forma--c { left: 1rem; bottom: 26%; width: 1.6rem; height: 1.6rem; background: rgba(255, 255, 255, 0.22); }

        .col-datos {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin-top: 3rem;
        }

        .col-dato {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .col-dato-icono {
            display: grid;
            place-items: center;
            width: 2.5rem;
            height: 2.5rem;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.07);
            color: var(--marca-texto);
        }

        .col-dato-icono .material-symbols-outlined { font-size: 20px !important; }
        .col-dato b { display: block; color: var(--texto); font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
        .col-dato span { color: var(--texto-suave); font-size: 0.85rem; }

        .ret-cabecera {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.35rem;
            width: 100%;
            max-width: 46rem;
            margin: 0 auto;
            text-align: center;
        }

        .ret-titulo {
            margin: 0;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: clamp(2rem, 4.2vw, 3.4rem);
            font-weight: 400;
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: var(--texto);
            text-shadow: 0 2px 14px rgba(5, 5, 16, 0.85);
        }

        .ret-titulo b { font-weight: 400; color: var(--marca-texto); }

        .ret-texto {
            margin: 0;
            max-width: 34rem;
            color: var(--texto-medio);
            font-size: clamp(0.95rem, 1.3vw, 1.05rem);
            line-height: 1.7;
            text-shadow: 0 1px 8px rgba(5, 5, 16, 0.9);
        }

        .ret-acciones {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 1.25rem;
        }

        .ret-enlace {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.5rem 0.25rem;
            border: 0;
            background: none;
            color: var(--texto);
            font: inherit;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 5px;
            cursor: pointer;
        }

        .ret-enlace:hover { color: var(--marca-texto); }
        .ret-enlace .material-symbols-outlined { font-size: 18px !important; }

        .ret-foto {
            position: relative;
            width: 100%;
            max-width: 56rem;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(24px);
        }

        .ret-foto img {
            display: block;
            width: 100%;
            aspect-ratio: 5 / 4;
            max-height: 38vh;
            object-fit: cover;
            object-position: center 20%;
            -webkit-mask-image:
                radial-gradient(72% 74% at 50% 45%, #000 42%, transparent 100%),
                linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
                linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
            mask-image:
                radial-gradient(72% 74% at 50% 45%, #000 42%, transparent 100%),
                linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
                linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
            -webkit-mask-composite: source-in;
            mask-composite: intersect;
        }

        .ret-pie {
            margin-top: -3.5rem;
            color: var(--texto-tenue);
            font-size: 0.82rem;
            text-align: center;
        }

        #industrias.is-detalle[data-plantilla="retrato"] .ind-fondo.is-on {
            filter: saturate(0.8) brightness(0.5) blur(18px);
        }

        #industrias.is-detalle.is-visible .col-foto,
        #industrias.is-detalle.is-visible .ret-foto {
            opacity: 1;
            transform: none;
            transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }

        #industrias.is-detalle.is-visible .col-foto--a { transition-delay: 0.1s; }
        #industrias.is-detalle.is-visible .col-foto--b { transition-delay: 0.22s; }
        #industrias.is-detalle.is-visible .col-foto--c { transition-delay: 0.34s; }
        #industrias.is-detalle.is-visible .ret-foto { transition-delay: 0.18s; }

        #industrias.is-detalle.is-visible .col-forma { animation: indFlotar 3s ease-in-out infinite; }
        #industrias.is-detalle.is-visible .col-forma--b { animation-delay: 0.5s; }
        #industrias.is-detalle.is-visible .col-forma--c { animation-delay: 1s; }

        @keyframes indFlotar {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        @media (prefers-reduced-motion: reduce) {
            .col-foto, .ret-foto { opacity: 1; transform: none; }
            #industrias.is-detalle.is-visible .col-foto,
            #industrias.is-detalle.is-visible .ret-foto { transition: none; }
            #industrias.is-detalle.is-visible .col-forma { animation: none; }
        }

        .ind-det-marca {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.85rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(10px);
            color: var(--texto-medio);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .ind-det-marca .material-symbols-outlined { font-size: 15px !important; color: var(--marca-texto); }

        .ind-det-titulo {
            margin: 1.4rem 0 0;
            font-size: clamp(2.1rem, 4.4vw, 3.6rem);
            font-weight: 500;
            line-height: 0.98;
            letter-spacing: -0.03em;
            color: var(--texto);
        }

        .ind-det-titulo b {
            font-weight: 500;
            background: linear-gradient(120deg, #ffffff, #ffffff 40%, var(--marca-texto));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .ind-det-texto {
            margin: 1.3rem 0 0;
            max-width: 34rem;
            font-size: clamp(1rem, 1.4vw, 1.1rem);
            line-height: 1.65;
            color: var(--texto-suave);
        }

        .ind-det-acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

        .ind-det-precios {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1.05rem 2rem;
            border: 0;
            border-radius: 20px;
            background: var(--texto);
            color: #050510;
            font: inherit;
            font-size: 1.02rem;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            transition: transform 0.15s ease, background-color 0.2s ease;
        }

        .ind-det-precios:hover { background: #ffffff; transform: scale(1.02); }
        .ind-det-precios:active { transform: scale(0.98); }
        .ind-det-precios .material-symbols-outlined { font-size: 18px !important; }

        .ind-tarjeta {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(18px) saturate(1.4);
            -webkit-backdrop-filter: blur(18px) saturate(1.4);
            box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
        }

        .ind-tarjeta--datos { padding: 1.8rem; }

        .ind-tarjeta::before {
            content: '';
            position: absolute;
            top: -4rem;
            right: -4rem;
            width: 16rem;
            height: 16rem;
            border-radius: 50%;
            background: rgba(180, 124, 255, 0.16);
            filter: blur(48px);
            pointer-events: none;
        }

        .ind-dato { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; }

        .ind-dato-icono {
            display: grid;
            place-items: center;
            flex-shrink: 0;
            width: 3rem;
            height: 3rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
            color: var(--texto);
        }

        .ind-dato-icono .material-symbols-outlined { font-size: 24px !important; }
        .ind-dato b { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--texto); }
        .ind-dato span { font-size: 0.88rem; color: var(--texto-suave); }

        .ind-barra-fila { position: relative; display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 0.7rem; }
        .ind-barra-fila span:first-child { color: var(--texto-suave); }
        .ind-barra-fila span:last-child { color: var(--texto); font-weight: 600; }

        .ind-barra { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
        .ind-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffffff, #b47cff); }

        .ind-raya { position: relative; height: 1px; margin: 1.6rem 0 1.3rem; background: rgba(255, 255, 255, 0.1); }

        .ind-mini { position: relative; display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 0.8rem; text-align: center; }
        .ind-mini i { background: rgba(255, 255, 255, 0.1); }
        .ind-mini div b { display: block; font-size: 1.15rem; font-weight: 700; color: var(--texto); }
        .ind-mini div span { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--texto-tenue); }

        .ind-pastillas { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.8rem; }

        .ind-pastilla {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.28rem 0.7rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.05);
            font-size: 0.64rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--texto-medio);
        }

        .ind-pastilla .material-symbols-outlined { font-size: 13px !important; color: #fbbf24; }

        .ind-latido { position: relative; display: inline-flex; width: 8px; height: 8px; }
        .ind-latido i { position: absolute; inset: 0; border-radius: 50%; background: #4ade80; }
        .ind-latido i:first-child { animation: indPing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75; }

        @keyframes indPing { 75%, 100% { transform: scale(2.2); opacity: 0; } }

        .ind-tarjeta--canales { margin-top: 1.2rem; padding: 1.6rem 0; }
        .ind-canales-titulo { position: relative; margin: 0 0 1.2rem; padding: 0 1.8rem; font-size: 0.85rem; color: var(--texto-suave); }

        .ind-cinta {
            position: relative;
            display: flex;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
        }

        .ind-cinta-pista { display: flex; gap: 2.6rem; padding: 0 1.3rem; white-space: nowrap; animation: indCinta 34s linear infinite; }
        .ind-cinta-pista img { width: 30px; height: 30px; object-fit: contain; opacity: 0.55; filter: grayscale(1) brightness(0) invert(1); transition: opacity 0.25s ease; }
        .ind-cinta-pista img:hover { opacity: 1; }

        @keyframes indCinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        @media (max-width: 900px) {
            .ind-panel[data-activa] .ind-plantilla { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; padding: 4rem 1.25rem; }
            .col-collage { order: -1; }
            .ind-tarjeta--datos { padding: 1.4rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .ind-contenido, .ind-panel { transition: opacity 0.2s ease; transform: none; }
            .ind-cinta-pista { animation: none; }
            .ind-latido i:first-child { animation: none; }
        }

        .hero-app-rotulo {
            margin: 100px 0 0;
            max-width: min(90vw, 44rem);
            min-height: 2.9em;
            text-align: center;
            font-size: clamp(0.9rem, 1.6vw, 1.15rem);
            font-weight: 600;
            line-height: 1.45;
            color: var(--texto-medio);
            opacity: 0;
            transition: opacity 0.45s ease;
        }

        .hero-app-rotulo.is-on { opacity: 1; }
        .hero-app-rotulo b { color: var(--marca-texto); }

        /* ================ TEMA OSCURO — CLASES SEMÁNTICAS ================ */
        .texto-principal { color: var(--texto); }
        .texto-secundario { color: var(--texto-medio); }
        .texto-terciario { color: var(--texto-suave); }
        .icono-marca { color: var(--marca-texto); }
        .icono-ok { color: #34d399; }

        .etiqueta-marca {
            color: var(--marca-texto);
            background: rgba(133, 0, 254, 0.14);
            border: 1px solid rgba(133, 0, 254, 0.32);
        }

        .boton-secundario {
            background: var(--superficie-suave);
            border: 1px solid var(--borde);
            color: var(--texto);
        }

        .boton-secundario:hover { background: var(--borde); }

        .nav-enlace {
            color: var(--texto-suave);
            transition: color 0.2s ease, background-color 0.2s ease;
        }

        .nav-enlace:hover {
            color: var(--texto);
            background: var(--superficie-suave);
        }

        .nav-boton {
            color: var(--texto);
            transition: background-color 0.2s ease;
        }

        .nav-boton:hover { background: var(--superficie-suave); }

        .hamburger-line { background: var(--texto); }

        .menu-movil {
            background: var(--superficie);
            border-top: 1px solid var(--borde);
        }

        .menu-movil-separador { border-top: 1px solid var(--borde); }

        .seccion-stats {
            background: var(--superficie);
            border-top: 1px solid var(--borde);
            border-bottom: 1px solid var(--borde);
        }

        .stat-label { color: var(--texto); }
        .stat-number { color: var(--texto); }

        
        #api { background: var(--superficie); }
        #faq { background: var(--fondo); }

        .code-glow { border: 1px solid var(--borde); }
        .code-glow > div:first-child { border-bottom: 1px solid var(--borde); }
        .terminal-titulo { color: var(--texto-suave); }
        .terminal-codigo { color: var(--texto-medio); }

        .faq-item {
            background: var(--superficie);
            border: 1px solid var(--borde);
        }

        .faq-item:hover { border-color: rgba(133, 0, 254, 0.4); }

        .faq-cuerpo {
            color: var(--texto-medio);
            border-top: 1px solid var(--borde);
        }

        .faq-icono { color: var(--texto-suave); }
        .group:hover .faq-icono { color: var(--marca-texto); }

        .faq-destacado {
            background: var(--superficie-suave);
            border: 1px solid var(--borde);
        }

        .pie {
            background: var(--superficie);
            border-top: 1px solid var(--borde);
        }

        .pie-titulo { color: var(--texto); }
        .pie-lista { color: var(--texto-medio); }
        .pie-lista a:hover { color: var(--marca-texto); }
        .pie-legal { border-top: 1px solid var(--borde); }


        .nav-apps { position: relative; }

        .nav-apps-boton {
            display: inline-flex;
            align-items: center;
            gap: 0.15rem;
            border: 0;
            background: none;
            font: inherit;
            cursor: pointer;
        }

        .nav-apps-flecha {
            font-size: 1.1rem;
            transition: transform 0.2s ease;
        }

        .nav-apps-boton[aria-expanded="true"] .nav-apps-flecha { transform: rotate(180deg); }

        .nav-apps-caja {
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 50%;
            z-index: 60;
            display: grid;
            gap: 0.15rem;
            width: max-content;
            min-width: 17rem;
            padding: 0.5rem;
            border: 1px solid var(--borde);
            border-radius: 0.9rem;
            background: var(--superficie);
            box-shadow: 0 18px 48px rgba(5, 5, 16, 0.6);
            transform: translateX(-50%);
        }

        .nav-apps-caja[hidden] { display: none; }

        .nav-app {
            display: grid;
            grid-template-columns: 6rem minmax(0, 1fr);
            align-items: center;
            gap: 0.7rem;
            padding: 0.55rem 0.7rem;
            border-radius: 0.6rem;
            transition: background-color 0.2s ease;
        }

        .nav-app:hover { background: var(--superficie-suave); }
        .nav-app img { height: 1.35rem; width: auto; justify-self: start; }

        .nav-app span {
            color: var(--texto-suave);
            font-size: 0.78rem;
            line-height: 1.3;
        }

        .nav-app:hover span { color: var(--texto-medio); }

        .nav-app-icono {
            display: grid;
            place-items: center;
            width: 2.6rem;
            height: 2.6rem;
            border: 1px solid var(--borde);
            border-radius: 0.7rem;
            background: var(--superficie-suave);
            color: var(--marca-texto);
        }

        .nav-app-icono .material-symbols-outlined { font-size: 24px !important; }

        .nav-app--icono { grid-template-columns: 3.2rem minmax(0, 1fr); }

        .nav-app--icono span:not(.nav-app-icono):not(.material-symbols-outlined) {
            color: var(--texto-medio);
            font-size: 0.84rem;
        }

        .nav-app--icono:hover span:not(.nav-app-icono):not(.material-symbols-outlined) { color: var(--texto); }

        .nav-redes {
            display: flex;
            justify-content: center;
            gap: 0.4rem;
            margin-top: 0.35rem;
            padding-top: 0.7rem;
            border-top: 1px solid var(--borde);
        }

        .nav-redes a {
            display: grid;
            place-items: center;
            width: 2.2rem;
            height: 2.2rem;
            border: 1px solid var(--borde);
            border-radius: 0.6rem;
            color: var(--texto-suave);
            transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
        }

        .nav-redes a:hover {
            border-color: var(--marca);
            background: rgba(133, 0, 254, 0.14);
            color: var(--texto);
        }

        .nav-redes svg { width: 1.05rem; height: 1.05rem; }

        .menu-movil-rotulo {
            margin: 0.75rem 0 0.15rem;
            padding: 0 1rem;
            color: var(--texto-tenue);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .nav-app--movil { padding: 0.6rem 1rem; }

        #precios, #ecosistema { display: none; }
        body.con-industria #precios, body.con-industria #ecosistema { display: block; }

        #precios { background: var(--fondo); }
        #ecosistema { background: var(--superficie); border-top: 1px solid var(--borde); }

        .seccion-caja {
            max-width: 1200px;
            margin: 0 auto;
            padding: 6rem 1.5rem;
        }

        .seccion-etiqueta {
            display: inline-block;
            margin-bottom: 1rem;
            padding: 0.35rem 0.85rem;
            border: 1px solid var(--borde);
            border-radius: 999px;
            color: var(--marca-texto);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .seccion-titulo {
            max-width: 22ch;
            margin: 0 0 1rem;
            color: var(--texto);
            font-size: clamp(1.9rem, 3.4vw, 2.9rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.15;
        }

        .seccion-titulo b { color: var(--marca-texto); font-weight: 700; }

        .seccion-texto {
            max-width: 60ch;
            margin: 0 0 3rem;
            color: var(--texto-medio);
            font-size: clamp(1rem, 1.5vw, 1.12rem);
            line-height: 1.6;
        }

        .precios-rejilla {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
            gap: 1.25rem;
            align-items: start;
        }

        .plan {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 2rem 1.75rem;
            border: 1px solid var(--borde);
            border-radius: 1.25rem;
            background: var(--superficie);
        }

        .plan--destacado {
            border-color: var(--marca);
            background: linear-gradient(180deg, rgba(133, 0, 254, 0.12) 0%, var(--superficie) 60%);
            box-shadow: 0 22px 60px rgba(133, 0, 254, 0.18);
        }

        .plan-cinta {
            position: absolute;
            top: -0.75rem;
            left: 1.75rem;
            padding: 0.3rem 0.75rem;
            border-radius: 999px;
            background: var(--marca);
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.06em;
        }

        .plan-nombre {
            margin: 0 0 0.75rem;
            color: var(--texto);
            font-size: 1.05rem;
            font-weight: 700;
        }

        .plan-precio {
            display: flex;
            align-items: baseline;
            gap: 0.45rem;
            margin: 0 0 0.75rem;
        }

        .plan-precio b {
            color: var(--texto);
            font-size: 2.6rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1;
        }

        .plan-precio span { color: var(--texto-tenue); font-size: 0.85rem; }

        .plan-resumen {
            margin: 0 0 1.5rem;
            color: var(--texto-suave);
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .plan-lista {
            flex: 1;
            margin: 0 0 1.75rem;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 0.6rem;
        }

        .plan-lista li {
            position: relative;
            padding-left: 1.6rem;
            color: var(--texto-medio);
            font-size: 0.9rem;
            line-height: 1.45;
        }

        .plan-lista li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.35em;
            width: 0.85rem;
            height: 0.45rem;
            border-left: 2px solid var(--marca-texto);
            border-bottom: 2px solid var(--marca-texto);
            transform: rotate(-45deg);
        }

        .plan-cta {
            display: block;
            padding: 0.85rem 1rem;
            border: 1px solid var(--borde);
            border-radius: 0.75rem;
            background: var(--superficie-suave);
            color: var(--texto);
            font-size: 0.92rem;
            font-weight: 700;
            text-align: center;
            transition: background-color 0.2s ease, transform 0.15s ease;
        }

        .plan-cta:hover { background: var(--borde); }
        .plan-cta:active { transform: scale(0.98); }

        .plan-cta--fuerte {
            border-color: transparent;
            background: var(--marca);
            color: #fff;
        }

        .plan-cta--fuerte:hover { background: #9412ff; }

        .precios-nota {
            margin: 2rem 0 0;
            color: var(--texto-tenue);
            font-size: 0.82rem;
        }

        .eco-rejilla {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
            gap: 1.25rem;
        }

        .eco-app {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.75rem 1.5rem;
            border: 1px solid var(--borde);
            border-radius: 1.25rem;
            background: var(--fondo);
            transition: border-color 0.2s ease, transform 0.2s ease;
        }

        a.eco-app:hover {
            border-color: var(--marca);
            transform: translateY(-3px);
        }

        .eco-marca { height: 1.7rem; width: auto; }

        .eco-texto {
            flex: 1;
            margin: 0;
            color: var(--texto-medio);
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .eco-enlace {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--marca-texto);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .eco-enlace .material-symbols-outlined { font-size: 1rem; }

        .eco-aqui {
            padding: 0.3rem 0.7rem;
            border: 1px solid var(--borde);
            border-radius: 999px;
            color: var(--texto-tenue);
            font-size: 0.75rem;
            font-weight: 600;
        }

        .eco-app--actual { background: var(--superficie-alta); }

        @media (max-width: 640px) {
            .seccion-caja { padding: 4rem 1.25rem; }
            .seccion-texto { margin-bottom: 2rem; }
        }

        .pie-social {
            background: var(--superficie-suave);
            color: var(--texto-suave);
        }

        .pie-social:hover {
            background: var(--marca);
            color: #fff;
        }
    

/* Reglas propias de las paginas de industria y de precios.
   El resto sale tal cual del <style> inline de index.html. */

body.pag { background: var(--fondo); color: var(--texto); }

.pag-hero {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: calc(100vh - 4rem);
    padding-bottom: 2.5rem;
    overflow: hidden;
}

.pag-hero > .pag-migas, .pag-hero > .ind-panel { justify-self: stretch; }

.pag-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    filter: saturate(1.05);
    transform: scale(1.04);
}

.pag-hero[data-plantilla="retrato"] .pag-fondo { filter: saturate(0.8) brightness(0.5) blur(18px); }

.pag-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 5, 16, 0.9) 0%, rgba(5, 5, 16, 0.64) 44%, rgba(5, 5, 16, 0.38) 100%),
        linear-gradient(180deg, var(--fondo) 0%, rgba(5, 5, 16, 0) 16%, rgba(5, 5, 16, 0) 84%, var(--fondo) 100%);
}

.pag-hero[data-plantilla="retrato"] .pag-velo {
    background: linear-gradient(180deg, var(--fondo) 0%, rgba(5, 5, 16, 0.55) 30%, rgba(5, 5, 16, 0.55) 70%, var(--fondo) 100%);
}

/* Las plantillas del hero se reutilizan tal cual, pero fuera de #industrias
   nadie les quita el display:none ni las hace visibles. */
body.pag .ind-panel { display: grid; opacity: 1; transform: none; position: relative; z-index: 2; }
body.pag .col-foto, body.pag .ret-foto { opacity: 1; transform: none; }
body.pag .col-forma { animation: indFlotar 3s ease-in-out infinite; }
body.pag .col-forma--b { animation-delay: 0.5s; }
body.pag .col-forma--c { animation-delay: 1s; }

body.pag #precios, body.pag #ecosistema { display: block; }

.pag-migas {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 0;
    color: var(--texto-tenue);
    font-size: 0.82rem;
}

.hero-mas {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2.5rem auto 0;
    padding: 0.6rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(5, 5, 16, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--texto-suave);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hero-mas:hover { color: var(--texto); border-color: rgba(255, 255, 255, 0.4); }
.hero-mas svg { width: 1rem; height: 1rem; animation: masAbajo 2.2s ease-in-out infinite; }

@keyframes masAbajo {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(4px); opacity: 1; }
}

.pag-migas a { color: var(--texto-suave); }
.pag-migas a:hover { color: var(--marca-texto); }
.pag-migas span { opacity: 0.5; margin: 0 0.4rem; }

.pag-pie {
    border-top: 1px solid var(--borde);
    background: var(--fondo);
}

.pag-pie-caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.pag-pie-apps { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pag-pie-apps a { color: var(--texto-suave); font-size: 0.88rem; }
.pag-pie-apps a:hover { color: var(--marca-texto); }
.pag-pie-legal { margin: 0; color: var(--texto-tenue); font-size: 0.8rem; }

.pag-pie-baja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2.5rem;
    border-top: 1px solid var(--borde);
}

.pag-pie-normas { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pag-pie-normas a { color: var(--texto-tenue); font-size: 0.8rem; }
.pag-pie-normas a:hover { color: var(--marca-texto); text-decoration: underline; }

/* --- Pagina de integraciones --- */

#nativas { background: var(--fondo); }
#lucidapps { background: var(--superficie); border-block: 1px solid var(--borde); }

.ig-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ig-pieza {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.5rem 1rem;
    border: 1px solid var(--borde);
    border-radius: 1rem;
    background: var(--superficie);
    transition: border-color 0.2s ease;
}

.ig-pieza:hover { border-color: var(--marca); }

.ig-pieza img {
    width: auto;
    max-width: 6.5rem;
    height: 2.2rem;
    object-fit: contain;
}

.ig-pieza span { color: var(--texto-suave); font-size: 0.82rem; font-weight: 600; text-align: center; }

/* --- Bloques de codigo de la API --- */

.cod-par {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.25rem;
    align-items: start;
}

.cod {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: 1rem;
    background: var(--superficie-alta);
}

.cod-cab {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.cod-metodo {
    padding: 0.2rem 0.55rem;
    border-radius: 0.4rem;
    background: var(--marca);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cod-metodo--ok { background: #1f9d55; }

.cod pre {
    margin: 0;
    overflow-x: auto;
    padding: 1.1rem;
}

.cod code {
    color: var(--texto-medio);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    white-space: pre;
}

/* --- Plantilla marquesina: titular centrado y cinta de canales abajo --- */

.ind-panel[data-activa="marquesina"] .ind-plantilla[data-plantilla="marquesina"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.mq-cabecera {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
    max-width: 46rem;
}

.mq-titulo {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--texto);
    text-shadow: 0 2px 14px rgba(5, 5, 16, 0.85);
}

.mq-titulo b {
    font-weight: 700;
    background: linear-gradient(120deg, #ffffff, #ffffff 40%, var(--marca-texto));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mq-texto {
    margin: 0;
    max-width: 36rem;
    color: var(--texto-medio);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(5, 5, 16, 0.9);
}

.mq-carril {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.mq-pista {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: mqDesfile 44s linear infinite;
}

.mq-tarjeta {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: clamp(7rem, 11vw, 9.5rem);
    aspect-ratio: 3 / 4;
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 22px 60px rgba(5, 5, 16, 0.55);
    rotate: var(--giro, 0deg);
}

.mq-tarjeta img {
    width: clamp(2.4rem, 4vw, 3.4rem);
    height: auto;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.92;
}

.mq-tarjeta figcaption {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 600;
}

@keyframes mqDesfile {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* --- Plantilla panel: texto a la izquierda y captura del inbox --- */

.ind-panel[data-activa="panel"] .ind-plantilla[data-plantilla="panel"] {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 4rem);
}

.pn-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 40rem;
}

.pn-titulo {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--texto);
    text-shadow: 0 2px 14px rgba(5, 5, 16, 0.85);
}

.pn-titulo b {
    font-weight: 500;
    background: linear-gradient(120deg, #ffffff, #ffffff 40%, var(--marca-texto));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pn-descripcion {
    margin: 0;
    color: var(--texto-medio);
    font-size: clamp(0.98rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 8px rgba(5, 5, 16, 0.9);
}

.pn-datos { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.pn-dato {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.pn-dato b { color: var(--texto); font-size: 0.95rem; font-weight: 700; }

.pn-pantalla { position: relative; }

.pn-resplandor {
    position: absolute;
    inset: -20% -10% 0;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(180, 124, 255, 0.22), transparent 70%);
    filter: blur(50px);
}

.pn-marco {
    position: relative;
    max-width: 62rem;
    margin: 0 auto;
    padding: 0.5rem;
    border: 1px solid var(--borde);
    border-radius: 0.9rem;
    background: rgba(11, 15, 25, 0.75);
    box-shadow: 0 30px 90px rgba(5, 5, 16, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.pn-marco img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--borde);
    border-radius: 0.6rem;
}

/* --- Plantilla comida: piezas flotando alrededor del titular --- */

.ind-panel[data-activa="comida"] .ind-plantilla[data-plantilla="comida"] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(30rem, 62vh, 44rem);
    padding-block: clamp(3rem, 7vw, 6rem);
}

.cm-fondo, .cm-piezas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cm-fondo { z-index: 0; color: rgba(180, 124, 255, 0.22); }

/* Ojo de pez: el centro queda limpio y los bordes se hunden en negro */
.pag-hero[data-plantilla="comida"] .pag-velo {
    background:
        radial-gradient(closest-side circle at 50% 46%, rgba(5, 5, 16, 0) 22%, rgba(5, 5, 16, 0.55) 48%, rgba(5, 5, 16, 0.88) 72%, #000 100%),
        radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 78%, #000 100%),
        linear-gradient(180deg, var(--fondo) 0%, rgba(5, 5, 16, 0.35) 22%, rgba(5, 5, 16, 0.35) 78%, var(--fondo) 100%);
}

.pag-hero[data-plantilla="comida"] .pag-fondo { filter: saturate(0.9) brightness(0.62); }

.cm-linea { position: absolute; width: clamp(20rem, 44vw, 38rem); height: auto; }
.cm-linea--a { top: 0; left: 0; transform: translate(-33%, -33%); }
.cm-linea--b { right: 0; bottom: 0; transform: translate(25%, 25%); }

.cm-piezas { z-index: 1; }

.cm-pieza {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 24px 44px rgba(5, 5, 16, 0.7));
    animation: cmFlotar 6s ease-in-out infinite;
    animation-delay: var(--retardo, 0ms);
}

.cm-pieza--hamburguesa { top: 4%; left: 2%; width: clamp(8rem, 18vw, 17rem); }
.cm-pieza--panecillos { top: 3%; right: 2%; width: clamp(6rem, 12vw, 11rem); }
.cm-pieza--pizza { right: 3%; bottom: 4%; width: clamp(7rem, 14vw, 13rem); }
.cm-pieza--lechuga { top: 26%; left: 30%; width: clamp(2rem, 3.4vw, 3.2rem); }
.cm-pieza--tomate { top: 48%; right: 24%; width: clamp(1.8rem, 2.8vw, 2.6rem); }
.cm-pieza--tomate2 { bottom: 18%; left: 22%; width: clamp(1.8rem, 2.8vw, 2.6rem); }

.cm-texto {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
    max-width: 40rem;
    text-align: center;
}

.cm-titulo {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 3.9rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.03;
    color: var(--texto);
    text-shadow: 0 2px 16px rgba(5, 5, 16, 0.9);
}

.cm-titulo b {
    font-weight: 700;
    background: linear-gradient(120deg, #ffffff, #ffffff 40%, var(--marca-texto));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cm-descripcion {
    margin: 0;
    max-width: 34rem;
    color: var(--texto-medio);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.65;
    text-shadow: 0 1px 10px rgba(5, 5, 16, 0.95);
}

@keyframes cmFlotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* --- Nuestra recomendación para ti --- */

#recomendacion { background: var(--superficie); border-block: 1px solid var(--borde); }

.rc-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 60ch;
    margin: -2rem 0 2.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(180, 124, 255, 0.28);
    border-radius: 0.9rem;
    background: rgba(133, 0, 254, 0.1);
    color: var(--texto-medio);
    font-size: 0.9rem;
    line-height: 1.5;
}

.rc-nota .material-symbols-outlined { flex: none; font-size: 20px !important; color: var(--marca-texto); }

.rc-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1.25rem;
}

.rc-app {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.6rem 1.4rem;
    border: 1px solid var(--borde);
    border-radius: 1.25rem;
    background: var(--fondo);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

a.rc-app:hover { border-color: var(--marca); transform: translateY(-3px); }

.rc-marca { height: 1.6rem; width: auto; }

.rc-app p {
    flex: 1;
    margin: 0;
    color: var(--texto-medio);
    font-size: 0.9rem;
    line-height: 1.5;
}

.rc-ir {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--marca-texto);
    font-size: 0.82rem;
    font-weight: 600;
}

.rc-ir .material-symbols-outlined { font-size: 1rem; }
.rc-ir--apagado { color: var(--texto-tenue); font-weight: 500; }
.rc-app--sinweb { background: var(--superficie-alta); }

/* --- Demo de LucidLunch: replica clara dentro de la pagina oscura --- */

#plataforma { background: var(--superficie); border-block: 1px solid var(--borde); }

.ll-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'lado pestanas' 'lado marco';
    align-content: center;
    align-items: center;
    gap: 1.1rem clamp(2rem, 5vw, 4.5rem);
    padding: clamp(1.5rem, 3vw, 2.75rem);
    border: 1px solid var(--borde);
    border-radius: 1.5rem;
    background:
        radial-gradient(70% 110% at 78% 40%, rgba(133, 0, 254, 0.16), transparent 70%),
        var(--fondo);
}

.ll-lado { grid-area: lado; max-width: 34rem; }
.ll-demo .ll-pestanas { grid-area: pestanas; justify-self: center; }
.ll-demo .ll-marco { grid-area: marco; }

.ll-nota h3 {
    margin: 0 0 0.6rem;
    color: var(--texto);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ll-nota > p { margin: 0 0 1.2rem; color: var(--texto-medio); font-size: 1rem; line-height: 1.6; }
.ll-nota ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }

.ll-nota li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--texto-suave);
    font-size: 0.94rem;
    line-height: 1.5;
}

.ll-nota li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 0.85rem;
    height: 0.45rem;
    border-left: 2px solid var(--marca-texto);
    border-bottom: 2px solid var(--marca-texto);
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .ll-demo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'pestanas' 'marco' 'lado';
        justify-items: center;
    }
    .ll-lado { max-width: none; }
}

.ll-pestanas {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--fondo);
}

.ll-pestanas button {
    padding: 0.5rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--texto-suave);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ll-pestanas button.es-activo { background: var(--marca); color: #fff; }
.ll-pestanas button:not(.es-activo):hover { color: var(--texto); }

.ll-marco {
    width: min(100%, 24rem);
    height: 34rem;
    overflow: hidden auto;
    border: 10px solid #0f1522;
    border-radius: 2.2rem;
    background: #f6f7fb;
    box-shadow: 0 30px 80px rgba(5, 5, 16, 0.65);
    scrollbar-width: thin;
}

.ll-vista { padding: 1rem 0.95rem 1.6rem; color: #1f2333; font-size: 0.85rem; }
.ll-vista[hidden] { display: none; }

.ll-cab { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.9rem; border-bottom: 1px solid #e6e8f0; }

.ll-avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.8rem;
    background: linear-gradient(140deg, #8500fe, #b47cff);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.ll-cab b { display: block; color: #12162a; font-size: 1rem; }

.ll-abierto { display: inline-flex; align-items: center; gap: 0.3rem; color: #6b7185; font-size: 0.76rem; }
.ll-abierto i { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #22c55e; }
.ll-abierto .material-symbols-outlined { font-size: 14px !important; color: #8500fe; }

.ll-buscar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 0 0.7rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #e2e5ef;
    border-radius: 0.8rem;
    background: #fff;
    color: #9aa0b4;
}

.ll-buscar .material-symbols-outlined { font-size: 18px !important; }
.ll-tiempo { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 1rem; color: #6b7185; font-size: 0.76rem; }
.ll-tiempo .material-symbols-outlined { font-size: 15px !important; }
.ll-tiempo b { color: #12162a; }

.ll-seccion { margin: 0 0 0.15rem; color: #12162a; font-size: 1.05rem; font-weight: 800; }
.ll-vista .ll-sub { margin: 0 0 0.8rem; color: #6b7185; font-size: 0.78rem; }

.ll-promos { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.4rem; }

.ll-promo {
    display: grid;
    gap: 0.35rem;
    flex: none;
    width: 13rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: linear-gradient(160deg, #fff, #f2f4fb);
    box-shadow: 0 6px 18px rgba(18, 22, 42, 0.08);
}

.ll-promo--dos { background: linear-gradient(160deg, #1f2333, #2c3145); color: #fff; }
.ll-promo--dos b, .ll-promo--dos span { color: #fff; }

.ll-tag {
    justify-self: start;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
}

.ll-tag--gris { background: rgba(255, 255, 255, 0.2); }
.ll-promo b { color: #12162a; font-size: 0.92rem; }
.ll-promo span { color: #6b7185; font-size: 0.74rem; line-height: 1.4; }

.ll-promo button, .ll-plato button {
    margin-top: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.ll-chips { display: flex; gap: 0.4rem; overflow-x: auto; margin: 1rem 0 0.9rem; padding-bottom: 0.3rem; }

.ll-chips button {
    flex: none;
    padding: 0.45rem 0.9rem;
    border: 1px solid #e2e5ef;
    border-radius: 999px;
    background: #fff;
    color: #4b5165;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.ll-chips button.es-activo { border-color: transparent; background: #8500fe; color: #fff; }

.ll-platos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }

.ll-plato {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 0.8rem 0.6rem;
    border: 1px solid #e6e8f0;
    border-radius: 0.9rem;
    background: #fff;
    text-align: center;
}

.ll-plato[hidden] { display: none; }
.ll-plato img { width: 100%; max-width: 5.5rem; height: 4.2rem; object-fit: contain; }
.ll-plato b { color: #12162a; font-size: 0.8rem; line-height: 1.25; }
.ll-plato span { color: #6b7185; font-size: 0.78rem; font-weight: 700; }
.ll-plato button { background: #8500fe; }

.ll-tarjeta { margin-top: 0.9rem; padding: 0.9rem; border: 1px solid #e6e8f0; border-radius: 0.9rem; background: #fff; }
.ll-tarjeta-tit { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.7rem; color: #12162a; font-size: 0.85rem; font-weight: 700; }
.ll-tarjeta-tit .material-symbols-outlined { font-size: 17px !important; color: #8500fe; }

.ll-mapa {
    position: relative;
    height: 8rem;
    border-radius: 0.7rem;
    background:
        repeating-linear-gradient(90deg, #e9ecf5 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, #e9ecf5 0 1px, transparent 1px 30px),
        #f2f5ec;
}

.ll-pin {
    position: absolute;
    top: 42%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px 999px 999px 0;
    background: #6d4aff;
    color: #fff;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ll-pin .material-symbols-outlined { font-size: 16px !important; transform: rotate(45deg); }

.ll-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.ll-vista label { display: grid; gap: 0.3rem; color: #4b5165; font-size: 0.76rem; font-weight: 600; }

.ll-campo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.7rem;
    border: 1px solid #e2e5ef;
    border-radius: 0.6rem;
    background: #fbfcff;
    color: #9aa0b4;
    font-weight: 400;
}

.ll-aviso {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.7rem 0 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid #f7e2b0;
    border-radius: 0.6rem;
    background: #fdf8ec;
    color: #8a6d2f;
    font-size: 0.76rem;
}

.ll-aviso .material-symbols-outlined { font-size: 16px !important; }

.ll-vista--acceso { background: linear-gradient(150deg, #dfe7ff, #f4f0ff 55%, #cfd8ff); min-height: 100%; display: grid; place-items: center; }

.ll-acceso {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1.5rem 1.2rem;
    border-radius: 1.2rem;
    background: #fbfcff;
    box-shadow: 0 20px 50px rgba(31, 35, 51, 0.16);
    text-align: center;
}

.ll-marca { width: 7.5rem; height: auto; filter: brightness(0.25); }
.ll-acceso > b { color: #12162a; font-size: 1.15rem; }
.ll-acceso label { width: 100%; text-align: left; margin-top: 0.35rem; }

.ll-conmutador { display: flex; width: 100%; margin: 0.6rem 0 0.2rem; padding: 0.25rem; border-radius: 0.7rem; background: #eceffa; }

.ll-conmutador button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 1;
    padding: 0.5rem;
    border: 0;
    border-radius: 0.55rem;
    background: none;
    color: #6b7185;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.ll-conmutador button.es-activo { background: #fff; color: #6d4aff; box-shadow: 0 2px 6px rgba(31, 35, 51, 0.1); }
.ll-conmutador .material-symbols-outlined { font-size: 15px !important; }

.ll-olvido { width: 100%; margin: 0.1rem 0 0; color: #6d4aff; font-size: 0.74rem; text-align: right; }

.ll-entrar {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.7rem;
    border: 0;
    border-radius: 0.7rem;
    background: #6d4aff;
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.ll-registro { margin: 0.5rem 0 0; color: #6b7185; font-size: 0.78rem; }
.ll-registro b { color: #6d4aff; }

/* --- Pagina de Meta Business Partner --- */

.mt-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.mt-cabecera .seccion-texto { margin-bottom: 2rem; }
.mt-cabecera .hero-sello--fijo { margin: 0; width: clamp(150px, 20vw, 230px); }

@media (max-width: 860px) {
    .mt-cabecera { grid-template-columns: minmax(0, 1fr); }
    .mt-cabecera .hero-sello--fijo { order: -1; margin-bottom: 0.5rem; }
}

#ventajas { background: var(--fondo); }
#conexion { background: var(--superficie); border-block: 1px solid var(--borde); }

.mt-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
}

.mt-ventaja {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--borde);
    border-radius: 1.25rem;
    background: var(--superficie);
}

.mt-icono {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(226, 178, 92, 0.35);
    border-radius: 0.8rem;
    background: rgba(226, 178, 92, 0.12);
    color: #f0cf8a;
}

.mt-ventaja h3 { margin: 0 0 0.5rem; color: var(--texto); font-size: 1.02rem; font-weight: 700; }
.mt-ventaja p { margin: 0; color: var(--texto-medio); font-size: 0.92rem; line-height: 1.55; }

.mt-panel {
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: 1.1rem;
    background: #0b0f19;
    box-shadow: 0 30px 80px rgba(5, 5, 16, 0.6);
}

.mt-barra {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #1e2636;
}

.mt-barra img { width: 108px; height: auto; }

.mt-cuenta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--texto);
    font-size: 0.88rem;
    font-weight: 600;
}

.mt-cuenta i {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--marca), #b47cff);
}

.mt-cuerpo { display: grid; grid-template-columns: 13rem minmax(0, 1fr); }

.mt-menu {
    margin: 0;
    padding: 0.75rem 0;
    border-right: 1px solid #1e2636;
    list-style: none;
}

.mt-menu li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.1rem;
    color: var(--texto-suave);
    font-size: 0.83rem;
}

.mt-menu li.es-activo { color: var(--texto); background: rgba(133, 0, 254, 0.14); box-shadow: inset 2px 0 0 var(--marca-texto); }
.mt-menu .material-symbols-outlined { font-size: 18px !important; color: var(--marca-texto); }

.mt-contenido { padding: 1.4rem 1.5rem; display: grid; gap: 1rem; align-content: start; }
.mt-migas { margin: 0; color: var(--texto-tenue); font-size: 0.82rem; }
.mt-migas span { opacity: 0.5; margin: 0 0.3rem; }

.mt-tarjeta {
    padding: 1.15rem 1.3rem;
    border: 1px solid #1e2636;
    border-radius: 0.9rem;
    background: #0f1522;
}

.mt-tel {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.3rem;
    color: var(--texto);
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mt-punto {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.mt-nombre { margin: 0; color: var(--texto-suave); font-size: 0.9rem; }

.mt-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.35rem;
    color: var(--texto);
    font-size: 0.92rem;
}

.mt-fila:not(:first-child) { margin-top: 1.1rem; }

.mt-chip {
    padding: 0.15rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.mt-chip--ok { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.mt-nota { margin: 0; color: var(--texto-suave); font-size: 0.85rem; line-height: 1.5; }

.mt-pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: 1px solid #1e2636;
    padding-top: 0.9rem;
    list-style: none;
}

.mt-pestanas li {
    padding: 0.45rem 0.8rem;
    border-radius: 0.5rem;
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.mt-pestanas li.es-activo { color: var(--texto); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 -2px 0 var(--marca-texto); }

@media (max-width: 760px) {
    .mt-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .mt-menu { display: none; }
}

/* --- Pagina de contacto --- */

#canales { background: var(--fondo); }
#redes { background: var(--superficie); border-block: 1px solid var(--borde); }

.ct-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.25rem;
}

.ct-canal {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--borde);
    border-radius: 1.25rem;
    background: var(--superficie);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.ct-canal:hover { border-color: var(--marca); transform: translateY(-3px); }
.ct-canal--wa:hover { border-color: #22c55e; }

.ct-icono {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    margin-bottom: 0.7rem;
    border: 1px solid var(--borde);
    border-radius: 0.8rem;
    background: var(--superficie-suave);
    color: var(--marca-texto);
}

.ct-canal--wa .ct-icono { border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.ct-canal b { color: var(--texto); font-size: 1.02rem; }
.ct-dato { color: var(--marca-texto); font-size: 0.95rem; font-weight: 600; }
.ct-canal--wa .ct-dato { color: #4ade80; }
.ct-txt { color: var(--texto-medio); font-size: 0.9rem; line-height: 1.5; }

.ct-dos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
    align-items: start;
}

.ct-sociales { display: grid; gap: 0.7rem; }

.ct-sociales a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--borde);
    border-radius: 0.9rem;
    background: var(--fondo);
    color: var(--texto-medio);
    font-size: 0.95rem;
    font-weight: 600;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ct-sociales a:hover { border-color: var(--marca); color: var(--texto); }
.ct-sociales svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--marca-texto); }

.ct-oficina {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--borde);
    border-radius: 1.25rem;
    background: var(--fondo);
    font-style: normal;
}

.ct-oficina b { display: block; margin-bottom: 0.5rem; color: var(--texto); font-size: 1.02rem; }
.ct-oficina p { margin: 0 0 1.1rem; color: var(--texto-medio); font-size: 0.92rem; line-height: 1.6; }

.ct-oficina a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--marca-texto);
    font-size: 0.88rem;
    font-weight: 600;
}

.ct-oficina a:hover { text-decoration: underline; }
.ct-oficina .material-symbols-outlined { font-size: 1rem; }

.pag-pie-contacto {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.pag-pie-contacto:hover { background: #9412ff; }
.pag-pie-contacto .material-symbols-outlined { font-size: 1rem; }

/* --- Documentos legales --- */

.lg-doc { background: var(--fondo); }
.lg-doc .seccion-caja { max-width: 52rem; padding-top: 6.5rem; }
.lg-doc .pag-migas { padding: 0 0 1.5rem; }

.lg-titulo {
    margin: 0 0 0.75rem;
    color: var(--texto);
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.lg-sello, .lg-fuente { margin: 0 0 0.4rem; color: var(--texto-tenue); font-size: 0.85rem; }
.lg-fuente { margin-bottom: 2.5rem; }
.lg-fuente a { color: var(--marca-texto); }
.lg-fuente a:hover { text-decoration: underline; }

.lg-cuerpo { color: var(--texto-medio); font-size: 1rem; line-height: 1.75; }

.lg-cuerpo h2 {
    margin: 2.75rem 0 0.9rem;
    color: var(--texto);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.lg-cuerpo h3 {
    margin: 2rem 0 0.7rem;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 600;
}

.lg-cuerpo p { margin: 0 0 1.1rem; }
.lg-cuerpo ul { margin: 0 0 1.4rem; padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.lg-cuerpo li { padding-left: 0.2rem; }
.lg-cuerpo li::marker { color: var(--marca-texto); }
.lg-cuerpo a { color: var(--marca-texto); text-decoration: underline; }

/* --- Páginas de marca blanca y API --- */

.mb-hero {
    position: relative;
    background:
        radial-gradient(60% 90% at 15% 0%, rgba(133, 0, 254, 0.18), transparent 70%),
        var(--fondo);
    border-bottom: 1px solid var(--borde);
}

.mb-hero .seccion-caja { padding-top: 7rem; padding-bottom: 5rem; }

.mb-titulo {
    max-width: 20ch;
    margin: 0 0 1.25rem;
    color: var(--texto);
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.06;
}

.mb-titulo b {
    font-weight: 700;
    background: linear-gradient(120deg, #ffffff, #ffffff 35%, var(--marca-texto));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#setup, #activacion, #capacidades { background: var(--fondo); }
#mensualidad, #contactos { background: var(--superficie); border-block: 1px solid var(--borde); }

.mb-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1.25rem;
}

.mb-cifra {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--borde);
    border-radius: 1.25rem;
    background: var(--fondo);
}

.mb-cifra b {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--texto);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mb-cifra span { color: var(--texto-suave); font-size: 0.9rem; line-height: 1.45; }

.pasos {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.paso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1.1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--borde);
    border-radius: 1rem;
    background: var(--superficie);
}

.paso-num {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
}

.paso b { display: block; margin-bottom: 0.3rem; color: var(--texto); font-size: 1rem; }
.paso p { margin: 0; color: var(--texto-medio); font-size: 0.92rem; line-height: 1.55; }
.paso p b, .paso div > b b { display: inline; color: var(--marca-texto); }

.tabla-caja {
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: 1rem;
    background: var(--fondo);
}

.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }

.tabla th {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.tabla td { padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--borde); color: var(--texto-medio); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td:last-child { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }

.api-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.25rem;
}

.api-punto {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--borde);
    border-radius: 1.25rem;
    background: var(--superficie);
}

.api-icono {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--borde);
    border-radius: 0.8rem;
    background: var(--superficie-suave);
    color: var(--marca-texto);
}

.api-punto h3 { margin: 0 0 0.5rem; color: var(--texto); font-size: 1.02rem; font-weight: 700; }
.api-punto p { margin: 0; color: var(--texto-medio); font-size: 0.92rem; line-height: 1.55; }

@media (max-width: 900px) {
    body.pag .ind-panel[data-activa] .ind-plantilla { grid-template-columns: minmax(0, 1fr); }
    .pag-hero { min-height: auto; padding: 2rem 0 3rem; }
    .mb-hero .seccion-caja { padding-top: 4.5rem; padding-bottom: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mq-pista { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pag-fondo { transform: none; }
    body.pag .col-forma { animation: none; }
}