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

    :root {
      --bg-primary:   #07111F;
      --bg-secondary: #0D1E35;
      --bg-navy:      #0A2040;
      --accent-1:     #00D4FF;
      --accent-2:     #0EA5E9;
      --text-main:    #F0F8FF;
      --text-muted:   #8BA3C0;
      --glass:        rgba(14,35,65,0.55);
      --border:       rgba(0,212,255,0.15);
      --gradient-hero: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(14,165,233,0.08) 0%, transparent 70%), #07111F;
      --shadow-glow:  rgba(0,212,255,0.45);
      --theme-speed:  0.45s;
    }
    [data-theme="aurora"] {
      --bg-primary:#0D0A1E; --bg-secondary:#150E2E; --bg-navy:#1A0F3A;
      --accent-1:#A855F7; --accent-2:#EC4899;
      --text-main:#F5F0FF; --text-muted:#9D86C4;
      --glass:rgba(30,15,60,0.55); --border:rgba(168,85,247,0.2);
      --gradient-hero:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(168,85,247,0.1) 0%,transparent 70%),#0D0A1E;
      --shadow-glow:rgba(168,85,247,0.45);
    }
    [data-theme="solstice"] {
      --bg-primary:#0C1208; --bg-secondary:#141F0C; --bg-navy:#1A2A0E;
      --accent-1:#84CC16; --accent-2:#22C55E;
      --text-main:#F0FFF0; --text-muted:#86A878;
      --glass:rgba(20,31,12,0.6); --border:rgba(132,204,22,0.18);
      --gradient-hero:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(132,204,22,0.07) 0%,transparent 70%),#0C1208;
      --shadow-glow:rgba(132,204,22,0.4);
    }
    [data-theme="dusk"] {
      --bg-primary:#1A0A05; --bg-secondary:#261208; --bg-navy:#331808;
      --accent-1:#FB923C; --accent-2:#F97316;
      --text-main:#FFF7F0; --text-muted:#C4906A;
      --glass:rgba(38,18,8,0.6); --border:rgba(251,146,60,0.18);
      --gradient-hero:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(251,146,60,0.08) 0%,transparent 70%),#1A0A05;
      --shadow-glow:rgba(251,146,60,0.45);
    }

    html { scroll-behavior: smooth; }
    body {
      background: var(--bg-primary); color: var(--text-main);
      font-family: 'Inter', sans-serif; overflow-x: hidden;
      transition: background var(--theme-speed) ease, color var(--theme-speed) ease;
    }

    #progress-bar {
      position: fixed; top: 0; left: 0; height: 2px; z-index: 300;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      width: 0%; transition: width 0.1s linear, background var(--theme-speed) ease;
    }

    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
      padding: 1.2rem 5%;
      background: rgba(7,17,31,0.8); backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      transition: background 0.3s, padding 0.3s, border-color var(--theme-speed) ease;
    }
    [data-theme="aurora"] nav   { background: rgba(13,10,30,0.85); }
    [data-theme="solstice"] nav { background: rgba(12,18,8,0.85); }
    [data-theme="dusk"] nav     { background: rgba(26,10,5,0.85); }
    nav.scrolled { padding: 0.8rem 5%; }
    [data-theme="aurora"] nav.scrolled   { background: rgba(13,10,30,0.97); }
    [data-theme="solstice"] nav.scrolled { background: rgba(12,18,8,0.97); }
    [data-theme="dusk"] nav.scrolled     { background: rgba(26,10,5,0.97); }
    html:not([data-theme]) nav.scrolled,
    [data-theme="cosmos"] nav.scrolled   { background: rgba(7,17,31,0.97); }

    .nav-logo {
      font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700;
      color:var(--text-main); text-decoration:none; letter-spacing:-0.02em;
      display:flex; align-items:center; gap:0.5rem; justify-self:start;
      transition: color var(--theme-speed) ease;
    }
    .logo-dot {
      width:8px; height:8px; border-radius:50%;
      background:var(--accent-1); box-shadow:0 0 10px var(--accent-1);
      transition: background var(--theme-speed) ease, box-shadow var(--theme-speed) ease;
    }
    .logo-img { height:34px; width:auto; display:block; }
    .nav-links { display:flex; gap:2rem; list-style:none; }
    .nav-links a {
      color:var(--text-muted); text-decoration:none; font-size:0.9rem;
      font-weight:500; transition:color 0.25s; position:relative; padding-bottom:2px;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:-2px; left:0;
      width:0; height:1px; background:var(--accent-1);
      transition:width 0.3s ease, background var(--theme-speed) ease;
    }
    .nav-links a:hover, .nav-links a.active { color:var(--text-main); }
    .nav-links a:hover::after, .nav-links a.active::after { width:100%; }
    .nav-cta {
      justify-self:end;
      padding:0.55rem 1.4rem; background:var(--accent-1); color:var(--bg-primary);
      border:none; border-radius:6px; font-family:'Space Grotesk',sans-serif;
      font-weight:600; font-size:0.9rem; cursor:pointer; text-decoration:none;
      transition:box-shadow 0.25s, transform 0.2s, background var(--theme-speed) ease, color var(--theme-speed) ease;
    }
    .nav-cta:hover { box-shadow:0 0 22px var(--shadow-glow); transform:translateY(-1px); }

    .site-menu-toggle {
      display: none;
      position: fixed; top: 0.75rem; left: 1rem; z-index: 260;
      width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--border);
      background: rgba(13, 10, 30, 0.85); backdrop-filter: blur(12px);
      flex-direction: column; justify-content: center; gap: 5px;
      padding: 0 12px; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    }
    .site-menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--text-main); transition: transform 0.25s ease, opacity 0.25s ease; }
    .site-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-menu-toggle.open span:nth-child(2) { opacity: 0; }
    .site-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .site-menu-panel {
      display: none;
      position: fixed; top: calc(1rem + 3.8rem); left: 0.9rem; z-index: 255;
      min-width: 220px; padding: 0.9rem; border-radius: 16px; border: 1px solid var(--border);
      background: var(--glass); backdrop-filter: blur(16px); box-shadow: 0 18px 44px rgba(0,0,0,0.25);
      flex-direction: column; gap: 0.45rem; opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .site-menu-toggle.open + .site-menu-panel,
    .site-menu-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .site-menu-link { color: var(--text-main); text-decoration: none; padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.92rem; transition: background 0.2s ease, color 0.2s ease; }
    .site-menu-link:hover, .site-menu-link.active { background: rgba(168,85,247,0.12); color: var(--accent-1); }
    .site-menu-group { border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
    .site-menu-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: 0 0.75rem; }

    #inicio {
      display:flex; flex-direction:column; align-items:stretch; justify-content:center;
      min-height:100vh; padding:140px 5% 50px;
      background:var(--gradient-hero); position:relative; z-index:0; overflow:clip;
      transition: background var(--theme-speed) ease;
    }
    #inicio::before {
      content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
      width:900px; height:900px; border-radius:50%;
      background:radial-gradient(circle, color-mix(in srgb,var(--accent-1) 5%,transparent) 0%,transparent 65%);
      animation:breathe 8s ease-in-out infinite; pointer-events:none;
    }
    @keyframes breathe {
      0%,100%{transform:translateX(-50%) scale(1);opacity:.5}
      50%{transform:translateX(-50%) scale(1.15);opacity:.9}
    }

    .hero-inner { position:relative; z-index:2; max-width:820px; width:100%; }

    .hero-flex {
      position:relative; z-index:2; max-width:1180px; width:100%;
      margin:0 auto; display:flex; align-items:center; justify-content:space-between;
      gap:2.5rem; text-align:left;
    }
    .hero-text { flex:1 1 520px; max-width:600px; }
    .hero-text .novovert-reveal { justify-content:flex-start; margin-left:-4px; }
    .hero-text .theme-selector { align-items:flex-start; }
    .hero-text .theme-cards { justify-content:flex-start; }
    .hero-text .hero-sub { margin:0 0 2.5rem; max-width:520px; }
    .hero-text .hero-actions { justify-content:flex-start; }
    .hero-visual { flex:1 1 420px; min-width:280px; max-width:480px; position:relative; display:flex; align-items:center; justify-content:center; }
    .device-3d { position:relative; z-index:2; }

    .globe-3d {
      position:absolute; top:-58px; right:-18px; z-index:1;
      width:230px; height:230px; perspective:900px;
    }
    .globe-sphere {
      position:absolute; inset:6px; border-radius:50%;
      background:radial-gradient(circle at 32% 26%, #79E6FF 0%, #1FA0EA 45%, #0A66C2 75%, #064A95 100%);
      box-shadow:inset -16px -16px 32px rgba(0,0,0,0.35), inset 12px 12px 26px rgba(255,255,255,0.28), 0 30px 50px rgba(4,30,70,0.5);
    }
    .globe-rings {
      position:absolute; inset:6px; border-radius:50%;
      transform-style:preserve-3d; animation:globeSpin 9s linear infinite;
    }
    @keyframes globeSpin { from { transform:rotateY(0deg); } to { transform:rotateY(360deg); } }
    .ring { position:absolute; inset:0; border-radius:50%; border:2.5px solid rgba(255,255,255,0.88); }
    .ring-1 { transform:rotateY(0deg); }
    .ring-2 { transform:rotateY(45deg); }
    .ring-3 { transform:rotateY(90deg); }
    .ring-4 { transform:rotateY(135deg); }
    .lat { position:absolute; left:0; right:0; border-radius:50%; border:2.5px solid rgba(255,255,255,0.75); }
    .lat-1 { top:21%; bottom:21%; transform:rotateX(78deg); }
    .lat-2 { top:42%; bottom:42%; transform:rotateX(78deg); }

    .globe-cursor {
      position:absolute; right:-6px; bottom:-2px; width:78px; height:88px; z-index:3;
      transform-origin:18% 6%; animation:cursorClick 3s ease-in-out infinite;
      filter:drop-shadow(0 10px 16px rgba(0,0,0,0.45));
    }
    .globe-cursor svg { width:100%; height:100%; display:block; }
    .globe-cursor::after {
      content:''; position:absolute; left:30%; top:34%; width:14px; height:14px; border-radius:50%;
      border:2.5px solid rgba(255,255,255,0.85); transform:translate(-50%,-50%) scale(0); opacity:0;
      animation:clickRipple 3s ease-out infinite;
    }
    @keyframes cursorClick {
      0%,80%,100% { transform:scale(1) rotate(0deg); }
      85%         { transform:scale(0.84) rotate(-4deg); }
      90%         { transform:scale(1.08) rotate(1deg); }
      95%         { transform:scale(1) rotate(0deg); }
    }
    @keyframes clickRipple {
      0%,78%  { opacity:0; transform:translate(-50%,-50%) scale(0); }
      84%     { opacity:0.9; transform:translate(-50%,-50%) scale(0.5); }
      97%     { opacity:0; transform:translate(-50%,-50%) scale(2.4); }
      100%    { opacity:0; transform:translate(-50%,-50%) scale(2.4); }
    }
    .hero-eyebrow {
      display:inline-flex; align-items:center;
      font-size:0.8rem; font-weight:500; letter-spacing:0.12em;
      text-transform:uppercase; color:var(--accent-1); margin-bottom:1.5rem;
      transition:color var(--theme-speed) ease;
    }
    .hero-title {
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(2.6rem,5.5vw,4.8rem); font-weight:700;
      line-height:1.07; letter-spacing:-0.03em; margin-bottom:1.25rem;
    }
    .hero-title .highlight {
      background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .hero-sub {
      color:var(--text-muted); font-size:1.1rem; line-height:1.7;
      max-width:560px; margin:0 auto 2.5rem;
      transition:color var(--theme-speed) ease;
    }

    .theme-selector { margin:0 auto 2.5rem; display:flex; flex-direction:column; align-items:center; gap:0.85rem; }
    .theme-selector-label {
      font-size:0.7rem; font-weight:600; letter-spacing:0.12em;
      text-transform:uppercase; color:var(--text-muted);
      transition:color var(--theme-speed) ease;
    }
    .theme-cards { display:flex; gap:0.75rem; flex-wrap:nowrap; justify-content:center; }
    .theme-card {
      position:relative; cursor:pointer; border-radius:12px; padding:0.85rem 1.1rem;
      border:1.5px solid transparent; display:flex; align-items:center; gap:0.6rem;
      font-family:'Space Grotesk',sans-serif; font-size:0.82rem; font-weight:600;
      color:var(--text-main); background:var(--glass); backdrop-filter:blur(10px);
      transition:transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease;
      user-select:none; -webkit-tap-highlight-color:transparent; min-width:120px;
      text-decoration:none;
    }
    .theme-card:hover { transform:translateY(-3px); }
    .theme-card.active { border-color:var(--tc-accent); box-shadow:0 0 18px var(--tc-glow),inset 0 0 0 1px var(--tc-accent); }
    .theme-card::after { content:'✓'; position:absolute; top:6px; right:8px; font-size:0.65rem; opacity:0; color:var(--tc-accent); transition:opacity 0.2s ease; }
    .theme-card.active::after { opacity:1; }
    .tc-swatch { display:flex; gap:3px; }
    .tc-dot { width:10px; height:10px; border-radius:50%; }
    .theme-card[data-pick="cosmos"]  { --tc-accent:#00D4FF; --tc-glow:rgba(0,212,255,0.3); }
    .theme-card[data-pick="aurora"]  { --tc-accent:#A855F7; --tc-glow:rgba(168,85,247,0.3); }
    .theme-card[data-pick="solstice"]{ --tc-accent:#84CC16; --tc-glow:rgba(132,204,22,0.3); }
    .theme-card[data-pick="dusk"]    { --tc-accent:#FB923C; --tc-glow:rgba(251,146,60,0.3); }
    .tc-name { color:inherit; }
    .tc-tag { font-size:0.68rem; font-weight:400; color:var(--text-muted); display:block; margin-top:1px; }

    .hero-actions { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
    .btn-primary {
      padding:0.9rem 2rem; background:#00D4FF; color:#07111F;
      border:none; border-radius:99px; font-family:'Space Grotesk',sans-serif;
      font-weight:600; font-size:1rem; cursor:pointer; text-decoration:none; display:inline-block;
      transition:box-shadow 0.25s, transform 0.2s, background var(--theme-speed) ease, color var(--theme-speed) ease;
    }
    .btn-primary:hover { box-shadow:0 0 32px rgba(0,212,255,0.35); transform:translateY(-2px); }
    .btn-ghost {
      padding:0.9rem 2rem; background:transparent; color:var(--text-main);
      border:1px solid var(--border); border-radius:99px;
      font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1rem;
      cursor:pointer; text-decoration:none; display:inline-block;
      transition:border-color 0.25s, background 0.25s, color var(--theme-speed) ease, border var(--theme-speed) ease;
    }
    .btn-ghost:hover { border-color:var(--accent-1); background:rgba(0,212,255,0.06); }

    @media (max-width:900px) {
      nav { justify-content:center; padding:1rem; }
      .nav-links, .nav-cta { display:none; }
      .nav-logo { position:relative; margin:0 auto; }
      .site-menu-toggle { display:flex; }
      .site-menu-panel { display:flex; top:calc(1rem + 4.4rem); }
      #inicio { padding-top:140px; }
      .theme-selector { align-items:center; }
      .theme-cards { justify-content:center; }
    }

    .section-wrap { padding:50px 5%; }
    .section-wrap-alt { padding:50px 5%; background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%); transition:background var(--theme-speed) ease; }
    .section-wrap-dark { padding:50px 5%; background:var(--bg-secondary); transition:background var(--theme-speed) ease; }
    .section-header { text-align:center; margin-bottom:3rem; }
    .section-eyebrow {
      display:inline-block; font-size:0.75rem; font-weight:600;
      letter-spacing:0.15em; text-transform:uppercase;
      color:var(--accent-1); margin-bottom:0.9rem;
      transition:color var(--theme-speed) ease;
    }
    .section-title {
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(1.9rem,3.5vw,2.8rem); font-weight:700;
      letter-spacing:-0.03em; line-height:1.15;
    }
    .section-sub {
      color:var(--text-muted); font-size:1rem; margin-top:0.75rem;
      line-height:1.65; max-width:540px; margin-inline:auto;
      transition:color var(--theme-speed) ease;
    }

    .services-grid {
      display:flex; flex-wrap:wrap; justify-content:center;
      gap:1.25rem; max-width:1200px; margin:0 auto;
    }
    .service-card {
      background:var(--glass); border:1px solid var(--border);
      border-radius:16px; padding:1.75rem; backdrop-filter:blur(12px);
      flex:1 1 260px; max-width:300px; position:relative; overflow:hidden;
      transition:transform 0s, box-shadow 0s, border-color 0s, background var(--theme-speed) ease;
    }
    .service-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg,transparent,var(--accent-1),transparent);
      opacity:0; transition:opacity 0s, background var(--theme-speed) ease;
    }
    .service-card::after {
      content:''; position:absolute; inset:0; border-radius:16px;
      background:radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb,var(--accent-1) 6%,transparent), transparent 70%);
      opacity:0; transition:opacity 0s; pointer-events:none;
    }
    .service-card:hover {
      transform:translateY(-10px) scale(1.038);
      box-shadow:0 24px 56px rgba(0,0,0,0.45), 0 0 32px color-mix(in srgb,var(--accent-1) 18%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--accent-1) 30%,transparent);
      border-color:color-mix(in srgb,var(--accent-1) 50%,transparent);
    }
    .service-card:hover::before { opacity:1; }
    .service-card:hover::after  { opacity:1; }
    .service-icon {
      width:48px; height:48px; border-radius:12px;
      background:color-mix(in srgb,var(--accent-1) 10%,transparent);
      border:1px solid color-mix(in srgb,var(--accent-1) 20%,transparent);
      display:flex; align-items:center; justify-content:center;
      margin-bottom:1.1rem; transition:background var(--theme-speed) ease, border-color var(--theme-speed) ease;
    }
    .service-icon svg { width:22px; height:22px; }
    .service-name { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:600; margin-bottom:0.6rem; }
    .service-desc { color:var(--text-muted); font-size:0.88rem; line-height:1.65; transition:color var(--theme-speed) ease; }
    .service-tag {
      display:inline-block; margin-top:1.1rem;
      font-size:0.72rem; font-weight:500; color:var(--accent-1);
      background:color-mix(in srgb,var(--accent-1) 8%,transparent);
      padding:0.28rem 0.7rem; border-radius:99px;
      border:1px solid color-mix(in srgb,var(--accent-1) 20%,transparent);
      transition:color var(--theme-speed) ease, background var(--theme-speed) ease;
    }

    .cta-banner {
      max-width:1200px; margin:3rem auto 0;
      background:linear-gradient(135deg,color-mix(in srgb,var(--accent-1) 12%,var(--bg-navy)),color-mix(in srgb,var(--accent-2) 8%,var(--bg-secondary)));
      border:1px solid color-mix(in srgb,var(--accent-1) 25%,transparent);
      border-radius:20px; padding:3rem 3.5rem;
      display:flex; align-items:center; justify-content:space-between; gap:2rem;
      flex-wrap:wrap; position:relative; overflow:hidden;
      transition:background var(--theme-speed) ease, border-color var(--theme-speed) ease;
    }
    .cta-banner::before {
      content:''; position:absolute; right:-80px; top:-80px;
      width:320px; height:320px; border-radius:50%;
      background:radial-gradient(circle,color-mix(in srgb,var(--accent-1) 8%,transparent),transparent 65%);
      pointer-events:none;
    }
    .cta-banner-text h3 {
      font-family:'Space Grotesk',sans-serif; font-size:clamp(1.4rem,2.5vw,1.9rem);
      font-weight:700; letter-spacing:-0.02em; margin-bottom:0.6rem;
    }
    .cta-banner-text p { color:var(--text-muted); font-size:0.95rem; line-height:1.6; max-width:460px; transition:color var(--theme-speed) ease; }
    .cta-banner-actions { display:flex; gap:1rem; flex-shrink:0; flex-wrap:wrap; }

    .tech-highlight-row {
      display:flex; flex-wrap:wrap; justify-content:center;
      gap:1.25rem; max-width:1200px; margin:0 auto;
    }
    .tech-highlight-card {
      background:var(--glass); border:1px solid var(--border);
      border-radius:16px; padding:1.75rem; backdrop-filter:blur(12px);
      display:flex; gap:1.25rem; align-items:flex-start;
      flex:1 1 280px; max-width:380px;
      transition:transform 0s, box-shadow 0s, border-color 0s, background var(--theme-speed) ease;
    }
    .tech-highlight-card:hover {
      transform:translateY(-8px) scale(1.032);
      box-shadow:0 20px 44px rgba(0,0,0,0.4), 0 0 24px color-mix(in srgb,var(--accent-1) 16%,transparent);
      border-color:color-mix(in srgb,var(--accent-1) 50%,transparent);
    }
    .th-icon {
      flex-shrink:0; width:52px; height:52px; border-radius:12px;
      background:color-mix(in srgb,var(--accent-1) 10%,transparent);
      border:1px solid color-mix(in srgb,var(--accent-1) 20%,transparent);
      display:flex; align-items:center; justify-content:center;
      transition:background var(--theme-speed) ease;
    }
    .th-icon svg { width:24px; height:24px; }
    .th-title { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:600; margin-bottom:0.45rem; }
    .th-desc { font-size:0.85rem; color:var(--text-muted); line-height:1.65; transition:color var(--theme-speed) ease; }

    .tech-strip {
      max-width:1200px; margin:2.5rem auto 0;
      display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
    }
    .tech-item {
      background:var(--glass); border:1px solid var(--border);
      border-radius:12px; padding:1.25rem 1rem;
      display:flex; flex-direction:column; align-items:center; gap:0.5rem;
      flex:1 1 150px; max-width:190px; text-align:center;
      transition:border-color 0s, transform 0s, box-shadow 0s, background var(--theme-speed) ease;
    }
    .tech-item:hover {
      border-color:color-mix(in srgb,var(--accent-1) 55%,transparent);
      transform:translateY(-7px) scale(1.07);
      box-shadow:0 14px 32px rgba(0,0,0,0.35), 0 0 18px color-mix(in srgb,var(--accent-1) 20%,transparent);
    }
    .tech-icon svg { width:26px; height:26px; }
    .tech-name { font-family:'Space Grotesk',sans-serif; font-size:0.85rem; font-weight:600; }
    .tech-label { font-size:0.72rem; color:var(--text-muted); transition:color var(--theme-speed) ease; }

    /* ===== Showcase inmersivo de servicios (scroll-driven, un servicio a la vez) ===== */
    .showcase { position:relative; background:var(--bg-primary); transition:background var(--theme-speed) ease; }
    .showcase-track { position:relative; height:330vh; }
    .showcase-stage {
      position:sticky; top:0; height:100vh; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
    }
    .showcase-stage::before {
      content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
      background:radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb,var(--accent-1) 6%,transparent) 0%, transparent 70%);
    }
    .showcase-header {
      position:absolute; top:7%; left:0; right:0; text-align:center; z-index:6; pointer-events:none;
    }
    .showcase-header .section-eyebrow,
    .showcase-header .section-title,
    .showcase-header .section-sub { transition:opacity .4s ease; }

    .showcase-progress {
      position:absolute; right:clamp(16px,3vw,40px); top:50%; transform:translateY(-50%);
      display:flex; flex-direction:column; gap:12px; z-index:6;
    }
    .sp-dot {
      width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.18);
      transition:background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
      cursor:default;
    }
    .sp-dot.active { background:var(--accent-1); transform:scale(1.45); box-shadow:0 0 12px var(--accent-1); }

    .showcase-panels { position:relative; width:100%; height:100%; max-width:1280px; margin:0 auto; }
    .showcase-panel {
      position:absolute; inset:0; z-index:2;
      display:flex; align-items:center; justify-content:space-between; gap:2rem;
      padding:0 5%; opacity:0; pointer-events:none;
      transform:translateY(26px) scale(0.97);
      transition:opacity 0.45s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);
      will-change:opacity, transform;
    }
    .showcase-panel.active { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); z-index:3; }

    .sp-text { flex:1 1 420px; max-width:460px; }
    .sp-tag {
      display:inline-block; font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
      color:var(--accent-1); background:color-mix(in srgb,var(--accent-1) 10%,transparent);
      border:1px solid color-mix(in srgb,var(--accent-1) 25%,transparent);
      padding:0.35rem 0.85rem; border-radius:99px; margin-bottom:1.1rem;
      transition:color var(--theme-speed) ease, background var(--theme-speed) ease, border-color var(--theme-speed) ease;
    }
    .sp-text h3 {
      font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.02em;
      font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.15; margin-bottom:0.9rem;
    }
    .sp-text p { color:var(--text-muted); font-size:1rem; line-height:1.75; transition:color var(--theme-speed) ease; }

    .sp-model {
      flex:1 1 480px; height:440px; position:relative; perspective:1500px;
      display:flex; align-items:center; justify-content:center;
    }

    @keyframes floatY { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-16px); } }
    @keyframes spinSlow { from { transform:rotateY(0deg); } to { transform:rotateY(360deg); } }
    @keyframes pulseGlow { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
    @keyframes particleRise {
      0%   { transform:translateY(0) scale(0.6); opacity:0; }
      15%  { opacity:1; }
      85%  { opacity:1; }
      100% { transform:translateY(-120px) scale(1); opacity:0; }
    }

    .float-chip {
      position:absolute; border-radius:14px;
      background:color-mix(in srgb,var(--accent-1) 8%,rgba(255,255,255,0.04));
      border:1px solid color-mix(in srgb,var(--accent-1) 22%,transparent);
      backdrop-filter:blur(6px); box-shadow:0 18px 40px rgba(0,0,0,0.4);
      animation:floatY 6s ease-in-out infinite;
    }
    .orbit-ring {
      position:absolute; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--accent-1) 35%,transparent);
      animation:spinSlow 14s linear infinite;
    }
    .particle {
      position:absolute; width:6px; height:6px; border-radius:50%;
      background:var(--accent-1); box-shadow:0 0 10px var(--accent-1);
      animation:particleRise 3.6s ease-in-out infinite;
    }

    /* --- Servicio 1: Diseño Web Personalizado --- */
    .model-design { position:relative; width:340px; height:340px; transform-style:preserve-3d; animation:floatY 7s ease-in-out infinite; }
    .pencil-3d {
      position:absolute; left:50%; top:50%; width:34px; height:240px;
      margin-left:-17px; margin-top:-120px;
      transform:rotateZ(28deg) rotateX(8deg) rotateY(-10deg);
      border-radius:6px 6px 0 0; overflow:visible;
      background:linear-gradient(100deg,#FFD15C 0%,#FFD15C 45%,#E8920C 100%);
      box-shadow:0 30px 50px rgba(0,0,0,0.45);
    }
    .pencil-3d::before {
      content:''; position:absolute; left:-1px; right:-1px; bottom:-46px; height:50px;
      background:linear-gradient(160deg,#F0C27B 0%,#C97B1E 60%,#3a2410 60%,#3a2410 100%);
      clip-path:polygon(0 0,100% 0,50% 100%);
      border-radius:0 0 4px 4px;
    }
    .pencil-3d::after {
      content:''; position:absolute; left:0; right:0; top:0; height:18px;
      background:linear-gradient(100deg,#ff7b7b,#e14b4b); border-radius:6px 6px 0 0;
    }
    .panel-card { width:128px; height:84px; padding:10px; }
    .panel-card .pc-line { height:6px; border-radius:3px; background:color-mix(in srgb,var(--accent-1) 30%,rgba(255,255,255,0.18)); margin-bottom:7px; }
    .panel-card .pc-line:nth-child(2){ width:70%; }
    .panel-card .pc-line:nth-child(3){ width:45%; }
    .panel-1 { top:6%; left:2%; transform:rotateY(14deg) rotateX(6deg); animation-delay:0.2s; }
    .panel-2 { bottom:10%; left:10%; transform:rotateY(-10deg) rotateX(-4deg); animation-delay:1.1s; width:110px; height:72px; }
    .panel-3 { top:14%; right:0%; transform:rotateY(-16deg) rotateX(8deg); animation-delay:0.6s; width:118px; height:80px; }
    .panel-4 { bottom:4%; right:8%; transform:rotateY(12deg) rotateX(-6deg); animation-delay:1.7s; width:104px; height:66px; }

    /* --- Servicio 2: Desarrollo Rápido y Optimizado --- */
    .model-speed { position:relative; width:340px; height:340px; animation:floatY 6.5s ease-in-out infinite; }
    .bolt-3d {
      position:absolute; left:50%; top:50%; width:160px; height:230px; margin-left:-80px; margin-top:-115px;
      clip-path:polygon(58% 0%, 18% 55%, 46% 55%, 30% 100%, 88% 40%, 56% 40%);
      background:linear-gradient(140deg,#7FE9FF 0%,var(--accent-1) 45%,var(--accent-2) 100%);
      box-shadow:0 0 60px color-mix(in srgb,var(--accent-1) 55%,transparent);
      animation:pulseGlow 2.6s ease-in-out infinite;
    }
    .speed-ring { width:220px; height:220px; left:50%; top:50%; margin-left:-110px; margin-top:-110px; }
    .speed-ring.r2 { width:280px; height:280px; margin-left:-140px; margin-top:-140px; animation-duration:20s; animation-direction:reverse; }
    .speed-line {
      position:absolute; height:3px; border-radius:3px; right:0;
      background:linear-gradient(90deg,transparent,var(--accent-1));
      animation:speedSlide 1.8s ease-in-out infinite;
    }
    @keyframes speedSlide { 0%{ transform:translateX(40px); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateX(-260px); opacity:0; } }
    .sl-1 { width:120px; top:30%; animation-delay:0s; }
    .sl-2 { width:90px;  top:48%; animation-delay:0.35s; }
    .sl-3 { width:140px; top:66%; animation-delay:0.7s; }
    .speed-particle { left:50%; }

    /* --- Servicio 3: Diseño Responsivo --- */
    .model-responsive { position:relative; width:380px; height:340px; transform-style:preserve-3d; }
    .rs-monitor {
      position:absolute; left:50%; top:6%; width:210px; height:140px; margin-left:-105px;
      transform:rotateX(8deg) rotateY(-12deg); animation:floatY 7s ease-in-out infinite;
      border-radius:14px; padding:9px;
      background:linear-gradient(145deg,var(--accent-2),var(--accent-1));
      box-shadow:0 30px 50px rgba(0,0,0,0.45);
    }
    .rs-monitor .rs-screen { width:100%; height:100%; border-radius:8px; background:#0a1322; display:flex; flex-direction:column; gap:6px; padding:8px; }
    .rs-tablet {
      position:absolute; left:8%; bottom:6%; width:118px; height:148px;
      transform:rotateX(6deg) rotateY(18deg) rotateZ(-4deg); animation:floatY 6.2s ease-in-out infinite; animation-delay:0.4s;
      border-radius:16px; padding:9px;
      background:linear-gradient(145deg,var(--accent-1),var(--accent-2));
      box-shadow:0 26px 44px rgba(0,0,0,0.4);
    }
    .rs-tablet .rs-screen { width:100%; height:100%; border-radius:9px; background:#0a1322; padding:8px; display:flex; flex-direction:column; gap:6px; }
    .rs-phone {
      position:absolute; right:6%; bottom:0%; width:74px; height:152px;
      transform:rotateX(4deg) rotateY(-20deg) rotateZ(5deg); animation:floatY 5.6s ease-in-out infinite; animation-delay:0.9s;
      border-radius:18px; padding:7px;
      background:linear-gradient(145deg,var(--accent-2),var(--accent-1));
      box-shadow:0 22px 38px rgba(0,0,0,0.4);
    }
    .rs-phone .rs-screen { width:100%; height:100%; border-radius:12px; background:#0a1322; padding:6px; display:flex; flex-direction:column; gap:5px; }
    .rs-screen .rs-bar { height:7px; border-radius:3px; background:rgba(255,255,255,0.14); }
    .rs-screen .rs-block { flex:1; border-radius:6px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-1) 30%,transparent),color-mix(in srgb,var(--accent-2) 18%,transparent)); animation:blockFade 4.4s ease-in-out infinite; }

    /* --- Servicio 4: Mantenimiento y Soporte --- */
    .model-maintenance { position:relative; width:340px; height:340px; animation:floatY 7s ease-in-out infinite; }
    .wrench-3d {
      position:absolute; left:50%; top:50%; width:190px; height:60px; margin-left:-95px; margin-top:-30px;
      transform:rotateZ(-35deg);
    }
    .wrench-3d .w-bar { position:absolute; left:30px; right:8px; top:50%; height:18px; margin-top:-9px; border-radius:9px; background:linear-gradient(145deg,#BFD3DE,#7B93A0); box-shadow:0 14px 26px rgba(0,0,0,0.4); }
    .wrench-3d .w-head { position:absolute; left:0; top:50%; width:54px; height:54px; margin-top:-27px; border-radius:50%; background:linear-gradient(145deg,#D8E6EC,#8AA3B0); box-shadow:0 14px 30px rgba(0,0,0,0.4); }
    .wrench-3d .w-head::after { content:''; position:absolute; inset:14px; border-radius:50%; background:var(--bg-primary); }
    .wrench-3d .w-tip { position:absolute; right:-4px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:6px; background:linear-gradient(145deg,#D8E6EC,#8AA3B0); box-shadow:0 10px 20px rgba(0,0,0,0.4); }
    .gear-ring {
      position:absolute; border-radius:50%; border:6px dashed color-mix(in srgb,var(--accent-1) 45%,transparent);
      animation:spinSlow 10s linear infinite;
    }
    .gear-1 { width:120px; height:120px; left:8%; top:8%; }
    .gear-2 { width:84px; height:84px; right:6%; bottom:10%; animation-duration:8s; animation-direction:reverse; border-style:dotted; border-width:7px; }
    .mod-cube {
      position:absolute; width:34px; height:34px; border-radius:8px;
      background:linear-gradient(145deg,var(--accent-1),var(--accent-2));
      box-shadow:0 14px 24px rgba(0,0,0,0.4); animation:floatY 5s ease-in-out infinite;
    }
    .mc-1 { top:10%; right:18%; animation-delay:0.3s; }
    .mc-2 { bottom:16%; left:16%; animation-delay:1s; }

    /* --- Servicio 5: Análisis y Estrategia --- */
    .model-analytics { position:relative; width:340px; height:300px; display:flex; align-items:flex-end; justify-content:center; gap:14px; animation:floatY 7s ease-in-out infinite; }
    .bar-3d {
      width:36px; border-radius:8px 8px 3px 3px;
      background:linear-gradient(145deg,var(--accent-1),var(--accent-2));
      box-shadow:0 18px 30px rgba(0,0,0,0.4);
      transform:perspective(600px) rotateX(8deg);
      animation:barGrow 3.4s ease-in-out infinite;
      transform-origin:bottom center;
    }
    @keyframes barGrow { 0%,100% { transform:perspective(600px) rotateX(8deg) scaleY(0.7); } 50% { transform:perspective(600px) rotateX(8deg) scaleY(1); } }
    .bar-1 { height:120px; animation-delay:0s; }
    .bar-2 { height:190px; animation-delay:0.3s; }
    .bar-3 { height:150px; animation-delay:0.6s; }
    .bar-4 { height:230px; animation-delay:0.9s; }
    .bar-5 { height:100px; animation-delay:1.2s; }
    .data-chip { width:120px; height:62px; padding:9px; }
    .data-chip .dc-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-1); box-shadow:0 0 8px var(--accent-1); margin-bottom:6px; }
    .data-chip .dc-line { height:5px; border-radius:3px; background:rgba(255,255,255,0.18); width:70%; }
    .dchip-1 { top:0%; left:0%; transform:rotateY(12deg); animation-delay:0.4s; }
    .dchip-2 { top:8%; right:-2%; transform:rotateY(-12deg); animation-delay:1.2s; }

    @media(max-width:980px){
      .showcase { overflow:hidden; }
      .showcase-track { height:auto; }
      .showcase-stage {
        position:relative; top:auto; height:auto; min-height:auto;
        overflow:visible; display:block; padding:60px 0 20px;
      }
      .showcase-header { position:relative; top:0; margin-bottom:2rem; padding:0 5%; }
      .showcase-progress { display:none; }
      .showcase-panels { height:auto; position:relative; }
      .showcase-panel {
        position:relative; inset:auto;
        opacity:1 !important; pointer-events:auto !important; transform:none !important;
        display:flex; flex-direction:column; align-items:center;
        text-align:center; padding:0 6% 60px; min-height:auto; gap:1.5rem;
        width:100%; box-sizing:border-box;
      }
      .sp-text {
        width:100%; max-width:100%; flex:none;
        padding:0; box-sizing:border-box;
      }
      .sp-text h3 { font-size:clamp(1.5rem,6vw,2rem); }
      .sp-text p  { font-size:0.95rem; max-width:360px; margin:0 auto; }
      /* Caja fija para el modelo — overflow:hidden corta lo que se salga */
      .sp-model {
        width:100%; flex:none;
        height:280px;
        display:flex; align-items:center; justify-content:center;
        overflow:visible; position:relative;
      }
      .model-design      { transform:scale(0.34); transform-origin:center center; }
      .model-speed       { transform:scale(0.34); transform-origin:center center; }
      .model-responsive  { transform:scale(0.32); transform-origin:center center; }
      .model-maintenance { transform:scale(0.34); transform-origin:center center; }
      .model-analytics   { transform:scale(0.36); transform-origin:center center; }
    }
    @media(max-width:600px){
      .showcase-panel { gap:1.2rem; padding:0 4% 44px; }
      .sp-model { height:240px; }
      .model-design      { transform:scale(0.28); }
      .model-speed       { transform:scale(0.28); }
      .model-responsive  { transform:scale(0.26); }
      .model-maintenance { transform:scale(0.28); }
      .model-analytics   { transform:scale(0.30); }
    }
    .faq-item {
      background:var(--glass); border:1px solid var(--border);
      border-radius:12px; overflow:hidden; backdrop-filter:blur(8px);
      transition:border-color 0.3s, background var(--theme-speed) ease;
    }
    .faq-item:hover { border-color:color-mix(in srgb,var(--accent-1) 35%,transparent); }
    .faq-q {
      width:100%; background:none; border:none; cursor:pointer;
      padding:1.1rem 1.4rem; display:flex; align-items:center; justify-content:space-between;
      font-family:'Space Grotesk',sans-serif; font-size:0.95rem; font-weight:600;
      color:var(--text-main); text-align:left; gap:1rem;
      transition:color var(--theme-speed) ease;
    }
    .faq-arrow {
      width:22px; height:22px; border-radius:50%; flex-shrink:0;
      background:color-mix(in srgb,var(--accent-1) 12%,transparent);
      border:1px solid color-mix(in srgb,var(--accent-1) 25%,transparent);
      display:flex; align-items:center; justify-content:center; color:var(--accent-1);
      transition:transform 0.25s ease, background var(--theme-speed) ease, border-color var(--theme-speed) ease, color var(--theme-speed) ease;
    }
    .faq-arrow svg { width:12px; height:12px; transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1); }
    .faq-q:hover .faq-arrow { transform:scale(1.12); border-color:color-mix(in srgb,var(--accent-1) 55%,transparent); }
    .faq-item.open .faq-arrow { background:var(--accent-1); border-color:var(--accent-1); color:var(--bg-primary); }
    .faq-item.open .faq-arrow svg { transform:rotate(180deg); }
    .faq-a {
      max-height:0; overflow:hidden; padding:0 1.4rem;
      font-size:0.88rem; color:var(--text-muted); line-height:1.7;
      transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s ease, color var(--theme-speed) ease;
    }
    .faq-item.open .faq-a { max-height:200px; padding:0 1.4rem 1.1rem; }

    .final-cta {
      text-align:center; padding:50px 5%;
      background:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);
      position:relative; overflow:hidden; transition:background var(--theme-speed) ease;
    }
    .final-cta::before {
      content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:600px; height:600px; border-radius:50%;
      background:radial-gradient(circle,color-mix(in srgb,var(--accent-1) 5%,transparent),transparent 65%);
      pointer-events:none;
    }
    .final-cta-inner { position:relative; z-index:2; max-width:640px; margin:0 auto; }
    .final-cta h2 {
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(2rem,4vw,3.2rem); font-weight:700;
      letter-spacing:-0.03em; line-height:1.12; margin-bottom:1rem;
    }
    .final-cta p { color:var(--text-muted); font-size:1rem; line-height:1.7; margin-bottom:2.25rem; transition:color var(--theme-speed) ease; }
    .final-cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

    .fade-up { opacity:0; transform:translateY(50px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .fade-up.in-view { opacity:1; transform:none; }
    .slide-left  { opacity:0; transform:translateX(-50px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .slide-right { opacity:0; transform:translateX(50px);  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .slide-left.in-view, .slide-right.in-view { opacity:1; transform:none; }
    .stagger > * {
      opacity:0; transform:translateY(36px) rotateX(-10deg); transform-origin:bottom center;
      transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .stagger.in-view > * { opacity:1; transform:none; }

    .icon-draw { color:var(--accent-1); transition:color 0.6s cubic-bezier(0.65,0,0.35,1); }
    .icon-draw path, .icon-draw line, .icon-draw circle,
    .icon-draw rect, .icon-draw polygon, .icon-draw ellipse {
      stroke-dasharray:1; stroke-dashoffset:1;
      transition:stroke-dashoffset 0.9s cubic-bezier(0.65,0,0.35,1);
    }
    .in-view .icon-draw path, .in-view .icon-draw line, .in-view .icon-draw circle,
    .in-view .icon-draw rect, .in-view .icon-draw polygon, .in-view .icon-draw ellipse {
      stroke-dashoffset:0;
    }
    .service-card:hover .icon-draw, .tech-highlight-card:hover .icon-draw, .tech-item:hover .icon-draw {
      color:color-mix(in srgb,var(--accent-1) 55%,white 45%);
    }
    .service-card:hover .service-icon, .tech-highlight-card:hover .th-icon, .tech-item:hover .tech-icon {
      background:color-mix(in srgb,var(--accent-1) 18%,transparent);
      border-color:color-mix(in srgb,var(--accent-1) 45%,transparent);
    }

    .page-footer {
      background:var(--bg-secondary); border-top:1px solid var(--border);
      padding:2rem 5%; display:flex; justify-content:space-between;
      align-items:center; flex-wrap:wrap; gap:1rem;
      transition:background var(--theme-speed) ease, border-color var(--theme-speed) ease;
    }
    .footer-logo {
      font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700;
      color:var(--text-main); text-decoration:none; letter-spacing:-0.02em;
      display:flex; align-items:center; gap:0.5rem;
    }
    .page-footer p { color:var(--text-muted); font-size:0.8rem; }
    .footer-links { display:flex; gap:1.5rem; }
    .footer-links a { color:var(--text-muted); text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
    .footer-links a:hover { color:var(--accent-1); }

    .novovert-reveal {
      margin-bottom:1.4rem; margin-top:0.1rem;
      pointer-events:none; user-select:none;
      display:flex; justify-content:center; width:100%;
    }
    .nv-svg { width:min(490px,88vw); height:auto; overflow:visible; }
    .nv-svg.nv-done { animation:nv-shimmer 4s ease-in-out infinite; }
    @keyframes nv-shimmer {
      0%,100% { filter:drop-shadow(0 0 0px transparent); }
      50%      { filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent-1) 60%,transparent)); }
    }
    .nv-glyph path, .nv-glyph rect {
      stroke-dasharray:1; stroke-dashoffset:1;
      transition:stroke-dashoffset 0.7s cubic-bezier(0.65,0,0.35,1);
      transition-delay:calc(0.4s + var(--gi) * 0.18s);
    }
    .nv-svg.nv-drawing .nv-glyph path,
    .nv-svg.nv-drawing .nv-glyph rect { stroke-dashoffset:0; }

    /* ===== Dispositivo 3D del héroe (monitor + teclado) ===== */
    .device-3d {
      position:relative; width:400px; height:360px;
      perspective:1300px;
    }
    @keyframes deviceFloat {
      0%,100% { transform:translateY(0); }
      50%     { transform:translateY(-10px); }
    }

    .monitor {
      position:absolute; top:6px; left:36px; width:320px; height:208px;
      transform-style:preserve-3d; transform:rotateX(8deg) rotateY(-15deg);
      animation:deviceFloat 5.5s ease-in-out infinite;
    }
    .monitor-frame {
      position:absolute; inset:0; border-radius:20px; padding:13px;
      background:linear-gradient(145deg,var(--accent-2),var(--accent-1));
      box-shadow:0 36px 60px -10px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.18);
      transition:background var(--theme-speed) ease;
    }
    .monitor-notch {
      position:absolute; left:50%; top:3px; transform:translateX(-50%);
      width:46px; height:5px; border-radius:4px; background:rgba(255,255,255,0.35);
    }
    .screen {
      position:relative; width:100%; height:100%; border-radius:11px;
      background:#0a1322; overflow:hidden;
      box-shadow:inset 0 0 0 2px rgba(255,255,255,0.08);
    }
    .monitor-stem {
      position:absolute; left:50%; bottom:-40px; transform:translateX(-50%) rotateX(8deg);
      width:24px; height:42px; border-radius:5px;
      background:linear-gradient(145deg,var(--accent-2),var(--accent-1));
      transition:background var(--theme-speed) ease;
    }
    .monitor-base {
      position:absolute; left:50%; bottom:-54px; transform:translateX(-50%) rotateX(62deg);
      width:130px; height:30px; border-radius:50%;
      background:linear-gradient(145deg,var(--accent-1),var(--accent-2));
      opacity:0.85; transition:background var(--theme-speed) ease;
    }

    /* navegador animado dentro de la pantalla */
    .browser { position:absolute; inset:9px; display:flex; flex-direction:column; gap:7px; }
    .browser-bar {
      display:flex; align-items:center; gap:5px; flex-shrink:0;
      background:rgba(255,255,255,0.06); border-radius:6px; padding:5px 7px;
    }
    .bdot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .bdot:nth-child(1){ background:#ff6159; }
    .bdot:nth-child(2){ background:#ffbd2e; }
    .bdot:nth-child(3){ background:#28c840; }
    .url-bar { flex:1; height:9px; border-radius:4px; background:rgba(255,255,255,0.1); position:relative; overflow:hidden; margin-left:4px; }
    .url-bar::after {
      content:''; position:absolute; left:0; top:0; height:100%; width:30%; border-radius:4px;
      background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
      animation:urlLoad 4.2s ease-in-out infinite;
    }
    @keyframes urlLoad {
      0%   { width:8%;  left:0; }
      45%  { width:85%; left:0; }
      55%  { width:85%; left:0; }
      100% { width:8%;  left:0; }
    }
    .browser-body { position:relative; flex:1; display:flex; flex-direction:column; gap:8px; padding:2px 2px 0; }
    .line { height:7px; border-radius:3px; background:rgba(255,255,255,0.13); animation:lineGrow 4.2s ease-in-out infinite; }
    .line.w1 { width:78%; animation-delay:0.1s; }
    .line.w2 { width:55%; animation-delay:0.35s; }
    .line.w3 { width:66%; animation-delay:0.6s; }
    .block {
      margin-top:4px; flex:1; border-radius:6px;
      background:linear-gradient(135deg,color-mix(in srgb,var(--accent-1) 25%,transparent),color-mix(in srgb,var(--accent-2) 15%,transparent));
      opacity:0; animation:blockFade 4.2s ease-in-out infinite;
    }
    @keyframes lineGrow {
      0%   { width:0%;  opacity:0.4; }
      40%  { opacity:1; }
      55%  { opacity:1; }
      100% { width:0%;  opacity:0.4; }
    }
    @keyframes blockFade {
      0%,100% { opacity:0; transform:scale(0.94); }
      45%,70% { opacity:1; transform:scale(1); }
    }
    .cursor {
      position:absolute; width:0; height:0; z-index:3; pointer-events:none;
      border-left:6px solid transparent; border-right:2px solid transparent;
      border-top:9px solid #fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));
      animation:cursorMove 4.2s ease-in-out infinite;
    }
    @keyframes cursorMove {
      0%   { left:20%; top:30%; opacity:0; }
      8%   { opacity:1; }
      30%  { left:60%; top:22%; opacity:1; }
      45%  { left:60%; top:22%; opacity:1; transform:scale(0.8); }
      48%  { transform:scale(1); }
      70%  { left:35%; top:62%; opacity:1; }
      92%  { left:35%; top:62%; opacity:1; }
      100% { left:20%; top:30%; opacity:0; }
    }

    .keyboard {
      position:absolute; left:0; bottom:14px; width:226px; height:120px; z-index:2;
      transform-style:preserve-3d; transform:rotateX(52deg) rotateZ(-12deg);
      background:linear-gradient(145deg,var(--accent-2),var(--accent-1));
      border-radius:14px; box-shadow:0 26px 44px -8px rgba(0,0,0,0.5);
      display:grid; grid-template-columns:repeat(7,1fr); gap:5px; padding:13px;
      animation:deviceFloat 5.5s ease-in-out infinite; animation-delay:0.25s;
      transition:background var(--theme-speed) ease;
    }
    .key {
      background:rgba(255,255,255,0.88); border-radius:4px;
      box-shadow:0 2px 0 rgba(0,0,0,0.18);
      animation:keyPress 3.2s ease-in-out infinite;
    }
    .key:nth-child(1){ animation-delay:0.1s; }
    .key:nth-child(2){ animation-delay:0.9s; }
    .key:nth-child(3){ animation-delay:1.7s; }
    .key:nth-child(4){ animation-delay:0.5s; }
    .key:nth-child(5){ animation-delay:2.3s; }
    .key:nth-child(6){ animation-delay:1.3s; }
    .key:nth-child(7){ animation-delay:2.9s; }
    .key:nth-child(8){ animation-delay:0.3s; }
    .key:nth-child(9){ animation-delay:1.1s; }
    .key:nth-child(10){ animation-delay:2.5s; }
    .key:nth-child(11){ animation-delay:0.7s; }
    .key:nth-child(12){ animation-delay:1.9s; }
    .key:nth-child(13){ animation-delay:0.2s; }
    .key:nth-child(14){ animation-delay:2.7s; }
    .key:nth-child(n+15){ animation-delay:1.5s; }
    @keyframes keyPress {
      0%,75%,100% { transform:translateY(0) translateZ(0); box-shadow:0 2px 0 rgba(0,0,0,0.18); }
      85%         { transform:translateY(2px) translateZ(-2px); box-shadow:0 0px 0 rgba(0,0,0,0.18); }
    }

    @media(max-width:980px){
      .hero-flex { flex-direction:column; text-align:center; align-items:center; gap:2rem; }
      .hero-text { order:1; width:100%; max-width:680px; flex:none; }
      .hero-visual {
        order:2; flex:none; width:100%; max-width:300px;
        height:260px; overflow:visible; position:relative;
        display:flex; align-items:center; justify-content:center;
      }
      .hero-text .novovert-reveal,
      .hero-text .hero-actions { justify-content:center; }
      .hero-text .theme-selector { align-items:center; }
      .hero-text .theme-cards { justify-content:center; }
      .hero-text .hero-sub { margin:0 auto 2.5rem; }
      .globe-3d { display:none; }
      /* Escalar el device para que quepa en 300×200px */
      .device-3d { width:280px; height:252px; perspective:900px; transform:scale(0.72); transform-origin:center center; }
      .monitor { width:210px; height:138px; left:24px; top:4px; }
      .keyboard { width:148px; height:78px; left:0; bottom:8px; gap:3px; padding:8px; }
    }
    @media(max-width:600px){
      #inicio { padding-top:130px; }
      .hero-title { font-size:clamp(2rem,7.5vw,3rem); }
      .hero-visual { max-width:240px; height:170px; }
      .device-3d { transform:scale(0.58); }
      .monitor { width:172px; height:113px; left:20px; top:3px; }
      .keyboard { width:122px; height:64px; bottom:6px; gap:2px; padding:6px; }
    }
    @media(max-width:420px){
      #inicio { padding-top:110px; }
      .hero-eyebrow { font-size:0.72rem; }
      .hero-title { font-size:clamp(1.8rem,8vw,2.4rem); }
      .hero-sub { font-size:0.95rem; line-height:1.6; }
      .hero-visual { display:none; }
    }

    @media(max-width:900px){
      .cta-banner { flex-direction:column; text-align:center; padding:2.5rem 2rem; }
      .cta-banner-text p { margin:0 auto; }
    }
    @media(max-width:700px){
      .theme-cards { flex-wrap:wrap; gap:0.6rem; }
      .theme-card { min-width:0; flex:1 1 calc(50% - 0.35rem); justify-content:center; padding:0.75rem 0.8rem; }
    }
    @media(max-width:420px){
      .theme-card { flex:1 1 100%; }
    }
    @media(max-width:600px){
      .nav-links { display:none; }
      .hero-actions { flex-direction:column; align-items:center; }
      .btn-primary, .btn-ghost { width:100%; max-width:420px; text-align:center; }
      .final-cta-actions { flex-direction:column; align-items:center; }
    }

    @media(max-width:900px){
      .ihs-model svg { filter: none; }
      .zap-line { animation: none; opacity: 0.6; }
      .sp-line { animation: none; opacity: 0.5; }
    }

    @media(max-width:900px){
      .ihs-model svg { filter:none !important; }
      .zap-line { animation:none; opacity:0.6; }
      .sp-line  { animation:none; opacity:0.5; }
    }
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none !important;transition-duration:0.01ms !important}
    }

    /* ══════════════════════════════════════════════
       IMMERSIVE HERO SHOWCASE — 3 panels, scroll-driven
    ══════════════════════════════════════════════ */
    .ihs-wrap {
      position: relative;
      background: var(--bg-primary);
      transition: background var(--theme-speed) ease;
    }
    /* Track is tall: 3 × 100vh so each panel gets a full viewport of scroll */
    .ihs-track {
      position: relative;
      height: 300vh;
    }
    /* Stage sticks to top while user scrolls through the track */
    .ihs-stage {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: stretch;
    }
    /* Ambient radial glow layer behind everything */
    .ihs-stage::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(ellipse 65% 55% at 72% 50%,
        color-mix(in srgb, var(--accent-1) 7%, transparent) 0%,
        transparent 70%);
      transition: background var(--theme-speed) ease;
    }

    /* ── Progress dots (right edge) ── */
    .ihs-dots {
      position: absolute;
      right: clamp(14px, 2.5vw, 36px);
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 14px;
      z-index: 10;
    }
    .ihs-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(255,255,255,0.18);
      transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    }
    .ihs-dot.active {
      background: var(--accent-1);
      transform: scale(1.6);
      box-shadow: 0 0 12px var(--accent-1);
    }

    /* ── Panel container ── */
    .ihs-panels {
      position: relative;
      width: 100%;
      height: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 5%;
    }

    /* ── Individual panel ── */
    .ihs-panel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3rem;
      padding: 0 5%;
      /* hidden by default */
      opacity: 0;
      pointer-events: none;
      /* model starts deep → zooms in */
      transform: translateZ(-120px) scale(0.88);
      transform-style: preserve-3d;
      perspective: 1200px;
      transition:
        opacity 0.7s cubic-bezier(0.22,1,0.36,1),
        transform 0.8s cubic-bezier(0.22,1,0.36,1);
      will-change: opacity, transform;
      z-index: 2;
    }
    .ihs-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateZ(0) scale(1);
      z-index: 4;
    }
    /* outgoing panel: shrink-away effect */
    .ihs-panel.exit {
      opacity: 0;
      transform: translateZ(80px) scale(1.06);
      z-index: 3;
    }

    /* ── Left text column ── */
    .ihs-text {
      flex: 0 0 420px;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 0;
      z-index: 1;
    }
    .ihs-eyebrow {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent-1);
      margin-bottom: 1.1rem;
      transition: color var(--theme-speed) ease;
    }
    .ihs-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(2.2rem, 4vw, 3.6rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.08;
      margin-bottom: 1.4rem;
      color: var(--text-main);
    }
    .ihs-desc {
      font-size: 1.02rem;
      line-height: 1.78;
      color: var(--text-muted);
      margin-bottom: 2rem;
      transition: color var(--theme-speed) ease;
    }
    .ihs-tag {
      display: inline-block;
      font-size: 0.73rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-1);
      background: color-mix(in srgb, var(--accent-1) 10%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent-1) 28%, transparent);
      padding: 0.45rem 1rem;
      border-radius: 99px;
      transition: color var(--theme-speed) ease, background var(--theme-speed) ease;
    }

    /* ── Right model column ── */
    .ihs-model {
      flex: 1 1 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .ihs-model svg {
      width: min(560px, 50vw);
      height: auto;
      filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent-1) 18%, transparent));
      will-change: transform;
    }

    /* ── Shared CSS animations ── */
    @keyframes ihs-float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-18px); }
    }
    @keyframes ihs-pulse-core {
      0%,100% { opacity: 0.6; r: 5px; }
      50%      { opacity: 1;   r: 8px; }
    }
    @keyframes ihs-glow-ring {
      0%   { stroke-opacity: 0.35; transform: scale(1); }
      50%  { stroke-opacity: 0.6;  transform: scale(1.04); }
      100% { stroke-opacity: 0.35; transform: scale(1); }
    }
    @keyframes ihs-run {
      /* subtle lean oscillation for the runner */
      0%,100% { transform: translateY(0) rotate(-1deg); }
      50%      { transform: translateY(-12px) rotate(1deg); }
    }
    @keyframes ihs-lightning {
      0%,100% { opacity: 1; }
      45%      { opacity: 0.2; }
      50%      { opacity: 0.9; }
      55%      { opacity: 0.15; }
    }
    @keyframes ihs-speedline {
      0%   { stroke-dashoffset: 200; opacity: 0; }
      20%  { opacity: 0.9; }
      100% { stroke-dashoffset: -40; opacity: 0; }
    }
    @keyframes ihs-shield-pulse {
      0%,100% { stroke-opacity: 0.18; transform-origin: center; transform: scale(1); }
      50%      { stroke-opacity: 0.55; transform: scale(1.05); }
    }
    @keyframes ihs-lens-glow {
      0%,100% { stroke-opacity: 0.2; }
      50%      { stroke-opacity: 0.55; }
    }
    @keyframes ihs-smoke {
      0%   { transform: translateY(0) scaleX(1);   opacity: 0; }
      15%  { opacity: 0.4; }
      100% { transform: translateY(-28px) scaleX(1.5); opacity: 0; }
    }
    @keyframes ihs-particle {
      0%   { transform: translateY(0) scale(0.7); opacity: 0; }
      20%  { opacity: 1; }
      80%  { opacity: 1; }
      100% { transform: translateY(-90px) scale(1); opacity: 0; }
    }
    @keyframes ihs-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* runner body bob */
    .runner-figure { animation: ihs-run 0.55s ease-in-out infinite alternate; transform-origin: bottom center; will-change: transform; }
    /* lightning zaps */
    .zap-line { animation: ihs-lightning 2s ease-in-out infinite; will-change: opacity; }
    .zap-line:nth-child(2) { animation-delay: 0.13s; }
    .zap-line:nth-child(3) { animation-delay: 0.26s; }
    /* speed lines */
    .sp-line { stroke-dasharray: 120; animation: ihs-speedline 1.4s linear infinite; }
    .sp-line:nth-child(2) { animation-delay: 0.25s; }
    .sp-line:nth-child(3) { animation-delay: 0.5s; }
    .sp-line:nth-child(4) { animation-delay: 0.75s; }
    .sp-line:nth-child(5) { animation-delay: 1s; }
    /* overall float */
    .ihs-float { animation: ihs-float 5s ease-in-out infinite; will-change: transform; }
    .ihs-float-2 { animation: ihs-float 6.5s ease-in-out infinite 0.8s; }
    /* shield pulse ring */
    .shield-ring-anim { animation: ihs-shield-pulse 2.4s ease-in-out infinite; transform-origin: center; }
    .shield-ring-anim.r2 { animation-delay: 0.6s; }
    /* lens glow */
    .lens-glow-anim { animation: ihs-lens-glow 2.2s ease-in-out infinite; }
    /* smoke */
    .smoke-curl { animation: ihs-smoke 2.8s ease-out infinite; transform-origin: bottom center; }
    .smoke-curl.s2 { animation-delay: 0.9s; }
    /* floating particles */
    .ihs-ptcl { animation: ihs-particle 3s ease-in-out infinite; }
    .ihs-ptcl:nth-child(2) { animation-delay: 1s; }
    .ihs-ptcl:nth-child(3) { animation-delay: 2s; }
    /* spin for magnifier handle tip */
    .orbit-anim { animation: ihs-spin 12s linear infinite; transform-origin: 240px 245px; }

    /* ── responsive ── */
    @media(max-width: 900px) {
      .ihs-track { height: auto; }
      .ihs-stage { position: relative; height: auto; min-height: auto; }
      .ihs-panel {
        position: relative; inset: auto;
        opacity: 1 !important; pointer-events: auto !important;
        transform: none !important;
        flex-direction: column; text-align: center;
        padding: 80px 6% 60px;
        min-height: 100vh;
        align-items: center;
      }
      .ihs-text { flex: none; max-width: 520px; }
      .ihs-model { width: 100%; height: 420px; }
      .ihs-model svg { width: min(420px, 90vw); }
      .ihs-dots { display: none; }
      .ihs-panel.exit { opacity: 0 !important; }
    }