:root {
            --charcoal: #1E1D1F;
            --cream: #F4F3E6;
            --orange: #FB6620;
            --purple: #7B74B0;
            --light-grey: #2A292C;
            --deep-charcoal: #151416;
            --border-radius: 16px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        html, body {
            font-family: 'DM Sans', sans-serif;
            background: var(--deep-charcoal);
            color: var(--cream);
            line-height: 1.5;
            min-height: 100vh;
            width: 100%;
            overflow-x: hidden;
        }

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

        .bg-glow {
            position: absolute;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(251,102,32,0.15) 0%, transparent 70%);
            border-radius: 50%;
            top: -100px; left: -100px;
            animation: pulse-glow 6s infinite alternate;
        }

        .bg-glow-purple {
            position: absolute;
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(123,116,176,0.10) 0%, transparent 70%);
            border-radius: 50%;
            bottom: -150px; right: -100px;
            animation: pulse-glow 8s infinite alternate-reverse;
        }

        @keyframes pulse-glow {
            0% { transform: scale(1); opacity: 0.7; }
            100% { transform: scale(1.2); opacity: 1; }
        }

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

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

        /* ===========================
           NAVBAR
        =========================== */
        .lp-nav {
            position: fixed;
            top: 0; left: 0;
            width: 100%;
            z-index: 1000;
            padding: 0.9rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(21,20,22,0.85);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            gap: 1rem;
        }

        .nav-logo {
            font-weight: 800;
            font-size: 1.3rem;
            color: var(--cream);
            letter-spacing: -0.02em;
            flex-shrink: 0;
        }

        .nav-logo span { color: var(--orange); }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            list-style: none;
        }

        .nav-links a {
            color: #A09FA1;
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 600;
            transition: color 0.2s;
        }

        .nav-links a:hover { color: var(--cream); }

        .nav-cta {
            background: var(--orange);
            color: var(--charcoal);
            border: none;
            padding: 0.55rem 1.1rem;
            border-radius: 8px;
            font-weight: 800;
            font-size: 0.85rem;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(251,102,32,0.4);
        }

        /* ===========================
           HERO
        =========================== */
        .hero-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 8rem 1.5rem 6rem;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before,
        .hero-section::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .hero-section::before {
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(251,102,32,0.18) 0%, transparent 65%);
            top: -15%; right: -10%;
            animation: hero-blob-a 12s ease-in-out infinite alternate;
        }

        .hero-section::after {
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(123,116,176,0.15) 0%, transparent 65%);
            bottom: -10%; left: -5%;
            animation: hero-blob-b 15s ease-in-out infinite alternate;
        }

        @keyframes hero-blob-a {
            0%   { transform: translate(0,0) scale(1); }
            100% { transform: translate(-20px,60px) scale(1.05); }
        }

        @keyframes hero-blob-b {
            0%   { transform: translate(0,0) scale(1); }
            100% { transform: translate(30px,-20px) scale(1.1); }
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(251,102,32,0.12);
            border: 1px solid rgba(251,102,32,0.3);
            color: var(--orange);
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0.4rem 1rem;
            border-radius: 100px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 1.8rem;
            animation: fadeUp 0.6s ease both;
        }

        .hero-pill::before {
            content: '';
            width: 7px; height: 7px;
            background: var(--orange);
            border-radius: 50%;
            animation: pulse-glow 1.5s infinite;
        }

        .hero-title {
            font-size: clamp(2rem, 5vw, 4.2rem);
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -0.03em;
            max-width: 860px;
            margin-bottom: 1.2rem;
            animation: fadeUp 0.7s ease 0.1s both;
        }

        .hero-title em {
            font-style: normal;
            background: linear-gradient(90deg, var(--orange), #FF8C55);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-subtitle {
            font-size: 1rem;
            color: #A09FA1;
            max-width: 520px;
            margin-bottom: 2.5rem;
            animation: fadeUp 0.7s ease 0.2s both;
        }

        .hero-tags {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 2.5rem;
            animation: fadeUp 0.7s ease 0.25s both;
        }

        .hero-tag {
            background: rgba(244,243,230,0.06);
            border: 1px solid rgba(244,243,230,0.12);
            border-radius: 100px;
            padding: 0.3rem 0.85rem;
            font-size: 0.8rem;
            color: #C4C3B6;
            font-weight: 600;
        }

        .hero-cta-group {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
            animation: fadeUp 0.7s ease 0.3s both;
        }

        .btn-hero-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: var(--orange);
            color: var(--charcoal);
            border: none;
            padding: 0.9rem 1.6rem;
            border-radius: 10px;
            font-weight: 800;
            font-size: 0.95rem;
            cursor: pointer;
            text-decoration: none;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 8px 30px rgba(251,102,32,0.35);
            text-align: center;
        }

        .btn-hero-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(251,102,32,0.5);
        }

        .btn-hero-secondary {
            color: #A09FA1;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            cursor: pointer;
            transition: color 0.2s;
            border: none;
            background: none;
        }

        .btn-hero-secondary:hover { color: var(--cream); }

        .hero-scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3rem;
            color: #606060;
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            animation: hero-scroll-bounce 2s infinite;
        }

        @keyframes hero-scroll-bounce {
            0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
            50%       { transform: translateX(-50%) translateY(6px); opacity: 0.9; }
        }

        /* ===========================
           INDUSTRIES
        =========================== */
        .industries-section {
            background: var(--charcoal);
            padding: 5rem 1.5rem 5rem;
            text-align: center;
            overflow: hidden;
            position: relative;
        }

        .industry-intro-badge {
            display: flex;
            justify-content: center;
            margin-bottom: 2.5rem;
        }

        .industry-intro-badge span {
            display: inline-block;
            background: rgba(123,116,176,0.1);
            border: 1px solid rgba(123,116,176,0.25);
            color: #C4C3B6;
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.5;
            padding: 0.8rem 1.4rem;
            border-radius: 12px;
            max-width: 640px;
            text-align: center;
        }

        .industry-phrase {
            font-size: clamp(1.6rem, 4vw, 3.4rem);
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -0.02em;
            max-width: 860px;
            margin: 0 auto 2.5rem;
        }

        .phrase-static { color: #6A6870; }

        .phrase-business {
            color: var(--orange);
            display: inline-block;
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .phrase-need {
            display: block;
            background: linear-gradient(90deg, var(--cream) 0%, #C4B8FF 50%, var(--cream) 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: phrase-shimmer 4s linear infinite;
            transition: opacity 0.35s ease, transform 0.35s ease;
            font-size: 0.88em;
        }

        @keyframes phrase-shimmer {
            0%   { background-position: 0% center; }
            100% { background-position: 200% center; }
        }

        .phrase-business.swapping,
        .phrase-need.swapping {
            opacity: 0;
            transform: translateY(-12px);
        }

        .industry-dots {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .industry-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: rgba(244,243,230,0.2);
            transition: background 0.3s, transform 0.3s;
            cursor: pointer;
        }

        .industry-dot.active {
            background: var(--purple);
            transform: scale(1.4);
        }

        .industry-chip-row {
            display: flex;
            gap: 0.6rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 2.5rem;
        }

        .industry-chip {
            padding: 0.35rem 0.9rem;
            border-radius: 100px;
            font-size: 0.78rem;
            font-weight: 700;
            border: 1px solid rgba(255,255,255,0.1);
            color: #A09FA1;
            cursor: pointer;
            transition: all 0.2s;
        }

        .industry-chip.active, .industry-chip:hover {
            border-color: var(--purple);
            color: var(--purple);
            background: rgba(123,116,176,0.12);
        }

        /* ===========================
           ECOSISTEMA
        =========================== */
        .ecosystem-section {
            padding: 6rem 1.5rem;
            background: var(--deep-charcoal);
            position: relative;
            z-index: 10;
        }

        .section-label {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--purple);
            margin-bottom: 1rem;
            text-align: center;
        }

        .section-heading {
            font-size: clamp(1.5rem, 3vw, 2.3rem);
            font-weight: 800;
            margin-bottom: 0.8rem;
            letter-spacing: -0.02em;
            text-align: center;
        }

        .section-subtext {
            color: #A09FA1;
            font-size: 0.95rem;
            max-width: 460px;
            margin: 0 auto 4rem;
            text-align: center;
        }

        .ecosystem-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .eco-card {
            background: rgba(42,41,44,0.55);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 20px;
            padding: 2rem 1.6rem;
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            backdrop-filter: blur(8px);
            transition: transform 0.25s, box-shadow 0.25s;
            position: relative;
            overflow: hidden;
        }

        .eco-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
        }

        .eco-card.hw::before { background: linear-gradient(90deg, var(--orange), transparent); }
        .eco-card.os::before { background: linear-gradient(90deg, #4A9EFF, transparent); }
        .eco-card.st::before { background: linear-gradient(90deg, var(--purple), transparent); }

        .eco-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 60px rgba(0,0,0,0.4);
        }

        .eco-icon-wrap {
            width: 48px; height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .eco-icon-wrap.hw { background: rgba(251,102,32,0.15); color: var(--orange); }
        .eco-icon-wrap.os { background: rgba(74,158,255,0.15); color: #4A9EFF; }
        .eco-icon-wrap.st { background: rgba(123,116,176,0.15); color: var(--purple); }

        .eco-badge {
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.22rem 0.65rem;
            border-radius: 100px;
        }

        .eco-badge.hw { background: rgba(251,102,32,0.15); color: var(--orange); }
        .eco-badge.os { background: rgba(74,158,255,0.15); color: #4A9EFF; }
        .eco-badge.st { background: rgba(123,116,176,0.15); color: var(--purple); }

        .eco-card h3 {
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--cream);
        }

        .eco-tagline {
            font-size: 0.83rem;
            color: #A09FA1;
            font-weight: 600;
            margin-top: -0.4rem;
        }

        .eco-card p {
            font-size: 0.9rem;
            color: #8A898C;
            line-height: 1.65;
        }

        .eco-features {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            margin-top: 0.3rem;
        }

        .eco-features li {
            display: flex;
            align-items: flex-start;
            gap: 0.55rem;
            font-size: 0.85rem;
            color: #C4C3B6;
        }

        .eco-features li::before {
            content: '';
            width: 6px; height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 0.45em;
        }

        .eco-card.hw .eco-features li::before { background: var(--orange); }
        .eco-card.os .eco-features li::before { background: #4A9EFF; }
        .eco-card.st .eco-features li::before { background: var(--purple); }

        /* ===========================
           PRICING SECTION
        =========================== */
        .pricing-section {
            padding: 6rem 1.5rem 10rem;
            position: relative;
            z-index: 10;
            background: radial-gradient(ellipse at 50% 0%, rgba(251,102,32,0.07) 0%, transparent 60%), var(--charcoal);
        }

        /* Calculadora: 2 columnas en desktop, 1 en móvil */
        .calc-grid {
            display: grid;
            grid-template-columns: 1fr 1.05fr;
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

        .config-panels {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* ===========================
           PANELS
        =========================== */
        .panel {
            background: linear-gradient(145deg, var(--light-grey) 0%, #222123 100%);
            padding: 1.6rem 1.4rem;
            border-radius: var(--border-radius);
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            border: 1px solid rgba(255,255,255,0.03);
            display: flex;
            flex-direction: column;
        }

        .base-section { border-top: 4px solid var(--orange); }
        .studio-section { border-top: 4px solid var(--purple); }

        .base-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(251,102,32,0.05), transparent 60%);
            pointer-events: none;
        }

        .studio-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at bottom left, rgba(123,116,176,0.05), transparent 70%);
            pointer-events: none;
        }

        .panel-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: -0.01em;
            position: relative;
            z-index: 2;
        }

        .base-section .panel-title { color: var(--orange); }
        .studio-section .panel-title { color: var(--purple); }

        .icon-circle {
            background-color: rgba(251,102,32,0.1);
            padding: 8px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .studio-section .icon-circle { background-color: rgba(123,116,176,0.1); }

        .feature-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.8rem;
            margin-bottom: 1.2rem;
            position: relative;
            z-index: 2;
        }

        .feature-card {
            background: rgba(255,255,255,0.02);
            padding: 0.9rem;
            border-radius: 12px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            border: 1px solid rgba(255,255,255,0.01);
        }

        .feature-card.hw { border-left: 2px solid rgba(251,102,32,0.3); }
        .feature-card.st { border-left: 2px solid rgba(123,116,176,0.3); }

        .feature-card .ft-icon {
            flex-shrink: 0;
            width: 32px; height: 32px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255,255,255,0.03);
        }

        .hw .ft-icon { color: rgba(251,102,32,0.7); }
        .st .ft-icon { color: rgba(123,116,176,0.7); }

        .feature-content h4 {
            font-size: 0.95rem;
            margin-bottom: 0.15rem;
            color: #E0DFD5;
            font-weight: 700;
        }

        .feature-content p {
            font-size: 0.8rem;
            color: #8A898C;
            line-height: 1.35;
        }

        /* ===========================
           CONTROLS
        =========================== */
        .control-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.2rem;
            background: rgba(21,20,22,0.95);
            border-radius: 14px;
            margin-top: auto;
            margin-bottom: 0.7rem;
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            position: relative;
            z-index: 2;
            gap: 1rem;
        }

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

        .control-label span {
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .control-label small {
            color: #8A898C;
            font-size: 0.77rem;
        }

        .counter {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(0,0,0,0.3);
            padding: 5px;
            border-radius: 30px;
            flex-shrink: 0;
        }

        .btn-count {
            background: var(--light-grey);
            color: var(--cream);
            border: none;
            width: 34px; height: 34px;
            border-radius: 50%;
            font-size: 1.3rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s;
        }

        .btn-count:hover:not(:disabled) { transform: scale(1.1); }
        .hw .btn-count:hover:not(:disabled) { background: var(--orange); color: var(--charcoal); }
        .st .btn-count:hover:not(:disabled) { background: var(--purple); color: var(--cream); }
        .btn-count:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

        .count-display {
            font-size: 1.3rem;
            font-weight: 800;
            width: 30px;
            text-align: center;
        }

        /* Toggle */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 52px; height: 28px;
            flex-shrink: 0;
        }

        .toggle-switch input { opacity: 0; width: 0; height: 0; }

        .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background-color: var(--light-grey);
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px; width: 20px;
            left: 4px; bottom: 4px;
            background-color: #8A898C;
            transition: .4s cubic-bezier(0.4,0,0.2,1);
            border-radius: 50%;
        }

        input:checked + .slider { background-image: linear-gradient(90deg, var(--purple), #9E96D9); }
        input:checked + .slider:before { background-color: var(--cream); transform: translateX(24px); }

        /* Tags */
        .tag {
            background-color: rgba(251,102,32,0.15);
            color: var(--orange);
            font-size: 0.42rem;
            padding: 0.1rem 0.3rem;
            border-radius: 20px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            display: inline-block;
            border: 1px solid rgba(251,102,32,0.4);
            animation: pulse-border 2s infinite;
            white-space: nowrap;
        }

        .tag.purple {
            background-color: rgba(123,116,176,0.15);
            color: #9E96D9;
            border: 1px solid rgba(123,116,176,0.4);
            animation: pulse-border-purple 2s infinite;
        }

        @keyframes pulse-border {
            0%   { box-shadow: 0 0 0 0 rgba(251,102,32,0.4); }
            70%  { box-shadow: 0 0 0 5px rgba(251,102,32,0); }
            100% { box-shadow: 0 0 0 0 rgba(251,102,32,0); }
        }

        @keyframes pulse-border-purple {
            0%   { box-shadow: 0 0 0 0 rgba(123,116,176,0.4); }
            70%  { box-shadow: 0 0 0 5px rgba(123,116,176,0); }
            100% { box-shadow: 0 0 0 0 rgba(123,116,176,0); }
        }

        /* Active pulse border */
        .active-pulse {
            position: relative;
        }

        .active-pulse::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 14px;
            box-shadow: inset 0 0 0 1px rgba(251,102,32,0.3), 0 0 15px rgba(251,102,32,0.08);
            pointer-events: none;
            animation: soft-glow-border 3s infinite alternate;
        }

        @keyframes soft-glow-border {
            from { opacity: 0.3; }
            to   { opacity: 1; }
        }

        /* ===========================
           RECEIPT
        =========================== */
        .receipt-panel {
            background: linear-gradient(135deg, var(--cream) 0%, #E8E7D5 100%);
            color: var(--charcoal);
            padding: 2rem 2rem;
            border-radius: var(--border-radius);
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 5rem;
            height: max-content;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        .receipt-title {
            font-size: 1.25rem;
            color: var(--orange);
            font-weight: 800;
            margin-bottom: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .receipt-box {
            background: rgba(255,255,255,0.4);
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 8px;
            padding: 0.9rem 1rem;
            margin-bottom: 0.8rem;
        }

        .receipt-box.hw-box { border-left: 4px solid var(--orange); }
        .receipt-box.st-box { border-left: 4px solid var(--purple); }

        .receipt-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: 0.95rem;
            margin-bottom: 0.3rem;
        }

        .receipt-item.sub {
            font-size: 0.8rem;
            color: #666;
            margin-top: 0;
            margin-bottom: 0;
            font-weight: 500;
        }

        .receipt-item span:first-child { font-weight: 700; }

        .receipt-item .dots {
            flex-grow: 1;
            border-bottom: 2px dotted #C4C3B7;
            margin: 0 10px 5px;
            opacity: 0.6;
        }

        .receipt-total {
            margin-top: auto;
            border-top: 2px solid rgba(30,29,31,0.2);
            padding-top: 1.2rem;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .total-row span:first-child {
            font-size: 1.2rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .total-row .amount {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--orange);
            line-height: 1;
        }

        .saas-note {
            text-align: right;
            font-size: 0.95rem;
            color: var(--purple);
            font-weight: 700;
            margin-top: 0.7rem;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
        }

        .btn-cta {
            background: linear-gradient(90deg, var(--charcoal), #2A292C);
            color: var(--cream);
            border: none;
            padding: 1.1rem;
            width: 100%;
            font-size: 1.05rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 12px;
            margin-top: 2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            position: relative;
            overflow: hidden;
        }

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

        .btn-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(251,102,32,0.4);
            background: linear-gradient(90deg, var(--orange), #FF7B3D);
            color: var(--charcoal);
        }

        .btn-cta:hover::before { left: 100%; }

        /* ===========================
           DISCOUNT PROGRESS
        =========================== */
        .discount-progress-container {
            margin: 0.8rem 0;
            background: rgba(30,29,31,0.05);
            padding: 0.9rem;
            border-radius: 12px;
            border: 1px dashed rgba(30,29,31,0.2);
        }

        .discount-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.7rem;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .discount-progress-track {
            height: 7px;
            background: #D7D6C8;
            border-radius: 10px;
            position: relative;
            margin-bottom: 0.7rem;
            overflow: hidden;
        }

        .discount-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--orange), #FF854D);
            border-radius: 10px;
            transition: width 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
            width: 0%;
        }

        .discount-tiers {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: #666;
            font-weight: 600;
        }

        .tier { display: flex; flex-direction: column; align-items: center; }
        .tier.active { color: var(--orange); font-weight: 800; }

        .discount-unlock-message {
            text-align: center;
            font-size: 0.8rem;
            margin-top: 0.8rem;
            padding: 0.5rem;
            background: var(--cream);
            border-radius: 6px;
            font-weight: 700;
            color: var(--charcoal);
        }

        /* ===========================
           DYNAMIC FACT BAR
        =========================== */
        .dynamic-data-box {
            position: fixed;
            bottom: 0; left: 0;
            width: 100%;
            padding: 0 1.5rem;
            background: rgba(21,20,22,0.98);
            border-top: 1px solid rgba(123,116,176,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
            backdrop-filter: blur(10px);
            min-height: 60px;
        }

        .data-content {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            max-width: 1200px;
            width: 100%;
            transition: opacity 0.4s ease, transform 0.4s ease;
            padding: 0.7rem 0;
        }

        .data-icon {
            color: var(--purple);
            min-width: 28px;
            flex-shrink: 0;
        }

        .data-left {
            flex-shrink: 0;
            width: 160px;
            text-align: right;
            border-right: 2px solid rgba(255,255,255,0.1);
            padding-right: 1.2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .data-left h5 {
            font-size: 0.9rem;
            color: var(--purple);
            margin-bottom: 2px;
            font-weight: 800;
            line-height: 1.1;
        }

        .data-right { flex-grow: 1; }

        .data-right p {
            font-size: 0.85rem;
            color: var(--cream);
            margin: 0;
            font-style: italic;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .data-content.fade-out { opacity: 0; transform: translateY(5px); }
        .data-content.fade-in  { opacity: 1; transform: translateY(0); }

        /* ===========================
           ANIMATION UTILS
        =========================== */
        .pulse-animation {
            animation: text-pop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both;
        }

        @keyframes text-pop {
            0%   { transform: scale(1); opacity: 0.7; }
            50%  { transform: scale(1.04); opacity: 1; }
            100% { transform: scale(1); }
        }

        .highlight-text { transition: color 0.3s; }

        /* ===========================
           RESPONSIVE BREAKPOINTS
        =========================== */

        /* Tablet: 768px - 1024px */
        @media (max-width: 1024px) {
            .ecosystem-grid {
                grid-template-columns: 1fr 1fr;
            }

            .eco-card:last-child {
                grid-column: 1 / -1;
                max-width: 500px;
                margin: 0 auto;
                width: 100%;
            }

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

            .receipt-panel {
                position: static;
            }
        }

        /* Mobile: hasta 768px */
        @media (max-width: 768px) {
            /* Nav */
            .lp-nav {
                padding: 0.8rem 1rem;
            }

            .nav-links {
                display: none; /* Ocultar links en móvil */
            }

            .nav-cta {
                font-size: 0.78rem;
                padding: 0.5rem 0.9rem;
            }

            /* Hero */
            .hero-section {
                padding: 7rem 1.2rem 5rem;
            }

            .hero-title {
                font-size: clamp(1.7rem, 7vw, 2.6rem);
            }

            .hero-subtitle {
                font-size: 0.92rem;
            }

            .hero-cta-group {
                flex-direction: column;
                gap: 0.8rem;
                width: 100%;
            }

            .btn-hero-primary {
                width: 100%;
                justify-content: center;
                font-size: 0.9rem;
                padding: 0.9rem 1.2rem;
            }

            /* Industries */
            .industries-section {
                padding: 3.5rem 1.2rem 3.5rem;
            }

            .industry-intro-badge span {
                font-size: 0.85rem;
                padding: 0.7rem 1.1rem;
            }

            .industry-phrase {
                font-size: clamp(1.4rem, 6vw, 2rem);
            }

            .industry-chip-row {
                display: none; /* Demasiado para móvil, solo dots */
            }

            /* Ecosystem */
            .ecosystem-section {
                padding: 4rem 1.2rem;
            }

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

            .eco-card:last-child {
                grid-column: auto;
                max-width: 100%;
            }

            /* Pricing */
            .pricing-section {
                padding: 4rem 1.2rem 9rem;
            }

            .calc-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            /* Panel adjustments */
            .panel {
                padding: 1.3rem 1.1rem;
            }

            .panel-title {
                font-size: 1.1rem;
            }

            .feature-grid {
                grid-template-columns: 1fr; /* 1 columna en móvil */
            }

            .control-group {
                padding: 0.9rem 1rem;
                gap: 0.8rem;
            }

            .control-label span {
                font-size: 0.88rem;
            }

            /* Receipt */
            .receipt-panel {
                padding: 1.5rem 1.3rem;
            }

            .total-row .amount {
                font-size: 1.8rem;
            }

            /* Fact bar: simplificado en móvil */
            .data-left {
                display: none; /* Ocultar título en móvil para ahorrar espacio */
            }

            .data-icon {
                display: none;
            }

            .data-right p {
                font-size: 0.78rem;
                -webkit-line-clamp: 2;
            }

            .dynamic-data-box {
                min-height: 52px;
                padding: 0 1rem;
            }
        }

        /* Móvil pequeño: hasta 420px */
        @media (max-width: 420px) {
            .hero-title {
                font-size: clamp(1.5rem, 8vw, 2rem);
            }

            .hero-tags {
                gap: 0.4rem;
            }

            .hero-tag {
                font-size: 0.73rem;
                padding: 0.25rem 0.65rem;
            }

            .nav-logo {
                font-size: 1.1rem;
            }

            .nav-cta {
                font-size: 0.72rem;
                padding: 0.45rem 0.7rem;
            }

            .section-heading {
                font-size: 1.4rem;
            }

            .btn-hero-primary {
                font-size: 0.85rem;
            }

            .count-display {
                font-size: 1.1rem;
            }

            .btn-count {
                width: 30px;
                height: 30px;
            }
        }