/* XKLA · Grupo C (contacto): /hablemos/ y /trabaja-con-nosotros/
   Prefijos propios: cn- (cabecera de Hablemos), brief (el brief por pasos), bo (opciones grandes), tn- (Trabaja con nosotros).
   Solo usa los tokens y componentes del sistema (sistema.css). Movimiento: recorte y escala, nunca fade-up.

   Índice
   1 · Hablemos: cabecera y canales
   2 · Brief: contenedor, progreso y pasos
   3 · Brief: opciones grandes (.bo)
   4 · Brief: campos, navegación, resumen y éxito
   5 · Qué pasa después
   6 · Trabaja con nosotros
   7 · Responsive y reduced-motion */

/* 1 · Hablemos: cabecera y canales ----------------------------------------- */
.cn-cab { align-items: end; }
.cn-cab__izq { grid-column: 1 / span 7; }
.cn-cab__izq .h1 { max-width: 17em; }
.cn-cab__izq .pagina-cab__entradilla { grid-column: auto; max-width: 40ch; }
.cn-canales { grid-column: 9 / -1; display: grid; justify-items: start; gap: 0; }
.cn-wa { width: 100%; min-height: clamp(64px, 3.2vw + 24px, 96px); font-size: var(--t21); padding: 0 32px; }
.cn-canales__num { margin-top: 12px; font-size: var(--t17); font-variant-numeric: tabular-nums; }
.cn-canales__correo { margin-top: clamp(28px, 2.2vw, 44px); }
.cn-canales__dir { margin-top: 20px; font-size: var(--t17); line-height: 1.5; }

/* 2 · Brief: contenedor, progreso y pasos ---------------------------------- */
.brief-sec { padding: 0 var(--m) var(--seccion); scroll-margin-top: calc(var(--cab) + 8px); }
/* El fondo del marco va en ::before: cuando cambia el alto del paso, contacto.js lo escala (transform) en vez de saltar */
.brief::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grafito-2); border-radius: 4px; transform-origin: 50% 0; }
.brief {
  --bq: clamp(36px, .714vw + 37.7px, 56px);          /* la pregunta: 40 → 56 px */
  position: relative; isolation: isolate; border-radius: 4px;
  padding: clamp(20px, 2.4vw, 64px) clamp(16px, 2.4vw, 64px) clamp(24px, 2.6vw, 72px);
  display: grid; row-gap: clamp(16px, 1.4vw, 28px); overflow: hidden; overflow: clip visible;   /* recorta a los lados (la escala de los pasos), no abajo (el fondo se desliza) */
}
.brief__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.brief__titulo { font-weight: 600; font-variation-settings: "opsz" 96; letter-spacing: -.01em; }
.brief__contador { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Línea continua que se llena (no tramos): sólo transform */
.brief__progreso { position: relative; height: 2px; background: var(--linea); border-radius: 1px; overflow: hidden; }
.brief__progreso > span {
  position: absolute; inset: 0; background: var(--hueso); transform-origin: 0 50%; transform: scaleX(.14);
  transition: transform .7s var(--escala);
}
.no-js .js-solo, .js .js-solo-no { display: none; }
.no-js .brief__cab { display: none; }

.brief__pasos { position: relative; }   /* sin alto reservado: mide lo que el paso activo (sin huecos) */
.brief__paso {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; align-content: start;
}
.brief__paso { padding-top: clamp(12px, 2vw, 48px); transform-origin: 50% 0; }
.no-js .brief__paso + .brief__paso { margin-top: clamp(56px, 6vw, 120px); }
.brief__enun { grid-column: 1 / span 5; }
.brief__resp { grid-column: 6 / -1; display: grid; gap: 28px; align-content: start; min-width: 0; }
.brief__q {
  font-size: var(--bq); line-height: 1.06; font-weight: 600; letter-spacing: -.012em;
  font-variation-settings: "opsz" 96; text-wrap: balance; scroll-margin-top: calc(var(--cab) + 24px);
}
.brief__q:focus-visible { outline: none; }           /* se enfoca por código; el cambio de pantalla ya lo anuncia */
.brief__hint { margin-top: 20px; color: var(--hueso-2); font-size: var(--t17); max-width: 36ch; }

/* Con JS, sólo el paso activo (y el que sale, durante la transición) */
/* Los pasos ocultos siguen maquetados (fuera del flujo y sin ver): al cambiar de pantalla no hay layout nuevo */
.js .brief__paso { position: absolute; inset: 0 0 auto 0; visibility: hidden; pointer-events: none; }
.js .brief__paso.activo { position: relative; visibility: visible; pointer-events: auto; }
.js .brief__paso.saliendo { position: absolute; visibility: visible; }
.js .brief__paso.saliendo { z-index: 1; pointer-events: none; }
.no-js .brief__exito { display: none; }

.brief__grupo { display: grid; gap: clamp(28px, 2.4vw, 44px); }
.brief__grupo > .campo + .campo { margin-top: 0; }

/* 3 · Brief: opciones grandes (.bo) ---------------------------------------- */
.bo-lista { display: grid; gap: 12px; }
.bo-lista--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-lista--chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bo { position: relative; display: block; min-width: 0; }
.bo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.bo__caja {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: calc(var(--t21) * 3.5); padding: 14px 20px;
  border: 1px solid rgba(236, 234, 228, .28); border-radius: 2px;
  font-size: var(--t21); line-height: 1.25; font-weight: 500; background: var(--grafito);
  transition: background-color .35s var(--escala), color .35s var(--escala), border-color .35s var(--escala);
}
.bo--chip .bo__caja { min-height: calc(var(--t17) * 3); padding: 8px 20px; font-size: var(--t17); font-weight: 400; }
.bo__marca {
  flex: none; position: relative; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 2px; opacity: .6;
  transition: opacity .3s linear;
}
.bo__marca::after {
  content: ""; position: absolute; inset: 4px; background: currentColor; transform: scale(0);
  transition: transform .35s var(--escala);
}
.bo input[type="radio"] ~ .bo__caja .bo__marca,
.bo input[type="radio"] ~ .bo__caja .bo__marca::after { border-radius: 50%; }
.bo input:checked ~ .bo__caja { background: var(--hueso); color: var(--grafito); border-color: var(--hueso); }
.bo input:checked ~ .bo__caja .bo__marca { opacity: 1; }
.bo input:checked ~ .bo__caja .bo__marca::after { transform: scale(1); }
.bo input:focus-visible ~ .bo__caja { outline: 2px solid var(--senal); outline-offset: 3px; }
@media (hover: hover) {
  .bo input:not(:checked):hover ~ .bo__caja { border-color: rgba(236, 234, 228, .7); background: #222220; }
}
.campo[data-error] .bo__caja { border-color: var(--senal); }

/* 4 · Brief: campos, navegación, resumen y éxito --------------------------- */
.brief .campo + .campo { margin-top: 0; }
.brief .campo__control { background: var(--grafito); min-height: calc(var(--t21) * 2.8); font-size: var(--t21); padding: 12px 18px; }
.brief textarea.campo__control { min-height: 0; }
.brief .campo__etiqueta { font-size: var(--t17); }
.brief .campo { gap: 10px; }
.brief .campo__ayuda { font-size: var(--t15); }
.brief fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.brief legend { padding: 0; margin-bottom: 10px; }
.brief .campo__error { font-size: var(--t15); }
.brief__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--g); }
.brief__cop[hidden] { display: none; }
.brief__casilla { gap: 16px; font-size: var(--t21); line-height: 1.35; align-items: start; }
.brief__casilla input { width: 28px; height: 28px; margin: 3px 0 0; flex: none; accent-color: var(--hueso); }
.brief__casilla .enlace-texto { text-underline-offset: .2em; }
.brief__nota { color: var(--hueso-2); }

.brief__nav {
  margin-top: clamp(20px, 2vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
  padding-left: calc((100% - 11 * var(--g)) / 12 * 5 + 5 * var(--g));   /* alineado con la columna de respuestas (6) */
}
.brief__nav .boton-lleno { min-width: 200px; }
.brief__nav .boton-borde { min-height: 52px; padding: 0 22px; font-size: var(--t17); }
.brief [hidden] { display: none !important; }
.brief__enter { margin-left: 4px; }
@media (hover: none), (pointer: coarse) { .brief__enter { display: none; } }
.brief__error-envio { padding-left: calc((100% - 11 * var(--g)) / 12 * 5 + 5 * var(--g)); }
.js .brief[data-final] [data-atras], .js .brief[data-final] [data-sig], .js .brief[data-final] [data-enter] { display: none; }

/* Resumen: filas de lectura, sin filetes */
.brief__resumen { display: grid; gap: 0; }
.brief__fila { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; column-gap: var(--g); align-items: baseline; padding-block: 14px; }
.brief__fila dt { color: var(--hueso-2); font-size: var(--t15); }
.brief__fila dd { margin: 0; font-size: var(--t17); overflow-wrap: anywhere; }
.brief__fila dd .secundario { display: block; }
.brief__cambiar { font-size: var(--t15); min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; }
.brief__grupo-resumen { margin-top: 20px; font-size: var(--t15); color: var(--hueso-2); }
.brief__grupo-resumen:first-child { margin-top: 0; }
.brief__exito .brief__q { max-width: 16em; }
.brief__exito-enlaces { margin-top: 28px; }
[data-sig][aria-busy="true"] { opacity: .7; }

/* 5 · Qué pasa después ------------------------------------------------------ */
.cn-despues__lista { display: grid; gap: 14px; }
.cn-despues__lista strong { font-weight: 600; }

/* 6 · Trabaja con nosotros -------------------------------------------------- */
.tn-estado { grid-column: 1 / span 7; margin-top: clamp(28px, 2.4vw, 48px); font-size: var(--t17); color: var(--hueso); max-width: 46ch; }
.tn-estado strong { font-weight: 600; }
.tn-pasos { grid-column: 6 / -1; display: grid; gap: clamp(36px, 3.2vw, 72px); }
.tn-paso h3 { font-size: var(--t28); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; font-variation-settings: "opsz" 96; }
.tn-paso p { margin-top: 10px; max-width: 52ch; }
.tn-gesto { font-size: var(--h2); line-height: 1.04; font-weight: 600; letter-spacing: -.01em; font-variation-settings: "opsz" 96; text-wrap: balance; max-width: 14em; }
.tn-mesa { display: grid; gap: 22px; }
.tn-mesa strong { font-weight: 600; }
.tn-izq { grid-column: 1 / span 5; align-self: start; }
.tn-izq > * + * { margin-top: 20px; }
.tn-izq .enlace--grande { margin-top: 28px; }
.tn-form { grid-column: 7 / -1; }
.tn-form .campo + .campo { margin-top: 32px; }
.tn-form .campo__control { background: var(--grafito-2); }
.tn-form fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.tn-form legend { padding: 0; margin-bottom: 10px; font-size: var(--t15); }
.tn-form .opcion span { min-height: 48px; }
.tn-form .casilla { margin-top: 32px; font-size: var(--t17); }
.tn-form .casilla input { width: 24px; height: 24px; margin-top: 3px; flex: none; }
.tn-form .boton-lleno { margin-top: 32px; min-height: 60px; padding: 0 32px; }
.tn-form .campo__error { min-height: 0; }
.tn-exito[hidden] { display: none; }
.tn-exito .tn-gesto { font-size: var(--t56); }
.tn-exito p { margin-top: 20px; }

/* 7 · Responsive y reduced-motion ----------------------------------------- */
@media (max-width: 1279px) and (min-width: 900px) {
  .brief__enun { grid-column: 1 / span 5; }
  .brief__resp { grid-column: 6 / -1; }
}
@media (max-width: 899px) {
  .cn-cab { align-items: start; }
  .cn-cab__izq, .cn-canales { grid-column: 1 / -1; }
  .cn-canales { margin-top: 32px; }
  .cn-wa { min-height: 64px; }
  .brief { --bq: 34px; padding: 16px 16px 24px; }
  .brief__enun, .brief__resp { grid-column: 1 / -1; }
  .brief__hint { margin-top: 14px; max-width: none; }
  .brief__paso { row-gap: 24px; padding-top: 8px; }
  .bo-lista--dos { grid-template-columns: 1fr; }
  .bo__caja { min-height: 64px; }
  .brief__grid2 { grid-template-columns: 1fr; }
  .brief__nav { padding-left: 0; }
  .brief__nav .boton-lleno { flex: 1 1 auto; }
  .brief__error-envio { padding-left: 0; }
  .brief__fila { grid-template-columns: 1fr auto; row-gap: 2px; }
  .brief__fila dt { grid-column: 1 / -1; }
  .brief__casilla { font-size: var(--t17); }
  .tn-estado, .tn-pasos, .tn-izq, .tn-form { grid-column: 1 / -1; }
  .tn-pasos { margin-top: 28px; }
  .tn-form { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .brief__progreso > span { transition: none; }
}
.reducido .brief__progreso > span, .reducido .bo__caja, .reducido .bo__marca::after { transition: none; }
/* Rendimiento: cada paso es una isla de layout (el cambio de pantalla no recalcula la página entera) */
.js .brief__paso { contain: layout paint style; }