/* ==========================================================================
   /trabajo — «Trabaja con nosotros»
   --------------------------------------------------------------------------
   Pantalla completa y una pregunta cada vez, como los Typeform (el de
   Revolut que pasó Emilio), pero con lo nuestro:

   - Detrás, una foto real de fiesta a toda pantalla, oscurecida. Cambia en
     cada pregunta con un fundido y un acercamiento lento (MilleDollars: el
     material real es la portada).
   - El número de la pregunta en gigante y solo con el contorno, abajo a la
     derecha (Aevion: una cifra grande como titular). Dice cuánto queda.
   - Una sola tinta (hueso) con opacidades; el rojo de marca solo en el
     botón, la barra de progreso y lo que está marcado.
   - Las opciones son filas separadas por rayas finas, no cajas.

   Animaciones (las pidió Emilio): al cambiar de pregunta la anterior sube y
   se va, y la nueva entra por piezas (pregunta, ayuda, opciones una a una).
   Con «prefers-reduced-motion» no se mueve nada.
   Sin JavaScript se ven todas las preguntas seguidas y el envío funciona.
   ========================================================================== */

:root {
  --fondo: #08070a;
  --tinta: #f6f2e9;
  --t80: rgba(246, 242, 233, .8);
  --t60: rgba(246, 242, 233, .6);
  --t40: rgba(246, 242, 233, .4);
  --t20: rgba(246, 242, 233, .2);
  --rojo: #e30613;
  --mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --letra: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --curva: cubic-bezier(.16, .84, .28, 1);
  --margen: clamp(20px, 8vw, 150px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--rojo); color: #fff; }

/* --------------------------------------------------------------------------
   Fondo: foto a pantalla completa
   -------------------------------------------------------------------------- */
.fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--fondo);
}
.fondo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
  backface-visibility: hidden;
}
.fondo__img.activa {
  opacity: 1;
  animation: respira 9s var(--curva) both;
}
/* Oscurece a la izquierda, donde va el texto, y deja ver la foto a la derecha */
.fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 7, 10, .94) 0%, rgba(8, 7, 10, .84) 40%, rgba(8, 7, 10, .55) 75%, rgba(8, 7, 10, .4) 100%),
    linear-gradient(0deg, rgba(8, 7, 10, .7) 0%, rgba(8, 7, 10, 0) 35%);
}
@keyframes respira {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Cabecera y número gigante
   -------------------------------------------------------------------------- */
.cabeza {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--margen) 0;
  pointer-events: none;
}
.cabeza > * { pointer-events: auto; }
.marca img { display: block; width: 72px; height: auto; }
.contador {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--t60);
}

.numero {
  position: fixed;
  right: clamp(12px, 4vw, 64px);
  bottom: clamp(40px, 6vh, 80px);
  z-index: 1;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(160px, 30vw, 460px);
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(246, 242, 233, .28);
  pointer-events: none;
  user-select: none;
}
.numero.cambia { animation: numero .7s var(--curva) both; }
@keyframes numero {
  from { opacity: 0; transform: translateY(12%); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Escena: la pregunta, centrada en vertical, a la izquierda
   -------------------------------------------------------------------------- */
.escena {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 110px var(--margen) 120px;
}
.form { width: 100%; max-width: 760px; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.paso { padding-bottom: 80px; }
.paso[hidden] { display: none; }

.etiqueta {
  margin: 0 0 28px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t60);
}

/* Titular de portada y de final: enorme y ancho, como un cartel */
.gigante {
  margin: 0 0 32px;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(48px, 8.4vw, 136px);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.gigante__linea { display: block; }
/* Los cinco puestos, todos a la vista, en rojo y separados por una barra */
.gigante__lista {
  display: flex;
  flex-wrap: wrap;
  gap: .12em .45em;
  margin-top: .35em;
  font-size: .4em;
  font-stretch: 100%;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--rojo);
}
.gigante__lista > span { display: inline-block; white-space: nowrap; }
.gigante__lista--uno { font-size: .66em; }
.gigante__lista > span:not(:last-child)::after { content: "/"; margin-left: .45em; color: var(--t40); }
.js .paso.entra .gigante__lista > span {
  animation: sube .8s var(--curva) both;
  animation-delay: calc(250ms + var(--j, 0) * 90ms);
}
.en-portada .form { max-width: 1120px; }
.paso--fin .gigante { text-transform: none; }

.texto {
  margin: 0 0 40px;
  max-width: 36ch;
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--t80);
}

/* La pregunta */
.pregunta {
  display: block;
  margin: 0 0 14px;
  font-size: clamp(30px, 3.9vw, 58px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 20ch;
}
.num {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--rojo);
}
.js .num { display: none; }            /* con JS lo cuentan la cabecera y el número gigante */

.ayuda {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--t60);
}
.ayuda[hidden] { display: none; }

/* Campos: solo la raya de abajo, letra grande */
.campo {
  display: block;
  width: 100%;
  margin: 36px 0 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--t40);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.25;
  outline: none;
  transition: border-color .25s;
}
.campo::placeholder { color: var(--t20); }
.campo:focus { border-bottom-color: var(--tinta); }
.campo--largo { resize: none; min-height: 2.6em; }

.fecha { display: flex; align-items: flex-end; gap: 18px; margin-top: 30px; }
.fecha label > span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--t60); }
.fecha .campo { width: 2.4em; margin-top: 10px; }
.fecha .campo--anio { width: 3.6em; }
.barra-fecha { font-size: clamp(24px, 2.6vw, 38px); color: var(--t40); padding-bottom: 12px; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 12px; }
.sub { display: block; }
.sub > span { display: block; margin-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--t60); }
.sub > span i { font-style: normal; color: var(--t40); }
.sub .campo { margin-top: 12px; }

/* Opciones: filas con raya fina, la letra en mono */
.opciones {
  margin-top: 28px;
  max-width: 560px;
  border-top: 1px solid var(--t20);
}
.opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--t20);
  font-size: clamp(18px, 1.6vw, 23px);
  color: var(--t80);
  cursor: pointer;
  user-select: none;
  isolation: isolate;
  transition: color .2s, padding-left .3s var(--curva), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
/* Relleno que barre la fila al marcarla */
.opcion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(227, 6, 19, .16);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--curva);
}
@media (hover: hover) {
  .opcion:hover { color: var(--tinta); padding-left: 10px; }
}
.opcion:active { background: rgba(246, 242, 233, .06); }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion kbd {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--t40);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t80);
  transition: background-color .2s, border-color .2s, color .2s;
}
.opcion::after {
  content: "";
  margin-left: auto;
  width: 14px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) scale(0);
  transition: transform .3s var(--curva);
}
.opcion.marcada, .opcion:has(input:checked) { color: var(--tinta); }
.opcion.marcada::before, .opcion:has(input:checked)::before { transform: scaleX(1); }
.opcion.marcada kbd, .opcion:has(input:checked) kbd { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.opcion.marcada::after, .opcion:has(input:checked)::after { transform: translateY(-3px) rotate(-45deg) scale(1); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: -2px; }

/* Pregunta 9 (siete opciones): dos columnas en pantallas anchas */
@media (min-width: 900px) {
  .opciones--dos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; max-width: 820px; border-top: 0; }
  .opciones--dos .opcion:nth-child(-n+2) { border-top: 1px solid var(--t20); }
  .opciones--dos .campo--detalle { grid-column: 1 / -1; }
}

/* Lo que se pide al marcar «He ido a una fiesta», «He organizado»… */
.campo--detalle {
  margin: 0;
  padding: 14px 4px 14px 48px;
  border-bottom: 1px solid var(--t20);
  font-size: clamp(17px, 1.4vw, 20px);
  animation: despliega .45s var(--curva) both;
}
.campo--detalle[hidden] { display: none; }
@keyframes despliega { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.legal { margin: 18px 0 26px; max-width: 52ch; font-size: 16px; color: var(--t60); }
.legal p { margin: 0 0 10px; }
.consiente { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; cursor: pointer; max-width: 52ch; }
.consiente input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rojo); }

.error { margin: 16px 0 0; font-size: 15px; color: #ff6b74; }
.error:empty { display: none; }
.error:not(:empty) { animation: tiembla .4s ease; }
@keyframes tiembla { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Botón: rectangular, rojo de marca, con una flecha que avanza al pasar */
.acciones { display: flex; align-items: center; gap: 18px; margin-top: 36px; }
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  background: var(--rojo);
  color: #fff;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.boton::after { content: "→"; transition: transform .3s var(--curva); }
.boton:hover { background: #ff1130; }
.boton:hover::after { transform: translateX(5px); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.boton[disabled] { opacity: .6; cursor: wait; }
.boton--claro { background: var(--tinta); color: var(--fondo); }
.boton--claro:hover { background: #fff; }

.aparte { margin: 28px 0 0; font-size: 15px; color: var(--t60); }
.aparte a { color: var(--tinta); text-underline-offset: 3px; }
.aparte a:hover { color: #fff; }

.pista { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--t40); }
.pista b { font-weight: 600; color: var(--t60); }

/* --------------------------------------------------------------------------
   Pie: barra de progreso y flechas
   -------------------------------------------------------------------------- */
.pie { display: none; }
.js .pie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px var(--margen) 28px;
  background: linear-gradient(0deg, rgba(8, 7, 10, .9) 0%, rgba(8, 7, 10, 0) 100%);
  transition: opacity .4s;
}
.barra { flex: 1; height: 2px; background: var(--t20); overflow: hidden; }
.barra__relleno { display: block; height: 100%; width: 100%; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--curva); }
.flechas { display: flex; gap: 2px; }
.flechas button {
  width: 40px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--t20);
  background: rgba(8, 7, 10, .5);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.flechas button:hover:not(:disabled) { background: var(--rojo); border-color: var(--rojo); }
.flechas button:disabled { opacity: .3; cursor: default; }
.flechas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.js.en-portada .pie, .js.en-fin .pie { opacity: 0; visibility: hidden; }

/* --------------------------------------------------------------------------
   Con JavaScript: una pregunta por pantalla y sus animaciones
   -------------------------------------------------------------------------- */
.js .paso { display: none; padding-bottom: 0; }
.js .paso.activo { display: block; }

/* Entrada por piezas: cada .a lleva su retraso en --i (lo pone trabajo.js,
   con tope de 6 para que el botón no tarde en salir) */
.js .paso.entra .a {
  animation: sube .55s var(--curva) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
/* La pregunta se destapa de abajo arriba, como un rótulo */
.js .paso.entra .pregunta {
  animation: destapa .7s var(--curva) both;
}
.js .paso.entra-atras .a {
  animation: baja .45s var(--curva) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.js .paso.sale {
  animation: se-va .22s ease-in both;
  pointer-events: none;
}
.js .paso.entra .a, .js .paso.entra-atras .a, .js .paso.sale { will-change: transform, opacity; }

@keyframes sube { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes baja { from { opacity: 0; transform: translate3d(0, -24px, 0); } to { opacity: 1; transform: none; } }
@keyframes se-va { to { opacity: 0; transform: translate3d(0, -28px, 0); } }
@keyframes destapa {
  from { opacity: 0; transform: translate3d(0, 40%, 0); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(-20% -5% -20% -5%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --margen: 48px; }
  .numero { font-size: 34vw; opacity: .8; }
  .pregunta { font-size: clamp(30px, 4.6vw, 46px); }
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --margen: 20px; }
  body { font-size: 17px; min-height: 100svh; }
  .fondo::after {
    background: linear-gradient(180deg, rgba(8, 7, 10, .5) 0%, rgba(8, 7, 10, .82) 45%, rgba(8, 7, 10, .95) 100%);
  }
  /* En el móvil la foto no se acerca: ahorra batería y tirones */
  .fondo__img.activa { animation: none; }
  .cabeza {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: 22px;
    /* Lo que pasa por debajo al hacer scroll no se mezcla con el logo */
    background: linear-gradient(180deg, rgba(8, 7, 10, .95) 0%, rgba(8, 7, 10, .8) 60%, rgba(8, 7, 10, 0) 100%);
  }
  .en-portada .cabeza, .en-fin .cabeza { background: none; }
  .marca img { width: 56px; }
  .escena {
    min-height: 100svh;
    align-items: flex-end;
    padding: calc(84px + env(safe-area-inset-top)) var(--margen) calc(96px + env(safe-area-inset-bottom));
  }
  .js:not(.en-portada):not(.en-fin) .escena { align-items: flex-start; }
  .numero {
    right: 6px;
    bottom: auto;
    top: calc(56px + env(safe-area-inset-top));
    font-size: 34vw;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(246, 242, 233, .16);
  }
  .gigante { font-size: clamp(36px, 11.4vw, 64px); }
  .gigante__lista { font-size: .5em; }
  .gigante__lista--uno { font-size: .62em; }
  .texto { margin-bottom: 28px; }
  .pregunta { font-size: clamp(26px, 7.6vw, 36px); max-width: none; }
  .campo { margin-top: 26px; font-size: 24px; }
  .pista { display: none; }
  .dos { grid-template-columns: 1fr; gap: 0; }
  .opciones { margin-top: 20px; }
  .opcion { padding: 14px 4px; gap: 14px; font-size: 18px; min-height: 52px; }
  .campo--detalle { padding-left: 44px; font-size: 17px; }
  .acciones { margin-top: 28px; }
  .boton { min-height: 54px; }
  .js .pie { padding: 32px var(--margen) max(14px, env(safe-area-inset-bottom)); gap: 14px; }
  .flechas button { width: 46px; height: 44px; }
  /* Con el teclado abierto se quitan la barra de abajo y el número */
  .escribiendo .pie, .escribiendo .numero { opacity: 0; visibility: hidden; }
}

/* Móvil en horizontal y pantallas bajas */
@media (max-height: 560px) and (orientation: landscape) {
  .cabeza { padding-top: 14px; }
  .marca img { width: 48px; }
  .escena { padding-top: 76px; padding-bottom: 84px; }
  .en-portada .texto { display: none; }
  .etiqueta { margin-bottom: 14px; }
  .numero { display: none; }
  .gigante { font-size: clamp(32px, 7vw, 60px); margin-bottom: 18px; }
  .pregunta { font-size: clamp(24px, 3.6vw, 34px); }
  .campo { margin-top: 18px; }
  .acciones { margin-top: 20px; }
  .opcion { padding: 9px 4px; }
}

/* Pantallas muy grandes */
@media (min-width: 1800px) {
  .form { max-width: 880px; }
  .en-portada .form { max-width: 1300px; }
}