/* Corrida UI-0 (21-ago-2026): la puerta se viste con los tokens del
   congelado (suynda-landing/docs/design/design-ui-suynda.md §1) — regla del
   amarillo: las pantallas de PUERTA son amarillo pleno; adentro, tarjeta
   blanca. Acción primaria = tinta; el verde es acción/positivo. El botón de
   WhatsApp conserva el verde del CANAL a propósito: señala "esto abre
   WhatsApp", no es la acción primaria de la pantalla.
   TIPOGRAFÍA: system-ui SE QUEDA — PUBLIC_SURFACE_CSP no declara font-src y
   la CSP no se abre por estética (condición de mesa, 21-ago). Poppins acá
   espera una decisión propia. */
:root {
  color-scheme: light;
  --amarillo: #ffc20e;
  --tinta: #1f1d1a;
  --tinta-suave: #3d4a45;
  --muted: #6b7772;
  --card: #ffffff;
  --linea: #e3e7e2;
  --verde: #0e7a5f;
  --rojo: #b0453a;
  --rojo-bg: #f9ecea;
  --ambar-bg: #fbf1dc;
  --ambar-tx: #8a6410;
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--amarillo);
  color: var(--tinta);
  margin: 0;
  padding: 2rem 1rem;
}
main {
  max-width: 28rem;
  margin: 0 auto;
  background: var(--card);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 8px 30px rgba(20, 32, 28, 0.18);
}
h1 { font-size: 1.25rem; margin: 0 0 0.25rem; }
p.subtitulo { color: var(--muted); margin: 0 0 1.5rem; }
label { display: block; font-weight: 600; margin: 1rem 0 0.25rem; font-size: 0.9rem; }
input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  font-size: 1rem;
}
input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
button {
  display: inline-block;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.7rem;
  border: none;
  border-radius: 10px;
  background: var(--tinta);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button:disabled { background: var(--tinta-suave); opacity: 0.55; cursor: not-allowed; }
a.wa-boton {
  display: block;
  text-align: center;
  margin-top: 1rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: #25d366;
  color: #063f1f;
  font-weight: 700;
  text-decoration: none;
}
.oculto { display: none; }
.mensaje-error {
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: var(--rojo-bg);
  color: var(--rojo);
  font-size: 0.9rem;
}
.ayuda { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }
.meta-invitacion { background: #f6f7f5; border-radius: 10px; padding: 0.9rem; margin: 1rem 0; }
.meta-invitacion dt { font-weight: 600; font-size: 0.8rem; color: var(--muted); }
.meta-invitacion dd { margin: 0 0 0.6rem; }
.mandato-tildes { list-style: none; margin: 0.75rem 0; padding: 0; }
.mandato-tildes li { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }
.mandato-tildes input { width: auto; margin: 0; }
.mandato-tildes label { display: inline; font-weight: 400; margin: 0; font-size: 0.9rem; }
button.btn-secundario { background: var(--card); color: var(--tinta); border: 1.5px solid var(--linea); }
/* P7 — la intención elegida tiene que VERSE elegida: son dos botones que no
   navegan, seleccionan, y sin marca visible la persona no sabe qué va a pasar
   al tocar Crear. El verde es la marca de lo elegido (acción/positivo). */
button.btn-opcion.elegida { outline: 2px solid var(--verde); outline-offset: 2px; }
/* Corrida K tramo 2 — P5: dos opciones humanas, no un radio group. Cada una
   es un botón con su explicación adentro (Rev 2.2: "Empresa, estudio,
   emprendimiento o trabajo independiente"). */
button.btn-opcion { text-align: left; padding: 0.9rem 1rem; margin-top: 0.75rem; }
button.btn-opcion strong { display: block; font-size: 1rem; }
button.btn-opcion span { display: block; font-weight: 400; font-size: 0.85rem; opacity: 0.85; margin-top: 0.15rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
/* El aviso anti-phishing de P3 tiene que leerse distinto del resto de la
   ayuda: es lo único en la pantalla que pide cautela — ámbar del congelado. */
p.aviso-phishing { border-left: 3px solid var(--ambar-tx); background: var(--ambar-bg); padding: 0.5rem 0.6rem; border-radius: 0 8px 8px 0; color: var(--ambar-tx); }