@font-face {
  font-family: "CMU Serif";
  src: url("fonts/cmu-serif-500-roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CMU Serif";
  src: url("fonts/cmu-serif-500-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* un fondo de universo: casi negro azulado, una nebulosa tenue y estrellas; los números los lee también el lienzo */
:root {
  color-scheme: dark;
  --fondo: #060912;
  --nebulosa: #23346E;
  --nebulosa-fuerza: 38%;
  --estrellas: #F4F6FF;
  --texto: #BBC2DD;
  --secundario: #8F97B2;
  --brillo: 1;
  --variedad: 0.35;
  --parpadeo: 0.5;
  --halo: 0.6;
  --velocidad: 1.36;
  --hilo: color-mix(in srgb, var(--texto) 32%, transparent);
  --m: clamp(22px, 6vw, 104px);
  --serif: "CMU Serif", "Latin Modern Roman", "Computer Modern Serif", Georgia, "Times New Roman", serif;
}

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

html {
  background: var(--fondo);
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--serif);
  font-size: clamp(17px, 0.9rem + 0.3vw, 21px);
  line-height: 1.5;
  font-kerning: normal;
}

::selection { background: var(--texto); color: var(--fondo); }

/* la nebulosa: dos manchas de luz muy abiertas, fijas detrás de las estrellas */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 52% at 74% 30%, color-mix(in srgb, var(--nebulosa) var(--nebulosa-fuerza), transparent), transparent 72%),
    radial-gradient(46% 42% at 16% 80%, color-mix(in srgb, var(--nebulosa) calc(var(--nebulosa-fuerza) * 0.6), transparent), transparent 72%);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 5px; }

p { margin: 0; }

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.campo {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  z-index: 0;
}

.cabecera, main, .pie { position: relative; z-index: 1; }

/* cabecera */

.cabecera {
  position: absolute;
  inset: 0 0 auto 0;
  padding: clamp(22px, 4.5vh, 46px) var(--m);
}
.marca { display: inline-block; color: var(--texto); }
.marca svg { display: block; aspect-ratio: 493 / 98; width: auto; height: clamp(24px, 2.3vw, 33px); }

/* portada: el texto ocupa los dos cuadrantes que la curva deja libres */

.portada {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  padding: 18vh var(--m) 0;
  padding-top: 18svh;
}

.portada h1 {
  margin: 0;
  max-width: 7.8em;
  font-weight: 400;
  font-size: clamp(44px, min(7.3vw, 12.5svh), 120px);
  line-height: 1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.entrada {
  margin-top: 0.85em;
  max-width: 22em;
  text-wrap: balance;
  font-style: italic;
  font-size: clamp(20px, 1.75vw, 29px);
  line-height: 1.3;
  color: var(--secundario);
}

/* «Contact us» en la portada: un enlace que se abre en un recuadro para dejar el email */
.escribe {
  position: absolute;
  right: var(--m);
  bottom: clamp(28px, 8svh, 84px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: min(420px, calc(100% - 2 * var(--m)));
  font-size: clamp(18px, 1.35vw, 23px);
  text-align: right;
}

.abre-contacto {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.abre-contacto:hover { text-decoration-thickness: 2px; }
.con-js .abre-contacto { display: inline; }
.con-js .abre-contacto[aria-expanded="true"] { display: none; }

.rapido {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.35em 0.4em 0.35em 0.7em;
  border: 1px solid var(--hilo);
  transition: border-color 0.2s;
}
.rapido:focus-within { border-color: var(--texto); }
.con-js .rapido:not(.abierta) { display: none; }

.rapido input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.3em 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  outline: none;
  caret-color: var(--texto);
}
.rapido input::placeholder { color: var(--secundario); opacity: 1; }

.rapido button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0.25em 0.7em;
  border: 1px solid var(--hilo);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: max(15px, 0.7em);
  cursor: pointer;
}
.rapido button:hover { border-color: var(--texto); }
.rapido button:disabled { opacity: 0.6; cursor: default; }

.rapido-estado {
  margin-top: 0.6em;
  font-size: 15px;
  font-style: italic;
  color: var(--secundario);
}
.rapido-estado:empty { display: none; }

/* la bajada: una frase por pantalla */

.bajada { padding: 10svh var(--m) 0; }

.beat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88vh;
  min-height: 88svh;
  max-width: 15.5em;
  font-size: clamp(30px, 3.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.006em;
  text-wrap: balance;
}

/* final: el universo acaba en el logo y en una caja donde escribir */

.final {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--m);
}

.final-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 680px);
}

.final-logo {
  display: block;
  aspect-ratio: 493 / 98;
  width: auto;
  color: var(--texto);
  height: clamp(44px, 5.4vw, 76px);
  margin-bottom: clamp(36px, 7vh, 64px);
}

.caja {
  position: relative;
  width: 100%;
  border: 1px solid var(--hilo);
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.3;
  transition: border-color 0.2s;
}
.caja:focus-within { border-color: var(--texto); }

.caja textarea {
  display: block;
  width: 100%;
  min-height: 2.6em;
  margin: 0;
  padding: 0.65em 4.4em 0.65em 0.75em;
  border: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  resize: none;
  overflow: hidden;
  outline: none;
  caret-color: var(--texto);
}
.caja textarea:placeholder-shown { caret-color: transparent; }

/* «Contact us» con el cursor parpadeando; al escribir, desaparece */
.invita {
  position: absolute;
  left: 0.75em;
  top: 0.65em;
  display: flex;
  align-items: center;
  height: 1.3em;
  pointer-events: none;
  white-space: nowrap;
}
.caja textarea:not(:placeholder-shown) ~ .invita { display: none; }
.caja textarea:focus ~ .invita > span:first-child { order: 2; color: var(--secundario); }

.cursor {
  display: block;
  width: 0.07em;
  min-width: 2px;
  height: 1.08em;
  margin: 0 0.1em;
  background: var(--texto);
}

.caja button {
  position: absolute;
  right: 0.5em;
  bottom: 0.55em;
  padding: 0.25em 0.6em;
  border: 1px solid var(--hilo);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: max(15px, 0.5em);
  min-height: 34px;
  cursor: pointer;
}
.caja button:hover { border-color: var(--texto); }
.caja.js button { display: none; }
.caja.js.lleno button { display: block; }

.pista {
  margin-top: 0.9em;
  font-size: 15px;
  font-style: italic;
  color: var(--secundario);
  visibility: hidden;
}
.caja.lleno + .pista, .pista.visible { visibility: visible; }

.pie {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--m) clamp(22px, 4vh, 40px);
  font-size: 15px;
  color: var(--secundario);
}

/* una sola secuencia de entrada, terminada antes de 4 s; el cursor parpadea porque invita a escribir */

@media (prefers-reduced-motion: no-preference) {
  .portada h1 { animation: aparece 0.9s 0.1s both; }
  .entrada { animation: aparece 0.8s 2.3s both; }
  .escribe { animation: aparece 0.8s 2.9s both; }
  .cursor { animation: parpadea 1.06s steps(1, end) infinite; }
}
@keyframes aparece { from { opacity: 0; } }
@keyframes parpadea { 50% { opacity: 0; } }

/* móvil en vertical: texto arriba, curva en el centro, contacto abajo */

@media (max-aspect-ratio: 17/20) {
  .portada { padding-top: 15svh; }
  .portada h1 { font-size: clamp(40px, 12.6vw, 84px); }
  .entrada { font-size: clamp(19px, 5vw, 28px); }
  .escribe { left: var(--m); right: auto; align-items: flex-start; text-align: left; }
  .beat { justify-content: flex-start; padding-top: 22svh; font-size: clamp(28px, 7.6vw, 48px); }
}