/* El pedido de demo por problema (/demo, 26/10/2026).
 *
 * Hoja propia del frente y no un bloque en tamiz.css a propósito: la misión de la
 * web del 26/10 deja tamiz.css para la integración. Todo color sale de los roles
 * de tamiz.css (--texto, --borde, --tarjeta...), así que el tema oscuro funciona
 * solo. El único ámbar de la sección es la tarjeta elegida.
 *
 * Funciona sin JavaScript: las tarjetas son <label> con un radio adentro, y el
 * marcado elegido se pinta con :has(). Un navegador sin :has() ve el radio
 * marcado igual, que es lo que importa.
 */

.demo-paso { margin-top: calc(var(--grano) * 5); border: 0; padding: 0; min-width: 0; }
/* La barra de arriba es fija: sin esto, el salto al paso 2 (o a #datos) deja el
   título del paso escondido debajo de ella. Visto en el preview a 375 px. */
.demo-paso, .demo-datos { scroll-margin-top: calc(var(--grano) * 8); }
.demo-paso legend {
  padding: 0;
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.25;
}
.demo-paso-nro {
  display: block; margin-bottom: calc(var(--grano) * 0.6);
  font-family: var(--fuente-dato); font-size: 0.78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-3); font-weight: 400;
}
.demo-ayuda { margin-top: calc(var(--grano) * 1.2); color: var(--texto-2); }

.demo-opciones {
  margin-top: calc(var(--grano) * 2.5);
  display: grid; gap: calc(var(--grano) * 1.5);
}
@media (min-width: 620px) { .demo-opciones { grid-template-columns: 1fr 1fr; } }

.demo-opcion {
  display: grid; grid-template-columns: auto 1fr; gap: calc(var(--grano) * 1.2);
  align-items: start;
  padding: calc(var(--grano) * 2);
  background: var(--tarjeta); color: var(--texto);
  border: 1.5px solid var(--tarjeta-borde); border-radius: 10px;
  cursor: pointer;
}
.demo-opcion:hover { border-color: var(--borde-3); }
.demo-opcion input { margin: .3rem 0 0; accent-color: var(--senal); width: 1.05rem; height: 1.05rem; }
.demo-opcion strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.demo-opcion span { display: block; margin-top: calc(var(--grano) * 0.6); color: var(--texto-2); font-size: 0.95rem; line-height: 1.45; }
.demo-opcion:has(input:checked) { border-color: var(--senal); }
.demo-opcion:has(input:focus-visible) { outline: 2px solid var(--senal); outline-offset: 2px; }

.demo-otra { margin-top: calc(var(--grano) * 1.5); font-size: 0.95rem; color: var(--texto-2); }
.demo-otra button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Paso 2: tres salidas, una por fila, con su explicación al lado. */
.demo-canales { margin-top: calc(var(--grano) * 2.5); display: grid; gap: calc(var(--grano) * 1.5); }
.demo-canal {
  display: grid; gap: calc(var(--grano) * 1);
  padding: calc(var(--grano) * 2);
  border: 1px solid var(--borde-2); border-radius: 10px;
}
@media (min-width: 620px) {
  .demo-canal { grid-template-columns: 15rem 1fr; align-items: center; gap: calc(var(--grano) * 2); }
}
.demo-canal .boton, .demo-canal .boton-fantasma { text-align: center; }
.demo-canal p { margin: 0; color: var(--texto-2); font-size: 0.95rem; }
/* .boton-fantasma nació para un <a> sobre fondo oscuro: en un <button> el
   navegador le pone su fondo y su letra, y acá va sobre papel. */
.demo-canal button.boton-fantasma { background: none; font: inherit; font-weight: 600; color: var(--texto); cursor: pointer; }
.demo-canal .boton-fantasma { border-color: var(--borde-3); }
.demo-canal .boton-fantasma:hover { border-color: var(--texto); background: none; }

.demo-elegido { margin-top: calc(var(--grano) * 1.5); font-size: 0.95rem; color: var(--texto-2); }
.demo-elegido:empty { display: none; }

/* Paso 3: los datos. Reusa .consulta de tamiz.css. */
.demo-datos { margin-top: calc(var(--grano) * 2.5); }
.demo-datos .consulta { margin-top: 0; }
.demo-datos .boton-fantasma { border-color: var(--borde-3); color: var(--texto); }

/* El resultado del envío sin JavaScript: la función redirige a #enviado o a
   #no-enviado, y sólo el aviso apuntado se ve. */
.demo-aviso {
  display: none;
  margin-top: calc(var(--grano) * 3);
  padding: calc(var(--grano) * 1.5) calc(var(--grano) * 2);
  border: 1.5px solid var(--borde-3); border-radius: 10px;
  font-weight: 700;
  scroll-margin-top: calc(var(--grano) * 8);
}
.demo-aviso:target, .demo-aviso.visible { display: block; }
.demo-aviso.mal { border-color: var(--senal); }
.demo-aviso a { color: inherit; }

.demo-despues { margin-top: calc(var(--grano) * 6); }