/* =====================================================================
   prueba.css: periodo de prueba (prueba.html): qué significa y el
   cuestionario de errores, mejoras e ideas. Los colores salen de web.css.
   ===================================================================== */

/* Ancho máximo del contenido; lo usan también la cabecera y el pie de web.css. */
.pagina-prueba{--ancho-pagina:880px}

/* ---------- Encabezado ---------- */
.prueba-encabezado{max-width:880px;margin:0 auto;padding:56px 24px 0}
.prueba-chapa{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--tarjeta-ambar);
  box-shadow:inset 0 0 0 1px rgba(232,161,58,.35);font-size:14px;font-weight:600;color:var(--ambar-texto)}
.prueba-punto{width:8px;height:8px;border-radius:50%;background:var(--naranja)}
.prueba-titulo{font-family:'Archivo',sans-serif;font-size:clamp(34px,5.4vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:18px 0 0;text-wrap:balance}
.palabra-clave{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.1em;line-height:.9;letter-spacing:-.01em;color:var(--naranja);white-space:nowrap}
.prueba-intro{font-size:18px;line-height:1.6;color:rgba(var(--tinta-rgb),.68);margin:16px 0 0;max-width:36em;text-wrap:pretty}

.prueba-puntos{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 28px}
.prueba-puntos li{padding-top:14px;border-top:1px solid rgba(var(--tinta-rgb),.12);font-size:15px;line-height:1.5;color:rgba(var(--tinta-rgb),.68)}
.prueba-puntos b{display:block;color:var(--tinta);font-weight:600;margin-bottom:2px}

/* ---------- Cuestionario: marco fino y tarjeta dentro, como las tarjetas de la portada ---------- */
.prueba-cuerpo{max-width:880px;margin:0 auto;padding:40px 24px 0}
.cuestionario-marco{background:rgba(var(--tinta-rgb),.045);border:1px solid rgba(var(--tinta-rgb),.06);border-radius:28px;padding:7px}
.cuestionario{background:var(--tarjeta);border-radius:22px;padding:32px;box-shadow:inset 0 1px 1px var(--filo-cristal)}
@media (max-width:520px){.cuestionario{padding:22px 18px}}
.cuestionario-titulo{font-family:'Archivo',sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0}
.cuestionario-formulario{display:flex;flex-direction:column;gap:22px}
.cuestionario-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}

.pregunta-cuestionario{display:flex;flex-direction:column;gap:9px;min-width:0}
.pregunta-etiqueta{font-size:15px;font-weight:600;color:var(--tinta)}
.opcional{font-weight:400;color:rgba(var(--tinta-rgb),.6)}
.campo-cuestionario{border:1px solid rgba(var(--tinta-rgb),.18);border-radius:14px;padding:13px 14px;font:inherit;font-size:16px;color:var(--tinta);background:var(--campo);outline:none;width:100%;box-sizing:border-box}
.campo-cuestionario:focus{border-color:var(--ambar-texto);box-shadow:0 0 0 3px rgba(232,161,58,.2)}
textarea.campo-cuestionario{resize:vertical;line-height:1.5;min-height:120px}

/* Botones de opción (una sola elegida, aria-pressed). */
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(var(--tinta-rgb),.06);color:var(--tinta);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background 300ms var(--curva),color 300ms var(--curva)}
.opcion:hover{background:rgba(var(--tinta-rgb),.1)}
.opcion[aria-pressed="true"]{background:var(--boton-fondo);color:var(--boton-texto)}
.opcion:focus-visible,.cuestionario-enviar:focus-visible,.cuestionario-otro:focus-visible{outline:3px solid rgba(232,161,58,.6);outline-offset:2px}
.opciones-nota .opcion{width:48px;padding:0}

.cuestionario-error{font-size:14px;color:var(--error-texto);min-height:1.3em;margin-bottom:-10px}
.cuestionario-enviar{border:none;width:100%;font:inherit;font-size:17px;font-weight:600;padding:16px;border-radius:999px;cursor:pointer;
  color:#17181A;background:var(--naranja);transition:filter 400ms var(--curva)}
.cuestionario-enviar:hover{filter:brightness(.95)}
.cuestionario-enviar.enviando{opacity:.6;cursor:progress}
.cuestionario-legal{margin:-8px 0 0;font-size:13px;line-height:1.5;color:rgba(var(--tinta-rgb),.66);text-align:center}

/* Confirmación tras enviar. */
.cuestionario-enviado{padding:6px 0}
.cuestionario-enviado-titulo{font-family:'Archivo',sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em}
.cuestionario-enviado-texto{font-size:16px;line-height:1.55;color:rgba(var(--tinta-rgb),.7);margin:8px 0 0;max-width:34em}
.cuestionario-otro{margin-top:20px;border:none;background:rgba(var(--tinta-rgb),.07);color:var(--tinta);font:inherit;font-size:15px;font-weight:600;padding:12px 20px;border-radius:999px;cursor:pointer}