/* registro.css — la puerta de afiliación (/afiliarse)
 *
 * "Hazlo conforme al diseño que te fue mostrado" (Ex 25:9)
 *
 * HOJA APARTE, Y NO POR CAPRICHO. `sitio.css` pasa de las mil líneas y estos
 * estilos sirven a UNA pantalla. Cargarlos en toda la cantera pública sería
 * cobrarle a veinte páginas el peso de una. Se engancha desde la plantilla
 * por el bloque `cabeza_extra` del armazón.
 *
 * DEPENDE de `sitio.css`, que va antes y define `:root`. Aquí NO se redefine
 * ni un solo token: una variable duplicada es dos verdades esperando a
 * separarse. Y NO se usa `--radio` de `panel.css` ni ninguna que no viva en
 * `sitio.css` — una variable CSS que no existe no da error, simplemente deja
 * la regla muerta y en silencio (ya pasó en `panel.css` con `--radio`).
 *
 * CONTRASTE, medido y no supuesto, sobre blanco:
 *   --tinta (#16232c)        ~15:1   cualquier texto
 *   --tinta-suave (#4c5c68)  ~6.7:1  cualquier texto
 *   --azul-hondo (#10699d)   ~5.9:1  cualquier texto
 *   --tinta-tenue (#78858f)  ~3.7:1  NO para texto normal — sólo bordes y
 *                                    trazos de interfaz (umbral 3:1)
 *   --verde (#369440)        ~3.8:1  NO para texto normal sobre blanco —
 *                                    sólo relleno, bordes y texto grande
 * Por eso abajo no hay una sola línea de prosa en `--tinta-tenue`.
 */

/* ── `hidden` GANA SIEMPRE ──────────────────────────────────────────────── */

/* EL ATRIBUTO `hidden` NO SE DEFIENDE SOLO. Equivale a `display:none` puesto
 * por la hoja del NAVEGADOR, y cualquier regla de autor con `display` lo pisa
 * sin avisar. En esta pantalla mordió DOS VECES el mismo día:
 *
 *   · `.reg__botonera .boton { display:inline-flex }` sacaba los tres botones
 *     —«Atrás», «Continuar» y «Enviar»— juntos en el paso 1;
 *   · `.reg__pasos { display:flex }` pintaba la barra de tres pasos incluso
 *     SIN JavaScript, que es justo lo que el diseño promete que no pasa:
 *     una barra de pasos sin script es un adorno que miente.
 *
 * Taparlo caso por caso deja el tercero esperando. Se cierra la clase entera:
 * lo que lleva `hidden` no se pinta, y punto. El `!important` aquí no es
 * pereza — es la única forma de que un atributo del HTML le gane a la
 * especificidad de una hoja, y es la misma regla que trae el reset de
 * cualquier casa seria. */
[hidden] { display: none !important; }

/* ── La cinta de arriba ─────────────────────────────────────────────────── */

/* Antes esto era un hero de pantalla completa con la foto de San Antonio y el
 * formulario flotando a la derecha: en escritorio malgastaba media pantalla
 * en tres renglones de texto, y en celular empujaba el formulario fuera de
 * vista. Ahora la foto es una CINTA — presencia, no protagonismo. */
.reg__cinta {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 3.4rem;
  overflow: hidden;
  background: var(--noche);
}
.reg__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.reg__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,44,68,.62) 0%, rgba(6,44,68,.86) 100%);
}
.reg__cinta-texto { position: relative; color: #fff; }
.reg__cinta-texto .kicker { margin-bottom: .35rem; }
.reg__cinta-texto h1 { color: #fff; margin: 0; }

/* ── La caja ────────────────────────────────────────────────────────────── */

/* Sube sobre la cinta. El traslape es lo que dice «aquí es donde trabajas»
 * sin escribirlo. */
.reg__caja {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: -2.2rem auto 4rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 2rem 2.1rem 2.3rem;
}
.reg__entrada { font-size: 1.06rem; color: var(--tinta-suave); margin: 0 0 1.2rem; }

.reg__nota { font-size: .9rem; color: var(--tinta-suave); margin: .9rem 0 0; }
.reg__nota--pie { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--linea-clara); }

/* El aviso para quien llegó desde el sitio en inglés. Ámbar y no rojo: no
   es un error, es una advertencia de cortesía. Usa los tokens del aviso de
   revisión, que ya existen para exactamente este tono. */
.reg__ingles {
  background: var(--ambar);
  border: 1px solid var(--ambar-borde);
  border-left-width: 4px;
  border-radius: 10px;
  padding: .8rem .95rem;
  margin: 0 0 1.2rem;
  font-size: .93rem;
  color: var(--ambar-tinta);
}
.reg__ingles a { color: var(--ambar-tinta); }

/* ── La tira de tranquilidad ────────────────────────────────────────────── */

/* Contesta el miedo concreto —«¿me van a pedir la tarjeta?»— antes de que la
 * persona escriba la primera letra. */
.reg__calma {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: .7rem .9rem;
  background: var(--hueso);
  border: 1px solid var(--linea-clara);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}
.reg__calma li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--azul-hondo);
}
.reg__calma .i { flex: 0 0 auto; color: var(--verde-hondo); }

/* ── La barra de pasos ──────────────────────────────────────────────────── */

.reg__pasos {
  list-style: none;
  display: flex;
  margin: 0 0 1.6rem;
  padding: 0;
}
.reg__paso {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  position: relative;
  font-size: .8rem;
  color: var(--tinta-suave);
  text-align: center;
}
/* La línea que une los pasos. Va DETRÁS del número (z-index) para que el
 * círculo la tape y no la cruce por en medio. */
.reg__paso::before {
  content: "";
  position: absolute;
  top: 15px; left: -50%;
  width: 100%; height: 2px;
  background: var(--linea);
}
.reg__paso:first-child::before { display: none; }
.reg__paso-num {
  position: relative;
  z-index: 1;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanco);
  border: 2px solid var(--linea);
  font-weight: 700; font-size: .9rem;
  color: var(--tinta-suave);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* HECHO: se puede volver. Por eso es un botón de verdad, con cursor y foco. */
.reg__paso--hecho { cursor: pointer; color: var(--azul-hondo); }
.reg__paso--hecho .reg__paso-num {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
.reg__paso--hecho::before { background: var(--verde); }
.reg__paso--hecho:hover .reg__paso-num { background: var(--verde-hondo); border-color: var(--verde-hondo); }
.reg__paso--hecho:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

/* AQUI ESTOY. Se distingue por FORMA (anillo) además de por color: quien no
 * percibe el verde tiene que poder saber en qué paso va. */
.reg__paso--aqui { color: var(--tinta); font-weight: 700; }
.reg__paso--aqui .reg__paso-num {
  background: var(--azul-hondo); border-color: var(--azul-hondo); color: #fff;
  box-shadow: 0 0 0 4px rgba(16,105,157,.18);
}
@media (max-width: 420px) { .reg__paso-txt { font-size: .72rem; } }

/* ── Los tramos ─────────────────────────────────────────────────────────── */

.reg__tramo { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.reg__tramo[hidden] { display: none; }
.reg__legenda { padding: 0; margin-bottom: 1rem; display: block; width: 100%; }
/* `width: fit-content` NO ES ESTETICA: al avanzar de paso, el foco se lleva a
 * este encabezado para que un lector de pantalla anuncie donde quedo la
 * persona. Siendo bloque, el anillo de foco del navegador abarcaba TODO el
 * ancho de la caja y parecia un error de pintado. Ajustado al texto, la misma
 * ayuda deja de estorbar. El anillo se declara aqui en vez de heredar el del
 * navegador —que cambia de color entre navegadores y a veces no se ve sobre
 * blanco. Lo que NO se hace es quitarlo: sin anillo, quien navega con teclado
 * no sabe donde esta (Lv 19:14 — no pongas tropiezo al ciego). */
.reg__legenda > b {
  display: block;
  width: fit-content;
  font-size: 1.22rem; color: var(--tinta); line-height: 1.3;
}
.reg__legenda > b:focus { outline: 2px solid var(--azul); outline-offset: 5px; border-radius: 4px; }
.reg__legenda > span { display: block; font-size: .92rem; color: var(--tinta-suave); margin-top: .25rem; }

/* ── Las tarjetas de nivel ──────────────────────────────────────────────── */

/* SE LLAMA `nivelop` Y NO `nivel` POR UNA RAZON DURA: `.nivel` YA EXISTE en
 * `sitio.css` — es la tarjeta de precios de `/membresias`, con su borde, su
 * relleno y su precio en Fraunces. Las dos hojas se cargan juntas en esta
 * pagina, asi que mi `.nivel` heredaba el marco y la serif de aquel y salian
 * tarjetas con DOBLE MARCO y el precio en otra tipografia. No fue un fallo de
 * diseno: fue reusar un nombre ocupado.
 *
 * Y no se reusa aquel componente porque no es lo mismo: aquel es una lamina
 * de venta que se lee; este es un CONTROL que se elige, con radio adentro,
 * estado de foco y estado de elegido. Mismo sustantivo, distinta cosa.
 * (`before_writing §G1` — un solo altar: el pecado no es tener dos
 * componentes, es darles el mismo nombre.) */

.reg__niveles { display: grid; gap: .8rem; }
@media (min-width: 620px) { .reg__niveles { grid-template-columns: 1fr 1fr; } }

.nivelop { display: block; position: relative; cursor: pointer; }

/* El radio NO se esconde con display:none — eso lo saca del orden de
 * tabulación y el teclado deja de poder elegir nivel. Se hace transparente y
 * se estira sobre la tarjeta: sigue siendo el control, sólo que invisible. */
.nivelop input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.nivelop__cara {
  display: block;
  height: 100%;
  padding: 1rem 1.1rem 1.05rem;
  background: var(--blanco);
  border: 2px solid var(--linea);
  border-radius: 12px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.nivelop:hover .nivelop__cara { border-color: var(--celeste); transform: translateY(-1px); }
.nivelop input:focus-visible + .nivelop__cara { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ELEGIDO: borde grueso + fondo + palomita. Tres señales, no sólo el color. */
.nivelop input:checked + .nivelop__cara {
  border-color: var(--verde);
  background: #f2faf3;
  box-shadow: 0 0 0 3px rgba(54,148,64,.14);
}
.nivelop input:checked + .nivelop__cara .nivelop__marca { opacity: 1; transform: scale(1); }

.nivelop__alto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nivelop__nombre { font-weight: 700; font-size: 1.1rem; color: var(--tinta); }
.nivelop__sello {
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--dorado); color: #34260a;
  padding: .16rem .46rem; border-radius: 999px;
}
.nivelop__clase { display: block; font-size: .85rem; color: var(--tinta-suave); margin-top: .1rem; }
.nivelop__precio { display: block; margin-top: .55rem; color: var(--tinta); }
.nivelop__precio b { font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.nivelop__precio small { font-size: .88rem; color: var(--tinta-suave); }
.nivelop__antes { display: block; font-size: .82rem; color: var(--verde-hondo); font-weight: 600; margin-top: .15rem; }
.nivelop__antes s { color: var(--tinta-suave); font-weight: 400; }
.nivelop__lema { display: block; font-size: .87rem; color: var(--tinta-suave); margin-top: .5rem; }

.nivelop__marca {
  position: absolute; top: .7rem; right: .75rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--verde); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.6);
  transition: opacity .16s ease, transform .16s ease;
}
.nivelop__marca .i { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .nivelop__cara, .nivelop__marca, .reg__paso-num { transition: none; }
  .nivelop:hover .nivelop__cara { transform: none; }
}

/* ── Los campos ─────────────────────────────────────────────────────────── */

.campo { margin-bottom: 1rem; }
.campo label {
  display: block;
  font-weight: 600; font-size: .93rem;
  color: var(--tinta);
  margin-bottom: .32rem;
}
.campo__opt { font-weight: 400; color: var(--tinta-suave); font-size: .85rem; }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input:not([type]) {
  width: 100%;
  min-height: 48px;           /* dedo, no ratón */
  padding: .62rem .8rem;
  font: inherit;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--tinta-tenue);   /* 3.7:1 — borde de interfaz, no texto */
  border-radius: 8px;
}
.campo input::placeholder { color: var(--tinta-suave); opacity: .75; }
.campo input:focus {
  outline: 3px solid rgba(30,144,194,.35);
  outline-offset: 0;
  border-color: var(--azul);
}
/* El error se dice con TEXTO y con borde, nunca sólo con rojo. */
.campo input[aria-invalid="true"] { border-color: #b3261e; border-width: 2px; }
.campo__mal {
  display: flex; align-items: flex-start; gap: .35rem;
  font-size: .87rem; color: #8c1d18; font-weight: 600;
  margin: .35rem 0 0;
}
.campo__pista { font-size: .85rem; color: var(--tinta-suave); margin: .35rem 0 0; }

.casilla {
  display: flex !important;
  align-items: center; gap: .5rem;
  margin: .6rem 0 0 !important;
  font-weight: 400 !important;
  min-height: 44px;
}
.casilla input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }

/* ── El rechazo y su apelación ──────────────────────────────────────────── */

/* El motivo que escribió el consejo. Recuadro sobrio y NO rojo: el rojo ya
   lo lleva el renglón de arriba que da la noticia. Repetirlo aquí convierte
   una explicación en un regaño. */
.reg__motivo {
  background: var(--hueso);
  border-left: 4px solid var(--tinta-tenue);
  border-radius: 0 10px 10px 0;
  padding: .8rem 1rem;
  margin: 0 0 1.2rem;
  color: var(--tinta);
  white-space: pre-wrap;   /* respeta los renglones que el consejo escribió */
}

/* El aviso de los 30 días: ámbar, como el de revisión. Es una advertencia,
   no un error — no hizo nada mal, sólo pasó el tiempo. */
.reg__revisar {
  display: flex; gap: .55rem; align-items: flex-start;
  background: var(--ambar);
  border: 1px solid var(--ambar-borde);
  border-left-width: 4px;
  border-radius: 10px;
  padding: .8rem .95rem;
  margin: 0 0 1.2rem;
  font-size: .94rem;
  color: var(--ambar-tinta);
}
.reg__revisar .i { flex: 0 0 auto; margin-top: .2rem; }

.apelaciones { margin: 1.4rem 0; }
.apelaciones h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.apelacion {
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: .8rem .95rem;
  margin-bottom: .8rem;
}
.apelacion__fecha { font-size: .8rem; color: var(--tinta-suave); margin: 0 0 .3rem; }
.apelacion__texto { margin: 0; white-space: pre-wrap; }
/* La respuesta va SANGRADA y con su propio borde: quien lee tiene que
   distinguir de un vistazo lo que escribió él de lo que le contestaron. */
.apelacion__respuesta {
  margin: .8rem 0 0; padding: .7rem .9rem;
  background: #f2faf3; border-left: 3px solid var(--verde);
  border-radius: 0 8px 8px 0;
}
.apelacion__respuesta p { margin: 0; }
.apelacion__espera {
  display: flex; align-items: center; gap: .4rem;
  margin: .7rem 0 0; font-size: .88rem; color: var(--tinta-suave);
}

.apelar { margin: 1.2rem 0 0; }
.apelar > summary {
  cursor: pointer; font-weight: 600; color: var(--azul-hondo);
  padding: .6rem 0; min-height: 44px; display: flex; align-items: center;
}
.apelar > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.apelar textarea {
  width: 100%; min-height: 8rem; padding: .62rem .8rem;
  font: inherit; color: var(--tinta);
  border: 1px solid var(--tinta-tenue); border-radius: 8px;
}
.apelar textarea:focus { outline: 3px solid rgba(30,144,194,.35); border-color: var(--azul); }
.apelar .pista { display: block; font-size: .85rem; color: var(--tinta-suave); margin: .35rem 0 .9rem; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.reg__error {
  display: flex; align-items: flex-start; gap: .55rem;
  background: #fdecea; border: 1px solid #f3b7b1; border-left: 4px solid #b3261e;
  color: #8c1d18;
  padding: .8rem .95rem; border-radius: 10px;
  margin: 0 0 1.2rem; font-size: .95rem;
}
.reg__error .i { flex: 0 0 auto; margin-top: .15rem; }

.reg__resumen {
  background: var(--crema);
  border: 1px solid var(--dorado-claro);
  border-radius: 10px;
  padding: .65rem .9rem;
  font-size: .92rem; color: var(--tinta);
  margin: 0 0 1.1rem;
}

/* ── La botonera ────────────────────────────────────────────────────────── */

.reg__botonera { display: flex; gap: .7rem; align-items: center; margin-top: 1.4rem; }
.reg__botonera .boton { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; }

.reg__seguir, .reg__enviar { flex: 1 1 auto; }
.boton--hueco {
  background: var(--blanco); color: var(--azul-hondo); border-color: var(--linea);
  flex: 0 0 auto;
}
.boton--hueco:hover { background: var(--hueso); color: var(--azul-hondo); }
.boton[disabled] { opacity: .6; cursor: progress; }

/* ── El remate (ya se mandó) ────────────────────────────────────────────── */

.reg__remate { border-radius: 12px; padding: 1.2rem 1.3rem; margin: 0 0 1.2rem; }
.reg__remate p { margin: .5rem 0 0; }
.reg__remate-titulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.15rem; font-weight: 700; margin: 0 !important;
}
.reg__remate--bueno { background: #f2faf3; border: 1px solid #b9dfbe; color: var(--tinta); }
.reg__remate--bueno .reg__remate-titulo { color: var(--verde-hondo); }
.reg__remate--malo { background: #fdecea; border: 1px solid #f3b7b1; color: #8c1d18; }

/* AVISO: ni celebración ni desastre. Lo usa la revisión del correo cuando
   contesta algo que la persona tiene que LEER —«ya te mandamos la liga», «tu
   membresía no está al corriente»— y que no es un error suyo. Pintarlo en
   rojo la haría sentir que hizo algo mal; en verde, que ya terminó. */
.reg__remate--aviso {
  background: var(--ambar, #fdf6e3);
  border: 1px solid var(--ambar-borde, #e8d9a8);
  color: var(--ambar-tinta, #6b5314);
}

/* ── Paso 0 · el correo ─────────────────────────────────────────────────────
   Una sola caja, angosta, centrada. El ancho NO es estético: un campo de
   texto que ocupa toda la pantalla parece pedir un párrafo, y aquí se pide
   una línea. */
.reg__paso0 { max-width: 30rem; margin: 1.4rem 0 0; }
.reg__paso0 .reg__botonera { margin-top: 1rem; }

/* El botón del paso 0 va SOLO, así que no hereda la fila de tres de abajo. */
.reg__paso0 .boton { min-width: 12rem; }

/* La acción que remata una respuesta («Entrar al portal»). */
.reg__acciones { margin: 1.1rem 0 0; }

/* ── El correo ya comprobado, dentro del formulario largo ───────────────────
   Se ve, no se teclea. Lleva su propia caja para que se lea como un dato
   confirmado y no como un campo que alguien olvidó habilitar. */
.campo__etiqueta {
  display: block; font-weight: 600; color: var(--tinta);
  margin-bottom: .35rem;
}
.reg__correo-fijo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  margin: 0; padding: .6rem .8rem;
  background: var(--hueso, #f6f4ef);
  border: 1px solid var(--linea-clara, #e3e0d8);
  border-radius: 8px;
}
.reg__correo-fijo b { word-break: break-all; }
.reg__correo-fijo a { font-size: .9rem; }

.reg__siguiente { margin: 1.2rem 0 0; padding-left: 1.3rem; color: var(--tinta-suave); }
.reg__siguiente li { margin-bottom: .45rem; }
.reg__siguiente b { color: var(--tinta); }

/* ── Celular ────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .reg__cinta { min-height: 150px; padding-bottom: 2.6rem; }
  .reg__caja { padding: 1.4rem 1.15rem 1.7rem; border-radius: 12px; margin-bottom: 2.5rem; }
  .reg__calma { gap: .3rem .9rem; }
  .reg__botonera { flex-wrap: wrap; }
  .boton--hueco { flex: 1 1 100%; order: 2; }
  .reg__seguir, .reg__enviar { order: 1; flex: 1 1 100%; }
}

/* ── «Te invitó …» (058) ────────────────────────────────────────────────── */

/* Quien llega por la liga de un socio lo lee arriba, antes de teclear: es
 * la cara conocida que lo trajo. Mismo cuerpo que la tira de tranquilidad,
 * con el filo verde de lo que está bien. */
.reg__invita {
  display: flex; align-items: center; gap: .5rem;
  background: var(--hueso);
  border: 1px solid var(--linea-clara);
  border-left: 4px solid var(--verde-hondo);
  border-radius: 10px;
  padding: .7rem .95rem;
  margin: 0 0 1.2rem;
  font-size: .95rem;
  color: var(--azul-hondo);
}
.reg__invita .i { flex: 0 0 auto; color: var(--verde-hondo); }