/* AVECTOR — Reto de preparación EcoVadis
   Depende de styles.css: de ahí vienen tokens, base, nav, tipografía y pie.
   Mismas reglas: border-radius 0, sin sombras, jerarquía por filetes de 1px. */

/* El pie se ancla abajo: sin esto sube y baja según qué tan alta sea la
   pantalla del reto en la que va el visitante. */
.pagina-reto{
  scroll-snap-type:none;
  min-height:100svh;display:flex;flex-direction:column;
}
.pagina-reto .pie{flex-shrink:0}

.reto{
  flex:1 0 auto;
  max-width:760px;margin:0 auto;width:100%;
  padding:calc(var(--nav-alto) + clamp(40px,7vh,80px)) var(--pad-lat) clamp(56px,9vh,110px);
}

/* Las etiquetas mono suben 25% respecto a los 11px del sitio: aquí son
   controles y texto legal, no rótulos decorativos. */
.pagina-reto .eyebrow{font-size:13.75px}
.reto__pantalla{animation:aparecer 400ms ease-out}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.reto__entrada{font-size:17px;line-height:1.6;max-width:58ch;margin-top:22px;color:var(--texto-2)}
.reto__acciones{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:40px}
.reto__aviso{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;line-height:1.6;letter-spacing:.09em;
  color:var(--gris-calido);margin-top:40px;max-width:60ch;
}
.reto__pendiente{font-family:'IBM Plex Mono',monospace;font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-calido)}

/* Los botones del reto son <button>: hay que igualarlos a los <a class="boton"> */
button.boton{border:0;cursor:pointer;font-family:inherit}
button.boton[disabled]{background:var(--filete);color:var(--texto-2);cursor:not-allowed}
button.boton[disabled]:hover{background:var(--filete)}
.enlace-boton{background:none;border:0;padding:0;cursor:pointer;font-family:inherit}

/* ---------- Progreso ---------- */

.progreso{margin-bottom:clamp(36px,6vh,56px)}
.progreso__cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.progreso__cifra{font-family:'IBM Plex Mono',monospace;font-size:13.75px;letter-spacing:.09em;color:var(--tinta)}
.progreso__pista{margin-top:12px;height:2px;background:var(--filete)}
.progreso__barra{display:block;height:100%;width:20%;background:var(--azul-senal);transition:width 500ms ease-out}

.logro{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--azul-senal);margin-bottom:18px;
  border-left:1px solid var(--azul-senal);padding-left:14px;
}

/* ---------- Preguntas ---------- */

.reto__preguntas{margin-top:40px;border-bottom:1px solid var(--filete)}
.pregunta{
  border-top:1px solid var(--filete);padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.pregunta__texto{font-size:17px;line-height:1.5;flex:1 1 min(360px,100%);text-wrap:pretty}
.pregunta__opciones{display:flex;gap:10px}
.opcion{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
  padding:10px 20px;background:none;border:1px solid var(--filete);
  color:var(--texto-2);cursor:pointer;transition:border-color 200ms ease-out,color 200ms ease-out;
}
.opcion:hover{border-color:var(--tinta);color:var(--tinta)}
.opcion[aria-pressed="true"]{background:var(--azul-senal);border-color:var(--azul-senal);color:#FFFFFF}

/* ---------- Marcador ---------- */

.marcador{margin-top:44px;border-top:1px solid var(--filete);padding-top:32px}
.marcador__cifra{
  font-family:Archivo,sans-serif;font-weight:300;letter-spacing:-.015em;line-height:1;
  font-size:clamp(3.4rem,9vw,5.5rem);
}
.marcador__total{color:var(--gris-calido);font-size:.34em;margin-left:6px}
.marcador__etiqueta{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-calido);margin-top:16px;
}
.marcador__medalla{font-size:17px;margin-top:18px}
.marcador__medalla span{color:var(--azul-senal);font-weight:500}

/* ---------- Escalera de reconocimiento ---------- */

.escalera{margin-top:44px;border-bottom:1px solid var(--filete)}
.peldano{
  border-top:1px solid var(--filete);padding:15px 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  color:var(--gris-calido);
}
.peldano__nombre{font-size:17px}
.peldano__estado{font-family:'IBM Plex Mono',monospace;font-size:13.75px;letter-spacing:.09em;text-transform:uppercase}
.peldano--alcanzado{color:var(--tinta)}
.peldano--actual .peldano__nombre{font-weight:500}
.peldano--actual{color:var(--azul-senal)}

/* ---------- Comparativa ---------- */

.comparativa{margin-top:52px;border-top:1px solid var(--filete);padding-top:32px}
.barra{display:grid;grid-template-columns:1fr;gap:8px;margin-top:24px}
.barra__nombre{font-size:15px}
.barra__pista{height:10px;background:var(--filete)}
.barra__relleno{display:block;height:100%;width:0;background:var(--azul-senal);transition:width 700ms ease-out}
.barra__relleno--gris{background:var(--gris-calido)}
.barra__cifra{font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:.09em;color:var(--texto-2)}
.comparativa__mensaje{font-size:15px;line-height:1.6;margin-top:26px;max-width:58ch;text-wrap:pretty}

/* ---------- Oportunidades ---------- */

.oportunidades{margin-top:40px;border-bottom:1px solid var(--filete)}
.oportunidad{border-top:1px solid var(--filete);padding:24px 0}
.oportunidad__num{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta);
}
.oportunidad__texto{font-size:17px;line-height:1.6;margin-top:12px;max-width:52ch;text-wrap:pretty}
.oportunidad__capa{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-calido);margin-top:10px;
}

/* ---------- Insignia ---------- */

.insignia{margin-top:44px;border-left:1px solid var(--azul-senal);padding:4px 0 4px 22px}
.insignia__nombre{font-size:18px;font-weight:500;margin-top:10px}

/* ---------- Desbloqueo ---------- */

.desbloqueo{margin-top:56px;border-top:1px solid var(--filete);padding-top:36px}
.desbloqueo__titulo{
  font-family:Archivo,sans-serif;font-weight:300;letter-spacing:-.015em;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;
}
.formulario{margin-top:30px;max-width:440px}
.campo-form{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.campo-form label{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-calido);
}
.campo-form input{
  font-family:Inter,system-ui,sans-serif;font-size:16px;color:var(--tinta);
  background:var(--papel-alt);border:1px solid var(--filete);border-radius:0;
  padding:13px 14px;width:100%;
}
.campo-form input:focus-visible{outline:2px solid var(--azul-senal);outline-offset:2px;border-color:var(--azul-senal)}

/* ---------- Móvil ---------- */

@media (max-width:820px){
  .pregunta{align-items:flex-start}
  .reto__acciones{gap:20px}
}

@media (prefers-reduced-motion:reduce){
  .reto__pantalla{animation:none}
}