:root {
      --bg: #050505;
      --bg-2: #0a0a0a;
      --panel: rgba(255,255,255,.045);
      --panel-2: rgba(255,255,255,.025);
      --line: rgba(255,255,255,.10);
      --line-yellow: rgba(255,230,0,.35);
      --yellow: #ffe600;
      --yellow-2: #ffd400;
      --white: #f6f6f6;
      --muted: #a4a4a4;
      --soft: #d8d8d8;
      --shadow: 0 22px 70px rgba(0,0,0,.55);
      --radius: 22px;
      --max: 1220px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 77% 8%, rgba(255,230,0,.11), transparent 25%),
        radial-gradient(circle at 15% 68%, rgba(255,230,0,.045), transparent 26%),
        linear-gradient(180deg,#030303 0%,#070707 45%,#030303 100%);
      color: var(--white);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
    }

    body::before {
      content:"";
      position: fixed;
      inset:0;
      pointer-events:none;
      opacity:.22;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
      z-index:-1;
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }

    .wrap {
      width: min(var(--max), calc(100% - 44px));
      margin: 0 auto;
    }

    .eyebrow {
      display:flex;
      align-items:center;
      gap:10px;
      color: var(--yellow);
      text-transform: uppercase;
      letter-spacing: .19em;
      font-size: .75rem;
      font-weight: 800;
    }
    .eyebrow::before {
      content:"";
      width:28px; height:2px;
      background:var(--yellow);
      box-shadow:0 0 16px var(--yellow);
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(18px);
      background: rgba(4,4,4,.76);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav-inner {
      height: 82px;
      display:grid;
      grid-template-columns: 235px 1fr auto;
      align-items:center;
      gap:28px;
    }
    .brand {
      height:82px;
      overflow:visible;
      display:flex;
      align-items:center;
      justify-content:flex-start;
    }
    .brand img {
      width:auto;
      height:68px;
      max-width:220px;
      object-fit:contain;
      display:block;
      transform:translateY(4px);
    }
    .menu {
      display:flex;
      justify-content:center;
      gap:30px;
      color:#d7d7d7;
      font-size:.92rem;
    }
    .menu a {
      position:relative;
      padding:10px 0;
      transition:.25s ease;
    }
    .menu a:hover { color:#fff; }
    .menu a::after {
      content:"";
      position:absolute;
      left:50%; right:50%; bottom:0;
      height:2px;
      background:var(--yellow);
      box-shadow:0 0 15px var(--yellow);
      transition:.25s ease;
    }
    .menu a:hover::after { left:0; right:0; }
    .nav-cta, .btn-primary {
      border:0;
      color:#060606;
      background:linear-gradient(135deg,#fff04a 0%,var(--yellow) 56%,#ffc400 100%);
      padding:13px 20px;
      border-radius:999px;
      font-weight:900;
      box-shadow:0 10px 34px rgba(255,230,0,.18), inset 0 1px rgba(255,255,255,.55);
      cursor:pointer;
      transition:.25s ease;
    }
    .nav-cta:hover, .btn-primary:hover {
      transform:translateY(-2px);
      box-shadow:0 15px 42px rgba(255,230,0,.27), inset 0 1px rgba(255,255,255,.6);
    }

    .hero {
      position:relative;
      min-height: 760px;
      display:flex;
      align-items:center;
      border-bottom:1px solid rgba(255,255,255,.07);
      overflow:hidden;
    }
    .hero::after {
      content:"";
      position:absolute;
      width:560px; height:560px;
      right:-130px; top:75px;
      border:1px solid rgba(255,230,0,.25);
      border-radius:50%;
      box-shadow:0 0 100px rgba(255,230,0,.08), inset 0 0 80px rgba(255,230,0,.035);
      animation: pulse 6s ease-in-out infinite;
    }
    @keyframes pulse { 50% { transform:scale(1.035); opacity:.75; } }

    .hero-grid {
      display:grid;
      grid-template-columns: 1.03fr .97fr;
      gap:66px;
      align-items:center;
      padding:92px 0 78px;
      position:relative;
      z-index:2;
    }
    h1 {
      margin:18px 0 20px;
      font-size:clamp(3.2rem,6.3vw,6.2rem);
      letter-spacing:-.065em;
      line-height:.92;
      max-width:760px;
    }
    h1 .accent {
      color:var(--yellow);
      text-shadow:
        0 4px 30px rgba(0,0,0,.95),
        0 0 38px rgba(255,230,0,.22);
    }
    .lead {
      max-width:650px;
      color:#c7c7c7;
      font-size:1.11rem;
      line-height:1.75;
    }
    .hero-actions {
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-top:30px;
    }
    .btn-primary, .btn-ghost {
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-height:52px;
      padding:0 22px;
    }
    .btn-ghost {
      border:1px solid rgba(255,255,255,.2);
      border-radius:999px;
      background:rgba(255,255,255,.03);
      color:#fff;
      font-weight:800;
      transition:.25s ease;
    }
    .btn-ghost:hover {
      border-color:rgba(255,230,0,.55);
      background:rgba(255,230,0,.055);
      transform:translateY(-2px);
    }

    .stats {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin-top:42px;
      max-width:650px;
    }
    .stat {
      padding:18px 18px 16px;
      border-left:1px solid rgba(255,230,0,.42);
      background:linear-gradient(90deg,rgba(255,230,0,.045),transparent);
    }
    .stat strong {
      font-size:1.5rem;
      display:block;
      letter-spacing:-.03em;
    }
    .stat span { color:#929292; font-size:.82rem; }

    .visual {
      min-height:560px;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      perspective:1200px;
    }
    .device {
      width:86%;
      min-height:390px;
      padding:17px;
      border-radius:26px;
      background:linear-gradient(155deg,#202020 0%,#050505 42%,#171717 100%);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 40px 85px rgba(0,0,0,.68),0 0 90px rgba(255,230,0,.07);
      transform:rotateY(-7deg) rotateX(3deg);
      position:relative;
      overflow:hidden;
    }
    .screen {
      min-height:354px;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(255,230,0,.24);
      background:
        radial-gradient(circle at 68% 44%,rgba(255,230,0,.16),transparent 24%),
        linear-gradient(135deg,#070707,#0a0a0a);
      position:relative;
      padding:30px;
    }
    .screen::before, .screen::after {
      content:"";
      position:absolute;
      border-radius:50%;
      border:1px solid rgba(255,230,0,.22);
      right:26px;
      top:50%;
      transform:translateY(-50%);
    }
    .screen::before { width:245px;height:245px; box-shadow:0 0 50px rgba(255,230,0,.08); }
    .screen::after { width:170px;height:170px; border-style:dashed; animation:spin 16s linear infinite; }
    @keyframes spin { to { transform:translateY(-50%) rotate(360deg); } }
    .screen-title {
      position:relative;
      z-index:2;
      font-size:2.05rem;
      line-height:1.04;
      letter-spacing:-.04em;
      margin-top:48px;
      max-width:230px;
      font-weight:900;
    }
    .screen-title span { color:var(--yellow); }
    .orb {
      position:absolute;
      right:72px; top:122px;
      width:155px;height:155px;border-radius:50%;
      background:
        radial-gradient(circle at 35% 32%,#fff9a5 0 2%,#ffe600 4%,#8f7700 15%,#141100 42%,#050505 67%);
      box-shadow:0 0 35px rgba(255,230,0,.45), inset -20px -20px 35px #000;
      z-index:3;
    }
    .orb::before {
      content:"";
      position:absolute; inset:-23px;
      border:1px solid rgba(255,230,0,.34);
      border-radius:50%;
      transform:rotate(27deg) scaleY(.45);
    }
    .float-card {
      position:absolute;
      min-width:185px;
      padding:17px 18px;
      border-radius:18px;
      background:rgba(12,12,12,.86);
      border:1px solid rgba(255,230,0,.30);
      backdrop-filter:blur(12px);
      box-shadow:0 22px 40px rgba(0,0,0,.5),0 0 26px rgba(255,230,0,.06);
      z-index:4;
    }
    .float-card.one { right:-10px; top:70px; }
    .float-card.two { left:0; bottom:28px; }
    .float-card small { color:#9d9d9d; display:block; }
    .float-card b { font-size:1.4rem; }
    .spark {
      height:38px;
      margin-top:10px;
      background:
        linear-gradient(130deg, transparent 0 8%, var(--yellow) 9% 11%, transparent 12% 25%, var(--yellow) 26% 28%, transparent 29% 48%, var(--yellow) 49% 51%, transparent 52% 70%, var(--yellow) 71% 73%, transparent 74%);
      opacity:.8;
    }

    section { padding:105px 0; border-bottom:1px solid rgba(255,255,255,.07); }
    .section-head {
      display:flex;
      justify-content:space-between;
      gap:30px;
      align-items:end;
      margin-bottom:36px;
    }
    h2 {
      margin:12px 0 0;
      font-size:clamp(2.2rem,4vw,4.2rem);
      line-height:.98;
      letter-spacing:-.055em;
    }
    .section-copy {
      color:var(--muted);
      max-width:500px;
      line-height:1.65;
    }

    .services {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .service {
      position:relative;
      min-height:210px;
      padding:28px;
      border-radius:var(--radius);
      background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
      border:1px solid var(--line);
      overflow:hidden;
      transition:.28s ease;
    }
    .service::after {
      content:"";
      position:absolute;
      left:0;right:100%;bottom:0;
      height:2px;
      background:var(--yellow);
      transition:.3s ease;
      box-shadow:0 0 20px var(--yellow);
    }
    .service:hover {
      transform:translateY(-5px);
      border-color:rgba(255,230,0,.25);
      background:linear-gradient(145deg,rgba(255,230,0,.065),rgba(255,255,255,.022));
    }
    .service:hover::after { right:0; }
    .icon {
      width:49px;height:49px;
      border-radius:14px;
      border:1px solid rgba(255,230,0,.38);
      display:grid;place-items:center;
      color:var(--yellow);
      font-size:1.35rem;
      margin-bottom:24px;
      box-shadow:inset 0 0 20px rgba(255,230,0,.055);
    }
    .service h3 { margin:0 0 9px;font-size:1.08rem; }
    .service p { margin:0;color:#969696;line-height:1.55;font-size:.91rem; }

    .projects {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
    }
    .project {
      min-height:405px;
      border-radius:26px;
      border:1px solid var(--line);
      overflow:hidden;
      position:relative;
      background:#080808;
      box-shadow:var(--shadow);
    }
    .project-art {
      height:228px;
      position:relative;
      overflow:hidden;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .project.xiabi .project-art {
      background:
        linear-gradient(130deg,rgba(0,0,0,.08),rgba(0,0,0,.7)),
        radial-gradient(circle at 75% 45%,#26bad0,transparent 24%),
        linear-gradient(135deg,#0d596a,#f5ae42 48%,#063845 75%);
    }
    .project.ea .project-art {
      background:
        radial-gradient(circle at 68% 42%,rgba(255,0,0,.45),transparent 20%),
        linear-gradient(140deg,#090909,#2d0505 48%,#020202);
    }
    .mock-window {
      position:absolute;
      width:75%; height:78%;
      right:-5%; bottom:-10%;
      border-radius:15px 15px 0 0;
      background:rgba(5,5,5,.9);
      border:1px solid rgba(255,255,255,.20);
      transform:rotate(-3deg);
      padding:18px;
      box-shadow:0 28px 60px rgba(0,0,0,.5);
    }
    .mock-window .mini-bar {
      height:7px;width:70%;
      background:linear-gradient(90deg,var(--yellow) 0 34%,#fff 34% 50%,rgba(255,255,255,.25) 50%);
      border-radius:99px;
      margin-bottom:18px;
    }
    .mock-window strong {
      font-size:1.6rem;
      max-width:220px;
      display:block;
      line-height:1.02;
    }
    .project.ea .mock-window strong { color:#fff; }
    .project.ea .mock-window strong span { color:#ff3b3b; }
    .project-body { padding:25px 26px 28px; }
    .project-meta {
      color:var(--yellow);
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:.68rem;
      font-weight:800;
    }
    .project h3 { font-size:1.55rem;margin:9px 0 9px; }
    .project p { color:#9a9a9a;line-height:1.55;margin:0 0 18px; }

    .ai-grid {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:52px;
      align-items:center;
    }
    .ai-stage {
      min-height:480px;
      border-radius:30px;
      border:1px solid var(--line);
      background:
        radial-gradient(circle at 50% 48%,rgba(255,230,0,.17),transparent 28%),
        linear-gradient(145deg,#0c0c0c,#030303);
      position:relative;
      overflow:hidden;
    }
    .ai-stage::before {
      content:"K";
      position:absolute;
      width:200px;height:200px;
      border-radius:50%;
      border:1px solid rgba(255,230,0,.5);
      display:grid;place-items:center;
      font-size:6.5rem;
      font-weight:900;
      color:var(--yellow);
      left:50%;top:50%;
      transform:translate(-50%,-50%);
      box-shadow:0 0 80px rgba(255,230,0,.12),inset 0 0 70px rgba(255,230,0,.05);
    }
    .ai-stage::after {
      content:"";
      position:absolute; inset:16%;
      border:1px dashed rgba(255,230,0,.22);
      border-radius:50%;
      animation:spin2 22s linear infinite;
    }
    @keyframes spin2 { to { transform:rotate(360deg); } }
    .ai-lines {
      position:absolute; inset:0;
      background:
        linear-gradient(90deg,transparent 49.8%,rgba(255,230,0,.12) 50%,transparent 50.2%),
        linear-gradient(transparent 49.8%,rgba(255,230,0,.12) 50%,transparent 50.2%);
    }
    .ai-list {
      display:grid;
      gap:12px;
      margin-top:28px;
    }
    .ai-item {
      padding:18px 20px;
      display:flex;gap:14px;align-items:center;
      border-radius:16px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.025);
    }
    .ai-item b { display:block; }
    .ai-item small { color:#999; }

    .about {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:50px;
      align-items:center;
    }
    .about-panel {
      min-height:420px;
      border-radius:30px;
      overflow:hidden;
      position:relative;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg,transparent,rgba(0,0,0,.86)),
        radial-gradient(circle at 72% 28%,rgba(255,230,0,.28),transparent 17%),
        linear-gradient(120deg,#141414,#070707);
    }
    .city {
      position:absolute; left:0;right:0;bottom:0;height:55%;
      display:flex; align-items:end; gap:8px; padding:0 22px 0;
    }
    .building {
      flex:1;
      background:linear-gradient(180deg,#262626,#090909);
      border:1px solid rgba(255,230,0,.14);
      box-shadow:inset 0 0 22px rgba(255,230,0,.035);
    }
    .building:nth-child(1){height:42%}
    .building:nth-child(2){height:75%}
    .building:nth-child(3){height:54%}
    .building:nth-child(4){height:90%}
    .building:nth-child(5){height:68%}
    .building:nth-child(6){height:98%}
    .building:nth-child(7){height:62%}
    .about-quote {
      position:absolute;
      left:28px;top:28px;
      font-size:1.55rem;
      line-height:1.08;
      font-weight:900;
      letter-spacing:-.035em;
      z-index:2;
    }
    .about-quote span { color:var(--yellow); }

    .pill-row {
      display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;
    }
    .pill {
      padding:10px 13px;
      border-radius:999px;
      border:1px solid var(--line);
      color:#c6c6c6;
      background:rgba(255,255,255,.025);
      font-size:.82rem;
    }

    .contact {
      padding:95px 0;
    }
    .contact-box {
      border-radius:30px;
      padding:48px;
      border:1px solid rgba(255,230,0,.22);
      background:
        radial-gradient(circle at 86% 18%,rgba(255,230,0,.12),transparent 28%),
        linear-gradient(145deg,#0c0c0c,#050505);
      display:grid;
      grid-template-columns:1fr auto;
      gap:30px;
      align-items:center;
      box-shadow:0 30px 90px rgba(0,0,0,.4);
    }
    .contact-box h2 { font-size:clamp(2.2rem,4.8vw,4.8rem); }
    .contact-box h2 span { color:var(--yellow); }
    .contact-box p { color:#aaa;max-width:650px;line-height:1.65; }

    footer {
      padding:42px 0 56px;
      background:#020202;
      color:#888;
    }
    .footer-grid {
      display:grid;
      grid-template-columns:1fr auto;
      gap:28px;
      align-items:end;
    }
    .footer-brand {
      width:200px;
      margin-bottom:14px;
    }
    .footer-links {
      display:flex;
      flex-wrap:wrap;
      gap:20px;
      justify-content:flex-end;
      font-size:.86rem;
    }
    .footer-links a:hover { color:var(--yellow); }

    .reveal {
      opacity:0;
      transform:translateY(24px);
      transition:.7s cubic-bezier(.2,.75,.2,1);
    }
    .reveal.show {
      opacity:1;
      transform:none;
    }

    .mobile-toggle {
      display:none;
      width:46px;height:46px;
      border-radius:14px;
      border:1px solid var(--line);
      color:#fff;background:#0b0b0b;
      cursor:pointer;
    }

    @media (max-width: 980px) {
      .nav-inner { grid-template-columns:1fr auto; }
      .menu, .nav-cta { display:none; }
      .mobile-toggle { display:block; }
      .menu.open {
        display:flex;
        position:absolute;
        left:22px;right:22px;top:76px;
        flex-direction:column;
        background:rgba(5,5,5,.97);
        border:1px solid var(--line);
        border-radius:20px;
        padding:18px;
        gap:6px;
        box-shadow:0 30px 80px #000;
      }
      .hero-grid, .ai-grid, .about { grid-template-columns:1fr; }
      .hero { min-height:auto; }
      .hero-grid { padding-top:72px; }
      .visual { order:-1; min-height:440px; }
      .device { width:88%; }
      .services { grid-template-columns:1fr 1fr; }
      .contact-box { grid-template-columns:1fr; }
    }

    @media (max-width: 680px) {
      .wrap { width:min(var(--max),calc(100% - 26px)); }
      .brand img { width:auto; height:60px; max-width:190px; }
      .hero-grid { gap:22px; padding:52px 0 60px; }
      h1 { font-size:3.35rem; }
      .lead { font-size:1rem; }
      .stats { grid-template-columns:1fr; }
      .visual { min-height:360px; }
      .device { width:96%; min-height:310px; transform:none; }
      .screen { min-height:280px;padding:22px; }
      .screen-title { margin-top:32px;font-size:1.65rem; }
      .orb { width:110px;height:110px;right:40px;top:100px; }
      .float-card { transform:scale(.82); }
      .float-card.one { right:-26px;top:40px; }
      .float-card.two { left:-24px;bottom:12px; }
      section { padding:76px 0; }
      .section-head { flex-direction:column;align-items:flex-start; }
      .services, .projects { grid-template-columns:1fr; }
      .contact-box { padding:30px 24px; }
      .footer-grid { grid-template-columns:1fr; }
      .footer-links { justify-content:flex-start; }
    }

    /* =========================================================
       KOMVERSO MOTION SYSTEM
       Animaciones añadidas sin cambiar el diseño/base existente
       ========================================================= */

    :root {
      --mx: 50vw;
      --my: 30vh;
    }

    /* Halo sutil que sigue el cursor */
    .cursor-aura {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      opacity: .68;
      background:
        radial-gradient(
          430px circle at var(--mx) var(--my),
          rgba(255,230,0,.075),
          rgba(255,230,0,.025) 28%,
          transparent 66%
        );
      transition: opacity .25s ease;
      mix-blend-mode: screen;
    }

    /* Entrada cinematográfica de la barra */
    .nav {
      animation: navDrop .72s cubic-bezier(.2,.8,.2,1) both;
    }

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

    /* El logo respira apenas; el hover activa el "signal" */
    .brand {
      position: relative;
      isolation: isolate;
    }

    .brand::after {
      content:"";
      position:absolute;
      left:8%;
      right:14%;
      bottom:1px;
      height:1px;
      opacity:0;
      background:linear-gradient(90deg,transparent,var(--yellow),transparent);
      filter:drop-shadow(0 0 8px var(--yellow));
      transform:scaleX(.3);
      transition:.35s ease;
      z-index:-1;
    }

    .brand:hover::after {
      opacity:.8;
      transform:scaleX(1);
    }

    .brand img {
      transition: transform .35s cubic-bezier(.2,.8,.2,1),
                  filter .35s ease;
      transform-origin: 38% 50%;
    }

    .brand:hover img {
      transform: translateY(4px) scale(1.025);
      filter: drop-shadow(0 0 10px rgba(255,230,0,.22));
    }

    /* Texto amarillo con una pasada de luz muy discreta */
    h1 .accent,
    #ia h2 span,
    #nosotros h2 span,
    .contact-box h2 span {
      background-image:
        linear-gradient(
          105deg,
          var(--yellow) 0%,
          var(--yellow) 37%,
          #fff8aa 49%,
          var(--yellow) 61%,
          var(--yellow) 100%
        );
      background-size: 260% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent !important;
      animation: yellowSheen 7.5s ease-in-out infinite;
    }

    @keyframes yellowSheen {
      0%, 72%, 100% { background-position:100% 0; }
      84% { background-position:0% 0; }
    }

    /* Pulso elegante de los CTA */
    .btn-primary,
    .nav-cta {
      position:relative;
      overflow:hidden;
      isolation:isolate;
      will-change:transform;
    }

    .btn-primary::before,
    .nav-cta::before {
      content:"";
      position:absolute;
      top:-130%;
      left:-48%;
      width:34%;
      height:360%;
      transform:rotate(24deg);
      background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.72),
        transparent
      );
      animation: ctaSweep 5.8s ease-in-out infinite;
      z-index:-1;
    }

    @keyframes ctaSweep {
      0%, 68% { left:-58%; opacity:0; }
      72% { opacity:.8; }
      86% { left:128%; opacity:.35; }
      100% { left:128%; opacity:0; }
    }

    /* Visual principal: flotación controlada */
    .device {
      will-change:transform;
      animation: deviceFloat 6.5s ease-in-out infinite;
    }

    @keyframes deviceFloat {
      0%,100% { translate:0 0; }
      50% { translate:0 -9px; }
    }

    .orb {
      animation:
        orbBreathe 4.6s ease-in-out infinite,
        orbMicroRotate 17s linear infinite;
      will-change:transform,filter;
    }

    @keyframes orbBreathe {
      0%,100% { filter:brightness(1); box-shadow:0 0 35px rgba(255,230,0,.45), inset -20px -20px 35px #000; }
      50% { filter:brightness(1.13); box-shadow:0 0 57px rgba(255,230,0,.62), inset -20px -20px 35px #000; }
    }

    @keyframes orbMicroRotate {
      to { rotate:360deg; }
    }

    .float-card.one {
      animation: cardHoverA 5.2s ease-in-out infinite;
    }

    .float-card.two {
      animation: cardHoverB 6.1s ease-in-out infinite;
    }

    @keyframes cardHoverA {
      0%,100% { translate:0 0; }
      50% { translate:0 -8px; }
    }

    @keyframes cardHoverB {
      0%,100% { translate:0 0; }
      50% { translate:6px 7px; }
    }

    /* Línea de energía que cruza lentamente algunas secciones */
    .hero::before,
    #soluciones::before,
    #proyectos::before,
    #ia::before {
      content:"";
      position:absolute;
      left:-35%;
      width:28%;
      height:1px;
      top:0;
      opacity:0;
      pointer-events:none;
      background:linear-gradient(90deg,transparent,var(--yellow),transparent);
      box-shadow:0 0 18px rgba(255,230,0,.65);
      animation: energyLine 10s linear infinite;
    }

    #soluciones,
    #proyectos,
    #ia {
      position:relative;
      overflow:hidden;
    }

    #soluciones::before { animation-delay:2.1s; }
    #proyectos::before  { animation-delay:4.2s; }
    #ia::before         { animation-delay:6.3s; }

    @keyframes energyLine {
      0%, 14% { left:-35%; opacity:0; }
      18% { opacity:.65; }
      36% { left:108%; opacity:.25; }
      38%,100% { left:108%; opacity:0; }
    }

    /* Interacciones 3D: JS actualiza estas variables */
    .service,
    .project,
    .ai-item,
    .contact-box {
      --rx: 0deg;
      --ry: 0deg;
      --tz: 0px;
      transform:
        perspective(950px)
        rotateX(var(--rx))
        rotateY(var(--ry))
        translateZ(var(--tz));
      transform-style:preserve-3d;
      will-change:transform;
      transition:
        transform .18s ease-out,
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
    }

    .service:hover,
    .project:hover,
    .ai-item:hover {
      box-shadow:
        0 26px 65px rgba(0,0,0,.38),
        0 0 32px rgba(255,230,0,.045);
    }

    /* Profundidad del mockup al pasar el mouse */
    .project .mock-window {
      transition:transform .38s cubic-bezier(.2,.8,.2,1);
    }

    .project:hover .mock-window {
      transform:rotate(-1deg) translateY(-7px) scale(1.018);
    }

    /* Indicador activo en menú durante scroll */
    .menu a.is-active {
      color:#fff;
    }

    .menu a.is-active::after {
      left:0;
      right:0;
      box-shadow:0 0 18px var(--yellow);
    }

    /* Partículas del cursor */
    #komversoTrail {
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index:60;
      opacity:.72;
    }

    /* =========================================================
       KOMVERSE MODE — firma interactiva de la marca
       Doble clic en el logo para activarlo.
       ========================================================= */

    .komverse-overlay {
      position:fixed;
      inset:0;
      z-index:1000;
      display:grid;
      place-items:center;
      pointer-events:none;
      opacity:0;
      visibility:hidden;
      overflow:hidden;
      background:
        radial-gradient(circle at center, rgba(20,18,0,.20) 0%, rgba(0,0,0,.82) 48%, rgba(0,0,0,.94) 100%);
      backdrop-filter:blur(0px) brightness(.55);
    }

    .komverse-overlay::before,
    .komverse-overlay::after {
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:24px;
      height:24px;
      border:1px solid var(--yellow);
      border-radius:50%;
      translate:-50% -50%;
      opacity:0;
    }

    .komverse-copy {
      position:relative;
      z-index:2;
      width:min(930px,86vw);
      text-align:center;
      font-weight:950;
      font-size:clamp(1.55rem,4.3vw,4.7rem);
      letter-spacing:-.055em;
      line-height:.95;
      text-transform:uppercase;
      color:#fff;
      opacity:0;
      transform:scale(.96);
      text-shadow:
        0 4px 30px rgba(0,0,0,.95),
        0 0 38px rgba(255,230,0,.22);
    }

    .komverse-copy span {
      color:var(--yellow);
    }

    body.komverse-mode .komverse-overlay {
      visibility:visible;
      animation: overlayFlash 4.15s cubic-bezier(.2,.8,.2,1) both;
    }

    body.komverse-mode .komverse-overlay::before {
      animation: signalRing 1.35s cubic-bezier(.1,.7,.2,1) .1s both;
    }

    body.komverse-mode .komverse-overlay::after {
      animation: signalRing 1.55s cubic-bezier(.1,.7,.2,1) .28s both;
    }

    body.komverse-mode .komverse-copy {
      animation: sloganIn 3.65s cubic-bezier(.2,.8,.2,1) .28s both;
    }

    body.komverse-mode main,
    body.komverse-mode header,
    body.komverse-mode footer {
      animation: worldPulse 1.9s ease both;
    }

    @keyframes overlayFlash {
      0% {
        opacity:0;
        backdrop-filter:blur(0px) brightness(1);
      }
      14% {
        opacity:1;
        backdrop-filter:blur(4px) brightness(.50);
      }
      72% {
        opacity:1;
        backdrop-filter:blur(4px) brightness(.50);
      }
      100% {
        opacity:0;
        backdrop-filter:blur(0px) brightness(1);
      }
    }

    @keyframes signalRing {
      0% { width:24px; height:24px; opacity:.95; box-shadow:0 0 24px var(--yellow); }
      100% { width:135vmax; height:135vmax; opacity:0; box-shadow:0 0 80px rgba(255,230,0,.12); }
    }

    @keyframes sloganIn {
      0% { opacity:0; transform:scale(.93); filter:blur(7px); letter-spacing:-.08em; }
      16% { opacity:1; filter:blur(0); }
      48% { transform:scale(1); letter-spacing:-.045em; }
      88% { opacity:1; }
      100% { opacity:0; transform:scale(1.018); }
    }

    @keyframes worldPulse {
      0%,100% { filter:none; }
      36% { filter:brightness(.8) saturate(1.18); }
      46% { filter:brightness(1.08) saturate(1.12); }
    }

    /* Evita mareos y respeta configuración del usuario */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
      }
      #komversoTrail,
      .cursor-aura {
        display:none !important;
      }
    }

    @media (max-width: 980px), (pointer: coarse) {
      #komversoTrail,
      .cursor-aura {
        display:none;
      }

      .service,
      .project,
      .ai-item,
      .contact-box {
        transform:none !important;
      }
    }


    /* =========================================================
       KOMVERSE EXPERIENCE — experiencia interactiva de cliente
       ========================================================= */

    .system-online {
      position:relative;
      z-index:3;
      width:min(880px,88vw);
      text-align:center;
      opacity:0;
      transform:scale(.96);
      display:none;
    }

    .system-kicker {
      color:#8d8d8d;
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.22em;
      margin-bottom:18px;
    }

    .system-title {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:15px;
      font-size:clamp(2.1rem,6vw,6.6rem);
      line-height:.92;
      font-weight:950;
      letter-spacing:-.065em;
      color:#fff;
      text-shadow:0 8px 48px #000;
    }

    .system-dot {
      width:.18em;
      aspect-ratio:1;
      border-radius:50%;
      background:var(--yellow);
      box-shadow:0 0 24px var(--yellow),0 0 70px rgba(255,230,0,.48);
      animation:systemDot 1s ease-in-out infinite;
    }

    .system-subtitle {
      color:var(--yellow);
      font-size:clamp(.9rem,1.5vw,1.25rem);
      font-weight:900;
      letter-spacing:.30em;
      margin-top:18px;
    }

    .system-bars {
      width:min(440px,70vw);
      height:34px;
      display:grid;
      grid-template-columns:repeat(8,1fr);
      gap:7px;
      align-items:end;
      margin:25px auto 18px;
    }

    .system-bars i {
      display:block;
      height:20%;
      border-radius:3px 3px 0 0;
      background:linear-gradient(180deg,#fff6a0,var(--yellow));
      box-shadow:0 0 14px rgba(255,230,0,.22);
      animation:sysBars .85s ease-in-out infinite alternate;
    }
    .system-bars i:nth-child(2){animation-delay:.08s}
    .system-bars i:nth-child(3){animation-delay:.16s}
    .system-bars i:nth-child(4){animation-delay:.24s}
    .system-bars i:nth-child(5){animation-delay:.12s}
    .system-bars i:nth-child(6){animation-delay:.30s}
    .system-bars i:nth-child(7){animation-delay:.18s}
    .system-bars i:nth-child(8){animation-delay:.38s}

    .system-hint {
      color:#a7a7a7;
      font-size:.86rem;
      letter-spacing:.02em;
    }

    @keyframes systemDot {
      50% { transform:scale(.68); opacity:.55; }
    }

    @keyframes sysBars {
      to { height:95%; filter:brightness(1.14); }
    }

    body.komverse-system .komverse-overlay {
      visibility:visible;
      opacity:1;
      background:
        radial-gradient(circle at center,rgba(255,230,0,.08),transparent 28%),
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
        rgba(0,0,0,.96);
      background-size:auto,48px 48px,48px 48px,auto;
      backdrop-filter:blur(7px) brightness(.28);
      animation:systemOverlayIn 3.10s ease both;
    }

    body.komverse-system .komverse-copy { display:none; }
    body.komverse-system .system-online {
      display:block;
      animation:systemOnlineIn 2.85s cubic-bezier(.2,.8,.2,1) both;
    }

    body.komverse-system .komverse-overlay::before {
      animation:signalRing 1.25s cubic-bezier(.1,.7,.2,1) both;
    }

    @keyframes systemOverlayIn {
      0% { opacity:0; }
      10%,88% { opacity:1; }
      100% { opacity:0; }
    }

    @keyframes systemOnlineIn {
      0% { opacity:0; transform:scale(.94); filter:blur(7px); }
      14% { opacity:1; transform:scale(1); filter:blur(0); }
      88% { opacity:1; }
      100% { opacity:0; transform:scale(1.012); }
    }

    .experience-section {
      position:relative;
      overflow:hidden;
      padding-top:115px;
      background:
        radial-gradient(circle at 84% 45%,rgba(255,230,0,.07),transparent 30%),
        linear-gradient(180deg,rgba(255,255,255,.008),transparent);
    }

    .experience-section::after {
      content:"KOMVERSE";
      position:absolute;
      right:-.04em;
      top:110px;
      font-size:clamp(5rem,14vw,13rem);
      font-weight:950;
      line-height:1;
      letter-spacing:-.08em;
      color:transparent;
      -webkit-text-stroke:1px rgba(255,255,255,.025);
      pointer-events:none;
      z-index:0;
    }

    .experience-head,.experience-shell,.experience-caption {
      position:relative;
      z-index:2;
    }

    .experience-head h2 {
      max-width:780px;
    }

    .experience-accent {
      color:var(--yellow);
      text-shadow:0 0 35px rgba(255,230,0,.12);
    }

    .experience-shell {
      --ex-x:50%;
      --ex-y:50%;
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      min-height:650px;
      border-radius:32px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(520px circle at var(--ex-x) var(--ex-y),rgba(255,230,0,.055),transparent 58%),
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
      box-shadow:0 42px 110px rgba(0,0,0,.45);
      overflow:hidden;
      transition:border-color .35s ease,box-shadow .35s ease;
    }

    .experience-shell.has-result {
      border-color:rgba(255,230,0,.25);
      box-shadow:
        0 42px 110px rgba(0,0,0,.55),
        0 0 70px rgba(255,230,0,.055);
    }

    .experience-input-panel {
      padding:42px;
      border-right:1px solid rgba(255,255,255,.08);
      background:linear-gradient(155deg,rgba(255,255,255,.026),rgba(0,0,0,.16));
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .terminal-label {
      display:flex;
      align-items:center;
      gap:10px;
      color:#878787;
      font-size:.68rem;
      letter-spacing:.18em;
      font-weight:850;
      text-transform:uppercase;
    }

    .terminal-label span {
      width:7px;height:7px;border-radius:50%;
      background:var(--yellow);
      box-shadow:0 0 12px var(--yellow);
    }

    .experience-input-panel h3 {
      margin:16px 0 10px;
      font-size:clamp(2rem,3.4vw,3.2rem);
      line-height:1;
      letter-spacing:-.05em;
    }

    .experience-note {
      color:#9d9d9d;
      line-height:1.65;
      margin:0 0 22px;
      font-size:.94rem;
    }

    .komverse-prompt {
      border:1px solid rgba(255,255,255,.12);
      background:#060606;
      border-radius:20px;
      overflow:hidden;
      box-shadow:inset 0 0 38px rgba(255,255,255,.018);
      transition:.28s ease;
    }

    .komverse-prompt:focus-within {
      border-color:rgba(255,230,0,.45);
      box-shadow:
        0 0 0 3px rgba(255,230,0,.045),
        inset 0 0 38px rgba(255,230,0,.025);
    }

    .komverse-prompt textarea {
      width:100%;
      resize:none;
      color:#f4f4f4;
      background:transparent;
      border:0;
      outline:0;
      padding:20px 20px 10px;
      min-height:126px;
      line-height:1.6;
      font-size:.98rem;
    }

    .komverse-prompt textarea::placeholder { color:#5e5e5e; }

    .prompt-bottom {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:10px 12px 12px 18px;
      border-top:1px solid rgba(255,255,255,.055);
    }

    #charCounter {
      color:#626262;
      font-size:.72rem;
      font-variant-numeric:tabular-nums;
    }

    .experience-build {
      min-height:44px;
      padding:0 18px;
      font-size:.84rem;
    }

    .quick-prompts {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:15px;
    }

    .quick-prompts button {
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.025);
      color:#aaa;
      border-radius:999px;
      padding:8px 11px;
      cursor:pointer;
      font-size:.74rem;
      transition:.22s ease;
    }

    .quick-prompts button:hover {
      color:#fff;
      border-color:rgba(255,230,0,.35);
      background:rgba(255,230,0,.05);
      transform:translateY(-1px);
    }

    .local-demo-note {
      display:flex;
      gap:12px;
      align-items:flex-start;
      margin-top:24px;
      color:#777;
      font-size:.75rem;
      line-height:1.45;
    }

    .local-demo-note > span {
      color:var(--yellow);
      font-size:.72rem;
      margin-top:2px;
    }

    .local-demo-note strong { color:#aaa;display:block;margin-bottom:2px; }
    .local-demo-note small { color:#6f6f6f; }

    .experience-machine {
      min-width:0;
      position:relative;
      background:
        radial-gradient(circle at 50% 45%,rgba(255,230,0,.06),transparent 32%),
        #040404;
      overflow:hidden;
      padding-top:50px;
    }

    .machine-topbar {
      position:absolute;
      left:0;right:0;top:0;
      height:50px;
      z-index:5;
      display:flex;
      align-items:center;
      gap:16px;
      padding:0 18px;
      border-bottom:1px solid rgba(255,255,255,.07);
      color:#777;
      font-size:.68rem;
      letter-spacing:.08em;
      background:rgba(4,4,4,.85);
      backdrop-filter:blur(10px);
    }

    .machine-topbar b { color:#c8c8c8; }
    .machine-dots { display:flex;gap:6px; }
    .machine-dots i {
      width:7px;height:7px;border-radius:50%;
      background:#363636;
    }
    .machine-dots i:first-child { background:#ffe600;box-shadow:0 0 9px rgba(255,230,0,.4); }
    .machine-signal {
      margin-left:auto;
      color:#a1a1a1;
      font-size:.62rem;
    }
    .machine-signal::first-letter { color:var(--yellow); }

    .machine-grid {
      position:absolute; inset:50px 0 0;
      opacity:.34;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
      background-size:36px 36px;
      mask-image:radial-gradient(circle at center,#000 18%,transparent 78%);
    }

    .machine-scan {
      position:absolute;
      left:0;right:0;top:50px;
      height:80px;
      opacity:.0;
      pointer-events:none;
      background:linear-gradient(180deg,transparent,rgba(255,230,0,.07),transparent);
    }

    .experience-shell.is-processing .machine-scan {
      opacity:1;
      animation:machineScan 1.2s linear infinite;
    }

    @keyframes machineScan {
      from { transform:translateY(-90px); }
      to { transform:translateY(650px); }
    }

    .engine-empty,
    .engine-loading,
    .engine-result {
      min-height:600px;
      padding:38px;
      position:relative;
      z-index:2;
    }

    .engine-empty {
      display:grid;
      place-items:center;
      align-content:center;
      text-align:center;
    }

    .core-orbit {
      width:210px;
      height:210px;
      position:relative;
      display:grid;
      place-items:center;
      margin-bottom:30px;
    }

    .core-k {
      width:94px;height:94px;border-radius:50%;
      display:grid;place-items:center;
      color:var(--yellow);
      border:1px solid rgba(255,230,0,.38);
      font-size:2.4rem;
      font-weight:950;
      background:radial-gradient(circle,rgba(255,230,0,.08),#040404 65%);
      box-shadow:0 0 54px rgba(255,230,0,.15),inset 0 0 36px rgba(255,230,0,.05);
    }

    .orbit {
      position:absolute;
      inset:12px;
      border-radius:50%;
      border:1px solid rgba(255,230,0,.18);
    }
    .orbit-a { transform:scaleY(.34) rotate(18deg);animation:orbitA 8s linear infinite; }
    .orbit-b { transform:scaleY(.52) rotate(78deg);animation:orbitB 11s linear infinite reverse; }
    .orbit-c { inset:0;border-style:dashed;border-color:rgba(255,255,255,.10);animation:orbitC 15s linear infinite; }

    @keyframes orbitA { to { rotate:360deg; } }
    @keyframes orbitB { to { rotate:360deg; } }
    @keyframes orbitC { to { transform:rotate(360deg); } }

    .empty-copy small {
      color:#6c6c6c;
      letter-spacing:.19em;
      font-weight:850;
      font-size:.65rem;
    }

    .empty-copy h3 {
      font-size:clamp(1.7rem,3vw,2.65rem);
      line-height:1.02;
      letter-spacing:-.045em;
      margin:12px 0;
    }
    .empty-copy h3 span { color:var(--yellow); }
    .empty-copy p {
      max-width:460px;
      color:#858585;
      line-height:1.6;
      margin:0 auto;
      font-size:.9rem;
    }

    .engine-loading {
      display:none;
      place-items:center;
      align-content:center;
      text-align:center;
    }

    .experience-shell.is-processing .engine-empty,
    .experience-shell.is-processing .engine-result { display:none; }

    .experience-shell.is-processing .engine-loading { display:grid; }

    .loading-ring {
      width:128px;height:128px;
      border-radius:50%;
      border:1px solid rgba(255,230,0,.18);
      position:relative;
      display:grid;place-items:center;
      margin-bottom:26px;
      box-shadow:0 0 52px rgba(255,230,0,.08);
    }

    .loading-ring::before {
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:50%;
      border:2px solid transparent;
      border-top-color:var(--yellow);
      border-right-color:rgba(255,230,0,.25);
      animation:spinLoad .75s linear infinite;
    }
    .loading-ring span { color:var(--yellow);font-size:2rem;font-weight:950; }
    @keyframes spinLoad { to { transform:rotate(360deg); } }

    .loading-copy b { display:block;font-size:1.15rem; }
    .loading-copy small { display:block;color:#747474;margin-top:7px; }

    .loading-track {
      width:min(330px,66%);
      height:3px;
      background:#161616;
      border-radius:10px;
      overflow:hidden;
      margin-top:24px;
    }
    .loading-track span {
      display:block;height:100%;width:38%;
      background:var(--yellow);
      box-shadow:0 0 18px rgba(255,230,0,.4);
      animation:loadTrack 1.15s ease-in-out infinite;
    }
    @keyframes loadTrack {
      from { transform:translateX(-110%); }
      to { transform:translateX(310%); }
    }

    .engine-result {
      display:none;
      animation:resultIn .62s cubic-bezier(.2,.8,.2,1) both;
      overflow:auto;
      max-height:650px;
      scrollbar-width:thin;
      scrollbar-color:#2c2c2c transparent;
    }

    .experience-shell.has-result .engine-empty,
    .experience-shell.has-result .engine-loading { display:none; }

    .experience-shell.has-result .engine-result { display:block; }

    @keyframes resultIn {
      from { opacity:0;transform:translateY(18px) scale(.985);filter:blur(5px); }
      to { opacity:1;transform:none;filter:none; }
    }

    .result-heading {
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:flex-start;
      padding-bottom:19px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }

    .result-heading small {
      color:var(--yellow);
      font-size:.62rem;
      font-weight:850;
      letter-spacing:.18em;
    }

    .result-heading h3 {
      margin:7px 0 0;
      font-size:clamp(1.7rem,2.9vw,2.65rem);
      letter-spacing:-.045em;
      line-height:1;
    }

    .confidence {
      width:67px;height:67px;
      border-radius:50%;
      border:1px solid rgba(255,230,0,.25);
      display:grid;place-items:center;
      align-content:center;
      flex:0 0 auto;
      box-shadow:inset 0 0 26px rgba(255,230,0,.04);
    }
    .confidence span { color:#737373;font-size:.55rem;letter-spacing:.12em; }
    .confidence b { color:var(--yellow);font-size:.94rem; }

    .result-summary {
      color:#b0b0b0;
      line-height:1.65;
      margin:19px 0 20px;
      min-height:46px;
    }

    .solution-modules {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }

    .solution-module {
      padding:15px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:15px;
      background:rgba(255,255,255,.022);
      opacity:0;
      transform:translateY(9px);
      animation:moduleIn .42s ease forwards;
    }

    .solution-module:nth-child(2){animation-delay:.06s}
    .solution-module:nth-child(3){animation-delay:.12s}
    .solution-module:nth-child(4){animation-delay:.18s}

    @keyframes moduleIn { to { opacity:1;transform:none; } }

    .solution-module .module-icon {
      color:var(--yellow);
      font-size:.68rem;
      margin-bottom:8px;
      letter-spacing:.12em;
    }
    .solution-module strong { display:block;font-size:.88rem;margin-bottom:4px; }
    .solution-module small { color:#737373;line-height:1.4;display:block; }

    .architecture-block {
      margin-top:17px;
      padding:16px;
      border:1px solid rgba(255,255,255,.07);
      border-radius:16px;
      background:#050505;
    }

    .architecture-title {
      display:flex;justify-content:space-between;gap:16px;
      color:#6c6c6c;font-size:.58rem;letter-spacing:.14em;font-weight:800;
      margin-bottom:14px;
    }
    .architecture-title small { letter-spacing:0;color:#585858; }

    .flow-line {
      display:flex;
      align-items:center;
      gap:6px;
      overflow-x:auto;
      padding:2px 0 5px;
      scrollbar-width:none;
    }
    .flow-line::-webkit-scrollbar { display:none; }

    .flow-node {
      flex:0 0 auto;
      min-width:72px;
      text-align:center;
      padding:9px 8px;
      border-radius:10px;
      border:1px solid rgba(255,230,0,.18);
      color:#bdbdbd;
      font-size:.67rem;
      background:rgba(255,230,0,.026);
      position:relative;
    }

    .flow-arrow {
      color:var(--yellow);
      opacity:.55;
      flex:0 0 auto;
      animation:arrowPulse 1.3s ease-in-out infinite;
    }
    @keyframes arrowPulse { 50%{opacity:1;transform:translateX(2px)} }

    .impact-row {
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin:17px 0 20px;
    }
    .impact-chip {
      padding:8px 10px;
      border-radius:999px;
      background:rgba(255,230,0,.055);
      border:1px solid rgba(255,230,0,.14);
      color:#bababa;
      font-size:.66rem;
    }
    .impact-chip::before {
      content:"✓";
      color:var(--yellow);
      margin-right:6px;
    }

    .result-actions {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .result-actions .btn-primary,
    .result-actions .btn-ghost {
      min-height:44px;
      font-size:.78rem;
      padding:0 16px;
    }
    #tryAnother { cursor:pointer; }

    .experience-caption {
      margin-top:24px;
      display:flex;
      align-items:center;
      gap:18px;
      color:#777;
      font-size:.82rem;
    }
    .caption-line {
      height:1px;
      flex:0 0 80px;
      background:linear-gradient(90deg,var(--yellow),transparent);
      box-shadow:0 0 14px rgba(255,230,0,.22);
    }
    .experience-caption p { margin:0; }
    .experience-caption b { color:#aaa; }

    .komverse-active-badge {
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:70;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:220px;
      padding:11px 11px 11px 13px;
      border-radius:15px;
      border:1px solid rgba(255,230,0,.25);
      background:rgba(4,4,4,.88);
      backdrop-filter:blur(16px);
      box-shadow:0 20px 55px rgba(0,0,0,.45),0 0 28px rgba(255,230,0,.04);
      transform:translateY(26px);
      opacity:0;
      pointer-events:none;
      transition:.35s cubic-bezier(.2,.8,.2,1);
    }

    .komverse-active-badge.show {
      transform:none;
      opacity:1;
      pointer-events:auto;
    }

    .kab-dot {
      width:9px;height:9px;border-radius:50%;
      background:var(--yellow);
      box-shadow:0 0 14px var(--yellow);
      animation:systemDot 1.4s ease-in-out infinite;
    }
    .komverse-active-badge div { flex:1; }
    .komverse-active-badge small {
      color:#646464;
      font-size:.53rem;
      letter-spacing:.14em;
      display:block;
    }
    .komverse-active-badge strong {
      color:#d7d7d7;
      font-size:.74rem;
      display:block;
      margin-top:2px;
    }
    .komverse-active-badge button {
      width:28px;height:28px;border-radius:9px;
      border:1px solid rgba(255,255,255,.08);
      background:#101010;color:#747474;
      cursor:pointer;
    }
    .komverse-active-badge button:hover { color:#fff;border-color:rgba(255,230,0,.3); }

    /* Cuando el motor crea una solución, el HERO también reacciona. */
    body.komverse-tailored .screen {
      border-color:rgba(255,230,0,.5);
      box-shadow:inset 0 0 55px rgba(255,230,0,.035);
    }
    body.komverse-tailored .orb {
      box-shadow:0 0 70px rgba(255,230,0,.62),inset -20px -20px 35px #000;
    }

    @media (max-width:980px) {
      .experience-shell { grid-template-columns:1fr; }
      .experience-input-panel { border-right:0;border-bottom:1px solid rgba(255,255,255,.08); }
      .engine-result { max-height:none; }
    }

    @media (max-width:680px) {
      .experience-input-panel { padding:26px 20px; }
      .engine-empty,.engine-loading,.engine-result { padding:26px 20px;min-height:520px; }
      .solution-modules { grid-template-columns:1fr; }
      .prompt-bottom { align-items:flex-end; }
      .experience-build { padding:0 13px; }
      .experience-caption { align-items:flex-start; }
      .caption-line { flex-basis:38px;margin-top:8px; }
      .komverse-active-badge { left:12px;right:12px;bottom:12px; }
    }


    /* =========================================================
       CASE STUDY — XIABI TRAVELS
       ========================================================= */

    .xiabi-real-art {
      height:228px;
      position:relative;
      background:#071d22 !important;
    }
    .xiabi-real-art > img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center 24%;
      display:block;
      transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .5s ease;
    }
    .project.xiabi:hover .xiabi-real-art > img {
      transform:scale(1.035);
      filter:saturate(1.08) contrast(1.02);
    }
    .project-art-shade {
      position:absolute;inset:0;
      background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.58));
      pointer-events:none;
    }
    .case-tag {
      position:absolute;
      left:18px;top:18px;
      z-index:2;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(0,0,0,.72);
      color:var(--yellow);
      border:1px solid rgba(255,230,0,.22);
      font-size:.58rem;
      font-weight:900;
      letter-spacing:.14em;
      backdrop-filter:blur(8px);
    }
    .xiabi-open-case,
    .ea-open-case {
      cursor:pointer;
    }

    body.case-open {
      overflow:hidden;
    }

    .case-study-modal {
      position:fixed;
      inset:0;
      z-index:1200;
      background:#030303;
      color:#f5f5f5;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .42s ease,visibility .42s ease;
    }

    .case-study-modal.open {
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    .case-study-progress {
      position:absolute;
      left:0;top:0;
      height:2px;
      width:0%;
      z-index:14;
      background:linear-gradient(90deg,#00b3b8,#ff9d00,var(--yellow));
      box-shadow:0 0 14px rgba(255,230,0,.35);
    }

    .case-study-topbar {
      position:absolute;
      left:0;right:0;top:0;
      z-index:12;
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 28px;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:rgba(3,3,3,.79);
      backdrop-filter:blur(18px);
    }

    .case-study-brand {
      display:flex;
      align-items:center;
      gap:12px;
      color:#777;
      font-size:.66rem;
      letter-spacing:.15em;
      font-weight:850;
    }
    .case-index {
      color:#050505;
      background:var(--yellow);
      width:29px;height:29px;
      display:grid;place-items:center;
      border-radius:9px;
      font-weight:950;
      letter-spacing:0;
    }

    .case-close,.lightbox-close {
      width:42px;height:42px;
      border-radius:13px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.035);
      color:#fff;
      cursor:pointer;
      font-size:1.55rem;
      line-height:1;
      transition:.22s ease;
    }
    .case-close:hover,.lightbox-close:hover {
      border-color:rgba(255,230,0,.4);
      color:var(--yellow);
      transform:rotate(3deg) scale(1.04);
    }

    .case-study-scroll {
      position:absolute;
      inset:72px 0 0;
      overflow-y:auto;
      overflow-x:hidden;
      scroll-behavior:smooth;
      scrollbar-width:thin;
      scrollbar-color:#252525 #050505;
    }

    .case-study-content {
      --xiabi-teal:#00aeb4;
      --xiabi-orange:#f49a00;
      width:min(1440px,100%);
      margin:0 auto;
    }

    .case-hero {
      min-height:760px;
      display:grid;
      grid-template-columns:.88fr 1.12fr;
      gap:60px;
      align-items:center;
      padding:80px max(34px,5vw);
      position:relative;
      overflow:hidden;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(circle at 86% 24%,rgba(0,174,180,.12),transparent 29%),
        radial-gradient(circle at 63% 68%,rgba(244,154,0,.085),transparent 28%),
        linear-gradient(150deg,#050505,#080808);
    }
    .case-hero::before {
      content:"";
      position:absolute;
      width:620px;height:620px;
      right:-240px;top:-210px;
      border:1px solid rgba(0,174,180,.11);
      border-radius:50%;
      box-shadow:0 0 90px rgba(0,174,180,.035);
    }
    .case-hero-copy,.case-hero-visual { position:relative;z-index:2; }
    .case-kicker,.case-mini-label {
      color:var(--yellow);
      font-size:.67rem;
      font-weight:900;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .case-client-logo {
      width:170px;
      height:auto;
      display:block;
      margin:24px 0 25px;
      filter:drop-shadow(0 12px 28px rgba(0,0,0,.25));
    }
    .case-hero h2 {
      margin:0;
      max-width:680px;
      font-size:clamp(3rem,5.8vw,6.15rem);
      line-height:.91;
      letter-spacing:-.065em;
    }
    .case-hero h2 span,
    .case-capabilities h3 span,
    .case-flow-section h3 span,
    .case-gallery-section h3 span,
    .case-result-copy h3 span,
    .case-final-cta h3 span {
      color:var(--yellow);
    }
    .case-hero-copy > p {
      color:#aaa;
      max-width:670px;
      line-height:1.72;
      font-size:1.02rem;
      margin:24px 0 0;
    }
    .case-hero-actions {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:30px;
    }
    .case-scroll-gallery { cursor:pointer; }

    .case-hero-visual {
      min-height:520px;
      display:flex;
      align-items:center;
      justify-content:center;
      perspective:1500px;
    }
    .case-browser {
      width:94%;
      border-radius:19px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      background:#111;
      box-shadow:
        0 50px 100px rgba(0,0,0,.62),
        0 0 70px rgba(0,174,180,.05);
      transform:rotateY(-7deg) rotateX(2deg);
      animation:caseBrowserFloat 6s ease-in-out infinite;
    }
    @keyframes caseBrowserFloat {
      50% { translate:0 -8px; }
    }
    .case-browser-bar {
      height:38px;
      display:flex;
      align-items:center;
      gap:6px;
      padding:0 12px;
      color:#666;
      font-size:.62rem;
      background:#0d0d0d;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .case-browser-bar i {
      width:7px;height:7px;border-radius:50%;background:#353535;
    }
    .case-browser-bar i:first-child { background:var(--xiabi-orange); }
    .case-browser-bar i:nth-child(2) { background:var(--yellow); }
    .case-browser-bar i:nth-child(3) { background:var(--xiabi-teal); }
    .case-browser-bar span { margin-left:8px;letter-spacing:.06em; }
    .case-browser img {
      width:100%;
      display:block;
    }

    .case-float-chip {
      position:absolute;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(3,3,3,.82);
      backdrop-filter:blur(12px);
      color:#aaa;
      font-size:.58rem;
      font-weight:900;
      letter-spacing:.14em;
      box-shadow:0 20px 40px rgba(0,0,0,.35);
    }
    .case-float-a { left:0;top:16%;color:var(--xiabi-teal); }
    .case-float-b { right:-1%;bottom:14%;color:var(--xiabi-orange); }
    .case-float-c { left:14%;bottom:1%;color:var(--yellow); }

    .case-intro-grid {
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:70px;
      padding:110px max(34px,6vw);
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .case-intro-big h3,.case-capabilities h3,.case-flow-section h3,.case-gallery-section h3,.case-result-copy h3,.case-final-cta h3 {
      margin:13px 0 18px;
      font-size:clamp(2.4rem,4.4vw,4.8rem);
      line-height:.95;
      letter-spacing:-.055em;
    }
    .case-intro-big p,.case-section-head > p,.case-result-copy p {
      color:#909090;
      line-height:1.72;
      max-width:650px;
    }
    .case-statements {
      display:grid;
      gap:12px;
      align-content:center;
    }
    .case-statements > div {
      display:grid;
      grid-template-columns:46px 1fr;
      gap:16px;
      align-items:center;
      padding:20px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .case-statements span {
      color:var(--yellow);
      font-size:.73rem;
      font-weight:950;
    }
    .case-statements p { margin:0;color:#bbb;line-height:1.55; }

    .case-capabilities {
      padding:110px max(34px,6vw);
      border-bottom:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(circle at 8% 72%,rgba(0,174,180,.055),transparent 25%),
        #050505;
    }
    .case-section-head {
      display:grid;
      grid-template-columns:1fr .8fr;
      align-items:end;
      gap:60px;
      margin-bottom:45px;
    }
    .case-section-head h3 { margin-bottom:0; }
    .case-section-head > p { margin:0; }

    .case-cap-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
    }
    .case-cap-grid article {
      min-height:205px;
      padding:22px;
      border-radius:19px;
      border:1px solid rgba(255,255,255,.085);
      background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
      transition:.28s ease;
    }
    .case-cap-grid article:hover {
      transform:translateY(-5px);
      border-color:rgba(255,230,0,.22);
      background:linear-gradient(145deg,rgba(255,230,0,.035),rgba(255,255,255,.014));
    }
    .case-cap-grid b {
      display:block;color:var(--yellow);font-size:.65rem;letter-spacing:.12em;margin-bottom:26px;
    }
    .case-cap-grid strong { display:block;font-size:1.02rem;margin-bottom:8px; }
    .case-cap-grid p { margin:0;color:#7f7f7f;line-height:1.52;font-size:.82rem; }

    .case-flow-section {
      padding:110px max(34px,6vw);
      border-bottom:1px solid rgba(255,255,255,.07);
      text-align:center;
      background:
        radial-gradient(circle at 50% 55%,rgba(255,230,0,.055),transparent 28%),
        #030303;
    }
    .case-flow-section h3 { max-width:870px;margin-left:auto;margin-right:auto; }
    .case-process {
      margin:54px auto 0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:11px;
      max-width:1100px;
    }
    .case-process > div {
      flex:1;
      min-width:120px;
      min-height:126px;
      border:1px solid rgba(255,255,255,.09);
      border-radius:17px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      background:rgba(255,255,255,.02);
    }
    .case-process > div span { color:var(--yellow);font-size:.58rem;font-weight:950; }
    .case-process > div b { font-size:.93rem;margin:7px 0 2px; }
    .case-process > div small { color:#6e6e6e;font-size:.67rem; }
    .case-process > i { color:var(--yellow);font-style:normal;opacity:.55; }

    .case-gallery-section {
      padding:110px max(24px,4vw);
      border-bottom:1px solid rgba(255,255,255,.07);
      background:#060606;
    }
    .case-gallery-section .case-section-head {
      padding:0 max(10px,2vw);
    }
    .case-gallery {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
    }
    .case-shot {
      border:1px solid rgba(255,255,255,.09);
      background:#080808;
      border-radius:20px;
      overflow:hidden;
      color:#fff;
      padding:0;
      cursor:zoom-in;
      text-align:left;
      position:relative;
      min-width:0;
      transition:.28s ease;
    }
    .case-shot:hover {
      transform:translateY(-4px);
      border-color:rgba(255,230,0,.22);
      box-shadow:0 24px 60px rgba(0,0,0,.36);
    }
    .case-shot img {
      width:100%;
      height:310px;
      object-fit:cover;
      object-position:top center;
      display:block;
      transition:transform .55s ease;
      background:#fff;
    }
    .case-shot:hover img { transform:scale(1.018); }
    .case-shot span {
      display:block;
      padding:16px 18px 18px;
      border-top:1px solid rgba(255,255,255,.065);
    }
    .case-shot b { display:block;font-size:.92rem; }
    .case-shot small { display:block;color:#747474;margin-top:3px; }
    .case-shot-wide { grid-column:span 1; }

    .case-result-section {
      padding:110px max(34px,6vw);
      display:grid;
      grid-template-columns:1fr .8fr;
      gap:80px;
      align-items:center;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(circle at 85% 35%,rgba(0,174,180,.06),transparent 26%),
        #040404;
    }
    .case-result-list {
      display:grid;gap:9px;
    }
    .case-result-list > div {
      display:flex;gap:12px;align-items:center;
      padding:15px 17px;
      border:1px solid rgba(255,255,255,.075);
      border-radius:14px;
      background:rgba(255,255,255,.018);
      color:#9d9d9d;
      font-size:.84rem;
    }
    .case-result-list i {
      width:25px;height:25px;border-radius:8px;
      display:grid;place-items:center;
      background:rgba(255,230,0,.08);
      border:1px solid rgba(255,230,0,.14);
      color:var(--yellow);
      font-style:normal;
      font-size:.72rem;
    }

    .case-final-cta {
      min-height:320px;
      padding:70px max(34px,6vw);
      display:grid;
      grid-template-columns:1fr auto;
      gap:40px;
      align-items:center;
      background:
        radial-gradient(circle at 90% 30%,rgba(255,230,0,.10),transparent 27%),
        linear-gradient(145deg,#0a0a0a,#030303);
    }
    .case-final-cta small {
      color:#777;
      font-size:.65rem;
      letter-spacing:.16em;
      font-weight:850;
    }
    .case-final-cta h3 { max-width:850px;margin-bottom:0; }

    .case-lightbox {
      position:fixed;
      inset:0;
      z-index:1500;
      display:grid;
      place-items:center;
      background:rgba(0,0,0,.92);
      backdrop-filter:blur(13px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:.3s ease;
    }
    .case-lightbox.open {
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    .lightbox-close {
      position:absolute;
      right:24px;top:24px;
      z-index:2;
    }
    .lightbox-shell {
      width:min(94vw,1500px);
      max-height:88vh;
      border:1px solid rgba(255,255,255,.11);
      border-radius:18px;
      overflow:auto;
      background:#060606;
      box-shadow:0 40px 120px #000;
    }
    .lightbox-title {
      position:sticky;
      top:0;
      z-index:2;
      padding:14px 18px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(5,5,5,.90);
      backdrop-filter:blur(12px);
      color:#aaa;
      font-size:.75rem;
      letter-spacing:.08em;
    }
    .lightbox-shell img {
      width:100%;
      height:auto;
      display:block;
      background:#fff;
    }

    @media(max-width:1100px) {
      .case-hero { grid-template-columns:1fr;gap:35px; }
      .case-hero-visual { min-height:420px; }
      .case-intro-grid,.case-result-section { grid-template-columns:1fr;gap:42px; }
      .case-cap-grid { grid-template-columns:repeat(2,1fr); }
      .case-section-head { grid-template-columns:1fr;gap:20px; }
      .case-process { flex-wrap:wrap; }
      .case-process > div { flex:1 1 28%; }
    }
    @media(max-width:700px) {
      .case-study-topbar { padding:0 14px;height:64px; }
      .case-study-scroll { inset:64px 0 0; }
      .case-hero,.case-intro-grid,.case-capabilities,.case-flow-section,.case-result-section,.case-final-cta {
        padding-left:20px;padding-right:20px;
      }
      .case-hero { min-height:auto;padding-top:55px;padding-bottom:65px; }
      .case-client-logo { width:135px; }
      .case-hero-visual { min-height:320px; }
      .case-browser { width:100%;transform:none; }
      .case-float-chip { transform:scale(.82); }
      .case-cap-grid,.case-gallery { grid-template-columns:1fr; }
      .case-shot img { height:230px; }
      .case-process { display:grid;grid-template-columns:1fr;gap:8px; }
      .case-process > i { transform:rotate(90deg); }
      .case-final-cta { grid-template-columns:1fr; }
      .case-study-brand span:last-child { display:none; }
    }


    /* =========================================================
       CASE STUDY 02 — EA GAMING
       ========================================================= */

    .ea-real-art {
      height:228px;
      position:relative;
      background:#070816 !important;
    }
    .ea-real-art > img {
      width:100%;height:100%;
      object-fit:cover;
      object-position:center 35%;
      display:block;
      filter:saturate(1.06) contrast(1.03);
      transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .5s ease;
    }
    .project.ea:hover .ea-real-art > img {
      transform:scale(1.035);
      filter:saturate(1.14) contrast(1.05);
    }
    .ea-case-tag {
      color:#ff48c8;
      border-color:rgba(255,72,200,.28);
      box-shadow:0 0 22px rgba(45,219,255,.07);
    }

    body.ea-case-open { overflow:hidden; }

    .ea-case-study-modal {
      --ea-pink:#ff2da8;
      --ea-cyan:#2ddcff;
      --ea-violet:#8d44ff;
      position:fixed;
      inset:0;
      z-index:1250;
      background:#02030b;
      color:#f7f7fb;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .42s ease,visibility .42s ease;
    }
    .ea-case-study-modal.open {
      opacity:1;visibility:visible;pointer-events:auto;
    }

    .ea-case-progress {
      position:absolute;left:0;top:0;height:2px;width:0%;z-index:14;
      background:linear-gradient(90deg,var(--ea-cyan),var(--ea-violet),var(--ea-pink));
      box-shadow:0 0 16px rgba(255,45,168,.45);
    }

    .ea-case-topbar {
      position:absolute;left:0;right:0;top:0;z-index:12;height:72px;
      display:flex;align-items:center;justify-content:space-between;
      padding:0 28px;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:rgba(2,3,11,.80);
      backdrop-filter:blur(18px);
    }
    .ea-case-brand {
      display:flex;align-items:center;gap:12px;color:#777;
      font-size:.66rem;letter-spacing:.15em;font-weight:850;
    }
    .ea-case-index {
      color:#fff;width:29px;height:29px;display:grid;place-items:center;
      border-radius:9px;font-weight:950;letter-spacing:0;
      background:linear-gradient(135deg,var(--ea-pink),var(--ea-cyan));
      box-shadow:0 0 18px rgba(255,45,168,.18);
    }
    .ea-case-close,.ea-lightbox-close {
      width:42px;height:42px;border-radius:13px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.035);
      color:#fff;cursor:pointer;font-size:1.55rem;line-height:1;
      transition:.22s ease;
    }
    .ea-case-close:hover,.ea-lightbox-close:hover {
      border-color:rgba(255,45,168,.42);
      color:var(--ea-cyan);
      transform:rotate(3deg) scale(1.04);
    }

    .ea-case-scroll {
      position:absolute;inset:72px 0 0;
      overflow-y:auto;overflow-x:hidden;
      scroll-behavior:smooth;
      scrollbar-width:thin;
      scrollbar-color:#23243a #03040b;
    }
    .ea-case-content { width:min(1440px,100%);margin:0 auto; }

    .ea-case-hero {
      min-height:760px;
      display:grid;
      grid-template-columns:.88fr 1.12fr;
      gap:60px;align-items:center;
      padding:80px max(34px,5vw);
      position:relative;overflow:hidden;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(circle at 86% 24%,rgba(45,220,255,.12),transparent 28%),
        radial-gradient(circle at 62% 70%,rgba(255,45,168,.11),transparent 29%),
        linear-gradient(145deg,#04030a,#080616 55%,#03030a);
    }
    .ea-case-hero::before {
      content:"";
      position:absolute;
      width:650px;height:650px;
      right:-250px;top:-215px;
      border:1px solid rgba(255,45,168,.12);
      border-radius:50%;
      box-shadow:0 0 110px rgba(45,220,255,.035);
    }
    .ea-case-hero-copy,.ea-case-hero-visual { position:relative;z-index:2; }
    .ea-case-kicker,.ea-mini-label {
      color:var(--ea-cyan);
      font-size:.67rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
    }
    .ea-client-logo {
      width:150px;height:auto;display:block;margin:22px 0 24px;
      filter:drop-shadow(0 0 24px rgba(255,45,168,.20));
    }
    .ea-case-hero h2 {
      margin:0;max-width:690px;
      font-size:clamp(3rem,5.8vw,6.15rem);
      line-height:.91;letter-spacing:-.065em;
    }
    .ea-case-hero h2 span,
    .ea-intro-big h3 span,
    .ea-capabilities h3 span,
    .ea-flow-section h3 span,
    .ea-gallery-section h3 span,
    .ea-result-copy h3 span,
    .ea-final-cta h3 span {
      background:linear-gradient(90deg,var(--ea-pink),var(--ea-cyan));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .ea-case-hero-copy > p {
      color:#aaa;max-width:680px;line-height:1.72;font-size:1.02rem;margin:24px 0 0;
    }
    .ea-case-hero-actions { display:flex;flex-wrap:wrap;gap:12px;margin-top:30px; }
    .ea-scroll-gallery { cursor:pointer; }

    .ea-case-hero-visual {
      min-height:520px;display:flex;align-items:center;justify-content:center;perspective:1500px;
    }
    .ea-browser {
      width:94%;border-radius:19px;overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      background:#070814;
      box-shadow:0 50px 100px rgba(0,0,0,.62),0 0 75px rgba(255,45,168,.07);
      transform:rotateY(-7deg) rotateX(2deg);
      animation:eaBrowserFloat 6.2s ease-in-out infinite;
    }
    @keyframes eaBrowserFloat { 50% { translate:0 -8px; } }
    .ea-browser-bar {
      height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;
      color:#666;font-size:.62rem;background:#080914;border-bottom:1px solid rgba(255,255,255,.08);
    }
    .ea-browser-bar i { width:7px;height:7px;border-radius:50%;background:#353547; }
    .ea-browser-bar i:first-child { background:var(--ea-pink); }
    .ea-browser-bar i:nth-child(2) { background:var(--ea-violet); }
    .ea-browser-bar i:nth-child(3) { background:var(--ea-cyan); }
    .ea-browser-bar span { margin-left:8px;letter-spacing:.06em; }
    .ea-browser img { width:100%;display:block; }

    .ea-float-chip {
      position:absolute;padding:10px 12px;border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(3,4,13,.85);backdrop-filter:blur(12px);
      color:#aaa;font-size:.58rem;font-weight:900;letter-spacing:.14em;
      box-shadow:0 20px 40px rgba(0,0,0,.35);
    }
    .ea-float-a { left:0;top:16%;color:var(--ea-cyan); }
    .ea-float-b { right:-1%;bottom:14%;color:var(--ea-pink); }
    .ea-float-c { left:14%;bottom:1%;color:#c995ff; }

    .ea-intro-grid {
      display:grid;grid-template-columns:1.05fr .95fr;gap:70px;
      padding:110px max(34px,6vw);
      border-bottom:1px solid rgba(255,255,255,.07);
      background:#03040b;
    }
    .ea-intro-big h3,.ea-capabilities h3,.ea-flow-section h3,.ea-gallery-section h3,.ea-result-copy h3,.ea-final-cta h3 {
      margin:13px 0 18px;
      font-size:clamp(2.4rem,4.4vw,4.8rem);
      line-height:.95;letter-spacing:-.055em;
    }
    .ea-intro-big p,.ea-section-head > p,.ea-result-copy p {
      color:#90909e;line-height:1.72;max-width:650px;
    }
    .ea-statements { display:grid;gap:12px;align-content:center; }
    .ea-statements > div {
      display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:center;
      padding:20px 0;border-bottom:1px solid rgba(255,255,255,.08);
    }
    .ea-statements span { color:var(--ea-pink);font-size:.73rem;font-weight:950; }
    .ea-statements p { margin:0;color:#bbb;line-height:1.55; }

    .ea-capabilities {
      padding:110px max(34px,6vw);
      border-bottom:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(circle at 10% 76%,rgba(141,68,255,.07),transparent 27%),
        #050611;
    }
    .ea-section-head {
      display:grid;grid-template-columns:1fr .8fr;align-items:end;gap:60px;margin-bottom:45px;
    }
    .ea-section-head h3 { margin-bottom:0; }
    .ea-section-head > p { margin:0; }

    .ea-cap-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
    .ea-cap-grid article {
      min-height:205px;padding:22px;border-radius:19px;
      border:1px solid rgba(255,255,255,.085);
      background:linear-gradient(145deg,rgba(255,255,255,.034),rgba(255,255,255,.012));
      transition:.28s ease;
    }
    .ea-cap-grid article:hover {
      transform:translateY(-5px);
      border-color:rgba(255,45,168,.26);
      background:linear-gradient(145deg,rgba(255,45,168,.04),rgba(45,220,255,.015));
      box-shadow:0 0 38px rgba(141,68,255,.04);
    }
    .ea-cap-grid b { display:block;color:var(--ea-cyan);font-size:.65rem;letter-spacing:.12em;margin-bottom:26px; }
    .ea-cap-grid strong { display:block;font-size:1.02rem;margin-bottom:8px; }
    .ea-cap-grid p { margin:0;color:#7f7f8c;line-height:1.52;font-size:.82rem; }

    .ea-flow-section {
      padding:110px max(34px,6vw);
      border-bottom:1px solid rgba(255,255,255,.07);
      text-align:center;
      background:
        radial-gradient(circle at 50% 55%,rgba(255,45,168,.065),transparent 28%),
        #02030a;
    }
    .ea-flow-section h3 { max-width:900px;margin-left:auto;margin-right:auto; }
    .ea-process { margin:54px auto 0;display:flex;align-items:center;justify-content:center;gap:11px;max-width:1100px; }
    .ea-process > div {
      flex:1;min-width:120px;min-height:126px;
      border:1px solid rgba(255,255,255,.09);border-radius:17px;
      display:flex;flex-direction:column;justify-content:center;
      background:rgba(255,255,255,.02);
    }
    .ea-process > div span { color:var(--ea-cyan);font-size:.58rem;font-weight:950; }
    .ea-process > div b { font-size:.93rem;margin:7px 0 2px; }
    .ea-process > div small { color:#6e6e7a;font-size:.67rem; }
    .ea-process > i { color:var(--ea-pink);font-style:normal;opacity:.65; }

    .ea-gallery-section {
      padding:110px max(24px,4vw);
      border-bottom:1px solid rgba(255,255,255,.07);
      background:#05060f;
    }
    .ea-gallery-section .ea-section-head { padding:0 max(10px,2vw); }
    .ea-gallery { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
    .ea-shot {
      border:1px solid rgba(255,255,255,.09);
      background:#070812;border-radius:20px;overflow:hidden;color:#fff;
      padding:0;cursor:zoom-in;text-align:left;position:relative;min-width:0;transition:.28s ease;
    }
    .ea-shot:hover {
      transform:translateY(-4px);
      border-color:rgba(255,45,168,.25);
      box-shadow:0 24px 60px rgba(0,0,0,.38),0 0 32px rgba(45,220,255,.025);
    }
    .ea-shot img {
      width:100%;height:310px;object-fit:cover;object-position:top center;display:block;
      transition:transform .55s ease;background:#050611;
    }
    .ea-shot:hover img { transform:scale(1.018); }
    .ea-shot span { display:block;padding:16px 18px 18px;border-top:1px solid rgba(255,255,255,.065); }
    .ea-shot b { display:block;font-size:.92rem; }
    .ea-shot small { display:block;color:#747483;margin-top:3px; }

    .ea-result-section {
      padding:110px max(34px,6vw);
      display:grid;grid-template-columns:1fr .8fr;gap:80px;align-items:center;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(circle at 85% 35%,rgba(45,220,255,.055),transparent 26%),
        #03040b;
    }
    .ea-result-list { display:grid;gap:9px; }
    .ea-result-list > div {
      display:flex;gap:12px;align-items:center;padding:15px 17px;
      border:1px solid rgba(255,255,255,.075);border-radius:14px;
      background:rgba(255,255,255,.018);color:#9d9dad;font-size:.84rem;
    }
    .ea-result-list i {
      width:25px;height:25px;border-radius:8px;display:grid;place-items:center;
      background:linear-gradient(135deg,rgba(255,45,168,.10),rgba(45,220,255,.08));
      border:1px solid rgba(255,45,168,.15);color:var(--ea-cyan);
      font-style:normal;font-size:.72rem;
    }

    .ea-final-cta {
      min-height:320px;padding:70px max(34px,6vw);
      display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
      background:
        radial-gradient(circle at 90% 30%,rgba(255,45,168,.12),transparent 27%),
        radial-gradient(circle at 75% 70%,rgba(45,220,255,.07),transparent 28%),
        linear-gradient(145deg,#080814,#02030a);
    }
    .ea-final-cta small { color:#777;font-size:.65rem;letter-spacing:.16em;font-weight:850; }
    .ea-final-cta h3 { max-width:850px;margin-bottom:0; }

    .ea-case-lightbox {
      --ea-pink:#ff2da8;--ea-cyan:#2ddcff;
      position:fixed;inset:0;z-index:1550;display:grid;place-items:center;
      background:rgba(0,0,0,.93);backdrop-filter:blur(13px);
      opacity:0;visibility:hidden;pointer-events:none;transition:.3s ease;
    }
    .ea-case-lightbox.open { opacity:1;visibility:visible;pointer-events:auto; }
    .ea-lightbox-close { position:absolute;right:24px;top:24px;z-index:2; }
    .ea-lightbox-shell {
      width:min(94vw,1500px);max-height:88vh;
      border:1px solid rgba(255,255,255,.11);border-radius:18px;
      overflow:auto;background:#050610;box-shadow:0 40px 120px #000;
    }
    .ea-lightbox-title {
      position:sticky;top:0;z-index:2;padding:14px 18px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(4,5,13,.91);backdrop-filter:blur(12px);
      color:#aaa;font-size:.75rem;letter-spacing:.08em;
    }
    .ea-lightbox-shell img { width:100%;height:auto;display:block;background:#050610; }

    @media(max-width:1100px) {
      .ea-case-hero { grid-template-columns:1fr;gap:35px; }
      .ea-case-hero-visual { min-height:420px; }
      .ea-intro-grid,.ea-result-section { grid-template-columns:1fr;gap:42px; }
      .ea-cap-grid { grid-template-columns:repeat(2,1fr); }
      .ea-section-head { grid-template-columns:1fr;gap:20px; }
      .ea-process { flex-wrap:wrap; }
      .ea-process > div { flex:1 1 28%; }
    }
    @media(max-width:700px) {
      .ea-case-topbar { padding:0 14px;height:64px; }
      .ea-case-scroll { inset:64px 0 0; }
      .ea-case-hero,.ea-intro-grid,.ea-capabilities,.ea-flow-section,.ea-result-section,.ea-final-cta {
        padding-left:20px;padding-right:20px;
      }
      .ea-case-hero { min-height:auto;padding-top:55px;padding-bottom:65px; }
      .ea-client-logo { width:125px; }
      .ea-case-hero-visual { min-height:320px; }
      .ea-browser { width:100%;transform:none; }
      .ea-float-chip { transform:scale(.82); }
      .ea-cap-grid,.ea-gallery { grid-template-columns:1fr; }
      .ea-shot img { height:230px; }
      .ea-process { display:grid;grid-template-columns:1fr;gap:8px; }
      .ea-process > i { transform:rotate(90deg); }
      .ea-final-cta { grid-template-columns:1fr; }
      .ea-case-brand span:last-child { display:none; }
    }


    /* =========================================================
       PROJECT PHOTO FOLDERS
       Conserva la presentación original; las capturas aparecen al hover.
       ========================================================= */

    .project-art-folder {
      isolation:isolate;
      overflow:hidden;
    }

    .project-art-folder .mock-window {
      z-index:4;
    }

    .mock-subline {
      position:absolute;
      left:18px;
      bottom:18px;
      color:rgba(255,255,255,.45);
      font-size:.52rem;
      letter-spacing:.14em;
      font-weight:850;
    }

    .project-media-folder {
      position:absolute;
      left:17px;
      bottom:11px;
      width:205px;
      height:145px;
      z-index:2;
      pointer-events:none;
      perspective:900px;
      transform:translate3d(0,0,0);
    }

    .folder-shell {
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:58px;
      z-index:5;
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding:0 13px;
      border-radius:9px 15px 15px 15px;
      border:1px solid rgba(255,255,255,.16);
      background:
        linear-gradient(145deg,rgba(26,26,26,.96),rgba(7,7,7,.96));
      box-shadow:
        0 15px 32px rgba(0,0,0,.50),
        inset 0 1px rgba(255,255,255,.07);
      transition:.4s cubic-bezier(.2,.8,.2,1);
    }

    .folder-shell::before {
      content:"";
      position:absolute;
      left:-1px;
      top:-15px;
      width:82px;
      height:20px;
      border:1px solid rgba(255,255,255,.16);
      border-bottom:0;
      border-radius:9px 11px 0 0;
      background:#171717;
    }

    .folder-shell b {
      position:relative;
      z-index:2;
      color:#ddd;
      font-size:.56rem;
      letter-spacing:.10em;
      white-space:nowrap;
    }

    .folder-shell small {
      position:relative;
      z-index:2;
      color:#676767;
      font-size:.55rem;
      margin-top:3px;
    }

    .xiabi-folder .folder-shell {
      border-color:rgba(0,181,190,.24);
      box-shadow:
        0 15px 32px rgba(0,0,0,.50),
        0 0 24px rgba(0,181,190,.035),
        inset 0 1px rgba(255,255,255,.07);
    }

    .xiabi-folder .folder-shell::before {
      border-color:rgba(0,181,190,.24);
      border-bottom:0;
      background:linear-gradient(135deg,#0f2c31,#111);
    }

    .ea-folder .folder-shell {
      border-color:rgba(255,45,168,.26);
      box-shadow:
        0 15px 32px rgba(0,0,0,.50),
        0 0 27px rgba(255,45,168,.045),
        inset 0 1px rgba(255,255,255,.07);
    }

    .ea-folder .folder-shell::before {
      border-color:rgba(255,45,168,.26);
      border-bottom:0;
      background:linear-gradient(135deg,#37102d,#111326);
    }

    .folder-photo {
      position:absolute;
      left:24px;
      top:29px;
      width:150px;
      height:87px;
      z-index:1;
      overflow:hidden;
      border-radius:9px;
      border:1px solid rgba(255,255,255,.20);
      background:#090909;
      box-shadow:0 14px 30px rgba(0,0,0,.52);
      transform-origin:50% 95%;
      transition:
        transform .58s cubic-bezier(.18,.78,.18,1),
        opacity .38s ease,
        filter .38s ease,
        box-shadow .38s ease;
      opacity:.52;
      filter:saturate(.72) brightness(.72);
    }

    .folder-photo img {
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      object-position:top center;
    }

    .folder-photo > span {
      position:absolute;
      left:6px;
      bottom:6px;
      padding:4px 6px;
      border-radius:6px;
      background:rgba(0,0,0,.78);
      color:#fff;
      font-size:.42rem;
      letter-spacing:.09em;
      font-weight:900;
      backdrop-filter:blur(5px);
    }

    .xiabi-folder .folder-photo {
      border-color:rgba(0,181,190,.27);
    }

    .ea-folder .folder-photo {
      border-color:rgba(255,45,168,.27);
    }

    .folder-photo.photo-one {
      transform:translate3d(-2px,11px,0) rotate(-4deg) scale(.92);
    }

    .folder-photo.photo-two {
      transform:translate3d(10px,7px,0) rotate(1deg) scale(.95);
    }

    .folder-photo.photo-three {
      transform:translate3d(19px,12px,0) rotate(5deg) scale(.91);
    }

    /* La magia: al pasar el mouse, el folder "abre" y las fotos salen. */
    .project:hover .folder-photo,
    .project:focus-within .folder-photo {
      opacity:1;
      filter:saturate(1) brightness(1);
      box-shadow:
        0 19px 42px rgba(0,0,0,.60),
        0 0 20px rgba(255,255,255,.025);
    }

    .project:hover .folder-photo.photo-one,
    .project:focus-within .folder-photo.photo-one {
      transform:translate3d(-30px,-42px,18px) rotate(-11deg) scale(.94);
    }

    .project:hover .folder-photo.photo-two,
    .project:focus-within .folder-photo.photo-two {
      transform:translate3d(24px,-68px,28px) rotate(0deg) scale(1);
    }

    .project:hover .folder-photo.photo-three,
    .project:focus-within .folder-photo.photo-three {
      transform:translate3d(76px,-38px,14px) rotate(11deg) scale(.93);
    }

    .project:hover .folder-shell,
    .project:focus-within .folder-shell {
      transform:translateY(3px) scaleX(1.018);
    }

    .project:hover .project-media-folder,
    .project:focus-within .project-media-folder {
      z-index:5;
    }

    /*
      El panel con PLAY / Xiabi sigue siendo el protagonista.
      Se eleva un poco más cuando aparece el abanico de fotografías.
    */
    .project:hover .mock-window,
    .project:focus-within .mock-window {
      transform:rotate(-1deg) translate(7px,-10px) scale(1.018);
      box-shadow:
        0 34px 65px rgba(0,0,0,.58),
        0 0 26px rgba(255,255,255,.025);
    }

    .project.xiabi:hover .mock-window,
    .project.xiabi:focus-within .mock-window {
      box-shadow:
        0 34px 65px rgba(0,0,0,.58),
        0 0 30px rgba(0,181,190,.055);
    }

    .project.ea:hover .mock-window,
    .project.ea:focus-within .mock-window {
      box-shadow:
        0 34px 65px rgba(0,0,0,.58),
        0 0 34px rgba(255,45,168,.065);
    }

    @media (max-width: 980px), (pointer:coarse) {
      .project-media-folder {
        transform:scale(.86);
        transform-origin:left bottom;
      }

      .folder-photo {
        opacity:.82;
        filter:saturate(.9) brightness(.9);
      }

      .folder-photo.photo-one {
        transform:translate3d(-10px,-20px,0) rotate(-8deg) scale(.91);
      }

      .folder-photo.photo-two {
        transform:translate3d(24px,-32px,0) rotate(0deg) scale(.94);
      }

      .folder-photo.photo-three {
        transform:translate3d(58px,-18px,0) rotate(8deg) scale(.89);
      }
    }

    @media (max-width:680px) {
      .project-media-folder {
        left:9px;
        bottom:6px;
        transform:scale(.72);
        transform-origin:left bottom;
      }

      .mock-subline {
        display:none;
      }
    }


    /* =========================================================
       POWERED BY KOMVERSO — placa metálica
       ========================================================= */
    .footer-right {
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:20px;
    }

    .powered-seal {
      position:relative;
      width:min(350px,32vw);
      overflow:hidden;
      border-radius:14px;
      opacity:.90;
      transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        opacity .35s ease,
        filter .35s ease;
    }

    .powered-seal img {
      width:100%;
      height:auto;
      display:block;
    }

    .powered-seal::after {
      content:"";
      position:absolute;
      top:-55%;
      bottom:-55%;
      left:-38%;
      width:18%;
      transform:rotate(18deg);
      background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.30),
        rgba(255,255,255,.64),
        rgba(255,230,0,.16),
        transparent
      );
      filter:blur(1px);
      animation:poweredSealSweep 8.5s ease-in-out infinite;
      pointer-events:none;
    }

    .powered-seal:hover {
      transform:translateY(-4px) scale(1.015);
      opacity:1;
      filter:drop-shadow(0 14px 30px rgba(255,230,0,.09));
    }

    @keyframes poweredSealSweep {
      0%,72% { left:-38%; opacity:0; }
      76% { opacity:.85; }
      89% { left:122%; opacity:.35; }
      100% { left:122%; opacity:0; }
    }

    @media (max-width:980px) {
      .footer-right { align-items:flex-start; }
      .powered-seal { width:min(320px,76vw); }
    }

    @media (prefers-reduced-motion: reduce) {
      .powered-seal::after { animation:none !important; }
    }