/* ============================================================
   TEST DE FUGAS DE POTENCIA — módulo autocontenido
   Usa los tokens del sitio; los fallbacks permiten montarlo
   en cualquier página de Ergomec.
============================================================ */
.erg-test{
  --et-ok:#34C77B;
  --et-mid:#F0A63C;
  --et-hi:#EF5B4C;
  max-width:660px;
  margin:0 auto;
  /* deja aire para la barra fija de la landing al hacer scroll automático */
  scroll-margin-top:90px;
}
.erg-test__panel{
  background:var(--navy-850,#0D1D3B);
  border:1px solid var(--line-dark,rgba(255,255,255,.14));
  border-top:2px solid var(--blue,#3E7BFA);
  border-radius:var(--radius,2px);
  padding:38px 34px 34px;
}
@media(max-width:600px){
  .erg-test__panel{padding:28px 20px 24px;}
}
.erg-test [hidden]{display:none !important;}

/* ---------- encabezado de paso ---------- */
.et-step-head{margin-bottom:26px;}
.et-kicker{
  font-family:var(--f-mono,'IBM Plex Mono',monospace);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue,#3E7BFA);
  display:block;
  margin-bottom:12px;
}
.et-title{
  font-family:var(--f-display,'Fraunces',Georgia,serif);
  font-weight:600;
  font-size:1.45rem;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0;
}
.et-lead{
  margin:14px 0 0;
  font-size:.95rem;
  line-height:1.6;
  color:var(--muted-2,#8B96AC);
}

/* ---------- botones de opción ---------- */
.et-list{display:flex;flex-direction:column;gap:10px;}
.et-opt{
  display:block;
  width:100%;
  text-align:left;
  font-family:var(--f-body,'Inter',sans-serif);
  font-size:.95rem;
  font-weight:500;
  color:var(--white,#fff);
  background:transparent;
  border:1px solid var(--line-dark,rgba(255,255,255,.14));
  border-radius:var(--radius,2px);
  padding:15px 18px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.et-opt:hover{
  border-color:var(--blue,#3E7BFA);
  background:rgba(62,123,250,.07);
}
.et-opt:active{transform:translateY(1px);}
.et-opt:focus-visible{outline:2px solid var(--blue,#3E7BFA);outline-offset:2px;}
.et-opt__title{
  display:block;
  font-weight:600;
  font-size:1rem;
  color:var(--white,#fff);
  margin-bottom:5px;
}
.et-opt__desc{
  display:block;
  font-size:.8rem;
  line-height:1.5;
  color:var(--muted-2,#8B96AC);
}

/* ---------- progreso ---------- */
.et-progress{
  height:2px;
  background:var(--line-dark,rgba(255,255,255,.14));
  margin-bottom:12px;
}
.et-progress__fill{
  height:100%;
  width:0%;
  background:var(--blue,#3E7BFA);
  transition:width .3s ease;
}
.et-counter{
  display:block;
  font-family:var(--f-mono,'IBM Plex Mono',monospace);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2,#8B96AC);
  margin-bottom:20px;
}
.et-question{
  font-family:var(--f-display,'Fraunces',Georgia,serif);
  font-weight:600;
  font-size:1.22rem;
  line-height:1.3;
  margin:0 0 22px;
}
.et-question:focus{outline:none;}
.et-back{
  margin-top:18px;
  background:none;
  border:none;
  padding:6px 0;
  font-family:var(--f-body,'Inter',sans-serif);
  font-size:.82rem;
  color:var(--muted-2,#8B96AC);
  cursor:pointer;
}
.et-back:hover{color:var(--white,#fff);}
.et-back:focus-visible{outline:2px solid var(--blue,#3E7BFA);outline-offset:2px;}

/* ---------- resultado ---------- */
.et-result{
  border:1px solid var(--line-dark,rgba(255,255,255,.14));
  border-left:3px solid var(--blue,#3E7BFA);
  border-radius:var(--radius,2px);
  padding:24px 22px;
  margin-bottom:22px;
}
.et-result__cat{
  font-family:var(--f-mono,'IBM Plex Mono',monospace);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2,#8B96AC);
  display:block;
  margin-bottom:10px;
}
.et-result__level{
  font-family:var(--f-display,'Fraunces',Georgia,serif);
  font-weight:600;
  font-size:1.35rem;
  line-height:1.2;
  margin-bottom:12px;
}
.et-result__score{
  font-family:var(--f-mono,'IBM Plex Mono',monospace);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--muted-2,#8B96AC);
  margin-bottom:14px;
}
.et-result__desc{
  font-size:.95rem;
  line-height:1.65;
  color:var(--white,#fff);
  margin:0;
}
.et-actions{display:flex;flex-direction:column;gap:10px;}
.et-note{
  font-size:.76rem;
  line-height:1.55;
  color:var(--muted-2,#8B96AC);
  margin:0 0 8px;
}
.et-note strong{color:var(--white,#fff);font-weight:600;}
.et-confirm{
  font-size:.8rem;
  color:var(--et-ok);
  margin:2px 0 0;
  text-align:center;
}
.et-noscript{
  font-size:.9rem;
  line-height:1.6;
  color:var(--muted-2,#8B96AC);
  text-align:center;
  margin:0;
}

/* El módulo trae sus propios botones de acción para no depender
   de las utilidades de la landing cuando se usa en otra página. */
.et-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  font-family:var(--f-body,'Inter',sans-serif);
  font-weight:600;
  font-size:.95rem;
  padding:15px 24px;
  border:1px solid transparent;
  border-radius:var(--radius,2px);
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.et-btn:active{transform:translateY(1px);}
.et-btn:focus-visible{outline:2px solid var(--blue,#3E7BFA);outline-offset:2px;}
.et-btn--wa{background:var(--wa,#22C35E);color:#04170A;}
.et-btn--wa:hover{background:var(--wa-hover,#1CAE52);}
.et-btn--ghost{background:transparent;color:var(--white,#fff);border-color:var(--line-dark,rgba(255,255,255,.14));}
.et-btn--ghost:hover{border-color:var(--white,#fff);}
.et-btn--quiet{background:transparent;color:var(--muted-2,#8B96AC);font-weight:500;font-size:.85rem;padding:10px 16px;}
.et-btn--quiet:hover{color:var(--white,#fff);}

/* ---------- enlace de entrada al test (hero de la landing) ---------- */
.erg-test-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  font-size:.88rem;
  font-weight:500;
  color:var(--blue,#3E7BFA);
  border-bottom:1px solid rgba(62,123,250,.35);
  padding-bottom:3px;
  transition:color .15s ease, border-color .15s ease;
}
.erg-test-link:hover{
  color:var(--blue-hover,#5C90FF);
  border-color:var(--blue-hover,#5C90FF);
}