/* ==========================================================================
   BRIGHTLOOP — CUESTIONARIO DE CONTENIDOS (brief.html)
   --------------------------------------------------------------------------
   Composición y componentes propios de la pieza. Ni un color literal: todo
   sale de tokens.css.

   Tres decisiones gobiernan la hoja entera:

   1. La pantalla se parte en dos columnas asimétricas —4/7—: a la izquierda,
      quieto, el nombre del bloque y por qué se pregunta; a la derecha, los
      campos. Es lo que impide que un formulario de sesenta campos se lea como
      un scroll infinito: el contexto no se va nunca de la pantalla.
   2. Ni una etiqueta en versalitas mono, ni un número de bloque a la vista,
      ni rayas entre tramos de progreso (listón A15). El progreso es UNA línea
      que se llena.
   3. Nada se mueve salvo esa línea. Sin halo de cursor, sin botones que
      saltan, sin entradas escalonadas: aquí se viene a escribir.

     1. Página          5. Preguntas        9. Repetibles
     2. Cabecera        6. Opciones        10. Navegación
     3. Portada         7. Colores         11. Notas y avisos
     4. Bloque          8. Archivos        12. Cierre
                                           13. Reducción de movimiento
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PÁGINA
   -------------------------------------------------------------------------- */

.brief-page { background-color: var(--surface-page); }

/* El armazón general es el de la web (90rem), pero un formulario no se lee a
   esa anchura: se queda en 76. */
.brief {
  max-width: 76rem;
  margin-inline: auto;
  padding-block: clamp(var(--sp-8), 5vw, var(--sp-11));
}

[hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   2. CABECERA — la marca, el estado de guardado y la salida.
   La barra de progreso ocupa el borde inferior de la cabecera pegajosa, así
   que está siempre a la vista sin robar una sola línea de contenido.
   -------------------------------------------------------------------------- */

.brief-header { border-block-end: 0; }

.progress {
  height: 3px;
  background-color: var(--border-hairline);
}
.progress__fill {
  width: 0;
  height: 100%;
  background-color: var(--text-primary);
  transition: width var(--dur-base) var(--ease-out);
}

.save {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.save__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-full);
  background-color: var(--text-tertiary);
  flex: none;
}
/* A 640px la cabecera ya reparte el ancho entre el lockup y el botón de
   salida. El aviso de guardado es lo primero que sobra: el guardado sigue
   ocurriendo, y la portada lo explica. */
@media (max-width: 40rem) {
  .save { display: none; }
}


/* --------------------------------------------------------------------------
   3. PORTADA
   -------------------------------------------------------------------------- */

.step--cover { padding-block: clamp(var(--sp-6), 4vw, var(--sp-10)); }

.cover__title {
  max-width: 15ch;
  text-wrap: balance;
}
.cover__text {
  max-width: 60ch;
  margin-block-start: clamp(var(--sp-6), 3vw, var(--sp-8));
  display: grid;
  gap: var(--sp-5);
}
.cover__text .t-body { color: var(--text-secondary); }

.cover__actions { margin-block-start: clamp(var(--sp-7), 3vw, var(--sp-9)); }

/* El índice de los nueve bloques. Sin numerar a la vista: el orden ya lo da
   la lista, y un `01` delante es exactamente el patrón retirado. */
.map {
  list-style: none;
  margin: clamp(var(--sp-9), 5vw, var(--sp-11)) 0 0;
  padding: 0;
  border-block-start: 1px solid var(--border-hairline);
}
.map__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-5);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--border-hairline);
}
.map__name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.map__desc {
  grid-column: 1 / 2;
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
  max-width: 52ch;
}
.map__time {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
  align-self: start;
}
@media (min-width: 48rem) {
  .map__item { grid-template-columns: 15rem 1fr auto; align-items: baseline; }
  .map__desc { grid-column: 2 / 3; }
  .map__time { grid-column: 3 / 4; }
}


/* --------------------------------------------------------------------------
   4. BLOQUE — la rejilla asimétrica
   -------------------------------------------------------------------------- */

.step__grid {
  display: grid;
  gap: clamp(var(--sp-7), 4vw, var(--sp-10));
}
@media (min-width: 64rem) {
  .step__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--grid-gap);
  }
  /* Se queda quieto mientras la columna de campos corre. El desplazamiento
     es la altura de la cabecera pegajosa más un respiro. */
  .step__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sp-7));
    align-self: start;
  }
}

.step__count {
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
  margin-block-end: var(--sp-3);
}
.step__title {
  text-wrap: balance;
  margin-block-end: var(--sp-5);
}
.step__note {
  font-size: var(--fs-body-sm);
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 40ch;
}
.step__note + .step__note { margin-block-start: var(--sp-4); }
.step__note--strong {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.step__body {
  display: grid;
  gap: clamp(var(--sp-8), 4vw, var(--sp-9));
  min-width: 0;
}
.step__foot {
  font-size: var(--fs-body-sm);
  color: var(--feedback-error);
}


/* --------------------------------------------------------------------------
   5. PREGUNTAS
   El grupo separa por temas con una línea a sangre —la regla horizontal es
   estructura, no adorno— y evita la lista de quince campos seguidos.
   -------------------------------------------------------------------------- */

.group {
  display: grid;
  gap: var(--sp-7);
  padding-block-start: clamp(var(--sp-6), 3vw, var(--sp-7));
  border-block-start: 1px solid var(--border-hairline);
}
.group__name {
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
  margin-block-end: calc(-1 * var(--sp-4));
}

/* `.q` es a la vez <div> y <fieldset>: el reset va aquí para que los dos se
   comporten igual, y el ritmo interno en margen y no en `gap` porque un
   <legend> dentro de un contenedor de rejilla no es fiable en todos los
   navegadores. */
.q {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
.q > * + * { margin-block-start: var(--sp-3); }
.q > .choices { margin-block-start: var(--sp-4); }

.q__label {
  display: block;
  width: 100%;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.32;
  letter-spacing: var(--tr-h4);
  color: var(--text-primary);
  text-wrap: pretty;
  max-width: 54ch;
}
.q__opt {
  font-size: var(--fs-caption);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.q__help {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
}
.q__hint {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
.q__error {
  font-size: var(--fs-body-sm);
  color: var(--feedback-error);
  max-width: 62ch;
}

/* Los campos son los del sistema; sólo cambia el tamaño de letra. A 15px
   Safari en iPhone hace zoom al enfocar y descoloca la página entera: en un
   formulario de media hora eso se paga sesenta veces. */
.brief .input,
.brief .textarea {
  font-size: var(--fs-body);
  line-height: 1.5;
  min-height: 3rem;
}
.brief .textarea            { min-height: 8.5rem; }
.brief .textarea--sm        { min-height: 5.5rem; }
.brief .textarea--lg        { min-height: 12rem; }
.brief .input--short        { max-width: 20rem; }

.q[data-invalid] .input,
.q[data-invalid] .textarea { border-color: var(--feedback-error); }

/* Dos campos cortos por línea cuando hay sitio. Nunca más de dos: tres
   columnas de campos en una web de servicios es una hoja de cálculo. */
.row { display: grid; gap: var(--sp-6); }
@media (min-width: 44rem) {
  .row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
}


/* --------------------------------------------------------------------------
   6. OPCIONES — radio y casilla, mismo cuerpo, marca distinta
   -------------------------------------------------------------------------- */

.choices { display: grid; gap: var(--sp-2); }
.choices--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
@media (min-width: 40rem) {
  .choices--2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.75rem;                       /* E4 */
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-sm);
  background-color: var(--surface-raised);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-in-out),
    box-shadow   var(--dur-fast) var(--ease-in-out);
}
.choices--row .choice { flex: 0 1 auto; }
.choice--tight { justify-content: center; min-width: 4.5rem; }

.choice:hover { border-color: var(--border-strong); }

.choice__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.choice__mark {
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--border-strong);
  background-color: var(--surface-page);
  transition: border-color var(--dur-fast) var(--ease-in-out);
}
.choice__input[type='radio']    ~ .choice__mark { border-radius: var(--r-full); }
.choice__input[type='checkbox'] ~ .choice__mark { border-radius: var(--r-xs); }

.choice__mark::after {
  content: '';
  position: absolute;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-in-out);
}
.choice__input[type='radio'] ~ .choice__mark::after {
  inset: 3px;
  border-radius: var(--r-full);
  background-color: var(--text-primary);
}
.choice__input[type='checkbox'] ~ .choice__mark::after {
  inset-block-start: 2px;
  inset-inline-start: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--text-primary);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

.choice__text {
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--text-primary);
}
.choice__note {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  margin-block-start: 0.125rem;
}

/* Marcada: el borde se dobla por dentro, sin sombra y sin mover un píxel de
   la caja. */
.choice:has(.choice__input:checked) {
  border-color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--text-primary);
}
/* La marca va por hermandad y no por :has() sobre la caja: el input siempre
   está justo antes de ella, y así la misma regla vale para la casilla suelta
   del consentimiento —.check, sin caja alrededor—, que con el selector
   anterior se marcaba de verdad pero no se veía marcar. */
.choice__input:checked ~ .choice__mark { border-color: var(--text-primary); }
.choice__input:checked ~ .choice__mark::after { opacity: 1; }

.choice:has(.choice__input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Cuando ya hay dos marcadas y el tope son dos, las que quedan se apagan.
   No se deshabilitan: se puede seguir pulsando para cambiar de idea. */
.choices[data-full='true'] .choice:not(:has(.choice__input:checked)) {
  opacity: 0.5;
}

/* La casilla suelta del cierre de un bloque: misma marca, sin caja. */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 2.75rem;
  padding-block: var(--sp-2);
  cursor: pointer;
}
.check .choice__mark { margin-block-start: 0.1875rem; }
.check__text {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-primary);
}
.check:has(.choice__input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}

/* El consentimiento del final. Separado del último campo por una línea: no es
   una pregunta más, es la puerta por la que pasa el envío. */
.q--consent {
  margin-block-start: clamp(var(--sp-7), 3vw, var(--sp-8));
  padding-block-start: clamp(var(--sp-5), 2vw, var(--sp-6));
  border-block-start: 1px solid var(--border-hairline);
}
.q--consent .q__help { margin-block-start: var(--sp-2); }
.q--consent[data-invalid] .choice__mark { border-color: var(--feedback-error); }

/* La trampa para robots: fuera de la pantalla, no oculta. `display:none` la
   delataría —hay robots que sólo rellenan lo visible—, así que se manda lejos
   sin quitarla del flujo de nadie. */
.trap {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   7. COLORES — la muestra manda, el código acompaña
   Quien tiene su paleta escrita teclea el HEX; quien no la tiene abre el
   selector del sistema y ve el color. La muestra vacía no enseña ninguno:
   un cuadro de color por defecto se lee como una respuesta ya dada.
   -------------------------------------------------------------------------- */

.colors {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 44rem) {
  .colors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}

.color { display: grid; gap: var(--sp-2); min-inline-size: 0; }

/* La casilla nativa no se estira sola: no hereda el alto del campo de al
   lado, así que se le da el mismo número a los dos y se alinean por arriba. */
.color__row {
  display: flex;
  align-items: start;
  gap: var(--sp-3);
  min-inline-size: 0;
}

.color__name {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

/* La casilla nativa trae un marco y un relleno propios en cada navegador.
   Se le quitan los dos para que el cuadro de color llegue a los bordes y
   quede a la misma altura que el campo de al lado. */
.color__pick {
  flex: 0 0 2.875rem;
  inline-size: 2.875rem;
  block-size: 2.875rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface-raised);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-in-out);
}
.color__pick::-webkit-color-swatch-wrapper { padding: 3px; }
.color__pick::-webkit-color-swatch { border: 0; border-radius: calc(var(--r-sm) - 2px); }
.color__pick::-moz-color-swatch    { border: 0; border-radius: calc(var(--r-sm) - 2px); }

.color__pick:hover { border-color: var(--text-tertiary); }
.color__pick:focus-visible {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-glow);
}

/* Sin HEX escrito no hay color que enseñar: se tapa la muestra con el mismo
   fondo del campo y queda un hueco, que es la verdad. */
.color[data-vacio="true"] .color__pick::-webkit-color-swatch { background: var(--surface-sunken); }
.color[data-vacio="true"] .color__pick::-moz-color-swatch    { background: var(--surface-sunken); }

.brief .color__hex {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--fs-body-sm);
  min-height: 2.875rem;
  block-size: 2.875rem;
}


/* --------------------------------------------------------------------------
   8. ARCHIVOS — sólo cosas ligeras: un logo, un PDF, una nota de voz.
   Las fotos de proyecto van por enlace y eso se dice en la propia pregunta.
   -------------------------------------------------------------------------- */

.file {
  display: block;
  width: 100%;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.file--tight { margin-block-start: var(--sp-3); }

.file::file-selector-button {
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  min-height: 2.75rem;
  padding: 0 var(--sp-5);
  margin-inline-end: var(--sp-4);
  border: 1px solid var(--action-ghost-border);
  border-radius: var(--r-full);
  background-color: transparent;
  color: var(--action-ghost-text);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-in-out),
    background-color var(--dur-fast) var(--ease-in-out);
}
.file:hover::file-selector-button {
  border-color: var(--action-ghost-border-hover);
  background-color: var(--action-ghost-bg-hover);
}

.file__list {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   9. BLOQUES REPETIBLES — un servicio, un proyecto, un testimonio
   -------------------------------------------------------------------------- */

.repeat      { display: grid; gap: var(--sp-6); }
.repeat__list{ display: grid; gap: var(--sp-6); }
.repeat__add { justify-self: start; }
.repeat__hint {
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
}

.rep {
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background-color: var(--surface-raised);
}
.rep > * + * { margin-block-start: var(--sp-6); }

.rep__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--border-hairline);
}
.rep__title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.rep__remove {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;                       /* E4 */
  padding-inline: var(--sp-2);
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-in-out);
}
.rep__remove:hover { color: var(--text-primary); }


/* --------------------------------------------------------------------------
   10. NAVEGACIÓN
   -------------------------------------------------------------------------- */

.step__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-start: clamp(var(--sp-6), 3vw, var(--sp-7));
  border-block-start: 1px solid var(--border-hairline);
}


/* --------------------------------------------------------------------------
   11. NOTAS Y AVISOS — una línea al margen, nunca una caja de color
   -------------------------------------------------------------------------- */

.note {
  border-inline-start: 2px solid var(--border-strong);
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-body-sm);
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 62ch;
}
.note--warn { border-inline-start-color: var(--feedback-error); }
.note p + p { margin-block-start: var(--sp-3); }
.note ul { margin-block: var(--sp-3); padding-inline-start: var(--sp-5); }
.note li { margin-block-start: var(--sp-1); }

/* Los dos avisos que sólo aparecen si algo ha salido mal: el envío caído y los
   archivos que no cupieron. Se quedan pegados a lo que los ha provocado. */
.step__foot-actions { margin-block-start: var(--sp-4); }
.done__files { color: var(--text-primary); }

.resume {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  margin-block-end: clamp(var(--sp-7), 4vw, var(--sp-9));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  max-width: 46rem;
}
.resume__text {
  font-size: var(--fs-body);
  color: var(--text-primary);
}
.resume__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}


/* --------------------------------------------------------------------------
   12. CIERRE
   -------------------------------------------------------------------------- */

.step--done { padding-block: clamp(var(--sp-8), 6vw, var(--sp-12)); }
.done__title { max-width: 18ch; text-wrap: balance; }
.done__text {
  max-width: 58ch;
  margin-block-start: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}
.done__text .t-body { color: var(--text-secondary); }
.done .note,
.step--done .note { margin-block-start: var(--sp-7); }
.done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: clamp(var(--sp-7), 3vw, var(--sp-9));
}


/* --------------------------------------------------------------------------
   13. REDUCCIÓN DE MOVIMIENTO
   Lo único que se mueve en toda la página es la barra de progreso. Con
   «reducir movimiento» tampoco.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .progress__fill,
  .choice,
  .choice__mark,
  .choice__mark::after,
  .file::file-selector-button,
  .rep__remove { transition: none; }
}