/* Estilos de templates/Soporte.blade.php (antes inline en el template). */
        :root {
            --c-violet: #A87ED8;
            --c-blue: #60a5fa;
            --c-blue-soft: #92BFF9;
            --c-dark: #050810;
            --c-navy-deep: #0f172a;
            --c-navy-light: #1e293b;
            --c-slate: #94a3b8;
            --c-white: #f8fafc;
            --c-green: #34d399;
            --c-amber: #fbbf24;
            --c-red: #f87171;
        }

        body {
            background-color: var(--c-dark);
            font-family: 'Outfit', sans-serif;
            color: var(--c-white);
        }

        .sop-section { padding: 130px 0; position: relative; overflow: hidden; }
        /* Glow up: fondos con profundidad en vez de planos.
           Los glows radiales arrancan más adentro (transparentes en los bordes)
           para que el borde de cada sección sea SIEMPRE su color base sólido:
           dark = #050810, navy = #0f172a. Así los fundidos calzan exacto. */
        .bg-dark-base { background:
            radial-gradient(110% 70% at 15% 50%, rgba(96,165,250,0.06) 0%, transparent 55%),
            radial-gradient(120% 75% at 100% 60%, rgba(168,126,216,0.06) 0%, transparent 55%),
            var(--c-dark); }
        .bg-navy-base { background:
            radial-gradient(110% 70% at 85% 45%, rgba(168,126,216,0.10) 0%, transparent 55%),
            radial-gradient(110% 75% at 0% 60%, rgba(96,165,250,0.08) 0%, transparent 55%),
            var(--c-navy-deep); }
        .pos-rel { position: relative; }

        .sop-glow { position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(circle at 0% 0%, rgba(96,165,250,0.06) 0%, transparent 50%),
                        radial-gradient(circle at 100% 100%, rgba(168,126,216,0.05) 0%, transparent 50%); }
        .sop-grid { position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
            background-image: linear-gradient(rgba(96,165,250,0.1) 1px, transparent 1px),
                             linear-gradient(90deg, rgba(96,165,250,0.1) 1px, transparent 1px);
            background-size: 52px 52px; }

        /* Auras suaves flotantes (profundidad por sección) */
        .sop-aura { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
            filter: blur(70px); opacity: 0.5; }
        .sop-aura--blue { background: radial-gradient(circle, rgba(96,165,250,0.18) 0%, transparent 70%); }
        .sop-aura--violet { background: radial-gradient(circle, rgba(168,126,216,0.18) 0%, transparent 70%); }
        .sop-aura--breathe { animation: sopBreathe 11s ease-in-out infinite; }
        @keyframes sopBreathe { 0%,100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.18); opacity: 0.6; } }

        /* Transiciones suaves entre secciones — fundido vertical limpio,
           cada borde se funde con el color EXACTO de la sección vecina.
           El color destino se pasa por --sop-fade-color (inline). */
        .sop-fade { position: absolute; left: 0; right: 0; height: 180px; pointer-events: none; z-index: 1; }
        .sop-fade--top { top: 0; background: linear-gradient(180deg, var(--sop-fade-color, var(--c-dark)) 0%, transparent 100%); }
        .sop-fade--bot { bottom: 0; background: linear-gradient(0deg, var(--sop-fade-color, var(--c-dark)) 0%, transparent 100%); }

        /* Hilo de "vigilancia" continua (motivo de marca repetido sutilmente) */
        .sop-thread { position: absolute; left: 0; right: 0; height: 2px; pointer-events: none; z-index: 2; overflow: hidden; }
        .sop-thread::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 38%;
            background: linear-gradient(90deg, transparent, rgba(96,165,250,0.55) 45%, rgba(168,126,216,0.55) 60%, transparent);
            animation: sopSweep 7s linear infinite; }
        @keyframes sopSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(363%); } }

        /* Scroll reveal coherente */
        .sop-reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s cubic-bezier(0.2,1,0.3,1), transform 0.8s cubic-bezier(0.2,1,0.3,1); }
        .sop-reveal.is-in { opacity: 1; transform: translateY(0); }
        .sop-reveal--d1 { transition-delay: 0.08s; }
        .sop-reveal--d2 { transition-delay: 0.16s; }
        .sop-reveal--d3 { transition-delay: 0.24s; }
        .sop-reveal--d4 { transition-delay: 0.32s; }

        /* Labels */
        .sop-label {
            display: inline-block; padding: 9px 22px;
            background: rgba(96,165,250,0.1); color: var(--c-blue);
            border-radius: 100px; font-weight: 800; font-size: 0.82rem;
            text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 24px;
            border: 1px solid rgba(96,165,250,0.2); backdrop-filter: blur(10px);
        }
        .sop-label--violet { background: rgba(168,126,216,0.1); color: var(--c-violet); border-color: rgba(168,126,216,0.22); }

        /* Titles */
        .sop-title { font-weight: 900; color: var(--c-white); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -2px; margin-bottom: 26px; }
        .sop-title span { background: linear-gradient(135deg, var(--c-blue), var(--c-violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .sop-desc { font-size: 1.2rem; color: var(--c-slate); line-height: 1.7; margin-bottom: 0; }
        .sop-desc-lg { font-size: 1.3rem; }

        /* Buttons */
        .sop-btn {
            background: var(--c-white); color: var(--c-dark) !important;
            padding: 20px 46px; border-radius: 100px; font-weight: 900;
            text-transform: uppercase; letter-spacing: 1px; display: inline-block;
            transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1);
            box-shadow: 0 0 30px rgba(255,255,255,0.08); border: none; text-decoration: none !important;
        }
        .sop-btn:hover { transform: translateY(-4px) scale(1.02); background: var(--c-blue); color: #fff !important; box-shadow: 0 0 50px rgba(96,165,250,0.4); }
        .sop-btn--ghost {
            background: transparent; color: var(--c-white) !important;
            border: 1px solid rgba(255,255,255,0.18); box-shadow: none;
        }
        .sop-btn--ghost:hover { background: rgba(255,255,255,0.06); color: #fff !important; border-color: rgba(96,165,250,0.4); box-shadow: none; }

        /* HERO */
        .sop-hero { position: relative; padding: 170px 0 90px; min-height: 88vh; display: flex; align-items: center; overflow: hidden;
            background:
                radial-gradient(70% 60% at 75% 35%, rgba(168,126,216,0.10) 0%, transparent 60%),
                radial-gradient(60% 60% at 20% 70%, rgba(96,165,250,0.08) 0%, transparent 60%),
                var(--c-dark);
            background-image:
                radial-gradient(70% 60% at 75% 35%, rgba(168,126,216,0.10) 0%, transparent 60%),
                radial-gradient(60% 60% at 20% 70%, rgba(96,165,250,0.08) 0%, transparent 60%),
                radial-gradient(rgba(96,165,250,0.10) 1px, transparent 1px);
            background-size: auto, auto, 50px 50px; }
        .sop-hero__content { position: relative; z-index: 10; }
        .sop-hero__title { font-size: clamp(2.3rem, 4.6vw, 4rem); font-weight: 950; line-height: 0.99; letter-spacing: -2.5px; margin-bottom: 26px; color: var(--c-white); text-shadow: 0 0 40px rgba(96,165,250,0.2); }
        .sop-hero__title span { background: linear-gradient(135deg, var(--c-blue), var(--c-violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(168,126,216,0.3)); }
        .sop-hero__sub { font-size: 1.32rem; color: var(--c-slate); line-height: 1.6; margin: 0 0 38px; max-width: 560px; font-weight: 400; }
        .sop-hero__pulse { position: absolute; top: 46%; left: 64%; transform: translate(-50%,-50%); width: 780px; height: 780px; max-width: 92%; pointer-events: none; z-index: 1;
            background: radial-gradient(circle, rgba(96,165,250,0.10) 0%, rgba(168,126,216,0.06) 38%, transparent 66%); filter: blur(30px); }
        .sop-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

        /* SLA interactive */
        .sla-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
        .sla-tab {
            flex: 1 1 auto; min-width: 120px; cursor: pointer; user-select: none;
            background: rgba(30,41,59,0.4); border: 1px solid rgba(255,255,255,0.06);
            border-radius: 16px; padding: 16px 18px; text-align: center; transition: all 0.3s ease;
            font-family: 'Outfit', sans-serif; color: var(--c-white);
        }
        .sla-tab__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
        .sla-tab--critical .sla-tab__dot { background: var(--c-red); box-shadow: 0 0 10px var(--c-red); }
        .sla-tab--high .sla-tab__dot { background: var(--c-amber); box-shadow: 0 0 10px var(--c-amber); }
        .sla-tab--normal .sla-tab__dot { background: var(--c-green); box-shadow: 0 0 10px var(--c-green); }
        .sla-tab__name { font-weight: 800; font-size: 1.05rem; vertical-align: middle; }
        .sla-tab:hover { border-color: rgba(96,165,250,0.3); }
        .sla-tab.is-active { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.45); box-shadow: 0 8px 24px -8px rgba(96,165,250,0.4); }
        .sla-tab--critical.is-active { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.45); box-shadow: 0 8px 24px -8px rgba(248,113,113,0.4); }
        .sla-tab--high.is-active { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.45); box-shadow: 0 8px 24px -8px rgba(251,191,36,0.4); }
        .sla-tab--normal.is-active { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.45); box-shadow: 0 8px 24px -8px rgba(52,211,153,0.4); }

        .sla-panel { display: none; }
        .sla-panel.is-active { display: block; animation: slaFade 0.35s ease; }
        @keyframes slaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .sla-card { background: linear-gradient(145deg, rgba(30,41,59,0.7), rgba(15,23,42,0.95)); border: 1px solid rgba(96,165,250,0.12); border-radius: 26px; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
        .sla-card__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
        .sla-card__time { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 950; line-height: 1; letter-spacing: -2px; }
        .sla-time--critical { color: var(--c-red); }
        .sla-time--high { color: var(--c-amber); }
        .sla-time--normal { color: var(--c-green); }
        .sla-card__time-label { font-size: 0.8rem; color: var(--c-slate); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
        .sla-card__title { color: var(--c-white); font-weight: 800; font-size: 1.4rem; margin: 18px 0 12px; }
        .sla-card__desc { color: var(--c-slate); font-size: 1.05rem; line-height: 1.65; margin-bottom: 18px; }
        .sla-card__example { font-size: 0.92rem; color: var(--c-blue-soft); background: rgba(96,165,250,0.06); border-left: 3px solid rgba(96,165,250,0.4); padding: 12px 16px; border-radius: 0 10px 10px 0; font-family: 'Outfit', sans-serif; }
        .sla-note { margin-top: 22px; font-size: 0.85rem; color: var(--c-slate); opacity: 0.85; font-style: italic; display: flex; align-items: flex-start; gap: 8px; }
        .sla-note i { color: var(--c-blue); margin-top: 2px; }

        /* PROACTIVE VS REACTIVE */
        .pvr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .pvr-col { border-radius: 26px; padding: 36px 32px; height: 100%; }
        .pvr-col--reactive { background: rgba(248,113,113,0.05); border: 1px solid rgba(248,113,113,0.15); }
        .pvr-col--proactive { background: linear-gradient(160deg, rgba(96,165,250,0.08), rgba(168,126,216,0.06)); border: 1px solid rgba(96,165,250,0.25); box-shadow: 0 24px 60px -20px rgba(96,165,250,0.3); }
        .pvr-col__icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 18px; }
        .pvr-col--reactive .pvr-col__icon { background: rgba(248,113,113,0.12); color: var(--c-red); border: 1px solid rgba(248,113,113,0.25); }
        .pvr-col--proactive .pvr-col__icon { background: rgba(96,165,250,0.14); color: var(--c-blue); border: 1px solid rgba(96,165,250,0.3); }
        .pvr-col__sub { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; margin-bottom: 4px; }
        .pvr-col--reactive .pvr-col__sub { color: var(--c-red); }
        .pvr-col--proactive .pvr-col__sub { color: var(--c-blue); }
        .pvr-col__title { font-size: 1.5rem; font-weight: 900; color: var(--c-white); margin-bottom: 22px; }
        .pvr-list { list-style: none; padding: 0; margin: 0; }
        .pvr-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; color: var(--c-slate); font-size: 1rem; line-height: 1.5; border-top: 1px solid rgba(255,255,255,0.05); }
        .pvr-list li:first-child { border-top: none; }
        .pvr-list li i { margin-top: 3px; flex-shrink: 0; }
        .pvr-col--reactive .pvr-list li i { color: var(--c-red); }
        .pvr-col--proactive .pvr-list li i { color: var(--c-green); }
        .pvr-col--proactive .pvr-list li { color: #cbd5e1; }

        /* MONTHLY REPORT MOCKUP */
        .report-window { background: linear-gradient(160deg, #111c30, #0a1322); border: 1px solid rgba(96,165,250,0.18); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,0.55); }
        .report-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); }
        .report-bar__dot { width: 11px; height: 11px; border-radius: 50%; }
        .report-bar__dot--r { background: #ff5f57; }
        .report-bar__dot--y { background: #febc2e; }
        .report-bar__dot--g { background: #28c840; }
        .report-bar__title { margin-left: 12px; font-size: 0.85rem; color: var(--c-slate); font-family: 'Outfit', sans-serif; font-weight: 600; }
        .report-body { padding: 28px 26px; }
        .report-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
        .report-head__title { font-size: 1.3rem; font-weight: 900; color: var(--c-white); margin: 0 0 4px; }
        .report-head__period { font-size: 0.85rem; color: var(--c-slate); }
        .report-status { display: inline-flex; align-items: center; gap: 7px; background: rgba(52,211,153,0.12); color: var(--c-green); border: 1px solid rgba(52,211,153,0.3); padding: 6px 14px; border-radius: 100px; font-size: 0.8rem; font-weight: 800; }
        .report-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 10px var(--c-green); animation: repPulse 2s ease-in-out infinite; }
        @keyframes repPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
        .report-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
        .report-metric { background: rgba(96,165,250,0.05); border: 1px solid rgba(96,165,250,0.12); border-radius: 14px; padding: 18px 14px; text-align: center; }
        .report-metric__value { font-size: 1.5rem; font-weight: 950; color: var(--c-blue); line-height: 1; margin-bottom: 6px; }
        .report-metric__label { font-size: 0.72rem; color: var(--c-slate); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; }
        .report-sub { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-blue); font-weight: 800; margin-bottom: 12px; }
        .report-imp { list-style: none; padding: 0; margin: 0 0 24px; }
        .report-imp li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 0.92rem; color: #cbd5e1; line-height: 1.5; }
        .report-imp li i { color: var(--c-green); margin-top: 3px; flex-shrink: 0; font-size: 0.8rem; }
        .report-tickets { display: flex; gap: 10px; flex-wrap: wrap; }
        .report-ticket { flex: 1 1 0; min-width: 84px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 12px; text-align: center; }
        .report-ticket__n { font-size: 1.3rem; font-weight: 900; line-height: 1; }
        .report-ticket--c .report-ticket__n { color: var(--c-red); }
        .report-ticket--h .report-ticket__n { color: var(--c-amber); }
        .report-ticket--n .report-ticket__n { color: var(--c-green); }
        .report-ticket__l { font-size: 0.68rem; color: var(--c-slate); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; }
        .report-foot { margin-top: 18px; font-size: 0.78rem; color: var(--c-slate); opacity: 0.8; font-style: italic; }

        /* FAQ */
        .faq-item { background: rgba(30,41,59,0.4); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
        .faq-item[open] { border-color: rgba(96,165,250,0.3); background: rgba(30,41,59,0.55); }
        .faq-item summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 22px 26px; cursor: pointer; font-weight: 700; font-size: 1.1rem; color: var(--c-white); user-select: none; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary .faq-chevron { margin-left: auto; color: var(--c-blue); font-size: 0.85rem; transition: transform 0.25s ease; flex-shrink: 0; }
        .faq-item[open] summary .faq-chevron { transform: rotate(180deg); }
        .faq-item__body { padding: 0 26px 24px; color: var(--c-slate); font-size: 1.02rem; line-height: 1.7; }

        /* ===== Rediseño (Claude Design): hero, credenciales, costo de no mantener, frentes,
           modelos, seguimiento del pedido y chequeo de salud. Prefijo sopx-. ===== */
        .sopx-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(168,126,216,0.16); color: #c4a5ec; font-size: 1rem; }
        .sopx-ic--sm { flex-basis: 36px; width: 36px; height: 36px; border-radius: 11px; font-size: 0.92rem; }
        .sopx-ic--lg { flex-basis: 52px; width: 52px; height: 52px; border-radius: 16px; font-size: 1.3rem; }
        .sopx-ic--blue { background: rgba(96,165,250,0.14); color: var(--c-blue); }
        .sopx-ic--red { background: rgba(248,113,113,0.12); color: #fca5a5; }

        .sopx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 100px;
            background: #6f48b8; color: #fff !important; font-weight: 700; font-size: 1.02rem; text-decoration: none !important;
            box-shadow: 0 16px 40px -12px rgba(111,72,184,0.8); transition: background-color .2s ease, transform .2s ease; }
        .sopx-btn:hover { background: #5d3aa3; transform: translateY(-2px); }
        .sopx-btn .fa-whatsapp { font-size: 1.2em; }
        .sopx-btn--ghost { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.18); box-shadow: none; }
        .sopx-btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(96,165,250,0.45); }
        .sopx-btn--lg { min-height: 58px; padding: 0 30px; font-size: 1.06rem; }
        .sopx-btn:focus-visible, .sopx-quiz__op:focus-visible, .sopx-track__step:focus-visible { outline: 3px solid #c4a5ec; outline-offset: 3px; }

        /* Hero */
        .sopx-hero__row { display: flex; align-items: center; gap: 64px; position: relative; z-index: 5; }
        .sopx-hero__copy { flex: 1 1 0; min-width: 0; }
        .sopx-hero__copy .sop-hero__title { font-size: clamp(2.4rem, 4.6vw, 3.7rem); }
        .sopx-hero__checks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 1rem; color: #cbd5e1; }
        .sopx-hero__checks li { display: inline-flex; align-items: center; gap: 8px; }
        .sopx-hero__checks i { color: var(--c-green); }
        .sopx-scene { position: relative; flex: 0 0 520px; width: 520px; }
        .sopx-scene__halo { position: absolute; inset: -40px; background: radial-gradient(closest-side, rgba(111,72,184,0.35), transparent); filter: blur(10px); pointer-events: none; }
        .sopx-panel { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 28px; background: linear-gradient(160deg, rgba(20,30,51,0.95), rgba(11,19,36,0.95)); border: 1px solid rgba(196,165,236,0.22); box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8); text-align: left; }
        .sopx-panel__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
        .sopx-panel__brand { display: flex; align-items: center; gap: 10px; }
        .sopx-panel__brand > span:last-child { display: flex; flex-direction: column; }
        .sopx-panel__brand b { font-size: 0.98rem; color: #fff; }
        .sopx-panel__brand small, .sopx-ticket__who small, .sopx-panel__mini small, .sopx-toast small { font-size: 0.8rem; color: #a6b3c6; }
        .sopx-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); color: #86efac; font-size: 0.78rem; font-weight: 700; }
        .sopx-live i, .sopx-end__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); animation: sopxPulso 1.6s ease-in-out infinite; }
        .sopx-monitor { position: relative; height: 70px; border-radius: 16px; background: rgba(255,255,255,0.03); overflow: hidden; }
        .sopx-monitor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
        .sopx-beat { fill: none; stroke: var(--c-green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; animation: sopxLatido 3.2s linear infinite; }
        .sopx-monitor span { position: absolute; left: 14px; top: 10px; font-size: 0.8rem; color: #a6b3c6; }
        .sopx-monitor b { position: absolute; right: 14px; top: 8px; font-size: 1rem; color: #86efac; }
        .sopx-ticket { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: #0b1324; border: 1px solid rgba(148,163,184,0.14); }
        .sopx-ticket__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        .sopx-ticket__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .sopx-ticket__who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
        .sopx-ticket__who b { font-size: 0.9rem; color: #fff; }
        .sopx-ticket__wa { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(37,211,102,0.15); color: #86efac; }
        .sopx-ticket__state { flex: 0 0 auto; padding: 4px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 800; background: rgba(96,165,250,0.15); color: #93c5fd; }
        .sopx-ticket__state[data-step="1"] { background: rgba(196,165,236,0.18); color: #d8c3f5; }
        .sopx-ticket__state[data-step="2"] { background: rgba(251,191,36,0.15); color: #fcd34d; }
        .sopx-ticket__state[data-step="3"] { background: rgba(52,211,153,0.15); color: #86efac; }
        .sopx-ticket__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
        .sopx-ticket__step { display: flex; flex-direction: column; gap: 6px; font-size: 0.72rem; font-weight: 600; color: #7c8aa0; }
        .sopx-ticket__step i { height: 5px; border-radius: 5px; background: rgba(255,255,255,0.10); transition: background-color .3s; }
        .sopx-ticket__step.is-done { color: #f8fafc; }
        .sopx-ticket__step.is-done i { background: #8b5cf6; }
        .sopx-ticket:has(.sopx-ticket__state[data-step="3"]) .is-done i { background: var(--c-green); }
        .sopx-ticket__detail { margin: 0; min-height: 40px; font-size: 0.86rem; line-height: 1.5; color: #e2e8f0; }
        .sopx-panel__mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        .sopx-panel__mini div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.04); }
        .sopx-panel__mini b { font-size: 1.1rem; color: #fff; }
        .sopx-toast { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #141e33; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.8); text-align: left; }
        .sopx-toast > span:last-child { display: flex; flex-direction: column; }
        .sopx-toast b { font-size: 0.84rem; color: #fff; }
        .sopx-toast .sopx-ic { flex-basis: 30px; width: 30px; height: 30px; border-radius: 10px; font-size: 0.85rem; }
        .sopx-toast--1 { left: 28px; top: -40px; border: 1px solid rgba(96,165,250,0.35); animation: sopxFlotar 6s ease-in-out infinite; }
        .sopx-toast--2 { right: -36px; bottom: -26px; border: 1px solid rgba(196,165,236,0.35); animation: sopxFlotar 7s ease-in-out 1.2s infinite; }
        @keyframes sopxLatido { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
        @keyframes sopxFlotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
        @keyframes sopxPulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

        /* Credenciales: texto grande y legible */
        .sopx-cred-wrap { position: relative; z-index: 10; padding: 0 0 20px; background: var(--c-dark); }
        .sopx-cred { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 28px; background: #0b1324; border: 1px solid rgba(148,163,184,0.16); overflow: hidden; }
        .sopx-cred li { display: flex; gap: 18px; align-items: flex-start; padding: 30px 28px; }
        .sopx-cred li + li { border-left: 1px solid rgba(148,163,184,0.14); }
        .sopx-cred li > span:last-child { display: flex; flex-direction: column; gap: 6px; font-size: 1.06rem; line-height: 1.45; color: #cbd5e1; }
        .sopx-cred b { font-size: 1.8rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.5px; color: #fff; }

        /* El costo de no mantener */
        .sopx-deg { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
        .sopx-title--warn span { background: none; -webkit-text-fill-color: #f87171; color: #f87171; }
        .sopx-risk { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; padding: 20px; border-radius: 20px; background: #141e33; border: 1px solid rgba(148,163,184,0.14); }
        .sopx-risk small { font-size: 0.86rem; font-weight: 700; color: #a6b3c6; }
        .sopx-risk em { font-style: normal; font-size: 0.78rem; color: #7c8aa0; }
        .sopx-risk__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 0.92rem; color: #cbd5e1; }
        .sopx-risk__bar { height: 10px; border-radius: 10px; background: rgba(255,255,255,0.06); overflow: hidden; }
        .sopx-risk__fill { display: block; height: 100%; border-radius: 10px; background: #fbbf24; }
        .sopx-risk__fill--1 { background: #fb923c; } .sopx-risk__fill--2 { background: #f87171; }
        .sopx-deg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
        .sopx-deg__card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 22px; background: #111a2e; border: 1px solid rgba(148,163,184,0.14); }
        .sopx-deg__head { display: flex; align-items: center; gap: 12px; }
        .sopx-deg__card h3 { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: #fff; }
        .sopx-deg__card > p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: #a6b3c6; }
        .sopx-deg__card .sopx-deg__fix { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(52,211,153,0.07); border: 1px solid rgba(52,211,153,0.22); font-size: 0.94rem; line-height: 1.45; color: #e2e8f0; }
        .sopx-deg__fix i { color: var(--c-green); margin-top: 3px; }
        .sopx-deg__fix b { color: #86efac; }

        /* Qué cubre: dos frentes */
        .sopx-fronts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
        .sopx-front { --c: var(--c-blue); display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 28px; background: #0b1324; border: 1px solid rgba(96,165,250,0.22); }
        .sopx-front--1 { --c: #c4a5ec; background: #100d22; border-color: rgba(196,165,236,0.24); }
        .sopx-front .sopx-ic { color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
        .sopx-front__head { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
        .sopx-front__head h3 { margin: 0; font-size: 1.5rem; font-weight: 800; color: #fff; }
        .sopx-front__head small { font-size: 1rem; color: #a6b3c6; }
        .sopx-front__item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.03); transition: background-color .2s; }
        .sopx-front__item:hover { background: #18233b; }
        .sopx-front__item > span:last-child { display: flex; flex-direction: column; gap: 4px; font-size: 1rem; line-height: 1.55; color: #a6b3c6; }
        .sopx-front__item b { font-size: 1.08rem; color: #fff; }
        .sopx-front__item .sopx-ic { background: rgba(255,255,255,0.05); }

        /* Modelos de servicio */
        .sopx-mod__top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; margin-bottom: 40px; }
        .sopx-quiz { display: flex; flex-direction: column; gap: 22px; padding: 26px; border-radius: 24px; background: #0b1324; border: 1px solid rgba(148,163,184,0.16); }
        .sopx-quiz__q { display: flex; flex-direction: column; gap: 12px; }
        .sopx-quiz__q > b { font-size: 1.08rem; color: #fff; }
        .sopx-quiz__q > div { display: flex; flex-wrap: wrap; gap: 10px; }
        .sopx-quiz__op { min-height: 44px; padding: 0 18px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #cbd5e1; font: 600 0.95rem/1 'Outfit', sans-serif; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
        .sopx-quiz__op[aria-pressed="true"] { background: rgba(111,72,184,0.30); border-color: rgba(196,165,236,0.65); color: #fff; }
        .sopx-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
        .sopx-model { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border-radius: 24px; background: #111a2e; border: 1px solid rgba(148,163,184,0.14); opacity: .7; transition: opacity .25s, border-color .25s, box-shadow .25s, background-color .25s; }
        .sopx-model.is-pick { opacity: 1; background: linear-gradient(160deg, #1d1840, #141e33); border-color: rgba(196,165,236,0.55); box-shadow: 0 30px 70px -30px rgba(111,72,184,0.7); }
        .sopx-model__pick { position: absolute; top: -13px; left: 24px; padding: 5px 12px; border-radius: 100px; background: #6f48b8; color: #fff; font-size: 0.75rem; font-weight: 800; opacity: 0; transition: opacity .25s; }
        .sopx-model.is-pick .sopx-model__pick { opacity: 1; }
        .sopx-model h3 { margin: 0; font-size: 1.4rem; font-weight: 800; color: #fff; }
        .sopx-model > p { margin: 0; font-size: 1rem; line-height: 1.6; color: #a6b3c6; }
        .sopx-model .sopx-model__ideal { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(148,163,184,0.14); font-size: 0.94rem; color: #e2e8f0; }
        .sopx-model__ideal b { color: #c4a5ec; }
        .sopx-mod__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; font-size: 1.04rem; color: #a6b3c6; }

        /* Cómo trabajamos: seguir el pedido */
        .sopx-track { position: relative; }
        .sopx-track__rail { position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.08); }
        .sopx-track__rail i { display: block; height: 100%; width: var(--avance, 33%); border-radius: 4px; background: linear-gradient(90deg, #60a5fa, #8b5cf6); transition: width .4s; }
        .sopx-track__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
        .sopx-track__step { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: center; color: #fff; font-family: 'Outfit', sans-serif; cursor: pointer; border-radius: 14px; }
        .sopx-track__dot { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #0b1324; border: 2px solid rgba(148,163,184,0.25); color: #7c8aa0; font-size: 1.1rem; transition: all .3s; }
        .sopx-track__step.is-done .sopx-track__dot { background: rgba(111,72,184,0.25); border-color: #8b5cf6; color: #fff; }
        .sopx-track__step.is-on .sopx-track__dot { box-shadow: 0 0 0 6px rgba(139,92,246,0.18); }
        .sopx-track__step:last-child.is-on .sopx-track__dot { background: rgba(52,211,153,0.18); border-color: var(--c-green); }
        .sopx-track__step b { font-size: 1.12rem; }
        .sopx-track__step > span:last-child { max-width: 230px; font-size: 0.95rem; line-height: 1.45; color: #a6b3c6; }
        .sopx-track__detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; padding: 24px; border-radius: 24px; background: #0b1324; border: 1px solid rgba(148,163,184,0.16); }
        .sopx-track__detail > div:first-child { display: flex; flex-direction: column; gap: 10px; }
        .sopx-track__detail small { font-size: 0.82rem; font-weight: 700; color: #c4a5ec; }
        .sopx-track__detail b { font-size: 1.25rem; color: #fff; }
        .sopx-track__detail p { margin: 0; font-size: 1.04rem; line-height: 1.6; color: #a6b3c6; }
        .sopx-track__chat { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.03); }
        .sopx-track__chat small { color: #7c8aa0; font-weight: 500; }
        .sopx-track__bubble { align-self: flex-start; max-width: 100%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #141e33; border: 1px solid rgba(148,163,184,0.16); font-size: 1rem; line-height: 1.5; color: #f8fafc; }

        /* CTA final: chequeo de salud */
        .sopx-end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px; align-items: center; padding: 56px; border-radius: 36px; background: linear-gradient(155deg, #161333, #0b1324 60%); border: 1px solid rgba(196,165,236,0.26); box-shadow: 0 50px 120px -40px rgba(111,72,184,0.6); }
        .sopx-end__copy { display: flex; flex-direction: column; gap: 22px; }
        .sopx-end__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.30); color: #86efac; font-size: 0.9rem; font-weight: 700; }
        .sopx-end__title { margin: 0; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.02; font-weight: 800; letter-spacing: -1.5px; color: #fff; }
        .sopx-end__title span { background: linear-gradient(90deg, #60a5fa, #c4a5ec); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .sopx-end__desc { margin: 0; font-size: 1.15rem; line-height: 1.6; color: #a6b3c6; }
        .sopx-end__acc { display: flex; flex-wrap: wrap; gap: 12px; }
        .sopx-end__micro { margin: 0; font-size: 0.92rem; color: #a6b3c6; }
        .sopx-check { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 26px; background: #050810; border: 1px solid rgba(148,163,184,0.18); }
        .sopx-check__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
        .sopx-check__head > b { font-size: 1rem; color: #fff; }
        .sopx-check__state { display: inline-grid; font-size: 0.78rem; font-weight: 800; }
        .sopx-check__state span { grid-area: 1 / 1; padding: 5px 12px; border-radius: 100px; white-space: nowrap; transition: opacity .4s; }
        .sopx-check__state .is-bad { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.35); color: #fca5a5; }
        .sopx-check__state .is-ok { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); color: #86efac; opacity: 0; }
        .sopx-check__pulse { width: 100%; height: 56px; }
        .sopx-check__pulse path { fill: none; stroke: #f87171; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; animation: sopxCorrer 3.5s linear infinite; transition: stroke .5s; }
        .sopx-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
        .sopx-check li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.04); }
        .sopx-check li > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; color: #a6b3c6; }
        .sopx-check li b { font-size: 0.98rem; color: #fff; }
        .sopx-check__ok { color: var(--c-green); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
        .sopx-end.is-ok .sopx-check__pulse path, .sopx-end:hover .sopx-check__pulse path { stroke: var(--c-green); }
        .sopx-end.is-ok .sopx-check__state .is-bad, .sopx-end:hover .sopx-check__state .is-bad { opacity: 0; }
        .sopx-end.is-ok .sopx-check__state .is-ok, .sopx-end:hover .sopx-check__state .is-ok { opacity: 1; }
        .sopx-end.is-ok .sopx-check__ok, .sopx-end:hover .sopx-check__ok { opacity: 1; transform: none; }
        .sopx-end.is-ok li:nth-child(2) .sopx-check__ok { transition-delay: .12s; }
        .sopx-end.is-ok li:nth-child(3) .sopx-check__ok { transition-delay: .24s; }
        .sopx-end.is-ok li:nth-child(4) .sopx-check__ok { transition-delay: .36s; }
        .sopx-end.is-ok li:nth-child(5) .sopx-check__ok { transition-delay: .48s; }
        @keyframes sopxCorrer { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }

        @media (max-width: 1199px) {
            .sopx-scene { flex-basis: 460px; width: 460px; }
            .sopx-toast--2 { right: -12px; }
        }
        @media (max-width: 991px) {
            .sopx-hero__row { flex-direction: column; gap: 48px; }
            .sopx-hero__copy { text-align: center; }
            .sopx-hero__checks { justify-content: center; }
            .sopx-scene { flex-basis: auto; width: 100%; max-width: 520px; }
            .sopx-cred { grid-template-columns: minmax(0, 1fr); }
            .sopx-cred li + li { border-left: 0; border-top: 1px solid rgba(148,163,184,0.14); }
            .sopx-deg, .sopx-fronts, .sopx-mod__top, .sopx-end, .sopx-track__detail { grid-template-columns: minmax(0, 1fr); gap: 32px; }
            .sopx-models { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
            .sopx-track__rail { display: none; }
            .sopx-track__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
            .sopx-end { padding: 36px 22px; }
            .sopx-btn { width: auto; }
        }
        @media (max-width: 767px) {
            .sopx-deg__grid { grid-template-columns: minmax(0, 1fr); }
            .sopx-toast { display: none; }
            .sopx-panel { padding: 16px; }
            .sopx-end__acc .sopx-btn, .sop-cta-row .sopx-btn { width: 100%; }
            .sopx-cred li { padding: 22px 20px; }
            .sopx-cred b { font-size: 1.5rem; }
        }
        @media (max-width: 479px) {
            .sopx-track__steps { grid-template-columns: minmax(0, 1fr); }
            .sopx-ticket__head { flex-direction: column; align-items: flex-start; }
        }
        @media (prefers-reduced-motion: reduce) {
            .sopx-beat, .sopx-check__pulse path { animation: none; stroke-dasharray: none; }
            .sopx-toast, .sopx-live i, .sopx-end__chip i { animation: none; }
            .sopx-btn:hover { transform: none; }
        }

        /* Sticky WhatsApp */
        .sop-sticky-wa { display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9900;
            background: linear-gradient(160deg, #A87ED8, #7E57C2); color: #fff !important; text-decoration: none !important;
            border-radius: 14px 0 0 14px; padding: 18px 14px; box-shadow: -6px 0 28px rgba(168,126,216,0.4); transition: padding-right 0.3s ease; }
        .sop-sticky-wa:hover { padding-right: 20px; color: #fff !important; }
        .sop-sticky-wa__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
        .sop-sticky-wa__icon { font-size: 1.35rem; }
        .sop-sticky-wa__text { writing-mode: vertical-lr; transform: rotate(180deg); font-size: 0.7rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
        @media (min-width: 992px) { .sop-sticky-wa { display: flex; } }

        ::selection { background: #60a5fa !important; color: #fff !important; }
        ::-moz-selection { background: #60a5fa !important; color: #fff !important; }

        /* Sticky header dark */
        .header-area.header-sticky { background: rgba(10,22,40,0.92) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-bottom: 1px solid rgba(96,165,250,0.2) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important; }
        .header-area.header-sticky .main-nav .nav li a { color: rgba(255,255,255,0.92) !important; }
        .header-area.header-sticky .main-nav .nav li.submenu:after { color: rgba(255,255,255,0.92) !important; }

        /* Footer brand swap to violet */
        footer { border-top: 1px solid rgba(168,126,216,0.1) !important; background: #111827 !important; }
        .copyright { border-top: 1px solid #A87ED8 !important; color: rgba(255,255,255,0.6) !important; }
        footer .footer-nav li a i, footer .footer-nav li a:hover span, footer .address p a:hover { color: #A87ED8 !important; }
        footer .social li a:hover i { color: #A87ED8 !important; }
        footer h5 { color: #fff !important; border-bottom: 2px solid #A87ED8; display: inline-block; margin-bottom: 20px !important; padding-bottom: 5px; }

        /* Responsive */
        @media (max-width: 991px) {
            .sop-section { padding: 90px 0; }
            .sop-hero { padding: 140px 0 60px; min-height: auto; text-align: center; }
            .sop-hero__sub { font-size: 1.15rem; margin-left: auto; margin-right: auto; }
            .sop-hero__pulse { left: 50%; top: 40%; }
            .sop-cta-row { justify-content: center; }
            .sop-fade { height: 120px; }
            .header-area { background: #0a1628 !important; border-bottom: 1px solid rgba(96,165,250,0.18) !important; }
            .header-area .main-nav .nav li a { color: rgba(255,255,255,0.92) !important; }
            .sop-btn { width: 100%; max-width: 360px; text-align: center; }
        }
        @media (max-width: 767px) {
            .sop-section { padding: 70px 0; }
            .sop-hero__sub { font-size: 1.05rem; }
            .sop-desc, .sop-desc-lg { font-size: 1.05rem; }
            .pvr-grid { grid-template-columns: 1fr; }
            .report-metrics { grid-template-columns: 1fr; }
            .sla-card { padding: 28px 22px; }
            .mb-stack { margin-bottom: 36px; }
        }
        @media (prefers-reduced-motion: reduce) {
            * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
            .sop-btn:hover { transform: none; }
            .sop-reveal { opacity: 1; transform: none; }
            .sop-thread::before { animation: none; opacity: 0.5; }
            .sop-aura--breathe { animation: none; }
        }