/* La pantalla del buzón (D-66). Casi todo viene de `tokens.css`: aquí solo la
   columna, los dos campos y el aviso. Ninguna letra baja de 1rem. */
main { max-width: 34rem; margin: 0 auto; padding: var(--s-4) var(--s-3) var(--s-6); }
.buzon-clave { font-size: 1rem; margin: 0 0 var(--s-4); }
h1 { font-size: 1.6rem; margin: 0 0 var(--s-2); }
.buzon-pregunta { font-size: 1.1rem; font-weight: 700; margin: 0 0 var(--s-3); }
.buzon-quien { font-size: 1rem; color: var(--tinta-suave); margin: 0 0 var(--s-4); }
form { display: flex; flex-direction: column; gap: var(--s-3); }
#idea, #contacto {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
  padding: var(--s-3); border: 1.5px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
}
#idea { min-height: 9rem; resize: vertical; }
label[for="contacto"] { font-size: 1rem; }
#aviso { font-size: 1.1rem; font-weight: 700; margin: var(--s-4) 0 0; }

/* Lo que se lee con un lector de pantalla y no con los ojos (de `director.css`:
   el textarea tiene etiqueta, pero encima lleva ya la pregunta en grande). */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}