/* ZENDA LAB · componentes de las subpáginas. Se carga después de c.css y usa sus mismas variables. */

.sub-apertura { padding: 180px 0 96px; }
.sub-apertura .oficio { margin-bottom: 22px; }
.sub-apertura h1 { font-size: clamp(42px, 6.2vw, 92px); line-height: .98; font-weight: 560; letter-spacing: -.035em; max-width: 17ch; }
.sub-apertura .bajada { margin: 28px 0 0; max-width: 46ch; }
.sub-apertura .acciones { justify-content: flex-start; margin-top: 40px; }

.seccion { padding: 112px 0; border-top: 1px solid var(--regla); }
.seccion-oscura { background: var(--negro); color: #fff; border-top: 0; }
.seccion-hundida { background: var(--hundido); border-top: 0; }
.seccion h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1; font-weight: 560; letter-spacing: -.03em; max-width: 20ch; }
.seccion .entrada { font-size: 19px; color: var(--sec); max-width: 52ch; margin-top: 20px; }
.seccion-oscura .entrada, .seccion-oscura .pie { color: #A9AAAA; }
.reticula-2 { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }

/* Calculadora */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 56px; align-items: start; }
.calc-campo { padding: 20px 0 24px; border-top: 1px solid var(--regla-fuerte); }
.calc-campo:last-of-type { border-bottom: 1px solid var(--regla-fuerte); }
.calc-campo label { display: flex; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 17px; margin-bottom: 14px; }
.calc-campo label output { font-weight: 400; color: var(--sec); }
.calc-campo .fila { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 16px; align-items: center; }
.calc-campo input[type=range] { width: 100%; height: 32px; accent-color: var(--negro); }
.calc-campo input[inputmode] { font: inherit; font-size: 17px; padding: 9px 10px; border: 1px solid var(--regla-fuerte); border-radius: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.calc-campo .ejemplos { font-size: 14px; color: var(--ter); margin-top: 12px; }
.calc-resultado { background: var(--negro); color: #fff; padding: 36px 34px 32px; border-radius: 3px; }
.calc-resultado .rotulo { color: #A9AAAA; }
.calc-resultado p.frase { font-size: 21px; line-height: 1.4; margin-top: 16px; }
.calc-resultado strong { font-size: clamp(34px, 3.4vw, 46px); font-weight: 600; letter-spacing: -.02em; display: block; margin: 6px 0 2px; }
.calc-resultado .supuesto { font-size: 13px; color: #A9AAAA; margin-top: 22px; padding-top: 16px; border-top: 1px solid #333; }

/* Rutas por oficio */
.rutas-pestanas { display: flex; flex-wrap: wrap; gap: 28px; border-bottom: 1px solid var(--regla-fuerte); margin-top: 44px; }
.rutas-pestanas button { font: inherit; font-size: 17px; font-weight: 600; background: none; border: 0; padding: 0 0 14px; cursor: pointer; color: var(--ter); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rutas-pestanas button[aria-selected="true"] { color: var(--negro); border-bottom-color: var(--negro); }
.rutas-texto { padding-top: 30px; max-width: 58ch; }
.rutas-texto h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 560; letter-spacing: -.02em; }
.rutas-texto p { color: var(--sec); margin-top: 14px; }
.rutas-texto a { color: var(--negro); }

/* Pasos numerados */
.lista-pasos { list-style: none; margin-top: 48px; counter-reset: p; }
.lista-pasos li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--regla-fuerte); }
.lista-pasos li:last-child { border-bottom: 1px solid var(--regla-fuerte); }
.lista-pasos li::before { counter-increment: p; content: counter(p, decimal-leading-zero); font-size: 15px; font-weight: 600; color: var(--ter); padding-top: 4px; }
.lista-pasos b { display: block; font-size: 22px; font-weight: 600; }
.lista-pasos p { color: var(--sec); margin-top: 8px; max-width: 58ch; }
.seccion-oscura .lista-pasos li { border-color: #333; }
.seccion-oscura .lista-pasos p, .seccion-oscura .lista-pasos li::before { color: #A9AAAA; }

.tira { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; border-top: 1px solid var(--regla-fuerte); border-bottom: 1px solid var(--regla-fuerte); }
.tira span { flex: 1 1 220px; padding: 18px 22px 18px 0; font-size: 17px; }
.tira span + span { border-left: 1px solid var(--regla-fuerte); padding-left: 22px; }

/* Formulario */
.formulario { display: grid; gap: 22px; }
.formulario .dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.campo input { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 12px 12px; border: 1px solid var(--regla-fuerte); border-radius: 2px; background: #fff; color: var(--negro); }
.campo input:focus { outline: 2px solid var(--negro); outline-offset: 1px; }
.seccion-oscura .campo input { border-color: #444; }
.casilla { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.45; }
.casilla input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--rojo); }
.casilla a { color: inherit; }
.formulario .boton { justify-self: start; }
.formulario .boton[disabled] { opacity: .6; cursor: wait; }
.estado { font-size: 16px; min-height: 1.5em; }
.estado.error { color: #FF8A9B; }
.seccion:not(.seccion-oscura) .estado.error { color: var(--rojo); }

/* Texto legal */
.legal { max-width: 70ch; }
.legal h2 { font-size: 26px; letter-spacing: -.01em; margin-top: 48px; max-width: none; }
.legal p, .legal li { color: var(--sec); margin-top: 14px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--negro); }

/* Índice de herramientas */
.indice { list-style: none; margin-top: 48px; border-top: 1px solid var(--regla-fuerte); }
.indice li { border-bottom: 1px solid var(--regla-fuerte); }
.indice a { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 32px; align-items: baseline; padding: 30px 0; text-decoration: none; }
.indice b { font-size: clamp(22px, 2.2vw, 30px); font-weight: 560; letter-spacing: -.02em; }
.indice span { color: var(--sec); }
.indice em { font-style: normal; font-weight: 600; white-space: nowrap; }
.indice em::after { content: " →"; }
.indice a:hover b, .indice a:hover em { color: var(--rojo); }
.indice .que { display: block; font-size: 14px; color: var(--ter); margin-top: 6px; }

@media (max-width: 900px) {
  .sub-apertura { padding: 140px 0 64px; }
  .reticula-2, .calc, .formulario .dos { grid-template-columns: 1fr; gap: 36px; }
  .seccion { padding: 80px 0; }
  .indice a { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .tira span + span { border-left: 0; padding-left: 0; border-top: 1px solid var(--regla-fuerte); }
  .tira span { flex-basis: 100%; }
}
.sub-apertura + .seccion:not(.seccion-hundida):not(.seccion-oscura) { padding-top: 0; border-top: 0; }