/* ==========================================================
   marca-agua.css — formularios que se ven pero no se rellenan
   ==========================================================
   Conecta y Contrata todavía no existen. Sus formularios largos
   —19 y 10 campos— seguían pidiendo nicho, disponibilidad, tarifas
   y presupuesto para un producto que abre en 2027.

   POR QUÉ NO SE BORRAN
   Enseñan lo que viene, y eso vende. Lo que no puede pasar es que
   alguien los rellene: esos datos caducan antes de que sirvan, y un
   formulario largo se lee como «estoy creando mi perfil» cuando no
   lo está creando.

   ASÍ QUE: se ven detrás del agua, no se pueden tocar, y encima va
   un aviso con el único botón que sí funciona — el registro de
   verdad, que pide email y línea y nada más.
   ========================================================== */

.enagua {
  position: relative;
  isolation: isolate;
}

/* El formulario, atenuado y fuera de juego.
   `inert` en el HTML es lo que de verdad lo desactiva —también para
   el teclado y los lectores de pantalla—; esto es solo lo que se ve. */
.enagua > .enagua-fondo {
  filter: blur(2.5px) saturate(.55);
  opacity: .38;
  pointer-events: none;
  user-select: none;
  transform: scale(.995);
  transition: none;
}

/* El aviso: centrado, legible, y no tapa del todo lo de detrás
   para que se siga intuyendo que ahí hay algo real. */
.enagua-nota {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: .75rem;
}
.enagua-caja {
  max-width: 30rem;
  background: rgba(31, 10, 31, .82);
  border: 1px solid rgba(233, 220, 126, .3);
  border-radius: 18px;
  padding: 1.9rem 1.7rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
}
.enagua-k {
  display: inline-block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #E9DC7E;
  border: 1px solid rgba(233, 220, 126, .38);
  border-radius: 999px;
  padding: .3rem .8rem;
  margin-bottom: .95rem;
}
.enagua-caja h3 {
  margin: 0 0 .55rem;
  font-family: "Fraunces", "FrauncesRespaldo", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: #F7F3F8;
  text-wrap: balance;
}
.enagua-caja p {
  margin: 0 0 1.3rem;
  font-size: .93rem;
  line-height: 1.6;
  color: #C9B8CC;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.enagua-caja .enagua-cta {
  display: inline-block;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: .95rem;
  color: #2E102D;
  background: linear-gradient(100deg, #C2B65C, #D16E72);
  transition: transform .15s ease;
}
.enagua-caja .enagua-cta:hover { transform: translateY(-2px); }
.enagua-caja .enagua-pie {
  margin: .9rem 0 0;
  font-size: .78rem;
  color: #9C8FA0;
}

/* En móvil el formulario de detrás es altísimo y el aviso quedaría
   flotando en mitad de la nada. Se pega arriba, que es donde mira. */
@media (max-width: 720px) {
  .enagua-nota { align-items: stretch; justify-content: flex-start; padding-top: 2.2rem; }
  .enagua-caja { padding: 1.5rem 1.2rem; }
  .enagua > .enagua-fondo { max-height: 78svh; overflow: hidden; }
}

/* Quien prefiere menos movimiento tampoco necesita el desenfoque:
   con la opacidad y el aviso se entiende igual. */
@media (prefers-reduced-motion: reduce) {
  .enagua > .enagua-fondo { filter: none; opacity: .28; }
}