/**
 * Página de la Encuesta de comedores UTMACH (sitio/encuesta/index.html).
 *
 * Depende de tokens.css (colores, tipografía, espaciado, sombras, duraciones). Los valores que
 * tokens.css no define y esta página necesita viven abajo con prefijo --enc-.
 *
 * Idea visual: cada pantalla es una hoja de papel sobre una pila de formularios. Al avanzar, la
 * hoja nueva sube desde la pila con un leve giro en 3D sobre el eje horizontal (rotateX), y al
 * retroceder baja; nunca se desplaza en X, porque en Chrome móvil un transform que asoma por el
 * lado ensancha el viewport de layout y lo deja así (auditoría lfront P0-1). .lienzo recorta en X
 * por si acaso. Solo transform y opacity; con prefers-reduced-motion no hay movimiento.
 *
 * Color: el azul de acción solo marca lo que se toca (botones, enlaces, opciones marcadas, foco,
 * progreso); antetítulos, iconos decorativos e ilustración van en tinta. Radios: 4 / 8 / redondo.
 *
 * Móvil primero (390 px): una columna, botones de navegación fijos abajo al alcance del pulgar.
 * A partir de 64rem, el progreso pasa a una columna lateral con los nombres de las etapas.
 *
 * CSP: la página no usa atributos style; el JS solo fija propiedades personalizadas
 * (--pantallas, --llenado) por CSSOM, que la política permite.
 */

:root {
  --enc-cabecera-alto: 3.75rem;
  --enc-navegacion-alto: 4.75rem;
  --enc-ancho-hoja: 44rem;
  --enc-ancho-lateral: 15rem;
  --enc-radio-opcion: var(--radio-control);
  --enc-alto-opcion: 3.25rem;
  --enc-alto-escala: 3.5rem;
  --enc-alto-barra: 6px;
  --enc-hueco-segmentos: 3px;
  --enc-texto-pregunta: max(1.125rem, 18px);
  --enc-texto-pantalla: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);
  --enc-texto-portada: clamp(2.5rem, 1.55rem + 3.2vw, 3.5rem);
  --enc-texto-cierre: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --enc-texto-pequeno: max(0.875rem, 14px);
  --enc-texto-ayuda: var(--texto-cuerpo);
  --enc-curva-hoja: cubic-bezier(0.22, 1, 0.36, 1);
  --enc-duracion-hoja: 520ms;
  --enc-duracion-barra: 420ms;
  --enc-perspectiva: 1600px;
  --enc-velo-cabecera: color-mix(in oklab, var(--superficie) 90%, transparent);
  --enc-fondo-hover: color-mix(in oklab, var(--accion) 6%, var(--superficie-elevada));
  --enc-borde-error: color-mix(in oklab, var(--error) 70%, var(--linea-fuerte));
  --enc-fondo-pendiente: color-mix(in oklab, var(--trazo-mano) 12%, transparent);
  --enc-hoja-trasera: color-mix(in oklab, var(--superficie-elevada) 70%, var(--superficie-hundida));
  --enc-borde-control-respaldo: rgb(16 26 36 / 0.5);
  --enc-borde-control: var(--borde-control, var(--enc-borde-control-respaldo));
  --enc-cabecera-alto-minimo: 3.75rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --enc-borde-control-respaldo: rgb(245 240 230 / 0.42);
  }
}

:root[data-tema="oscuro"] {
  --enc-borde-control-respaldo: rgb(245 240 230 / 0.42);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--enc-cabecera-alto) + var(--espacio-md));
  scroll-padding-bottom: calc(var(--enc-navegacion-alto) + var(--espacio-md));
}

body.encuesta {
  margin: 0;
  min-height: 100dvh;
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--familia-texto);
  font-size: var(--texto-cuerpo);
  font-weight: var(--peso-texto);
  line-height: var(--interlineado-cuerpo);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--accion);
  text-underline-offset: 0.18em;
}

p {
  margin: 0;
}

.icono {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.icono--xs {
  width: 0.875rem;
  height: 0.875rem;
}

.icono--sm {
  width: 1rem;
  height: 1rem;
}

.icono--lg {
  width: 2.5rem;
  height: 2.5rem;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.solo-escritorio {
  display: none;
}

.salto {
  position: absolute;
  top: var(--espacio-xs);
  left: var(--espacio-xs);
  z-index: 60;
  padding: var(--espacio-sm) var(--espacio-md);
  background: var(--accion);
  color: var(--sobre-accion);
  border-radius: var(--radio-control);
  font-weight: var(--peso-texto-fuerte);
  text-decoration: none;
  transform: translateY(-200%);
}

.salto:focus-visible {
  transform: none;
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-sm);
  min-height: var(--enc-cabecera-alto-minimo);
  padding-block: var(--espacio-xs);
  padding-inline: max(var(--espacio-md), env(safe-area-inset-left)) max(var(--espacio-md), env(safe-area-inset-right));
  background: var(--enc-velo-cabecera);
  border-bottom: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

.cabecera__marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  min-width: 0;
}

.cabecera__escudo {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.cabecera__textos {
  display: grid;
  min-width: 0;
}

.cabecera__titulo {
  margin: 0;
  font-family: var(--familia-titular);
  font-weight: var(--peso-titular);
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.cabecera__meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--texto-etiqueta);
  line-height: var(--interlineado-etiqueta);
  color: var(--tinta-tenue);
  flex-wrap: wrap;
}

.cabecera__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-xs);
  flex: none;
  min-height: var(--objetivo-tactil);
  padding-inline: var(--espacio-sm);
  border-radius: var(--radio-redondo);
  font-size: var(--enc-texto-pequeno);
  font-weight: var(--peso-texto-fuerte);
  text-decoration: none;
  color: var(--accion);
  transition: background-color var(--duracion-rapida) var(--curva-entrada);
}

.cabecera__volver:hover {
  background: var(--accion-suave);
}

.cabecera__volver:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

@media (max-width: 22rem) {
  .cabecera__volver {
    justify-content: center;
    min-width: var(--objetivo-tactil);
    padding-inline: 0;
  }

  .cabecera__volver-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.lienzo {
  display: block;
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-block: calc(var(--enc-cabecera-alto) + var(--espacio-lg)) var(--espacio-3xl);
  padding-inline: max(var(--espacio-md), env(safe-area-inset-left)) max(var(--espacio-md), env(safe-area-inset-right));
  outline: none;
  overflow-x: clip;
}

.vista--carga {
  display: grid;
  justify-items: start;
  gap: var(--espacio-md);
  padding-block: var(--espacio-3xl);
  color: var(--tinta-media);
}

body:not([data-vista="cargando"]) .vista--carga {
  display: none;
}

.indicador-carga {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--linea);
  border-top-color: var(--accion);
  border-radius: var(--radio-redondo);
  animation: enc-girar 900ms linear infinite;
}

.vista--aviso {
  display: grid;
  gap: var(--espacio-md);
  max-width: 38rem;
  padding-block: var(--espacio-2xl);
  color: var(--tinta-media);
}

.vista--aviso > .icono {
  color: var(--error);
}

.aviso-sin-js {
  font-size: 1.125rem;
  color: var(--tinta);
}

.botonera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-sm);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-xs);
  min-height: 3rem;
  padding: var(--espacio-sm) var(--espacio-lg);
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font-weight: var(--peso-texto-fuerte);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--duracion-rapida) var(--curva-entrada),
    border-color var(--duracion-rapida) var(--curva-entrada),
    color var(--duracion-rapida) var(--curva-entrada),
    transform var(--duracion-rapida) var(--curva-entrada);
}

.boton:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

.boton:active:not(:disabled) {
  transform: translateY(1px);
}

.boton:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.boton--primario {
  background: var(--accion);
  color: var(--sobre-accion);
}

.boton--primario:hover:not(:disabled) {
  background: var(--accion-hover);
}

.boton--secundario {
  background: transparent;
  border-color: var(--enc-borde-control);
  color: var(--tinta);
}

.boton--secundario:hover:not(:disabled) {
  border-color: var(--accion);
  color: var(--accion);
}

.boton--fantasma {
  background: transparent;
  color: var(--tinta-media);
  padding-inline: var(--espacio-md);
}

.boton--fantasma:hover:not(:disabled) {
  background: var(--superficie-hundida);
  color: var(--tinta);
}

.boton[aria-busy="true"] .icono {
  display: none;
}

.boton[aria-busy="true"]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radio-redondo);
  animation: enc-girar 800ms linear infinite;
}

.portada {
  display: grid;
  grid-template-areas:
    "cabeza"
    "intro"
    "acciones"
    "privacidad";
  gap: var(--espacio-lg);
  padding-top: var(--espacio-md);
}

.portada__cabeza {
  grid-area: cabeza;
  display: grid;
  gap: var(--espacio-sm);
}

.portada__antetitulo {
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-texto-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-media);
}

.portada__titulo {
  margin: 0;
  max-width: 17ch;
  font-family: var(--familia-titular);
  font-weight: var(--peso-titular);
  font-size: var(--enc-texto-portada);
  line-height: var(--interlineado-titular);
  letter-spacing: var(--tracking-titular);
  text-wrap: balance;
  outline: none;
}

.portada__subrayado,
.cierre__subrayado {
  width: min(12rem, 55%);
  height: 0.9rem;
  color: var(--trazo-mano);
  margin-top: calc(-1 * var(--espacio-2xs));
}

.portada__intro {
  grid-area: intro;
  max-width: 60ch;
  font-size: var(--texto-cuerpo);
  color: var(--tinta-media);
  text-wrap: pretty;
}

.privacidad {
  grid-area: privacidad;
  align-self: start;
  display: grid;
  gap: var(--espacio-sm);
  padding: var(--espacio-lg);
  background: var(--superficie-elevada);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-suave);
}

.privacidad__titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-xs);
  margin: 0;
  font-family: var(--familia-titular);
  font-weight: var(--peso-titular);
  font-size: var(--texto-entrada);
  line-height: 1.2;
}

.privacidad__titulo .icono {
  color: var(--tinta-media);
}

.privacidad__voluntaria {
  color: var(--tinta-media);
  font-size: var(--enc-texto-ayuda);
}

.privacidad__subtitulo {
  margin-top: var(--espacio-xs);
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-texto-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.privacidad__no-recoge {
  display: grid;
  gap: var(--espacio-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacidad__no-recoge li {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-xs);
  font-size: var(--enc-texto-ayuda);
  line-height: 1.35;
}

.privacidad__no-recoge .icono {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1rem;
  color: var(--tinta-tenue);
}

.pendiente {
  padding-inline: 0.2em;
  background: var(--enc-fondo-pendiente);
  color: inherit;
  border-bottom: 1px dashed var(--trazo-mano);
  border-radius: var(--radio-control);
}

.portada__acciones {
  grid-area: acciones;
  display: grid;
  gap: var(--espacio-md);
  align-content: start;
}

.portada__pie {
  font-size: var(--enc-texto-pequeno);
  color: var(--tinta-tenue);
}

.nota {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-sm);
  padding: var(--espacio-md);
  background: var(--accion-suave);
  border: 1px solid color-mix(in oklab, var(--accion) 28%, transparent);
  border-radius: var(--radio-tarjeta);
  font-size: var(--enc-texto-ayuda);
  color: var(--tinta-media);
}

.nota .icono {
  margin-top: 0.1rem;
  color: var(--tinta-media);
}

.nota__titulo {
  color: var(--tinta);
  font-weight: var(--peso-texto-fuerte);
}

.botonera--portada .boton {
  flex: 1 1 100%;
}

.recorrido {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-lg);
}

.progreso {
  display: grid;
  gap: var(--espacio-xs);
}

.progreso__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-2xs) var(--espacio-md);
  font-size: var(--enc-texto-pequeno);
}

.progreso__etapa {
  font-weight: var(--peso-texto-fuerte);
  color: var(--tinta);
}

.progreso__cuenta {
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}

.progreso__barra {
  display: flex;
  gap: var(--enc-hueco-segmentos);
  height: var(--enc-alto-barra);
}

.progreso__segmento {
  flex: var(--pantallas, 1) 1 0;
  overflow: hidden;
  background: var(--linea);
  border-radius: var(--radio-redondo);
}

.progreso__relleno {
  display: block;
  height: 100%;
  background: var(--accion);
  transform-origin: left center;
  transform: scaleX(var(--llenado, 0));
  transition: transform var(--enc-duracion-barra) var(--enc-curva-hoja);
}

.progreso__etapas {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  list-style: none;
}

.progreso__marcador {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-redondo);
  font-family: var(--familia-titular);
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--tinta-tenue);
  background: var(--superficie);
}

.progreso__marcador .icono {
  width: 1rem;
  height: 1rem;
}

.progreso__nombre {
  line-height: 1.3;
}

.escenario {
  position: relative;
  isolation: isolate;
  perspective: var(--enc-perspectiva);
  perspective-origin: 50% 0;
}

.escenario::before,
.escenario::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--enc-hoja-trasera);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  pointer-events: none;
}

.escenario::before {
  transform: translateY(8px) scale(0.975);
  opacity: 0.9;
}

.escenario::after {
  transform: translateY(15px) scale(0.95);
  opacity: 0.6;
  z-index: -2;
}

.hoja {
  position: relative;
  display: grid;
  gap: var(--espacio-xl);
  padding: var(--espacio-lg) var(--espacio-md) 0;
  background: var(--superficie-elevada);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-papel);
  transform-origin: 50% 0;
  backface-visibility: hidden;
}

.hoja--entra-adelante {
  animation: enc-hoja-adelante var(--enc-duracion-hoja) var(--enc-curva-hoja) both;
}

.hoja--entra-atras {
  animation: enc-hoja-atras var(--enc-duracion-hoja) var(--enc-curva-hoja) both;
}

.hoja__cabeza {
  display: grid;
  gap: var(--espacio-xs);
}

.hoja__antetitulo {
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-texto-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-media);
}

.hoja__titulo {
  position: relative;
  justify-self: start;
  margin: 0;
  padding-bottom: var(--espacio-sm);
  font-family: var(--familia-titular);
  font-weight: var(--peso-titular);
  font-size: var(--enc-texto-pantalla);
  line-height: 1.1;
  letter-spacing: var(--tracking-titular);
  text-wrap: balance;
  border-radius: var(--radio-control);
  scroll-margin-top: calc(var(--enc-cabecera-alto) + var(--espacio-2xl));
}

.hoja__titulo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4.5rem;
  height: 0.6rem;
  background: var(--trazo-mano);
  -webkit-mask: url("../img/ui/subrayado-2.svg") no-repeat left center / 100% 100%;
  mask: url("../img/ui/subrayado-2.svg") no-repeat left center / 100% 100%;
}

.hoja__titulo:focus {
  outline: none;
}

.hoja__titulo:focus-visible,
.portada__titulo:focus-visible,
.cierre__titulo:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 6px;
}

.hoja__preguntas {
  display: grid;
  gap: var(--espacio-xl);
}

.hoja__navegacion {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  margin-inline: calc(-1 * var(--espacio-md));
  padding: var(--espacio-sm) var(--espacio-md) calc(var(--espacio-sm) + env(safe-area-inset-bottom));
  background: var(--superficie-elevada);
  border-top: 1px solid var(--linea);
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
}

.hoja__navegacion #boton-siguiente {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: auto;
}

.hoja__navegacion #boton-atras {
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 22.5rem) {
  .hoja__navegacion .boton {
    padding-inline: var(--espacio-sm);
    gap: var(--espacio-2xs);
  }
}

.trampa {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pregunta {
  display: grid;
  gap: var(--espacio-sm);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pregunta + .pregunta {
  padding-top: var(--espacio-xl);
  border-top: 1px solid var(--linea);
}

.pregunta__enunciado {
  float: left;
  width: 100%;
  padding: 0;
  font-size: var(--enc-texto-pregunta);
  font-weight: var(--peso-texto-fuerte);
  line-height: 1.35;
  color: var(--tinta);
  text-wrap: pretty;
}

.pregunta__enunciado + * {
  clear: both;
}

label.pregunta__enunciado {
  float: none;
  display: block;
}

.pregunta__opcional {
  font-weight: var(--peso-texto);
  color: var(--tinta-tenue);
}

.pregunta__ayuda {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-xs);
  font-size: var(--enc-texto-ayuda);
  color: var(--tinta-tenue);
  text-wrap: pretty;
}

.pregunta__ayuda .icono {
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: 0.15rem;
  color: var(--tinta-media);
}

.pregunta__error {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-xs);
  font-size: var(--enc-texto-ayuda);
  font-weight: var(--peso-texto-fuerte);
  color: var(--error);
}

.pregunta__error .icono {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.12rem;
}

.pregunta__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-2xs) var(--espacio-md);
  font-size: var(--enc-texto-pequeno);
  color: var(--tinta-tenue);
}

.contador {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

.contador--al-limite {
  color: var(--tinta);
  font-weight: var(--peso-texto-fuerte);
}

.nota-exclusiva {
  font-size: var(--enc-texto-pequeno);
  color: var(--tinta-tenue);
}

.opciones {
  display: grid;
  gap: var(--espacio-xs);
  margin: 0;
  padding: 0;
}

.opciones--lista {
  grid-template-columns: minmax(0, 1fr);
}

.opciones--rejilla {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr));
}

.opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  min-height: var(--enc-alto-opcion);
  padding: var(--espacio-sm) var(--espacio-md);
  background: var(--superficie-elevada);
  border: 1px solid var(--enc-borde-control);
  border-radius: var(--enc-radio-opcion);
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--duracion-rapida) var(--curva-entrada),
    background-color var(--duracion-rapida) var(--curva-entrada),
    box-shadow var(--duracion-rapida) var(--curva-entrada);
}

.opcion__control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.opcion__marca {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--superficie-elevada);
  border: 1.5px solid var(--enc-borde-control);
  border-radius: var(--radio-redondo);
  transition: background-color var(--duracion-rapida) var(--curva-entrada), border-color var(--duracion-rapida) var(--curva-entrada);
}

.opcion__marca::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radio-redondo);
  background: var(--sobre-accion);
  transform: scale(0);
  transition: transform var(--duracion-rapida) var(--enc-curva-hoja);
}

.opcion--casilla .opcion__marca {
  border-radius: var(--radio-control);
}

.opcion--casilla .opcion__marca::after {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0;
  -webkit-mask: url("../img/ui/encuesta-check.svg") no-repeat center / contain;
  mask: url("../img/ui/encuesta-check.svg") no-repeat center / contain;
}

.opcion__texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.opcion--exclusiva {
  border-style: dashed;
}

@media (hover: hover) {
  .opcion:hover {
    border-color: var(--accion);
    background: var(--enc-fondo-hover);
  }
}

.opcion__control:checked + .opcion__marca {
  background: var(--accion);
  border-color: var(--accion);
}

.opcion__control:checked + .opcion__marca::after {
  transform: scale(1);
}

.opcion:has(.opcion__control:checked) {
  border-color: var(--accion);
  background: var(--accion-suave);
  box-shadow: inset 0 0 0 1px var(--accion);
}

.opcion:has(.opcion__control:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.opcion:has(.opcion__control:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

.opcion__control:disabled {
  cursor: not-allowed;
}

.pregunta--error .opcion:not(:has(.opcion__control:checked)),
.pregunta--error .escala__opcion {
  border-color: var(--enc-borde-error);
}

.escala {
  display: grid;
  gap: var(--espacio-xs);
}

.escala__valores {
  display: grid;
  grid-template-columns: repeat(var(--pasos, 5), minmax(0, 1fr));
}

.escala__opcion {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--enc-alto-escala);
  margin-inline-start: -1px;
  background: var(--superficie-elevada);
  border: 1px solid var(--enc-borde-control);
  font-family: var(--familia-titular);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duracion-rapida) var(--curva-entrada), color var(--duracion-rapida) var(--curva-entrada);
}

.escala__opcion:first-child {
  margin-inline-start: 0;
  border-radius: var(--enc-radio-opcion) 0 0 var(--enc-radio-opcion);
}

.escala__opcion:last-child {
  border-radius: 0 var(--enc-radio-opcion) var(--enc-radio-opcion) 0;
}

@media (hover: hover) {
  .escala__opcion:hover {
    z-index: 1;
    border-color: var(--accion);
    background: var(--enc-fondo-hover);
  }
}

.escala__opcion:has(.opcion__control:checked) {
  z-index: 2;
  background: var(--accion);
  border-color: var(--accion);
  color: var(--sobre-accion);
}

.escala__opcion:has(.opcion__control:focus-visible) {
  z-index: 3;
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.escala__anclas {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-md);
  font-size: var(--enc-texto-pequeno);
  line-height: 1.3;
  color: var(--tinta-media);
}

.escala__ancla {
  max-width: 45%;
}

.escala__ancla--max {
  text-align: right;
}

.campo {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--espacio-sm) var(--espacio-md);
  background: var(--superficie-elevada);
  border: 1px solid var(--enc-borde-control);
  border-radius: var(--enc-radio-opcion);
  line-height: 1.4;
  transition: border-color var(--duracion-rapida) var(--curva-entrada);
}

.campo--largo {
  min-height: 8.5rem;
  resize: vertical;
}

.campo:hover {
  border-color: var(--accion);
}

.campo:focus {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
  border-color: var(--accion);
}

.campo[aria-invalid="true"] {
  border-color: var(--error);
}

.verificacion {
  display: grid;
  gap: var(--espacio-xs);
}

.verificacion__texto {
  font-size: var(--enc-texto-pequeno);
  color: var(--tinta-tenue);
}

.verificacion__widget {
  min-height: 65px;
}

.estado-envio {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-sm);
  padding: var(--espacio-md);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie-hundida);
  outline: none;
}

.estado-envio__icono {
  margin-top: 0.1rem;
  color: var(--tinta-media);
}

.estado-envio__cuerpo {
  display: grid;
  gap: var(--espacio-2xs);
}

.estado-envio__titulo {
  font-weight: var(--peso-texto-fuerte);
}

.estado-envio__texto {
  font-size: var(--enc-texto-ayuda);
  color: var(--tinta-media);
}

.estado-envio[data-tono="info"] {
  background: var(--accion-suave);
  border-color: color-mix(in oklab, var(--accion) 30%, transparent);
}

.estado-envio[data-tono="error"] {
  border-color: var(--error);
  background: color-mix(in oklab, var(--error) 7%, var(--superficie-elevada));
}

.estado-envio[data-tono="error"] .estado-envio__icono,
.estado-envio[data-tono="error"] .estado-envio__titulo {
  color: var(--error);
}

.cierre {
  display: grid;
  justify-items: start;
  gap: var(--espacio-md);
  max-width: 40rem;
  padding-block: var(--espacio-xl) var(--espacio-2xl);
}

.cierre__ilustracion {
  width: 7.5rem;
  height: auto;
  aspect-ratio: 4 / 3;
  color: var(--tinta-media);
}

.cierre__titulo {
  margin: 0;
  font-family: var(--familia-titular);
  font-weight: var(--peso-titular);
  font-size: var(--enc-texto-cierre);
  line-height: var(--interlineado-titular);
  letter-spacing: var(--tracking-titular);
  text-wrap: balance;
}

.cierre__texto {
  max-width: 58ch;
  font-size: 1.125rem;
  color: var(--tinta-media);
  text-wrap: pretty;
}

.cierre__nota {
  font-size: var(--enc-texto-ayuda);
  color: var(--tinta-tenue);
}

.cierre__destino {
  display: grid;
  gap: var(--espacio-xs);
  max-width: 58ch;
  margin-top: var(--espacio-sm);
  padding-top: var(--espacio-md);
  border-top: 1px solid var(--linea);
}

.cierre__subtitulo {
  margin: 0;
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-texto-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.cierre__destino p {
  color: var(--tinta-media);
  text-wrap: pretty;
}

.botonera--cierre {
  margin-top: var(--espacio-md);
}

.vista--entra {
  animation: enc-hoja-adelante var(--enc-duracion-hoja) var(--enc-curva-hoja) both;
  transform-origin: 50% 0;
}

@keyframes enc-hoja-adelante {
  from {
    opacity: 0;
    transform: translate3d(0, 0.75rem, -60px) rotateX(4deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes enc-hoja-atras {
  from {
    opacity: 0;
    transform: translate3d(0, -0.5rem, -60px) rotateX(-3deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.boton-texto {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--espacio-xs);
  min-height: var(--objetivo-tactil);
  padding: 0 var(--espacio-2xs);
  background: none;
  border: 0;
  border-radius: var(--radio-control);
  font-size: var(--enc-texto-pequeno);
  color: var(--tinta-media);
  text-decoration: underline;
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.boton-texto:hover {
  color: var(--tinta);
  text-decoration-color: currentColor;
}

.boton-texto:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.boton-texto[data-confirmando="true"] {
  color: var(--error);
  font-weight: var(--peso-texto-fuerte);
  text-decoration-color: currentColor;
}

.recorrido__pie {
  display: flex;
  justify-content: center;
  padding-top: var(--espacio-md);
}

@media (min-width: 64rem) {
  .recorrido__pie {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.pregunta--aparece {
  animation: enc-aparecer 380ms var(--enc-curva-hoja) both;
}

@keyframes enc-aparecer {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes enc-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 30rem) {
  .hoja {
    padding: var(--espacio-xl) var(--espacio-xl) 0;
  }

  .hoja__navegacion {
    margin-inline: calc(-1 * var(--espacio-xl));
    padding-inline: var(--espacio-xl);
  }

  .hoja__navegacion #boton-siguiente {
    flex: 0 1 auto;
    min-width: 11rem;
  }

  .botonera--portada .boton {
    flex: 0 1 auto;
  }

  .privacidad__no-recoge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--espacio-lg);
  }
}

@media (min-width: 48rem) {
  .solo-escritorio {
    display: inline;
  }

  .escenario::before {
    transform: translate3d(6px, 9px, 0) rotate(0.6deg);
  }

  .escenario::after {
    transform: translate3d(-5px, 16px, 0) rotate(-0.9deg);
  }

  .hoja {
    padding: var(--espacio-2xl) var(--espacio-2xl) 0;
  }

  .hoja__navegacion {
    position: static;
    margin-inline: calc(-1 * var(--espacio-2xl));
    padding: var(--espacio-md) var(--espacio-2xl) var(--espacio-lg);
    background: transparent;
  }

  .cierre__ilustracion {
    width: 9rem;
  }
}

@media (min-width: 64rem) {
  .lienzo {
    padding-top: calc(var(--enc-cabecera-alto) + var(--espacio-2xl));
  }

  .portada {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    grid-template-areas:
      "cabeza privacidad"
      "intro privacidad"
      "acciones privacidad";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--espacio-4xl);
    row-gap: var(--espacio-xl);
    padding-top: var(--espacio-xl);
  }

  .privacidad {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacidad__no-recoge {
    grid-template-columns: minmax(0, 1fr);
  }

  .recorrido {
    grid-template-columns: var(--enc-ancho-lateral) minmax(0, var(--enc-ancho-hoja));
    justify-content: center;
    align-items: start;
    column-gap: var(--espacio-3xl);
  }

  .progreso {
    position: sticky;
    top: calc(var(--enc-cabecera-alto) + var(--espacio-xl));
    gap: var(--espacio-sm);
  }

  .progreso__etapas {
    position: static;
    width: auto;
    height: auto;
    margin: var(--espacio-md) 0 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: grid;
    gap: 0;
  }

  .progreso__paso {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-sm);
    padding-block: var(--espacio-xs);
    font-size: var(--enc-texto-ayuda);
    color: var(--tinta-tenue);
  }

  .progreso__paso + .progreso__paso::before {
    content: "";
    position: absolute;
    left: calc(0.875rem - 0.5px);
    top: calc(-1 * var(--espacio-xs));
    height: calc(2 * var(--espacio-xs));
    width: 1px;
    background: var(--linea-fuerte);
  }

  .progreso__paso--hecho {
    color: var(--tinta-media);
  }

  .progreso__paso--hecho .progreso__marcador {
    border-color: var(--accion);
    color: var(--accion);
  }

  .progreso__paso[aria-current="step"] {
    color: var(--tinta);
    font-weight: var(--peso-texto-fuerte);
  }

  .progreso__paso[aria-current="step"] .progreso__marcador {
    background: var(--accion);
    border-color: var(--accion);
    color: var(--sobre-accion);
  }
}

@media (max-height: 34rem) {
  html {
    scroll-padding-top: var(--espacio-md);
    scroll-padding-bottom: var(--espacio-md);
  }

  .cabecera {
    position: static;
  }

  .lienzo {
    padding-top: var(--espacio-lg);
  }

  .hoja__navegacion,
  .progreso {
    position: static;
  }

  .hoja__titulo {
    scroll-margin-top: var(--espacio-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hoja--entra-adelante,
  .hoja--entra-atras,
  .vista--entra {
    animation: none;
  }

  .progreso__relleno,
  .opcion,
  .opcion__marca,
  .opcion__marca::after,
  .boton {
    transition: none;
  }

  .indicador-carga,
  .boton[aria-busy="true"]::before {
    animation-duration: 2400ms;
  }
}

@media (forced-colors: active) {
  .opcion:has(.opcion__control:checked),
  .escala__opcion:has(.opcion__control:checked) {
    outline: 3px solid Highlight;
  }

  .progreso__relleno {
    background: Highlight;
  }

  .opcion__control:checked + .opcion__marca {
    background: Highlight;
    border-color: Highlight;
    forced-color-adjust: none;
  }

  .opcion__marca::after {
    background: HighlightText;
  }
}