/* ── Problem / Solution ────────────────────────────────────────────── */
    .prob-sol-section {
      background: linear-gradient(180deg, var(--sge-void) 0%, var(--sge-deep) 100%);
      padding: 5rem 0;
    }
    .prob-col { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15); border-radius: 20px; padding: 2rem; }
    .sol-col  { background: rgba(0,229,255,0.04); border: 1px solid rgba(0,229,255,0.18); border-radius: 20px; padding: 2rem; }
    .prob-row, .sol-row {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
      font-size: 0.9rem;
    }
    .prob-row:last-child, .sol-row:last-child { border-bottom: none; }
    .prob-icon { color: #fb7185; font-size: 1.2rem; flex-shrink: 0; line-height: 1; margin-top: 1px; }
    .sol-icon  { color: #10b981; flex-shrink: 0; line-height: 1; margin-top: 1px; }
    .prob-icon iconify-icon, .sol-icon iconify-icon { display: block; }
    .prob-text { color: rgba(255,255,255,0.55); }
    .sol-text  { color: rgba(255,255,255,0.85); }

    /* ═══════════════════════════════════════════════════════════════════
       SCENE CAROUSEL — "El sistema por dentro" v2
       ═══════════════════════════════════════════════════════════════════ */

    /* Keep old pill class for other sections */
    .eco-feature-pill { display:flex;align-items:center;gap:10px;padding:.8rem 1.2rem;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(0,229,255,.12);margin-bottom:.75rem;font-size:.88rem;color:var(--sge-white); }
    .eco-feature-pill iconify-icon { color:var(--sge-cyan);font-size:1.2rem;flex-shrink:0; }

    /* Section wrapper */
    .scene-section {
      position: relative;
      background: linear-gradient(180deg, var(--sge-deep) 0%, #010912 50%, #020B18 100%);
      padding: 7rem 0 5rem;
      overflow: hidden;
    }

    /* Ambient floating particles */
    .scene-particle {
      position: absolute; border-radius: 50%;
      pointer-events: none; opacity: 0;
      animation: scenePartFloat linear infinite;
      will-change: transform, opacity;
    }
    @keyframes scenePartFloat {
      0%   { transform: translateY(0) scale(1); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translateY(-120px) scale(0.6); opacity: 0; }
    }
    .scene-particle:nth-child(1)  { width:4px;height:4px;left:8%;top:80%;background:#00e5ff;animation-duration:12s;animation-delay:0s; }
    .scene-particle:nth-child(2)  { width:3px;height:3px;left:22%;top:90%;background:#38bdf8;animation-duration:9s;animation-delay:-3s; }
    .scene-particle:nth-child(3)  { width:5px;height:5px;left:38%;top:85%;background:rgba(0,229,255,.6);animation-duration:14s;animation-delay:-7s; }
    .scene-particle:nth-child(4)  { width:2px;height:2px;left:55%;top:88%;background:#a78bfa;animation-duration:11s;animation-delay:-2s; }
    .scene-particle:nth-child(5)  { width:4px;height:4px;left:68%;top:82%;background:#38bdf8;animation-duration:10s;animation-delay:-5s; }
    .scene-particle:nth-child(6)  { width:3px;height:3px;left:80%;top:78%;background:#00e5ff;animation-duration:13s;animation-delay:-1s; }
    .scene-particle:nth-child(7)  { width:6px;height:6px;left:92%;top:86%;background:rgba(56,189,248,.5);animation-duration:8s;animation-delay:-4s; }
    .scene-particle:nth-child(8)  { width:2px;height:2px;left:14%;top:75%;background:#a78bfa;animation-duration:16s;animation-delay:-6s; }

    /* Glow lines */
    .scene-glow-line {
      position: absolute; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,229,255,.18), transparent);
      pointer-events: none;
    }
    .scene-glow-line-1 { width: 60%; left: 20%; top: 35%; animation: glowLinePulse 6s ease-in-out infinite; }
    .scene-glow-line-2 { width: 40%; left: 30%; top: 65%; animation: glowLinePulse 8s ease-in-out infinite; animation-delay: -3s; }
    @keyframes glowLinePulse { 0%,100%{opacity:.3}50%{opacity:.8} }

    /* ── Header ──────────────────────────────────────────────────── */
    .scene-header {
      text-align: center;
      max-width: 860px;
      margin: 0 auto 3.5rem;
      padding: 0 2rem;
    }
    .scene-eyebrow {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .35rem 1.1rem; border-radius: 999px;
      background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.2);
      color: #00e5ff; font-size: .75rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      margin-bottom: 2rem;
    }
    /* Headline — 3 lines revealed by clip-path */
    .scene-headline {
      font-size: clamp(2.8rem, 5vw, 5rem);
      font-weight: 900;
      line-height: 1.0;
      margin-bottom: 1.8rem;
      overflow: hidden;
    }
    .scene-hline {
      display: block;
      clip-path: inset(0 100% 0 0);
      will-change: clip-path;
    }
    .scene-hline--white  { color: #ffffff; }
    .scene-hline--muted  { color: rgba(255,255,255,.5); letter-spacing: -.01em; }
    .scene-hline--accent {
      background: linear-gradient(90deg, #00e5ff 0%, #38bdf8 40%, #a78bfa 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      font-style: italic;
    }
    .scene-desc {
      color: rgba(148,163,184,.85);
      font-size: 1.05rem; line-height: 1.8;
      max-width: 620px; margin: 0 auto 2.5rem;
      opacity: 0;
    }

    /* ── Tab navigation ──────────────────────────────────────────── */
    .scene-tabs {
      display: flex; align-items: center; justify-content: center;
      gap: .5rem; flex-wrap: wrap;
      margin-bottom: 2.5rem;
    }
    .scene-tab {
      display: flex; align-items: center; gap: .45rem;
      padding: .55rem 1.15rem; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.5);
      font-size: .8rem; font-weight: 600; font-family: inherit;
      cursor: pointer; transition: all .25s;
      opacity: 0;
    }
    .scene-tab iconify-icon { font-size: 1rem; }
    .scene-tab:hover {
      border-color: rgba(0,229,255,.3);
      color: rgba(255,255,255,.85);
      background: rgba(0,229,255,.06);
    }
    .scene-tab.active {
      background: rgba(0,229,255,.12);
      border-color: rgba(0,229,255,.4);
      color: #00e5ff;
      box-shadow: 0 0 16px rgba(0,229,255,.15);
    }

    /* ── Carousel ────────────────────────────────────────────────── */
    .scene-carousel {
      position: relative;
      margin: 0 auto;
      max-width: 1400px;
      padding: 0 2rem 3.5rem;
    }

    /* Viewport clips overflow */
    .scene-viewport {
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(0,229,255,.1);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 40px 80px rgba(0,0,0,.6),
        0 0 80px rgba(0,229,255,.05);
      /* Degradacion segura: visible por default. Solo se oculta-y-revela si
         JS logra marcar html.reveal-anim-armed antes de tiempo. */
      opacity: 1;
      transform: none;
    }
    html.reveal-anim-armed .scene-viewport {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
    }
    html.reveal-anim-armed .scene-viewport.in-view { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .scene-viewport { opacity: 1 !important; transform: none !important; }
    }

    /* Track — flex row, width = 5 × 100% of viewport */
    .scene-track {
      display: flex;
      will-change: transform;
    }

    /* Each slide */
    .scene-slide {
      min-width: 100%;
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 3.5rem;
      align-items: center;
      padding: 3.5rem 4rem;
      background: linear-gradient(145deg, rgba(4,44,83,.55) 0%, rgba(2,11,24,.85) 100%);
    }
    @media(max-width:1000px) { .scene-slide { grid-template-columns:1fr;padding:2rem; } }

    /* Copy column */
    .scene-slide-num {
      font-size: .68rem; font-weight: 700; letter-spacing: .14em;
      text-transform: uppercase; color: rgba(0,229,255,.6);
      margin-bottom: .75rem;
    }
    .scene-slide-title {
      font-size: clamp(1.9rem,2.5vw,2.6rem);
      font-weight: 900; line-height: 1.1;
      color: #fff; margin-bottom: 1rem;
    }
    .scene-slide-title em {
      font-style: normal;
      background: linear-gradient(135deg,#00e5ff,#a78bfa);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .scene-slide-desc {
      font-size: .93rem; color: rgba(148,163,184,.8);
      line-height: 1.75; margin-bottom: 1.6rem;
    }
    .scene-feats { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
    .scene-feat {
      display: flex; align-items: center; gap: .7rem;
      font-size: .83rem; color: rgba(255,255,255,.75);
    }
    .scene-feat-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 6px currentColor;
    }

    /* ── Mock window ──────────────────────────────────────────────── */
    .scene-mockup {
      perspective: 1400px;
      will-change: transform;
      position: relative;
    }
    .mockup-img-layer {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background-size: cover; background-position: center;
      opacity: 0.22; filter: blur(1.5px) saturate(1.2);
      mix-blend-mode: overlay; pointer-events: none;
      z-index: 0; transition: all .8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scene-mockup:hover .mockup-img-layer { opacity: 0.35; filter: blur(0px) saturate(1.4); }

    .mockup-win {
      position: relative; z-index: 1;
      background: rgba(2,8,20,0.85);
      backdrop-filter: blur(12px);
      border-radius: 16px;
      border: 1px solid rgba(0,229,255,.18);
      box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 40px rgba(0,229,255,.08);
      overflow: hidden;
      transform: perspective(1400px) rotateY(-10deg) rotateX(4deg);
      transition: transform .6s cubic-bezier(.25,.46,.45,.94);
      will-change: transform;
    }
    .scene-mockup:hover .mockup-win {
      transform: perspective(1400px) rotateY(-2deg) rotateX(1deg);
      box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 60px rgba(0,229,255,.14);
    }
    /* Title bar */
    .mockup-bar {
      background: rgba(4,14,35,.95);
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      border-bottom: 1px solid rgba(0,229,255,.08);
    }
    .mockup-dot { width:10px;height:10px;border-radius:50%; }
    .mockup-win-title {
      font-size: .65rem; color: rgba(255,255,255,.35);
      font-weight: 600; letter-spacing: .04em; margin-left: 4px;
    }
    /* Body area */
    .mockup-body { padding: 18px 20px; min-height: 300px; }

    /* ── Mock UI atoms ────────────────────────────────────────────── */
    /* KPI chip */
    .m-kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
    .m-kpi {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px; padding: 10px 12px;
    }
    .m-kpi-val { font-size: 1.1rem; font-weight: 800; line-height: 1; }
    .m-kpi-lbl { font-size: .58rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }