/* La hoja del alta de la home (5-oct-2026): "Start her 2 free weeks" la abre, en la
   escritorio y en el celular. Usa los colores y la tipografia de la pagina que la carga
   (--bg, --ink, --teal, --btn, --sans...), asi se ve igual que el diseno en las dos.
   En el celular sube desde abajo y ocupa casi toda la pantalla; el boton de crear queda
   siempre a mano, abajo. */
html.su-lock,html.su-lock body{overflow:hidden}
.su{position:fixed;inset:0;margin:auto;padding:0;border:0;width:min(620px,calc(100% - 32px));max-width:none;
  height:min(860px,calc(100dvh - 48px));max-height:none;border-radius:28px;background:var(--bg);color:var(--ink);
  font-family:var(--sans);line-height:1.5;box-shadow:0 30px 80px -30px rgba(6,51,46,.55);overflow:hidden}
.su[open]{display:flex;flex-direction:column;animation:su-in .28s cubic-bezier(.2,.8,.2,1) both}
.su::backdrop{background:rgba(6,51,46,.45)}
.su.su-fallback{z-index:50}
@keyframes su-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.su-head{flex:none;display:flex;align-items:flex-start;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--line);background:var(--card)}
.su-head > div{flex:1;min-width:0}
.su-eb{margin:0;font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.su-head h2{margin:.15em 0 0;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.su-x{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink);font:800 1rem/1 var(--sans);cursor:pointer}

.su-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px 22px 22px;display:grid;gap:18px;align-content:start}
.su-plan{background:var(--sage);border-radius:20px;padding:14px 16px;display:grid;gap:4px}
.su-plan .su-amt{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.su-plan .su-amt b{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.su-plan .su-amt span{color:var(--muted);font-size:.95rem}
.su-plan p{margin:0;font-size:.95rem}
.su-plan .su-code{color:var(--teal);font-weight:700}
.su-plan button{justify-self:start;margin-top:4px;padding:0;border:0;background:none;color:var(--teal);font:700 .9rem var(--sans);text-decoration:underline;cursor:pointer;min-height:32px}

.su-form{display:grid;gap:16px}
.su-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.su-fld{display:grid;gap:6px;min-width:0;border:0;margin:0;padding:0}
.su-fld > label,.su-fld > legend,.su-lbl{font-weight:700;font-size:.98rem;padding:0}
.su-fld legend{margin-bottom:8px}
.su-opt{font-weight:600;font-size:.8rem;color:var(--muted);margin-left:4px}
.su input[type=text],.su input[type=email],.su input[type=tel],.su input[type=password],.su select{
  width:100%;min-width:0;font:500 16px/1.2 var(--sans);color:var(--ink);background:var(--card);
  border:2px solid var(--line);border-radius:14px;padding:0 14px;height:52px;-webkit-appearance:none;appearance:none}
.su select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.su input:focus,.su select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--sage)}
.su input.su-bad,.su select.su-bad{border-color:var(--btn)}

.su-pills{display:flex;flex-wrap:wrap;gap:8px}
.su-pills label{position:relative;cursor:pointer}
.su-pills input{position:absolute;opacity:0;width:1px;height:1px}
.su-pills span{display:inline-flex;align-items:center;min-height:46px;padding:0 1.05em;border-radius:999px;border:2px solid var(--line);background:var(--card);font:700 .95rem/1 var(--sans);color:var(--ink)}
.su-pills input:checked + span{background:var(--teal);border-color:var(--teal);color:#fff}
.su-pills input:focus-visible + span{outline:3px solid var(--btn);outline-offset:2px}

.su-consent{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:.86rem;color:var(--muted);cursor:pointer}
.su-consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--teal)}
.su-consent b{color:var(--ink)}

.su-about{background:var(--paper2);border-radius:20px;padding:16px;display:grid;gap:14px}
.su-about h3{margin:0;font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.su-about h3 small{display:block;font-weight:600;font-size:.82rem;color:var(--muted);letter-spacing:0;margin-top:2px}

.su-coderow{display:flex;gap:8px}
.su-coderow input{flex:1;text-transform:uppercase}
.su-coderow button{flex:none;min-width:88px;height:52px;border-radius:999px;border:2px solid var(--teal);background:var(--card);color:var(--teal);font:800 .95rem/1 var(--sans);cursor:pointer}
.su-coderow button:disabled{opacity:.55}
.su-codemsg{margin:0;font-size:.88rem;min-height:1.2em;color:var(--muted)}
.su-codemsg.ok{color:var(--teal);font-weight:700}
.su-codemsg.no{color:var(--orange);font-weight:700}

.su-fine{margin:0;font-size:.85rem;color:var(--muted)}
.su-fine a,.su-consent a{color:var(--teal);font-weight:700}
.su-msg{margin:0;background:var(--paper2);border:1.5px solid var(--btn);border-radius:14px;padding:12px 14px;font-weight:600;font-size:.95rem}
.su-msg a{color:var(--teal);font-weight:800}

.su-foot{flex:none;border-top:1px solid var(--line);background:var(--card);padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));display:grid;gap:6px;justify-items:center}
.su-go{width:100%;display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 1.4em;border-radius:999px;border:0;background:var(--btn);color:var(--btn-ink);
  font:800 1.05rem/1 var(--sans);cursor:pointer;box-shadow:0 10px 22px -12px rgba(239,148,64,.95);text-decoration:none}
.su-go:disabled{opacity:.7;cursor:progress}
.su-login{margin:0;font-size:.88rem;color:var(--muted)}
.su-login a{color:var(--teal);font-weight:700}

.su-welcome{display:grid;gap:14px;justify-items:start;padding-top:6px}
.su-welcome .su-tick{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:1.6rem;font-weight:800}
.su-welcome h3{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.su-welcome p{margin:0;font-size:1.05rem;color:var(--muted)}
.su-welcome ol{margin:0;padding-left:1.2em;display:grid;gap:.5em;font-size:1rem}
.su-welcome .su-hand{font:700 1.5rem/1.1 var(--hand);color:var(--orange)}

@media (max-width:640px){
  .su{width:100%;height:calc(100dvh - 10px - env(safe-area-inset-top,0px));margin:auto 0 0;border-radius:24px 24px 0 0}
  .su[open]{animation-name:su-up}
  .su-head{padding:16px 16px 12px}
  .su-head h2{font-size:1.35rem}
  .su-body{padding:16px 16px 20px}
  .su-row{grid-template-columns:1fr}
  .su-foot{padding-inline:16px}
}
@keyframes su-up{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.su[open]{animation:none}}