:root{
    --page-bg:#F1F4F8; --surface:#FFFFFF; --surface-alt:#F6F8FA; --border:#E1E5EB;
    --text:#12151A; --muted:#667085; --blue-text:#004FFF; --bar-bg:rgba(241,244,248,0.82);
    --ink:#0A0A0A; --panel-dark:#12151C; --dark-border:#2A2F3A; --dark-text:#F2F5F8; --dark-muted:#93A0B3;
    --accent:#00D2FE; --secondary:#004FFF; --tertiary:#009BFF;
    --ok:#12B76A; --warn:#F79009; --danger:#DC2626;
    color-scheme:light;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --page-bg:#0B0D12; --surface:#13161D; --surface-alt:#1A1E27; --border:#272C37;
      --text:#EDF0F5; --muted:#98A2B3; --blue-text:#6C95FF; --bar-bg:rgba(11,13,18,0.82);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --page-bg:#0B0D12; --surface:#13161D; --surface-alt:#1A1E27; --border:#272C37;
    --text:#EDF0F5; --muted:#98A2B3; --blue-text:#6C95FF; --bar-bg:rgba(11,13,18,0.82);
    color-scheme:dark;
  }
  [hidden]{ display:none !important; }
  html{ scroll-padding-top:env(safe-area-inset-top,0px); }
  *{ box-sizing:border-box; }
  body{
    margin:0; background:var(--page-bg); color:var(--text);
    font-family:'Poppins',system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px);
    z-index:10; background:var(--bar-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  h1,h2,h3,h4{ font-family:'Poppins',sans-serif; margin:0; }
  p{ margin:0; }
  button{ font-family:inherit; cursor:pointer; }
  :focus-visible{ outline:2px solid var(--secondary); outline-offset:2px; }
  .i{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 20px 80px; }

  /* ---------- Barra superior ---------- */
  .topbar{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
    background:var(--bar-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
  }
  .topbar-in{
    max-width:1180px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; gap:18px;
  }
  .brand{ display:flex; align-items:center; gap:9px; flex:none; }
  .brand img{ width:30px; height:30px; display:block; }
  .wordmark{ font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; letter-spacing:-0.01em; }
  .wordmark span{ color:var(--blue-text); }
  .views{ display:flex; gap:4px; overflow-x:auto; padding:3px; background:var(--surface-alt); border:1px solid var(--border); border-radius:999px; scrollbar-width:none; }
  .views::-webkit-scrollbar{ display:none; }
  .views button{
    border:none; background:none; color:var(--muted); font-size:12.5px; font-weight:600;
    padding:7px 14px; border-radius:999px; white-space:nowrap; transition:background-color .15s,color .15s;
  }
  .views button[aria-current="page"]{ background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(16,24,40,0.12); }
  .demo-tag{
    margin-left:auto; flex:none; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
    background:color-mix(in srgb, var(--warn) 10%, transparent); padding:4px 10px; border-radius:999px;
  }
  @media (max-width:760px){
    .topbar-in{ flex-wrap:wrap; gap:10px; }
    .demo-tag{ order:2; }
    .views{ order:3; width:100%; }
  }

  /* ---------- Vistas ---------- */
  .view{ display:none; padding-top:24px; }
  .view.active{ display:block; animation:fade .25s ease; }
  @keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

  .hero{
    background:var(--ink); border:1px solid var(--dark-border); border-radius:18px;
    padding:22px 26px 24px; margin-bottom:20px; position:relative; overflow:hidden;
  }
  .hero::before{ content:""; position:absolute; top:-140px; left:55%; width:480px; height:480px; transform:translateX(-50%);
    background:radial-gradient(circle, rgba(0,79,255,0.30), transparent 70%); pointer-events:none; }
  .hero::after{ content:""; position:absolute; bottom:-160px; right:-60px; width:340px; height:340px;
    background:radial-gradient(circle, rgba(0,210,254,0.16), transparent 70%); pointer-events:none; }
  .hero h1{ font-size:clamp(18px,3.4vw,22px); font-weight:700; line-height:1.3; color:var(--dark-text); position:relative; margin-bottom:5px; }
  .hero h1 em{ font-style:normal; color:var(--accent); }
  .hero p{ color:var(--dark-muted); font-size:13.5px; position:relative; }
  .pill{
    display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.04em;
    padding:3px 9px; border-radius:999px; position:relative; margin-bottom:10px;
    background:rgba(0,210,254,0.12); color:var(--accent); border:1px solid rgba(0,210,254,0.35);
  }

  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
  @media (max-width:900px){ .grid2{ grid-template-columns:1fr; } }

  .panel{
    background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:24px;
    box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 8px 20px -6px rgba(16,24,40,0.08);
  }
  .sec-title{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:16px; }
  .sec-title .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-text); }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    border:none; border-radius:12px; padding:11px 18px; font-weight:600; font-size:14px;
    transition:filter .15s, transform .1s, border-color .15s;
  }
  .btn:active{ transform:scale(0.98); }
  .btn-primary{ background:linear-gradient(135deg,var(--secondary),var(--accent)); color:#fff; box-shadow:0 10px 24px rgba(0,79,255,0.28); }
  .btn-primary:hover{ filter:brightness(1.07); }
  .btn-primary[disabled]{ filter:grayscale(0.7); opacity:.5; box-shadow:none; cursor:not-allowed; }
  .btn-ghost{ background:var(--surface-alt); color:var(--text); border:1px solid var(--border); }
  .btn-ghost:hover{ border-color:var(--secondary); }
  .btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:10px; }
  .btn-block{ width:100%; }

  input[type=text], input[type=email], textarea{
    width:100%; background:var(--surface-alt); border:1px solid var(--border); color:var(--text);
    border-radius:11px; padding:10px 13px; font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s;
  }
  input::placeholder, textarea::placeholder{ color:var(--muted); opacity:1; }
  input:focus, textarea:focus{ outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px rgba(0,79,255,0.14); }
  label.lbl{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; }
  .hint{ font-size:12px; color:var(--muted); margin-top:6px; }

  .chip{
    display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px;
    border:1px solid var(--border); background:var(--surface-alt); color:var(--muted); white-space:nowrap;
  }
  .chip.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent); background:color-mix(in srgb,var(--ok) 10%,transparent); }
  .chip.warn{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 10%,transparent); }
  .chip.bad{ color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent); background:color-mix(in srgb,var(--danger) 9%,transparent); }
  .chip.blue{ color:var(--blue-text); border-color:color-mix(in srgb,var(--secondary) 40%,transparent); background:color-mix(in srgb,var(--secondary) 9%,transparent); }

  /* ---------- Chat ---------- */
  .chat{ display:flex; flex-direction:column; gap:10px; }
  .bubble{ max-width:88%; padding:10px 14px; font-size:13.5px; line-height:1.5; animation:fade .2s ease; }
  .bubble.bot{ align-self:flex-start; background:var(--surface-alt); border:1px solid var(--border); border-radius:14px 14px 14px 4px; }
  .bubble.user{ align-self:flex-end; color:#fff; background:linear-gradient(135deg,var(--secondary),var(--tertiary)); border-radius:14px 14px 4px 14px; }
  .qr{ display:flex; flex-wrap:wrap; gap:7px; }
  .qr button{ border:1px solid var(--border); background:var(--surface); color:var(--blue-text); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:600; transition:all .15s; }
  .qr button:hover{ border-color:var(--secondary); }
  .chat-input{ display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
  .chat-input input{ border-radius:999px; padding:11px 16px; }
  .send{ flex:none; width:42px; height:42px; border-radius:50%; border:none; color:#fff; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--secondary),var(--accent)); }

  .toggle-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .toggle-btn{ flex:1; min-width:140px; text-align:center; padding:10px 12px; border:1px solid var(--border); border-radius:12px;
    font-size:13.5px; font-weight:600; color:var(--muted); background:var(--surface-alt); transition:all .15s; }
  .toggle-btn small{ display:block; font-size:10.5px; font-weight:400; margin-top:2px; opacity:.8; }
  .toggle-btn[aria-pressed="true"]{ border-color:var(--secondary); color:var(--blue-text); background:color-mix(in srgb,var(--secondary) 8%,transparent); box-shadow:0 0 0 3px rgba(0,79,255,0.1); }

  /* ---------- Salida del prompt + CTA ---------- */
  .out-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .out-head .sec-title{ margin:0; }
  .out-actions{ display:flex; gap:8px; }
  .code{
    background:var(--panel-dark); border:1px solid var(--dark-border); border-radius:16px; padding:16px;
    max-height:250px; overflow:auto;
  }
  .code pre{ margin:0; font-family:'Poppins',sans-serif; font-size:12px; line-height:1.65; color:#C9CFD9; white-space:pre-wrap; word-break:break-word; }
  .code pre .h{ color:var(--accent); }
  .empty{ min-height:250px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:13.5px; padding:20px;
    border:1px dashed var(--border); border-radius:16px; }

  .kit{
    margin-top:16px; border-radius:20px; padding:22px; color:var(--dark-text); position:relative; overflow:hidden;
    background:linear-gradient(160deg,#0A0A0A 0%,#0A1840 100%); border:1px solid var(--dark-border);
    animation:fade .35s ease;
  }
  .kit::before{ content:""; position:absolute; top:-120px; right:-80px; width:320px; height:320px;
    background:radial-gradient(circle, rgba(0,210,254,0.22), transparent 70%); pointer-events:none; }
  .kit > *{ position:relative; }
  .kit-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .kit-badge{ font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent); border:1px solid rgba(0,210,254,0.4); background:rgba(0,210,254,0.1); padding:4px 11px; border-radius:999px; }
  .kit-price{ text-align:right; line-height:1; }
  .kit-price small{ display:block; font-size:11px; color:var(--dark-muted); margin-bottom:3px; }
  .kit-price strong{ font-family:'Poppins',sans-serif; font-size:30px; }
  .kit-price span{ font-size:12px; color:var(--dark-muted); margin-left:3px; }
  .kit h3{ font-size:clamp(16px,2.6vw,19px); line-height:1.3; margin-bottom:14px; }
  .kit h3 em{ font-style:normal; color:var(--accent); }
  .kit-list{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
  .kit-list li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#DCE3EE; }
  .kit-list .i{ color:var(--accent); width:17px; height:17px; padding:3px; border-radius:50%; background:rgba(0,210,254,0.14); stroke-width:3; }
  .bonus{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:14px; margin-bottom:16px;
    background:rgba(0,210,254,0.09); border:1px solid rgba(0,210,254,0.32); font-size:13px; color:#DCE3EE; }
  .bonus .i{ color:var(--accent); width:20px; height:20px; margin-top:1px; }
  .bonus b{ color:#fff; }

  /* ---------- Modal ---------- */
  .modal{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(5,8,18,0.62); backdrop-filter:blur(4px); }
  .modal.open{ display:flex; }
  .modal-card{ width:100%; max-width:430px; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:24px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); animation:fade .2s ease; }
  .modal-card h3{ font-size:19px; margin-bottom:4px; }
  .modal-x{ float:right; border:none; background:none; color:var(--muted); width:30px; height:30px; border-radius:8px; }
  .sum{ margin:16px 0; border:1px solid var(--border); border-radius:14px; background:var(--surface-alt); padding:4px 14px; }
  .sum div{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; font-size:13.5px; border-bottom:1px dashed var(--border); }
  .sum div:last-child{ border:none; font-weight:700; font-size:15px; }
  .sum span:last-child{ color:var(--muted); }
  .sum div:last-child span:last-child{ color:var(--text); }
  .field{ margin-bottom:12px; }

  /* ---------- Estudio ---------- */
  .proj-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .proj-head h2{ font-size:20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .crumb{ font-size:12.5px; color:var(--muted); margin-bottom:3px; }
  .studio{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
  @media (max-width:980px){ .studio{ grid-template-columns:1fr; } }
  .studio .panel{ padding:20px; }
  .studio-chat{ max-height:330px; overflow-y:auto; padding-right:3px; }
  .versions{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
  .versions li{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-alt); font-size:13px; }
  .versions li small{ display:block; color:var(--muted); font-size:11.5px; }
  .versions li.cur{ border-color:color-mix(in srgb,var(--secondary) 50%,transparent); background:color-mix(in srgb,var(--secondary) 7%,transparent); }
  .tool{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .seg{ display:inline-flex; gap:3px; padding:3px; background:var(--surface-alt); border:1px solid var(--border); border-radius:11px; }
  .seg button{ display:flex; align-items:center; gap:6px; border:none; background:none; color:var(--muted); font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:8px; }
  .seg button[aria-pressed="true"]{ background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(16,24,40,0.12); }
  .urlbar{ flex:1; min-width:150px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); background:var(--surface-alt); border:1px solid var(--border); border-radius:10px; padding:8px 12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .canvas{ background:repeating-conic-gradient(var(--surface-alt) 0% 25%, var(--page-bg) 0% 50%) 50% / 22px 22px; border:1px solid var(--border); border-radius:16px; padding:18px; }
  .device{ margin:0 auto; width:100%; max-width:100%; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 18px 40px -16px rgba(0,0,0,.35); border:1px solid var(--border); transition:width .3s ease; }
  .device[data-d="mobile"]{ width:375px; }
  .device[data-d="tablet"]{ width:768px; }
  .device iframe{ display:block; width:100%; height:540px; border:0; background:#fff; }

  /* ---------- Aprobar ---------- */
  .steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
  .step{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--muted); padding:7px 14px 7px 8px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
  .step b{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--surface-alt); border:1px solid var(--border); font-size:11px; }
  .step.done{ color:var(--ok); } .step.done b{ background:var(--ok); border-color:var(--ok); color:#fff; }
  .step.now{ color:var(--text); border-color:var(--secondary); } .step.now b{ background:var(--secondary); border-color:var(--secondary); color:#fff; }
  .apr{ display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:start; }
  @media (max-width:980px){ .apr{ grid-template-columns:1fr; } }
  .dsearch{ display:flex; gap:8px; }
  .domains{ margin-top:12px; display:grid; gap:8px; }
  .dom{
    display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
    border:1px solid var(--border); background:var(--surface-alt); color:var(--text); border-radius:12px; padding:11px 14px; font-size:14px; font-weight:600;
  }
  .dom[aria-pressed="true"]{ border-color:var(--secondary); box-shadow:0 0 0 3px rgba(0,79,255,0.12); background:color-mix(in srgb,var(--secondary) 6%,transparent); }
  .dom[disabled]{ opacity:.55; cursor:not-allowed; }
  .own{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--muted); }
  .mails{ display:grid; gap:8px; }
  .mailrow{ display:flex; align-items:center; gap:0; }
  .mailrow input{ border-radius:11px 0 0 11px; }
  .mailrow span{ flex:none; padding:10px 12px; font-size:13.5px; color:var(--muted); background:var(--surface-alt); border:1px solid var(--border); border-left:none; border-radius:0 11px 11px 0; }
  .sticky{ position:sticky; top:84px; }
  @media (max-width:980px){ .sticky{ position:static; } }
  .thumb{ border-radius:12px; overflow:hidden; border:1px solid var(--border); margin-bottom:14px; background:#FFFBF2; }
  .thumb i{ display:block; }
  .incl{ list-style:none; margin:14px 0; padding:0; display:grid; gap:8px; }
  .incl li{ display:flex; gap:9px; align-items:center; font-size:13.5px; }
  .incl .i{ color:var(--ok); stroke-width:3; }
  .kv{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:8px 0; border-bottom:1px dashed var(--border); }
  .kv span:first-child{ color:var(--muted); }
  .kv span:last-child{ font-weight:600; text-align:right; }
  .chk{ display:flex; gap:9px; align-items:flex-start; font-size:13px; margin:14px 0; }
  .chk input{ margin-top:3px; width:16px; height:16px; accent-color:var(--secondary); }

  /* ---------- Estado ---------- */
  .tl{ list-style:none; margin:0; padding:0; }
  .tl li{ position:relative; display:flex; gap:14px; padding:0 0 22px; }
  .tl li:last-child{ padding-bottom:0; }
  .tl li::before{ content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--border); }
  .tl li:last-child::before{ display:none; }
  .tl .dotc{ flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); border:2px solid var(--border); color:var(--muted); z-index:1; }
  .tl li.done .dotc{ background:var(--ok); border-color:var(--ok); color:#fff; }
  .tl li.done::before{ background:var(--ok); }
  .tl li.now .dotc{ border-color:var(--secondary); color:var(--blue-text); background:var(--surface); animation:pulse 1.8s infinite; }
  @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(0,79,255,.35);} 70%{ box-shadow:0 0 0 10px rgba(0,79,255,0);} 100%{ box-shadow:0 0 0 0 rgba(0,79,255,0);} }
  .tl h4{ font-size:14.5px; margin-bottom:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .tl p{ font-size:13px; color:var(--muted); }
  .eta{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; margin-bottom:20px;
    background:linear-gradient(135deg,rgba(0,79,255,.10),rgba(0,210,254,.10)); border:1px solid color-mix(in srgb,var(--secondary) 28%,transparent); }
  .eta .i{ width:22px; height:22px; color:var(--blue-text); }
  .eta b{ font-family:'Poppins',sans-serif; font-size:16px; }
  .eta small{ display:block; color:var(--muted); font-size:12.5px; }

  /* ---------- Equipo ---------- */
  .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
  @media (max-width:640px){ .stats{ grid-template-columns:1fr; } }
  .stat{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px 18px; }
  .stat small{ color:var(--muted); font-size:12.5px; font-weight:600; }
  .stat strong{ display:block; font-family:'Poppins',sans-serif; font-size:28px; margin-top:2px; }
  .adm{ display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start; }
  @media (max-width:980px){ .adm{ grid-template-columns:1fr; } }
  .tbl-wrap{ overflow-x:auto; }
  table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
  th{ text-align:left; font-size:11.5px; color:var(--muted); font-weight:600; padding:0 12px 10px; text-transform:uppercase; letter-spacing:.04em; }
  td{ padding:12px; border-top:1px solid var(--border); vertical-align:middle; }
  tbody tr{ cursor:pointer; transition:background-color .12s; }
  tbody tr:hover{ background:var(--surface-alt); }
  tbody tr[aria-selected="true"]{ background:color-mix(in srgb,var(--secondary) 7%,transparent); }
  td small{ display:block; color:var(--muted); font-size:12px; }
  .todo{ list-style:none; padding:0; margin:14px 0; display:grid; gap:9px; }
  .todo label{ display:flex; align-items:center; gap:10px; font-size:13.5px; cursor:pointer; }
  .todo input{ width:16px; height:16px; accent-color:var(--secondary); }
  .todo input:checked + span{ color:var(--muted); text-decoration:line-through; }

  .toast{ position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); opacity:0; pointer-events:none;
    background:var(--ink); color:#fff; border:1px solid var(--dark-border); padding:11px 18px; border-radius:12px; font-size:13px; font-weight:600; z-index:90; transition:all .25s; max-width:90vw; text-align:center; }
  .toast.show{ opacity:1; transform:translate(-50%,0); }

  
  /* ---------- Wizard (paso a paso) ---------- */
  .wiz{ max-width:820px; margin:0 auto; padding-top:6px; transition:max-width .3s; }
  .wiz.wide{ max-width:1080px; }
  .wbar{ display:flex; align-items:center; gap:16px; padding:6px 0 16px; border-bottom:1px solid var(--border); margin-bottom:38px; }
  .track{ flex:1; height:4px; border-radius:99px; background:var(--border); overflow:hidden; }
  .track i{ display:block; height:100%; width:25%; border-radius:99px; background:linear-gradient(90deg,var(--secondary),var(--accent)); transition:width .4s ease; }
  .stp{ font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
  .link{ background:none; border:none; padding:0; font:inherit; font-weight:600; font-size:13.5px; color:var(--text); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .link.demo{ display:block; margin-top:16px; font-size:12.5px; color:var(--muted); }
  .eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
  .wh{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(28px,5vw,44px); line-height:1.12; letter-spacing:-.02em; margin-bottom:14px; }
  .wh em{ font-family:'Poppins',sans-serif; font-style:italic; font-weight:500; letter-spacing:-.01em; color:var(--blue-text); }
  .wh2{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(26px,4vw,36px); letter-spacing:-.02em; margin:44px 0 6px; }
  .wh2 em{ font-family:'Poppins',sans-serif; font-style:italic; font-weight:500; color:var(--blue-text); }
  .wsub{ font-size:clamp(15px,2.2vw,17px); color:var(--muted); margin-bottom:30px; max-width:580px; }
  .wsub b{ color:var(--text); }
  .q{ font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; margin:28px 0 12px; }
  .opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:620px){ .opts{ grid-template-columns:1fr; } }
  .opt{ text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:18px 20px; color:var(--text); transition:border-color .15s, box-shadow .15s, transform .1s; }
  .opt:hover{ border-color:color-mix(in srgb,var(--secondary) 45%,var(--border)); }
  .opt:active{ transform:scale(0.99); }
  .opt b{ display:block; font-size:15.5px; }
  .opt span{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; }
  .opt[aria-pressed="true"]{ border-color:var(--secondary); box-shadow:0 0 0 3px rgba(0,79,255,0.14); background:color-mix(in srgb,var(--secondary) 5%,var(--surface)); }
  .frow{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
  @media (max-width:620px){ .frow{ grid-template-columns:1fr; } }
  .wiz .field{ margin-bottom:18px; }
  .wiz input[type=text], .wiz input[type=email], .wiz textarea, .wiz select{ padding:14px 16px; border-radius:16px; font-size:15.5px; background:var(--surface); }
  select{ width:100%; appearance:none; color:var(--text); background-color:var(--surface-alt); border:1px solid var(--border); font-family:inherit;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23667085'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:34px !important; }
  select:focus{ outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px rgba(0,79,255,0.14); }
  .phone{ display:flex; gap:8px; }
  .phone select{ width:118px; flex:none; }
  .agree{ display:flex; gap:11px; align-items:flex-start; margin-top:6px; font-size:13.5px; color:var(--muted); cursor:pointer; }
  .agree input{ width:18px; height:18px; margin-top:2px; accent-color:var(--secondary); flex:none; }
  .agree .link{ font-size:inherit; color:var(--blue-text); }
  .wact{ display:flex; align-items:center; justify-content:space-between; margin-top:38px; }
  .pillbtn{ border-radius:999px; padding:15px 28px; font-weight:700; font-size:15px; border:1.5px solid var(--text); background:transparent; color:var(--text); transition:filter .15s, transform .1s; }
  .pillbtn:active{ transform:scale(0.98); }
  .pillbtn.go{ margin-left:auto; border:none; color:#fff; background:linear-gradient(135deg,var(--secondary),var(--accent)); box-shadow:0 10px 24px rgba(0,79,255,0.28); }
  .pillbtn.go:hover{ filter:brightness(1.07); }
  .pillbtn.go[disabled]{ background:var(--surface-alt); color:var(--muted); box-shadow:none; border:1px solid var(--border); cursor:not-allowed; filter:none; }

  .load{ max-width:520px; margin:30px auto 0; text-align:center; }
  .load .wsub{ margin-left:auto; margin-right:auto; }
  .ck{ list-style:none; margin:0 auto; padding:0; display:grid; gap:10px; max-width:460px; text-align:left; }
  .ck li{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 16px; font-weight:700; color:var(--muted); }
  .ck .ic{ width:24px; height:24px; border-radius:50%; border:2px solid var(--border); flex:none; position:relative; }
  .ck li.run{ color:var(--text); }
  .ck li.run .ic{ border-top-color:var(--text); animation:spin .8s linear infinite; }
  .ck li.done{ color:var(--text); }
  .ck li.done .ic{ background:var(--ok); border-color:var(--ok); }
  .ck li.done .ic::after{ content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .fact{ display:flex; align-items:center; gap:16px; max-width:460px; margin:18px auto 0; padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:18px; text-align:left; font-size:13.5px; }
  .fact strong{ font-family:'Poppins',sans-serif; font-style:italic; font-weight:500; font-size:28px; flex:none; }

  .paths{ display:grid; grid-template-columns:1fr; gap:30px; margin-top:22px; }
  .path{ position:relative; }
  .path:not(:last-child)::after{ content:"o"; position:absolute; left:50%; top:calc(100% + 15px); transform:translate(-50%,-50%); padding:0 12px; font-size:12px; font-weight:600; color:var(--muted); background:var(--page-bg); }
  .note{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; margin-top:6px; font-size:13px; line-height:1.5; color:var(--muted);
    background:color-mix(in srgb,var(--secondary) 7%,transparent); border:1px solid color-mix(in srgb,var(--secondary) 22%,transparent); }
  .note .i{ color:var(--blue-text); margin-top:2px; }
  .donegrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
  .promptcol{ position:sticky; top:84px; }
  .promptcol .code{ max-height:min(560px, calc(100vh - 260px)); min-height:260px; }
  .nextcol .wh2{ margin-top:0; }
  @media (max-width:980px){ .donegrid{ grid-template-columns:1fr; } .promptcol{ position:static; } .promptcol .code{ max-height:380px; } }
  .upl{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:820px){ .upl{ grid-template-columns:1fr; } }
  .drop{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; border:2px dashed var(--border); border-radius:20px; padding:26px 18px; background:var(--surface); cursor:pointer; transition:border-color .15s, background-color .15s; margin-top:12px; }
  .drop:hover, .drop.over{ border-color:var(--secondary); background:color-mix(in srgb,var(--secondary) 5%,var(--surface)); }
  .drop:focus-within{ outline:2px solid var(--secondary); outline-offset:2px; }
  .drop .i{ width:26px; height:26px; color:var(--blue-text); }
  .drop b{ font-size:15px; }
  .drop span{ font-size:13px; color:var(--muted); }
  .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .files{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
  .files li{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-alt); border:1px solid var(--border); border-radius:12px; padding:8px 8px 8px 12px; font-size:13px; }
  .files li small{ color:var(--muted); margin-left:6px; }

  .path{ background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:22px; display:flex; flex-direction:column; gap:12px; }
  .path .ptop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .path .num{ width:30px; height:30px; border-radius:50%; background:var(--surface-alt); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
  .path h4{ font-size:18px; line-height:1.25; }
  .path p{ font-size:13.5px; color:var(--muted); }
  .path .pbtns{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; padding-top:6px; }
  .path.kit{ margin:0; background:linear-gradient(160deg,#0A0A0A 0%,#0A1840 100%); border-color:var(--dark-border); gap:0; }
  .path.kit .num{ background:rgba(0,210,254,0.14); border-color:rgba(0,210,254,0.4); color:var(--accent); }
  .path.kit h4{ color:var(--dark-text); margin:14px 0 8px; font-size:19px; }
  .path.kit h4 em{ font-style:normal; color:var(--accent); }
  .path.kit p{ color:#C5CFDD; margin-bottom:12px; }
  .path.kit .kit-list{ margin-bottom:12px; }
  .path.kit .bonus{ margin-bottom:14px; }
  .path.kit .price{ font-family:'Poppins',sans-serif; font-size:26px; font-weight:700; margin-bottom:12px; }
  .path.kit .price span{ font-size:12px; color:var(--dark-muted); font-weight:500; margin-left:4px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }


/* ===================================================================
   Piezas propias de la aplicación real
   =================================================================== */
.brand img{ width:auto; height:38px; max-width:200px; object-fit:contain; }
.page-label{ margin-left:auto; color:var(--muted); font-size:13px; font-weight:500; }
.wrap{ padding-top:24px; }
.center{ text-align:center; }
.mt{ margin-top:18px; }
.form-error{ color:var(--danger); font-size:13.5px; font-weight:600; margin:14px 0 0; }
.banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; margin-bottom:22px; border-radius:14px; font-size:13.5px;
  background:color-mix(in srgb,var(--secondary) 8%,transparent); border:1px solid color-mix(in srgb,var(--secondary) 25%,transparent); }
.progressbar{ height:10px; border-radius:99px; background:var(--border); overflow:hidden; margin:20px auto 8px; max-width:460px; }
.progressbar i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--secondary),var(--accent)); transition:width .6s ease; }
.bubble .progressbar{ height:6px; margin:8px 0 2px; max-width:none; }
.okbig{ width:64px; height:64px; border-radius:50%; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.okbig .i{ width:30px; height:30px; stroke-width:3; }
.spin{ width:26px; height:26px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--secondary); animation:spin .8s linear infinite; margin:0 auto 16px; }
.cardlist{ display:grid; gap:12px; }
.err-box{ border:1px solid color-mix(in srgb,var(--danger) 35%,transparent); background:color-mix(in srgb,var(--danger) 7%,transparent); color:var(--text); border-radius:14px; padding:14px 16px; font-size:14px; margin-top:16px; text-align:left; }
.studio-chat{ min-height:140px; }
.studio-chat .bubble{ white-space:pre-wrap; word-break:break-word; }
.chip-btn{ border:1px solid var(--border); background:var(--surface); color:var(--blue-text); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:600; }
.chip-btn:hover{ border-color:var(--secondary); }
.linkout{ color:var(--blue-text); font-weight:600; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.proj-steps{ margin-bottom:18px; }
.chat-input input:disabled, .send:disabled{ opacity:.55; cursor:not-allowed; }
.hide-sm{ }
@media (max-width:640px){ .hide-sm{ display:none; } }