/* ═══════════════════════════════════════════════════════════════
   templa — Shell de herramientas

   Se carga DESPUÉS de styles.css y sólo añade lo que la landing no
   tiene. Los tokens, el navbar, el spine, los botones y los campos
   de formulario vienen todos de allá.

   Cada página declara su área con una clase en <body>: el color de
   la parada tiñe el logo, la regla del encabezado y los acentos.
   Es el mismo sistema de la landing, no uno paralelo.
   ═══════════════════════════════════════════════════════════════ */

/* La regla de `[hidden]` vive ahora en styles.css, que es la hoja base que
   cargan todas las páginas — incluida la landing, donde la misma trampa
   dejaba visible el botón de descarga del modal. No se duplica aquí. */

.tool--finanzas      { --area: var(--verde);    --logo-color: var(--verde); }
.tool--empleabilidad { --area: var(--petroleo); --logo-color: var(--petroleo); }
.tool--mentoria      { --area: var(--cobre);    --logo-color: var(--cobre); }
.tool--bienestar     { --area: var(--ciruela);  --logo-color: var(--ciruela); }
.tool--habilidades   { --area: var(--indigo);   --logo-color: var(--indigo); }
.tool--talleres      { --area: var(--ambar);    --logo-color: var(--ambar); }

/* ─── Encabezado ─────────────────────────────────────────────── */
.tool-hero {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
  background: var(--ground);
}

.tool-hero__inner {
  max-width: 62ch;
}

.tool-hero__back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.tool-hero__back:hover {
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}

/* Misma regla de área que la landing: dice de qué trata, no es un eyebrow */
.tool-hero__rule {
  width: 52px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--area);
  margin-bottom: 1.35rem;
}

.tool-hero__title {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-variation-settings: 'wdth' 106, 'wght' 800;
  margin-bottom: 0.9rem;
}

.tool-hero__lead {
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ─── Cuerpo ─────────────────────────────────────────────────── */
.tool-body {
  padding-block: 0 clamp(3rem, 7vw, 5rem);
  background: var(--ground);
}

.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Panel de entrada ───────────────────────────────────────── */
.panel {
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--area);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.panel--sticky {
  position: sticky;
  top: calc(var(--nav-h) + 1.25rem);
}

@media (max-width: 900px) {
  .panel--sticky {
    position: static;
  }
}

.panel__title {
  margin-bottom: 1.25rem;
}

/* .form-group es un grid sin margen propio: en la landing lo separa el gap
   del contenedor. Aquí van sueltos dentro del panel y necesitan su aire. */
.panel .form-group + .form-group {
  margin-top: 1.15rem;
}

/* Encabezado de un bloque de resultado. No es un h2 de sección: no debe
   competir con el título de la página. */
.out__section-title {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variation-settings: 'wdth' 102, 'wght' 700;
  margin-bottom: 0.85rem;
}

.field-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* Grupo de opciones tipo segmento, para modalidad vencida/anticipada */
.segmented {
  display: flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-surface);
  overflow: hidden;
}

.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.4rem;
  font-size: 0.875rem;
  font-variation-settings: 'wdth' 100, 'wght' 550;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.segmented label + input + label {
  border-left: 1px solid var(--rule-strong);
}

.segmented input:checked + label {
  background: var(--area);
  color: #FFF;
}

.segmented input:focus-visible + label {
  outline: 2px solid var(--petroleo);
  outline-offset: -2px;
}

/* ─── Resultado ──────────────────────────────────────────────── */
.out {
  display: grid;
  gap: 1.25rem;
}

.out__headline {
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--area) 55%, transparent);
}

.out__label {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.out__value {
  display: block;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 104, 'wght' 800;
  color: var(--area);
  font-variant-numeric: tabular-nums;
}

.out__sub {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.out__error {
  color: var(--danger);
  font-variation-settings: 'wdth' 100, 'wght' 600;
}

/* Cifras secundarias en fila */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
}

.stat {
  background: var(--ground-raised);
  padding: 1rem 1.1rem;
}

.stat__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}

.stat__value {
  display: block;
  font-size: 1.25rem;
  line-height: 1.2;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-variant-numeric: tabular-nums;
}

/* ─── Aviso de usura ─────────────────────────────────────────── */
.usura {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-surface);
  border-left: 3px solid var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  font-size: 0.9375rem;
}

.usura--cerca {
  border-left-color: var(--ambar);
  background: color-mix(in srgb, var(--ambar) 12%, transparent);
}

.usura--excede {
  border-left-color: var(--danger);
  background: var(--danger-ground);
}

.usura__title {
  font-variation-settings: 'wdth' 100, 'wght' 700;
}

.usura__meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* ─── Tablas ─────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--ground-raised);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.data-table caption {
  text-align: left;
  padding: 1rem 1.1rem 0.5rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.data-table th,
.data-table td {
  padding: 0.6rem 1.1rem;
  text-align: right;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
}

.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--ground-alt);
  font-size: 0.8125rem;
  font-variation-settings: 'wdth' 100, 'wght' 650;
  color: var(--ink-soft);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td,
.data-table tbody tr:hover th {
  background: var(--ground-alt);
}

.data-table__scroll {
  max-height: 26rem;
  overflow-y: auto;
}

/* ─── Comparación de escenarios ──────────────────────────────── */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.scenario {
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
  border-radius: var(--r-card);
  padding: 1.25rem;
}

.scenario--win {
  border-top-color: var(--area);
  box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--area) 55%, transparent);
}

.scenario__tag {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.1rem 0.55rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-variation-settings: 'wdth' 96, 'wght' 650;
  background: var(--ground-alt);
  color: var(--ink-soft);
}

.scenario--win .scenario__tag {
  background: color-mix(in srgb, var(--area) 16%, transparent);
  color: var(--area);
}

.scenario__title {
  margin-bottom: 0.75rem;
}

.scenario__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.scenario__list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.scenario__list dt {
  color: var(--ink-faint);
}

.scenario__list dd {
  margin: 0;
  font-variation-settings: 'wdth' 100, 'wght' 650;
  font-variant-numeric: tabular-nums;
}

/* ─── Nota al pie / descargo ─────────────────────────────────── */
.tool-note {
  margin-top: 2rem;
  padding: 1.1rem 1.3rem;
  background: var(--ground-alt);
  border-radius: var(--r-surface);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.tool-note strong {
  color: var(--ink);
}

.tool-note p + p {
  margin-top: 0.75rem;
}

/* El veredicto de la comparación: misma caja que la nota, pegada a las
   tarjetas que explica. */
.tool-note--verdict {
  margin-top: 1rem;
}

/* ─── Cierre ─────────────────────────────────────────────────── */
.tool-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tool-cta__text {
  max-width: 46ch;
}

.tool-cta__title {
  margin-bottom: 0.3rem;
}

.tool-cta__sub {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* El resultado cambia al teclear; quien no ve la pantalla necesita saberlo,
   pero anunciar cada pulsación es ruido. La región es polite y el JS sólo
   actualiza el texto cuando el valor realmente cambió. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Cuestionario

   Una pregunta a la vez, grande, con teclado. Terminar diez debe
   tomar menos de 90 segundos en el celular, y eso obliga a que la
   respuesta avance sola y a que no haya nada más en pantalla.
   ═══════════════════════════════════════════════════════════════ */

.quiz {
  max-width: 42rem;
  margin: 0 auto;
}

.quiz__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.quiz__paso {
  font-size: 0.875rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.quiz__dim {
  font-size: 0.8125rem;
  font-variation-settings: 'wdth' 100, 'wght' 650;
  color: var(--area);
}

/* La barra de la ruta, llenándose pregunta a pregunta */
.quiz__ruta {
  display: flex;
  gap: 3px;
  margin-bottom: 2rem;
}

.quiz__tramo {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--ground-sunk);
  transition: background-color var(--slow) var(--ease);
}

.quiz__tramo--hecho { background: var(--area); }

.quiz__pregunta {
  text-align: center;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-variation-settings: 'wdth' 104, 'wght' 700;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

/* Tarjetas, una debajo de la otra, en una columna centrada y más estrecha
   que la pregunta.

   El texto DENTRO de cada tarjeta va a la izquierda, no centrado. Centrarlo
   dejaba seis rótulos de distinto largo con márgenes distintos cada uno, y
   eso es lo que se lee como desorden; alineados a la izquierda con la tecla
   siempre en el mismo sitio, el ojo recorre la lista en vertical. Y en fila
   la tarjeta mide ~52 px en vez de 104, así que las seis opciones caben en
   pantalla con la pregunta: se comparan de un vistazo en vez de scrolleando. */
.quiz__opciones {
  display: grid;
  gap: 0.5rem;
  /* 34rem, no 30: el rótulo más largo del scorecard son 61 caracteres y a
     30rem partía en dos líneas una sola fila de cinco. Sigue siendo más
     estrecha que la pregunta (42rem), que es lo que las separa visualmente. */
  max-width: 34rem;
  margin: 0 auto 1.5rem;
}

.quiz__opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: start;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 1.1rem;
  text-align: left;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(16, 31, 34, 0.04);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease),
    background-color var(--fast) var(--ease),
    transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

/* Se levanta, no se desplaza: es una tarjeta, igual que las de la landing */
.quiz__opcion:hover {
  border-color: var(--area);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--area) 50%, transparent);
}

.quiz__opcion--elegida {
  border-color: var(--area);
  background: color-mix(in srgb, var(--area) 8%, var(--ground-raised));
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--area) 50%, transparent);
}

/* La tecla que la dispara, a la izquierda y en columna: alineadas una sobre
   otra funcionan como índice de la lista. En móvil no hay teclado que usar,
   pero igual numera la opción. */
.quiz__tecla {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-surface);
  background: var(--ground-alt);
  font-size: 0.75rem;
  font-variation-settings: 'wdth' 100, 'wght' 650;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.quiz__opcion:hover .quiz__tecla,
.quiz__opcion--elegida .quiz__tecla {
  background: var(--area);
  color: #FFF;
}

/* Micro-aprendizaje: aparece al responder, y es la razón por la que se
   termina el cuestionario en vez de abandonarlo. */
.quiz__aprendizaje {
  display: flex;
  gap: 0.75rem;
  max-width: 32rem;
  margin: 0 auto 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--ground-alt);
  border-left: 3px solid var(--area);
  border-radius: var(--r-surface);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.quiz__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.quiz__pista {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

@media (max-width: 620px) {
  .quiz__pista { display: none; }   /* no hay teclado que mencionar */
}

/* ─── Resultado ──────────────────────────────────────────────── */
.res__parada {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.75rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--area) 14%, transparent);
  color: var(--area);
  font-size: 0.8125rem;
  font-variation-settings: 'wdth' 96, 'wght' 650;
}

.res__nombre {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 104, 'wght' 750;
  margin-bottom: 0.6rem;
}

.res__resumen {
  color: var(--ink-soft);
  max-width: 54ch;
}

/* Las ocho dimensiones */
.barras {
  display: grid;
  gap: 0.85rem;
}

.barra {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr auto;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.9375rem;
}

.barra__nombre { color: var(--ink-soft); }

.barra--debil .barra__nombre {
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 650;
}

.barra__pista {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--ground-sunk);
  overflow: hidden;
}

.barra__valor {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--area);
  transition: width var(--slow) var(--ease);
}

.barra__cifra {
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.2rem;
  text-align: right;
}

@media (max-width: 620px) {
  .barra {
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.85rem;
  }
  .barra__pista { grid-column: 1 / -1; }
}

/* El plan */
.plan {
  display: grid;
  gap: 0.85rem;
  counter-reset: paso;
}

.plan__item {
  padding: 1.1rem 1.25rem;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

.plan__titulo {
  margin-bottom: 0.35rem;
}

.plan__cuerpo {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* Puerta del PDF: la herramienta es gratis, llevarte el plan cuesta un correo */
.puerta {
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--area);
  border-radius: var(--r-card);
}

.puerta__titulo { margin-bottom: 0.4rem; }

.puerta__sub {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.puerta__campos {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 540px) {
  .puerta__campos { grid-template-columns: 1fr 1fr; }
}

.puerta__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.puerta__aviso {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.puerta__aviso--error { color: var(--danger); }

.tool-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.out__section-title--apart { margin-top: 2rem; }

.puerta { margin-top: 2rem; }

.quiz__nav--fin { margin-top: 1.5rem; }

/* ─── El resultado en pantalla es un abrebocas ────────────────
   El detalle va en el PDF. En pantalla se muestra la puntuación,
   la posición y la próxima parada; lo demás se anuncia para que
   se entienda qué se está pidiendo a cambio del correo. */
.adelanto {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--ground-alt);
  border-radius: var(--r-card);
}

/* No es un h2 de sección: no debe competir con la puntuación, que es la
   cifra que tiene que ganar en esa pantalla. */
.adelanto__titulo {
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  margin-bottom: 0.2rem;
}

.adelanto__lista {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.adelanto__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.adelanto__lista li::before {
  content: '';
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--area);
}

/* ─── Página de taller ───────────────────────────────────────────
   Usa el mismo esqueleto que las herramientas, con las columnas al revés:
   el contenido manda y la reserva va al lado. */
.tool-grid--aside {
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
}

@media (max-width: 900px) {
  .tool-grid--aside {
    grid-template-columns: 1fr;
  }
}

/* Los datos del taller son un <dl>: el navegador sangra los <dd>.
   Flex y no el grid de .stats: son cinco, y en grid la última fila quedaba
   con celdas vacías pintadas del gris del separador. Con flex cada fila se
   estira hasta llenarse, sea cual sea el ancho. */
.taller__datos {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0.6rem;
}
.taller__datos .stat { flex: 1 1 8.5rem; }
.taller__datos dd { margin: 0; }

.taller__h {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.taller__texto {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.taller__temario,
.taller__pasos {
  display: grid;
  gap: 0.55rem;
  max-width: var(--measure);
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink-soft);
}

.taller__temario { list-style: disc; }
.taller__pasos   { list-style: decimal; }

.taller__temario li::marker,
.taller__pasos li::marker { color: var(--area); }

.taller__pasos strong { color: var(--ink); }

.panel .segmented { margin-top: 0.1rem; }

/* Un h2 suelto toma el tamaño de título de sección; en un panel de 23rem
   «Reserva tu cupo» partía en dos líneas enormes. */
.panel__title--form {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.2;
}

.panel form > .btn { margin-top: 1.4rem; }
.taller__pagar { margin-top: 1rem; }

.stat__nota {
  display: block;
  font-size: 0.8125rem;
  font-variation-settings: 'wdth' 100, 'wght' 450;
  color: var(--ink-faint);
}