:root{
    --bg:#050b16;
    --bg-2:#081020;
    --surface:#0b1526;
    --surface-2:#0e1a2f;
    --border:#1b2a42;
    --border-soft:#152136;
    --text:#f4f7fb;
    --text-muted:#93a5c2;
    --text-dim:#5c7093;
    --accent:#37b6ff;
    --accent-2:#1e8fe0;
    --accent-soft:rgba(55,182,255,.12);
    --pill-bg:rgba(55,182,255,.08);
    --shadow:0 20px 60px -25px rgba(0,0,0,.6);
  }
  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    margin:0;
    padding-inline:0;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  h1,h2,h3{font-family:'Sora',system-ui,sans-serif;text-wrap:balance;margin:0;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1240px;margin-inline:auto;padding-inline:24px;}
  section{padding-block:88px;}
  @media (max-width:720px){ section{padding-block:56px;} }

  /* subtle background texture */
  .bg-grid{
    position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(1000px 500px at 78% -10%, rgba(55,182,255,.16), transparent 60%),
      radial-gradient(700px 400px at 5% 30%, rgba(55,182,255,.06), transparent 60%),
      var(--bg);
    overflow:hidden;
  }
  .bg-grid::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(55,182,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(55,182,255,.05) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(1100px 700px at 70% 0%, #000 30%, transparent 78%);
    -webkit-mask-image:radial-gradient(1100px 700px at 70% 0%, #000 30%, transparent 78%);
  }
  #particles{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
  .orb{
    position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;
    background:radial-gradient(circle, var(--accent), transparent 70%);
    animation:orbfloat 22s ease-in-out infinite;
  }
  .orb-1{width:420px;height:420px;top:-140px;right:-100px;animation-delay:0s;}
  .orb-2{width:320px;height:320px;bottom:-40px;left:-80px;animation-delay:-8s;opacity:.22;}
  .orb-3{width:260px;height:260px;top:55%;right:12%;animation-delay:-14s;opacity:.18;}
  @keyframes orbfloat{
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(-30px,26px) scale(1.08);}
    66%{transform:translate(24px,-18px) scale(.94);}
  }

  /* scroll progress */
  .progress-bar{position:fixed;top:0;left:0;height:2.5px;width:0%;background:linear-gradient(90deg,var(--accent),#8de8ff);z-index:60;box-shadow:0 0 10px 1px rgba(55,182,255,.7);transition:width .1s linear;}

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-stagger.in-view > *{animation:none;}
  .r-delay-1{transition-delay:.08s;}
  .r-delay-2{transition-delay:.16s;}
  .r-delay-3{transition-delay:.24s;}
  .r-delay-4{transition-delay:.32s;}

  /* animated gradient accent text */
  .accent.grad-text{
    background:linear-gradient(90deg,#37b6ff,#8de8ff,#37b6ff);
    background-size:200% auto;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:gradflow 6s linear infinite;
  }
  @keyframes gradflow{
    0%{background-position:0% 50%;}
    100%{background-position:200% 50%;}
  }

  /* blinking cursor for code typing */
  .cursor-blink{display:inline-block;width:7px;height:1em;background:var(--accent);vertical-align:text-bottom;margin-left:2px;animation:blink 1s step-end infinite;}
  @keyframes blink{50%{opacity:0;}}

  /* hero load-in */
  .hero-in-1{opacity:0;transform:translateY(18px);animation:heroin .8s cubic-bezier(.2,.7,.2,1) .1s forwards;}
  .hero-visual{opacity:0;animation:heroin2 .9s cubic-bezier(.2,.7,.2,1) .28s forwards;}
  @keyframes heroin{ to{opacity:1;transform:translateY(0);} }
  @keyframes heroin2{ to{opacity:1;} }

  /* NAV */
  header.nav{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
    background:rgba(5,11,22,.78);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav-inner{
    max-width:1240px;margin-inline:auto;padding-inline:24px;
    height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .logo{font-family:'Sora';font-weight:700;font-size:19px;display:flex;align-items:center;gap:7px;letter-spacing:-.01em;}
  .logo .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 2px var(--accent);}
  nav.links{display:flex;gap:32px;font-size:14.5px;font-weight:500;color:var(--text-muted);}
  nav.links a{position:relative;padding-block:4px;transition:color .15s;}
  nav.links a:hover, nav.links a:focus-visible{color:var(--text);}
  nav.links a.active{color:var(--text);}
  nav.links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:2px;background:var(--accent);border-radius:2px;}
  .nav-cta{display:none;}
  @media (min-width:860px){ .nav-cta{display:inline-flex;} }
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter';font-weight:600;font-size:14.5px;
    padding:12px 22px;border-radius:999px;
    cursor:pointer;border:1px solid transparent;
    transition:transform .18s cubic-bezier(.2,.8,.3,1.3), box-shadow .2s, background .15s, border-color .15s;
    white-space:nowrap;position:relative;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--accent);color:#031521;box-shadow:0 8px 24px -8px rgba(55,182,255,.6);}
  .btn-primary:hover{background:#4cc0ff;box-shadow:0 10px 32px -6px rgba(55,182,255,.85);}
  .btn-primary svg{transition:transform .25s;}
  .btn-primary:hover svg{transform:translateX(3px);}
  .btn-ghost{background:transparent;border-color:var(--border);color:var(--text);}
  .btn-ghost:hover{border-color:var(--accent);background:var(--accent-soft);}
  .btn-dark{background:#eaf4ff;color:#04121f;}
  .btn-dark:hover{background:#fff;}
  .btn svg{width:15px;height:15px;flex-shrink:0;}

  .mobile-toggle{display:flex;background:none;border:1px solid var(--border);border-radius:10px;padding:8px;color:var(--text);}
  @media (min-width:860px){ .mobile-toggle{display:none;} }
  nav.links{display:none;}
  @media (min-width:860px){ nav.links{display:flex;} }

  /* EYEBROW PILL */
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid var(--border);border-radius:999px;
    padding:7px 16px;font-size:12px;font-weight:600;
    letter-spacing:.10em;text-transform:uppercase;color:var(--accent);
    background:var(--pill-bg);
  }

  /* HERO */
  .hero{padding-top:28px;padding-bottom:120px;position:relative;}
  @media (max-width:980px){ .hero{padding-bottom:56px;} }
  .hero .wrap{max-width:1480px;}
  .hero-grid{display:grid;grid-template-columns:0.86fr 1.2fr;gap:56px;align-items:start;}
  @media (max-width:1240px){ .hero-grid{grid-template-columns:1fr 1.05fr;gap:36px;} }
  @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:20px;} }
  .hero h1{font-size:clamp(38px,5.4vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-block:22px 18px;}
  .hero h1 .accent{color:var(--accent);}
  .hero p.lead{font-size:17.5px;line-height:1.6;color:var(--text-muted);max-width:46ch;margin-bottom:32px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;}
  .feature-row{display:grid;grid-template-columns:repeat(4,auto);gap:28px;}
  @media (max-width:640px){ .feature-row{grid-template-columns:repeat(2,1fr);} }
  .feature{display:flex;align-items:center;gap:10px;}
  .feature .ic{
    width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;
  }
  .feature .ic svg{width:18px;height:18px;}
  .feature span{font-size:13.5px;font-weight:500;color:var(--text-muted);line-height:1.3;}

  /* HERO VISUAL */
  .hero-visual{position:relative;display:flex;justify-content:center;perspective:1400px;margin-top:-18px;min-height:560px;}
  .scroll-card{position:relative;width:100%;max-width:920px;height:560px;transform-style:preserve-3d;transform-origin:center 82%;will-change:transform;}
  @media (max-width:980px){ .hero-visual{min-height:0;} .scroll-card{height:auto;max-width:520px;} }

  @keyframes floaty{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }

  .hv-glow{
    position:absolute;top:8%;left:50%;transform:translateX(-50%);
    width:560px;height:560px;max-width:120%;
    background:radial-gradient(circle, rgba(55,182,255,.32), transparent 68%);
    filter:blur(10px);pointer-events:none;z-index:1;
  }
  .hv-glow-2{
    top:auto;bottom:-8%;left:10%;transform:none;
    width:480px;height:480px;
    background:radial-gradient(circle, rgba(141,232,255,.22), transparent 70%);
  }

  /* SPOTLIGHT — luz ambiental que cubre todo el hero, más intensa donde está el mouse */
  .hero-spotlight{
    position:absolute;inset:-6%;z-index:0;pointer-events:none;border-radius:32px;overflow:hidden;
    opacity:.55;transition:opacity .35s ease;
    background:radial-gradient(720px circle at var(--sx,50%) var(--sy,30%), rgba(255,255,255,.16), rgba(55,182,255,.12) 38%, transparent 66%);
  }
  .hero-visual:hover .hero-spotlight{opacity:1;}
  @media (max-width:980px){ .hero-spotlight{display:none;} }

  /* halo/borde luminoso reutilizable en cada mockup del hero */
  .hv-glowring{
    box-shadow:var(--shadow), 0 0 0 1px rgba(55,182,255,.18), 0 0 60px -12px rgba(55,182,255,.55);
  }

  .hv-photo{
    position:absolute;right:-2%;bottom:-56px;z-index:3;width:min(300px,58%);
    animation:floaty 7s ease-in-out infinite;pointer-events:none;
  }
  .hv-photo-big{width:min(340px,64%);bottom:-64px;}
  .hv-photo img{
    width:100%;display:block;
    -webkit-mask-image:linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 90%, transparent 100%);
    filter:drop-shadow(0 25px 35px rgba(0,0,0,.5));
  }
  @media (max-width:980px){ .hv-photo{position:relative;right:auto;bottom:auto;width:min(320px,78%);margin:0 auto;} }

  .hv-mock{
    position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:16px;
    box-shadow:var(--shadow);animation:floaty 7s ease-in-out infinite;will-change:transform;overflow:hidden;
  }
  .hv-mock-left{top:0%;left:-2%;width:min(620px,84%);z-index:2;}
  .hv-mock-phone{top:0%;right:2%;left:auto;width:min(190px,24%);z-index:3;animation-delay:-3.4s;}
  .hv-mock-projects{top:56%;bottom:auto;left:-2%;right:auto;width:min(540px,68%);z-index:2;animation-delay:-5.1s;}
  @media (max-width:980px){
    .hv-mock{position:static;width:100%!important;margin:16px auto 0;max-width:420px;}
    .hv-mock-phone,.hv-mock-projects{display:none;}
  }

  .hv-mock__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border-soft);background:var(--surface-2);}
  .hvdot{width:7px;height:7px;border-radius:50%;background:var(--border);}
  .hv-mock__nav{display:flex;align-items:center;gap:12px;font-size:10.5px;color:var(--text-dim);flex:1;margin-left:4px;white-space:nowrap;overflow:hidden;}
  .hv-mock__nav b{font-family:'Sora';font-size:12px;color:var(--text);font-weight:700;margin-right:4px;}
  .hv-mock__nav span{display:none;}
  @media (min-width:520px){ .hv-mock__nav span{display:inline;} }
  .hv-mock__cta{font-size:10px;font-weight:700;background:var(--text);color:#04121f;padding:5px 12px;border-radius:999px;flex-shrink:0;}

  /* LAPTOP — landing Nexora */
  .hv-laptop__hero{position:relative;padding:22px 20px 16px;overflow:hidden;background:linear-gradient(160deg, rgba(55,182,255,.08), transparent 55%);}
  .hv-laptop__text{max-width:62%;}
  .hv-laptop__text h4{font-family:'Sora';font-size:22px;font-weight:800;line-height:1.18;margin:0 0 10px;}
  .hv-laptop__text h4 span{color:var(--accent);}
  .hv-laptop__text p{font-size:11.5px;color:var(--text-muted);line-height:1.55;margin:0 0 14px;max-width:34ch;}
  .hv-laptop__ctas{display:flex;gap:8px;flex-wrap:wrap;}
  .hv-laptop__btn{font-size:11px;font-weight:700;background:var(--accent);color:#031521;padding:8px 14px;border-radius:8px;white-space:nowrap;}
  .hv-laptop__btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
  .hv-laptop__photo{
    position:absolute;right:16px;top:16px;bottom:16px;width:38%;border-radius:10px;
    background:linear-gradient(150deg,#1a2c42,#0c1626);border:1px solid var(--border-soft);
  }
  .hv-laptop__badge{
    position:absolute;right:26px;bottom:26px;background:var(--surface);border:1px solid var(--border);
    font-size:9px;font-weight:700;line-height:1.5;padding:8px 11px;border-radius:8px;box-shadow:var(--shadow);
  }
  .hv-laptop__badge em{font-style:normal;font-weight:600;color:var(--text-dim);}
  @media (max-width:640px){ .hv-laptop__text{max-width:100%;} .hv-laptop__photo,.hv-laptop__badge{display:none;} }

  .hv-laptop__feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-soft);border-top:1px solid var(--border-soft);}
  .hv-laptop__feats div{
    background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:14px 6px;font-size:9.5px;font-weight:600;color:var(--text-muted);text-align:center;
  }
  .hv-laptop__feats svg{width:16px;height:16px;color:var(--accent);}
  @media (max-width:640px){ .hv-laptop__feats{grid-template-columns:repeat(2,1fr);} }

  /* PHONE — landing mobile */
  .hv-mock-phone{padding:0;}
  .hv-phone__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border-soft);background:var(--surface-2);}
  .hv-phone__logo{font-family:'Sora';font-weight:700;font-size:11px;}
  .hv-phone__menu{color:var(--text-dim);}
  .hv-phone__body{padding:16px 14px;}
  .hv-phone__body h5{font-family:'Sora';font-size:15px;font-weight:800;line-height:1.22;margin:0 0 8px;}
  .hv-phone__body h5 span{color:var(--accent);}
  .hv-phone__body p{font-size:9.5px;color:var(--text-muted);line-height:1.5;margin:0 0 12px;}
  .hv-phone__photo{aspect-ratio:16/11;border-radius:8px;background:linear-gradient(150deg,#1a2c42,#0c1626);border:1px solid var(--border-soft);}
  .hv-phone__stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px;}
  .hv-phone__stats div{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:8px;padding:8px 9px;}
  .hv-phone__stats b{display:block;font-family:'JetBrains Mono';font-size:13px;color:var(--accent);font-weight:700;}
  .hv-phone__stats span{display:block;font-size:8.5px;color:var(--text-dim);margin-top:1px;}

  /* PANEL — nuestros proyectos */
  .hv-projmock__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border-soft);}
  .hv-projmock__bar b{font-family:'Sora';font-size:13px;font-weight:700;}
  .hv-projmock__tabs{display:flex;gap:6px;flex-wrap:wrap;}
  .hv-projmock__tabs span{font-size:9px;font-weight:600;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border-soft);border-radius:999px;padding:4px 9px;white-space:nowrap;}
  .hv-projmock__tabs span.active{background:var(--accent);color:#031521;border-color:var(--accent);}
  @media (max-width:640px){ .hv-projmock__tabs span:not(.active){display:none;} }
  .hv-projmock__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 18px 18px;}
  @media (max-width:640px){ .hv-projmock__grid{grid-template-columns:1fr 1fr;} }
  .hv-projmock__card{aspect-ratio:4/3;border-radius:10px;position:relative;overflow:hidden;border:1px solid var(--border-soft);display:flex;align-items:flex-end;}
  .hv-projmock__card.c1{background:linear-gradient(160deg,#213548,#0c1a28);}
  .hv-projmock__card.c2{background:linear-gradient(160deg,#1a2c42,#0c1626);}
  .hv-projmock__card.c3{background:linear-gradient(160deg,#243d2c,#0c1f14);}
  .hv-projmock__card span{position:relative;display:block;width:100%;padding:9px 10px;font-size:9.5px;font-weight:700;color:var(--text);background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);}
  .hv-projmock__card em{display:block;font-style:normal;font-size:8px;font-weight:500;color:var(--text-muted);margin-top:1px;}

  /* SECTION HEADS */
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;}
  .sec-head h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin-block:14px 10px;}
  .sec-head h2 .accent{color:var(--accent);}
  .sec-head p{color:var(--text-muted);font-size:15.5px;max-width:52ch;}
  .sec-head .link{font-size:14px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;flex-shrink:0;}
  .sec-head .link svg{width:14px;height:14px;}

  /* PROJECTS */
  .projects{background:var(--bg-2);border-block:1px solid var(--border-soft);}
  .proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:840px;margin-inline:auto;}
  @media (max-width:720px){ .proj-grid{grid-template-columns:1fr;} }
  .proj-card{
    background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;
    display:flex;flex-direction:column;
    transition:border-color .25s, transform .25s, box-shadow .25s;
    transform-style:preserve-3d;will-change:transform;position:relative;
  }
  .proj-card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(55,182,255,.55), transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .3s;
  }
  .proj-card:hover::before{opacity:1;}
  .proj-card:hover{border-color:rgba(55,182,255,.45);box-shadow:0 24px 50px -20px rgba(55,182,255,.35);}
  .proj-thumb{aspect-ratio:16/11;background:var(--surface-2);position:relative;overflow:hidden;border-bottom:1px solid var(--border-soft);}
  .proj-thumb img{width:100%;height:100%;object-fit:cover;}
  .proj-thumb svg{transition:transform .5s ease;}
  .proj-card:hover .proj-thumb svg{transform:scale(1.04);}
  .proj-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
  .proj-tag{
    align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.03em;
    color:var(--accent);background:var(--accent-soft);border:1px solid rgba(55,182,255,.25);
    padding:4px 10px;border-radius:999px;
  }
  .proj-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .proj-title-row h3{font-size:19px;font-weight:700;}
  .proj-arrow{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0;
    transition:background .15s,color .15s,border-color .15s;
  }
  .proj-card:hover .proj-arrow{background:var(--accent);color:#031521;border-color:var(--accent);}
  .proj-arrow svg{width:14px;height:14px;}
  .proj-body p{font-size:14px;color:var(--text-muted);line-height:1.55;flex:1;}
  .chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;}
  .chip{font-size:11.5px;color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:4px 10px;}

  /* TIPOS DE WEB */
  .types-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
  .type-tab{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;border-radius:999px;border:1px solid var(--border);
    background:var(--surface);color:var(--text-muted);font-size:13.5px;font-weight:600;
    cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .2s;
  }
  .type-tab svg{width:16px;height:16px;flex-shrink:0;}
  .type-tab:hover{border-color:rgba(55,182,255,.4);color:var(--text);}
  .type-tab.active{background:var(--accent);border-color:var(--accent);color:#031521;transform:translateY(-1px);}

  .type-preview{display:grid;grid-template-columns:1fr;gap:16px;}
  .browser-mock{
    background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;
    box-shadow:var(--shadow);
  }
  .browser-mock__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border-soft);background:var(--surface-2);}
  .browser-mock__bar span.dot{width:9px;height:9px;border-radius:50%;}
  .browser-mock__bar span.dot:nth-child(1){background:#ff6b6b;}
  .browser-mock__bar span.dot:nth-child(2){background:#ffd166;}
  .browser-mock__bar span.dot:nth-child(3){background:#57e08f;}
  .browser-mock__url{
    margin-left:10px;font-family:'JetBrains Mono';font-size:11.5px;color:var(--text-dim);
    background:var(--surface);border:1px solid var(--border-soft);border-radius:999px;padding:5px 14px;flex:1;max-width:280px;
    transition:all .2s;
  }
  .browser-mock__screen{position:relative;aspect-ratio:1400/733;background:var(--surface-2);}
  .type-panel{
    display:none;animation:panelIn .45s ease;position:absolute;inset:0;
  }
  .type-panel.active{display:block;}
  .type-panel__img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;}
  @keyframes panelIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

  .type-caption{
    display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:14px;
    padding:14px 18px;background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;
  }
  .type-caption svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;}

  /* ===== plantilla base: nav de cada template ===== */
  .tpl{font-family:'Inter',sans-serif;}
  .tpl-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;}
  .tpl-word{font-weight:700;letter-spacing:.02em;}

  /* ===== GASTRONOMÍA — "La Fonda" ===== */
  .tpl-gastro{background:#17110b;color:#f2e6d3;}
  .tpl-gastro .tpl-nav{border-bottom:1px solid rgba(232,192,122,.18);}
  .tpl-gastro .tpl-word{font-family:'Fraunces',serif;font-size:17px;color:#f2e6d3;display:flex;align-items:center;gap:8px;}
  .tpl-gastro .tpl-word i{width:7px;height:7px;border-radius:50%;background:#e8c07a;font-style:normal;}
  .tpl-gastro .gastro-links{display:flex;gap:20px;font-size:11px;color:#c9b393;letter-spacing:.04em;}
  .tpl-gastro .gastro-links span:first-child{color:#e8c07a;}
  .tpl-gastro .gastro-cta{font-size:10.5px;font-weight:700;color:#17110b;background:#e8c07a;padding:7px 14px;border-radius:999px;}

  .gastro-hero{position:relative;padding:30px 22px 24px;overflow:hidden;}
  .gastro-hero::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(220px 220px at 88% 18%, rgba(232,192,122,.22), transparent 70%),
      radial-gradient(180px 180px at 8% 90%, rgba(180,90,40,.18), transparent 70%);
  }
  .gastro-hero__eyebrow{position:relative;font-size:10.5px;letter-spacing:.16em;color:#e8c07a;text-transform:uppercase;}
  .gastro-hero h4{position:relative;font-family:'Fraunces',serif;font-weight:500;font-size:27px;line-height:1.15;margin:10px 0 10px;max-width:60%;}
  .gastro-hero p{position:relative;font-size:12px;color:#c9b393;max-width:55%;line-height:1.55;margin-bottom:16px;}
  .gastro-hero__btn{position:relative;display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid #e8c07a;color:#e8c07a;font-size:11px;font-weight:600;padding:9px 16px;border-radius:2px;letter-spacing:.03em;}
  .gastro-plate{
    position:absolute;right:18px;top:20px;width:88px;height:88px;border-radius:50%;
    background:
      radial-gradient(circle at 40% 35%, #d98a3d, #7a3d16 70%),
      conic-gradient(from 0deg, rgba(255,255,255,.08), transparent 30%, rgba(255,255,255,.08) 60%, transparent 90%);
    box-shadow:0 0 0 3px rgba(242,230,211,.12), 0 14px 26px -10px rgba(0,0,0,.6);
    display:flex;align-items:center;justify-content:center;
  }
  .gastro-plate svg{width:76%;height:76%;}
  .gastro-plate__rating{
    position:absolute;right:14px;top:112px;background:#241a10;border:1px solid rgba(232,192,122,.3);
    border-radius:999px;padding:5px 11px;font-size:10px;font-weight:700;color:#e8c07a;display:flex;align-items:center;gap:4px;
  }
  .gastro-menu{padding:20px 22px 24px;}
  .gastro-cat{font-family:'Fraunces',serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e8c07a;margin:0 0 10px;}
  .gastro-cat:not(:first-child){margin-top:18px;}
  .gastro-item{display:flex;align-items:baseline;gap:6px;padding:6px 0;}
  .gastro-item b{font-family:'Fraunces',serif;font-weight:500;font-size:13.5px;color:#f2e6d3;white-space:nowrap;}
  .gastro-item .leader{flex:1;border-bottom:1px dotted rgba(242,230,211,.28);height:1px;margin-bottom:4px;}
  .gastro-item .price{font-size:12.5px;color:#e8c07a;font-weight:600;white-space:nowrap;}
  .gastro-item .chef{font-size:8.5px;font-weight:700;letter-spacing:.05em;color:#17110b;background:#e8c07a;border-radius:4px;padding:2px 5px;margin-left:6px;}
  .gastro-item .desc{display:block;font-size:10.5px;color:#a3907a;margin-top:1px;}

  /* ===== E-COMMERCE — "Nova" ===== */
  .tpl-shop{background:#0b1120;color:#eef4ff;}
  .shop-announce{background:linear-gradient(90deg,var(--accent),#8de8ff);color:#031521;text-align:center;font-size:10.5px;font-weight:700;padding:7px;letter-spacing:.02em;}
  .tpl-shop .tpl-nav{border-bottom:1px solid var(--border-soft);}
  .tpl-shop .tpl-word{font-family:'Sora',sans-serif;font-size:16px;}
  .shop-search{flex:1;max-width:180px;margin:0 16px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:999px;padding:6px 12px;font-size:10.5px;color:var(--text-dim);display:none;}
  @media (min-width:520px){ .shop-search{display:block;} }
  .shop-cart{position:relative;color:var(--text);}
  .shop-cart svg{width:18px;height:18px;}
  .shop-cart em{position:absolute;top:-7px;right:-8px;background:var(--accent);color:#031521;font-size:8.5px;font-style:normal;font-weight:700;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

  .shop-hero{position:relative;padding:26px 22px;display:flex;align-items:center;gap:18px;overflow:hidden;background:linear-gradient(135deg,#111c33,#0b1120);}
  .shop-badge{
    flex-shrink:0;width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#1a5f8f);
    display:flex;flex-direction:column;align-items:center;justify-content:center;color:#031521;font-family:'Sora';
    box-shadow:0 0 0 5px rgba(55,182,255,.14);transform:rotate(-8deg);
  }
  .shop-badge b{font-size:19px;font-weight:800;line-height:1;}
  .shop-badge span{font-size:8px;font-weight:700;letter-spacing:.04em;}
  .shop-hero h4{font-family:'Sora';font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;}
  .shop-hero p{font-size:11.5px;color:var(--text-muted);margin:0 0 12px;}
  .shop-hero__btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#031521;font-size:11px;font-weight:700;padding:8px 15px;border-radius:8px;}

  .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px 22px 22px;}
  @media (max-width:540px){ .shop-grid{grid-template-columns:repeat(2,1fr);} }
  .shop-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;position:relative;}
  .shop-card__img{aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;}
  .shop-card__img svg{width:64%;height:64%;}
  .shop-tag{position:absolute;top:6px;left:6px;font-size:8px;font-weight:800;letter-spacing:.03em;padding:3px 6px;border-radius:4px;color:#031521;}
  .shop-tag.new{background:#57e08f;}
  .shop-tag.sale{background:#ff8a5c;}
  .shop-rate{display:flex;gap:1px;padding:7px 8px 0;}
  .shop-rate svg{width:9px;height:9px;color:#ffd166;}
  .shop-card__meta{padding:5px 8px 9px;}
  .shop-card__meta b{display:block;font-size:10px;font-weight:700;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .shop-price{display:flex;align-items:baseline;gap:5px;}
  .shop-price b{font-family:'JetBrains Mono';font-size:11px;color:var(--accent);}
  .shop-price s{font-size:9px;color:var(--text-dim);}

  /* ===== SERVICIOS — "Iron Studio" ===== */
  .tpl-fit{background:#0a0f0c;color:#eefbf3;}
  .tpl-fit .tpl-nav{border-bottom:1px solid rgba(87,224,143,.16);}
  .tpl-fit .tpl-word{font-family:'Sora';font-size:16px;}
  .fit-cta{font-size:10.5px;font-weight:700;color:#06220f;background:#57e08f;padding:7px 14px;border-radius:8px;}
  .fit-hero{padding:20px 22px 6px;}
  .fit-hero h4{font-family:'Sora';font-size:19px;font-weight:800;margin:0 0 12px;max-width:70%;}
  .fit-stats{display:flex;gap:22px;margin-bottom:18px;}
  .fit-stats div b{display:block;font-family:'JetBrains Mono';font-size:18px;color:#57e08f;font-weight:700;}
  .fit-stats div span{font-size:9.5px;color:#8fb39d;}
  .fit-sched{padding:0 22px 20px;}
  .fit-sched__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
  .fit-day{background:var(--surface,#0f1712);background:#111c15;border:1px solid rgba(87,224,143,.12);border-radius:9px;padding:8px 5px;text-align:center;}
  .fit-day.today{border-color:#57e08f;background:rgba(87,224,143,.1);}
  .fit-day em{display:block;font-style:normal;font-size:9px;color:#8fb39d;margin-bottom:8px;letter-spacing:.03em;}
  .fit-block{font-size:8px;font-weight:700;border-radius:5px;padding:4px 2px;margin-bottom:4px;line-height:1.25;}
  .fit-block.b1{background:rgba(87,224,143,.18);color:#8ff0b8;}
  .fit-block.b2{background:rgba(55,182,255,.18);color:#8dd7ff;}
  .fit-next{
    margin:0 22px 22px;background:linear-gradient(120deg,#132018,#0d1710);border:1px solid rgba(87,224,143,.25);
    border-radius:12px;padding:13px 15px;display:flex;align-items:center;gap:12px;
  }
  .fit-next__time{font-family:'JetBrains Mono';font-size:17px;font-weight:700;color:#57e08f;flex-shrink:0;}
  .fit-next b{display:block;font-size:12px;font-weight:700;}
  .fit-next span{font-size:10px;color:#8fb39d;}
  .fit-next__btn{margin-left:auto;font-size:10px;font-weight:700;color:#06220f;background:#57e08f;padding:7px 12px;border-radius:7px;white-space:nowrap;}

  /* ===== MODA — "Studio 21" ===== */
  .tpl-fashion{background:#f5f3ee;color:#161513;}
  .tpl-fashion .tpl-nav{justify-content:center;border-bottom:1px solid rgba(0,0,0,.08);padding:16px 20px 14px;}
  .tpl-fashion .tpl-word{font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;letter-spacing:.03em;}
  .fashion-hero{position:relative;padding:26px 22px 6px;}
  .fashion-season{font-size:10px;letter-spacing:.18em;color:#8a8578;text-transform:uppercase;}
  .fashion-hero h4{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;line-height:.98;margin:8px 0 14px;}
  .fashion-hero__btn{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-bottom:1.5px solid #161513;padding-bottom:2px;}
  .fashion-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;padding:20px 22px 24px;}
  .fashion-card{display:flex;flex-direction:column;gap:8px;}
  .fashion-card.tall{grid-row:span 2;}
  .fashion-img{border-radius:2px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .fashion-img svg{width:52%;height:52%;}
  .fashion-card.tall .fashion-img{aspect-ratio:3/4.3;}
  .fashion-card:not(.tall) .fashion-img{aspect-ratio:3/2.2;}
  .fashion-card b{font-size:11px;font-weight:600;}
  .fashion-card span{font-family:'JetBrains Mono';font-size:10.5px;color:#8a8578;}

  /* ===== JOYERÍA — "Aurea" ===== */
  .tpl-jewel{background:#120e08;color:#f0e3c6;text-align:center;}
  .tpl-jewel .tpl-nav{justify-content:center;flex-direction:column;gap:6px;padding:20px 20px 14px;}
  .tpl-jewel .tpl-word{font-family:'Cormorant Garamond',serif;font-size:19px;letter-spacing:.12em;color:#e6c675;}
  .tpl-jewel .jewel-rule{width:34px;height:1px;background:rgba(230,198,117,.5);}
  .jewel-eyebrow{font-size:9.5px;letter-spacing:.22em;color:#a98a4c;text-transform:uppercase;margin-top:16px;}
  .jewel-hero h4{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:25px;color:#f0e3c6;margin:8px auto 18px;max-width:70%;line-height:1.25;}
  .jewel-feature{
    width:150px;height:150px;margin:0 auto 8px;border-radius:50%;position:relative;
    background:radial-gradient(circle at 42% 38%, #4a3b1c, #1a1408 72%);
    box-shadow:0 0 0 1px rgba(230,198,117,.25), 0 0 50px -10px rgba(230,198,117,.35);
  }
  .jewel-feature svg{position:absolute;inset:0;margin:auto;width:46px;height:46px;color:#e6c675;}
  .jewel-feature__tag{font-size:9.5px;color:#e6c675;margin:10px 0 20px;letter-spacing:.03em;}
  .jewel-row{display:flex;justify-content:center;gap:14px;padding:0 22px 22px;}
  .jewel-piece{width:64px;}
  .jewel-piece__img{
    width:64px;height:64px;border-radius:50%;margin-bottom:7px;
    background:radial-gradient(circle at 40% 35%, #6b5527, #241c0c 75%);
    box-shadow:0 0 0 1px rgba(230,198,117,.22);
    display:flex;align-items:center;justify-content:center;
  }
  .jewel-piece__img svg{width:60%;height:60%;}
  .jewel-piece b{display:block;font-size:9.5px;font-weight:600;color:#f0e3c6;}
  .jewel-piece span{font-family:'JetBrains Mono';font-size:9px;color:#a98a4c;}
  .jewel-foot{font-size:9px;letter-spacing:.14em;color:#a98a4c;text-transform:uppercase;padding-bottom:20px;}

  /* ===== BARBERÍA — "El Barbero" ===== */
  .tpl-barber{background:#140f0d;color:#efe3d3;}
  .barber-stripe{height:5px;background:repeating-linear-gradient(-45deg,#b23a3a 0 10px,#efe3d3 10px 20px,#2c4a63 20px 30px);}
  .tpl-barber .tpl-nav{border-bottom:1px solid rgba(203,178,106,.16);}
  .tpl-barber .tpl-word{font-family:'Sora';font-weight:800;font-size:16px;letter-spacing:-.01em;}
  .barber-links{display:none;gap:18px;font-size:11px;color:#b7a48c;}
  @media (min-width:520px){ .barber-links{display:flex;} }
  .barber-cta{font-size:10.5px;font-weight:700;color:#140f0d;background:#cbb26a;padding:7px 14px;border-radius:4px;}

  .barber-hero{position:relative;padding:26px 22px 24px;overflow:hidden;}
  .barber-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(260px 200px at 92% 20%, rgba(178,58,58,.16), transparent 70%);}
  .barber-hero__eyebrow{position:relative;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#cbb26a;}
  .barber-hero h4{position:relative;font-family:'Sora';font-weight:800;font-size:23px;line-height:1.18;margin:10px 0 10px;max-width:66%;}
  .barber-hero p{position:relative;font-size:12px;color:#b7a48c;max-width:58%;line-height:1.55;margin-bottom:16px;}
  .barber-hero__btn{position:relative;display:inline-flex;align-items:center;gap:7px;background:#cbb26a;color:#140f0d;font-size:11px;font-weight:700;padding:9px 16px;border-radius:6px;}
  .barber-pole{
    position:absolute;right:26px;top:22px;width:20px;height:100px;border-radius:10px;overflow:hidden;
    box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
  }
  .barber-pole__cap{height:9px;background:#8a8f95;}
  .barber-pole__body{
    height:82px;
    background:repeating-linear-gradient(-38deg,#b23a3a 0 9px,#efe3d3 9px 18px,#2c4a63 18px 27px);
  }
  .barber-list{padding:20px 22px 6px;display:flex;flex-direction:column;gap:9px;}
  .barber-item{
    display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;
    background:#1c1512;border:1px solid rgba(203,178,106,.14);border-radius:9px;
  }
  .barber-item.pop{border-color:rgba(203,178,106,.4);}
  .barber-item b{font-size:12.5px;font-weight:700;color:#efe3d3;display:flex;align-items:center;gap:7px;}
  .barber-item em{font-style:normal;font-size:8px;font-weight:700;letter-spacing:.03em;color:#140f0d;background:#cbb26a;padding:2px 6px;border-radius:4px;}
  .barber-item span{display:block;font-size:10px;color:#8a7a63;margin-top:2px;}
  .barber-price{font-family:'JetBrains Mono';font-size:13px;font-weight:700;color:#cbb26a;flex-shrink:0;}
  .barber-foot{padding:6px 22px 20px;font-size:10px;color:#8a7a63;letter-spacing:.02em;}
  @media (max-width:520px){ .barber-hero h4,.barber-hero p{max-width:100%;} .barber-pole{display:none;} }

  /* ===== DELIVERY — "Humo Burgers" ===== */
  .tpl-burger{background:#150d08;color:#f7ece0;}
  .tpl-burger .tpl-nav{border-bottom:1px solid rgba(255,138,92,.16);gap:10px;}
  .tpl-burger .tpl-word{font-family:'Sora';font-weight:800;font-size:15px;display:flex;flex-direction:column;line-height:1.05;}
  .tpl-burger .tpl-word span{font-size:9px;font-weight:600;color:#ff8a5c;letter-spacing:.08em;text-transform:uppercase;}
  .burger-time{
    margin-left:auto;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#ff8a5c;
    background:rgba(255,138,92,.12);border:1px solid rgba(255,138,92,.3);padding:5px 10px;border-radius:999px;white-space:nowrap;
  }
  .burger-cart{position:relative;color:#f7ece0;flex-shrink:0;}
  .burger-cart svg{width:18px;height:18px;}
  .burger-cart em{position:absolute;top:-7px;right:-8px;background:#ff8a5c;color:#150d08;font-size:8.5px;font-style:normal;font-weight:700;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

  .burger-hero{position:relative;padding:26px 22px 20px;overflow:hidden;}
  .burger-glow{position:absolute;top:-40px;right:-30px;width:220px;height:220px;background:radial-gradient(circle, rgba(255,107,53,.35), transparent 70%);filter:blur(4px);}
  .burger-hero__eyebrow{position:relative;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#ff8a5c;}
  .burger-hero h4{position:relative;font-family:'Sora';font-weight:800;font-size:24px;line-height:1.15;margin:10px 0 10px;max-width:70%;}
  .burger-hero p{position:relative;font-size:12px;color:#c9b3a0;max-width:60%;line-height:1.5;margin-bottom:14px;}
  .burger-hero__btn{position:relative;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#ff6b35,#ff8a5c);color:#150d08;font-size:11.5px;font-weight:800;padding:10px 18px;border-radius:999px;margin-right:12px;}
  .burger-rating{position:relative;font-size:11px;font-weight:700;color:#ffd166;}
  .burger-rating i{font-style:normal;font-weight:500;color:#8a7263;font-size:10px;}

  .burger-info{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 18px;}
  .burger-info div{
    display:flex;align-items:center;gap:6px;font-size:10px;color:#c9b3a0;
    background:#1e1410;border:1px solid rgba(255,138,92,.14);border-radius:999px;padding:6px 11px;
  }
  .burger-info svg{width:12px;height:12px;color:#ff8a5c;flex-shrink:0;}

  .burger-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 22px 22px;}
  .burger-card{background:#1e1410;border:1px solid rgba(255,138,92,.14);border-radius:12px;overflow:hidden;}
  .burger-card__img{aspect-ratio:16/10;position:relative;background:linear-gradient(135deg,#3a2013,#1a0f08);display:flex;align-items:center;justify-content:center;}
  .burger-card__img svg{width:74%;height:74%;}
  .burger-tag{position:absolute;top:8px;left:8px;font-size:8px;font-weight:800;letter-spacing:.03em;padding:3px 7px;border-radius:4px;color:#150d08;}
  .burger-tag.hot{background:#ff6b6b;}
  .burger-tag.combo{background:#ffd166;}
  .burger-card b{display:block;font-size:12px;font-weight:700;margin:9px 10px 2px;}
  .burger-card > span{display:block;font-size:10px;color:#8a7263;margin:0 10px 8px;}
  .burger-row{display:flex;align-items:center;justify-content:space-between;padding:0 10px 10px;}
  .burger-row em{font-style:normal;font-family:'JetBrains Mono';font-size:12.5px;font-weight:700;color:#ff8a5c;}
  .burger-row i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#ff6b35;color:#150d08;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
  @media (max-width:520px){ .burger-hero h4,.burger-hero p{max-width:100%;} }

  /* PROCESS */
  .proc-eyebrow-wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
  .scribble{font-family:'Sora';font-style:italic;font-weight:600;font-size:15px;color:var(--text-dim);max-width:220px;text-align:right;line-height:1.4;transform:rotate(-2deg);}
  .proc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;position:relative;}
  @media (max-width:900px){ .proc-row{grid-template-columns:1fr;gap:28px;} }
  .proc-step{display:flex;flex-direction:column;gap:14px;padding-right:20px;position:relative;}
  .proc-step .num-ic{
    width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--accent);position:relative;
    transition:box-shadow .3s, transform .3s, border-color .3s;
  }
  .proc-step:hover .num-ic{box-shadow:0 0 0 6px var(--accent-soft);transform:translateY(-3px);border-color:rgba(55,182,255,.5);}
  .proc-step .num-ic svg{width:22px;height:22px;}
  .proc-step .arrow-between{
    display:none;position:absolute;right:-6px;top:26px;color:var(--text-dim);
  }
  @media (min-width:901px){ .proc-step:not(:last-child) .arrow-between{display:block;} }
  .proc-step h3{font-size:15.5px;font-weight:700;}
  .proc-step h3 .n{color:var(--accent);font-family:'JetBrains Mono';font-size:13px;margin-right:8px;}
  .proc-step p{font-size:13.5px;color:var(--text-muted);line-height:1.5;}

  /* PARALLAX SHOWCASE */
  .parallax{position:relative;height:150vh;background:#040a15;overflow:hidden;padding-block:0!important;}
  @media (max-width:720px){ .parallax{height:130vh;} }
  .parallax__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .parallax__layers{position:absolute;inset:0;}
  .par-layer{position:absolute;inset:0;will-change:transform;}
  .par-back{
    background:
      radial-gradient(600px 400px at 20% 30%, rgba(55,182,255,.28), transparent 60%),
      radial-gradient(500px 380px at 82% 70%, rgba(55,182,255,.18), transparent 60%);
  }
  .par-back::before{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(55,182,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(55,182,255,.06) 1px, transparent 1px);
    background-size:70px 70px;
    mask-image:radial-gradient(900px 600px at 50% 50%, #000, transparent 75%);
    -webkit-mask-image:radial-gradient(900px 600px at 50% 50%, #000, transparent 75%);
  }
  .par-mid{display:flex;align-items:center;justify-content:center;}
  .par-mid .chip-float{
    position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:10px 16px;font-family:'JetBrains Mono';font-size:12.5px;color:var(--accent);
    box-shadow:0 20px 50px -20px rgba(0,0,0,.7);display:flex;align-items:center;gap:8px;
  }
  .par-mid .chip-float svg{width:15px;height:15px;}
  .chip-float.c1{top:16%;left:12%;}
  .chip-float.c2{top:62%;left:8%;}
  .chip-float.c3{top:22%;right:10%;}
  .chip-float.c4{top:68%;right:14%;}
  @media (max-width:720px){ .par-mid .chip-float{display:none;} .chip-float.c1,.chip-float.c3{display:flex;top:12%;} }
  .par-title{display:flex;align-items:center;justify-content:center;text-align:center;}
  .par-title h2{
    font-size:clamp(34px,7vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--text);
  }
  .par-title p{margin-top:18px;color:var(--text-muted);font-size:16px;max-width:44ch;margin-inline:auto;}
  .par-front{
    background:linear-gradient(180deg, transparent 60%, #040a15 100%);
    pointer-events:none;
  }
  .par-ring{
    position:absolute;top:50%;left:50%;width:640px;height:640px;max-width:120vw;max-height:120vw;
    transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(55,182,255,.18);
  }
  .par-ring.r2{width:840px;height:840px;max-width:150vw;max-height:150vw;border-color:rgba(55,182,255,.1);}

  /* IDEA CORE — escena 3D propia de marca */
  .idea-3d{background:#0f172a;border-block:1px solid var(--border-soft);position:relative;overflow:hidden;}
  .idea-3d__inner{
    position:relative;display:grid;grid-template-columns:0.72fr 1.6fr;gap:0;align-items:center;
    min-height:460px;border-radius:24px;
  }
  @media (max-width:900px){ .idea-3d__inner{grid-template-columns:1fr;min-height:0;} }
  .idea-3d__spotlight{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(560px circle at var(--isx,32%) var(--isy,42%), rgba(56,189,248,.14), transparent 62%);
  }
  .idea-3d__text{position:relative;z-index:2;}
  .idea-3d__text h2{font-size:clamp(24px,2.5vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.16;margin-block:14px 12px;}
  .idea-3d__text .accent{color:#38bdf8;}
  .idea-3d__text p{color:var(--text-muted);font-size:15px;max-width:40ch;line-height:1.65;}
  .idea-3d__canvas-wrap{position:relative;z-index:1;height:min(680px,46vw);}
  .idea-3d__canvas-wrap canvas{width:100%;height:100%;display:block;}
  @media (max-width:900px){ .idea-3d__canvas-wrap{height:340px;} }

  .idea-3d__modules{position:absolute;inset:0;pointer-events:none;z-index:2;}
  .idea-3d__module{
    position:absolute;display:flex;align-items:center;gap:7px;
    padding:9px 14px;border-radius:999px;
    background:rgba(15,23,42,.72);backdrop-filter:blur(6px);
    border:1px solid rgba(56,189,248,.35);
    box-shadow:0 0 24px -6px rgba(56,189,248,.5);
    color:#e2e8f0;font-size:12.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
    opacity:0;transform:translate(-50%,-50%) scale(.7);
    transition:opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .idea-3d__module svg{width:14px;height:14px;color:#38bdf8;flex:none;}
  .idea-3d__module.m1{left:29%;top:22%;transition-delay:.25s;}
  .idea-3d__module.m2{left:50%;top:14%;transition-delay:.32s;}
  .idea-3d__module.m3{left:64%;top:80%;transition-delay:.39s;}
  .idea-3d__canvas-wrap.is-expanded .idea-3d__module{opacity:1;transform:translate(-50%,-50%) scale(1);}
  @media (max-width:900px){
    .idea-3d__module.m1{left:16%;top:18%;}
    .idea-3d__module.m2{left:50%;top:8%;}
    .idea-3d__module.m3{left:78%;top:70%;}
    .idea-3d__module{font-size:11px;padding:7px 11px;}
  }

  .idea-3d__hint{
    position:absolute;left:50%;bottom:10%;transform:translateX(-50%);
    font-size:11.5px;color:var(--text-muted);letter-spacing:.02em;
    opacity:.65;pointer-events:none;transition:opacity .3s ease;
  }
  .idea-3d__canvas-wrap.is-expanded .idea-3d__hint{opacity:0;}

  /* CTA */
  .cta-section{
    position:relative;overflow:hidden;
    background:linear-gradient(120deg, var(--bg-2) 0%, #071120 60%, #081426 100%);
    border-top:1px solid var(--border-soft);
  }
  .cta-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;}
  @media (max-width:900px){ .cta-grid{grid-template-columns:1fr;} }
  .cta-grid h2{font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.02em;margin-block:16px 14px;line-height:1.1;}
  .cta-grid h2 .accent{color:var(--accent);display:block;}
  .cta-grid p.lead{color:var(--text-muted);font-size:16px;max-width:46ch;margin-bottom:28px;}
  .cta-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
  .social-row{display:flex;gap:10px;}
  .social-btn{
    width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--text-muted);
    transition:border-color .15s,color .15s,background .15s;
  }
  .social-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
  .social-btn svg{width:18px;height:18px;}
  .service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  @media (max-width:620px){ .service-cards{grid-template-columns:1fr;} }
  .service-card{
    background:rgba(11,21,38,.7);border:1px solid var(--border);border-radius:16px;padding:20px 16px;
    display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(6px);
    transition:transform .25s, border-color .25s, box-shadow .25s;
  }
  .service-card:hover{transform:translateY(-4px);border-color:rgba(55,182,255,.4);box-shadow:0 18px 40px -18px rgba(55,182,255,.4);}
  .service-card .ic{width:34px;height:34px;color:var(--accent);transition:transform .3s;}
  .service-card:hover .ic{transform:scale(1.1) rotate(-4deg);}
  .service-card:hover .bar{width:40px;}
  .service-card .bar{transition:width .3s;}
  .service-card h4{font-size:14.5px;font-weight:700;line-height:1.3;}
  .service-card p{font-size:12.5px;color:var(--text-muted);line-height:1.5;margin:0;}
  .service-card .bar{width:22px;height:2px;background:var(--accent);border-radius:2px;}

  /* FOOTER */
  footer{border-top:1px solid var(--border-soft);padding-block:36px;}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
  .foot-left{display:flex;flex-direction:column;gap:4px;}
  .foot-left .logo{font-size:16px;}
  .foot-left small{color:var(--text-dim);font-size:12.5px;}
  .foot-links{display:flex;gap:22px;font-size:13.5px;color:var(--text-muted);flex-wrap:wrap;}
  .foot-links a:hover{color:var(--text);}
  .foot-right{display:flex;align-items:center;gap:16px;}
  .foot-social{display:flex;gap:12px;color:var(--text-muted);}
  .foot-social svg{width:17px;height:17px;}
  .foot-social a:hover{color:var(--accent);}
  .foot-tag{font-size:12.5px;color:var(--text-dim);}

  /* MODAL / CONTACT FORM */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(2,6,14,.7);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;
  }
  .modal-overlay[hidden]{display:none;}
  .modal-card{
    background:var(--surface);border:1px solid var(--border);border-radius:20px;
    width:min(440px,100%);padding:28px;box-shadow:var(--shadow);position:relative;
  }
  .modal-close{
    position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;
    background:transparent;border:1px solid var(--border);color:var(--text-muted);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:border-color .15s,color .15s,background .15s;
  }
  .modal-close:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
  .modal-close svg{width:15px;height:15px;}
  .modal-card h3{font-size:20px;font-weight:700;margin-bottom:6px;}
  .modal-card p.sub{color:var(--text-muted);font-size:13.5px;margin-bottom:20px;}
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
  .field label{font-size:12.5px;font-weight:600;color:var(--text-muted);}
  .field input,.field textarea{
    background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
    padding:11px 13px;color:var(--text);font-family:'Inter';font-size:14px;resize:vertical;
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
  .modal-actions{display:flex;gap:10px;margin-top:18px;}
  .modal-actions .btn{flex:1;justify-content:center;}
  .toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--surface);border:1px solid var(--accent);color:var(--text);
    padding:13px 22px;border-radius:12px;font-size:14px;font-weight:600;
    box-shadow:var(--shadow);z-index:200;opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s;display:flex;align-items:center;gap:8px;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
  .toast svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;}

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important;}
    .hero-in-1,.hero-visual,.reveal,[data-line]{opacity:1!important;transform:none!important;}
  }
  .idea-3d__scene{position:absolute;inset:0;}
  .idea-3d__canvas-wrap.no-webgl{display:none;}
  @media (max-width:900px){ .idea-3d__canvas-wrap{height:360px;} .idea-3d__hint{top:calc(50% + 96px);} }

  /* ===== PROCESO (diseño de referencia + interacciones) ===== */
  .proc{position:relative;padding-block:110px;overflow:hidden;
    background:radial-gradient(900px 420px at 50% 60%, rgba(37,99,235,.10), transparent 70%), #050b16;}
  .proc .wrap{max-width:1480px;}
  .proc-head{text-align:center;margin:0 auto 56px;max-width:760px;}
  .proc-pill{position:relative;display:inline-block;padding:9px 30px;border-radius:999px;
    border:1px solid rgba(56,189,248,.35);background:rgba(15,40,80,.35);color:#7dd3fc;
    font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 22px -6px rgba(56,189,248,.5);}
  .proc-pill::before,.proc-pill::after{content:"";position:absolute;top:50%;width:110px;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.7));}
  .proc-pill::before{right:calc(100% + 10px);}
  .proc-pill::after{left:calc(100% + 10px);transform:scaleX(-1);}
  .proc-head h2{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:22px 0 14px;color:#eef2f8;}
  .proc-grad{background:linear-gradient(90deg,#60a5fa,#38bdf8 45%,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .proc-head p{color:var(--text-muted);font-size:clamp(15px,1.3vw,18px);}

  .proc-track{display:grid;grid-template-columns:1fr 64px 1fr 64px 1fr 64px 1fr;align-items:start;}

  /* tarjeta */
  .proc-card{
    position:relative;border-radius:26px;padding:26px 26px 28px;cursor:pointer;outline:none;
    background:linear-gradient(180deg,rgba(17,30,58,.72),rgba(8,15,32,.78));
    border:1px solid rgba(96,165,250,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 50px -20px rgba(0,0,0,.7),0 0 36px -20px rgba(59,130,246,.4);
    opacity:0;transform:translateY(18px);
    transition:opacity .5s ease calc(var(--i) * 120ms),transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 120ms),
               border-color .35s,box-shadow .35s,filter .35s;
  }
  .proc.is-in .proc-card{opacity:1;transform:none;}
  /* una vez visibles, las transiciones de estado no esperan el stagger */
  .proc.is-ready .proc-card{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s,filter .35s;}
  .proc.has-active .proc-card{opacity:.62;filter:saturate(.8);}
  .proc.has-active .proc-card.is-active,
  .proc.has-active .proc-card.is-open{opacity:1;filter:none;}
  .proc-card.is-active{
    border-color:rgba(56,189,248,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 26px 60px -22px rgba(0,0,0,.85),0 0 54px -14px rgba(56,189,248,.55);
  }
  .proc-card.is-active .proc-card__art img{filter:drop-shadow(0 0 14px rgba(56,189,248,.35)) brightness(1.08);}
  .proc-card:focus-visible{box-shadow:0 0 0 2px #0f172a,0 0 0 4px #38bdf8;}
  .proc-card.is-open{border-color:rgba(56,189,248,.6);transform:scale(1.015);}

  .proc-card__num{position:absolute;top:-2px;left:-2px;width:58px;height:58px;border-radius:50%;
    display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:20px;color:#dbeafe;
    background:radial-gradient(circle at 40% 35%,#1e3a6e,#0b1830 70%);border:1px solid rgba(96,165,250,.5);box-shadow:0 0 18px -2px rgba(59,130,246,.6);
    transition:box-shadow .35s,border-color .35s;}
  .proc-card.is-active .proc-card__num{border-color:#38bdf8;box-shadow:0 0 24px 0 rgba(56,189,248,.55);}
  .proc-card__art{position:relative;height:190px;margin:4px -10px 18px;display:grid;place-items:center;}
  .proc-card__art img{width:100%;max-width:290px;height:auto;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;will-change:transform;}
  .proc-card h3{font-size:clamp(21px,1.9vw,26px);font-weight:700;color:#f1f5f9;margin:0 0 10px;}
  .proc-card > p{color:var(--text-muted);font-size:clamp(14px,1.15vw,17px);line-height:1.5;margin:0;}

  /* bloque expandible (animación de altura con grid 0fr → 1fr) */
  .proc-card__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1);}
  .proc-card__more > div{overflow:hidden;}
  .proc-card__more p{margin:0;padding-top:14px;margin-top:14px;border-top:1px solid rgba(56,189,248,.18);
    color:#cfe3f7;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.55;opacity:0;transform:translateY(-4px);transition:opacity .3s ease .08s,transform .3s ease .08s;}
  .proc-card.is-open .proc-card__more{grid-template-rows:1fr;}
  .proc-card.is-open .proc-card__more p{opacity:1;transform:none;}

  /* hover (solo con mouse) */
  @media (hover:hover) and (pointer:fine){
    .proc.is-ready .proc-card:hover{transform:translateY(-7px) scale(1.015);border-color:rgba(56,189,248,.5);opacity:1;filter:none;}
    .proc-card:hover .proc-card__art img{filter:drop-shadow(0 0 18px rgba(56,189,248,.45)) brightness(1.12);}
    .proc-card[data-step="1"]:hover .proc-card__art img{animation:procPulse 1.6s ease-in-out infinite;}
    .proc-card[data-step="2"]:hover .proc-card__art img{transform:translate(4px,-3px) rotate(-1.5deg);}
    .proc-card[data-step="3"]:hover .proc-code{opacity:1;}
    .proc-card[data-step="4"]:hover .proc-card__art img{animation:procLift 1.4s cubic-bezier(.4,0,.2,1) infinite;}
  }
  @keyframes procPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
  @keyframes procLift{0%,100%{transform:translateY(0);}45%{transform:translateY(-8px);}}

  /* "Desarrollar": pulsos de código dentro de la pantalla */
  .proc-code{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:74px;display:grid;gap:5px;opacity:0;transition:opacity .3s;pointer-events:none;}
  .proc-code i{display:block;height:3px;border-radius:2px;background:#7dd3fc;box-shadow:0 0 8px #38bdf8;transform-origin:left;animation:procType 1.4s ease-in-out infinite;}
  .proc-code i:nth-child(2){width:70%;animation-delay:.2s;}
  .proc-code i:nth-child(3){width:45%;animation-delay:.4s;}
  @keyframes procType{0%{transform:scaleX(0);opacity:.2;}50%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:0;}}

  /* conectores: la línea avanza con el scroll */
  .proc-link{position:relative;height:60px;margin-top:150px;}
  .proc-link__wave{position:absolute;top:0;left:-14px;width:calc(100% + 28px);height:100%;overflow:visible;}
  .proc-link__wave path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;}
  .proc-link__base{stroke:rgba(59,130,246,.22);}
  .proc-link__fill{stroke:#38bdf8;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));filter:drop-shadow(0 0 4px rgba(56,189,248,.9));}
  .proc-link__v{display:none;}

  /* final del proceso */
  .proc-done{display:flex;align-items:center;justify-content:center;gap:10px;margin:40px 0 0;
    color:#a5d8f5;font-size:15px;letter-spacing:.02em;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;}
  .proc-done span{width:8px;height:8px;border-radius:50%;background:#38bdf8;box-shadow:0 0 10px #38bdf8;}
  .proc.is-complete .proc-done{opacity:1;transform:none;}
  .proc.is-complete .proc-link__fill{animation:procRoute 1.2s ease;}
  .proc.is-complete .proc-card[data-step="4"]{animation:procGlow 1.2s ease;}
  @keyframes procRoute{0%,100%{filter:drop-shadow(0 0 4px rgba(56,189,248,.9));}40%{filter:drop-shadow(0 0 10px #38bdf8) brightness(1.6);}}
  @keyframes procGlow{0%,100%{box-shadow:0 0 54px -14px rgba(56,189,248,.55);}40%{box-shadow:0 0 80px -6px rgba(56,189,248,.8);}}

  /* tablet: grilla 2x2 sin conectores horizontales */
  @media (max-width:1100px){
    .proc-track{grid-template-columns:1fr 1fr;gap:28px;}
    .proc-link{display:none;}
  }
  /* mobile: etapas apiladas con línea vertical animada */
  @media (max-width:640px){
    .proc{padding-block:80px;}
    .proc-track{grid-template-columns:1fr;gap:0;}
    .proc-link{display:block;height:44px;margin:0;}
    .proc-link__wave{display:none;}
    .proc-link__v{display:block;position:absolute;left:27px;top:0;bottom:0;width:2px;background:rgba(59,130,246,.22);border-radius:2px;overflow:hidden;}
    .proc-link__v span{display:block;width:100%;height:100%;background:#38bdf8;box-shadow:0 0 8px #38bdf8;transform-origin:top;transform:scaleY(var(--p,0));}
    .proc-pill::before,.proc-pill::after{width:40px;}
    .proc-card.is-open{transform:none;}
  }

  @media (prefers-reduced-motion: reduce){
    .proc-card,.proc-card__art img,.proc-card__more,.proc-card__more p,.proc-done{transition:none!important;animation:none!important;}
    .proc-card{opacity:1;transform:none;}
    .proc-code i,.proc.is-complete .proc-link__fill,.proc.is-complete .proc-card[data-step="4"]{animation:none!important;}
  }

  /* ===== OPORTUNIDADES (conceptos que convergen al centro) ===== */
  .opp{position:relative;min-height:760px;height:100vh;max-height:900px;overflow:hidden;padding:0!important;
    background:radial-gradient(700px 500px at 50% 50%, rgba(15,23,42,.9), transparent 70%),
      radial-gradient(900px 600px at 0% 100%, rgba(37,99,235,.18), transparent 60%),
      radial-gradient(700px 500px at 100% 0%, rgba(37,99,235,.14), transparent 60%), #050b16;}
  .opp-stage{position:absolute;inset:0;}
  .opp-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;}
  .opp-rings span{grid-area:1/1;width:min(940px,120vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(56,189,248,.10);
    opacity:0;transform:scale(.94);transition:opacity 1.2s ease .5s,transform 1.4s cubic-bezier(.2,.8,.2,1) .5s;}
  .opp-rings span:nth-child(2){width:min(640px,90vw);border-color:rgba(56,189,248,.14);transition-delay:.65s;}
  .opp.is-in .opp-rings span{opacity:1;transform:scale(1);animation:oppBreath 7s ease-in-out 2s infinite;}
  @keyframes oppBreath{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,0);}50%{box-shadow:0 0 60px -20px rgba(56,189,248,.25);}}

  .opp-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .opp-path{fill:none;stroke:#3b82f6;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.45;
    stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1),opacity .35s,stroke .35s;
    filter:drop-shadow(0 0 3px rgba(56,189,248,.6));}
  .opp.is-in .opp-path{stroke-dashoffset:0;transition-delay:calc(.6s + var(--d,0s)), 0s, 0s;}
  .opp-path.is-lit{opacity:1;stroke:#38bdf8;}
  .opp.has-hot .opp-path:not(.is-lit){opacity:.15;}

  .opp-dots{position:absolute;inset:0;pointer-events:none;}
  .opp-dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
    background:#7dd3fc;box-shadow:0 0 10px 2px rgba(56,189,248,.8);opacity:0;will-change:transform;}
  .opp.is-in .opp-dot{opacity:.9;transition:opacity .8s ease 1.6s;}
  .opp-dot--pulse{width:14px;height:14px;margin:-7px 0 0 -7px;background:#e0f2fe;box-shadow:0 0 16px 5px rgba(56,189,248,.9);opacity:1!important;transition:none!important;}

  /* centro */
  .opp-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1200px,92vw);text-align:center;z-index:2;}
  .opp-pill{display:inline-block;padding:10px 26px;border-radius:999px;border:1px solid rgba(56,189,248,.3);background:rgba(15,40,80,.35);
    color:#7dd3fc;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
  .opp-center h2{font-size:clamp(34px,4.6vw,84px);white-space:nowrap;font-weight:800;letter-spacing:-.04em;line-height:1.02;margin:28px 0 24px;color:#eef2f8;}
  .opp-word{background:linear-gradient(90deg,#38bdf8,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent;
    transition:filter .45s ease,text-shadow .45s;}
  .opp-word.is-glow{filter:brightness(1.35) drop-shadow(0 0 22px rgba(56,189,248,.55));}
  .opp-center p{color:var(--text-muted);font-size:clamp(15px,1.3vw,19px);max-width:48ch;margin:0 auto;line-height:1.45;}
  .opp-center > *{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
  .opp-center h2{transition-delay:.15s;} .opp-center p{transition-delay:.3s;}
  .opp.is-in .opp-center > *{opacity:1;transform:none;}

  /* conceptos periféricos */
  .opp-item{position:absolute;inset:0;pointer-events:none;outline:none;}
  .opp-obj,.opp-chip{pointer-events:auto;cursor:pointer;}
  .opp-obj{position:absolute;left:var(--ox);top:var(--oy);transform:translate(-50%,-50%) translate3d(var(--px,0px),var(--py,0px),0);
    transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform;}
  .opp-obj__in{position:relative;opacity:0;transform:translateY(14px) scale(.94);
    transition:opacity .7s ease calc(1.1s + var(--i) * .14s),transform .8s cubic-bezier(.2,.8,.2,1) calc(1.1s + var(--i) * .14s),filter .35s;}
  .opp.is-in .opp-obj__in{opacity:1;transform:none;animation:oppFloat 6s ease-in-out calc(2.2s + var(--i) * .7s) infinite;}
  @keyframes oppFloat{0%,100%{translate:0 0;}50%{translate:0 -6px;}}
  .opp-obj img{display:block;height:auto;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;}
  .opp-item--code .opp-obj img{width:clamp(120px,11vw,190px);}
  .opp-item--ia .opp-obj img{width:clamp(100px,9vw,150px);}
  .opp-item--ui .opp-obj img{width:clamp(160px,15vw,250px);}
  .opp-item--chart .opp-obj img{width:clamp(120px,11vw,185px);}

  .opp-chip{position:absolute;left:var(--cx);top:var(--cy);transform:translate(-50%,-50%) translate3d(calc(var(--px,0px) * .6),calc(var(--py,0px) * .6),0);
    display:inline-flex;align-items:center;gap:14px;padding:16px 22px;border-radius:18px;white-space:nowrap;
    background:rgba(12,24,48,.72);border:1px solid rgba(56,189,248,.18);backdrop-filter:blur(6px);
    font-family:'JetBrains Mono',monospace;font-size:clamp(13px,1vw,16px);color:#7dd3fc;
    opacity:0;transition:opacity .7s ease calc(1.25s + var(--i) * .14s),border-color .3s,box-shadow .3s,transform .6s cubic-bezier(.2,.8,.2,1);}
  .opp.is-in .opp-chip{opacity:1;}
  .opp-chip svg{width:20px;height:20px;flex:none;}
  .opp-chip b{width:9px;height:9px;border-radius:50%;background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,.9);margin-left:8px;transition:background .3s,box-shadow .3s;}

  /* estado activo (hover / tap / foco) */
  .opp.has-hot .opp-item:not(.is-active) .opp-obj__in,
  .opp.has-hot .opp-item:not(.is-active) .opp-chip{opacity:.4;}
  .opp-item.is-active .opp-obj__in{filter:drop-shadow(0 0 22px rgba(56,189,248,.45)) brightness(1.15);}
  .opp-item.is-active .opp-obj img{transform:scale(1.06);}
  .opp-item.is-active .opp-chip{border-color:rgba(56,189,248,.55);box-shadow:0 0 30px -8px rgba(56,189,248,.55);}
  .opp-item.is-active .opp-chip b{background:#7dd3fc;box-shadow:0 0 12px #38bdf8;}
  .opp-item:focus-visible .opp-chip{box-shadow:0 0 0 2px #0f172a,0 0 0 4px #38bdf8;}

  /* microanimaciones */
  .opp-fx{position:absolute;pointer-events:none;opacity:0;transition:opacity .3s;}
  .opp-fx i{display:block;border-radius:2px;background:#7dd3fc;box-shadow:0 0 8px #38bdf8;}
  .opp-fx--code{left:34%;top:64%;width:34%;display:grid;gap:4px;}
  .opp-fx--code i{height:3px;transform-origin:left;}
  .opp-fx--code i:nth-child(2){width:70%;} .opp-fx--code i:nth-child(3){width:45%;}
  .opp-item--code.is-active .opp-fx--code{opacity:1;}
  .opp-item--code.is-active .opp-fx--code i{animation:procType 1.3s ease-in-out infinite;}
  .opp-item--code.is-active .opp-fx--code i:nth-child(2){animation-delay:.15s;}
  .opp-item--code.is-active .opp-fx--code i:nth-child(3){animation-delay:.3s;}
  .opp-item--code.is-active .opp-obj img{animation:procPulse 1.4s ease-in-out infinite;}

  .opp-fx--ui{inset:0;}
  .opp-fx--ui i{position:absolute;height:6px;border-radius:3px;opacity:.9;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .opp-fx--ui i:nth-child(1){left:57%;top:45%;width:26%;}
  .opp-fx--ui i:nth-child(2){left:57%;top:58%;width:18%;}
  .opp-item--ui.is-active .opp-fx--ui{opacity:1;}
  .opp-item--ui.is-active .opp-fx--ui i:nth-child(1){transform:translate(-4px,14px);}
  .opp-item--ui.is-active .opp-fx--ui i:nth-child(2){transform:translate(8px,-14px);}
  .opp-item--ui.is-active .opp-obj img{transform:perspective(600px) rotateY(-8deg) translateZ(18px);}

  .opp-item--ia.is-active .opp-obj img{transform:rotate(10deg) scale(1.06);animation:oppInner 1.2s ease-in-out infinite;}
  @keyframes oppInner{0%,100%{filter:brightness(1);}50%{filter:brightness(1.35) drop-shadow(0 0 16px rgba(56,189,248,.8));}}

  .opp-item--chart .opp-obj img{transform-origin:50% 85%;}
  .opp-item--chart.is-active .opp-obj img{transform:scaleY(1.08) scaleX(1.03);}

  /* tablet / mobile: texto arriba, objetos + conceptos en grilla 2x2, órbitas lentas de fondo */
  @media (max-width:980px){
    .opp{height:auto;min-height:0;max-height:none;padding:96px 20px 80px!important;}
    .opp-lines,.opp-dots{display:none;}
    .opp-stage{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:26px 14px;}
    .opp-center{position:relative;left:auto;top:auto;transform:none;width:auto;grid-column:1/-1;grid-row:1;margin-bottom:18px;}
    .opp-center h2{white-space:normal;font-size:clamp(34px,9vw,60px);}
    .opp-item{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;gap:12px;}
    .opp-obj,.opp-chip{position:relative;left:auto;top:auto;transform:none;}
    .opp-obj img{width:clamp(90px,26vw,140px)!important;}
    .opp-chip{padding:11px 14px;gap:9px;font-size:12.5px;border-radius:14px;}
    .opp-chip svg{width:16px;height:16px;}
    .opp-chip b{display:none;}
    .opp-rings span{animation:oppSpin 60s linear infinite!important;border-style:dashed;}
  }
  @keyframes oppSpin{to{transform:rotate(360deg);}}

  @media (prefers-reduced-motion: reduce){
    .opp *{transition:none!important;animation:none!important;}
    .opp-center > *,.opp-obj__in,.opp-chip,.opp-rings span{opacity:1!important;transform:none;}
    .opp-path{stroke-dashoffset:0;}
  }

  /* sin scroll horizontal en ninguna pantalla */
  html,body{max-width:100%;overflow-x:hidden;}
  @supports (overflow:clip){ html,body{overflow-x:clip;} }
  .hero{overflow-x:clip;}

  /* ===== PROYECTOS DESTACADOS (editorial) ===== */
  .pj{position:relative;padding-block:100px;background:#060d1b;}
  .pj .wrap{max-width:1480px;}
  .pj-head{margin-bottom:34px;}
  .pj-label{display:inline-flex;align-items:center;gap:10px;padding:7px 18px;border-radius:999px;border:1px solid rgba(56,189,248,.35);
    background:rgba(15,40,80,.3);color:#7dd3fc;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
  .pj-label i{width:8px;height:8px;border-radius:50%;background:#38bdf8;box-shadow:0 0 8px #38bdf8;}
  .pj-head h2{font-size:clamp(34px,4.4vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:16px 0 10px;color:#f1f5f9;}
  .pj-accent{color:#38bdf8;}
  .pj-head p{color:var(--text-muted);font-size:clamp(15px,1.35vw,19px);}

  .pj-card{position:relative;display:block;color:inherit;text-decoration:none;border-radius:22px;overflow:hidden;
    background:#0b1629;border:1px solid rgba(96,165,250,.16);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s;}
  .pj-card:hover,.pj-card:focus-visible{border-color:rgba(56,189,248,.5);box-shadow:0 24px 60px -30px rgba(0,0,0,.9),0 0 40px -20px rgba(56,189,248,.45);outline:none;}
  .pj-badge{display:inline-block;padding:6px 16px;border-radius:999px;border:1px solid rgba(56,189,248,.45);color:#7dd3fc;font-size:14px;font-weight:500;background:rgba(15,40,80,.35);}
  .pj-tags{display:flex;flex-wrap:wrap;gap:10px;}
  .pj-tags span{padding:7px 16px;border-radius:999px;border:1px solid rgba(148,163,184,.25);color:#cbd5e1;font-size:14px;background:rgba(15,23,42,.5);}
  .pj-cta{display:inline-block;margin-top:22px;color:#7dd3fc;font-size:15px;font-weight:600;border-bottom:1px solid rgba(56,189,248,.35);padding-bottom:2px;transition:border-color .3s,color .3s;}
  .pj-card:hover .pj-cta{color:#bae6fd;border-color:#38bdf8;}

  /* principal */
  .pj-main{min-height:clamp(460px,38vw,600px);}
  .pj-main:hover{transform:translateY(-4px);}
  .pj-main__bg{position:absolute;inset:0;background:radial-gradient(800px 500px at 75% 40%, rgba(37,99,235,.18), transparent 70%);}
  .pj-main__media{position:absolute;top:0;right:0;bottom:0;width:66%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%);}
  .pj-main__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block;
    transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.04);transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .pj-main__body{position:relative;z-index:1;width:min(560px,48%);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;align-items:flex-start;}
  .pj-main__logo{width:clamp(200px,20vw,300px);height:auto;margin:24px 0 18px;}
  .pj-main h3{font-size:clamp(32px,3.2vw,48px);font-weight:800;letter-spacing:-.02em;color:#f8fafc;line-height:1;margin:0;}
  .pj-main__sub{color:#f2b544;font-size:clamp(20px,1.9vw,28px);font-weight:700;margin:6px 0 16px;}
  .pj-main p{color:#cbd5e1;font-size:clamp(15px,1.3vw,19px);line-height:1.5;margin:0 0 24px;max-width:36ch;}
  .pj-feats{list-style:none;padding:0 0 22px;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;border-bottom:1px solid rgba(148,163,184,.14);width:100%;}
  .pj-feats li{display:flex;align-items:center;gap:12px;color:#e2e8f0;font-size:15px;line-height:1.25;}
  .pj-feats span{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;color:#f2b544;border:1px solid rgba(242,181,68,.45);}
  .pj-feats svg{width:20px;height:20px;}

  /* secundarios */
  .pj-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;}
  .pj-sec{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);min-height:300px;}
  .pj-sec:hover{transform:translateY(-5px);}
  .pj-sec__body{position:relative;z-index:1;padding:28px 12px 28px 30px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
  .pj-sec h3{font-size:clamp(24px,2.1vw,32px);font-weight:700;color:#f8fafc;line-height:1.1;margin:4px 0 0;}
  .pj-sec p{color:#94a3b8;font-size:clamp(14px,1.1vw,17px);line-height:1.5;margin:0 0 6px;}
  .pj-sec .pj-tags span{font-size:13px;padding:6px 13px;}
  .pj-sec__media{position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%);}
  .pj-sec__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 50%;filter:saturate(.9) contrast(.95) brightness(.9);transition:filter .45s,transform .6s cubic-bezier(.2,.8,.2,1);}
  .pj-sec:hover .pj-sec__media img{filter:saturate(1.05) contrast(1.05) brightness(1);transform:scale(1.02);}

  /* entrada por scroll */
  .pj-in{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .7s ease var(--d),transform .8s cubic-bezier(.2,.8,.2,1) var(--d),border-color .35s,box-shadow .35s;}
  .pj.is-in .pj-in{opacity:1;transform:none;}
  .pj.is-in .pj-card{transition:opacity .7s ease var(--d),transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s;}
  .pj.is-in .pj-main:hover{transform:translateY(-4px);}
  .pj.is-in .pj-sec:hover{transform:translateY(-5px);}

  @media (max-width:1100px){
    .pj-row{grid-template-columns:1fr;}
    .pj-main__body{width:min(560px,55%);}
  }
  @media (max-width:760px){
    .pj{padding-block:70px;}
    .pj-main{min-height:0;display:flex;flex-direction:column;} .pj-main__media{order:-1;}
    .pj-main__media{position:relative;width:100%;height:230px;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%);}
    .pj-main__body{width:100%;padding-top:4px;}
    .pj-main__logo{display:none;}
    .pj-feats{grid-template-columns:1fr;}
    .pj-sec{grid-template-columns:1fr;}
    .pj-sec__media{order:-1;margin:0;height:210px;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%);}
    .pj-sec__body{padding:4px 22px 26px;}
  }
  @media (prefers-reduced-motion: reduce){
    .pj-in{opacity:1!important;transform:none!important;transition:none!important;}
    .pj-main__media img,.pj-sec__media img{transition:none!important;}
  }
  .idea-3d .wrap{max-width:1640px;}

  /* ===== Sección "Un diseño para cada rubro" en fondo claro ===== */
  #tipos-web{background:#f1f5f9;color:#0f172a;}
  #tipos-web .eyebrow{background:#e0f2fe;color:#0369a1;border-color:#bae6fd;}
  #tipos-web h2{color:#0f172a;}
  #tipos-web .accent,#tipos-web .grad-text{background:none;-webkit-text-fill-color:#0284c7;color:#0284c7;}
  #tipos-web .sec-head p,#tipos-web .type-caption{color:#475569;}
  #tipos-web .type-caption svg{color:#0284c7;}
  #tipos-web .type-tab{background:#fff;color:#334155;border-color:#e2e8f0;}
  #tipos-web .type-tab:hover{border-color:#38bdf8;color:#0f172a;}
  #tipos-web .type-tab.active{background:#38bdf8;border-color:#38bdf8;color:#082f49;}
  #tipos-web .browser-mock{background:#fff;border-color:#e2e8f0;box-shadow:0 30px 70px -35px rgba(15,23,42,.45);}
  #tipos-web .browser-mock__bar{background:#f8fafc;border-color:#e2e8f0;}
  #tipos-web .browser-mock__url{background:#fff;border-color:#e2e8f0;color:#64748b;}
#tipos-web .type-caption{background:#fff;border-color:#e2e8f0;color:#475569;box-shadow:0 10px 30px -20px rgba(15,23,42,.35);}
#tipos-web .type-caption *{color:inherit;}
#tipos-web .type-caption strong,#tipos-web .type-caption b{color:#0f172a;}
#tipos-web .type-caption svg{color:#0284c7;}
#tipos-web .wrap{max-width:1640px;padding-inline:clamp(16px,3vw,48px);}
#tipos-web .sec-head h2{font-size:clamp(34px,4.4vw,64px);}
#tipos-web .sec-head p{font-size:clamp(16px,1.25vw,19px);}
#tipos-web .type-tab{font-size:16px;padding:13px 22px;}
@media (max-width:720px){#tipos-web .type-tab{font-size:14px;padding:10px 16px;}}

/* ===== Rubros: selector interactivo ===== */
.rx{--strip:58px;display:flex;gap:8px;height:clamp(360px,calc(var(--rxw,900px) * .58),720px);margin-top:8px;}
.rx-opt{position:relative;flex:0 0 var(--strip);min-width:0;padding:0;border:2px solid #e2e8f0;border-radius:18px;overflow:hidden;cursor:pointer;background:#0f172a;
  box-shadow:0 10px 30px -18px rgba(15,23,42,.35);font:inherit;color:#fff;text-align:left;
  opacity:0;transform:translateX(-60px);
  transition:flex-grow .7s cubic-bezier(.65,0,.35,1),flex-basis .7s cubic-bezier(.65,0,.35,1),border-color .4s,box-shadow .5s,opacity .6s ease calc(var(--i)*70ms),transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*70ms);}
.rx.is-in .rx-opt{opacity:1;transform:none;}
.rx-opt.is-active{flex:1 1 0;border-color:#38bdf8;box-shadow:0 30px 70px -30px rgba(15,23,42,.55);cursor:default;}
.rx-opt:focus-visible{outline:3px solid #0284c7;outline-offset:3px;}
.rx-img{position:absolute;top:0;left:50%;height:100%;width:var(--rxw,100%);max-width:none;transform:translateX(-50%) scale(1.12);object-fit:cover;object-position:top center;
  filter:saturate(.55) brightness(.62);transition:transform .9s cubic-bezier(.65,0,.35,1),filter .6s;}
.rx-opt:hover .rx-img{filter:saturate(.85) brightness(.8);}
.rx-opt.is-active .rx-img{transform:translateX(-50%) scale(1);filter:none;}
.rx-shade{position:absolute;inset:auto 0 -40px 0;height:150px;pointer-events:none;background:linear-gradient(to top,rgba(2,6,23,.92),rgba(2,6,23,0));opacity:0;transition:opacity .7s,bottom .7s;}
.rx-opt.is-active .rx-shade{opacity:1;bottom:0;}
.rx-url{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#334155;font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s;pointer-events:none;white-space:nowrap;}
.rx-opt.is-active .rx-url{opacity:1;transform:none;transition-delay:.35s;}
.rx-label{position:absolute;left:5px;right:0;bottom:16px;display:flex;align-items:center;gap:12px;pointer-events:none;transition:left .7s cubic-bezier(.65,0,.35,1),bottom .7s;}
.rx-opt.is-active .rx-label{left:20px;bottom:20px;}
.rx-icon{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,42,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.18);transition:background .4s,border-color .4s;}
.rx-icon svg{width:20px;height:20px;color:#fff;}
.rx-opt.is-active .rx-icon{background:#38bdf8;border-color:#38bdf8;}
.rx-opt.is-active .rx-icon svg{color:#082f49;}
.rx-info{display:flex;flex-direction:column;gap:3px;white-space:nowrap;min-width:0;}
.rx-info strong,.rx-info small{opacity:0;transform:translateX(25px);transition:opacity .7s,transform .7s;}
.rx-info strong{font-size:19px;font-weight:700;color:#fff;}
.rx-info small{font-size:14.5px;color:#cbd5e1;white-space:normal;max-width:52ch;}
.rx-opt.is-active .rx-info strong,.rx-opt.is-active .rx-info small{opacity:1;transform:none;transition-delay:.25s;}
@media (max-width:1100px){.rx{--strip:46px;gap:6px;}.rx-icon{flex-basis:36px;width:36px;height:36px;}.rx-icon svg{width:17px;height:17px;}}
@media (max-width:720px){
  .rx{flex-direction:column;height:auto;gap:8px;}
  .rx-opt{flex:none;height:60px;transform:translateY(20px);transition:height .6s cubic-bezier(.65,0,.35,1),border-color .4s,opacity .5s ease calc(var(--i)*50ms),transform .5s ease calc(var(--i)*50ms);}
  .rx-opt.is-active{flex:none;height:auto;aspect-ratio:1400/860;}
  .rx-img{left:0;width:100%;transform:none;}
  .rx-opt.is-active .rx-img{transform:none;}
  .rx-label{left:8px;bottom:8px;}
  .rx-opt.is-active .rx-label{left:14px;bottom:14px;}
  .rx-info strong{opacity:1;transform:none;font-size:16px;}
  .rx-info small{display:none;}
  .rx-opt.is-active .rx-info small{display:block;font-size:13px;}
  .rx-url{top:10px;left:10px;font-size:11px;}
}
@media (prefers-reduced-motion:reduce){.rx-opt,.rx-img,.rx-label,.rx-shade,.rx-info strong,.rx-info small,.rx-url{transition-duration:.01s!important;transition-delay:0s!important;}}
.rx-label{align-items:flex-end;}
.rx-info{padding-bottom:2px;}
.rx-info small{max-width:min(60ch,calc(var(--rxw,900px) - 120px));}
@media (max-width:720px){
  .rx-opt:not(.is-active) .rx-img{object-position:center 22%;filter:saturate(.6) brightness(.55);}
  .rx-opt:not(.is-active) .rx-shade{opacity:1;inset:0;height:auto;background:linear-gradient(90deg,rgba(2,6,23,.85) 0%,rgba(2,6,23,.35) 70%,rgba(2,6,23,.15));}
  .rx-label{align-items:center;}
  .rx-opt.is-active .rx-label{align-items:flex-end;}
}

/* ===== Contacto ===== */
.ct{position:relative;padding-block:clamp(72px,9vw,120px);background:var(--bg);overflow:hidden;}
.ct::before{content:"";position:absolute;inset:-20% -10% auto;height:520px;background:radial-gradient(ellipse at 50% 0%,rgba(55,182,255,.10),transparent 60%);pointer-events:none;}
.ct .wrap{position:relative;max-width:1180px;}
.ct-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:clamp(40px,5vw,64px);}
.ct-pill{display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;background:var(--pill-bg);border:1px solid rgba(55,182,255,.32);color:var(--accent);font-size:14px;font-weight:600;}
.ct-head h2{font-size:clamp(36px,5.2vw,64px);font-weight:800;letter-spacing:-.02em;line-height:1.05;}
.ct-head p{max-width:56ch;color:var(--text-muted);font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.65;margin:0;}
.ct-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,4vw,56px);align-items:start;}
.ct-side{display:flex;flex-direction:column;gap:26px;min-width:0;}
.ct-intro h3{font-size:22px;font-weight:700;margin-bottom:8px;}
.ct-intro p{color:var(--text-muted);font-size:15.5px;line-height:1.6;margin:0;max-width:40ch;}
.ct-links{display:flex;flex-direction:column;gap:12px;}
.ct-link{display:flex;align-items:center;gap:14px;width:fit-content;color:var(--text-muted);text-decoration:none;font-size:15px;transition:color .2s;}
.ct-link b{display:block;color:var(--text);font-weight:600;font-size:14.5px;margin-bottom:1px;}
.ct-ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);transition:all .2s;}
.ct-ic svg{width:18px;height:18px;}
a.ct-link:hover{color:var(--text);}
a.ct-link:hover .ct-ic{border-color:rgba(55,182,255,.45);background:var(--accent-soft);color:var(--accent);}
.ct-globe{position:relative;height:clamp(260px,26vw,380px);margin-top:4px;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);}
.ct-globe canvas{display:block;cursor:grab;touch-action:pan-y;}
.ct-globe canvas.is-drag{cursor:grabbing;}
.ct-card{display:flex;flex-direction:column;gap:20px;padding:clamp(22px,3vw,38px);border-radius:22px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);min-width:0;}
.ct-card h3{font-size:21px;font-weight:700;margin-bottom:4px;}
.ct-card > div > p{color:var(--text-muted);font-size:15px;margin:0;}
.ct-dots{height:4px;background-image:radial-gradient(circle,rgba(147,165,194,.45) .9px,transparent 1px);background-size:7px 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ct-field{display:flex;flex-direction:column;gap:9px;min-width:0;}
.ct-field > span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);}
.ct-field em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;}
.ct-field input,.ct-field textarea{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:12px 15px;outline:none;transition:border-color .2s,box-shadow .2s;resize:none;}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--text-dim);}
.ct-field input:focus,.ct-field textarea:focus{border-color:rgba(55,182,255,.6);box-shadow:0 0 0 3px rgba(55,182,255,.12);}
.ct-submit{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 30px;border:0;border-radius:12px;background:#fff;color:#0b1526;font:700 15px/1 'Inter',system-ui,sans-serif;cursor:pointer;transition:background .2s,transform .2s;}
.ct-submit svg{width:17px;height:17px;transition:transform .2s;}
.ct-submit:hover{background:var(--accent);color:#031521;}
.ct-submit:hover svg{transform:translateX(4px);}
.ct-submit:disabled{opacity:.6;cursor:wait;}
.ct .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.ct-in{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.25,.1,.25,1) var(--d,0s),transform .9s cubic-bezier(.25,.1,.25,1) var(--d,0s);}
.ct-link.ct-in{transform:translateX(-12px);}
.ct.is-in .ct-in{opacity:1;transform:none;}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr;}.ct-globe{height:clamp(220px,60vw,320px);}}
@media (max-width:560px){.ct-row{grid-template-columns:1fr;}.ct-submit{align-self:stretch;justify-content:center;}}
@media (prefers-reduced-motion:reduce){.ct-in{transition:none;opacity:1;transform:none;}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.ct-modal{position:relative;width:min(620px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;}
.ct-modal-head{padding-right:44px;}
.ct-modal-head p{color:var(--text-muted);font-size:15px;margin:0;}
.ct-modal .modal-close{top:20px;right:20px;}
.ct-quick{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ct-quick__btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--border);color:var(--text-muted);text-decoration:none;font-size:14px;line-height:1.35;transition:border-color .2s,background .2s,transform .2s;}
.ct-quick__btn b{display:block;color:var(--text);font-size:15px;font-weight:600;}
.ct-quick__btn .ct-ic{flex-basis:40px;width:40px;height:40px;}
.ct-quick__btn:hover{border-color:rgba(55,182,255,.5);background:var(--accent-soft);transform:translateY(-2px);}
.ct-quick__btn:hover .ct-ic{color:var(--accent);border-color:rgba(55,182,255,.45);}
.ct-quick__btn--wa .ct-ic{color:#25d366;}
.ct-quick__btn--wa:hover{border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.08);}
.ct-quick__btn--wa:hover .ct-ic{color:#25d366;border-color:rgba(37,211,102,.45);}
.ct-or{display:flex;align-items:center;gap:14px;color:var(--text-dim);font-size:13px;}
.ct-or::before,.ct-or::after{content:"";flex:1;height:4px;background-image:radial-gradient(circle,rgba(147,165,194,.45) .9px,transparent 1px);background-size:7px 4px;}
.ct-or span{white-space:nowrap;}
@media (max-width:520px){.ct-quick{gap:8px;}.ct-quick__btn{gap:9px;padding:10px;font-size:12.5px;}.ct-quick__btn b{font-size:14px;}.ct-quick__btn .ct-ic{flex-basis:32px;width:32px;height:32px;border-radius:10px;}.ct-or span{white-space:normal;text-align:center;}.ct-modal{gap:16px;}}
/* acceso directo a ejemplos por rubro */
nav.links a.nav-rubros{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;margin-block:-6px;border-radius:999px;border:1px solid rgba(55,182,255,.35);background:var(--pill-bg);color:var(--text);}
nav.links a.nav-rubros svg{width:14px;height:14px;color:var(--accent);}
nav.links a.nav-rubros:hover{border-color:var(--accent);background:var(--accent-soft);}
nav.links a.nav-rubros.active::after{bottom:-9px;left:14px;right:14px;}
.nav-rubros__n{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#031521;font-size:11.5px;font-weight:700;}
@media (min-width:860px) and (max-width:1060px){nav.links{gap:20px;}}
.hero-rubros{display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;margin:-24px 0 40px;padding:12px 16px 12px 12px;border-radius:16px;border:1px solid var(--border);background:rgba(11,21,38,.6);color:var(--text-muted);font-size:13.5px;line-height:1.45;text-decoration:none;transition:border-color .2s,background .2s,transform .2s;}
.hero-rubros b{display:block;color:var(--text);font-size:14.5px;font-weight:600;}
.hero-rubros__ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);}
.hero-rubros__ic svg{width:18px;height:18px;}
.hero-rubros__arrow{flex:0 0 18px;width:18px;height:18px;color:var(--accent);transition:transform .2s;}
.hero-rubros:hover{border-color:rgba(55,182,255,.5);background:var(--accent-soft);transform:translateY(-2px);}
.hero-rubros:hover .hero-rubros__arrow{transform:translateX(4px);}
/* hero: imagen principal */
.hero-visual:has(.hv-shot){min-height:0;margin-top:6px;}
.hero-visual:has(.hv-shot) .scroll-card{height:auto;max-width:1100px;width:100%;transform-origin:center top;}
.hv-shot{position:relative;z-index:2;margin:0;border-radius:22px;overflow:hidden;border:1px solid rgba(55,182,255,.22);background:var(--surface);
  aspect-ratio:1672/941;animation:floaty 8s ease-in-out infinite;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.hv-shot img{display:block;width:100%;height:100%;object-fit:cover;}
.hv-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -60px 80px -40px rgba(5,11,22,.55);}
@media (max-width:980px){.hero-visual:has(.hv-shot) .scroll-card{max-width:680px;margin-inline:auto;}.hv-shot{border-radius:16px;}}
/* hero más ancho para la imagen */
.hero:has(.hv-shot) .wrap{max-width:1680px;}
@media (min-width:1241px){.hero:has(.hv-shot) .hero-grid{grid-template-columns:.74fr 1.36fr;gap:40px;}}
@media (min-width:981px){.hero-visual:has(.hv-shot){margin-top:-6px;}}
/* el efecto de scroll se mantiene aunque el sistema tenga "reducir movimiento" (lo controla el usuario al bajar) */
@media (prefers-reduced-motion:reduce){.hero-visual:has(.hv-shot) .scroll-card{transition:none!important;}}
.hero:has(.hv-shot) .hero-in-1{position:relative;z-index:3;}
/* hero: imagen fija, integrada al fondo (sin marco ni efecto) */
.hero-visual:has(.hv-shot){perspective:none;}
.hero-visual:has(.hv-shot) .scroll-card{transform:none!important;width:100%;max-width:none;}
.hero-visual:has(.hv-shot) .hero-spotlight,.hero-visual:has(.hv-shot) .hv-glow{display:none;}
.hv-shot{border:0;border-radius:0;background:none;box-shadow:none;animation:none;transition:none;width:112%;margin-left:-6%;margin-right:-6%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 76%,transparent 100%);
  mask-composite:intersect;}
.hv-shot::after{display:none;}
@media (max-width:980px){.hv-shot{width:100%;margin-inline:0;border-radius:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 78%,transparent 100%);}}
/* ===== Demos interactivas ===== */
.rx-try{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 11px;border-radius:999px;background:#38bdf8;color:#082f49;font:700 13px/1 'Inter',system-ui,sans-serif;
  box-shadow:0 10px 24px -8px rgba(2,132,199,.7);opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s,background .2s;pointer-events:none;}
.rx-try svg{width:13px;height:13px;}
.rx-opt.is-active .rx-try{opacity:1;transform:none;transition-delay:.35s;pointer-events:auto;}
.rx-opt.is-active{cursor:pointer;}
.rx-opt.is-active:hover .rx-try{background:#7dd3fc;}
.rx-opt.is-active::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 rgba(56,189,248,0);transition:box-shadow .3s;pointer-events:none;}
.rx-opt.is-active:hover::after{box-shadow:inset 0 0 0 3px rgba(56,189,248,.55);}
.rx-cta{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-top:22px;padding:18px 22px;border-radius:18px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 10px 30px -20px rgba(15,23,42,.35);}
.rx-cta p{margin:0;color:#475569;font-size:15px;line-height:1.55;max-width:70ch;}
.rx-cta p b{color:#0f172a;}
.rx-cta__btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:12px;background:#0f172a;color:#fff;font:600 15px/1 'Inter',system-ui,sans-serif;cursor:pointer;transition:background .2s,transform .2s;white-space:nowrap;}
.rx-cta__btn svg{width:15px;height:15px;color:#38bdf8;}
.rx-cta__btn b{color:#7dd3fc;}
.rx-cta__btn:hover{background:#0284c7;transform:translateY(-2px);}
.rx-cta__btn:hover svg,.rx-cta__btn:hover b{color:#fff;}
@media (max-width:720px){.rx-cta{padding:16px;}.rx-cta__btn{width:100%;justify-content:center;white-space:normal;}.rx-try{top:10px;right:10px;padding:6px 11px 6px 9px;font-size:12px;}}
html.dm-lock{overflow:hidden;}
.dm{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(0px,2.2vw,32px);background:rgba(2,6,14,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.dm[hidden]{display:none;}
.dm-win{display:flex;flex-direction:column;width:min(1320px,100%);height:min(860px,100%);border-radius:18px;overflow:hidden;background:#0b1526;border:1px solid var(--border);box-shadow:0 40px 120px -30px rgba(0,0,0,.8);animation:dmIn .35s cubic-bezier(.2,.8,.2,1);}
@keyframes dmIn{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}
.dm-bar{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);}
.dm-dots{display:flex;gap:7px;flex-shrink:0;}
.dm-dots i{width:11px;height:11px;border-radius:50%;background:#ff6b6b;}
.dm-dots i:nth-child(2){background:#ffd166;}.dm-dots i:nth-child(3){background:#57e08f;}
.dm-url{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:0 1 320px;padding:7px 12px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border);color:var(--text-muted);font:500 13px/1 'JetBrains Mono',ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-url svg{width:12px;height:12px;flex-shrink:0;color:#57e08f;}
.dm-badge{margin-left:auto;color:var(--text-muted);font-size:13px;white-space:nowrap;}
.dm-badge b{color:var(--text);}
.dm-want{height:36px;padding:0 16px;border:0;border-radius:10px;background:var(--accent);color:#031521;font:700 13.5px/1 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap;}
.dm-want:hover{background:#7dd3fc;}
.dm-close{flex-shrink:0;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-muted);display:grid;place-items:center;cursor:pointer;}
.dm-close:hover{color:var(--accent);border-color:var(--accent);}
.dm-close svg{width:16px;height:16px;}
.dm-body{position:relative;flex:1;background:#fff;}
.dm-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.dm-loading{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0b1526;color:var(--text-muted);font-size:14px;}
.dm-loading[hidden]{display:none;}
.dm-loading span{width:34px;height:34px;border-radius:50%;border:3px solid rgba(55,182,255,.2);border-top-color:var(--accent);animation:dmSpin .8s linear infinite;}
@keyframes dmSpin{to{transform:rotate(360deg);}}
@media (max-width:820px){.dm-badge{display:none;}.dm-url{flex:1 1 auto;}}
@media (max-width:560px){.dm{padding:0;}.dm-win{border-radius:0;height:100%;}.dm-dots{display:none;}.dm-want{padding:0 12px;font-size:12.5px;}.dm-bar{padding:8px;gap:8px;}}
@media (prefers-reduced-motion:reduce){.dm-loading span{animation:dmSpin 1.6s linear infinite!important;}}