:root{
    --ink:#0B0B0F; --ink-2:#15151C; --ink-3:#1E1E28; --line:#2A2A36;
    --cyan:#25F4EE; --red:#FE2C55;
    --green:#07B32E; --green-2:#0BD13A;
    --paper:#F2F2F6; --muted:#9A9AA8; --faint:#6B6B7B;
    --f-display:"Poppins","Segoe UI",system-ui,sans-serif;
    --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
    --f-label:"Michroma","Poppins",monospace;
    --wide:72rem;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--ink);color:var(--paper);font-family:var(--f-body);
       font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .glow{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(48rem 32rem at 8% -6%, rgba(37,244,238,.13), transparent 62%),
      radial-gradient(44rem 30rem at 96% 4%, rgba(254,44,85,.13), transparent 60%);}
  .wrap{position:relative;z-index:1;max-width:var(--wide);margin:0 auto;padding:0 1.5rem}
  section{position:relative;z-index:1;padding:4.2rem 0;border-top:1px solid var(--line)}

  .lbl{font-family:var(--f-label);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
       color:var(--cyan);line-height:1.9;margin:0}
  h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.05rem,4.6vw,3.15rem);
     line-height:1.04;letter-spacing:-.035em;margin:.9rem 0 0;text-wrap:balance;color:#fff;
     text-shadow:-2px 0 rgba(37,244,238,.7), 2px 0 rgba(254,44,85,.7)}
  h2{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,3vw,2rem);
     line-height:1.15;letter-spacing:-.022em;margin:.7rem 0 0;text-wrap:balance;color:#fff}
  h3{font-family:var(--f-display);font-weight:600;font-size:1.02rem;margin:0 0 .4rem;color:#fff}
  p{margin:0 0 1rem;max-width:38rem}
  .lede{font-size:1.06rem;color:var(--muted);margin-top:1.1rem}
  .dim{color:var(--muted)} .sm{font-size:.92rem}
  strong{font-weight:600;color:#fff}

  .top{display:flex;align-items:center;gap:.55rem;padding:1.7rem 0 0}
  .dot{width:.62rem;height:.62rem;border-radius:50%}
  .brand{font-family:var(--f-label);font-size:.62rem;letter-spacing:.2em;color:var(--paper);margin-left:.4rem}

  /* ---------- hero ---------- */
  .hero{display:grid;grid-template-columns:1fr;gap:2.4rem;padding:2.4rem 0 3.4rem}
  @media(min-width:64rem){.hero{grid-template-columns:1.05fr .95fr;gap:3.6rem;align-items:start}}
  .live{display:inline-flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;
        font-family:var(--f-display);font-weight:600;font-size:.62rem;letter-spacing:.08em;
        padding:.22rem .5rem .22rem .42rem;border-radius:3px;text-transform:uppercase;
        vertical-align:.18em;margin-left:.5rem}
  .live i{width:.36rem;height:.36rem;border-radius:50%;background:#fff;
          animation:blink 1.4s steps(1) infinite}
  @keyframes blink{50%{opacity:.25}}
  .ticks{list-style:none;margin:1.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.62rem}
  .ticks li{display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem;align-items:start;font-size:.95rem}
  .ticks svg{width:1.1rem;height:1.1rem;fill:var(--green-2);margin-top:.25rem}

  /* ---------- formulário ---------- */
  .card{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;
        padding:1.7rem 1.5rem;overflow:hidden}
  .card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
    background:linear-gradient(90deg,var(--cyan),var(--red))}
  .card > h3{font-size:1.1rem;margin-bottom:.15rem}
  .card .sub{font-size:.86rem;color:var(--muted);margin:0 0 1.2rem}
  .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .f{display:flex;flex-direction:column;gap:.28rem;min-width:0}
  .f.full{grid-column:1/-1}
  .f label{font-size:.76rem;color:var(--muted)}
  .f input,.f select{background:var(--ink);border:1px solid var(--line);border-radius:6px;color:#fff;
    font-family:var(--f-body);font-size:.95rem;padding:.68rem .72rem;width:100%;min-width:0}
  .f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
    background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
  .f input:focus,.f select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(37,244,238,.16)}
  .f input::placeholder{color:var(--faint)}
  .btn{display:block;width:100%;background:var(--green);color:#04220B;font-family:var(--f-display);
       font-weight:600;font-size:1rem;padding:.95rem 1.4rem;border-radius:6px;border:0;
       text-decoration:none;text-align:center;cursor:pointer;transition:background .15s}
  .btn:hover{background:var(--green-2)}
  .btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
    outline:2px solid var(--cyan);outline-offset:3px}
  .micro{font-size:.76rem;color:var(--faint);line-height:1.5;margin:.85rem 0 0}
  .err{font-size:.8rem;color:var(--red);margin:.7rem 0 0}
  [hidden]{display:none!important}

  /* ---------- ribbon de categorias ---------- */
  .ribbon{position:relative;z-index:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
          padding:.85rem 0;overflow:hidden;background:rgba(21,21,28,.55)}
  .ribbon .track{display:flex;gap:2.2rem;width:max-content;animation:roll 34s linear infinite}
  .ribbon span{font-family:var(--f-label);font-size:.56rem;letter-spacing:.16em;
               text-transform:uppercase;color:var(--faint);white-space:nowrap}
  .ribbon span::before{content:"◆";color:var(--cyan);margin-right:.7rem;font-size:.5rem;opacity:.7}
  @keyframes roll{to{transform:translateX(-50%)}}

  /* ---------- grids ---------- */
  .g2,.g3{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
          border-radius:12px;overflow:hidden;margin-top:2rem}
  .g2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
  .g2>div,.g3>div{background:var(--ink-2);padding:1.45rem 1.35rem 1.55rem}
  .n{font-family:var(--f-label);font-size:.55rem;letter-spacing:.12em;color:var(--cyan);
     display:block;margin-bottom:.75rem}
  .stat{font-family:var(--f-display);font-weight:700;font-size:1.8rem;letter-spacing:-.03em;
        line-height:1;color:#fff;font-variant-numeric:tabular-nums;
        text-shadow:-1px 0 rgba(37,244,238,.6), 1px 0 rgba(254,44,85,.6)}
  .stat-l{font-size:.82rem;color:var(--muted);margin-top:.6rem;line-height:1.45}
  .g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;
      background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:2rem}
  .g4>div{background:var(--ink-2);padding:1.3rem 1.2rem 1.4rem}
  ul.b{margin:.6rem 0 0;padding-left:1.05rem}
  ul.b li{margin-bottom:.45rem;font-size:.93rem}
  ul.b li::marker{color:var(--cyan)}
  .x li::marker{color:var(--red)}

  .steps{display:flex;flex-direction:column;gap:1px;background:var(--line);
         border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:2rem}
  .step{background:var(--ink-2);padding:1.2rem 1.3rem;display:grid;
        grid-template-columns:2.4rem 1fr;gap:0 .9rem;align-items:start}
  .step .n{margin-bottom:0;padding-top:.28rem}
  .step p{margin:.2rem 0 0;font-size:.9rem;color:var(--muted);max-width:46rem}

  /* ---------- feed 9:16 ---------- */
  .tabs{display:flex;gap:1.6rem;justify-content:center;margin-top:2.4rem;
        font-family:var(--f-display);font-weight:600;font-size:.92rem}
  .tabs span{color:var(--faint);padding-bottom:.5rem}
  .tabs .on{color:#fff;border-bottom:2px solid #fff}
  .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(10.5rem,11.5rem);gap:.85rem;
        margin-top:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.9rem;
        scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .rail::-webkit-scrollbar{height:6px}
  .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  @media(min-width:62rem){
    .rail{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;
          overflow:visible;gap:1rem;padding-bottom:0}
  }
  .tt{margin:0;scroll-snap-align:start}
  .tt-frame{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;
            border:1px solid var(--line);padding:.75rem .7rem;display:flex;flex-direction:column;
            background:
              linear-gradient(158deg, rgba(37,244,238,.13), transparent 46%),
              linear-gradient(22deg, rgba(254,44,85,.15), transparent 52%),
              var(--ink-2)}
  .tt-n{align-self:flex-start;font-family:var(--f-label);font-size:.5rem;letter-spacing:.1em;
        color:#fff;opacity:.8;border:1px solid rgba(255,255,255,.22);border-radius:3px;
        padding:.16rem .34rem}
  .tt-body{margin:auto 0;padding-right:1.5rem}
  .tt-fmt{display:block;font-family:var(--f-display);font-weight:700;
          font-size:clamp(1.05rem,2.2vw,1.28rem);line-height:1.05;letter-spacing:-.03em;color:#fff;
          text-shadow:-1px 0 rgba(37,244,238,.65), 1px 0 rgba(254,44,85,.65)}
  .tt-hook{margin:.5rem 0 0;font-size:.66rem;line-height:1.4;color:rgba(255,255,255,.72);
           max-width:none}
  .tt-live{position:absolute;top:.62rem;right:.6rem;z-index:3}
  .tt-rail{position:absolute;right:.45rem;bottom:2.2rem;z-index:3;
           display:flex;flex-direction:column;align-items:center;gap:.7rem}
  .tt-rail svg{width:1.05rem;height:1.05rem;fill:rgba(255,255,255,.92);
               filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
  .tt-disc{width:1.15rem;height:1.15rem;border-radius:50%;
           background:conic-gradient(from 0deg,#2a2a36,#15151c 40%,#3a3a48 70%,#2a2a36);
           border:1px solid rgba(255,255,255,.2);animation:spin 6s linear infinite}
  .tt-disc::after{content:"";display:block;width:.3rem;height:.3rem;border-radius:50%;
           background:var(--ink);margin:.38rem auto}
  @keyframes spin{to{transform:rotate(360deg)}}
  .tt-at{font-family:var(--f-display);font-weight:600;font-size:.6rem;color:rgba(255,255,255,.85);
         padding-right:1.5rem}
  .tt-k{margin:.6rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.4;max-width:none}
  .tt-k b{color:var(--paper);font-weight:600;font-family:var(--f-display)}

  .final{max-width:34rem;margin:2rem auto 0}
  footer{position:relative;z-index:1;padding:2.6rem 0 3.5rem;border-top:1px solid var(--line);
         color:var(--faint);font-size:.82rem}
  footer p{max-width:44rem}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}