/*
 * Formularios conversacionales (includes/formularios-publico.php). Sin JS:
 * todas las preguntas en columna, como un formulario normal. Con JS
 * (.dsf-listo): una pantalla cada vez. Efectos del kit de animaciones:
 * 09/10 revelado por palabras, 07 opciones con muelle, 15 barra que fluye.
 * Solo transform y opacity; con reduced-motion, solo fundidos.
 */
:root {
	--dsf-bg: #0a0a0a;
	--dsf-ink: #f5f5f5;
	--dsf-muted: #a3a3a3;
	--dsf-line: rgba(255, 255, 255, 0.16);
	--dsf-acento: #06B6D4;
	--dsf-grad: linear-gradient(90deg, #3B82F6, #8B5CF6, #06B6D4);
	--dsf-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dsf-muelle: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dsf-mono: 'JetBrains Mono', ui-monospace, monospace;
	--dsf-sans: 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--dsf-bg); color-scheme: dark; }
body.dsf {
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(ellipse at 85% 0%, rgba(59, 130, 246, 0.12), transparent 55%),
		radial-gradient(ellipse at 0% 100%, rgba(139, 92, 246, 0.1), transparent 50%),
		var(--dsf-bg);
	color: var(--dsf-ink);
	font: 400 1rem/1.5 var(--dsf-sans);
	-webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--dsf-acento); outline-offset: 3px; border-radius: 4px; }
.dsf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dsf-cabecera { position: fixed; top: 0; left: 0; right: 0; padding: 20px 24px; z-index: 3; }
.dsf--preview .dsf-cabecera { position: absolute; }
.dsf-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--dsf-ink); text-decoration: none; font: 500 0.95rem var(--dsf-mono); letter-spacing: -0.04em; }
.dsf-marca svg { width: 28px; height: 28px; }

.dsf-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.06); z-index: 4; overflow: hidden; }
.dsf-progreso__barra { position: relative; display: block; height: 100%; background: var(--dsf-grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 600ms var(--dsf-ease); overflow: hidden; }
.dsf-progreso__barra::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent); transform: translateX(-100%); }

.dsf-main { max-width: 760px; margin: 0 auto; padding: 120px 24px 140px; }
.dsf-form { margin: 0; }
.dsf-pantalla { border: 0; margin: 0 0 72px; padding: 0; min-width: 0; }
.dsf-titulo { display: block; margin: 0 0 12px; padding: 0; font: 500 clamp(1.4rem, 1rem + 2vw, 2.1rem)/1.25 var(--dsf-mono); letter-spacing: -0.05em; color: var(--dsf-ink); }
h1.dsf-titulo { font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem); }
/* El titulo recibe el foco por programa (para el lector de pantalla), no es interactivo. */
.dsf-titulo:focus { outline: none; }
.dsf-num { color: var(--dsf-acento); font-size: 0.6em; vertical-align: 0.25em; margin-right: 6px; white-space: nowrap; }
.dsf-req { color: var(--dsf-acento); margin-left: 4px; }
.dsf-desc { color: var(--dsf-muted); font-size: 1.05rem; margin: 0 0 28px; max-width: 60ch; }
.dsf-desc--pista { margin-bottom: 16px; font-size: 0.95rem; }

.dsf-campo { width: 100%; padding: 8px 0; background: transparent; border: 0; border-bottom: 2px solid var(--dsf-line); border-radius: 0; color: var(--dsf-ink); font: 400 clamp(1.15rem, 1rem + 1vw, 1.6rem)/1.4 var(--dsf-sans); transition: border-color 200ms; }
.dsf-campo::placeholder { color: rgba(255, 255, 255, 0.28); }
.dsf-campo:focus, .dsf-campo:focus-visible { outline: none; border-bottom-color: var(--dsf-acento); }
textarea.dsf-campo { resize: vertical; min-height: 3em; }

.dsf-opciones { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.dsf-opcion { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--dsf-line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); font-size: 1.05rem; cursor: pointer; transition: background 160ms, border-color 160ms; }
.dsf-opcion:hover { background: rgba(6, 182, 212, 0.08); border-color: rgba(6, 182, 212, 0.5); }
.dsf-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dsf-opcion:has(input:focus-visible) { outline: 2px solid var(--dsf-acento); outline-offset: 2px; }
.dsf-opcion:has(input:checked) { background: rgba(6, 182, 212, 0.14); border-color: var(--dsf-acento); }
.dsf-letra { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--dsf-line); border-radius: 6px; color: var(--dsf-muted); font: 500 0.8rem var(--dsf-mono); }
.dsf-opcion:has(input:checked) .dsf-letra { background: var(--dsf-acento); border-color: var(--dsf-acento); color: #001018; }

.dsf-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.dsf-boton { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border: 0; border-radius: 32px; background: #f5f5f5; color: #0a0a0a; font: 500 1rem var(--dsf-mono); letter-spacing: -0.03em; text-decoration: none; cursor: pointer; transition: transform 160ms var(--dsf-ease), background 160ms; }
.dsf-boton:hover { background: #fff; }
.dsf-boton:active { transform: scale(0.97); }
.dsf-boton[disabled] { opacity: 0.5; cursor: not-allowed; }
.dsf-pista { color: var(--dsf-muted); font-size: 0.85rem; }
.dsf-pista kbd { font: 500 0.8rem var(--dsf-mono); }
@media (hover: none) { .dsf-pista { display: none; } }
.dsf-error { margin: 16px 0 0; padding: 8px 12px; border-left: 3px solid #ef4444; border-radius: 4px; background: rgba(239, 68, 68, 0.1); color: #fca5a5; }
.dsf-error[hidden] { display: none; }

.dsf-licitacion { display: grid; gap: 4px; margin: 0 0 8px; padding: 16px 18px; border: 1px solid var(--dsf-line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.dsf-licitacion__etiqueta { color: var(--dsf-acento); font: 500 0.75rem var(--dsf-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.dsf-aviso { margin: 8px 0 0; color: #fcd34d; }
.dsf-check { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; cursor: pointer; }
.dsf-check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--dsf-acento); }
.dsf-check a, .dsf .ds-form-privacidad a { color: var(--dsf-ink); }
.dsf .ds-form-privacidad { max-width: 70ch; margin: 20px 0 0; color: var(--dsf-muted); font-size: 0.8rem; line-height: 1.5; }
.dsf-trampa { position: absolute; left: -9999px; }

/* Fondo de particulas (formulario.js): detras de todo; el contenido va por encima. */
.dsf-fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.dsf-main { position: relative; z-index: 1; }
/* Pantalla final: logo grande DETRAS del texto (a la izquierda del titular en
   escritorio, centrado en movil). Lo dibujan las particulas del fondo, como el
   de la portada; el SVG solo se ve (tenue) sin JS o con reduced-motion. La caja
   no ocupa sitio: solo marca donde se forma. */
.dsf-final { position: relative; }
.dsf-final > :not(.dsf-final__marca) { position: relative; }
.dsf-final__marca { position: absolute; z-index: 0; width: 460px; height: 460px; top: -150px; left: -270px; pointer-events: none; }
.dsf-final__marca svg { width: 100%; height: 100%; opacity: 0.18; }
.dsf-final__marca.is-particulas svg { opacity: 0; }
@media (max-width: 1100px) {
	.dsf-final__marca { width: min(360px, 88vw); height: min(360px, 88vw); top: -50px; left: 50%; transform: translateX(-50%); }
}
.dsf-lecturas { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; max-width: 560px; }
.dsf-lecturas a { display: block; padding: 12px 14px; border: 1px solid var(--dsf-line); border-radius: 10px; color: var(--dsf-ink); text-decoration: none; transition: border-color 160ms; }
.dsf-lecturas a:hover { border-color: var(--dsf-acento); }
.dsf-enlace { color: var(--dsf-ink); }

.dsf-nav { display: none; }

/* Con JS: una pantalla cada vez, centrada en la ventana. */
.dsf-js .dsf-pantalla { display: none; }
.dsf-js .dsf-final { display: block; }
.dsf-listo .dsf-main { display: flex; align-items: center; min-height: 100vh; padding-top: 96px; padding-bottom: 96px; }
.dsf-listo .dsf-form, .dsf-listo .dsf-final { width: 100%; }
.dsf-listo .dsf-pantalla { margin: 0; }
.dsf-listo .dsf-pantalla.is-activa { display: block; }
.dsf-listo .dsf-nav { position: fixed; right: 24px; bottom: 24px; z-index: 3; display: flex; gap: 2px; }
.dsf-nav button { appearance: none; width: 42px; height: 36px; border: 0; background: rgba(255, 255, 255, 0.1); color: var(--dsf-ink); font-size: 1rem; cursor: pointer; }
.dsf-nav button:first-child { border-radius: 8px 0 0 8px; }
.dsf-nav button:last-child { border-radius: 0 8px 8px 0; }
.dsf-nav button:hover { background: rgba(255, 255, 255, 0.18); }
.dsf-nav button[disabled] { opacity: 0.35; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
	.dsf-pantalla.is-entra { animation: dsf-entra 520ms var(--dsf-ease) both; }
	.dsf-pantalla.is-entra-atras { animation: dsf-entra-atras 520ms var(--dsf-ease) both; }
	.dsf-pantalla.is-sale { animation: dsf-sale 220ms ease-in both; }
	.dsf-pantalla.is-sale-atras { animation: dsf-sale-atras 220ms ease-in both; }
	/* 09/10: cada palabra sube desde una mascara. */
	.dsf-p { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
	.dsf-p > span { display: inline-block; animation: dsf-palabra 560ms var(--dsf-ease) both; animation-delay: calc(var(--i) * 35ms + 60ms); }
	/* 07: opciones escalonadas con muelle; latido al elegir. */
	.is-entra .dsf-opcion, .is-entra-atras .dsf-opcion { animation: dsf-muelle 600ms var(--dsf-muelle) both; animation-delay: calc(var(--i) * 60ms + 160ms); }
	.dsf-opcion.is-latido { animation: dsf-latido 320ms var(--dsf-muelle); }
	/* 15: brillo que recorre la barra al avanzar. */
	.dsf-progreso.is-fluye .dsf-progreso__barra::after { animation: dsf-fluye 900ms var(--dsf-ease); }
}
@media (prefers-reduced-motion: reduce) {
	.dsf-pantalla.is-entra, .dsf-pantalla.is-entra-atras { animation: dsf-funde 200ms ease both; }
	.dsf-pantalla.is-sale, .dsf-pantalla.is-sale-atras { animation: dsf-funde-sale 120ms ease both; }
	.dsf-progreso__barra { transition: none; }
}
@keyframes dsf-entra { from { opacity: 0; transform: translateY(48px); } }
@keyframes dsf-entra-atras { from { opacity: 0; transform: translateY(-48px); } }
@keyframes dsf-sale { to { opacity: 0; transform: translateY(-48px); } }
@keyframes dsf-sale-atras { to { opacity: 0; transform: translateY(48px); } }
@keyframes dsf-palabra { from { transform: translateY(105%); } }
@keyframes dsf-muelle { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes dsf-latido { 50% { transform: scale(1.03); } }
@keyframes dsf-fluye { to { transform: translateX(100%); } }
@keyframes dsf-funde { from { opacity: 0; } }
@keyframes dsf-funde-sale { to { opacity: 0; } }

@media (max-width: 600px) {
	.dsf-main { padding: 96px 20px 120px; }
	.dsf-cabecera { padding: 16px 20px; }
	.dsf-listo .dsf-nav { right: 16px; bottom: 16px; }
}