/* =========================================================================
   6-voluntarios.css — el panel de "Quiero impactar"
   -------------------------------------------------------------------------
   QUÉ ES ESTE ARCHIVO
   El estilo del formulario de voluntariado: el panel que se abre encima de
   la página, sus tres pasos, las tarjetas de opción y la pantalla de "listo".

   POR QUÉ VA EN UN ARCHIVO APARTE Y NO EN 3-componentes.css
   Ese archivo ya pasa de 670 líneas y describe las secciones de la página.
   Esto es otra cosa: una pieza que se abre ENCIMA de cualquier sección. Un
   archivo propio hace que se pueda leer entero de una sentada, y el día que
   el formulario se mueva a otra página se lleva su estilo con él.

   TODAS LAS CLASES EMPIEZAN CON .vol
   Es la misma regla de disciplina de 3-componentes.css: en CSS normal no hay
   nada que impida que un estilo de aquí se meta en otra sección. El prefijo
   lo impide a mano. Si escribes una regla nueva y no empieza con .vol, está
   mal puesta.

   ÍNDICE
     1. El panel y su fondo
     2. La cabecera con la barra de progreso
     3. Los pasos y los campos
     4. Las tarjetas de opción (ocupación y actividades)
     5. El pie con los botones
     6. Errores
     7. La pantalla de "listo"
     8. Sin JavaScript
   ========================================================================= */


/* =========================================================================
   1. EL PANEL Y SU FONDO
   -------------------------------------------------------------------------
   Es un `popover` del navegador, igual que el menú de celular. Eso da gratis
   el fondo oscurecido (::backdrop), la capa por encima de todo lo demás sin
   pelear con z-index, y el botón de cerrar sin JavaScript.

   Es `popover="manual"` y NO `popover="auto"` a propósito: un popover
   automático se cierra al tocar fuera, y aquí eso significaría perder un
   formulario a medio llenar por un dedo mal puesto. Manual solo se cierra
   con su botón (o con Escape, que lo añade el JavaScript preguntando antes).

   Medidas: en celular ocupa casi toda la pantalla, porque un formulario de
   tres pasos en una ventanita pequeña se siente estrecho. En escritorio se
   queda en 640 px, que es el ancho cómodo para leer una etiqueta y su campo.
   ========================================================================= */
.vol{
  /* `inset:0` + `margin:auto` centra el panel sin transformaciones. El
     navegador coloca los popover en la "capa superior", así que no hace
     falta position:fixed ni z-index. */
  inset:0; margin:auto;
  width:min(100%,640px);
  max-height:100dvh;              /* dvh, no vh: en celular descuenta la barra
                                     del navegador, que en vh no se descuenta
                                     y deja el pie del panel fuera de vista */
  border:none; border-radius:0;
  padding:0;
  background:var(--papel);
  color:var(--tinta);
  box-shadow:0 24px 70px -20px rgba(16,32,43,.55);
  overflow:hidden;
  /* Rejilla de tres franjas: cabecera fija, cuerpo que se desplaza, pie fijo.
     `1fr` en medio es lo que hace que solo el cuerpo tenga barra de scroll.

     ⚠ OJO CON `display` EN UN POPOVER — este error cuesta una tarde.
     El navegador esconde un popover cerrado con su propia regla
     `[popover]:not(:popover-open){display:none}`. Pero esa regla es del
     NAVEGADOR, y cualquier regla que escribamos nosotros le gana. Si aquí
     pusiéramos `display:grid`, el panel dejaría de esconderse: se quedaría
     en la página, invisible por la opacidad pero ocupando su lugar y
     tapando los clics de lo que tuviera debajo.
     Por eso `display` se declara ABAJO, solo en :popover-open. */
  grid-template-rows:auto 1fr auto;
}
@media(min-width:700px){
  .vol{ max-height:min(92dvh,860px); border-radius:calc(var(--radio) * 2) }
}

.vol::backdrop{
  background:rgba(16,32,43,.55);
  backdrop-filter:blur(3px);
}

/* La animación de entrada. `@starting-style` es la forma nativa de decir
   "desde dónde empieza": sin él, un elemento que acaba de aparecer no tiene
   estado anterior desde el cual animar y el navegador lo pinta de golpe. */
.vol{
  opacity:0; translate:0 14px;
  transition:opacity var(--transicion) var(--curva),
             translate var(--transicion) var(--curva),
             overlay var(--transicion) allow-discrete,
             display var(--transicion) allow-discrete;
}
.vol:popover-open{ display:grid; opacity:1; translate:0 0 }
@starting-style{ .vol:popover-open{ opacity:0; translate:0 14px } }
@media(prefers-reduced-motion:reduce){ .vol{transition:none} }


/* =========================================================================
   2. LA CABECERA CON LA BARRA DE PROGRESO
   -------------------------------------------------------------------------
   La barra no es decoración: contesta la pregunta que hace que la gente
   abandone un formulario, que es "¿cuánto falta?". Un formulario de tres
   pasos con barra se termina más que el mismo formulario sin ella.
   ========================================================================= */
.vol-cabeza{
  padding:1.15rem 1.25rem .9rem;
  border-bottom:1px solid var(--linea);
  background:var(--papel);
}
.vol-cabeza-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.vol-titulo{font-size:1.05rem;font-weight:900;letter-spacing:-.02em}
.vol-paso-num{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-50);
}
.vol-cerrar{
  display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;
  border:none;background:transparent;border-radius:var(--radio);
  color:var(--tinta-70);cursor:pointer;
}
.vol-cerrar:hover{background:var(--papel-2);color:var(--tinta)}

/* El riel gris y la barra de color encima. El ancho lo escribe el JavaScript
   en `style.width`; aquí solo se define cómo se ve y cómo se mueve. */
.vol-riel{
  margin-top:.85rem;height:5px;border-radius:99px;
  background:var(--linea);overflow:hidden;
}
.vol-barra{
  display:block;height:100%;width:33.33%;border-radius:99px;
  background:linear-gradient(90deg,var(--cc-amarillo),var(--cc-rojo));
  transition:width var(--transicion) var(--curva);
}
@media(prefers-reduced-motion:reduce){ .vol-barra{transition:none} }


/* =========================================================================
   3. LOS PASOS Y LOS CAMPOS
   ========================================================================= */
/* ⚠ LAS TRES LÍNEAS QUE HACEN QUE EL PANEL SE PUEDA DESPLAZAR.
   Sin ellas el formulario se sale de la pantalla y el botón de enviar queda
   abajo, fuera de vista, imposible de tocar. Pasó el 3 de septiembre.

   `min-height:0` es la que arregla el problema, y es de las cosas más raras
   del CSS. Este cuerpo es la franja `1fr` de la rejilla del panel, o sea "lo
   que sobre". Pero una franja de rejilla trae de fábrica `min-height:auto`,
   que significa "nunca te encojas por debajo de tu contenido". Las dos reglas
   se contradicen y gana la segunda: la franja crece con el formulario, el
   panel se pasa de alto, el `overflow:hidden` de arriba le corta el pie, y
   `overflow-y:auto` no sirve de nada porque el cuerpo nunca fue más alto que
   su caja. `min-height:0` le quita ese suelo y entonces sí se encoge y
   aparece la barra de desplazamiento donde debe estar.

   `overscroll-behavior:contain` es lo otro que se notaba: al llegar al final
   del formulario, la rueda del ratón "saltaba" a la página de atrás y se
   movía el fondo en vez del panel. A eso se le llama encadenamiento del
   desplazamiento, y `contain` lo corta. */
.vol-cuerpo{
  overflow-y:auto;
  min-height:0;
  overscroll-behavior:contain;
  padding:1.35rem 1.25rem 1.5rem;
}

/* Cada paso es un <fieldset>. Se le quitan el borde y el relleno que el
   navegador les pone de fábrica, que son de 1996 y no combinan con nada. */
.vol-paso{border:none;padding:0;margin:0}
.vol-paso[hidden]{display:none}

/* <legend> es el título del grupo de campos. Los lectores de pantalla lo
   anuncian antes de cada campo del grupo, así que es la etiqueta que da
   contexto a todo el paso. Por eso se usa en vez de un <h3> suelto. */
.vol-paso legend{
  font-size:var(--t-2);font-weight:900;letter-spacing:-.03em;line-height:1.15;
  padding:0;margin-bottom:.4rem;
}
.vol-paso .vol-ayuda{color:var(--tinta-70);font-size:.95rem;line-height:1.55;margin-bottom:1.25rem}

.vol-campos{display:grid;gap:1.05rem}
@media(min-width:560px){ .vol-campos--par{grid-template-columns:1fr 1fr} }

.vol-campo{display:flex;flex-direction:column;gap:.4rem}
.vol-campo > span{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-50);
}
.vol-campo .vol-pista{
  font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--tinta-50);
}
.vol-campo input,
.vol-campo select{
  font-family:inherit;font-size:1.02rem;color:var(--tinta);
  padding:.85rem .9rem;min-height:52px;   /* 52px: cómodo para un pulgar */
  border:2px solid var(--linea-fuerte);border-radius:var(--radio);
  background:var(--papel);
  transition:border-color var(--micro),box-shadow var(--micro);
}
.vol-campo input:focus,
.vol-campo select:focus{
  outline:none;
  border-color:var(--cc-azul);
  box-shadow:0 0 0 4px rgba(17,92,144,.16);
}
/* :user-invalid, no :invalid. `:invalid` marca en rojo un campo vacío desde
   el primer instante, antes de que la persona haya escrito nada, y eso se
   siente como un regaño injusto. `:user-invalid` solo marca después de que
   la persona interactuó con el campo y lo dejó mal. */
.vol-campo input:user-invalid{border-color:var(--cc-rojo-accion)}


/* =========================================================================
   4. LAS TARJETAS DE OPCIÓN
   -------------------------------------------------------------------------
   Ocupación y actividades no son menús desplegables: son tarjetas que se
   tocan. Un <select> en celular abre una rueda que tapa la pantalla y esconde
   las opciones; con seis opciones a la vista se elige más rápido y se ve todo.

   EL TRUCO, QUE ES EL MISMO EN LOS DOS CASOS
   El <input type="radio"> o <input type="checkbox"> real sigue ahí, dentro
   del <label>, pero se esconde con `appearance:none` y tamaño cero. El
   navegador conserva TODO su comportamiento —teclado, formulario, lectores
   de pantalla— y nosotros pintamos la tarjeta con `:checked + span`.

   Lo que NO se hace: `display:none` en el input. Eso lo saca del recorrido
   del teclado y del árbol de accesibilidad, y el formulario deja de poder
   llenarse sin ratón.
   ========================================================================= */
.vol-opciones{
  display:grid;gap:.6rem;border:none;padding:0;margin:0;
}
@media(min-width:520px){ .vol-opciones{grid-template-columns:1fr 1fr} }

.vol-opcion{cursor:pointer;position:relative}
.vol-opcion input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  appearance:none;-webkit-appearance:none;
  border:none;background:none;cursor:pointer;
}
.vol-opcion .vol-cara{
  display:flex;align-items:flex-start;gap:.65rem;
  padding:.85rem .9rem;min-height:56px;
  border:2px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);
  transition:border-color var(--micro),background-color var(--micro),transform var(--micro) var(--curva);
  pointer-events:none;             /* los clics los recibe el input de encima */
}
.vol-opcion:hover .vol-cara{border-color:var(--linea-fuerte);transform:translateY(-1px)}

/* La marca redonda de la izquierda. Vacía cuando no está elegida; se llena
   con el color de la línea de trabajo cuando sí. */
.vol-opcion .vol-marca{
  flex-shrink:0;width:22px;height:22px;margin-top:1px;
  border:2px solid var(--linea-fuerte);border-radius:50%;
  display:grid;place-items:center;
  transition:border-color var(--micro),background-color var(--micro);
}
.vol-opcion .vol-marca svg{width:12px;height:12px;opacity:0;transition:opacity var(--micro)}

.vol-opcion .vol-etiqueta{font-weight:700;font-size:.98rem;line-height:1.35}
.vol-opcion .vol-nota{display:block;font-weight:500;font-size:.84rem;color:var(--tinta-50);margin-top:.15rem;line-height:1.4}

/* --c la escribe cada opción en su atributo style. Una sola regla sirve para
   las seis actividades y cada una se pinta de su color. */
.vol-opcion input:checked + .vol-cara{
  border-color:var(--c,var(--cc-azul));
  background:color-mix(in srgb, var(--c,var(--cc-azul)) 9%, white);
}
.vol-opcion input:checked + .vol-cara .vol-marca{
  border-color:var(--c,var(--cc-azul));
  background:var(--c,var(--cc-azul));
}
.vol-opcion input:checked + .vol-cara .vol-marca svg{opacity:1}

/* El anillo de foco tiene que verse en la TARJETA, no en el input invisible.
   :focus-visible = solo cuando se navega con teclado, no al hacer clic. */
.vol-opcion input:focus-visible + .vol-cara{
  outline:3px solid var(--cc-azul);outline-offset:2px;
}

/* El campo "¿cuál?" que aparece al elegir Otro. Nace con hidden. */
.vol-otro[hidden]{display:none}
.vol-otro{margin-top:.7rem}

/* La casilla del aviso de privacidad: una sola, a lo ancho, sin tarjeta. */
.vol-consentimiento{
  display:flex;gap:.7rem;align-items:flex-start;
  margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--linea);
  font-size:.9rem;color:var(--tinta-70);line-height:1.55;cursor:pointer;
}
.vol-consentimiento input{
  flex-shrink:0;width:22px;height:22px;margin-top:1px;accent-color:var(--cc-azul);cursor:pointer;
}
.vol-consentimiento a{color:var(--cc-azul);font-weight:700}


/* =========================================================================
   5. EL PIE CON LOS BOTONES
   -------------------------------------------------------------------------
   Va pegado abajo y no se desplaza con el contenido: el botón de avanzar
   siempre está a un pulgar de distancia, sin tener que buscarlo.
   ========================================================================= */
.vol-pie{
  display:flex;align-items:center;gap:.7rem;
  padding:.9rem 1.25rem;
  border-top:1px solid var(--linea);
  background:var(--papel-2);
}
.vol-pie .vol-crece{flex:1}
.vol-pie .btn{min-height:50px}
.vol-pie .btn[hidden]{display:none}

/* El botón de enviar, mientras se manda: se apaga y anuncia que está
   trabajando. Sin esto, la gente le da tres veces y se registra tres veces. */
.vol-pie .btn[aria-busy="true"]{opacity:.6;pointer-events:none}


/* =========================================================================
   6. ERRORES
   -------------------------------------------------------------------------
   role="alert" hace que un lector de pantalla lo lea EN CUANTO aparece, sin
   esperar a que la persona llegue ahí navegando. Es la diferencia entre
   enterarse del error y quedarse atorado sin saber por qué.
   ========================================================================= */
.vol-error{
  margin-top:1rem;padding:.8rem .95rem;
  border-left:4px solid var(--cc-rojo-accion);
  background:rgba(231,66,40,.08);
  color:var(--cc-rojo-accion);font-size:.92rem;font-weight:700;line-height:1.5;
  border-radius:0 var(--radio) var(--radio) 0;
}
.vol-error[hidden]{display:none}


/* =========================================================================
   7. LA PANTALLA DE "LISTO"
   -------------------------------------------------------------------------
   No dice "gracias" y ya. Repite lo que la persona eligió, porque el momento
   en que un formulario se siente recibido de verdad es cuando la respuesta
   demuestra que alguien leyó lo que pusiste.
   ========================================================================= */
.vol-listo{text-align:center;padding:1.5rem .5rem .5rem}
.vol-listo[hidden]{display:none}

.vol-listo .vol-palomita{
  width:74px;height:74px;margin:0 auto 1.25rem;
  display:grid;place-items:center;border-radius:50%;
  background:var(--cc-verde);color:#fff;
  animation:vol-brotar 520ms var(--curva) both;
}
.vol-listo .vol-palomita svg{width:36px;height:36px}
@keyframes vol-brotar{
  from{transform:scale(.3);opacity:0}
  60%{transform:scale(1.08)}
  to{transform:scale(1);opacity:1}
}
@media(prefers-reduced-motion:reduce){ .vol-listo .vol-palomita{animation:none} }

.vol-listo h3{font-size:var(--t-2);letter-spacing:-.03em;line-height:1.15}
.vol-listo .vol-texto{margin-top:.8rem;color:var(--tinta-70);font-size:1rem;line-height:1.6;max-width:44ch;margin-inline:auto}
.vol-listo .vol-texto b{color:var(--tinta)}

/* La tarjeta que imita el mensaje que va a llegar. Verde de WhatsApp por un
   lado y esquina cortada: se lee como una burbuja de chat sin serlo. */
.vol-listo .vol-mensaje{
  margin:1.35rem auto 0;max-width:42ch;text-align:left;
  padding:.95rem 1.05rem;
  background:var(--papel-2);border:1px solid var(--linea);
  border-left:4px solid var(--cc-verde);
  border-radius:0 var(--radio) var(--radio) 0;
  font-size:.94rem;line-height:1.6;color:var(--tinta-70);
}
.vol-listo .vol-mensaje .vol-de{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-50);margin-bottom:.4rem;
}

/* El mensaje se arma con saltos de línea de verdad ("\n"). En HTML, por
   omisión, todos los saltos y espacios seguidos se aplastan en un solo
   espacio: el mensaje se vería como un párrafo corrido. `pre-line` conserva
   los saltos que escribimos y sigue partiendo las líneas largas cuando no
   caben, que es exactamente lo que hace falta aquí. */
.vol-listo .vol-mensaje [data-vol-listo-vista]{white-space:pre-line}

/* -------------------------------------------------------------------------
   EL BOTÓN DE WHATSAPP DE RESPALDO

   Verde #128C7E y no el verde claro de WhatsApp (#25D366): con letras blancas
   encima, el claro da una relación de contraste de 2.2:1 y reprueba WCAG AA,
   que pide 4.5:1. El oscuro da 4.7:1 y se sigue leyendo como "WhatsApp".
   Es el mismo criterio del rojo de marca en el manual de identidad.
   ------------------------------------------------------------------------- */
.vol-listo .btn--wa{
  margin:1.35rem auto 0;background:#128C7E;color:#fff;
  box-shadow:0 6px 18px -8px rgba(18,140,126,.8);
}
.vol-listo .btn--wa:hover{background:#0f7368}
.vol-listo .btn--wa[hidden]{display:none}


/* =========================================================================
   7b. CUANDO LA PANTALLA SE QUEDA SIN ALTO  (el teclado del celular)
   -------------------------------------------------------------------------
   EL PROBLEMA, Y POR QUÉ NO SE VE EN LA COMPUTADORA

   Al tocar un campo en un celular sube el teclado y se come más o menos la
   mitad de la pantalla. El panel es una rejilla de tres franjas —cabecera,
   cuerpo, pie— y las de arriba y abajo miden lo mismo pase lo que pase: 100
   px la cabecera y 83 px el pie. Sumadas son 183 px FIJOS.

   Con la pantalla entera (664 px) eso no se nota: al formulario le quedan
   371, más de la mitad. Con el teclado abierto (unos 330 px) le quedan 147,
   y en un celular chico 77. El formulario se ve aplastado entre dos barras
   que ocupan más que él, y el campo donde estás escribiendo queda medio
   tapado por el pie.

   LA SOLUCIÓN: cuando hay poco alto, la cabecera y el pie adelgazan. No se
   quitan —el botón "Siguiente" y la barra de progreso siguen haciendo falta—
   pero dejan de cobrar el espacio de una pantalla completa.

   `max-height` en lugar de `max-width`: la consulta pregunta por el ALTO
   disponible, que es justo lo que cambia cuando sube el teclado. 560 px es
   el corte porque debajo de eso ya no cabe un campo con su etiqueta y su
   pista sin que se sienta apretado.

   ⚠ NO se toca el tamaño de los campos ni de los botones: siguen en 52 y 50
   px de alto. Encoger lo que se toca con el pulgar para ganar espacio es
   cambiar un problema por otro peor.
   ========================================================================= */
@media(max-height:560px){

  /* La cabecera: de 100 px a unos 62. El título baja de tamaño y se pone en
     el mismo renglón que el paso; la barra de progreso se pega más. */
  .vol-cabeza{padding:.6rem .9rem .55rem}
  .vol-titulo{font-size:.95rem}
  .vol-paso-num{font-size:.62rem;letter-spacing:.1em}
  .vol-cerrar{width:34px;height:34px}
  .vol-riel{margin-top:.5rem;height:4px}

  /* El cuerpo gana lo que sueltan los otros dos. */
  .vol-cuerpo{padding:.85rem .9rem 1rem}

  /* El título del paso deja de ocupar como un titular. */
  .vol-paso legend{font-size:1.15rem;margin-bottom:.25rem}

  /* El texto de ayuda es lo primero que sobra cuando no hay espacio: explica
     algo que ya se entiende viendo los campos. Se queda, pero pequeño. */
  .vol-paso .vol-ayuda{font-size:.85rem;line-height:1.4;margin-bottom:.8rem}

  .vol-campos{gap:.75rem}

  /* El pie: de 83 px a unos 62. El botón NO se encoge; lo que se quita es el
     relleno de alrededor. */
  .vol-pie{padding:.55rem .9rem}
}

/* Un celular en horizontal es el caso extremo: 360 px de alto o menos. Ahí
   la ayuda sí se esconde, porque la alternativa es que no se vea ni un campo
   completo. Lo que desaparece es texto explicativo, nunca un campo ni un
   botón. */
@media(max-height:400px){
  .vol-paso .vol-ayuda{display:none}
  .vol-paso legend{font-size:1.05rem}
  .vol-cabeza{padding:.45rem .9rem .45rem}
  .vol-cuerpo{padding:.7rem .9rem .8rem}
}


/* =========================================================================
   8. SIN JAVASCRIPT
   -------------------------------------------------------------------------
   El formulario funciona igual sin JavaScript: se ven los tres pasos uno
   debajo del otro y el navegador manda el formulario a api/voluntarios.php,
   que en ese caso contesta con una página de gracias en vez de con JSON.

   Estas reglas son las que hacen que eso se vea bien. Se aplican mientras la
   clase `js` NO esté puesta en <html>; el JavaScript la pone en su primera
   línea, así que si el archivo no cargó, se quedan puestas.
   ========================================================================= */
html:not(.js) .vol-pie .vol-solo-js{display:none}
html:not(.js) .vol-riel{display:none}
html:not(.js) .vol-paso-num{display:none}
/* Los pasos 2 y 3 nacen con el atributo `hidden` puesto en el HTML, para
   que con JavaScript no se vean ni un instante antes de que el asistente
   arranque. Sin JavaScript nadie se lo quita, así que se anula aquí: los
   tres pasos se ven seguidos, separados por una línea. */
html:not(.js) .vol-paso[hidden]{display:block}
html:not(.js) .vol-paso + .vol-paso{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
html:not(.js) .vol-otro{display:flex}

/* Una opción que ocupa las dos columnas. Se usa en "Donde más falte": no es
   una actividad más, es la que dice "confío en ustedes". */
.vol-opcion--ancha{grid-column:1/-1}


/* =========================================================================
   9. CONGELAR LA PÁGINA DE ATRÁS MIENTRAS EL PANEL ESTÁ ABIERTO
   -------------------------------------------------------------------------
   Un `popover` se pinta encima de todo, pero NO impide que la página de
   detrás se desplace. Con el formulario abierto, la rueda del ratón o el
   dedo movían el fondo y daba la sensación de que el formulario "no baja".

   La clase la pone y la quita 10-voluntarios.js. No se hace solo con CSS
   porque no existe un selector que diga "hay un popover abierto en la
   página"; :popover-open describe al panel, no a <html>.

   Sin JavaScript esta regla no se aplica nunca, y está bien: en ese caso el
   panel enseña los tres pasos seguidos y que la página de atrás se mueva es
   lo de menos.
   ========================================================================= */
html.vol-abierto,
html.vol-abierto body{overflow:hidden}

/* Texto que solo existe para los lectores de pantalla.
   No se usa `display:none` ni `visibility:hidden`: eso lo borra también para
   ellos. La receta de abajo lo saca de la vista sin sacarlo de la página. Es
   la que se usa aquí en los <legend> de los grupos de opciones, cuyo título
   ya está escrito arriba en letra grande y repetirlo se vería mal. */
.vol-oculto{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}