/* ============================================================
   FORMULARIOS DE ALTA · apuntarse, hacerse socio, domiciliar y renovar
   ------------------------------------------------------------
   Esto es lo que comparten las cuatro pantallas en las que alguien
   rellena datos suyos: la inscripción a la escuela, el alta de
   socio, la orden de domiciliación y la renovación.

   QUIÉN LO VA A USAR, QUE ES DE DONDE SALE TODO LO DEMÁS
   Un padre a pie de pista, con el móvil en una mano y el niño en la
   otra, y cinco minutos. Por eso:

     · Una sola columna, siempre. Ni en un monitor de 27 pulgadas se
       ponen los campos en dos columnas: la vista salta de una a
       otra y se olvidan cosas. El ancho que sobra se usa para poner
       AL LADO lo que en el móvil va DEBAJO — el grupo que ha
       salido, o lo que se está a punto de firmar.
     · Todo lo que se pulsa mide 44 px de alto como mínimo. Los
       campos y los botones van bastante por encima.
     · Nada de sombras ni de degradados detrás de un campo de texto:
       le quitan legibilidad justo donde más falta hace.

   LOS COLORES SALEN DEL SISTEMA (apolana.css) y no se repiten aquí,
   para que el día que cambie el azul del club cambie también en
   estas pantallas. Solo se escriben a mano los dos que el sistema
   no tenía porque casi no había formularios: el borde de un campo y
   el rojo de un error.
   ============================================================ */

:root {
  /* El borde de un campo tiene que verse un poco más que una línea
     decorativa: dice «aquí se escribe». */
  --campo-borde: #C6BEAE;

  /* El rojo del error. El --rojo del sistema (#B0563A) es un tono
     terroso pensado para avisos suaves; un campo mal rellenado
     necesita algo que no se confunda con la decoración. */
  --error-borde: #B3261E;
  --error-texto: #8F1F19;

  /* La anchura de la columna de campos. La misma en el móvil y en
     el escritorio, a propósito. */
  --columna-campos: 560px;
}


/* ============================================================
   1 · EL ARMAZÓN DE LA PÁGINA
   ============================================================ */

.form-pagina { background: var(--crema); }

/* La tira de arriba: el título del trámite y por dónde vas.
   En el móvil se queda pegada arriba al hacer scroll, porque «paso
   2 de 3» deja de servir en cuanto desaparece. */
.form-barra {
  position: sticky; top: 0; z-index: 20;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
}
.form-barra-fila {
  max-width: 1200px; margin: 0 auto;
  padding: 12px var(--margen-lateral);
  display: flex; align-items: center; gap: 14px;
  min-height: 54px;
}
.form-barra .volver {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -10px;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--azul-oscuro);
  border-radius: var(--radio-dentro);
}
.form-barra .volver:hover { background: var(--azul-suave); }
.form-barra .rotulo {
  flex: 1; min-width: 0;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 20px;
  line-height: 1; text-transform: uppercase; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.form-barra .cuenta {
  flex: none; font-size: 14px; color: var(--texto-suave);
}

/* La barra de avance, fina, justo debajo. */
.form-avance { height: 4px; background: var(--linea-marcada); }
.form-avance > i { display: block; height: 4px; background: var(--azul); transition: width .25s ease; }

/* En escritorio el «1 de 3» se convierte en una tira con los
   nombres de los pasos, que es lo único que aporta la pantalla
   grande en navegación. */
.form-pasos { display: none; }
.form-pasos ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.form-pasos li { display: flex; align-items: center; gap: 10px; }
.form-pasos .num {
  width: 28px; height: 28px; border-radius: var(--radio-pastilla);
  border: 1px solid var(--campo-borde);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: var(--texto-suave);
}
.form-pasos .nombre { font-size: 15px; line-height: 1; color: var(--texto-suave); }
.form-pasos li.activo .num { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.form-pasos li.activo .nombre { color: var(--navy); font-weight: 500; }
.form-pasos li.hecho .num { border-color: var(--azul); color: var(--azul-oscuro); }
.form-pasos .barrita { flex: 1; height: 1px; background: var(--linea-borde); margin: 0 16px; }

/* El cuerpo: la columna de campos y, si la hay, la de al lado. */
.form-cuerpo {
  max-width: 1200px; margin: 0 auto;
  padding: 22px var(--margen-lateral) 40px;
  display: flex; gap: 48px; align-items: flex-start;
}
.form-columna { width: 100%; max-width: var(--columna-campos); flex: none; }
.form-acompana { flex: 1; min-width: 0; display: none; flex-direction: column; gap: 16px; }

/* El titular de cada paso */
.form-titulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(30px, 7vw, 40px); line-height: 0.98;
  text-transform: uppercase; color: var(--navy);
  margin: 0 0 8px;
}
.form-entradilla { margin: 0 0 4px; font-size: 16px; line-height: 1.5; color: var(--texto-suave); }


/* ============================================================
   2 · LOS CAMPOS
   ------------------------------------------------------------
   Etiqueta encima, campo, y debajo la ayuda o el error. Nunca al
   lado: en un móvil estrecho la etiqueta al lado parte el campo.
   ============================================================ */

.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
/* `hidden` tiene que poder con ese `display: flex`. Sin esta línea, una
   caja escondida se sigue viendo: el navegador esconde con
   `display: none` y aquí arriba se está diciendo lo contrario. */
.campo[hidden] { display: none; }

.campo > label,
.campo > .etiqueta {
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--navy);
}
/* Cuando la etiqueta lleva un «Opcional» a la derecha. La etiqueta va
   dentro de esta fila, así que deja de ser hija directa del campo y
   perdía su tipografía: se le vuelve a poner aquí para que se lea
   igual que las demás. */
.campo .etiqueta-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.campo .etiqueta-fila > label,
.campo .etiqueta-fila > .etiqueta {
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--navy);
}
.campo .opcional { font-size: 14px; font-weight: 400; color: var(--texto-suave); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="number"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--campo-borde);
  border-radius: var(--radio-dentro);
  background: #fff;
  font-family: var(--fuente-texto);
  font-size: 16px;              /* menos de 16 y el móvil hace zoom solo */
  line-height: 1.3;
  color: var(--navy);
  -webkit-appearance: none;
  appearance: none;
}
.campo textarea { min-height: 84px; padding: 14px; line-height: 1.4; resize: vertical; }
.campo select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236E6656' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-suave); opacity: 1; }

/* Un campo apagado. Solo pasa en un sitio: cuando la familia marca que
   el niño todavía no tiene DNI. Se apaga en vez de esconderse para que
   se vea que la pregunta sigue ahí y que se puede volver atrás. */
.campo input:disabled {
  background: var(--crema-media); color: var(--texto-suave); cursor: not-allowed;
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--azul-filete);
  outline-offset: 1px;
  border-color: var(--azul-filete);
}

/* El IBAN se lee de cuatro en cuatro; un pelín de aire entre letras
   ayuda a compararlo con el que sale en la libreta del banco. */
.campo input.iban { letter-spacing: 0.04em; }

.campo .ayuda { font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
.campo .ayuda strong { color: var(--texto); }

/* La confirmación en verde: «Banco reconocido: CaixaBank». Quita
   mucho miedo justo después de escribir un número de cuenta. */
.campo .confirmado { font-size: 14px; line-height: 1.45; color: #2F5C39; }

/* Dos campos cortos que van juntos (la fecha y el SIP). Solo se
   emparejan los cortos y solo cuando hay sitio; los largos, nunca. */
.campo-par { display: flex; flex-direction: column; gap: 0; }

/* ---- Una lista de casillas iguales que se alarga sola ----
   Se usa para los amigos con los que le gustaría entrenar. Empieza con
   UNA casilla, no con tres: tres huecos vacíos parecen tres preguntas y
   la mayoría de las familias solo pone un nombre. Quien quiera poner
   más, le da al botón.

   El botón va debajo y en texto, no perfilado: perfilado compite con
   «Siguiente», que es lo que de verdad hay que pulsar en esta pantalla. */
.lista-suelta { display: flex; flex-direction: column; gap: 10px; }
.mas-suelto {
  align-self: flex-start;
  border: 0; background: none; cursor: pointer; padding: 0 2px; min-height: 44px;
  font-family: var(--fuente-texto); font-size: 15px; font-weight: 500;
  color: var(--azul-oscuro);
}
.mas-suelto:hover { text-decoration: underline; }
.mas-suelto[hidden] { display: none; }

/* ---- El error ----
   Borde rojo de 2 px y el mensaje DEBAJO. Nunca solo el color: hay
   gente que no distingue el rojo, y el color no dice qué hacer. */
.campo.mal input, .campo.mal select, .campo.mal textarea {
  border: 2px solid var(--error-borde);
  padding: 0 13px;                 /* el borde crece: el texto no se mueve */
}
.campo.mal textarea { padding: 13px; }
.campo .error { display: none; font-size: 14px; line-height: 1.45; color: var(--error-texto); }
.campo.mal .error { display: block; }
.campo.mal .ayuda { display: none; }

/* ---- El aviso que NO frena ----
   Ámbar y no rojo, y sin borde de 2 px: es otra cosa distinta de un
   error. Un error dice «esto no puede seguir así»; esto dice «míralo,
   pero si lo tuyo es un pasaporte, sigue adelante».

   Existe por el DNI: hay familias con NIE y familias con documentos de
   fuera, y un formulario que se planta delante de ellas deja a un niño
   sin apuntarse. Si además se pusiera en rojo, la mitad se plantaría
   igual creyendo que no puede pasar. */
.campo .ojo { display: none; font-size: 14px; line-height: 1.45; color: #8A5207; }
.campo.hay-ojo .ojo { display: block; }
.campo.hay-ojo .ayuda { display: none; }
.campo.hay-ojo input { border-color: #D9B877; }
/* Si además está mal rellenado, manda el error: el rojo va delante. */
.campo.mal .ojo { display: none; }


/* ============================================================
   3 · LAS OPCIONES · tarjetas, no puntitos
   ------------------------------------------------------------
   Un radio de los de siempre mide 13 px: en un móvil, con prisa, se
   falla. Aquí toda la tarjeta es el botón.
   ============================================================ */

.opciones { display: flex; flex-direction: column; gap: 10px; }
.opciones--fila { flex-direction: row; }
.opciones--fila > * { flex: 1; }

.opcion {
  display: flex; align-items: center; gap: 13px;
  min-height: 56px; padding: 14px 16px;
  border: 1px solid var(--campo-borde);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion .marca {
  flex: none; width: 20px; height: 20px;
  border-radius: var(--radio-pastilla);
  border: 1.5px solid var(--campo-borde);
  background: #fff;
}
.opcion .texto { flex: 1; min-width: 0; }
.opcion .texto b { display: block; font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--navy); }
.opcion .texto span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.3; color: var(--texto-suave); }

.opcion:has(input:checked) {
  border: 2px solid var(--azul);
  background: var(--azul-suave);
  padding: 13px 15px;
}
.opcion:has(input:checked) .marca { border: 6px solid var(--azul); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--azul-filete); outline-offset: 2px; }

/* Cuando de la lista se puede marcar MÁS DE UNA, la marca es un
   cuadrado con su check y no un círculo relleno. La forma tiene que
   decir por sí sola si al marcar una se desmarca la anterior. */
.opcion--casilla .marca {
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 14px; font-weight: 700; line-height: 1;
}
.opcion--casilla:has(input:checked) .marca {
  border: 1.5px solid var(--azul); background: var(--azul); color: #fff;
}

/* Los dos botones del permiso de imagen: «Sí, podéis» / «No, mejor
   no». Van sin el círculo, porque no son una lista de opciones sino
   una pregunta con dos respuestas igual de válidas. */
.sino { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sino label {
  display: flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 8px 12px; text-align: center;
  border: 1px solid var(--campo-borde); border-radius: 12px;
  background: #fff; cursor: pointer;
  font-size: 16px; line-height: 1.25; color: var(--texto);
}
.sino input { position: absolute; opacity: 0; width: 0; height: 0; }
.sino label:has(input:checked) {
  border: 2px solid var(--azul); background: var(--azul-suave);
  color: var(--navy); font-weight: 500;
}
.sino label:has(input:focus-visible) { outline: 2px solid var(--azul-filete); outline-offset: 2px; }

/* Las tallas: una fila de botones cortos. */
.tallas { display: flex; flex-wrap: wrap; gap: 8px; }
.tallas label {
  display: flex; align-items: center; justify-content: center;
  min-width: 56px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--campo-borde); border-radius: var(--radio-dentro);
  background: #fff; cursor: pointer;
  font-size: 16px; color: var(--texto);
}
.tallas input { position: absolute; opacity: 0; width: 0; height: 0; }
.tallas label:has(input:checked) {
  border: 2px solid var(--azul); background: var(--azul-suave);
  color: var(--navy); font-weight: 500;
}
.tallas label:has(input:focus-visible) { outline: 2px solid var(--azul-filete); outline-offset: 2px; }


/* ============================================================
   4 · LA CASILLA
   ============================================================ */
.casilla { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; padding: 4px 0; }
.casilla input { position: absolute; opacity: 0; width: 0; height: 0; }
.casilla .cuadro {
  flex: none; width: 26px; height: 26px; margin-top: 1px;
  border: 1px solid var(--campo-borde); border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 15px; font-weight: 700; line-height: 1;
}
.casilla input:checked + .cuadro { background: var(--azul); border-color: var(--azul); color: #fff; }
.casilla input:focus-visible + .cuadro { outline: 2px solid var(--azul-filete); outline-offset: 2px; }
.casilla .texto { flex: 1; font-size: 16px; line-height: 1.5; color: var(--texto); }
.casilla.mal .cuadro { border: 2px solid var(--error-borde); }


/* ============================================================
   5 · LAS TARJETAS QUE ACOMPAÑAN
   ------------------------------------------------------------
   No son decoración: son lo que confirma que vas bien. En el móvil
   van debajo del campo del que salen; en escritorio, al lado.
   ============================================================ */

.tarjeta-form {
  border-radius: var(--radio); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 9px;
}
.tarjeta-form .rotulo {
  font-size: 12px; font-weight: 500; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.tarjeta-form .grande {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 34px; line-height: 1; color: var(--navy);
}
.tarjeta-form h3 {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 21px;
  line-height: 1; text-transform: uppercase; color: var(--navy); margin: 0;
}
.tarjeta-form p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto); }
.tarjeta-form .fina { font-size: 14px; color: var(--texto-suave); }

.tarjeta-form--verde { background: var(--verde-fondo); border: 1px solid var(--verde-borde); }
.tarjeta-form--verde .rotulo { color: #2F5C39; }
.tarjeta-form--banda { background: var(--crema-banda); }
.tarjeta-form--blanca { background: #fff; border: 1px solid var(--linea-marcada); }
.tarjeta-form--aviso  { background: #FDF6EA; border: 1px solid #EBD9B8; }
.tarjeta-form--aviso .rotulo { color: #8A5207; }

/* La línea del grupo, con su bolita de color y la etiqueta de que
   todavía puede cambiar. */
.linea-grupo {
  padding-top: 14px; border-top: 1px solid var(--verde-borde);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.linea-grupo .bolita { flex: none; width: 24px; height: 24px; border-radius: var(--radio-pastilla); background: var(--verde); }
/* El min-width está calculado para que en un móvil estrecho la
   etiqueta «provisional» se caiga a la línea de abajo entera, en vez
   de quedarse al lado partiendo «Verde 1» en dos renglones. */
.linea-grupo .nombre { flex: 1; min-width: 200px; font-size: 16px; line-height: 1.35; color: var(--texto); }
.chip-provisional {
  flex: none; padding: 4px 10px; border-radius: var(--radio-pastilla);
  background: #FDF6EA; border: 1px solid #EBD9B8;
  font-size: 12px; font-weight: 500; line-height: 1.3; color: #8A5207;
}

/* El resumen de dinero (qué se va a cobrar, cuánto sale) */
.resumen-lineas { display: flex; flex-direction: column; gap: 0; }
.resumen-lineas > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--linea-marcada);
}
.resumen-lineas > div:first-child { border-top: 0; padding-top: 0; }
.resumen-lineas .quien { flex: 1; min-width: 0; }
.resumen-lineas .quien b { display: block; font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--navy); }
.resumen-lineas .quien span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--texto-suave); }
.resumen-lineas .quien span.rebaja { color: #2F5C39; }
.resumen-lineas .cuanto { flex: none; font-size: 16px; line-height: 1.35; color: var(--navy); }


/* ============================================================
   6 · LOS BOTONES DEL PIE
   ------------------------------------------------------------
   Uno sólido y, al lado, TEXTO. No dos botones: si los dos pesan
   igual, ninguno dice por dónde se sigue.
   ============================================================ */

.form-pie {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 8px;
}
.form-pie .btn-principal {
  flex: none; width: 100%; min-height: 54px; padding: 0 28px;
  border: 0; border-radius: var(--radio-pastilla);
  background: var(--azul); color: #fff; cursor: pointer;
  font-family: var(--fuente-texto); font-size: 17px; font-weight: 500; line-height: 1;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.form-pie .btn-principal:hover { background: var(--azul-hover); }
.form-pie .btn-principal[disabled] { opacity: .55; cursor: default; }
.form-pie .btn-texto {
  border: 0; background: none; cursor: pointer;
  width: 100%; min-height: 44px;
  font-family: var(--fuente-texto); font-size: 15px; color: var(--azul-oscuro);
  text-align: center;
}
.form-pie .btn-texto:hover { color: var(--azul-hover); text-decoration: underline; }

/* Un botón perfilado, para lo secundario que sí es una acción
   («Añadir otro hijo»). */
.btn-perfilado {
  width: 100%; min-height: 52px; padding: 0 20px;
  border: 1.5px solid #B9CFE2; border-radius: var(--radio-pastilla);
  background: #fff; color: var(--azul-oscuro); cursor: pointer;
  font-family: var(--fuente-texto); font-size: 16px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-perfilado:hover { background: var(--azul-suave); }


/* ============================================================
   7 · LA CABECERA MARINO · SOLO EN LA DOMICILIACIÓN
   ------------------------------------------------------------
   Es la única pantalla del sitio que la lleva a ancho completo, y
   es a propósito: aquí se pide un número de cuenta y el tono tiene
   que cambiar. Sin bordes redondeados y sin sombra.
   ============================================================ */
.cabecera-marino { background: var(--navy); }
.cabecera-marino .dentro {
  max-width: 1200px; margin: 0 auto;
  padding: 26px var(--margen-lateral) 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.cabecera-marino .antetitulo {
  font-size: 12px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.09em; text-transform: uppercase; color: #8FC0E8;
}
.cabecera-marino h1 {
  margin: 0; color: #fff;
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(30px, 8vw, 42px); line-height: 0.96; text-transform: uppercase;
}
.cabecera-marino p {
  margin: 0; max-width: 720px;
  font-size: clamp(15px, 4vw, 17px); line-height: 1.5; color: rgba(255,255,255,0.88);
}

/* El recuadro de firmar */
.firma-caja {
  width: 100%; height: 130px;
  border: 1.5px dashed var(--campo-borde); border-radius: 12px;
  background: #fff; touch-action: none; display: block;
}
.campo.mal .firma-caja { border: 2px dashed var(--error-borde); }
.firma-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.firma-pie .cuando { font-size: 14px; line-height: 1.4; color: var(--texto-suave); }
.firma-pie button {
  border: 0; background: none; cursor: pointer; padding: 10px 0; min-height: 44px;
  font-family: var(--fuente-texto); font-size: 14px; color: var(--azul-oscuro);
}
.firma-pie button:hover { text-decoration: underline; }


/* ============================================================
   8 · EL RESUMEN Y LA PANTALLA FINAL
   ============================================================ */
.repaso { border: 1px solid var(--linea-marcada); border-radius: var(--radio); background: #fff; }
.repaso h3 {
  margin: 0; padding: 16px 18px 12px;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 21px;
  line-height: 1; text-transform: uppercase; color: var(--navy);
}
.repaso dl { margin: 0; padding: 0 18px 16px; }
.repaso div { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--linea); }
.repaso dt { flex: none; width: 40%; font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
.repaso dd { flex: 1; margin: 0; font-size: 15px; line-height: 1.45; color: var(--texto); }

.pasos-siguientes { display: flex; flex-direction: column; gap: 14px; }
.pasos-siguientes > div { display: flex; gap: 13px; align-items: baseline; }
.pasos-siguientes .n {
  flex: none; width: 22px;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 18px; line-height: 1.3;
  color: var(--azul-oscuro);
}
.pasos-siguientes p { flex: 1; margin: 0; font-size: 16px; line-height: 1.45; color: var(--texto); }

/* La banda de los hermanos, en crema, para que se despegue del
   formulario y se vea que es otra cosa. */
.banda-hermanos {
  margin: 26px calc(var(--margen-lateral) * -1) 0;
  padding: 20px var(--margen-lateral);
  background: var(--crema-banda);
  border-top: 1px solid var(--linea-marcada);
  border-bottom: 1px solid var(--linea-marcada);
  display: flex; flex-direction: column; gap: 13px;
}
.banda-hermanos h3 {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 700; font-size: 25px;
  line-height: 1; text-transform: uppercase; color: var(--navy);
}
.banda-hermanos p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto); }
.banda-hermanos .rebaja {
  background: var(--verde-fondo); border: 1px solid var(--verde-borde);
  border-radius: var(--radio-dentro); padding: 13px 15px;
  font-size: 15px; line-height: 1.45; color: #2F5C39;
}

/* La ficha de cada hijo, cuando hay más de uno */
.ficha-hijo {
  border: 1px solid var(--linea-marcada); border-radius: var(--radio);
  padding: 18px 16px; margin-bottom: 18px; background: #fff;
}
.ficha-hijo > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-bottom: 16px;
}
.ficha-hijo > header h3 {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 700; font-size: 21px;
  line-height: 1; text-transform: uppercase; color: var(--navy);
}
.ficha-hijo .quitar {
  border: 0; background: none; cursor: pointer; min-height: 44px; padding: 0 4px;
  font-family: var(--fuente-texto); font-size: 14px; color: var(--azul-oscuro);
}
.ficha-hijo .quitar:hover { text-decoration: underline; }

/* Un aviso dentro del formulario (por ejemplo: por ese año no hay
   grupo abierto). */
.nota-form {
  border-radius: var(--radio-dentro); padding: 14px 16px;
  font-size: 15px; line-height: 1.5;
}
.nota-form--aviso { background: #FDF6EA; border: 1px solid #EBD9B8; color: var(--texto); }
.nota-form--error { background: #FCF1F0; border: 1px solid #E9C4C1; color: var(--error-texto); }

/* Lo que solo tiene sentido leer, no ver: para lectores de pantalla */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ============================================================
   9 · CUANDO HAY SITIO DE SOBRA (a partir de 900 px)
   ------------------------------------------------------------
   Los campos NO se estiran. Lo que cambia es que aparece la
   columna de al lado y la tira de pasos con nombre.
   ============================================================ */
@media (min-width: 900px) {
  .form-pasos { display: block; }
  .form-barra .cuenta { display: none; }
  .form-avance { display: none; }
  .form-acompana { display: flex; }

  .form-barra-fila { padding-top: 16px; padding-bottom: 16px; }

  /* Los campos cortos que van juntos —la fecha y el sexo— sí se
     emparejan aquí. En móvil se apilan, que es lo que toca. */
  .campo-par { flex-direction: row; gap: 16px; }
  .campo-par > .campo { flex: 1; min-width: 0; }

  /* El botón no ocupa toda la línea: al 100 % parece un banner. */
  .form-pie { flex-wrap: nowrap; }
  .form-pie .btn-principal { width: auto; min-width: 220px; }
  .form-pie .btn-texto { width: auto; text-align: left; }

  .btn-perfilado { width: auto; min-width: 240px; }

  .banda-hermanos { margin-inline: 0; border-radius: var(--radio); border: 1px solid var(--linea-marcada); padding: 22px 24px; }

  .firma-caja { height: 150px; }
}

/* De 900 px para abajo la columna de al lado no desaparece: se
   coloca DEBAJO, en su sitio dentro del recorrido. Cada página la
   mueve donde toque con este ayudante. */
.acompana-en-movil { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 22px; }
@media (min-width: 900px) { .acompana-en-movil { display: none; } }