/* eventos-ucm — encuesta de novatos (encuesta/index.html)

   La página no reutiliza la plantilla "pase de acceso": aquí no hay afiche ni
   programación, solo un campo. La imagen es arquitectónica y sale del propio
   asunto de la encuesta —identidad, misión y servicio en una universidad
   católica—: la página es un muro y el formulario es la abertura. Un arco
   rebajado sube desde el borde inferior con un filete dorado, y todo lo que no
   sea eso se mantiene en silencio.

   Los tokens viven aquí y no en :root de base.css porque son de esta página:
   ninguna otra usa esta paleta. */

.portal {
  --lapis: #16255c;
  --lapis-hondo: #0d173b;
  --luz: #eceff6;
  --oro: #c2872f;
  --tinta: #101a3c;
  --tinta-suave: #4a5578;
  --carmin: #8e2437;

  --columna: 26rem;

  /* Toda la medida vertical cuelga de estas tres variables, y las tres miran
     el alto de la ventana. El objetivo es que la página quepa entera sin
     scroll: en un monitor alto el arco es de medio punto y el aire es amplio;
     en un portátil bajo el arco se rebaja y el ritmo se comprime, en vez de
     empujar el botón fuera de pantalla. Sin esto haría falta una escalera de
     breakpoints por alto. */
  --aire: clamp(0.625rem, 2vh, 1.125rem);
  --muro: clamp(3rem, 9.5vh, 5.25rem);
  --marca-alto: clamp(1.875rem, 4.6vh, 2.75rem);

  /* Altura a la que aspira el tímpano. Para que el arco sea de medio punto
     tiene que valer la mitad del ancho del vano: 13rem es la mitad de
     --columna (si cambia una, cambia la otra) y 50vw menos el aire lateral
     cubre las pantallas donde el vano no llega a esa medida.
     Es una aspiración, no una imposición: ver .arco__timpano. */
  --curva: min(13rem, 50vw - 20px);

  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  /* La franja de arriba es muro a la vista: ahí va la marca. */
  padding: var(--muro) 20px 0;
  background: var(--lapis);
  color: var(--tinta);
}

/* El muro lleva la institución; la abertura, la tarea. */
.portal__marca {
  position: absolute;
  /* Centrada en la franja de muro, que cambia de alto con la ventana. */
  top: calc((var(--muro) - var(--marca-alto)) / 2);
  left: max(28px, calc(50vw - 32rem));
}

.portal__marca img {
  height: var(--marca-alto);
  width: auto;
}

/* El vano llega siempre al borde inferior de la pantalla y nunca lo pasa: el
   alto máximo lo fija la ventana, y el tímpano es el único que puede encoger. */
.arco {
  display: flex;
  flex-direction: column;
  width: min(var(--columna), 100%);
  max-height: calc(100svh - var(--muro));
}

/* El tímpano es el arco. Su curva se define contra su propia caja (100% del
   alto), así que sigue siendo tangente al muro aunque cambie de altura: con
   sitio de sobra mide --curva y el arco es de medio punto; en una pantalla
   baja cede lo que haga falta y queda un arco rebajado, en vez de empujar el
   botón fuera de la ventana. Encoge solo él porque el cuerpo no cede.
   Así el ajuste lo hace el propio layout: no hay que estimar cuánto ocupa el
   contenido ni mantener una escalera de breakpoints por alto. */
.arco__timpano {
  flex: 0 1 var(--curva);
  min-height: 2.5rem;
  border: 2px solid var(--oro);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--luz);
}

/* Crece para que la luz llegue al borde inferior, pero no cede nunca: el que
   cede es el tímpano. */
.arco__cuerpo {
  flex: 1 0 auto;
  /* El píxel de solape evita que asome una línea de muro entre las dos cajas
     cuando el alto del tímpano cae en una fracción de píxel. */
  margin-top: -1px;
  padding: calc(var(--aire) * 1.2 + 1px) 2.5rem calc(var(--aire) * 1.8);
  border-left: 2px solid var(--oro);
  border-right: 2px solid var(--oro);
  background: var(--luz);
}

/* --- Tipografía --- */

.arco__titulo {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 120, "SOFT" 30, "WONK" 1;
  font-weight: 400;
  font-size: min(clamp(1.875rem, 5.8vw, 2.625rem), 4.8vh);
  line-height: 1.01;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: var(--aire);
}

.arco__pie-titulo {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin-bottom: calc(var(--aire) * 1.8);
}

.arco__indicacion {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 34ch;
  margin-bottom: calc(var(--aire) * 1.55);
}

/* --- Campo --- */

.campo-correo {
  margin-bottom: calc(var(--aire) * 0.9);
}

.campo-correo label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Sin radio: toda la curvatura de la página es del arco. */
.campo-correo input {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.875rem;
  border: 1px solid #666f8c;
  border-radius: 0;
  background: #ffffff;
  color: var(--tinta);
  font: inherit;
  font-size: 1.0625rem;
}

.campo-correo input::placeholder {
  color: #666f8c;
  opacity: 1;
}

.campo-correo input:focus {
  outline: 2px solid var(--lapis);
  outline-offset: 1px;
  border-color: var(--lapis);
}

.campo-correo input[aria-invalid="true"] {
  border-color: var(--carmin);
}

.campo-correo__error {
  display: block;
  min-height: 1rem;
  margin-top: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--carmin);
}

/* El aviso del servicio: un filete carmín a la izquierda, sin caja ni icono.
   Es texto que explica qué pasó, no una alarma. */
.aviso-servicio {
  padding-left: 0.875rem;
  margin-bottom: 1rem;
  border-left: 2px solid var(--carmin);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--carmin);
}

/* --- Botón --- */

.boton--ir {
  width: 100%;
  min-height: 52px;
  border-radius: 0;
  background: var(--lapis);
  color: var(--luz);
  font-size: 0.9375rem;
}

.boton--ir:hover:not(:disabled) {
  background: var(--lapis-hondo);
  color: var(--luz);
}

.boton--ir:disabled {
  opacity: 1;
  background: var(--tinta-suave);
  cursor: progress;
}

.arco__nota {
  margin-top: calc(var(--aire) * 1.35);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* --- Salida ---
   El único movimiento de la página, y responde a una acción: una línea dorada
   cruza el umbral mientras el navegador se va. Sustituye al spinner, que no
   dice nada que el texto no diga ya. */

.salida:focus {
  outline: none;
}

.umbral {
  height: 2px;
  margin-bottom: 1.75rem;
  background: rgba(22, 37, 92, 0.14);
  overflow: hidden;
}

.umbral::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--oro);
  animation: cruzar 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cruzar {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

.salida__texto {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 34ch;
  margin-bottom: 1.75rem;
}

/* --- Responsive --- */

@media (max-width: 640px) {
  .portal {
    --curva: min(13rem, 50vw - 14px);
    padding: var(--muro) 14px 0;
  }

  .portal__marca {
    left: 22px;
  }

  .arco__cuerpo {
    padding: calc(var(--aire) + 1px) 1.375rem calc(var(--aire) * 1.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .umbral::after {
    width: 100%;
    animation: none;
  }
}