/* =========================================================================
   STEM Quest Maule · Portada
   La página completa es el afiche. Los datos del estudiante se escriben
   directamente sobre las líneas del diseño original.
   ========================================================================= */

:root {
  /* Paleta tomada del afiche */
  --navy: #1a2a74;
  --blue: #007dff;
  --marcador: rgba(255, 212, 59, .38);

  --font: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  /* Geometría del afiche, en unidades del viewBox del SVG */
  --arte-w: 595.5;
  --arte-h: 842.25;

  /* Línea de escritura del diseño */
  --texto-f: 13;      /* tamaño del texto escrito */
  --zona-left: 104;   /* desde aquí se puede tocar la fila (incluye la etiqueta) */
  --zona-pad: 61;     /* relleno hasta el inicio de la línea: 165 - 104 */
  --zona-w: 286.5;    /* ancho total del campo: 61 + 225.5 */
  --zona-alto: 28;    /* alto del área escribible */
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
   El afiche ocupa todo el alto disponible manteniendo su proporción
   ------------------------------------------------------------------------- */
.afiche {
  position: relative;
  width: min(100vw, calc(100vh * 595.5 / 842.25));
  aspect-ratio: 595.5 / 842.25;

  /* 1 unidad del viewBox del SVG, sea cual sea el tamaño de la pantalla */
  container-type: inline-size;
  --u: calc(100cqw / var(--arte-w));
}

@supports (height: 100svh) {
  .afiche { width: min(100vw, calc(100svh * 595.5 / 842.25)); }
}

.afiche__arte {
  display: block;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------
   Líneas escribibles
   ------------------------------------------------------------------------- */
.campos { position: absolute; inset: 0; }

.campo {
  position: absolute;
  left: calc(var(--zona-left) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--zona-w) * var(--u));
  height: calc(var(--zona-alto) * var(--u));
  margin: 0;
  padding: 0 0 0 calc(var(--zona-pad) * var(--u));
  border: 0;
  border-radius: calc(8 * var(--u));
  background: transparent;
  font-family: var(--font);
  font-size: calc(var(--texto-f) * var(--u));
  font-weight: 700;
  line-height: calc(var(--zona-alto) * var(--u));
  letter-spacing: normal;
  color: var(--navy);
  caret-color: var(--blue);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

/* Pista mientras la línea está vacía */
.campo::placeholder {
  color: #b9bee6;
  font-weight: 600;
  font-style: italic;
  opacity: 1;
}

/* Marcador amarillo al escribir: empieza donde empieza la línea,
   así nunca tapa la etiqueta del diseño */
.campo:focus {
  background-image: linear-gradient(
    to right,
    transparent calc(var(--zona-pad) * var(--u)),
    var(--marcador) calc(var(--zona-pad) * var(--u))
  );
}