@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/Plus_Jakarta_Sans-200_800-6.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: #030811;
  color: #eaf3fb;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  overflow: hidden;
}

/* Lienzo 3D: todo vive ahí, incluido el logo */
#scene {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Respaldo animado si WebGL no está disponible */
body.nogl::before {
  content: "";
  position: fixed;
  inset: -50%;
  background:
    radial-gradient(40% 55% at 30% 65%, rgba(0, 148, 255, .22), transparent 70%),
    radial-gradient(45% 60% at 72% 40%, rgba(0, 84, 151, .25), transparent 72%),
    #030811;
  animation: drift 16s ease-in-out infinite alternate;
}
body.nogl .logo-plano { display: block; }
.logo-plano {
  display: none;
  width: min(380px, 62vw);
  margin: 0 auto 2rem;
  filter: drop-shadow(0 0 22px rgba(0, 148, 255, .5));
}
@keyframes drift {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* La leyenda, abajo del logo 3D */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem 11vh;
  pointer-events: none;
}
.stage a { pointer-events: auto; }

h1 {
  font-size: clamp(1.45rem, 1rem + 2.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
  text-shadow: 0 0 30px rgba(0, 148, 255, .35), 0 2px 24px rgba(0, 0, 0, .8);
  opacity: 0;
  animation: arrive 1.6s cubic-bezier(.2, .7, .2, 1) 2.4s forwards;
}

.correo {
  display: inline-block;
  margin-top: 3vh;
  color: rgba(158, 199, 231, .55);
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: lowercase;
  text-decoration: none;
  opacity: 0;
  animation: arrive 1.6s ease 3.1s forwards, pulse 5s ease-in-out 5s infinite;
  transition: color .3s ease, letter-spacing .3s ease;
}
.correo:hover, .correo:focus-visible { color: #9ed6ff; letter-spacing: .2em; outline: none; }

/* Selector de idioma */
.idioma {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  display: flex;
  gap: .25rem;
  font-size: .75rem;
  letter-spacing: .16em;
  opacity: 0;
  animation: arrive 1.2s ease 3.6s forwards;
}
.idioma a {
  padding: .35rem .55rem;
  color: rgba(158, 199, 231, .45);
  text-decoration: none;
  border-radius: 4px;
  transition: color .25s ease, background-color .25s ease;
}
.idioma a:hover { color: #9ed6ff; }
.idioma a[aria-current="true"] { color: #eaf3fb; background: rgba(0, 148, 255, .14); }

@keyframes arrive {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ---- Ventana de contacto ------------------------------------------------- */
dialog.contacto {
  margin: auto;                 /* centrado: el reset global quita el margen nativo */
  border: 1px solid rgba(0, 148, 255, .35);
  border-radius: 16px;
  padding: 0;
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  background: rgba(5, 12, 24, .92);
  color: #eaf3fb;
  box-shadow: 0 0 0 1px rgba(0, 148, 255, .12), 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 148, 255, .18);
  backdrop-filter: blur(14px);
  overflow: auto;
}
dialog.contacto::backdrop {
  background: rgba(2, 6, 14, .72);
  backdrop-filter: blur(3px);
}
dialog.contacto[open] { animation: abrir .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes abrir {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.contacto__inner { padding: clamp(1.4rem, 3vw, 2.2rem); }
.contacto__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.contacto h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.contacto p.sub { margin-top: .35rem; color: rgba(158, 199, 231, .75); font-size: .92rem; }

.cerrar {
  flex: none;
  width: 36px; height: 36px;
  border: 1px solid rgba(158, 199, 231, .25);
  border-radius: 50%;
  background: transparent;
  color: #9ec7e7;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.cerrar:hover, .cerrar:focus-visible { border-color: #9ed6ff; color: #fff; transform: rotate(90deg); outline: none; }

.form { display: grid; gap: .95rem; }
.campo { display: grid; gap: .35rem; }
.campo label { font-size: .85rem; font-weight: 600; color: #cfe3f5; }
.campo label .req { color: #38a8ff; }
.campo input, .campo textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid rgba(158, 199, 231, .25);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #eaf3fb;
  font: inherit;
  font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: #0094ff;
  box-shadow: 0 0 0 3px rgba(0, 148, 255, .25);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #ff6b6b; }
.campo .error { min-height: 1em; font-size: .8rem; color: #ff8a8a; }
.campo .contador { justify-self: end; font-size: .75rem; color: rgba(158, 199, 231, .5); }

/* Campo trampa para bots: fuera de la vista, sin display:none para no delatarlo */
.campo.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.acciones { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; flex-wrap: wrap; }
.nota { font-size: .78rem; color: rgba(158, 199, 231, .55); max-width: 28ch; }
.enviar {
  padding: .8rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: #0094ff;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease, opacity .2s ease;
}
.enviar:hover { background: #38a8ff; }
.enviar:active { transform: translateY(1px); }
.enviar[disabled] { opacity: .5; cursor: default; }

.estado { padding: .9rem 1rem; border-radius: 10px; font-size: .9rem; }
.estado.ok { background: rgba(0, 148, 255, .12); border: 1px solid rgba(0, 148, 255, .35); color: #cfe8ff; }
.estado.mal { background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .35); color: #ffb3b3; }

@media (prefers-reduced-motion: reduce) {
  h1, .correo, .idioma { animation: none; opacity: 1; }
  body.nogl::before { animation: none; }
  dialog.contacto[open] { animation: none; }
}

/* ---- Comprobación local (captcha sin terceros) --------------------------- */
.captcha__fila { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; }
.captcha__lienzo {
  display: block;
  width: 168px; height: 52px;
  border: 1px solid rgba(158, 199, 231, .25);
  border-radius: 10px;
  background: #06101d;
}
.captcha__fila input { text-align: center; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.otra {
  width: 40px; height: 40px;
  border: 1px solid rgba(158, 199, 231, .25);
  border-radius: 50%;
  background: transparent;
  color: #9ec7e7;
  font: inherit; font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .3s ease;
}
.otra:hover, .otra:focus-visible { border-color: #9ed6ff; color: #fff; transform: rotate(180deg); outline: none; }
.campo .ayuda { font-size: .78rem; color: rgba(158, 199, 231, .5); }