/* ══════════════════════════════════════════════════════════════════════════
   Sannu · /demo/ — el último tramo del «hola»
   ──────────────────────────────────────────────────────────────────────────
   Fase 4 de «El hola viaja». Quien llega aquí ya ha decidido: la página
   tiene que quitar fricción, no añadir espectáculo. Tres cosas:

   · Los pasos como línea de tiempo que empieza hoy, en este formulario.
   · Campos claros: un escalón por encima de la tarjeta (no pozos negros),
     borde que se lee, foco visible con anillo verde y error con nombre.
   · Un momento de marca sobrio: el mapa de puntos con Sannu,
     quieto hasta que el envío se confirma y su «hola» llega en un arco.

   Lo monta pagina-demo.js; los campos se estilan también sin script,
   porque el formulario es lo único imprescindible de la página.
   ══════════════════════════════════════════════════════════════════════════ */

/* El titular y las columnas, juntos: el hueco común de sección (hasta
   7,5 rem) separaba el «Solicitar una demostración» de lo que se solicita. */
body.pagina-demo .entry-content > .wp-block-group:first-child { padding-bottom: 0.5rem !important; }
body.pagina-demo .entry-content > .wp-block-columns { gap: clamp(2rem, 5vw, 5rem) !important; }

/* ── El formulario ───────────────────────────────────────────────────── */

.sannu-formulario { padding: clamp(1.4rem, 3vw, 2.2rem) !important; gap: 1.25rem !important; }
.sannu-formulario *, .sannu-formulario *::before, .sannu-formulario *::after { box-sizing: border-box; }
.sannu-formulario label > span { font-size: 0.92rem !important; font-weight: 650 !important; letter-spacing: -0.005em; color: var(--h-texto) !important; margin-bottom: 0.45rem !important; }

/* Un escalón más claro que la tarjeta en oscuro y un gris de papel en
   claro: el campo se ve como sitio donde escribir, no como un agujero. */
.sannu-formulario :is(input[type="text"], input[type="tel"], input[type="email"], textarea) {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 0.95rem !important;
  background: color-mix(in srgb, var(--h-texto) 6%, var(--h-superficie)) !important;
  border: 1px solid color-mix(in srgb, var(--h-texto) 20%, transparent) !important;
  border-radius: 12px !important;
  color: var(--h-texto) !important;
  font: 500 16px/1.45 var(--h-letra) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.sannu-formulario textarea { min-height: 132px; resize: vertical; }
.sannu-formulario :is(input, textarea)::placeholder { color: var(--h-tenue); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sannu-formulario :is(input[type="text"], input[type="tel"], input[type="email"], textarea):hover { border-color: color-mix(in srgb, var(--h-texto) 34%, transparent) !important; }
}
.sannu-formulario :is(input[type="text"], input[type="tel"], input[type="email"], textarea):focus {
  outline: none;
  background: color-mix(in srgb, var(--h-texto) 9%, var(--h-superficie)) !important;
  border-color: var(--h-verde) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--h-verde) 24%, transparent) !important;
}
/* El error solo después de que la persona haya tocado el campo. */
.sannu-formulario :is(input, textarea):user-invalid { border-color: #E5484D !important; box-shadow: 0 0 0 4px rgb(229 72 77 / 18%) !important; }

.sannu-formulario .sannu-consentimiento { align-items: flex-start !important; gap: 0.75rem !important; padding: 0.35rem 0; font-size: 0.92rem !important; line-height: 1.5; color: var(--h-suave) !important; cursor: pointer; }
.sannu-formulario .sannu-consentimiento > span { font-weight: 500 !important; color: var(--h-suave) !important; margin: 0 !important; font-size: 0.92rem !important; }
.sannu-formulario .sannu-consentimiento a { color: var(--h-texto); text-decoration: underline; text-decoration-color: var(--h-verde); text-underline-offset: 0.2em; }
.sannu-formulario input[type="checkbox"] { flex: none; width: 22px !important; height: 22px !important; margin: 0.05rem 0 0 !important; accent-color: var(--h-verde); cursor: pointer; }
.sannu-formulario input[type="checkbox"]:focus-visible { outline: 2px solid var(--h-verde); outline-offset: 3px; }

.sannu-formulario button { width: 100%; min-height: 54px !important; font-size: 1rem !important; }
@media (hover: hover) and (pointer: fine) { .sannu-formulario button:hover:not(:disabled) { filter: brightness(1.08); } }
.sannu-formulario button:focus-visible { outline: 2px solid var(--h-texto); outline-offset: 3px; }
.sannu-formulario button:disabled { opacity: 0.65; cursor: progress; }

.sannu-formulario .sannu-resultado { font-weight: 600; }
.sannu-formulario .sannu-resultado.es-bien { color: var(--h-verde) !important; }
.sannu-formulario .sannu-resultado.es-mal { color: #FF7A7E !important; }
html[data-tema="claro"] .sannu-formulario .sannu-resultado.es-bien { color: #017A4E !important; }
html[data-tema="claro"] .sannu-formulario .sannu-resultado.es-mal { color: #B42318 !important; }

/* ── La línea de tiempo ──────────────────────────────────────────────── */

.demo-linea { position: relative; list-style: none; margin: 2.2rem 0 1.8rem !important; padding: 0 !important; }
/* El trazo une los nodos; se dibuja una vez de arriba abajo al cargar. */
.demo-linea::before {
  content: "";
  position: absolute;
  left: 15px; top: 18px; bottom: 30px;
  width: 2px;
  background: var(--h-linea-2);
  transform-origin: 50% 0;
}
.demo-linea.demo-por-trazar::before { transform: scaleY(0); }
.demo-linea.demo-trazada::before { transform: scaleY(1); transition: transform 480ms var(--h-sale) 120ms; }

.demo-paso { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 1.1rem; padding-bottom: 1.6rem; margin: 0 !important; }
.demo-paso:last-child { padding-bottom: 0; }
.demo-paso > .wp-block-group { display: block !important; margin: 0 !important; }
.demo-paso > .wp-block-group > .wp-block-group { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.demo-num { display: none !important; }

.demo-nodo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--h-linea-2);
  background: var(--h-fondo);
  color: var(--h-texto);
  font: 800 0.85rem var(--h-display);
  font-variant-numeric: tabular-nums;
}
.demo-linea.demo-por-trazar .demo-paso:not(.demo-hoy) .demo-nodo { opacity: 0; transform: scale(0.9); }
.demo-linea.demo-trazada .demo-paso .demo-nodo { opacity: 1; transform: none; transition: opacity 240ms ease, transform 240ms var(--h-sale), background-color 200ms ease, border-color 200ms ease; }
.demo-linea.demo-trazada .demo-paso:nth-child(2) .demo-nodo { transition-delay: 160ms; }
.demo-linea.demo-trazada .demo-paso:nth-child(3) .demo-nodo { transition-delay: 260ms; }
.demo-linea.demo-trazada .demo-paso:nth-child(4) .demo-nodo { transition-delay: 360ms; }

/* «Hoy»: anillo verde con punto; se llena cuando el formulario está listo
   y lleva la marca de recibido cuando el plugin confirma. */
.demo-hoy .demo-nodo { border-color: var(--h-verde); }
.demo-hoy .demo-nodo::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--h-verde); transition: transform 200ms var(--h-sale); }
.demo-hoy.demo-listo .demo-nodo { background: color-mix(in srgb, var(--h-verde) 22%, var(--h-fondo)); }
.demo-hoy.demo-listo .demo-nodo::after { transform: scale(1.3); }
.demo-hoy.demo-enviado .demo-nodo { background: var(--h-verde); }
.demo-hoy.demo-enviado .demo-nodo::after {
  width: 16px; height: 12px; border-radius: 0;
  background: #03140A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M5.6 11.4.3 6.1l1.6-1.6 3.7 3.7L14.1-.3l1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M5.6 11.4.3 6.1l1.6-1.6 3.7 3.7L14.1-.3l1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}

.demo-cuando { margin: 0.3rem 0 0.15rem !important; font-size: 0.8rem !important; font-weight: 700; letter-spacing: 0.01em; color: var(--h-verde) !important; }
html[data-tema="claro"] .demo-cuando { color: #017A4E !important; }
.demo-paso:not(.demo-hoy) .demo-cuando { color: var(--h-tenue) !important; }
.demo-titulo { margin: 0 !important; font-weight: 600; color: var(--h-texto); }
.demo-estado { margin: 0.2rem 0 0 !important; min-height: 1.5em; font-size: 0.9rem; font-weight: 600; color: var(--h-suave); }
.demo-estado:empty { min-height: 0; }

/* ── El mapa ─────────────────────────────────────────────────────────── */

.demo-mapa { margin: 2.6rem 0 0 !important; max-width: 440px; }
.demo-mapa canvas { display: block; width: 100%; aspect-ratio: 1 / 0.8; }
.demo-mapa-pie { margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--h-tenue); transition: color 200ms ease; }
.demo-mapa-llego .demo-mapa-pie { color: var(--h-texto); }
@media (max-width: 781px) {
  .demo-mapa { margin: 2.4rem auto 0 !important; }
  .demo-mapa-pie { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-linea.demo-trazada::before { transition: none; }
  .demo-linea.demo-trazada .demo-paso .demo-nodo { transition: opacity 150ms ease; transform: none; }
}