/* eventos-ucm — pantalla de registro (index.html) */

.split {
  display: grid;
  grid-template-columns: var(--columna-imagen) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
}

/* Columna izquierda: fondo plano de marca y el afiche entero encima.
   Recortarlo a "cover" partiría su título en pantallas altas. */
.split__grafica {
  --aire: 28px;
  position: relative;
  background: var(--navy-900);
}

/* Sticky: el afiche ocupa una pantalla de alto y acompaña el scroll del
   formulario, en vez de dejar la columna vacía por debajo. */
.split__grafica img {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  padding: var(--aire);
  object-fit: contain;
}

/* Variante para afiches cuadrados: con la proporción vertical por defecto la
   columna queda casi vacía arriba y abajo, así que se ensancha (el panel de la
   derecha sobra espacio) y se reduce el aire. */
.split--cuadrado {
  --columna-imagen: clamp(420px, 48vw, 900px);
}

/* Solo en dos columnas: el bloque apilado de más abajo ya trae su propio aire,
   fondo y troquelado, y estas reglas le ganarían por especificidad. */
@media (min-width: 901px) {
  /* El fondo prolonga el propio afiche, para que las franjas de arriba y abajo
     no se lean como bandas. Cada capa es literalmente una tira de un píxel de
     alto — la primera y la última fila del afiche, que son distintas entre sí —
     estirada hasta media columna. Con eso el empalme es exacto: un degradado
     aproximado se notaba, porque el afiche tiene saltos duros de color.

     Las tiras las declara el HTML del evento con un background-image en línea,
     no este archivo: viven en la carpeta del evento, y una url en un atributo
     style se resuelve contra el documento (no contra la hoja de estilos), así
     que la ruta vale igual antes y después de publicar. Puesta en el CSS o en
     una variable, apuntaría a css/img/ y daría 404.
     Se regeneran desde el afiche con:
       magick afiche.webp -crop <ancho>x1+0+0 +repage \
         -define webp:lossless=true borde-superior.webp
       magick afiche.webp -crop <ancho>x1+0+<alto-1> +repage \
         -define webp:lossless=true borde-inferior.webp

     El empalme se ve en los costados, así que el afiche va sin aire lateral y
     llega justo a los bordes de la columna. */
  .split--cuadrado .split__grafica {
    --aire: 0px;
    background-color: var(--navy-900);
    background-position: top, bottom;
    background-size: 100% 50%;
    background-repeat: no-repeat;
  }
}

/* Troquelado tipo entrada entre las dos columnas */
.split__grafica::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 2px;
  background-image: linear-gradient(to bottom, var(--fondo) 55%, transparent 55%);
  background-size: 2px 14px;
}

.split__troquel {
  display: none;
}

.split__panel {
  display: flex;
  flex-direction: column;
  padding: 46px 68px;
}

.panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.panel__cabecera .marca {
  color: var(--navy-800);
}

.panel__cabecera .marca__texto {
  color: var(--texto-suave);
}

/* La flecha ya lo identifica como enlace, y no va dentro de un párrafo. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
}

.panel__cuerpo {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 20px;
}

.titular {
  font-size: clamp(1.75rem, 3.1vw, 2.375rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  max-width: 15ch;
}

.datos-evento {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 30px;
}

/* --- Formulario --- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}

.campo label {
  display: block;
  font-size: 0.781rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 700;
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid #d3dae4;
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  font-size: 0.906rem;
}

/* 4.6:1 sobre blanco: legible, y todavía bastante más claro que el valor
   escrito para que no se confunda con texto ya ingresado. */
.campo input::placeholder {
  color: #6b7688;
  opacity: 1;
}

.campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(1, 74, 136, 0.1);
}

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

.campo__error {
  display: block;
  min-height: 1rem;
  margin-top: 5px;
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--error);
}

.pareja {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Autorización de datos: es un <label>, así que hay que anular el estilo de
   etiqueta (mayúsculas y espaciado) que aplica .campo label */
.campo .autorizo {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.campo .autorizo input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--azul);
}

.campo .autorizo span {
  font-size: 0.781rem;
  line-height: 1.65;
  color: var(--texto-suave);
}

.acciones {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.acciones__nota {
  font-size: 0.813rem;
  color: var(--texto-tenue);
}

/* Aviso de error general del envío */
.aviso {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: var(--radio);
  background: var(--error-fondo);
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 600;
}

/* --- Confirmación --- */

.confirmacion__etiqueta {
  font-size: 0.781rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul);
  font-weight: 800;
  margin-bottom: 14px;
}

.confirmacion__titulo {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.confirmacion__texto {
  font-size: 0.938rem;
  line-height: 1.65;
  color: var(--texto-suave);
  max-width: 46ch;
  margin-bottom: 30px;
}

.pase {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 460px;
  padding: 22px 26px;
  margin-bottom: 30px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.pase__etiqueta {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 700;
  margin-bottom: 6px;
}

.pase__valor {
  font-size: 1.063rem;
  font-weight: 700;
}

.pase__correo {
  font-size: 0.875rem;
  color: var(--texto-suave);
  margin-top: 3px;
  word-break: break-word;
}

/* --- Responsive: la gráfica pasa arriba y el formulario debajo --- */

@media (max-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  /* El bloque mide exactamente lo que el afiche: sin bandas de relleno */
  .split__grafica {
    --aire: 0px;
    width: fit-content;
    max-width: 100%;
    margin: 28px auto 0;
    background: transparent;
  }

  .split__grafica img {
    position: static;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 60svh;
  }

  /* Sobre fondo claro el troquelado se dibuja oscuro */
  .split__grafica::after {
    inset: auto 0 -14px 0;
    width: auto;
    height: 2px;
    background-image: linear-gradient(to right, var(--borde) 55%, transparent 55%);
    background-size: 14px 2px;
  }

  .split__panel {
    padding: 42px 32px 56px;
  }
}

/* Pantallas bajas: menos aire para que el formulario quepa sin scroll */
@media (min-width: 901px) and (max-height: 900px) {
  .split__panel {
    padding: 30px 56px;
  }

  .panel__cabecera {
    margin-bottom: 20px;
  }

  .panel__cuerpo {
    padding-block: 8px;
  }

  .datos-evento {
    margin-bottom: 22px;
  }

  .formulario {
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .split__grafica {
    margin-top: 20px;
  }

  .split__grafica img {
    max-height: 68svh;
  }

  .split__panel {
    padding: 28px 20px 44px;
  }

  .pareja {
    grid-template-columns: minmax(0, 1fr);
  }

  .acciones .boton {
    width: 100%;
  }
}