:root{
    --pink:#FF3D7F;
    --magenta:#C239B3;
    --purple:#8B5CF6;
    --blue:#4A5FE8;
    --gradient:linear-gradient(90deg,#ff134a 5.83%,#335e83 39.89%,#63b2f5 88.37%);
    --gradient-name:linear-gradient(90deg,#ff134a 5.83%,#335e83 39.89%,#63b2f5 88.37%);
    --ink:#14141A;
    --gray-600:#6B7280;
    --gray-400:#9CA3AF;
    --border:#EEF0F3;
    --bg:#FFFFFF;
    --pill:999px;
    --font-display:'Hanken Grotesk',sans-serif;
    --font-ui:'Inter',sans-serif;
    /* Sistema de espaciado unificado */
    --container-max:1300px;
    --space-x:80px;
    --space-y:100px;
    --gap-section:60px;
  }

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

  html{ scroll-behavior:smooth; scroll-padding-top:55px; }
  @media (max-width:768px){ html{ scroll-padding-top:60px; } }
  @media (max-width:480px){ html{ scroll-padding-top:56px; } }

  body{
    font-family:var(--font-ui),system-ui,-apple-system,sans-serif;
    color:var(--ink);
    background:var(--bg);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }
  button{ font:inherit; }

  /* ============ NAVBAR MODERNO ============ */
  .navbar{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:transparent;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;
    padding:16px var(--space-x);
    transition:padding .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .navbar.scrolled{
    padding:10px var(--space-x);
  }
  /* Tema claro: navbar transparente sobre el hero, aparece al hacer scroll */
  .navbar.theme-light{
    background:transparent;
    border-bottom:1px solid transparent;
  }
  .navbar.theme-light.scrolled{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px) saturate(180%);
    -webkit-backdrop-filter:blur(14px) saturate(180%);
    box-shadow:0 4px 24px rgba(0,0,0,.08);
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .navbar.theme-light .nav-item{ color:var(--ink); }
  .navbar.theme-light .nav-item::after{ background:var(--ink); }
  .navbar.theme-light .nav-item:hover{ color:var(--ink); background:transparent; }
  .navbar.theme-light .nav-item.active{ background:transparent; color:var(--ink); }
  .navbar.theme-light .nav-logo{ color:var(--ink); }
  .navbar.theme-light .nav-toggle span,
  .navbar.theme-light .nav-toggle span::before,
  .navbar.theme-light .nav-toggle span::after{ background:var(--ink); }
  /* Tema oscuro (experiencia, explorar) */
  .navbar.theme-dark{
    background:rgba(10,13,18,.85);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .navbar.theme-dark.scrolled{ background:rgba(10,13,18,.95); }
  .navbar.theme-dark .nav-item{ color:rgba(255,255,255,.85); }
  .navbar.theme-dark .nav-item::after{ background:#fff; }
  .navbar.theme-dark .nav-item:hover{ color:#fff; background:transparent; }
  .navbar.theme-dark .nav-item.active{ background:transparent; color:#fff; }
  .navbar.theme-dark .nav-logo{ color:#fff; }
  .navbar.theme-dark .nav-icon{ color:#63b2f5; }
  .navbar.theme-dark .nav-toggle span,
  .navbar.theme-dark .nav-toggle span::before,
  .navbar.theme-dark .nav-toggle span::after{ background:#fff; }
  .navbar.theme-dark{ --nav-panel-bg: rgba(10,13,18,.98); }
  .navbar.theme-light{ --nav-panel-bg: rgba(255,255,255,.98); }
  /* Tema hero: navbar transparente, superpuesto al video oscuro del hero */
  .navbar.theme-hero{
    background:transparent;
    border-bottom:1px solid transparent;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .navbar.theme-hero.scrolled{
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;
    box-shadow:none;
  }
  .navbar.theme-hero .nav-item{ color:rgba(255,255,255,.9); }
  .navbar.theme-hero .nav-item::after{ background:#fff; }
  .navbar.theme-hero .nav-item:hover{ color:#fff; background:transparent; }
  .navbar.theme-hero .nav-item.active{ background:transparent; color:#fff; }
  .navbar.theme-hero .nav-logo{ color:#fff; }
  .navbar.theme-hero .nav-icon{ color:#63b2f5; }
  .navbar.theme-hero .nav-toggle span,
  .navbar.theme-hero .nav-toggle span::before,
  .navbar.theme-hero .nav-toggle span::after{ background:#fff; }
  .navbar.theme-hero{ --nav-panel-bg: rgba(10,10,15,.98); }
  .nav-container{
    display:flex; align-items:center; justify-content:space-between;
    max-width:var(--container-max); margin:0 auto; gap:24px;
  }
  .nav-logo{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-display),sans-serif; font-weight:700;
    font-size:1.25rem; text-decoration:none;
    color:var(--ink);
    flex-shrink:0; transition:transform .3s ease;
  }
  .nav-logo:hover{ transform:scale(1.05); }
  .nav-logo-text{
    max-width:0; overflow:hidden; opacity:0;
    transition:max-width .4s cubic-bezier(.4,0,.2,1), opacity .3s ease .1s;
    white-space:nowrap;
  }
  .nav-logo.visible .nav-logo-text{
    max-width:200px; opacity:1;
  }
  .nav-list{
    display:flex; align-items:center; gap:4px;
    list-style:none; margin:0; padding:0;
  }
  .nav-item{
    display:flex; align-items:center; gap:8px;
    text-decoration:none; font-size:.9rem; font-weight:500;
    color:var(--ink); position:relative;
    padding:8px 16px; border-radius:50px;
    white-space:nowrap; transition:color .3s ease;
  }
  /* Subrayado animado */
  .nav-item::after{
    content:''; position:absolute; bottom:2px; left:16px; right:16px;
    height:2px; background:var(--ink);
    transform:scaleX(0); transform-origin:center;
    transition:transform .3s ease;
    border-radius:2px;
  }
  .nav-icon{ width:18px; height:18px; color:var(--accent); flex-shrink:0; transition:transform .35s ease; }
  .nav-item:hover{
    color:var(--ink); background:transparent;
  }
  .nav-item:hover::after{ transform:scaleX(1); }
  .nav-item:hover .nav-icon{ transform:scale(1.15) rotate(-6deg); }
  .nav-item.active{
    background:transparent; color:var(--ink);
  }
  .nav-item.active::after{ transform:scaleX(1); }
  /* Botón hamburguesa */
  .nav-toggle{
    display:none; background:none; border:none; cursor:pointer;
    width:40px; height:40px; border-radius:10px;
    align-items:center; justify-content:center;
    transition:background .3s ease;
  }
  .nav-toggle:hover{ background:rgba(0,0,0,.05); }
  .nav-toggle span{
    display:block; width:22px; height:2px; background:var(--ink);
    border-radius:2px; transition:all .3s ease;
    position:relative;
  }
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:''; position:absolute; left:0; width:22px; height:2px;
    background:var(--ink); border-radius:2px; transition:all .3s ease;
  }
  .nav-toggle span::before{ top:-7px; }
  .nav-toggle span::after{ top:7px; }
  .nav-toggle.open span{ background:transparent; }
  .nav-toggle.open span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle.open span::after{ top:0; transform:rotate(-45deg); }
  /* Menú móvil overlay */
  .nav-overlay{
    position:fixed; inset:0; z-index:99;
    background:rgba(0,0,0,.4); backdrop-filter:blur(4px);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .nav-overlay.open{ opacity:1; pointer-events:auto; }
  .nav-mobile-header{ display:none; }

  /* ============ TOGGLE DE IDIOMA (dentro del nav-list) ============ */
  .lang-toggle{
    display:inline-flex; align-items:center; gap:4px;
    padding:6px 12px; border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
    border-radius:var(--pill); cursor:pointer;
    font-family:var(--font-ui); font-size:.72rem; font-weight:700;
    letter-spacing:.05em; color:#fff;
    transition:background .3s ease, border-color .3s ease, color .3s ease;
    flex-shrink:0; margin-left:12px;
  }
  .lang-toggle:hover{ background:rgba(99,178,245,.18); border-color:rgba(99,178,245,.5); }
  .lang-toggle-sep{ color:rgba(255,255,255,.3); font-weight:400; transition:color .3s ease; }
  .lang-toggle-inactive{ color:rgba(255,255,255,.4); transition:color .3s ease; }
  .lang-toggle.lang-en .lang-toggle-active{ color:rgba(255,255,255,.4); }
  .lang-toggle.lang-en .lang-toggle-inactive{ color:#fff; }
  /* Tema hero: el nav-list es un drawer oculto, sacar el toggle con position:fixed a la izquierda */
  .navbar.theme-hero .lang-toggle{
    position:fixed; top:22px; left:24px; margin-left:0; z-index:101;
    border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff;
  }
  .navbar.theme-hero .lang-toggle-sep{ color:rgba(255,255,255,.3); }
  .navbar.theme-hero .lang-toggle-inactive{ color:rgba(255,255,255,.4); }
  .navbar.theme-hero .lang-toggle.lang-en .lang-toggle-active{ color:rgba(255,255,255,.4); }
  .navbar.theme-hero .lang-toggle.lang-en .lang-toggle-inactive{ color:#fff; }
  /* Tema dark: texto blanco, fondo oscuro translúcido */
  .navbar.theme-dark .lang-toggle{
    border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.05); color:#fff;
  }
  .navbar.theme-dark .lang-toggle-sep{ color:rgba(255,255,255,.25); }
  .navbar.theme-dark .lang-toggle-inactive{ color:rgba(255,255,255,.35); }
  .navbar.theme-dark .lang-toggle.lang-en .lang-toggle-active{ color:rgba(255,255,255,.35); }
  .navbar.theme-dark .lang-toggle.lang-en .lang-toggle-inactive{ color:#fff; }
  /* Tema light: texto oscuro, fondo claro translúcido */
  .navbar.theme-light .lang-toggle{
    border-color:rgba(0,0,0,.12); background:rgba(0,0,0,.04); color:#1a1a1a;
  }
  .navbar.theme-light .lang-toggle-sep{ color:rgba(0,0,0,.2); }
  .navbar.theme-light .lang-toggle-inactive{ color:rgba(0,0,0,.35); }
  .navbar.theme-light .lang-toggle.lang-en .lang-toggle-active{ color:rgba(0,0,0,.35); }
  .navbar.theme-light .lang-toggle.lang-en .lang-toggle-inactive{ color:#1a1a1a; }
  /* Lang-toggle dentro del drawer del menú (nav-mode-toggle activo) */
  .navbar.nav-mode-toggle .lang-toggle{
    position:relative !important; top:auto !important; left:auto !important;
    margin-left:0; margin-top:16px; width:auto; max-width:200px;
    justify-content:flex-start; padding:12px 16px; font-size:.8rem;
    border-top:1px solid rgba(128,128,128,.15); border-radius:12px;
  }

  /* ============ BOTÓN VOLVER ARRIBA ============ */
  .back-to-top{
    position:fixed; bottom:32px; right:32px; z-index:90;
    width:48px; height:48px; border-radius:50%;
    background:#14141a; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    opacity:0; pointer-events:none;
    transform:translateY(20px) scale(.8);
    transition:opacity .35s ease, transform .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .back-to-top.visible{
    opacity:1; pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  .back-to-top:hover{
    transform:translateY(-4px) scale(1.08);
    background:#4A5FE8;
    box-shadow:0 12px 32px rgba(74,95,232,.5), 0 0 28px rgba(74,95,232,.45), 0 0 60px rgba(74,95,232,.25);
  }
  .back-to-top:active{
    background:#6B7CFF;
    box-shadow:0 0 40px rgba(74,95,232,.7), 0 0 80px rgba(74,95,232,.4);
    animation:backGlow .6s ease-out;
  }
  @keyframes backGlow{
    0%{ box-shadow:0 0 20px rgba(74,95,232,.5), 0 0 40px rgba(74,95,232,.3); }
    50%{ box-shadow:0 0 50px rgba(74,95,232,.9), 0 0 100px rgba(74,95,232,.5); }
    100%{ box-shadow:0 12px 32px rgba(74,95,232,.5), 0 0 28px rgba(74,95,232,.45); }
  }
  .back-to-top svg{ width:20px; height:20px; color:#fff; transition:color .35s ease, filter .35s ease; }
  .back-to-top:hover svg{ filter:drop-shadow(0 0 6px rgba(255,255,255,.8)); }
  /* Anillo pulsante AI */
  .back-to-top::before{
    content:''; position:absolute; inset:-4px; border-radius:50%;
    border:2px solid rgba(74,95,232,.4);
    animation:backPulse 2.5s ease-out infinite;
  }
  @keyframes backPulse{
    0%{ transform:scale(1); opacity:.6; }
    100%{ transform:scale(1.6); opacity:0; }
  }
  /* Barra de progreso de scroll */
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg,#ff134a,#335e83,#63b2f5);
    z-index:101; transition:width .1s ease;
    box-shadow:0 1px 8px rgba(99,178,245,.4);
  }

  /* ============ HERO LAYOUT ============ */
  .hero{
    position:relative; display:grid; grid-template-columns:minmax(0,1fr);
    align-items:center; justify-items:flex-start; gap:24px; max-width:none; margin:0;
    padding:96px var(--space-x) 60px; min-height:100vh;
    overflow:hidden;
  }
  /* Video de fondo a sangre completa */
  .hero-bg-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0; pointer-events:none;
    opacity:.6;
  }
  /* Degradado oscuro en la mitad izquierda para legibilidad del texto */
  .hero-bg-overlay{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, rgba(10,10,15,.88) 0%, rgba(10,10,15,.72) 35%, rgba(10,10,15,.35) 55%, rgba(10,10,15,.05) 75%, transparent 100%);
  }
  /* Fondo con profundidad: degradado blanco→gris claro + nubes suaves con viento */
  .hero::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255,61,127,.06), transparent 60%),
      radial-gradient(ellipse 70% 50% at 80% 70%, rgba(99,178,245,.07), transparent 60%),
      radial-gradient(ellipse 50% 40% at 50% 100%, rgba(139,92,246,.05), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(248,246,248,.10) 50%, rgba(244,241,241,.08) 100%);
  }
  /* Nubes suaves que se mueven como con viento */
  .hero-clouds{
    position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  .hero-clouds::before,
  .hero-clouds::after{
    content:''; position:absolute; width:200%; height:100%;
    top:0; left:-50%;
    background:
      radial-gradient(ellipse 30% 20% at 20% 30%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(ellipse 25% 15% at 60% 50%, rgba(248,246,248,.4), transparent 60%),
      radial-gradient(ellipse 35% 25% at 80% 25%, rgba(255,255,255,.3), transparent 60%),
      radial-gradient(ellipse 20% 12% at 40% 70%, rgba(244,241,241,.35), transparent 60%);
    filter:blur(20px);
    animation:cloudWind 30s linear infinite;
  }
  .hero-clouds::after{
    background:
      radial-gradient(ellipse 25% 18% at 50% 40%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(ellipse 30% 20% at 75% 60%, rgba(248,246,248,.3), transparent 60%),
      radial-gradient(ellipse 20% 15% at 15% 55%, rgba(255,255,255,.25), transparent 60%);
    filter:blur(30px);
    animation:cloudWind 45s linear infinite;
    animation-delay:-10s;
  }
  @keyframes cloudWind{
    from{ transform:translateX(0); }
    to{ transform:translateX(25%); }
  }
  /* Malla de profundidad AI */
  .hero::after{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(99,178,245,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,178,245,.04) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%);
    animation:gridDrift 20s linear infinite;
  }
  @keyframes gridDrift{ from{ background-position:0 0; } to{ background-position:48px 48px; } }

  /* Destellos AI — partículas que parpadean */
  .hero-spark{
    position:absolute; z-index:3; pointer-events:none;
    width:4px; height:4px; border-radius:50%;
    background:radial-gradient(circle, #63b2f5, transparent 70%);
    opacity:0; animation:sparkAI 4s ease-in-out infinite;
  }
  .hero-spark.s1{ top:15%; left:8%; animation-delay:0s; }
  .hero-spark.s2{ top:25%; left:45%; animation-delay:.8s; }
  .hero-spark.s3{ top:60%; left:12%; animation-delay:1.6s; }
  .hero-spark.s4{ top:40%; left:55%; animation-delay:2.2s; }
  .hero-spark.s5{ top:75%; left:35%; animation-delay:1.2s; }
  .hero-spark.s6{ top:20%; left:72%; animation-delay:2.8s; }
  .hero-spark.s7{ top:55%; left:85%; animation-delay:.4s; }
  .hero-spark.s8{ top:85%; left:60%; animation-delay:3.2s; }
  .hero-spark.s9{ top:10%; left:30%; animation-delay:2s; }
  .hero-spark.s10{ top:70%; left:90%; animation-delay:1.5s; }
  .hero-spark.big{ width:6px; height:6px; background:radial-gradient(circle, #ff3d7f, transparent 70%); }
  @keyframes sparkAI{
    0%,100%{ opacity:0; transform:scale(0); }
    40%{ opacity:.9; transform:scale(1); }
    60%{ opacity:.7; transform:scale(1.4); }
  }

  /* Aura glow flotante de profundidad */
  .hero-aura{
    position:absolute; z-index:2; pointer-events:none;
    border-radius:50%; filter:blur(60px); opacity:.5;
  }
  .hero-aura.a1{ width:400px; height:400px; top:-10%; left:10%;
    background:radial-gradient(circle, rgba(255,61,127,.12), transparent 70%);
    animation:blobMove 12s ease-in-out infinite; }
  .hero-aura.a2{ width:350px; height:350px; bottom:-5%; right:5%;
    background:radial-gradient(circle, rgba(99,178,245,.14), transparent 70%);
    animation:blobMove 14s ease-in-out infinite 2s; }
  .hero-aura.a3{ width:280px; height:280px; top:40%; left:50%;
    background:radial-gradient(circle, rgba(139,92,246,.1), transparent 70%);
    animation:blobMove 10s ease-in-out infinite 4s; }

  /* ============ HERO CONTENT ============ */
  .hero-content{
    position:relative; z-index:5;
    padding:0 0 0 0;
    max-width:560px;
    text-align:left;
  }
  .hero-content > *{ opacity:0; animation:fadeUp .75s ease forwards; }
  .greeting{ animation-delay:.05s; }
  .role{ animation-delay:.2s; }
  .description{ animation-delay:.35s; }
  .cta-buttons{ animation-delay:.5s; }
  .stats{ animation-delay:.65s; }

  @keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }

  .greeting{
    font-family:var(--font-display); font-weight:400; color:#fff;
    font-size:clamp(2.4rem,4.6vw,4.1rem); line-height:1.06; letter-spacing:-.01em;
    margin-bottom:22px;
  }
  .greeting .greeting-name{
    font-weight:800; color:#fff;
  }
  .gradient-text{
    background:var(--gradient-name);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }

  .role{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:rgba(255,255,255,.92); margin-bottom:16px; }
  .role .dot{ color:rgba(255,255,255,.4); font-weight:400; margin:0 8px; }

  .description{
    font-size:1.02rem; color:rgba(255,255,255,.7); line-height:1.65;
    max-width:460px; margin-bottom:34px;
  }

  .cta-buttons{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:52px; }

  .btn{
    position:relative; display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px; border-radius:var(--pill);
    font-family:var(--font-ui); font-weight:700; font-size:.98rem;
    text-decoration:none; border:none; cursor:pointer;
    overflow:hidden; isolation:isolate;
    transition:transform .3s ease,box-shadow .3s ease;
  }

  .btn-primary{
    background:linear-gradient(135deg,#e85a8a 0%,#7b8fd6 55%,#5ba8e8 100%);
    color:#fff;
    box-shadow:0 6px 20px rgba(123,143,214,.28),0 2px 8px rgba(232,90,138,.18);
  }
  .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(123,143,214,.35),0 4px 14px rgba(232,90,138,.22);
  }
  .btn-primary:active{ transform:translateY(-1px); }

  .btn-shimmer{
    position:absolute; inset:0 auto 0 -60%; width:45%;
    background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-18deg); transition:left .65s ease;
  }
  .btn-primary:hover .btn-shimmer{ left:130%; }

  .spark{
    position:absolute; width:4px; height:4px; border-radius:50%;
    background:#fff; opacity:0; top:50%; left:50%; pointer-events:none;
  }
  .btn-primary:hover .spark-1{ animation:sparkFly1 .8s ease-out; }
  .btn-primary:hover .spark-2{ animation:sparkFly2 .85s ease-out .06s; }
  .btn-primary:hover .spark-3{ animation:sparkFly3 .75s ease-out .12s; }
  @keyframes sparkFly1{ 0%{opacity:0;top:60%;left:22%;} 35%{opacity:1;} 100%{opacity:0;top:-14%;left:14%;} }
  @keyframes sparkFly2{ 0%{opacity:0;top:55%;left:55%;} 35%{opacity:1;} 100%{opacity:0;top:-18%;left:60%;} }
  @keyframes sparkFly3{ 0%{opacity:0;top:60%;left:82%;} 35%{opacity:1;} 100%{opacity:0;top:-12%;left:88%;} }

  .btn-secondary{ background:#fff; color:var(--ink); border:2px solid #e8d4e0; }
  .btn-secondary:hover{
    background:linear-gradient(135deg,#e85a8a 0%,#7b8fd6 55%,#5ba8e8 100%);
    border-color:transparent; color:#fff; transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(123,143,214,.25);
  }
  .btn-secondary:hover .icon-sparkle{ animation:sparkleSpin .55s ease; }
  @keyframes sparkleSpin{ from{ transform:rotate(0) scale(1); } 50%{ transform:rotate(140deg) scale(1.3); } to{ transform:rotate(180deg) scale(1); } }

  /* CTA Conversemos — gradiente de marca vivo, más intenso que el primary suave */
  .btn-tertiary{
    background:linear-gradient(135deg,#ff134a 0%,#ff4d7e 45%,#63b2f5 100%);
    color:#fff;
    box-shadow:0 6px 20px rgba(255,19,74,.32),0 2px 8px rgba(99,178,245,.2);
  }
  .btn-tertiary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(255,19,74,.4),0 4px 14px rgba(99,178,245,.28);
  }
  .btn-tertiary:active{ transform:translateY(-1px); }
  .btn-tertiary:hover .btn-shimmer{ left:130%; }
  .btn-tertiary:hover .spark-1{ animation:sparkFly1 .8s ease-out; }
  .btn-tertiary:hover .spark-2{ animation:sparkFly2 .85s ease-out .06s; }
  .btn-tertiary:hover .spark-3{ animation:sparkFly3 .75s ease-out .12s; }

  .stats{ display:flex; gap:44px; }
  .stat{ display:flex; flex-direction:column; gap:4px; }
  .stat-number{
    font-family:var(--font-ui); font-weight:800; font-size:2.1rem;
    background:linear-gradient(135deg,#fff,#c8c8d0,#9CA3AF); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .stat-label{ font-family:var(--font-ui); font-size:.74rem; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.5); }

  /* ============ HERO VISUAL (video de fondo) ============ */
  @keyframes blobMove{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(18px,-16px) scale(1.06); } }

  .scroll-down{
    grid-column:1/-1; justify-self:center; position:relative; z-index:5;
    display:flex; align-items:center; justify-content:center;
    width:60px; height:60px; border-radius:50%; background:#fff; border:none;
    color:var(--accent); cursor:pointer;
    box-shadow:0 10px 26px rgba(74,95,232,.3);
    margin-top:20px; position:relative;
    transition:transform .3s ease;
  }
  .scroll-down:hover{ transform:translateY(4px); }
  .pulse-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); animation:pulseRing 2.2s ease-out infinite; }
  @keyframes pulseRing{ 0%{ transform:scale(1); opacity:.75; } 100%{ transform:scale(1.9); opacity:0; } }

  /* ============ SECCIÓN EXPERIENCIA (Figma nodo 688:39) ============ */
  .showcase{
    position:relative; overflow:hidden;
    background:linear-gradient(180deg, #000 0%, #494646 100%);
    padding:100px var(--space-x);
    min-height:640px;
    display:grid; grid-template-columns:4fr 6fr; align-items:center; gap:48px;
    max-width:none;
  }
  /* Glow sutil que aporta profundidad */
  .showcase::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 60% 80% at 30% 50%, rgba(255,255,255,.04), transparent 70%);
  }
  @keyframes showcaseGlow{
    0%,100%{ transform:translate(0,0); opacity:.5; }
    50%{ transform:translate(40%, 20%); opacity:.9; }
  }
  .showcase::after{
    content:''; position:absolute; top:-20%; left:-10%; width:50%; height:120%;
    background:radial-gradient(circle, rgba(255,61,127,.08), transparent 60%);
    filter:blur(50px); z-index:0; pointer-events:none;
    animation:showcaseGlow 14s ease-in-out infinite;
  }

  /* --- Imagen interactiva del celular (30% izquierda) --- */
  .showcase-visual{
    position:relative; z-index:2;
    perspective:900px;
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    opacity:0; animation:fadeUp .8s ease .35s forwards;
  }
  .showcase-image-wrap{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform .15s ease-out;
    will-change:transform;
    animation:showcaseFloat 6s ease-in-out infinite;
  }
  @keyframes showcaseFloat{
    0%,100%{ transform:translateY(0) rotateZ(0); }
    50%{ transform:translateY(-14px) rotateZ(.5deg); }
  }
  .showcase-image-wrap img,
  .showcase-image-wrap video{
    display:block; width:100%; height:auto;
    border-radius:60px;
    box-shadow:
      0 30px 60px rgba(0,0,0,.6),
      0 0 0 1px rgba(255,255,255,.08),
      0 0 80px rgba(255,61,127,.15);
    transform:translateZ(40px);
  }
  .showcase-image-wrap video{
    object-fit:cover; aspect-ratio:9/16;
    background:#0a0a0f;
  }

  /* ============ VISUALIZACIÓN INTERACTIVA "MI ENFOQUE" ============ */
  .enfoque-viz{
    position:relative; width:100%; height:100%;
    min-height:500px;
    background:transparent;
    border-radius:0; overflow:visible;
    box-shadow:none;
    transform:translateZ(50px);
    cursor:pointer;
  }
  .enfoque-layer{
    position:absolute; inset:0; width:100%; height:100%;
    transition:opacity .6s ease, transform .6s ease;
    display:flex; align-items:center; justify-content:center;
  }
  .enfoque-holistica{ opacity:1; transform:scale(1); }
  .enfoque-heuristicas{ opacity:0; transform:scale(.92); pointer-events:none; }
  .enfoque-viz.mode-heuristicas .enfoque-holistica{ opacity:0; transform:scale(.92); pointer-events:none; }
  .enfoque-viz.mode-heuristicas .enfoque-heuristicas{ opacity:1; transform:scale(1); pointer-events:auto; }

  /* Pulsado secuencial de conexiones holísticas */
  .hol-link{ stroke-opacity:.12; animation:holLinkPulse 6s ease-in-out infinite; }
  .hol-link.l1{ animation-delay:0s; }
  .hol-link.l2{ animation-delay:.5s; }
  .hol-link.l3{ animation-delay:1s; }
  .hol-link.l4{ animation-delay:1.5s; }
  .hol-link.l5{ animation-delay:2s; }
  .hol-link.l6{ animation-delay:2.5s; }
  @keyframes holLinkPulse{
    0%,100%{ stroke-opacity:.12; }
    20%,40%{ stroke-opacity:.95; }
  }
  .hol-node circle{ transition:transform .3s ease, filter .3s ease; transform-origin:center; transform-box:fill-box; }
  .hol-node{ animation:holNodeFloat 5s ease-in-out infinite; }
  .hol-node.n2{ animation-delay:.4s; } .hol-node.n3{ animation-delay:.8s; }
  .hol-node.n4{ animation-delay:1.2s; } .hol-node.n5{ animation-delay:1.6s; } .hol-node.n6{ animation-delay:2s; }
  @keyframes holNodeFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-4px); }
  }

  /* Heurísticas: hover revela nombre */
  .heur-node{ cursor:pointer; }
  .heur-node circle{ transition:r .25s ease, fill .25s ease, stroke-width .25s ease; }
  .heur-node:hover circle, .heur-node.is-active circle{
    r:30; fill:rgba(99,178,245,.40); stroke-width:2.5;
  }
  .heur-links line{ transition:stroke .3s ease, stroke-opacity .3s ease; }
  .heur-node:hover ~ .heur-links line,
  .heur-node.is-active ~ .heur-links line{ stroke:#63b2f5; stroke-opacity:.6; }

  /* Panel de detalle */
  .enfoque-detalle{
    position:absolute; left:50%; bottom:16px; transform:translateX(-50%) translateZ(70px);
    width:90%; min-height:48px; padding:10px 18px;
    background:rgba(10,10,15,.6); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.1); border-radius:16px;
    font-family:var(--font-ui); font-size:.88rem; line-height:1.4;
    color:rgba(255,255,255,.95); text-align:center;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .enfoque-detalle-num{
    display:inline-block; min-width:22px; margin-right:8px;
    font-weight:700; color:#63b2f5; font-size:1rem;
  }

  /* Toggle para alternar modelos */
  .enfoque-toggle{
    position:absolute; left:50%; top:16px; transform:translateX(-50%) translateZ(80px);
    display:inline-flex; align-items:center; gap:9px;
    padding:9px 18px; border:1px solid rgba(255,255,255,.18);
    background:rgba(10,10,15,.55); backdrop-filter:blur(12px);
    border-radius:var(--pill); color:#fff; cursor:pointer;
    font-family:var(--font-ui); font-size:.82rem; font-weight:600; letter-spacing:.04em;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .enfoque-toggle:hover{ background:rgba(99,178,245,.20); border-color:rgba(99,178,245,.55); transform:translateX(-50%) translateY(-2px) translateZ(80px); }
  .enfoque-toggle-dot{
    width:10px; height:10px; border-radius:50%;
    background:linear-gradient(135deg,#FF3D7F,#63b2f5);
    box-shadow:0 0 10px rgba(99,178,245,.7);
  }
  .enfoque-viz.mode-heuristicas .enfoque-toggle-dot{ background:linear-gradient(135deg,#63b2f5,#8B5CF6); }

  @media (prefers-reduced-motion:reduce){
    .hol-link, .hol-node, .hol-particle, .enfoque-layer{ animation:none !important; transition:opacity .2s ease !important; }
  }
  /* Reflejo de luz desactivado (sin marco) */
  .showcase-image-wrap::before{ display:none; }
  /* Glow detrás del celular */
  .showcase-image-glow{
    position:absolute; inset:-60px;
    background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(99,178,245,.22), rgba(139,92,246,.10) 40%, transparent 70%);
    filter:blur(60px); z-index:-1;
    transform:translateZ(-60px);
    pointer-events:none;
    animation:showcaseGlowPulse 8s ease-in-out infinite;
  }
  @keyframes showcaseGlowPulse{
    0%,100%{ opacity:.6; transform:translateZ(-60px) scale(1); }
    50%{ opacity:1; transform:translateZ(-60px) scale(1.08); }
  }
  /* Reflejo inferior desactivado (sin marco) */
  .showcase-image-wrap::after{ display:none; }

  /* --- Contenido textual (70% derecha) --- */
  .showcase-content{ position:relative; z-index:2; }
  .showcase-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-ui); font-size:.78rem; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:#9CA3AF;
    padding:7px 16px; border-radius:var(--pill);
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    margin-bottom:24px;
    opacity:0; animation:fadeUp .7s ease .1s forwards;
  }
  .showcase-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); }
  .showcase-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(2.4rem,4.5vw,3.6rem); line-height:1.1; letter-spacing:-.01em;
    color:#fff; margin-bottom:8px;
    opacity:0; animation:fadeUp .7s ease .2s forwards;
  }
  .showcase-title .gradient-text{
    background:var(--gradient-name);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .showcase-subtitle{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.4rem,2.5vw,2.1rem); line-height:1.2; color:#fff;
    margin-bottom:20px;
    opacity:0; animation:fadeUp .7s ease .3s forwards;
  }
  .showcase-highlight{
    font-family:var(--font-display); font-weight:700;
    font-size:1rem; line-height:1.5; color:#fff; margin-bottom:16px;
    opacity:0; animation:fadeUp .7s ease .4s forwards;
  }
  .showcase-desc{
    font-family:var(--font-ui); font-size:1.02rem; line-height:1.65;
    color:#C4C4C8; max-width:620px;
    opacity:0; animation:fadeUp .7s ease .5s forwards;
  }

  /* ============ SECCIÓN EXPERIENCIA TRAYECTORIA (Figma nodo 761:1442) ============ */
  .exp-trayectoria{
    position:relative; width:100%; margin:0; padding:0;
    display:grid; grid-template-columns:50% 50%;
    overflow:hidden;
  }
  /* Lado izquierdo: panel oscuro con contenido */
  .exp-left{
    position:relative;
    background:linear-gradient(180deg, #000 0%, #494646 100%);
    padding:100px var(--space-x) 120px;
    z-index:2;
  }
  /* Lado derecho: fondo claro con imagen central */
  .exp-right{
    position:relative;
    background:linear-gradient(180deg, #fff 0%, #f4f1f1 100%);
    padding:100px var(--space-x) 120px;
    display:flex; align-items:flex-start; justify-content:flex-start;
    min-height:600px;
    overflow:hidden;
  }
  .exp-right-content{ max-width:560px; }
  .exp-right-eyebrow{
    display:inline-block; font-family:var(--font-ui); font-size:.75rem;
    font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:#ff134a; margin-bottom:12px;
  }
  .exp-right-title{
    font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(2rem,3.5vw,3rem); line-height:1; margin:0 0 8px;
    color:#1a1a1a;
  }
  .exp-right-subtitle{
    font-family:var(--font-display),sans-serif; font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem); line-height:1.15;
    color:rgba(26,26,26,.6); margin:0 0 36px;
  }
  .exp-right-creed{
    font-family:var(--font-ui); font-size:1rem; line-height:1.7;
    color:#444; margin:0 0 16px;
  }
  .exp-right-highlights{ display:flex; flex-direction:column; gap:24px; }
  .exp-highlight-item{
    display:flex; gap:16px; align-items:flex-start;
    padding:18px 20px; border-radius:16px;
    background:rgba(255,255,255,.6); backdrop-filter:blur(8px);
    border:1px solid rgba(0,0,0,.06);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .exp-highlight-item:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
  }
  .exp-highlight-icon{
    flex-shrink:0; width:40px; height:40px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,rgba(255,61,127,.15),rgba(99,178,245,.15));
    color:#335e83;
  }
  .exp-highlight-icon svg{ width:20px; height:20px; }
  .exp-highlight-body{ display:flex; flex-direction:column; gap:4px; }
  .exp-highlight-body strong{
    font-family:var(--font-display),sans-serif; font-weight:700;
    font-size:.98rem; color:#1a1a1a; line-height:1.3;
  }
  .exp-highlight-body span{
    font-family:var(--font-display),sans-serif; font-weight:400;
    font-size:.9rem; line-height:1.5; color:#666;
  }
  /* Títulos lado izquierdo */
  .exp-title{
    font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(2rem,3.5vw,3rem); line-height:1; margin:0 0 8px;
    color:#fff;
  }
  .exp-subtitle{
    font-family:var(--font-display),sans-serif; font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem); line-height:1.15;
    color:rgba(255,255,255,.7); margin:0 0 48px;
  }

  /* Línea de tiempo (lado izquierdo) */
  .exp-timeline{ position:relative; padding-left:0; }
  .exp-milestone{
    position:relative; display:flex; gap:20px; margin-bottom:40px;
  }
  .exp-milestone:last-child{ margin-bottom:0; }
  .exp-milestone-marker{
    flex-shrink:0; display:flex; flex-direction:column; align-items:center;
    padding-top:4px;
  }
  .exp-milestone-dot{
    width:14px; height:14px; border-radius:50%;
    background:linear-gradient(135deg,#FF3D7F,#63b2f5);
    box-shadow:0 0 12px rgba(99,178,245,.5);
    flex-shrink:0;
  }
  .exp-milestone:not(:last-child) .exp-milestone-marker::after{
    content:''; width:2px; flex:1; margin-top:6px;
    background:linear-gradient(180deg,rgba(99,178,245,.4),rgba(99,178,245,.05));
    min-height:60px;
  }
  .exp-milestone-body{ flex:1; }
  .exp-milestone-year{
    display:inline-block; font-family:var(--font-ui); font-size:.75rem;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:#63b2f5; margin-bottom:6px;
  }
  .exp-milestone-title{
    font-family:var(--font-display),sans-serif; font-weight:700;
    font-size:1.15rem; color:#fff; margin:0 0 8px; line-height:1.3;
  }
  .exp-milestone-text{
    font-family:var(--font-display),sans-serif; font-weight:400;
    font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.75);
    margin:0; max-width:480px;
  }
  /* ============ SECCIÓN EXPLORAR (Figma nodo 688:128) ============ */
  .explorar{
    position:relative; width:100%; margin:0; padding:60px var(--space-x) 120px;
    background:linear-gradient(180deg, #0a0a0f 0%, #151521 40%, #0d0d18 70%, #0a0a0f 100%);
    overflow:hidden;
  }
  /* Fondo con glows animados — mismo estilo que feedback */
  .explorar-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  .explorar-bg::before{
    content:''; position:absolute; top:10%; left:5%; width:500px; height:500px;
    background:radial-gradient(circle, rgba(99,178,245,.1), transparent 70%);
    filter:blur(80px); animation:feedbackGlow1 8s ease-in-out infinite alternate;
  }
  .explorar-bg::after{
    content:''; position:absolute; bottom:5%; right:10%; width:450px; height:450px;
    background:radial-gradient(circle, rgba(255,19,74,.08), transparent 70%);
    filter:blur(80px); animation:feedbackGlow2 10s ease-in-out infinite alternate;
  }
  /* Capas de aurora boreal animadas */
  .explorar-aurora{
    position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  .explorar-aurora::before,
  .explorar-aurora::after{
    content:''; position:absolute; width:200%; height:100%;
    top:0; left:-50%;
    background:
      radial-gradient(ellipse 40% 60% at 30% 40%, rgba(99,178,245,.15), transparent 50%),
      radial-gradient(ellipse 35% 50% at 70% 60%, rgba(50,200,150,.1), transparent 50%);
    filter:blur(40px);
    animation:auroraDrift 18s ease-in-out infinite alternate;
  }
  .explorar-aurora::after{
    background:
      radial-gradient(ellipse 30% 50% at 60% 30%, rgba(139,92,246,.12), transparent 50%),
      radial-gradient(ellipse 40% 60% at 20% 70%, rgba(255,61,127,.08), transparent 50%);
    animation:auroraDrift 22s ease-in-out infinite alternate-reverse;
    animation-delay:-3s;
  }
  @keyframes auroraDrift{
    0%{ transform:translateX(-10%) skewX(-5deg); }
    100%{ transform:translateX(10%) skewX(5deg); }
  }
  /* Malla de profundidad AI sutil sobre el boreal */
  .explorar-grid-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(99,178,245,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,178,245,.04) 1px, transparent 1px);
    background-size:50px 50px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%);
    animation:gridDrift 25s linear infinite;
  }
  /* Destellos AI */
  .explorar-spark{
    position:absolute; z-index:1; pointer-events:none;
    width:4px; height:4px; border-radius:50%;
    background:radial-gradient(circle, #63b2f5, transparent 70%);
    opacity:0; animation:sparkAI 5s ease-in-out infinite;
  }
  .explorar-spark.es1{ top:10%; left:15%; animation-delay:0s; }
  .explorar-spark.es2{ top:20%; left:80%; animation-delay:.8s; }
  .explorar-spark.es3{ top:50%; left:5%; animation-delay:1.6s; }
  .explorar-spark.es4{ top:70%; left:90%; animation-delay:2.2s; }
  .explorar-spark.es5{ top:85%; left:40%; animation-delay:1.2s; }
  .explorar-spark.es6{ top:30%; left:50%; animation-delay:2.8s; }
  .explorar-spark.big{ width:6px; height:6px; background:radial-gradient(circle, #ff3d7f, transparent 70%); }

  /* Layout moderno: título izquierda, cards derecha — grilla fluida con minmax */
  .explorar-layout{
    position:relative; z-index:2;
    display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,2.5fr); gap:48px;
    max-width:var(--container-max); margin:0 auto; align-items:start;
  }
  .explorar-header{ position:relative; top:0; text-align:left; z-index:3; }
  .explorar-title{
    font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0;
    display:flex; flex-direction:column; gap:0;
    text-transform:uppercase;
  }
  .explorar-title .gradient-text{
    color:#fff;
    -webkit-text-fill-color:#fff;
    font-size:clamp(2.025rem,calc(4.6vw - 0.375rem),3.725rem);
    line-height:1.06; letter-spacing:-.01em;
  }
  .explorar-title .white-text {
    display: block;
    font-size: 45px;
    font-weight: 100;
    color: #fff;
    margin-top: 0px;
  }
  .explorar-subtitle {
    font-family: var(--font-display), sans-serif;
    font-weight: 100;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .55);
    margin: 6px 0 0;
    line-height: 1.4;
    color: white;
  }
  /* Grid de proyectos — grilla fluida responsive con auto-fit */
  .explorar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
  .exp-card{
    position:relative; background:rgba(10,13,18,.65);
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px; overflow:hidden;
    display:flex; flex-direction:column;
    width:100%; max-width:100%; min-height:480px;
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    backdrop-filter:blur(10px);
  }
  .exp-card:hover{
    transform:translateY(-10px);
    box-shadow:0 24px 50px rgba(0,0,0,.4),0 0 24px rgba(99,178,245,.2);
    border-color:rgba(99,178,245,.3);
  }
  /* Glow AI en hover */
  .exp-card::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(circle 200px at var(--cmx,50%) var(--cmy,50%), rgba(99,178,245,.1), transparent 60%);
    opacity:0; transition:opacity .4s ease;
  }
  .exp-card:hover::before{ opacity:1; }
  /* Imagen: 593×245 en Figma → aspect-ratio ~2.42:1 */
  .exp-card-image{
    position:relative; width:100%; height:245px; overflow:hidden;
    border-radius:24px 24px 0 0; flex-shrink:0;
  }
  .exp-card-image img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .6s ease;
  }
  .exp-card:hover .exp-card-image img{ transform:scale(1.06); }
  /* Body: padding 24px según Figma */
  .exp-card-body{
    position:relative; z-index:1; padding:24px 24px;
    display:flex; flex-direction:column; flex:1;
  }
  /* Jerarquía: logo → título → descripción → separador → link derecho */
  .exp-card-logo{
    display:block; height:27px; width:auto; max-width:140px;
    object-fit:contain; object-position:left center;
    opacity:.9; margin:0 0 16px; align-self:flex-start;
  }
  .exp-card-title{
    font-family:var(--font-display),sans-serif; font-weight:700;
    font-size:1.35rem; color:#fff; margin:0 0 16px; line-height:1.25;
  }
  .exp-card-desc{
    font-family:var(--font-display),sans-serif; font-weight:400;
    font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.65); margin:0;
    min-height:66px; max-height:88px; overflow:hidden;
  }
  /* Separador + link alineado a la derecha según Figma */
  .exp-card-separator{
    height:1px; background:rgba(255,255,255,.1); margin:18px 0 14px;
  }
  .exp-card-link{
    display:flex; align-items:center; justify-content:flex-end; gap:12px;
    font-family:var(--font-display),sans-serif; font-weight:600;
    font-size:.95rem; color:#fff; text-decoration:none;
    transition:gap .3s ease, color .3s ease;
  }
  .exp-card-link:hover{ color:rgba(255,255,255,.6); }
  .exp-card-link-circle{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    transition:all .4s cubic-bezier(.4,0,.2,1);
    flex-shrink:0;
  }
  .exp-card-link:hover .exp-card-link-circle{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.25);
    box-shadow:0 4px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .exp-card-link-circle svg{
    width:14px; height:14px; color:rgba(255,255,255,.7);
    transition:transform .4s cubic-bezier(.4,0,.2,1), color .4s ease;
  }
  .exp-card-link:hover .exp-card-link-circle svg{
    transform:rotate(-45deg);
    color:rgba(255,255,255,.95);
  }
  /* Link final */
  .explorar-footer{
    position:relative; z-index:2; text-align:center; margin-top:56px;
    display:none;
  }
  /* Wrapper con scroll propio en todas las vistas — las flechas lo navegan */
  .explorar-grid-wrapper{
    max-height:70vh;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:8px;
    scrollbar-width:thin;
    scrollbar-color:rgba(99,178,245,.4) transparent;
    overscroll-behavior:contain;
  }
  .explorar-grid-wrapper::-webkit-scrollbar{ width:6px; }
  .explorar-grid-wrapper::-webkit-scrollbar-track{ background:transparent; }
  .explorar-grid-wrapper::-webkit-scrollbar-thumb{
    background:rgba(99,178,245,.3); border-radius:3px;
  }
  .explorar-grid-wrapper::-webkit-scrollbar-thumb:hover{
    background:rgba(99,178,245,.5);
  }
  /* ============ DESKTOP ONLY: header fijo + grid con scroll ============ */
  @media (min-width:1025px){
    .explorar-header{
      position:sticky; top:0;
      align-self:start;
      height:calc(100vh - 120px);
      display:flex; flex-direction:column;
    }
    .explorar-grid-wrapper{
      max-height:calc(100vh - 120px);
    }
  }
  .explorar-all-link{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-display),sans-serif; font-weight:600;
    font-size:1.05rem; color:#fff; text-decoration:none;
    padding:14px 32px; border-radius:50px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.04);
    transition:all .3s ease;
    cursor:pointer; font-family:inherit;
  }
  .explorar-all-link:hover{
    background:linear-gradient(90deg,#ff134a,#63b2f5);
    border-color:transparent; transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(99,178,245,.3);
  }
  .explorar-all-link svg{ transition:transform .3s ease; }
  .explorar-all-link:hover svg{ transform:translateX(5px); }

  /* Controles de navegación del grid — visibles en todas las vistas */
  .explorar-controls{
    display:flex; align-items:center; gap:12px;
    justify-content:flex-end;
    margin-top:16px;
  }
  .explorar-controls-label{
    font-family:var(--font-ui); font-size:.85rem; font-weight:600;
    color:rgba(255,255,255,.6); letter-spacing:.05em;
  }
  .explorar-arrow{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.7);
    cursor:pointer; transition:all .3s ease;
  }
  .explorar-arrow:hover:not(:disabled){
    background:linear-gradient(135deg,#ff134a,#63b2f5);
    border-color:transparent; color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(99,178,245,.25);
  }
  .explorar-arrow:disabled{
    opacity:.25; cursor:not-allowed;
  }
  /* Ocultar el footer en todas las vistas — las flechas cubren la función */
  .explorar-footer{ display:none; }
  @media (min-width:1025px){
    .explorar-controls{
      position:absolute; bottom:46px; right:-30px;
      margin-top:30px;
      justify-content:flex-start;
    }
  }

  /* ============ FOCO DE TECLADO ============ */
  a:focus-visible,button:focus-visible{ outline:3px solid var(--purple); outline-offset:3px; border-radius:8px; }

  /* ============ TOGGLE HERO: líneas limpias con gradiente de marca ============ */
  .navbar.nav-mode-toggle .nav-toggle{
    --tg-x:0px; --tg-y:0px; --tg-s:1;
    position:relative; display:flex;
    align-items:center; justify-content:center;
    width:48px; height:40px; border-radius:0;
    background:transparent; border:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:none; overflow:visible; cursor:pointer;
    transform:translate(var(--tg-x),var(--tg-y)) scale(var(--tg-s));
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .navbar.nav-mode-toggle .nav-toggle:hover{ --tg-s:1.1; }
  .navbar.nav-mode-toggle .nav-toggle:focus-visible{ outline:none; }
  /* Dos líneas grandes, blanco puro — morph directo a X */
  .navbar.nav-mode-toggle .nav-toggle{
    width:52px; height:44px;
  }
  .navbar.nav-mode-toggle .nav-toggle span{
    display:block; width:40px; height:3px; position:relative;
    background:transparent;
    border-radius:3px; transition:all .38s cubic-bezier(.4,0,.2,1);
  }
  .navbar.nav-mode-toggle .nav-toggle span::before,
  .navbar.nav-mode-toggle .nav-toggle span::after{
    content:''; position:absolute; left:0; width:40px; height:3px;
    background:#fff;
    border-radius:3px; transition:all .38s cubic-bezier(.4,0,.2,1);
  }
  .navbar.nav-mode-toggle .nav-toggle span::before{ top:-6px; }
  .navbar.nav-mode-toggle .nav-toggle span::after{ top:6px; }
  /* Estado abierto: las dos líneas rotan a X */
  .navbar.nav-mode-toggle .nav-toggle.open span::before{ top:0; transform:rotate(45deg); }
  .navbar.nav-mode-toggle .nav-toggle.open span::after{ top:0; transform:rotate(-45deg); }
  @media (prefers-reduced-motion:reduce){
    .navbar.nav-mode-toggle .nav-toggle{ transition:none; }
  }
  /* ============ DRAWER HERO FULL-WIDTH (estilo Awwards) ============ */
  .navbar.nav-mode-toggle .nav-list{
    position:fixed; top:0; right:0; left:0; width:100%; height:100vh;
    height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    background:var(--nav-panel-bg, rgba(8,9,14,.98));
    backdrop-filter:blur(28px) saturate(140%);
    -webkit-backdrop-filter:blur(28px) saturate(140%);
    padding:0;
    box-shadow:none;
    transform:translateY(-100%);
    transition:none;
    overflow-y:auto;
    opacity:0;
    pointer-events:none;
  }
  /* Activar transiciones solo después de que el JS se ejecute */
  .navbar.nav-ready.nav-mode-toggle .nav-list{
    transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  }
  .navbar.nav-mode-toggle .nav-list.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .navbar.nav-mode-toggle .nav-mobile-header{
    display:flex; align-items:center; justify-content:flex-end;
    width:100%; padding:22px var(--space-x,40px);
    flex-shrink:0;
  }
  .navbar.nav-mode-toggle .nav-mobile-logo{
    display:none;
  }
  .navbar.nav-mode-toggle .nav-close{
    position:relative; display:flex;
    align-items:center; justify-content:center;
    width:52px; height:44px; border-radius:0;
    background:transparent; border:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:none; overflow:visible; cursor:pointer;
    transition:transform .3s ease;
  }
  .navbar.nav-mode-toggle .nav-close:hover{ transform:scale(1.1); }
  .navbar.nav-mode-toggle .nav-close span{
    display:block; width:40px; height:3px; position:relative;
    background:transparent;
    border-radius:3px;
  }
  .navbar.nav-mode-toggle .nav-close span::before,
  .navbar.nav-mode-toggle .nav-close span::after{
    content:''; position:absolute; left:0; width:40px; height:3px;
    background:#fff; border-radius:3px;
    top:0;
  }
  .navbar.nav-mode-toggle .nav-close span::before{ transform:rotate(45deg); }
  .navbar.nav-mode-toggle .nav-close span::after{ transform:rotate(-45deg); }
  /* Contenedor de items — lista generosa tipo portafolio premiado */
  .navbar.nav-mode-toggle .nav-list.open > .nav-item,
  .navbar.nav-mode-toggle .nav-list.open > .lang-toggle{
    opacity:0; transform:translateY(18px);
    animation:navItemIn .6s cubic-bezier(.16,1,.3,1) forwards;
  }
  .navbar.nav-mode-toggle .nav-list.open > .nav-item:nth-child(2){ animation-delay:.08s; }
  .navbar.nav-mode-toggle .nav-list.open > .nav-item:nth-child(3){ animation-delay:.14s; }
  .navbar.nav-mode-toggle .nav-list.open > .nav-item:nth-child(4){ animation-delay:.20s; }
  .navbar.nav-mode-toggle .nav-list.open > .nav-item:nth-child(5){ animation-delay:.26s; }
  .navbar.nav-mode-toggle .nav-list.open > .nav-item:nth-child(6){ animation-delay:.32s; }
  .navbar.nav-mode-toggle .nav-list.open > .nav-item:nth-child(7){ animation-delay:.38s; }
  .navbar.nav-mode-toggle .nav-list.open > .lang-toggle{ animation-delay:.44s; }
  @keyframes navItemIn{
    to{ opacity:1; transform:translateY(0); }
  }
  .navbar.nav-mode-toggle .nav-item{
    width:100%;
    padding:22px var(--space-x,40px);
    border-radius:0;
    font-size:clamp(1.4rem,4.5vw,2.4rem);
    font-weight:600;
    letter-spacing:-.01em;
    line-height:1.15;
    color:rgba(255,255,255,.92);
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:color .3s ease, padding-left .35s cubic-bezier(.16,1,.3,1), background .3s ease;
    display:flex; align-items:center; gap:18px;
  }
  .navbar.nav-mode-toggle .nav-item .nav-icon{
    width:clamp(22px,3.2vw,30px); height:clamp(22px,3.2vw,30px);
    color:rgba(99,178,245,.85);
    transition:transform .4s cubic-bezier(.16,1,.3,1), color .3s ease;
  }
  .navbar.nav-mode-toggle .nav-item:hover{
    padding-left:calc(var(--space-x,40px) + 14px);
    color:#fff;
  }
  .navbar.nav-mode-toggle .nav-item:hover .nav-icon{
    transform:scale(1.12) rotate(-4deg);
    color:#63b2f5;
  }
  .navbar.nav-mode-toggle .nav-item::after{ display:none; }
  .navbar.nav-mode-toggle .nav-item.active{
    color:#fff;
  }
  .navbar.nav-mode-toggle .nav-item.active .nav-icon{ color:#63b2f5; }
  /* Tema claro (secciones con background blanco): iconos y textos oscuros */
  .navbar.theme-light.nav-mode-toggle .nav-toggle span::before,
  .navbar.theme-light.nav-mode-toggle .nav-toggle span::after{ background:var(--ink); }
  .navbar.theme-light.nav-mode-toggle .nav-close span::before,
  .navbar.theme-light.nav-mode-toggle .nav-close span::after{ background:var(--ink); }
  .navbar.theme-light.nav-mode-toggle .nav-list{
    background:var(--nav-panel-bg, rgba(255,255,255,.98));
  }
  .navbar.theme-light.nav-mode-toggle .nav-item{ color:rgba(20,20,26,.85); }
  .navbar.theme-light.nav-mode-toggle .nav-item:hover{ color:var(--ink); }
  .navbar.theme-light.nav-mode-toggle .nav-item.active{ color:var(--ink); }
  .navbar.theme-light.nav-mode-toggle .nav-mobile-header{ border-bottom:1px solid rgba(0,0,0,.06); }
  /* Lang toggle al fondo del drawer */
  .navbar.nav-mode-toggle .nav-list.open > .lang-toggle{
    margin:28px var(--space-x,40px) 0;
    align-self:flex-start;
  }

  /* ============ RESPONSIVE ============ */
  /* nav-collapsed: cuando el menú no cabe, JS activa nav-mode-toggle para reutilizar el drawer del hero */
  @media (max-width:1024px){
    :root{ --space-x:40px; --space-y:64px; }
    /* Tablet: hero centrado sobre video de fondo */
    .hero{ grid-template-columns:minmax(0,1fr); padding:48px var(--space-x) 48px; gap:20px; min-height:auto; }
    .hero-content{ order:1; padding:0; max-width:100%; }
    .scroll-down{ order:2; margin-top:24px; }
    .greeting{ font-size:clamp(2rem,4vw,3rem); }
    .role{ font-size:1.15rem; }
    .description{ font-size:.95rem; max-width:400px; }
    .stats{ gap:32px; }
    .stat-number{ font-size:1.8rem; }
    /* Tablet: imagen izquierda, contenido derecha — lado a lado adaptado */
    .showcase{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); padding:64px var(--space-x) 48px; gap:40px; align-items:center; }
    .showcase-content{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
    .showcase-visual{ width:100%; max-width:none; margin:0; }
    /* Sección explorar responsive — tablet mantiene 2 cards */
    .explorar{ padding:64px var(--space-x) 80px; }
    .explorar-layout{ grid-template-columns:1fr; gap:32px; }
    .explorar-header{ position:relative; top:0; margin-bottom:0; }
    .explorar-title{ font-size:clamp(1.6rem,5vw,2.4rem); }
    .explorar-title .white-text{ font-size:clamp(1.2rem,3vw,1.6rem); }
    .explorar-subtitle{ font-size:.8rem; }
    .explorar-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
    .exp-card{ width:100%; max-width:100%; min-height:440px; }
    .exp-card-image{ height:200px; }
    /* Sección trayectoria responsive — tablet: lado a lado adaptado */
    .exp-trayectoria{ grid-template-columns:1fr 1fr; }
    .exp-left{ padding:64px var(--space-x) 80px; }
    .exp-right{ padding:64px var(--space-x) 80px; min-height:380px; }
    .exp-icon-group{ top:20px; left:5%; width:60px; height:60px; }
    .exp-send{ bottom:20px; left:50%; width:90px; height:90px; }
    .exp-ai-logo{ top:10px; left:8%; width:56px; height:58px; }
    .exp-corner{ top:10px; right:5%; width:80px; height:62px; }
  }
  @media (max-width:768px){
    :root{ --space-x:24px; --space-y:48px; }
    /* Tablet pequeña: hero centrado, más compacto */
    .hero{ grid-template-columns:minmax(0,1fr); padding:36px var(--space-x) 36px; gap:16px; min-height:auto; }
    .hero-content{ order:1; padding:0; }
    .greeting{ font-size:1.8rem; }
    .role{ font-size:1rem; }
    .description{ font-size:.9rem; max-width:100%; margin-bottom:24px; }
    .cta-buttons{ gap:12px; margin-bottom:32px; }
    .btn{ padding:12px 22px; font-size:.9rem; }
    .stats{ gap:24px; }
    .stat-number{ font-size:1.6rem; }
    .stat-label{ font-size:.68rem; }
    /* Showcase: sigue lado a lado, más compacto */
    .showcase{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:28px; padding:48px var(--space-x) 40px; }
    .showcase-visual{ width:100%; max-width:none; }
    .showcase-title{ font-size:2rem; }
    .showcase-subtitle{ font-size:1.3rem; }
    /* Trayectoria: sigue lado a lado, más compacto */
    .exp-trayectoria{ grid-template-columns:1fr 1fr; }
    .exp-left{ padding:48px var(--space-x) 64px; }
    .exp-right{ padding:48px var(--space-x) 64px; min-height:340px; }
    .exp-title{ font-size:1.8rem; }
    .exp-subtitle{ font-size:1.3rem; margin-bottom:28px; }
    .exp-right-title{ font-size:1.8rem; }
    .exp-right-subtitle{ font-size:1.3rem; margin-bottom:28px; }
    .exp-block{ margin-bottom:20px; }
    .exp-block-title{ font-size:1rem; }
    .exp-block-text{ font-size:.88rem; }
    /* Tablet pequeña: sigue 2 cards */
    .explorar-layout{ grid-template-columns:1fr; gap:28px; }
    .explorar-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
    .exp-card{ width:100%; min-height:400px; }
    .exp-card-image{ height:170px; }
    .exp-card-title{ font-size:1.15rem; }
    .exp-card-logo{ height:22px; margin-bottom:12px; }
    .exp-card-desc{ min-height:50px; }
  }
  @media (max-width:640px){
    :root{ --space-x:20px; --space-y:48px; }
    .navbar{ padding:12px 20px; }
    .back-to-top{ bottom:20px; right:20px; width:42px; height:42px; }
    /* Mobile: hero alineado a la izquierda sobre video de fondo */
    .hero{ grid-template-columns:1fr; padding:40px var(--space-x) 40px; text-align:left; gap:24px; min-height:auto; }
    .hero-bg-overlay{ background:linear-gradient(180deg, rgba(10,10,15,.85) 0%, rgba(10,10,15,.55) 50%, rgba(10,10,15,.25) 100%); }
    .hero-content{ order:1; display:flex; flex-direction:column; align-items:flex-start; padding:0; max-width:100%; }
    .scroll-down{ order:2; margin-top:16px; }
    .description{ margin-left:0; margin-right:0; }
    .cta-buttons,.stats{ justify-content:flex-start; }
    .greeting{ font-size:2.3rem; }
    .role{ font-size:1.1rem; }
    .stats{ gap:26px; flex-wrap:wrap; }
    /* Mobile: showcase apilado — imagen top, contenido abajo */
    .showcase{ grid-template-columns:1fr; padding:48px var(--space-x); gap:36px; text-align:center; }
    .showcase-content{ display:flex; flex-direction:column; align-items:center; }
    .showcase-eyebrow{ margin-left:auto; margin-right:auto; }
    .showcase-desc{ margin-left:auto; margin-right:auto; }
    .showcase-visual{ order:-1; width:100%; max-width:none; margin:0 auto; }
    /* Mobile: trayectoria apilada — izquierdo arriba, derecho abajo */
    .exp-trayectoria{ grid-template-columns:1fr; }
    .exp-left{ padding:48px var(--space-x) 64px; order:1; }
    .exp-right{ padding:48px var(--space-x) 64px; min-height:320px; order:2; }
    .exp-cv-card{ width:160px; height:146px; }
    .exp-cv-text{ font-size:1rem; }
    .exp-block-text{ font-size:.9rem; }
    .explorar{ padding:48px var(--space-x) 64px; }
    .explorar-layout{ grid-template-columns:1fr; gap:24px; }
    .explorar-title{ font-size:1.5rem; }
    .explorar-title .white-text{ font-size:1.1rem; }
    .explorar-subtitle{ font-size:.75rem; }
    /* Mobile: 1 card por fila */
    .explorar-grid{ grid-template-columns:1fr; gap:16px; }
    .explorar-controls{ gap:8px; margin-top:12px; }
    .explorar-controls-label{ font-size:.75rem; }
    .explorar-arrow{ width:36px; height:36px; }
    .exp-card{ width:100%; min-height:auto; }
    .exp-card-body{ padding:16px 18px; }
    .exp-card-image{ height:160px; }
    .exp-card-title{ font-size:1.05rem; }
    .exp-card-logo{ height:20px; margin-bottom:10px; }
    .exp-card-link{ font-size:.8rem; }
    .exp-card-desc{ font-size:.85rem; }
  }
  @media (max-width:480px){
    :root{ --space-x:16px; --space-y:40px; }
    .hero{ padding:32px 16px 32px; }
    .hero-content{ padding:0; }
    .greeting{ font-size:1.9rem; }
    .role{ font-size:1rem; }
    .description{ font-size:.9rem; margin-bottom:24px; }
    .cta-buttons{ gap:12px; margin-bottom:36px; }
    .btn{ padding:12px 22px; font-size:.9rem; }
    .stats{ gap:20px; }
    .stat-number{ font-size:1.7rem; }
    .stat-label{ font-size:.68rem; }
    .showcase{ padding:40px var(--space-x); gap:28px; }
    .showcase-visual{ width:100%; max-width:none; }
    .showcase-title{ font-size:2rem; }
    .showcase-subtitle{ font-size:1.3rem; }
    .exp-left{ padding:40px var(--space-x) 56px; }
    .exp-right{ padding:40px var(--space-x) 56px; min-height:280px; }
    .exp-cv-card{ width:140px; height:128px; }
    .exp-icon-group{ width:48px; height:48px; }
    .exp-send{ width:70px; height:70px; }
    .exp-ai-logo{ width:48px; height:50px; }
    .exp-corner{ width:64px; height:50px; }
    .explorar{ padding:40px var(--space-x) 56px; }
    .exp-card-body{ padding:14px 16px; }
    .exp-card-image{ height:140px; }
    .exp-card-title{ font-size:.98rem; }
    .exp-card-desc{ font-size:.82rem; }
    .exp-card-link{ font-size:.76rem; }
    .exp-card-link-circle{ width:28px; height:28px; }
    .exp-card-link-circle svg{ width:12px; height:12px; }
    .explorar-all-link{ font-size:.9rem; padding:12px 24px; }
  }
  @media (max-width:360px){
    :root{ --space-x:12px; --space-y:32px; }
    .hero{ padding:28px 12px 28px; }
    .navbar{ padding:10px 14px; }
    .greeting{ font-size:1.7rem; }
    .hero-content{ padding:0; }
    .stats{ gap:14px; }
    .stat-number{ font-size:1.5rem; }
    .btn{ padding:11px 18px; font-size:.85rem; }
    .cta-buttons{ gap:10px; }
    .showcase{ padding:32px var(--space-x); }
    .exp-left{ padding:32px var(--space-x) 48px; }
    .exp-right{ padding:32px var(--space-x) 48px; }
    .explorar{ padding:32px var(--space-x) 48px; }
    .exp-card-body{ padding:12px 14px; }
    .exp-card-image{ height:120px; }
    .exp-card-title{ font-size:.9rem; }
    .exp-card-desc{ font-size:.78rem; }
  }

  /* ============ SECCIÓN SIGN-OFF CON CARIÑO (Figma nodo 694:558) ============ */
  .feedback{
    position:relative; width:100%; padding:100px var(--space-x) 120px;
    background:linear-gradient(180deg, #0a0a0f 0%, #151521 40%, #0d0d18 70%, #0a0a0f 100%);
    overflow:hidden;
  }
  .feedback-bg{ position:absolute; inset:0; pointer-events:none; }
  .feedback-bg::before{
    content:''; position:absolute; top:10%; left:5%; width:500px; height:500px;
    background:radial-gradient(circle, rgba(99,178,245,.1), transparent 70%);
    filter:blur(80px); animation:feedbackGlow1 8s ease-in-out infinite alternate;
  }
  .feedback-bg::after{
    content:''; position:absolute; bottom:5%; right:10%; width:450px; height:450px;
    background:radial-gradient(circle, rgba(255,19,74,.08), transparent 70%);
    filter:blur(80px); animation:feedbackGlow2 10s ease-in-out infinite alternate;
  }
  @keyframes feedbackGlow1{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(40px,30px) scale(1.2); } }
  @keyframes feedbackGlow2{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-30px,-20px) scale(1.15); } }

  /* Partículas AI flotantes */
  .feedback-particles{ position:absolute; inset:0; pointer-events:none; z-index:0; }
  .feedback-particle{
    position:absolute; width:3px; height:3px; border-radius:50%;
    background:rgba(99,178,245,.6); opacity:0;
    animation:particleFloat 6s ease-in-out infinite;
  }
  @keyframes particleFloat{
    0%,100%{ opacity:0; transform:translateY(0) scale(.5); }
    50%{ opacity:.8; transform:translateY(-30px) scale(1); }
  }

  .feedback-layout{
    position:relative; z-index:2; max-width:1300px; margin:0 auto;
    display:grid; grid-template-columns:1fr 588px; gap:60px; align-items:start;
  }
  .feedback-layout > *{ min-width:0; }
  .feedback-left{ display:flex; flex-direction:column; gap:0; }
  .feedback-title{
    font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:4.5rem; line-height:1.1; margin:0;
  }
  .feedback-title .gradient-text{
    background:var(--gradient-name);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .feedback-title .white-text{ display:block; color:#fff; font-size:3.5rem; }
  .feedback-title .white-text.regular{ font-weight:400; }
  .feedback-desc{
    font-family:var(--font-ui); font-size:1.05rem; color:rgba(255,255,255,.7);
    line-height:1.65; max-width:520px; margin:24px 0 48px;
  }

  /* Carrusel de logos en gris — tamaño reducido según Figma (strip h≈53px) */
  .logo-carousel{
    position:relative; width:100%; max-width:520px; height:44px; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .logo-carousel-track{
    display:flex; align-items:center; gap:28px; height:100%;
    animation:logoScroll 18s linear infinite;
    will-change:transform;
  }
  .logo-carousel:hover .logo-carousel-track{ animation-play-state:paused; }
  .logo-carousel-item{
    flex-shrink:0; height:30px; width:auto; opacity:.4;
    filter:grayscale(100%) contrast(.8);
    transition:opacity .4s ease, filter .4s ease, transform .4s ease;
  }
  .logo-carousel-item:hover{ opacity:.95; filter:grayscale(0%) contrast(1); transform:scale(1.1); }
  @keyframes logoScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* Stage 3D para testimonios */
  .feedback-right{ position:relative; perspective:1200px; max-width:100%; min-width:0; }
  .testimonial-stage{
    position:relative; width:100%; overflow:visible;
  }
  .testimonial-3d-wrapper{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
  }

  /* Card de testimonio — diseño Figma con efectos AI */
  .testimonial-card{
    position:absolute; top:0; left:0; width:100%;
    border:2px solid rgba(255,19,74,.35); border-radius:16px;
    padding:36px 40px; background:rgba(18,18,28,.7);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    display:flex; flex-direction:column;
    overflow:hidden;
    opacity:0; pointer-events:none;
    transform:translateX(60px) rotateY(15deg) scale(.92);
    filter:blur(8px);
    transition:opacity .6s cubic-bezier(.4,0,.2,1),
               transform .7s cubic-bezier(.34,1.56,.64,1),
               filter .5s ease,
               box-shadow .4s ease;
    box-shadow:0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset;
  }
  .testimonial-card.active{
    opacity:1; pointer-events:auto;
    transform:translateX(0) rotateY(0) scale(1);
    filter:blur(0);
    box-shadow:0 30px 80px rgba(0,0,0,.5),
               0 0 40px rgba(255,19,74,.08),
               0 0 0 1px rgba(255,255,255,.05) inset;
  }
  .testimonial-card.prev{
    transform:translateX(-60px) rotateY(-15deg) scale(.92);
    filter:blur(8px);
  }

  /* Borde gradiente animado en card activa */
  .testimonial-card.active::before{
    content:''; position:absolute; inset:-2px; border-radius:16px; z-index:-1;
    background:linear-gradient(135deg, rgba(255,19,74,.4), rgba(99,178,245,.3), rgba(255,19,74,.2));
    opacity:.6; animation:borderGlow 4s ease-in-out infinite alternate;
  }
  @keyframes borderGlow{ 0%{ opacity:.3; } 100%{ opacity:.7; } }

  .testimonial-stars{ display:flex; gap:8px; margin-bottom:20px; }
  .testimonial-stars .star{ width:24px; height:24px; color:#ffb800; }
  .testimonial-text{
    font-family:var(--font-ui); font-size:.95rem; color:rgba(255,255,255,.88);
    line-height:1.75; flex:1; margin-bottom:28px;
  }
  .testimonial-author{ display:flex; align-items:center; gap:16px; }
  .testimonial-photo{
    width:72px; height:72px; border-radius:50%; object-fit:cover;
    border:2px solid rgba(255,19,74,.3);
    box-shadow:0 0 20px rgba(255,19,74,.15);
  }
  .testimonial-info{ display:flex; flex-direction:column; gap:3px; }
  .testimonial-name{
    font-family:var(--font-display),sans-serif; font-weight:700;
    font-size:1.05rem; color:#fff;
  }
  .testimonial-role{
    font-family:var(--font-ui); font-size:.76rem; color:rgba(255,255,255,.5);
    line-height:1.4;
  }

  /* Navegación */
  .testimonial-nav{
    display:flex; align-items:center; gap:20px; margin-top:24px; justify-content:center;
  }
  .testimonial-btn{
    width:48px; height:48px; border-radius:50%; border:none;
    background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    position:relative; overflow:hidden;
  }
  .testimonial-btn::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    background:linear-gradient(135deg, rgba(255,19,74,.3), rgba(99,178,245,.2));
    opacity:0; transition:opacity .35s ease;
  }
  .testimonial-btn:hover{
    transform:scale(1.12) translateY(-2px);
    box-shadow:0 8px 24px rgba(255,19,74,.25), 0 0 30px rgba(99,178,245,.15);
  }
  .testimonial-btn:hover::before{ opacity:1; }
  .testimonial-btn:active{ transform:scale(1.05); }
  .testimonial-btn:focus-visible{ outline:2px solid #63b2f5; outline-offset:3px; }
  .testimonial-btn svg{ width:20px; height:20px; position:relative; z-index:1; }

  .testimonial-counter{
    font-family:var(--font-display),sans-serif; font-weight:600;
    font-size:.9rem; color:rgba(255,255,255,.5); letter-spacing:2px;
    min-width:80px; text-align:center;
  }
  .testimonial-counter span{ color:#fff; }

  /* Barra de progreso AI — haz de luz con efecto asombroso */
  .testimonial-progress{
    position:relative; margin-top:24px; height:4px; border-radius:4px;
    background:rgba(255,255,255,.06); overflow:visible;
    box-shadow:inset 0 0 6px rgba(0,0,0,.4);
  }
  .testimonial-progress::before{
    content:''; position:absolute; inset:0; border-radius:4px;
    background:linear-gradient(90deg, transparent, rgba(99,178,245,.04) 50%, transparent);
    animation:progressScan 3s ease-in-out infinite;
  }
  @keyframes progressScan{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(100%); }
  }
  .testimonial-progress-bar{
    position:relative; height:100%; width:0%; border-radius:4px;
    background:#fff;
    transition:width .1s linear;
    box-shadow:
      0 0 8px rgba(255,255,255,.6),
      0 0 16px rgba(255,255,255,.4),
      0 0 24px rgba(255,255,255,.2);
  }
  /* Destello que recorre la barra — haz de luz blanco en movimiento */
  .testimonial-progress-bar::before{
    content:''; position:absolute; top:0; left:0; height:100%; width:60px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
    border-radius:4px;
    animation:barShimmer 2s ease-in-out infinite;
    filter:blur(1px);
  }
  @keyframes barShimmer{
    0%{ left:-60px; opacity:0; }
    20%{ opacity:1; }
    80%{ opacity:1; }
    100%{ left:100%; opacity:0; }
  }
  /* Punto de luz blanco en el extremo derecho de la barra */
  .testimonial-progress-bar::after{
    content:''; position:absolute; top:50%; right:-3px;
    width:10px; height:10px; border-radius:50%;
    background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.6) 40%, transparent 70%);
    transform:translateY(-50%);
    box-shadow:
      0 0 8px rgba(255,255,255,.8),
      0 0 16px rgba(255,255,255,.5),
      0 0 24px rgba(255,255,255,.3);
    animation:barPulse 1.5s ease-in-out infinite;
  }
  @keyframes barPulse{
    0%,100%{ transform:translateY(-50%) scale(1); opacity:1; }
    50%{ transform:translateY(-50%) scale(1.4); opacity:.7; }
  }

  /* Responsive */
  @media (max-width:1024px){
    .feedback{ padding:60px var(--space-x) 80px; }
    /* Tablet: ambas secciones lado a lado, grilla fluida */
    .feedback-layout{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:40px; }
    .feedback-title{ font-size:3rem; }
    .feedback-title .white-text{ font-size:2.25rem; }
    .feedback-desc{ margin-bottom:32px; font-size:.95rem; }
    .logo-carousel{ max-width:100%; }
    .testimonial-card{ padding:28px 28px; }
    .testimonial-stage{ }
  }
  @media (max-width:768px){
    /* Tablet pequeña: apila una columna — logos arriba, cards abajo */
    .feedback{ padding:48px var(--space-x) 64px; }
    .feedback-layout{ grid-template-columns:1fr; gap:32px; }
    .feedback-left{ order:1; }
    .feedback-right{ order:2; perspective:900px; max-width:100%; width:100%; overflow:hidden; }
    .feedback-title{ font-size:2.5rem; }
    .feedback-title .white-text{ font-size:1.9rem; }
    .feedback-desc{ font-size:.95rem; margin:20px 0 32px; }
    .testimonial-card{ padding:24px 22px; }
    .testimonial-photo{ width:56px; height:56px; }
    .testimonial-stage{ }
    .testimonial-nav{ gap:12px; margin-top:24px; }
    .logo-carousel{ height:40px; max-width:100%; }
    .logo-carousel-item{ height:26px !important; }
    .logo-carousel-track{ gap:22px; }
  }
  @media (max-width:640px){
    /* Mobile: una columna, más compacto */
    .feedback-title{ font-size:2.25rem; line-height:1.15; }
    .feedback-title .white-text{ font-size:1.75rem; }
    .testimonial-card{ padding:24px 20px; }
    .testimonial-stage{ }
    .testimonial-text{ font-size:.9rem; line-height:1.7; margin-bottom:22px; }
    .testimonial-stars{ margin-bottom:16px; }
    .testimonial-stars .star{ width:20px; height:20px; }
    .testimonial-photo{ width:52px; height:52px; }
    .testimonial-name{ font-size:.98rem; }
    .testimonial-role{ font-size:.72rem; }
    .testimonial-btn{ width:42px; height:42px; }
    .testimonial-btn svg{ width:18px; height:18px; }
    .testimonial-counter{ font-size:.8rem; min-width:60px; }
    .testimonial-progress{ margin-top:16px; }
    .logo-carousel{ height:38px; }
    .logo-carousel-item{ height:24px !important; }
    .logo-carousel-track{ gap:20px; }
  }
  @media (max-width:480px){
    .feedback{ padding:40px var(--space-x) 56px; }
    .feedback-title{ font-size:1.9rem; }
    .feedback-title .white-text{ font-size:1.5rem; }
    .feedback-desc{ font-size:.88rem; margin:16px 0 28px; }
    .testimonial-card{ padding:20px 16px; }
    .testimonial-stage{ }
    .testimonial-text{ font-size:.85rem; line-height:1.65; margin-bottom:18px; }
    .testimonial-stars .star{ width:18px; height:18px; }
    .testimonial-photo{ width:48px; height:48px; }
    .testimonial-author{ gap:12px; }
    .testimonial-name{ font-size:.92rem; }
    .testimonial-role{ font-size:.68rem; }
    .testimonial-nav{ gap:10px; margin-top:24px; }
    .testimonial-btn{ width:40px; height:40px; }
    .testimonial-btn svg{ width:16px; height:16px; }
    .testimonial-counter{ font-size:.75rem; min-width:54px; letter-spacing:1px; }
    .logo-carousel{ height:34px; }
    .logo-carousel-item{ height:22px !important; }
    .logo-carousel-track{ gap:16px; }
  }

  /* ============ EFECTOS DE REVELADO AI ============ */
  /* Efecto 1: Clip-path reveal horizontal (sección experiencia) */
  .reveal-clip{
    clip-path: inset(0 100% 0 0);
    opacity:0;
    transition:clip-path .8s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  }
  .reveal-clip.in-view{
    clip-path: inset(0 0 0 0);
    opacity:1;
  }

  /* Efecto 2: Blur+scale stagger (sección explorar y trayectoria) */
  .reveal-blur{
    opacity:0; filter:blur(12px); transform:translateY(30px) scale(.96);
    transition:opacity .6s ease, filter .6s ease, transform .6s cubic-bezier(.4,0,.2,1);
  }
  .reveal-blur.in-view{
    opacity:1; filter:blur(0); transform:translateY(0) scale(1);
  }

  /* Stagger delays para elementos hijos */
  .reveal-blur.in-view[data-delay="0"]{ transition-delay:0ms; }
  .reveal-blur.in-view[data-delay="1"]{ transition-delay:100ms; }
  .reveal-blur.in-view[data-delay="2"]{ transition-delay:200ms; }
  .reveal-blur.in-view[data-delay="3"]{ transition-delay:300ms; }
  .reveal-blur.in-view[data-delay="4"]{ transition-delay:400ms; }
  .reveal-blur.in-view[data-delay="5"]{ transition-delay:500ms; }

  /* Línea de escaneo AI para sección experiencia */
  .scan-line{
    position:absolute; left:0; right:0; height:2px; z-index:10;
    background:linear-gradient(90deg, transparent, rgba(99,178,245,.6), rgba(255,61,127,.4), transparent);
    top:0; opacity:0; pointer-events:none;
  }
  .reveal-clip.in-view + .scan-line{
    animation:scanSweep 1s ease-out .2s forwards;
  }
  @keyframes scanSweep{
    0%{ top:0; opacity:0; }
    10%{ opacity:1; }
    90%{ opacity:.6; }
    100%{ top:100%; opacity:0; }
  }

  /* ============ PANEL DE ACCESIBILIDAD WCAG 2.1 ============ */
  .a11y-trigger{
    position:fixed; bottom:32px; left:32px; z-index:102;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#4A5FE8,#8B5CF6);
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(74,95,232,.35),0 0 0 1px rgba(255,255,255,.1);
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
  }
  .a11y-trigger:hover{
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 12px 32px rgba(74,95,232,.45),0 0 24px rgba(139,92,246,.3);
  }
  .a11y-trigger svg{ width:22px; height:22px; color:#fff; }
  .a11y-trigger:focus-visible{
    outline:3px solid #fff; outline-offset:3px;
  }
  /* Estado activo: el botón cambia a rosa y pulsa para avisar */
  .a11y-trigger.has-active{
    background:linear-gradient(135deg,#FF3D7F,#C239B3);
    box-shadow:0 8px 24px rgba(255,61,127,.4),0 0 0 1px rgba(255,255,255,.1);
    animation:a11yTriggerPulse 2s ease-in-out infinite;
  }
  .a11y-trigger.has-active:hover{
    box-shadow:0 12px 32px rgba(255,61,127,.5),0 0 24px rgba(194,57,179,.3);
  }
  @keyframes a11yTriggerPulse{
    0%,100%{ box-shadow:0 8px 24px rgba(255,61,127,.4),0 0 0 0 rgba(255,61,127,.45); }
    50%{ box-shadow:0 8px 24px rgba(255,61,127,.4),0 0 0 12px rgba(255,61,127,0); }
  }
  /* Badge contador sobre el botón */
  .a11y-trigger-badge{
    position:absolute; top:-4px; right:-4px;
    min-width:20px; height:20px; border-radius:10px;
    background:#fff; color:#FF3D7F;
    font-family:var(--font-display); font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    padding:0 6px; border:2px solid #FF3D7F;
    box-shadow:0 2px 8px rgba(255,61,127,.4);
    transform:scale(0); transition:transform .3s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  .a11y-trigger.has-active .a11y-trigger-badge{ transform:scale(1); }
  /* Tooltip compacto al hover cuando hay opciones activas */
  .a11y-trigger-tip{
    position:absolute; bottom:calc(100% + 12px); left:50%;
    transform:translateX(-50%) translateY(8px);
    background:rgba(20,20,26,.96); color:#fff;
    font-family:var(--font-ui); font-size:.72rem; font-weight:500;
    padding:8px 12px; border-radius:10px; white-space:nowrap;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
    pointer-events:none;
  }
  .a11y-trigger-tip::after{
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    border:5px solid transparent; border-top-color:rgba(20,20,26,.96);
  }
  .a11y-trigger.has-active:hover .a11y-trigger-tip{
    opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  @media (prefers-reduced-motion:reduce){
    .a11y-trigger.has-active{ animation:none; }
  }
  .a11y-panel{
    position:fixed; bottom:90px; left:32px; z-index:103;
    width:320px; max-width:calc(100vw - 64px);
    max-height:calc(100vh - 120px);
    overflow-y:auto; overflow-x:hidden;
    background:#fff; border-radius:18px;
    box-shadow:0 24px 60px rgba(20,20,26,.25),0 0 0 1px rgba(0,0,0,.06);
    padding:20px; opacity:0; visibility:hidden;
    transform:translateY(16px) scale(.96);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
  }
  .a11y-panel.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  /* Scrollbar discreto */
  .a11y-panel::-webkit-scrollbar{ width:6px; }
  .a11y-panel::-webkit-scrollbar-track{ background:transparent; }
  .a11y-panel::-webkit-scrollbar-thumb{ background:#D1D5DB; border-radius:3px; }
  .a11y-panel::-webkit-scrollbar-thumb:hover{ background:#9CA3AF; }
  .a11y-panel-header{
    position:sticky; top:-20px; z-index:1;
    display:flex; align-items:center; justify-content:space-between;
    margin:-20px -20px 16px; padding:18px 20px 14px;
    background:#fff; border-bottom:1px solid #EEF0F3;
    border-radius:18px 18px 0 0;
  }
  .a11y-panel-title{
    font-family:var(--font-display); font-weight:700; font-size:1.05rem;
    color:var(--ink); display:flex; align-items:center; gap:8px;
  }
  .a11y-panel-title svg{ width:18px; height:18px; color:#4A5FE8; }
  .a11y-close{
    width:32px; height:32px; border-radius:8px; border:none;
    background:#F4F5F7; cursor:pointer; display:flex;
    align-items:center; justify-content:center; transition:background .2s;
  }
  .a11y-close:hover{ background:#E8EAF0; }
  .a11y-close svg{ width:16px; height:16px; color:var(--ink); }
  .a11y-close:focus-visible{ outline:2px solid #4A5FE8; outline-offset:2px; }
  .a11y-section{ margin-bottom:14px; }
  .a11y-section:last-child{ margin-bottom:0; }
  .a11y-label{
    font-family:var(--font-body); font-size:.7rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--gray-600); margin-bottom:8px;
  }
  .a11y-controls{
    display:flex; align-items:center; gap:6px;
  }
  .a11y-btn{
    flex:1; padding:8px 10px; border-radius:9px;
    border:1.5px solid #E8EAF0; background:#fff;
    font-family:var(--font-body); font-size:.82rem; font-weight:500;
    color:var(--ink); cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:5px;
    transition:all .2s ease;
  }
  .a11y-btn:hover{ border-color:#4A5FE8; background:rgba(74,95,232,.04); }
  .a11y-btn:focus-visible{ outline:2px solid #4A5FE8; outline-offset:2px; }
  .a11y-btn.active{
    background:linear-gradient(135deg,#4A5FE8,#8B5CF6);
    border-color:transparent; color:#fff;
    box-shadow:0 4px 12px rgba(74,95,232,.3);
  }
  .a11y-btn svg{ width:16px; height:16px; }
  .a11y-value{
    font-family:var(--font-display); font-weight:700; font-size:.9rem;
    color:#4A5FE8; min-width:44px; text-align:center;
  }
  .a11y-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .a11y-hint{
    font-family:var(--font-body); font-size:.68rem; color:var(--gray-600);
    margin-top:6px; line-height:1.35;
  }
  /* Estados de accesibilidad aplicados al documento */
  html.a11y-font-sm{ font-size:87.5%; }
  html.a11y-font-lg{ font-size:112.5%; }
  html.a11y-font-xl{ font-size:125%; }
  html.a11y-font-2xl{ font-size:137.5%; }
  html.a11y-scale-lg .showcase-image-wrap,
  html.a11y-scale-lg .exp-cv-card,
  html.a11y-scale-lg .btn{ transform:scale(1.12); }
  html.a11y-scale-sm .showcase-image-wrap,
  html.a11y-scale-sm .exp-cv-card,
  html.a11y-scale-sm .btn{ transform:scale(.9); }
  /* Alto contraste WCAG AAA — fondo negro, texto blanco, acentos amarillos */
  html.a11y-contrast-high{
    filter:contrast(1.6) saturate(1.3) brightness(1.05);
  }
  html.a11y-contrast-high body{
    background:#000 !important; color:#fff !important;
  }
  html.a11y-contrast-high .hero::before,
  html.a11y-contrast-high .navbar,
  html.a11y-contrast-high .showcase,
  html.a11y-contrast-high .explorar,
  html.a11y-contrast-high .feedback{
    background:#000 !important;
  }
  html.a11y-contrast-high *:not(svg):not(.a11y-panel *):not(.a11y-trigger *){
    color:#fff !important;
    border-color:#fff !important;
  }
  html.a11y-contrast-high a,
  html.a11y-contrast-high .gradient-text,
  html.a11y-contrast-high .nav-item.active{
    color:#FFD700 !important; -webkit-text-fill-color:#FFD700 !important;
  }
  html.a11y-contrast-high .btn-primary{
    background:#FFD700 !important; color:#000 !important;
  }
  html.a11y-contrast-high .btn-secondary{
    background:transparent !important; color:#FFD700 !important;
    border:2px solid #FFD700 !important;
  }
  html.a11y-contrast-high .btn-tertiary{
    background:#FFD700 !important; color:#000 !important;
  }
  /* Modo contraste amarillo sobre negro (WCAG AAA) */
  html.a11y-contrast-yellow body{
    background:#000 !important; color:#FFD700 !important;
  }
  html.a11y-contrast-yellow *:not(svg):not(.a11y-panel *):not(.a11y-trigger *){
    color:#FFD700 !important; -webkit-text-fill-color:#FFD700 !important;
    border-color:#FFD700 !important;
  }
  html.a11y-contrast-yellow .btn-primary{
    background:#FFD700 !important; color:#000 !important;
  }
  html.a11y-contrast-yellow .btn-tertiary{
    background:#FFD700 !important; color:#000 !important;
  }
  /* Modo invertir colores */
  html.a11y-contrast-invert{
    filter:invert(1) hue-rotate(180deg);
  }
  html.a11y-contrast-invert img,
  html.a11y-contrast-invert video,
  html.a11y-contrast-invert .a11y-panel,
  html.a11y-contrast-invert .a11y-trigger{
    filter:invert(1) hue-rotate(180deg);
  }
  /* Reducir movimiento (manual, además del media query) */
  html.a11y-motion-reduce *,
  html.a11y-motion-reduce *::before,
  html.a11y-motion-reduce *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.a11y-motion-reduce{ scroll-behavior:auto; }
  /* Subrayar enlaces */
  html.a11y-links-underline a:not(.nav-logo):not(.a11y-btn):not(.a11y-close):not(.a11y-trigger){
    text-decoration:underline; text-underline-offset:2px;
  }
  .a11y-reset-section{
    margin-top:14px; padding-top:14px;
    border-top:1px solid #EEF0F3;
  }
  .a11y-reset-btn{
    width:100%; padding:10px; border-radius:11px;
    border:1.5px solid #FF3D7F; background:rgba(255,61,127,.04);
    font-family:var(--font-body); font-size:.84rem; font-weight:600;
    color:#FF3D7F; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px;
    transition:all .2s ease;
  }
  .a11y-reset-btn:hover{
    background:linear-gradient(135deg,#FF3D7F,#C239B3);
    color:#fff; border-color:transparent;
    box-shadow:0 6px 18px rgba(255,61,127,.3);
  }
  .a11y-reset-btn:focus-visible{ outline:2px solid #FF3D7F; outline-offset:2px; }
  .a11y-reset-btn svg{ width:17px; height:17px; }

  @media (max-width:640px){
    .a11y-trigger{ bottom:20px; left:20px; width:42px; height:42px; }
    .a11y-trigger-badge{ min-width:18px; height:18px; font-size:10px; }
    .a11y-panel{
      bottom:74px; left:20px; right:20px; width:auto;
      max-width:calc(100vw - 40px); max-height:calc(100vh - 110px);
      padding:16px;
    }
    .a11y-panel-header{
      margin:-16px -16px 12px; padding:14px 16px 12px;
    }
  }

  /* ============ MOVIMIENTO REDUCIDO ============ */
  /* ============ SECCIÓN TECNOLOGÍA — ¿Cómo? la magia... ============ */
  .tecnologia{
    position:relative;
    background:linear-gradient(180deg,#0a0a0f 0%,#14141a 45%,#2a2832 100%);
    color:#fff;
    padding:var(--space-y) var(--space-x);
    overflow:hidden;
  }
  .tecnologia-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
  .tecnologia-bg::before,
  .tecnologia-bg::after{
    content:''; position:absolute; border-radius:50%; filter:blur(90px); opacity:.35;
  }
  .tecnologia-bg::before{
    width:480px; height:480px; top:-120px; left:-80px;
    background:radial-gradient(circle,#ff134a,transparent 70%);
    animation:techGlow1 14s ease-in-out infinite alternate;
  }
  .tecnologia-bg::after{
    width:520px; height:520px; bottom:-140px; right:-100px;
    background:radial-gradient(circle,#63b2f5,transparent 70%);
    animation:techGlow2 16s ease-in-out infinite alternate;
  }
  @keyframes techGlow1{ 0%{transform:translate(0,0) scale(1);opacity:.3;} 100%{transform:translate(60px,40px) scale(1.15);opacity:.45;} }
  @keyframes techGlow2{ 0%{transform:translate(0,0) scale(1);opacity:.3;} 100%{transform:translate(-50px,-30px) scale(1.12);opacity:.4;} }

  .tecnologia-grid-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 100%);
  }

  .tecnologia-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
  .tech-particle{
    position:absolute; width:3px; height:3px; border-radius:50%;
    background:rgba(255,255,255,.6); box-shadow:0 0 8px rgba(255,255,255,.5);
    animation:techParticleFloat linear infinite;
  }
  @keyframes techParticleFloat{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:.7; }
    90%{ opacity:.7; }
    100%{ transform:translateY(-180px) translateX(20px); opacity:0; }
  }

  .tecnologia-layout{
    position:relative; z-index:2;
    max-width:var(--container-max); margin:0 auto;
  }

  .tecnologia-header{ text-align:center; margin-bottom:64px; }
  .tecnologia-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-ui); font-size:13px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase;
    color:#ff134a; margin-bottom:20px;
  }
  .tecnologia-eyebrow::before,
  .tecnologia-eyebrow::after{
    content:''; width:32px; height:1px;
    background:linear-gradient(90deg,transparent,#ff134a,transparent);
  }
  .tecnologia-title{
    font-family:var(--font-display); font-size:clamp(48px,7vw,84px);
    line-height:1; font-weight:800; margin-bottom:16px;
  }
  .tecnologia-title .gradient-word{
    color:#fff;
  }
  .tecnologia-title .white-word{ color:#fff; font-weight:400; }
  .tecnologia-subtitle{
    font-family:var(--font-display); font-size:clamp(20px,2.5vw,28px);
    font-weight:700; color:#fff; margin-bottom:14px;
  }
  .tecnologia-desc{
    font-family:var(--font-ui); font-size:clamp(15px,1.6vw,18px);
    line-height:1.6; color:rgba(255,255,255,.6); max-width:580px; margin:0 auto;
  }

  /* Cuadrícula de herramientas */
  .tech-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:20px;
  }

  .tech-card{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; padding:28px 18px 22px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    text-decoration:none; color:#fff;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .4s,background .4s,box-shadow .4s;
    overflow:hidden;
    will-change:transform;
  }
  .tech-card::before{
    content:''; position:absolute; inset:0; border-radius:18px;
    background:linear-gradient(135deg,rgba(255,19,74,.0),rgba(99,178,245,.0));
    opacity:0; transition:opacity .45s ease; pointer-events:none;
  }
  .tech-card::after{
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(110deg,transparent,rgba(255,255,255,.08),transparent);
    transition:left .7s ease; pointer-events:none;
  }
  .tech-card:hover,
  .tech-card:focus-visible{
    transform:translateY(-10px) scale(1.03);
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.07);
    box-shadow:0 18px 40px rgba(0,0,0,.4),0 0 28px rgba(99,178,245,.18);
    outline:none;
  }
  .tech-card:hover::before,
  .tech-card:focus-visible::before{ opacity:1; }
  .tech-card:hover::after,
  .tech-card:focus-visible::after{ left:130%; }
  .tech-card:focus-visible{ box-shadow:0 0 0 3px rgba(99,178,245,.5),0 18px 40px rgba(0,0,0,.4); }

  .tech-card-icon{
    position:relative; width:64px; height:64px;
    display:flex; align-items:center; justify-content:center;
    border-radius:14px; overflow:hidden;
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .tech-card-icon img{
    width:100%; height:100%; object-fit:contain;
    filter:grayscale(.4) brightness(.95);
    transition:filter .5s ease,transform .5s ease;
  }
  .tech-card:hover .tech-card-icon img,
  .tech-card:focus-visible .tech-card-icon img{
    filter:grayscale(0) brightness(1.05);
    transform:scale(1.08);
  }
  .tech-card:hover .tech-card-icon,
  .tech-card:focus-visible .tech-card-icon{ transform:scale(1.06); }

  .tech-card-name{
    font-family:var(--font-display); font-size:15px; font-weight:700;
    text-align:center; line-height:1.2;
  }
  .tech-card-category{
    font-family:var(--font-ui); font-size:11px; font-weight:500;
    letter-spacing:.06em; text-transform:uppercase;
    color:rgba(255,255,255,.4);
    transition:color .4s ease;
  }
  .tech-card:hover .tech-card-category,
  .tech-card:focus-visible .tech-card-category{ color:rgba(255,255,255,.7); }

  .tech-card-badge{ display:none; }

  /* Reveal escalonado */
  .tech-card.reveal-blur{ opacity:0; filter:blur(8px); transform:translateY(24px); }
  .tech-card.reveal-blur.in-view{ opacity:1; filter:blur(0); transform:translateY(0); transition:opacity .6s ease,filter .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),border-color .4s,background .4s,box-shadow .4s; }

  /* Responsive */
  @media (max-width:1024px){
    .tecnologia{ padding:80px 40px; }
    .tech-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
  }
  @media (max-width:768px){
    .tecnologia{ padding:64px 24px; }
    .tecnologia-header{ margin-bottom:44px; }
    .tech-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
    .tech-card{ padding:22px 14px 18px; gap:10px; }
    .tech-card-icon{ width:52px; height:52px; }
    .tech-card-name{ font-size:13px; }
  }
  @media (max-width:480px){
    .tecnologia{ padding:56px 18px; }
    .tech-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
    .tech-card{ padding:18px 10px 16px; gap:8px; border-radius:14px; }
    .tech-card-icon{ width:46px; height:46px; border-radius:11px; }
    .tech-card-name{ font-size:12px; }
    .tech-card-category{ font-size:10px; }
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
    html{ scroll-behavior:auto; }
    .reveal-clip{ clip-path:inset(0 0 0 0); opacity:1; }
    .reveal-blur{ opacity:1; filter:blur(0); transform:none; }
    .scan-line{ display:none; }
    .logo-carousel-track{ animation:none; }
    .testimonial-card{ opacity:1; transform:none !important; filter:blur(0) !important; position:relative; }
    .testimonial-card:not(.active){ display:none; }
    .feedback-particle{ display:none; }
    .feedback-bg::before,.feedback-bg::after{ animation:none; }
    .tecnologia-bg::before,.tecnologia-bg::after{ animation:none; }
    .tech-particle{ display:none; }
    .tech-card.reveal-blur{ opacity:1; filter:blur(0); transform:none; }
    .tech-card::after{ display:none; }
  }

  /* ============ SECCIÓN HABLEMOS / CONVERSEMOS ============ */
  .hablemos{
    position:relative;
    background:linear-gradient(180deg,#fff 0%,#f4f1f1 66%,#f4f1f1 100%);
    padding:120px var(--space-x) 60px;
    overflow:hidden;
    text-align:center;
    min-height:calc(100vh - 55px);
    display:flex; flex-direction:column; justify-content:center;
  }
  .hablemos-bg{
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:
      radial-gradient(ellipse 60% 40% at 20% 30%,rgba(255,61,127,.06),transparent 70%),
      radial-gradient(ellipse 60% 40% at 80% 70%,rgba(74,95,232,.06),transparent 70%);
  }
  .hablemos-content{
    position:relative; z-index:1;
    max-width:var(--container-max); margin:0 auto;
  }
  .hablemos-subtitle{
    font-family:var(--font-ui); font-weight:400;
    font-size:clamp(1.3rem,2.5vw,2.6rem);
    color:#333; line-height:1.3;
    margin-bottom:24px;
  }
  .hablemos-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(3rem,9vw,7.5rem);
    letter-spacing:.015em; line-height:1;
    color:#14141A;
    margin-bottom:56px;
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    min-height:1.1em;
  }
  .hablemos-title-word{
    display:inline-block;
    position:relative;
    transform-style:preserve-3d;
    perspective:600px;
  }
  .hablemos-title-word span{
    display:inline-block;
    position:absolute; top:0; left:50%;
    transform:translateX(-50%) rotateX(90deg);
    opacity:0;
    white-space:nowrap;
    background:linear-gradient(180deg,#14141A 0%,#6B7280 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease;
  }
  .hablemos-title-word span.active{
    transform:translateX(-50%) rotateX(0deg);
    opacity:1;
  }
  .hablemos-title-word span.exit{
    transform:translateX(-50%) rotateX(-90deg);
    opacity:0;
  }
  .hablemos-title-word .placeholder{
    position:relative; visibility:hidden;
  }
  .hablemos-socials{
    display:flex; align-items:center; justify-content:center;
    gap:16px; margin-bottom:48px;
  }
  .hablemos-social{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .hablemos-social-bg{
    width:52px; height:52px;
    display:block;
  }
  .hablemos-social-bg svg{
    width:100%; height:100%; display:block;
  }
  .hablemos-social-icon{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:24px; height:24px;
  }
  .hablemos-social-icon svg{
    width:100%; height:100%; display:block;
  }
  .hablemos-social--standalone{
    width:44px; height:44px;
  }
  .hablemos-social--standalone svg{
    width:100%; height:100%; display:block;
  }
  .hablemos-social:hover{
    transform:translateY(-6px) scale(1.08);
  }
  /* Hover: círculo de fondo pasa a azul con relleno blanco */
  .hablemos-social:hover .hablemos-social-bg svg path{
    stroke:#4A5FE8; fill:#fff;
  }
  /* Hover: icono interior pasa a azul */
  .hablemos-social:hover .hablemos-social-icon svg path,
  .hablemos-social:hover .hablemos-social-icon svg circle{
    stroke:#4A5FE8; fill:#4A5FE8;
  }
  /* Hover: WhatsApp standalone — solo el borde pasa a azul, el teléfono también */
  .hablemos-social--standalone:hover svg path:first-child{
    stroke:#4A5FE8; fill:#fff;
  }
  .hablemos-social--standalone:hover svg path:last-child{
    stroke:#4A5FE8;
  }
  .hablemos-social:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:12px; }
  .hablemos-copyright{
    font-family:var(--font-ui); font-size:.82rem; font-weight:500;
    color:#333; line-height:1.6;
  }
  .hablemos-copyright p{ margin:0; }
  .hablemos-copyright p:first-child{ font-weight:700; margin-bottom:2px; }
  @media (max-width:768px){
    .hablemos{ min-height:calc(100vh - 60px); }
  }
  @media (max-width:640px){
    .hablemos{ padding:80px 24px 40px; min-height:calc(100vh - 60px); }
    .hablemos-socials{ gap:12px; }
    .hablemos-social-bg{ width:44px; height:44px; }
    .hablemos-social-icon{ width:20px; height:20px; }
    .hablemos-social--standalone{ width:38px; height:38px; }
  }
  @media (max-width:480px){
    .hablemos{ min-height:calc(100vh - 56px); }
  }