/* Diagnóstico del sitio web: formulario por pasos y animación del análisis.
   Usa las variables del kit (kit.css). Solo se carga en las páginas del diagnóstico. */

.portada--diagnostico .portada__texto { max-width: 52rem; }
.diag { max-width: 52rem; margin-top: var(--e-4); padding: var(--e-3); }
@media (min-width: 48rem) { .diag { padding: var(--e-4); } }
.diag__paso { animation: diag-entrar 450ms var(--curva); }
.diag__paso[hidden] { display: none !important; }   /* .formulario usa display: grid */
.diag__paso.formulario { grid-template-columns: minmax(0, 1fr); }   /* sin esto, el ancho natural del campo ensancha la rejilla en celular */
@keyframes diag-entrar { from { opacity: 0; transform: translateY(10px); } }

/* Paso 1: la dirección del sitio, en grande */
.diag__etiqueta { display: block; margin-bottom: var(--e-2); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); font-weight: 900; line-height: 1.2; }
.diag__barra {
  display: flex; align-items: center;
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  border: 2px solid rgb(229 240 254 / 0.35); border-radius: 10px;
  background: rgb(229 240 254 / 0.06);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.diag__barra:focus-within { border-color: var(--c-acento); box-shadow: 0 0 0 4px rgb(14 122 232 / 0.3); }
.diag__barra[aria-invalid="true"] { border-color: var(--c-alerta-oscuro); }
.diag__prefijo { font-family: var(--f-dato); font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem); opacity: 0.6; user-select: none; }
.diag__sitio {
  flex: 1; min-width: 0; padding: 0.9rem 0.4rem;
  border: 0; background: transparent; color: var(--c-claro);
  font: 700 clamp(1.15rem, 0.9rem + 1.6vw, 1.9rem) var(--f-base);
}
.diag__sitio::placeholder { color: rgb(229 240 254 / 0.4); font-weight: 400; }
.diag__sitio:focus { outline: none; }
.diag__casillas { display: grid; gap: var(--e-1); margin: var(--e-3) 0; }
.boton--grande { min-height: 3.6rem; padding: 0.9rem 2rem; font-size: 1.25rem; }
@media (max-width: 39.99rem) { .boton--grande { width: 100%; } }
.diag__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: var(--e-2); font-family: var(--f-dato); font-size: 0.95rem; }
.diag__resumen strong { color: var(--c-claro); font-size: 1.05rem; }
.diag__aviso { margin: 0; padding: 0.75rem 1rem; border-left: 3px solid var(--c-acento); background: rgb(14 122 232 / 0.12); font-size: 0.95rem; }
.diag .boton-texto { font-weight: 400; color: var(--c-claro); opacity: 0.85; }

/* Paso 3: análisis en curso */
.escaner { width: min(100%, 24rem); margin: 0 auto var(--e-3); }
.escaner svg { width: 100%; height: auto; overflow: visible; }
.escaner .marco { fill: rgb(229 240 254 / 0.05); stroke: rgb(229 240 254 / 0.45); stroke-width: 1.5; }
.escaner .barra-nav { fill: rgb(229 240 254 / 0.08); }
.escaner .punto { fill: rgb(229 240 254 / 0.45); }
.escaner .bloque { fill: rgb(229 240 254 / 0.16); animation: diag-leer 2.4s ease-in-out infinite; }
.escaner .bloque:nth-of-type(2) { animation-delay: 0.3s; }
.escaner .bloque:nth-of-type(3) { animation-delay: 0.6s; }
.escaner .bloque:nth-of-type(4) { animation-delay: 0.9s; }
.escaner .bloque:nth-of-type(5) { animation-delay: 1.2s; }
.escaner .bloque:nth-of-type(6) { animation-delay: 1.5s; }
@keyframes diag-leer { 0%, 100% { fill: rgb(229 240 254 / 0.12); } 40% { fill: rgb(14 122 232 / 0.55); } }
.escaner .haz { animation: diag-escanear 2.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.escaner .haz-luz { fill: rgb(14 122 232 / 0.16); }
.escaner .haz-linea { fill: var(--c-acento); }
@keyframes diag-escanear { from { transform: translateY(0); } to { transform: translateY(104px); } }
.escaner .pista { fill: none; stroke: var(--c-acento); stroke-width: 1.5; stroke-dasharray: 4 9; opacity: 0.7; animation: diag-datos 1.2s linear infinite; }
@keyframes diag-datos { to { stroke-dashoffset: -26; } }
.escaner .nodo { fill: var(--c-oscuro); stroke: var(--c-acento); stroke-width: 2; }
.escaner .nodo-centro { fill: var(--c-acento); }
.escaner .pulso { fill: none; stroke: var(--c-acento); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: diag-pulso 2s ease-out infinite; }
.escaner .pulso:nth-of-type(2) { animation-delay: 1s; }
@keyframes diag-pulso { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.6); opacity: 0; } }
.escaner .chispa { fill: var(--c-alerta-oscuro); animation: diag-chispa 1.6s steps(2) infinite; }
@keyframes diag-chispa { 50% { opacity: 0.2; } }

.registro { list-style: none; margin: 0 0 var(--e-2); padding: 0; min-height: 7.5rem; font-family: var(--f-dato); font-size: 0.9rem; }
.registro li { display: flex; gap: 0.6rem; padding: 0.2rem 0; opacity: 0.6; }
.registro li::before { content: "·"; width: 1rem; flex: none; text-align: center; }
.registro li.hecho::before { content: "✓"; color: var(--c-acento); }
.registro li.actual { opacity: 1; }
.registro li.actual::before { content: "›"; color: var(--c-alerta-oscuro); }
.registro li.actual::after { content: "▍"; margin-left: 0.15rem; animation: diag-cursor 1s steps(2) infinite; }
@keyframes diag-cursor { 50% { opacity: 0; } }
.progreso { display: flex; align-items: center; gap: var(--e-2); }
.progreso__pista { flex: 1; height: 8px; border-radius: 4px; background: rgb(229 240 254 / 0.15); overflow: hidden; }
.progreso__barra { width: 0; height: 100%; border-radius: 4px; background: var(--c-acento); transition: width 700ms var(--curva); }
.progreso__dato { min-width: 3.5rem; margin: 0; font-family: var(--f-dato); text-align: right; }

/* Pasos 4 y 5: listo y enviado */
.diag__listo-icono { width: 4rem; height: 4rem; margin-bottom: var(--e-2); color: var(--c-acento); }
.diag__listo-icono circle, .diag__listo-icono path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.diag__listo-icono circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: diag-trazo 700ms var(--curva) forwards; }
.diag__listo-icono path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: diag-trazo 400ms 550ms var(--curva) forwards; }
@keyframes diag-trazo { to { stroke-dashoffset: 0; } }
.diag h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: var(--e-1); }

@media (prefers-reduced-motion: reduce) {
  .escaner .bloque, .escaner .haz, .escaner .pista, .escaner .pulso, .escaner .chispa, .registro li.actual::after { animation: none !important; }
  .diag__listo-icono circle, .diag__listo-icono path { stroke-dashoffset: 0; animation: none !important; }
}

.diag__lista { display: grid; gap: 0.25rem var(--e-3); max-width: 52rem; margin-top: var(--e-3); }
@media (min-width: 48rem) { .diag__lista { grid-template-columns: 1fr 1fr; } }