*, *::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;
      --accent-3:     #1A4A8A;
      --shadow-glow:  rgba(0,212,255,0.45);
      --card-hover-border: rgba(0,212,255,0.35);
      --tab-active-bg: rgba(0,212,255,0.07);
      --input-bg: rgba(10,32,64,0.7);
      --theme-speed:  0.45s;
    }
    [data-theme="aurora"] {
      --bg-primary:#0D0A1E; --bg-secondary:#150E2E; --bg-navy:#1A0F3A;
      --accent-1:#A855F7; --accent-2:#EC4899; --accent-3:#7C3AED;
      --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); --card-hover-border: rgba(168,85,247,0.45);
      --tab-active-bg: rgba(168,85,247,0.08); --input-bg: rgba(26,15,58,0.7);
    }
    [data-theme="solstice"] {
      --bg-primary:#0C1208; --bg-secondary:#141F0C; --bg-navy:#1A2A0E;
      --accent-1:#84CC16; --accent-2:#22C55E; --accent-3:#166534;
      --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); --card-hover-border: rgba(132,204,22,0.4);
      --tab-active-bg: rgba(132,204,22,0.07); --input-bg: rgba(20,31,12,0.8);
    }
    [data-theme="dusk"] {
      --bg-primary:#1A0A05; --bg-secondary:#261208; --bg-navy:#331808;
      --accent-1:#FB923C; --accent-2:#F97316; --accent-3:#9A3412;
      --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); --card-hover-border: rgba(251,146,60,0.45);
      --tab-active-bg: rgba(251,146,60,0.08); --input-bg: rgba(38,18,8,0.8);
    }

    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: rgb(7,17,31); 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: rgb(13,10,30); }
    [data-theme="solstice"] nav { background: rgb(12,18,8); }
    [data-theme="dusk"] nav     { background: rgb(26,10,5); }
    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-img { height:34px; width:auto; display:block; }
    .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;
    }
    .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(7, 17, 31, 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: 0.9rem; 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(0,212,255,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:center; justify-content:center;
      text-align:center; min-height:100vh; padding:140px 5% 50px;
      background:var(--gradient-hero); position:relative; z-index:0; overflow:hidden;
      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-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:var(--accent-1); color:var(--bg-primary);
      border:none; border-radius:8px; 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 var(--shadow-glow); transform:translateY(-2px); }
    .btn-ghost {
      padding:0.9rem 2rem; background:transparent; color:var(--text-main);
      border:1px solid var(--border); border-radius:8px;
      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); }

    .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; }

    .faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:0.75rem; }
    .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; }

    @media(max-width:900px){
      #inicio { padding: 120px 1.15rem 42px; }
      .hero-title { font-size: clamp(2rem, 7vw, 3.2rem); }
      .hero-sub { font-size: 1rem; max-width: 100%; }
      .theme-cards { flex-wrap:wrap; gap:0.6rem; }
      .service-card, .tech-highlight-card { max-width:100%; }
      .cta-banner { flex-direction:column; text-align:center; padding:2rem 1.25rem; gap:1.25rem; }
      .cta-banner-text p { margin:0 auto; }
      .tech-item { flex:1 1 calc(50% - 0.5rem); max-width:none; }
    }
    @media(max-width:700px){
      nav {
        padding:0.95rem 1rem;
        justify-content:center;
      }
      .nav-links { display:none; }
      .nav-cta { display:none; }
      .nav-logo { margin:0 auto; }
      .site-menu-toggle { display:flex; }
      .site-menu-panel { display:flex; top: calc(1rem + 4.4rem); }
      .logo-img { height:28px; }
      .theme-card { min-width:0; flex:1 1 calc(50% - 0.35rem); justify-content:center; padding:0.75rem 0.8rem; }
      .hero-actions { flex-direction:column; align-items:stretch; width:100%; }
      .btn-primary, .btn-ghost { width:100%; text-align:center; }
    }
    @media(max-width:600px){
      .section-wrap, .section-wrap-alt, .section-wrap-dark, .final-cta, .page-footer { padding-left:1rem; padding-right:1rem; }
      .section-header { margin-bottom:2rem; }
      .section-title { font-size: clamp(1.55rem, 6.5vw, 2.1rem); }
      .section-sub { font-size:0.95rem; }
      .service-card, .tech-highlight-card, .faq-item { border-radius:14px; }
      .service-card { padding:1.25rem; }
      .final-cta-actions, .cta-banner-actions { flex-direction:column; align-items:stretch; }
      .page-footer { flex-direction:column; align-items:flex-start; }
      .footer-links { flex-wrap:wrap; gap:0.9rem 1.2rem; }
      .faq-q { padding:1rem 1rem; font-size:0.9rem; }
      .faq-a { padding:0 1rem 1rem; font-size:0.85rem; }
      .faq-item.open .faq-a { padding:0 1rem 1rem; }
    }
    @media(max-width:420px){
      #inicio { padding-top:112px; }
      .hero-eyebrow { margin-bottom:1rem; font-size:0.72rem; }
      .hero-title { font-size: clamp(1.85rem, 8vw, 2.45rem); }
      .hero-sub { font-size:0.95rem; line-height:1.6; }
      .theme-card { flex:1 1 100%; }
      .tech-item { flex:1 1 100%; }
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none !important;transition-duration:0.01ms !important}
    }

/* ===== COMPARTIDO PÁGINAS INTERNAS (nosotros / servicios / contacto) ===== */
.page-hero {
  padding: 110px 5% 30px; text-align: center;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(14,165,233,0.08) 0%, transparent 70%), var(--bg-primary);
  transition: background var(--theme-speed) ease; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.04) 0%, transparent 65%);
  animation: breathe 8s ease-in-out infinite; pointer-events: none;
}
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-1); margin-bottom: 1.2rem; transition: color var(--theme-speed) ease;
}
.page-eyebrow span { width: 24px; height: 1px; background: var(--accent-1); display: block; transition: background var(--theme-speed) ease; }
.page-hero h1 {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.2rem;
}
.page-hero p {
  color: var(--text-muted); font-size: 1.1rem; line-height: 1.7;
  max-width: 620px; margin: 0 auto; transition: color var(--theme-speed) ease;
}

/* Curtain reveal: a line opens below the text, grows into a box that
   covers it, then closes back down to unveil it. */
.hero-reveal { position: relative; max-width: 620px; margin: 0 auto; display: inline-block; opacity: 1; }
.hero-reveal p { margin: 0; opacity: 1; color: var(--text-muted); }
.hero-reveal::after {
  content: ''; position: absolute; inset: -8px -14px; width: auto; height: auto;
  background: var(--bg-primary); border-radius: 4px; pointer-events: none; z-index: 2;
  transform-origin: center bottom;
  transform: scaleX(0) scaleY(0.02);
  animation: heroCurtainReveal 1.6s cubic-bezier(0.65,0,0.35,1) 0.4s 1 both;
}
.hero-reveal::before {
  content: ''; position: absolute; left: -14px; right: -14px; bottom: -8px; height: 2px;
  background: var(--accent-1); box-shadow: 0 0 12px var(--accent-1); z-index: 3;
  transform-origin: center bottom; transform: scaleX(0);
  animation: heroLineOpen 1.6s cubic-bezier(0.65,0,0.35,1) 0.4s 1 both;
}
@keyframes heroLineOpen {
  0%   { transform: scaleX(0); opacity: 1; }
  28%  { transform: scaleX(1); opacity: 1; }
  55%  { transform: scaleX(1); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes heroCurtainReveal {
  0%   { transform: scaleX(0)  scaleY(0.02); }
  28%  { transform: scaleX(1)  scaleY(0.02); }
  55%  { transform: scaleX(1)  scaleY(1); }
  100% { transform: scaleX(1)  scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-reveal::after, .hero-reveal::before { animation: none; display: none; }
}
.section-eyebrow span { width: 20px; height: 1px; background: var(--accent-1); display: block; transition: background var(--theme-speed) ease; }
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in-view { opacity: 1; transform: none; }
.stagger-item { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; will-change: opacity, transform; }
.stagger-item.stagger-visible { opacity: 1; transform: translateY(0); }
.btn-ghost.inline { margin-left: 1rem; }
@media (max-width: 600px) { .btn-ghost.inline { margin-left: 0; margin-top: 0.75rem; } }