/* ============================================================================
 * ORANGE CRACKS · el registro
 * ----------------------------------------------------------------------------
 * Va aparte de estilo.css a propósito. estilo.css es el sistema de diseño de
 * la página —lo que se lee, lo que se mira—, y esto es una herramienta: un
 * formulario que hay que rellenar con una mano, en la calle, con prisa. Se
 * miden cosas distintas y conviene poder tocar una sin rozar la otra.
 *
 * Hereda TODAS las variables de estilo.css (colores, radios, tiempos, curvas),
 * así que no redefine ni un color: si algún día cambia el naranja del escudo,
 * cambia aquí también sin tocar este archivo.
 *
 * LA REGLA DE LOS TAMAÑOS
 * Ningún campo baja de 16px de tipo. Por debajo de eso, Safari en iPhone hace
 * zoom solo al enfocar un input y descoloca la pantalla entera; se ha visto a
 * gente abandonar un formulario por eso sin saber por qué.
 * ========================================================================== */

/* Mientras la ventana está abierta el fondo no se mueve. Sin esto, el scroll
   del dedo sobre el modal arrastra la página de debajo y al cerrar apareces en
   otro sitio. */
body.sin-scroll { overflow: hidden; }

/* ==========================================================================
   0 · EL SELLO DE LA SEMANA GRATIS
   Sale en tres sitios —el aviso de abajo, la sección de inscripción y la
   pantalla de "ya está inscrito"— y en los tres se pinta igual, porque lo que
   convence es reconocerlo, no leerlo tres veces.

   La palabra va SUELTA, en su propia etiqueta y con la tipografía del escudo.
   Un "gratis" dentro de un párrafo se lee al mismo ritmo que el resto y se
   pierde; en una pastilla naranja se ve antes de empezar a leer.
   ========================================================================== */

.regalo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 13px 16px;
  border-radius: var(--radio);
  background: linear-gradient(150deg, rgb(var(--naranja-rgb) / 16%), rgb(255 255 255 / 3%));
  border: 1px solid rgb(var(--naranja-rgb) / 42%);
}
/* `display: flex` le gana al [hidden] que trae el navegador, asi que el
   recuadro no se esconde solo cuando el JS lo apaga. Hay que decirlo aqui. */
.regalo[hidden] { display: none; }

.regalo__palabra {
  flex-shrink: 0;
  padding: 8px 16px 6px;
  border-radius: 999px;
  background: var(--llama);
  color: #170800;
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.regalo__texto {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--marfil);
}

/* En el aviso hay poco alto y el sello comparte sitio con dos botones. */
.regalo--aviso {
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.regalo--aviso .regalo__palabra { padding: 6px 13px 5px; font-size: 1.05rem; }
.regalo--aviso .regalo__texto { font-size: 14px; flex-basis: 160px; }

/* En la sección de inscripción es lo primero que se ve del bloque del dinero,
   así que se le deja respirar. */
.regalo--grande {
  margin: 22px auto 26px;
  max-width: 720px;
  padding: 16px 20px;
}
.regalo--grande .regalo__texto { font-size: 16px; }

/* ==========================================================================
   1 · EL AVISO DE ÚLTIMA HORA
   Abajo y no arriba: arriba taparía el escudo, que es lo primero que el
   cliente quiere que se vea. Abajo se lee igual y no compite con nada.

   Es el recuadro más grande de la página a propósito: es lo único que se le
   pone delante a alguien que llegó, leyó y todavía no ha hecho nada. Aun así
   ocupa poco más de un tercio de la pantalla del celular más chico, que es
   donde deja de ser un aviso y empieza a ser una puerta cerrada.
   ========================================================================== */

.urgente {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 260;
  width: min(95vw, 640px);
  transform: translate(-50%, calc(100% + 40px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border-radius: var(--radio);
  background: rgb(16 17 21 / 96%);
  border: 1px solid rgb(var(--naranja-rgb) / 34%);
  box-shadow: var(--sombra-alta);
  opacity: 0;
  transition: transform var(--medio) var(--rebote), opacity var(--medio) var(--curva);
}
.urgente.visible { transform: translate(-50%, 0); opacity: 1; }
.urgente[hidden] { display: none; }

/* Con una ficha abierta, el aviso se aparta. Flota por encima de casi todo
   -z-index 260 contra los 200 de la ficha- y se plantaba justo encima de lo
   que el usuario acababa de abrir. Se retira con la misma transicion con la
   que entro, para que se lea como que se quita de en medio y no como que se
   ha roto algo. */
body.con-ficha .urgente {
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
}

/* El punto que late. Es lo único que se mueve en el aviso: si se moviera todo,
   dejaría de leerse como urgencia y empezaría a leerse como anuncio. */
.urgente__pulso {
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--naranja);
  box-shadow: 0 0 0 0 rgb(var(--naranja-rgb) / 60%);
  animation: urgente-latido 2s var(--curva) infinite;
}
@keyframes urgente-latido {
  70%  { box-shadow: 0 0 0 12px rgb(var(--naranja-rgb) / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(var(--naranja-rgb) / 0%); }
}

.urgente__etiqueta {
  margin: 0 0 3px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar);
}
.urgente__titulo {
  margin: 0 0 6px;
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-size: clamp(1.34rem, 5.6vw, 1.78rem);
  line-height: 1.1;
  letter-spacing: .01em;
}
.urgente__bajada {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--gris);
}

/* -------------------------------------------------------- EL CONTADOR
   Los números en tabular-nums y con un ancho fijo por bloque: sin eso, cada
   segundo cambia lo que ocupa el número y el reloj entero tiembla de lado.

   Es de adorno -al llegar a cero vuelve a empezar-, así que se pinta grande
   pero se queda en el color de la casa: en rojo parpadeante sería la clase de
   contador que hace desconfiar de la página en la que está. */
.cuenta {
  margin: 0 0 14px;
}
.cuenta[hidden] { display: none; }

.cuenta__rotulo {
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenue);
}
.cuenta__reloj {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.cuenta__bloque {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 62px;
  padding: 8px 6px 6px;
  border-radius: var(--radio-s);
  background: rgb(var(--naranja-rgb) / 10%);
  border: 1px solid rgb(var(--naranja-rgb) / 26%);
}
.cuenta__n {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  background: var(--llama);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cuenta__u {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.cuenta__dos {
  align-self: center;
  margin-top: -8px;
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: rgb(var(--naranja-rgb) / 55%);
}

/* EN UNA PANTALLA BAJA se recorta, y no por gusto: el aviso crecido más el
   contador ocupaban tres cuartos de un teléfono de 640 px de alto, y a esa
   altura ya no es un aviso, es una puerta. Aquí sigue siendo más grande de lo
   que era antes del contador; sólo deja de tapar la portada entera.
   Se mira el ALTO y no el ancho: lo que estorba es lo que mide de arriba
   abajo, y hay tabletas estrechas con alto de sobra. */
@media (max-height: 720px) {
  .urgente { padding: 15px 17px; gap: 12px; bottom: 12px; }
  .urgente__titulo { font-size: clamp(1.14rem, 4.8vw, 1.4rem); margin-bottom: 4px; }
  .urgente__bajada { font-size: 14px; margin-bottom: 11px; }

  .cuenta { margin-bottom: 11px; }
  .cuenta__rotulo { margin-bottom: 5px; font-size: 11.5px; }
  .cuenta__bloque { min-width: 54px; padding: 6px 5px 5px; }
  .cuenta__n { font-size: 1.45rem; }
  .cuenta__u { font-size: 10px; }
  .cuenta__dos { font-size: 1.2rem; margin-top: -6px; }

  .regalo--aviso { padding: 9px 11px; margin-bottom: 10px; }
  .regalo--aviso .regalo__texto { font-size: 13.5px; }
}
.urgente__botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.urgente__despues {
  background: none;
  border: 0;
  padding: 8px 4px;
  font: inherit;
  font-size: 14px;
  color: var(--tenue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.urgente__despues:hover { color: var(--gris); }

/* ==========================================================================
   2 · MI REGISTRO
   La tarjeta que sólo ve, en su propio teléfono, quien ya inscribió a alguien.
   El borde cambia de color con el estado porque es la información que hay que
   captar sin leer: naranja = te toca pagar.
   ========================================================================== */

.mireg {
  margin: 0 0 34px;
  padding: 22px 24px;
  border-radius: var(--radio);
  background: linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%));
  border: 1px solid var(--borde);
  border-left: 3px solid var(--verde);
}
.mireg[hidden] { display: none; }
.mireg[data-estado='pendiente'],
.mireg[data-estado='sin_pagar'] { border-left-color: var(--amarillo); }
.mireg[data-estado='vencido']   { border-left-color: var(--rojo); }

.mireg__rotulo {
  margin: 0 0 2px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--naranja);
}
.mireg__nombre { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.mireg__categoria { margin: 2px 0 12px; font-size: 14.5px; color: var(--gris); }
.mireg__estado { margin: 0 0 8px; font-size: 15.5px; }
.mireg__alerta {
  margin: 0 0 10px;
  padding: 10px 13px;
  border-radius: var(--radio-s);
  background: rgb(255 90 90 / 10%);
  border: 1px solid rgb(255 90 90 / 30%);
  font-size: 14.5px;
  color: #FFD6D6;
}
.mireg__nota { margin: 0 0 12px; font-size: 14px; color: var(--tenue); }
.mireg__botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mireg__adelantar {
  background: none; border: 0; padding: 6px 0;
  font: inherit; font-size: 14.5px; color: var(--gris);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.mireg__adelantar:hover { color: var(--naranja); }

/* El destello de cuando se llega aqui desde el recuadro flotante. La seccion
   de inscripcion es larga y el salto deja al papa en mitad de ella; sin este
   parpadeo no sabe cual de todo lo que ve es lo suyo. Dos pulsos y se apaga:
   lo que dura mas deja de senalar y empieza a molestar. */
.mireg--senalada { animation: mireg-senal 1.5s var(--curva) 1; }

@keyframes mireg-senal {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--naranja-rgb) / 0%); }
  18%      { box-shadow: 0 0 0 6px rgb(var(--naranja-rgb) / 26%); }
  42%      { box-shadow: 0 0 0 0 rgb(var(--naranja-rgb) / 0%); }
  62%      { box-shadow: 0 0 0 6px rgb(var(--naranja-rgb) / 22%); }
}

@media (prefers-reduced-motion: reduce) {
  .mireg--senalada { animation: none; box-shadow: 0 0 0 3px rgb(var(--naranja-rgb) / 30%); }
}

/* ==========================================================================
   3 · LA VENTANA
   ========================================================================== */

.registro {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: end center;
  padding: 0;
}
.registro[hidden] { display: none; }

@media (min-width: 720px) {
  .registro { place-items: center; padding: 24px; }
}

.registro__fondo {
  position: absolute;
  inset: 0;
  background: rgb(4 4 6 / 78%);
  backdrop-filter: blur(6px);
  animation: reg-fundido var(--medio) var(--curva);
}
@keyframes reg-fundido { from { opacity: 0; } }

.registro__caja {
  position: relative;
  width: min(100%, 560px);
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-bottom: 0;
  box-shadow: var(--sombra-alta);
  animation: reg-sube var(--medio) var(--curva);
}
@media (min-width: 720px) {
  .registro__caja { border-radius: var(--radio); border-bottom: 1px solid var(--borde); }
}
@keyframes reg-sube { from { transform: translateY(28px); opacity: 0; } }

/* Mientras se envía, la ventana entera deja de aceptar toques: es lo único que
   evita el doble registro del que le da dos veces al botón. */
.registro[data-ocupada='true'] .registro__caja { pointer-events: none; opacity: .72; }

.registro__cerrar {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 8%);
  color: var(--marfil);
  cursor: pointer;
  transition: transform var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.registro__cerrar:hover { transform: rotate(90deg); background: rgb(var(--naranja-rgb) / 80%); }
.registro__cerrar svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.registro__cabeza {
  padding: 22px 24px 0;
  border-bottom: 1px solid var(--borde);
}
.registro__paso {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--naranja);
}
.registro__cabeza h3 {
  margin: 2px 0 14px;
  font-size: clamp(1.25rem, 5vw, 1.55rem);
  line-height: 1.15;
}
.registro__barra { height: 3px; background: rgb(255 255 255 / 8%); }
.registro__barra span {
  display: block; height: 100%;
  background: var(--llama);
  transition: width var(--medio) var(--curva);
}

.registro__error {
  margin: 16px 24px -4px;
  padding: 11px 14px;
  border-radius: var(--radio-s);
  background: rgb(255 90 90 / 12%);
  border: 1px solid rgb(255 90 90 / 34%);
  font-size: 14.5px;
  color: #FFD6D6;
}
.registro__error[hidden] { display: none; }

.registro__cuerpo {
  padding: 20px 24px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------- Cargando */
.reg-cargando { display: grid; place-items: center; gap: 14px; padding: 46px 0; }
.reg-cargando p { margin: 0; color: var(--gris); font-size: 15px; }
.reg-cargando__aro {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 12%);
  border-top-color: var(--naranja);
  animation: reg-gira .8s linear infinite;
}
@keyframes reg-gira { to { transform: rotate(360deg); } }

/* ==========================================================================
   4 · PASO 1 · LOS DATOS
   ========================================================================== */

.reg-form { display: grid; gap: 16px; }
.reg-campo { display: grid; gap: 6px; }
.reg-campo label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris);
}
.reg-campo input {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radio-s);
  background: var(--humo);
  border: 1px solid var(--borde);
  color: var(--marfil);
  font: inherit;
  font-size: 16px;          /* nunca menos: ver la cabecera del archivo */
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.reg-campo input:focus {
  outline: none;
  border-color: rgb(var(--naranja-rgb) / 70%);
  box-shadow: 0 0 0 3px rgb(var(--naranja-rgb) / 16%);
}
.reg-campo input::placeholder { color: var(--tenue); }
.reg-campo__ayuda { margin: 0; font-size: 13.5px; color: var(--tenue); }

.reg-raya { height: 1px; margin: 4px 0; border: 0; background: var(--borde); }

/* El eco de la categoría. Aparece en cuanto la edad tiene sentido, y es la
   recompensa de haberla escrito: el papá ve a dónde va su hijo antes de seguir. */
.reg-categoria {
  margin: -6px 0 0;
  padding: 10px 14px;
  border-radius: var(--radio-s);
  background: rgb(var(--naranja-rgb) / 10%);
  border: 1px solid rgb(var(--naranja-rgb) / 28%);
  font-size: 15px;
  font-weight: 600;
  color: var(--ambar);
}
.reg-categoria[hidden] { display: none; }
.reg-categoria--fuera {
  background: rgb(255 200 74 / 10%);
  border-color: rgb(255 200 74 / 30%);
  color: var(--amarillo);
  font-weight: 400;
}

.reg-pie { display: grid; gap: 12px; margin-top: 8px; }
.reg-atras {
  background: none; border: 0; padding: 8px 0;
  font: inherit; font-size: 15px; color: var(--gris);
  cursor: pointer; text-align: left;
}
.reg-atras:hover { color: var(--naranja); }

/* ==========================================================================
   5 · PASO 2 · EL PAGO
   ========================================================================== */

.reg-resumen {
  padding: 18px 20px;
  border-radius: var(--radio);
  background: var(--humo);
  border: 1px solid var(--borde);
  margin-bottom: 22px;
}
.reg-resumen__fila {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0;
  font-size: 15px;
  color: var(--gris);
}
.reg-resumen__fila b { color: var(--marfil); font-variant-numeric: tabular-nums; }
.reg-resumen__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 10px; padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.reg-resumen__total span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris);
}
.reg-resumen__total b {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1;
  letter-spacing: .01em;
  background: var(--llama);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.reg-resumen__nota { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--tenue); }

.reg-incluye { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.reg-incluye li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--gris);
}
/* La palomita va dibujada con borde, no con un carácter: así hereda el color
   y no depende de que la fuente tenga ese glifo. */
.reg-incluye li::before {
  content: '';
  position: absolute;
  left: 3px; top: 6px;
  width: 6px; height: 10px;
  border: solid var(--naranja);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.reg-metodos { display: grid; gap: 10px; }
.reg-metodo {
  display: grid; gap: 2px;
  padding: 14px 16px;
  text-align: left;
  border-radius: var(--radio-s);
  background: var(--humo);
  border: 1px solid var(--borde);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
}
.reg-metodo:hover { border-color: rgb(var(--naranja-rgb) / 50%); transform: translateY(-2px); }
.reg-metodo.activo {
  border-color: var(--naranja);
  background: rgb(var(--naranja-rgb) / 12%);
}
.reg-metodo__titulo { font-size: 16px; font-weight: 700; }
.reg-metodo__texto { font-size: 13.8px; color: var(--gris); line-height: 1.45; }
.reg-metodo.activo .reg-metodo__texto { color: var(--marfil); }

/* --------------------------------------------- La forma de pago que aun no
   Se ve, se lee y NO se pulsa. Las tres cosas a la vez: apagarla sin dejarla
   ver la haria parecer un hueco, y dejarla pulsable seria la trampa que se
   queria evitar desde el principio.

   El color se va, pero el texto no: rebajar tambien la letra la volveria
   ilegible, y justo ahi esta lo unico que hay que leer -por que todavia no, y
   que hacer mientras tanto-. */
.reg-metodo { position: relative; }
.reg-metodo--pronto {
  cursor: default;
  opacity: .62;
  border-style: dashed;
  background: transparent;
  padding-right: 96px;   /* el hueco de la etiqueta de la esquina */
}
.reg-metodo--pronto:hover {
  transform: none;
  border-color: var(--borde);
}
.reg-metodo--pronto .reg-metodo__titulo { color: var(--gris); }

.reg-metodo__pronto {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(var(--naranja-rgb) / 14%);
  color: var(--naranja);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reg-metodos__pie { margin: 4px 0 0; font-size: 13.8px; line-height: 1.5; }
.reg-metodos__wa {
  color: var(--gris);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reg-metodos__wa:hover { color: var(--naranja); }

/* En pantallas estrechas la etiqueta no cabe al lado del texto sin
   estrangularlo, asi que se pone sobre el titulo y el hueco se retira. */
@media (max-width: 400px) {
  .reg-metodo--pronto { padding-right: 16px; padding-top: 34px; }
  .reg-metodo__pronto { top: 10px; left: 16px; right: auto; }
}

.reg-metodo-detalle:empty { display: none; }
.reg-metodo-detalle { margin-top: 18px; }

.reg-nota { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--gris); }
.reg-vacio { margin: 0; font-size: 15px; color: var(--amarillo); }

/* ----------------------------------------------------------------- Banco */
.reg-banco {
  padding: 16px 18px;
  border-radius: var(--radio-s);
  background: var(--humo);
  border: 1px solid var(--borde);
}
.reg-banco__titulo {
  margin: 0 0 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja);
}
.reg-banco__lista { margin: 0; display: grid; gap: 8px; }
.reg-banco__fila { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; }
.reg-banco__fila dt { color: var(--tenue); }
.reg-banco__fila dd { margin: 0; text-align: right; }
.reg-banco__clabe {
  font-family: 'Barlow Condensed', monospace;
  font-size: 16px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.reg-banco__copiar {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  border-radius: var(--radio-s);
  background: rgb(var(--naranja-rgb) / 14%);
  border: 1px solid rgb(var(--naranja-rgb) / 34%);
  color: var(--ambar);
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
.reg-banco__copiar:hover { background: rgb(var(--naranja-rgb) / 22%); }

/* --------------------------------------------------------- Mercado Pago
   El iframe del Brick trae su propio fondo claro/oscuro; aquí sólo se le da
   sitio y se evita que se pegue a los bordes. */
.reg-brick { min-height: 120px; }

/* ==========================================================================
   6 · PASO 3 · LISTO
   ========================================================================== */

.reg-sello { position: relative; width: 96px; height: 96px; margin: 6px auto 18px; }
.reg-sello__disco {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(78 208 122 / 12%);
  border: 1px solid rgb(78 208 122 / 40%);
}
.reg-sello[data-pagado='false'] .reg-sello__disco {
  background: rgb(255 200 74 / 12%);
  border-color: rgb(255 200 74 / 42%);
}
.reg-sello svg { width: 56px; height: 56px; }
.reg-sello__aro, .reg-sello__trazo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.reg-sello__aro { stroke: rgb(78 208 122 / 34%); stroke-width: 1.6; }
.reg-sello__trazo {
  stroke: var(--verde);
  stroke-width: 3.4;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: reg-trazo 520ms var(--curva) 160ms forwards;
}
.reg-sello[data-pagado='false'] .reg-sello__aro   { stroke: rgb(255 200 74 / 34%); }
.reg-sello[data-pagado='false'] .reg-sello__trazo { stroke: var(--amarillo); }
@keyframes reg-trazo { to { stroke-dashoffset: 0; } }

.reg-sello__chispas { position: absolute; inset: 0; }
.reg-sello__chispas i {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: var(--ambar);
  opacity: 0;
  transform: rotate(var(--giro)) translateY(0);
  animation: reg-chispa 700ms var(--curva) var(--tardanza) forwards;
}
@keyframes reg-chispa {
  0%   { opacity: 1; transform: rotate(var(--giro)) translateY(-14px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--giro)) translateY(-62px) scale(.4); }
}

.reg-listo__nombre { margin: 0; text-align: center; font-size: 1.5rem; line-height: 1.2; }
.reg-listo__categoria {
  margin: 4px 0 0; text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja);
}
.reg-listo__mensaje {
  margin: 14px auto 0;
  max-width: 40ch;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gris);
}
.reg-listo__hasta {
  margin: 16px 0 0;
  padding: 11px 14px;
  border-radius: var(--radio-s);
  background: rgb(78 208 122 / 10%);
  border: 1px solid rgb(78 208 122 / 28%);
  font-size: 14.5px;
  text-align: center;
  color: #C9F4D8;
}

/* ==========================================================================
   7 · LA SEMANA DE MUESTRA
   Tres tarjetas para leerlo de un vistazo y un calendario de verdad para
   situarlo. Las tarjetas dicen QUÉ días; el calendario dice CUÁNDO.
   ========================================================================== */

.muestra {
  margin: 24px 0 0;
  padding: 20px;
  border-radius: var(--radio);
  background: linear-gradient(160deg, rgb(var(--naranja-rgb) / 10%), rgb(255 255 255 / 3%));
  border: 1px solid rgb(var(--naranja-rgb) / 26%);
}
.muestra__rotulo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--naranja);
}
/* La misma pastilla del sello, en pequeño: aquí acompaña a un rótulo, no a un
   párrafo, y si fuera igual de grande se comería el título. */
.muestra__gratis {
  padding: 5px 12px 4px;
  border-radius: 999px;
  background: var(--llama);
  color: #170800;
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-size: 13.5px;
  letter-spacing: .1em;
  line-height: 1;
}
.muestra__bajada { margin: 4px 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--gris); }

.muestra__dias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.muestra__dia {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 14px 6px 12px;
  border-radius: var(--radio-s);
  background: rgb(0 0 0 / 32%);
  border: 1px solid rgb(var(--naranja-rgb) / 30%);
}
.muestra__num {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--llama);
  color: #170800;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
}
.muestra__semana {
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--ambar);
}
.muestra__fecha { font-size: 13.5px; color: var(--gris); }

/* ------------------------------------------------------------ Calendario */
.calendario + .calendario { margin-top: 16px; }
.calendario__mes {
  margin: 0 0 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris);
}
.calendario__rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.calendario__cabecera {
  display: grid; place-items: center;
  padding: 4px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--tenue);
}
.calendario__hueco { aspect-ratio: 1; }
.calendario__dia {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
/* El día marcado. Es lo único encendido del calendario, y por eso se ve sin
   buscarlo: si se colorearan también los fines de semana o el día de hoy, los
   tres que importan se perderían entre los demás. */
.calendario__dia--muestra {
  background: var(--llama);
  color: #170800;
  font-weight: 700;
  box-shadow: 0 6px 18px rgb(var(--brasa-rgb) / 40%);
}

/* ==========================================================================
   8 · MENOS MOVIMIENTO
   Para quien lo pidió en su sistema, todo queda quieto y completo. La palomita
   aparece ya dibujada y las chispas no salen: no es un extra que se pierde, es
   lo mismo sin lo que marea.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .urgente, .registro__caja, .registro__fondo,
  .urgente__pulso, .reg-cargando__aro { animation: none; transition: none; }
  .urgente { transform: translate(-50%, 0); opacity: 1; }
  .reg-sello__trazo { animation: none; stroke-dashoffset: 0; }
  .reg-sello__chispas { display: none; }
}

/* ==========================================================================
   8.5 · EL TURNO
   Dos tarjetas para elegir una. Debajo hay radios de verdad, encogidos a un
   píxel transparente: SIGUEN ahí, así que las flechas del teclado recorren las
   opciones y el foco se dibuja en el marco, no en un puntito. Encogerlos y no
   ponerles `display: none` es la diferencia: lo segundo los saca del
   formulario y del teclado.

   El marco entero es la zona de toque -son `label`, y el radio va dentro-,
   porque en un celular acertarle a un círculo de 18 px es pedir demasiado.
   ========================================================================== */

.reg-turnos {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
}
.reg-turnos legend {
  padding: 0;
  margin-bottom: 9px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

.reg-turnos__reja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.turno { position: relative; display: block; cursor: pointer; }
.turno__radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.turno__marco {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: 14px 15px 13px;
  border-radius: var(--radio-s);
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--borde);
  transition: border-color var(--rapido) var(--curva),
              background var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
}
.turno:hover .turno__marco { background: rgb(255 255 255 / 7%); }

/* La elegida. Se marca con TRES cosas a la vez -borde, fondo y el nombre
   encendido- y no sólo con el borde: en una pantalla al sol, un borde naranja
   sobre fondo oscuro se pierde, y elegir mal el turno significa presentarse a
   una cancha vacía. */
.turno__radio:checked + .turno__marco {
  border-color: rgb(var(--naranja-rgb) / 62%);
  background: rgb(var(--naranja-rgb) / 13%);
}
.turno__radio:focus-visible + .turno__marco {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

.turno__nombre {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-size: 1.12rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color var(--rapido) var(--curva);
}
.turno__radio:checked + .turno__marco .turno__nombre { color: var(--ambar); }

.turno__hora {
  font-size: 15px;
  font-weight: 600;
  color: var(--marfil);
  font-variant-numeric: tabular-nums;
}
.turno__dias { font-size: 13px; color: var(--gris); }
.turno__nota { font-size: 12.5px; color: var(--tenue); }

/* -------------------------------------------------- La hora de la muestra
   Encima del calendario. Sin esto, la semana de muestra dice qué días hay que
   venir y se calla a qué hora, que es la mitad de la respuesta. */
.muestra__turno {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 12px 15px;
  border-radius: var(--radio-s);
  background: rgb(var(--naranja-rgb) / 11%);
  border: 1px solid rgb(var(--naranja-rgb) / 30%);
}
.muestra__turno-rotulo { font-size: 14px; color: var(--gris); }
.muestra__turno-hora {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 16.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ambar);
}

/* ------------------------------------------------ El aviso al entrenador
   Lo último de la pantalla de "listo". Va en un recuadro aparte y no suelto
   entre los demás párrafos: es lo único que queda por hacer, y tiene que
   leerse como una tarea y no como una despedida. */
.reg-turno-aviso {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: var(--radio);
  background: linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%));
  border: 1px solid var(--borde);
}
.reg-turno-aviso__rotulo {
  margin: 0 0 4px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ambar);
}
.reg-turno-aviso__texto {
  margin: 0 0 13px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--gris);
}

/* El turno dentro de la ficha de "mi registro" */
.mireg__turno {
  margin: 0 0 10px;
  font-size: 14.5px;
  color: var(--gris);
}

/* ==========================================================================
   9 · LOS PRECIOS EN LA PROPIA PÁGINA
   La primera pregunta de cualquier papá es cuánto cuesta. Hacerle abrir un
   formulario para averiguarlo es la forma más segura de que no lo abra, así
   que el número está fuera, antes de pedirle nada.
   ========================================================================== */

.precios { margin: 0 0 34px; }
.precios[hidden] { display: none; }

.precios__dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.precios__caja {
  padding: 20px 22px;
  border-radius: var(--radio);
  background: linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%));
  border: 1px solid var(--borde);
}
.precios__etiqueta {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris);
}
.precios__cifra {
  margin: 2px 0 4px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 1;
  letter-spacing: .01em;
  background: var(--llama);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.precios__nota { margin: 0; font-size: 14px; color: var(--tenue); }

.precios__hoy {
  margin: 16px 0 18px;
  padding: 14px 18px;
  border-radius: var(--radio-s);
  background: rgb(var(--naranja-rgb) / 10%);
  border: 1px solid rgb(var(--naranja-rgb) / 28%);
  font-size: 15.5px;
  line-height: 1.55;
}

/* La puerta de servicio del pie: se ve si la buscas y no si no. */
.pie__acceso {
  margin-left: 10px;
  color: var(--tenue);
  text-decoration: none;
  border-bottom: 1px dotted rgb(255 255 255 / 18%);
}
.pie__acceso:hover { color: var(--naranja); border-bottom-color: currentColor; }

/* ==========================================================================
   10 · EL AVISO Y EL BOTÓN DE WHATSAPP NO CABEN A LA VEZ
   En un celular el aviso ocupa el 94% del ancho y se come la esquina donde
   vive el botón flotante. Se esconde el flotante mientras el aviso está
   puesto: el aviso ya ofrece la acción principal, y en cuanto se cierra —o en
   cuanto la pantalla es lo bastante ancha para que no se estorben— el botón
   vuelve. Perder el de WhatsApp durante unos segundos es mejor que dejar dos
   botones montados uno encima del otro.
   ========================================================================== */
@media (max-width: 719px) {
  body:has(.urgente.visible) .flotante {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(.9);
    transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
  }
}