/* ══════════════════════════════════════════════════════════════════════════
   EL AVISO DE CORREO · documento 70 de Fran (8 sep 2026)
   ══════════════════════════════════════════════════════════════════════════

   VA EN SU PROPIO FICHERO A PROPOSITO, y no dentro de `estilos.css`. Vivio
   detras de la valla de solo-pruebas mientras Fran lo revisaba, y con las reglas
   mezcladas en la hoja comun sacarlo —o volver a esconderlo— seria recortar
   dentro de un fichero compartido, que es justo donde se cuela el fallo
   silencioso. Asi sigue siendo un fichero y un bloque.

   LO QUE NO SE REPITE. El velo, la tarjeta, la equis y el bloqueo del scroll
   ya existen en `estilos.css` (`.modal-ov`, `.modal`, `.modal.mini`,
   `.aviso-ov`, `body.noscroll`), montados para el aviso de la apertura de la
   prueba. Aqui solo esta lo que no existia: el formulario de dentro y la
   pastilla.

   EL CUERPO A 17 px, y no es una preferencia. Documento 70 §7: el publico del
   Metodo va de los 40 a los 80 anos. La hoja mide en `rem` sobre un `html` al
   106,25 %, asi que 1rem = 17 px y por eso aqui se escribe en `rem`.  */

/* ── el formulario de dentro ────────────────────────────────────────────── */

.nov-campo{
  width:100%;
  border:1px solid #cfc5b0;
  background:#fff;
  border-radius:10px;
  padding:15px 17px;
  font-family:inherit;
  font-size:1rem;
  color:var(--txt);
  margin-bottom:12px;
}
.nov-campo::placeholder{color:#a49b89}
.nov-campo:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}

/* 48 px de alto minimo (documento 70 §7): con 1rem de texto y 15px arriba y
   abajo salen 49. No se deja al azar del contenido — `min-height` lo fija. */
.nov-btn{
  width:100%;
  min-height:48px;
  background:var(--negro);
  color:#e8d9b4;
  border:none;
  border-radius:10px;
  padding:15px 18px;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
}
.nov-btn[disabled]{opacity:.62;cursor:default}

/* «Prefiero ir directo a los videos». Enlace, no boton con peso: la salida no
   puede competir visualmente con la accion, pero tampoco esconderse —
   documento 70 §6, la salida no culpabiliza y tiene que verse. */
.nov-salir{
  display:inline-block;
  margin-top:14px;
  min-height:48px;
  padding:12px 8px;
  background:none;
  border:none;
  font-family:inherit;
  font-size:.9rem;
  color:var(--txt-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.nov-legal{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line-l);
  font-size:.76rem;
  line-height:1.5;
  color:#8d8677;
}
.nov-legal a{color:#9a7b3d}
/* EL SENUELO. Se saca de la pantalla con posicion, NO con `display:none` ni
   `hidden`: un campo que el navegador no monta tampoco lo rellena un robot, y
   entonces no atrapa a nadie. Y `aria-hidden` mas `tabindex="-1"` en el HTML
   lo dejan fuera del alcance de quien lee la pantalla y de quien tabula. */
.nov-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nov-nota{
  min-height:1.2em;
  margin:0 0 4px;
  font-size:.82rem;
  color:#a03328;
}

/* ── la pastilla ────────────────────────────────────────────────────────── */
/*
   EL AREA SEGURA NO ES DECORACION (documento 70 §7). En un movil con barra
   inferior —o con el teclado recogido— una pastilla pegada a `bottom:0` queda
   debajo de la barra del navegador y no se puede pulsar. `env()` con un
   respaldo de 0 px: donde no exista, se comporta como si no estuviera.  */
.nov-pastilla{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:90;
  display:none;
  align-items:center;
  gap:9px;
  min-height:48px;
  background:var(--negro);
  color:#e8d9b4;
  border:1px solid var(--line-d);
  border-radius:60px;
  padding:12px 16px;
  font-family:inherit;
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.65);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s,transform .3s;
}
.nov-pastilla.on{display:flex;opacity:1;transform:none}
.nov-pastilla svg{width:18px;height:18px;flex:none;stroke:var(--dorado2);fill:none}

/* La equis vive DENTRO del boton, asi que no puede ser otro `<button>`
   (anidarlos es HTML invalido y el navegador desanida el interior, sacandolo
   del flujo). Es un `<span>` con `role="button"` y su propio manejador, que
   para el clic antes de que llegue al padre. */
.nov-pastilla .cierra{
  margin-left:2px;
  width:26px;
  height:26px;
  flex:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  line-height:1;
  color:#a89e8b;
  cursor:pointer;
}
.nov-pastilla .cierra:hover{color:#e8d9b4}
.nov-pastilla:focus-visible,
.nov-pastilla .cierra:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}

/* ── el enlace del pie ──────────────────────────────────────────────────── */
/* Va junto a los tres legales y se comporta como ellos: es la via de vuelta
   que queda cuando alguien ha cerrado tambien la pastilla. */
.nov-pie{
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:inherit;
  color:#b3a894;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.nov-pie:hover{color:var(--dorado2)}
.nov-pie:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}

@media (max-width:820px){
  /* En movil solo «Avisame» (documento 70 §2). El texto largo hace que la
     pastilla ocupe media pantalla justo donde esta el pulgar. */
  .nov-pastilla .larga{display:none}
}
@media (min-width:821px){
  .nov-pastilla .corta{display:none}
}
@media (prefers-reduced-motion: reduce){
  .nov-pastilla{transition:none}
}