/* ═══════════════════════════════════════════════════════
   FORMULARIO DE LA DEMO

   Paleta y criterio visual tomados de la landing
   (`css/moleris.css` del repo Moleris-web). No se importa nada de
   allá: son dos despliegues distintos, y copiar ocho valores es más
   barato que acoplarlos. Si cambian los tokens de la marca, se
   cambian acá también.

   Igual que en la landing: UN solo gradiente en toda la página —el
   halo del panel izquierdo—, y el bloque de `prefers-reduced-motion`
   va al final para que sus `!important` ganen sobre todo lo demás.
═══════════════════════════════════════════════════════ */

:root{
  --fondo:#0A0A0C;
  --sup:#16171B;
  --sup2:#1D1E22;
  --oro:#C9A96E;
  --menta:#3ECFA4;
  --texto:#F3F1EC;
  --tenue:#9A9791;
  --borde:#2A2B30;
  --borde-vivo:#3A3B42;
  --error:#F2B8B5;
  --error-borde:#5A2A2A;
  --error-fondo:#241416;

  --radio:14px;
  --radio-chico:10px;
  --transicion:380ms cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

/* ── Estructura de dos columnas ────────────────────────
   En mobile se apila: primero el mensaje, después el formulario.
   Ese orden es deliberado — el mensaje tiene que seguir cambiando
   mientras se completa, y si va abajo nadie lo ve.               */
.marco{
  width:100%;
  max-width:1080px;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}
@media (min-width:900px){
  .marco{
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    align-items:center;
  }
}

/* ── El halo dorado ────────────────────────────────────
   El único gradiente de la página, igual que en la landing.

   Va en una capa fija a pantalla completa, NO dentro del panel. Antes
   estaba en un `::before` de 420px de alto: el gradiente llegaba con
   color hasta el borde de esa caja y el recorte se veía como un
   rectángulo flotando. Acá no hay caja que recorte, y el color muere
   en transparente mucho antes del borde de la pantalla.              */
body::before{
  content:'';
  position:fixed;
  inset:-20vh -20vw;
  background:
    radial-gradient(46vw 46vw at 26% 34%, rgba(201,169,110,.20), rgba(201,169,110,.07) 38%, transparent 68%),
    radial-gradient(30vw 30vw at 14% 62%, rgba(201,169,110,.09), transparent 62%);
  pointer-events:none;
  z-index:0;
  animation:respirar 14s ease-in-out infinite alternate;
}
/* Movimiento mínimo y lentísimo: da vida sin que se note como una
   animación. Si se percibe, está mal calibrado. */
@keyframes respirar{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(1.5%,-1.5%,0) scale(1.06)}
}

/* ── Columna izquierda: el mensaje que cambia ────────── */
.panel{position:relative;padding:4px 0;z-index:1}

.marca{
  display:flex;align-items:center;gap:12px;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro);margin-bottom:26px;
}
/* La línea se dibuja al cargar: es lo primero que se mueve en la
   pantalla y lleva el ojo al mensaje. */
.marca span{
  height:1px;background:linear-gradient(90deg,transparent,var(--oro));
  width:34px;transform-origin:left;
  animation:trazar 700ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes trazar{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* Número de estado, en dorado y grande pero tenue: ubica sin competir
   con el título. */
.paso-numero{
  display:block;
  font-size:.8rem;letter-spacing:.22em;
  color:var(--oro);opacity:.65;
  margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.paso-numero b{font-weight:700;opacity:1}

/* El contenedor cuya altura se anima al cambiar de estado. */
.mensaje{
  overflow:hidden;
  transition:height var(--transicion);
}
.mensaje__cuerpo{
  opacity:1;
  transform:translateY(0);
  transition:opacity 280ms ease, transform 280ms ease;
}
.mensaje__cuerpo.saliendo{opacity:0;transform:translateY(-8px)}
.mensaje__cuerpo.entrando{opacity:0;transform:translateY(8px)}

.mensaje h1{
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 14px;
  font-weight:700;
}
.mensaje p{margin:0 0 22px;color:var(--tenue);font-size:1.02rem;max-width:46ch}

/* Los puntos entran ESCALONADOS, uno detrás del otro. Es lo que hace
   que el cambio de mensaje se lea como algo que se está armando y no
   como un bloque que se reemplaza de golpe.

   El dorado vive de este lado: marca, número, tildes. La menta queda
   del lado de la tarjeta, para las acciones. Así el dorado se ve como
   la marca y la menta como "acá se toca", sin competir.              */
.puntos{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.puntos li{
  display:flex;align-items:center;gap:12px;font-size:.96rem;
  animation:puntoEntra 420ms cubic-bezier(.22,.61,.36,1) both;
}
.puntos li:nth-child(1){animation-delay:80ms}
.puntos li:nth-child(2){animation-delay:170ms}
.puntos li:nth-child(3){animation-delay:260ms}
.puntos li:nth-child(4){animation-delay:350ms}
@keyframes puntoEntra{
  from{opacity:0;transform:translateX(-10px)}
  to  {opacity:1;transform:translateX(0)}
}

.puntos li::before{
  content:'';
  flex:0 0 22px;height:22px;border-radius:50%;
  background:rgba(201,169,110,.10);
  border:1px solid rgba(201,169,110,.45);
  box-shadow:0 0 0 3px rgba(201,169,110,.06);
  /* El tilde, dibujado con dos gradientes: sin iconos externos ni SVG. */
  background-image:linear-gradient(45deg,transparent 46%,var(--oro) 46%,var(--oro) 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 60%,var(--oro) 60%,var(--oro) 70%,transparent 70%);
  background-size:11px 11px,11px 11px;
  background-position:3px 6px,8px 4px;
  background-repeat:no-repeat;
}

/* ── Columna derecha: la tarjeta ──────────────────────── */
.tarjeta{
  background:linear-gradient(180deg,var(--sup) 0%,#131418 100%);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:26px 24px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 44px -28px rgba(0,0,0,.9);
}
@media (min-width:900px){ .tarjeta{padding:30px 28px 26px} }

/* ── Indicador de progreso ─────────────────────────────
   Discreto a propósito: informa el avance sin convertirse en el
   elemento principal de la tarjeta.                                */
.progreso{margin-bottom:22px}
.progreso__texto{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.79rem;color:var(--tenue);margin-bottom:9px;
}
.progreso__pista{
  display:flex;align-items:center;gap:0;
}
.progreso__paso{
  flex:0 0 9px;height:9px;border-radius:50%;
  background:var(--sup2);border:1px solid var(--borde-vivo);
  transition:background var(--transicion),border-color var(--transicion),transform var(--transicion);
}
.progreso__paso[data-hecho="1"]{background:var(--menta);border-color:var(--menta);transform:scale(1.1)}
.progreso__union{
  flex:1 1 auto;height:1px;background:var(--borde-vivo);position:relative;overflow:hidden;
}
.progreso__union::after{
  content:'';position:absolute;inset:0;
  background:var(--menta);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transicion);
}
.progreso__union[data-hecho="1"]::after{transform:scaleX(1)}

/* ── Campos ────────────────────────────────────────────
   `label` real, siempre visible. Nada de placeholder-como-label:
   desaparece justo cuando el usuario lo necesita, y los lectores de
   pantalla lo anuncian peor.                                        */
.campo{margin-bottom:15px;position:relative}
.campo > label{
  display:block;font-size:.83rem;color:var(--tenue);margin-bottom:6px;
}
.campo input{
  width:100%;
  padding:12px 40px 12px 14px;
  border-radius:var(--radio-chico);
  border:1px solid var(--borde);
  background:#101116;
  color:var(--texto);
  font-size:1rem;
  font-family:inherit;
  transition:border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.campo input::placeholder{color:#5E5C58}
.campo input:hover{border-color:var(--borde-vivo)}
.campo input:focus{
  outline:none;
  border-color:var(--oro);
  background:#12131A;
  box-shadow:0 0 0 3px rgba(201,169,110,.14);
}
/* Foco visible para teclado en TODO lo que se puede enfocar. */
:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* El tilde que aparece cuando el campo queda bien completado. */
.campo__ok{
  position:absolute;right:13px;bottom:12px;
  width:18px;height:18px;border-radius:50%;
  background:var(--menta);
  opacity:0;transform:scale(.5);
  transition:opacity 240ms ease, transform 240ms cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.campo__ok::after{
  content:'';position:absolute;left:6px;top:3px;
  width:4px;height:9px;border:solid #06231A;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.campo[data-ok="1"] .campo__ok{opacity:1;transform:scale(1)}

.campo input[aria-invalid="true"]{border-color:var(--error-borde)}
.campo__error{
  display:none;margin-top:6px;font-size:.8rem;color:var(--error);
}
.campo[data-error="1"] .campo__error{display:block}

/* ── Grupos de botones (tramo, intereses, preguntas) ─── */
fieldset{border:0;margin:0 0 15px;padding:0}
legend{font-size:.83rem;color:var(--tenue);margin-bottom:7px;padding:0}

.tramos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opcion{
  padding:11px 8px;
  border-radius:var(--radio-chico);
  border:1px solid var(--borde);
  background:#101116;
  color:var(--texto);
  font:inherit;font-size:.9rem;
  cursor:pointer;
  transition:border-color 180ms ease,background 180ms ease,transform 180ms ease;
}
.opcion:hover{border-color:var(--borde-vivo);background:#14151B}
.opcion[aria-pressed="true"]{border-color:var(--oro);background:#1A1A20}
.opcion:active{transform:translateY(1px)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .opcion{font-size:.86rem;padding:8px 13px;border-radius:999px}
.chips .opcion[aria-pressed="true"]{border-color:var(--menta);background:#11251F}

.apilado{display:grid;gap:8px}
.apilado .opcion{text-align:left;padding:12px 14px;font-size:.94rem}
.apilado .opcion[aria-pressed="true"]{border-color:var(--menta);background:#11251F}

/* ── Botón principal ──────────────────────────────────── */
.cta{
  width:100%;margin-top:20px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 18px;
  border:0;border-radius:var(--radio-chico);
  background:var(--menta);color:#06231A;
  font:inherit;font-size:1rem;font-weight:700;
  cursor:pointer;
  transition:filter 180ms ease, transform 180ms ease;
}
.cta:hover:not([disabled]){filter:brightness(1.07)}
.cta:active:not([disabled]){transform:translateY(1px)}
.cta[disabled]{opacity:.5;cursor:default}
.cta__flecha{transition:transform 240ms cubic-bezier(.22,.61,.36,1)}
.cta:hover:not([disabled]) .cta__flecha{transform:translateX(4px)}

/* Girito de carga, dibujado con bordes. */
.giro{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(6,35,26,.3);border-top-color:#06231A;
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

.legal{margin:13px 0 0;font-size:.77rem;color:var(--tenue);text-align:center;line-height:1.5}

.aviso{
  margin-bottom:16px;padding:11px 13px;
  border-radius:var(--radio-chico);
  border:1px solid var(--error-borde);background:var(--error-fondo);
  color:var(--error);font-size:.88rem;
}

.saltear{
  display:block;margin:14px auto 0;
  background:none;border:0;color:var(--tenue);
  font:inherit;font-size:.86rem;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.saltear:hover{color:var(--texto)}

/* ── Paneles de la tarjeta: formulario / espera / éxito ─ */
.vista[hidden]{display:none}

.espera__aviso{
  display:flex;align-items:center;gap:10px;
  margin-top:18px;font-size:.87rem;color:var(--tenue);
}
.pulso{
  width:8px;height:8px;border-radius:50%;background:var(--menta);
  animation:latir 1.2s ease-in-out infinite;
}
@keyframes latir{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

.exito{text-align:center;padding:6px 0 2px}
.exito__marca{
  width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:#11251F;border:1px solid var(--menta);
  position:relative;
  animation:aparecer 420ms cubic-bezier(.34,1.56,.64,1);
}
.exito__marca::after{
  content:'';position:absolute;left:20px;top:14px;
  width:9px;height:18px;border:solid var(--menta);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
@keyframes aparecer{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.exito h2{margin:0 0 8px;font-size:1.3rem}
.exito p{margin:0 0 4px;color:var(--tenue);font-size:.95rem}

/* ── Movimiento reducido ───────────────────────────────
   Va al final para que sus `!important` ganen sobre todo lo de
   arriba. Con esto activado no hay animaciones: los cambios de
   estado siguen ocurriendo, pero de golpe.                        */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .mensaje{transition:none !important}
  .mensaje__cuerpo{opacity:1 !important;transform:none !important}
  /* El halo queda quieto y los puntos aparecen ya puestos, sin entrar. */
  body::before{animation:none !important;transform:none !important}
  .puntos li{animation:none !important;opacity:1 !important;transform:none !important}
  .marca span{animation:none !important;transform:none !important;opacity:1 !important}
}