/* Wots · Chief of Agents — home-b.css: secciones 5–10 de la home (Preguntas, Producto, Once industrias,
   Cómo trabajamos, Actualidad, Cierre + FAQ). Requiere base.css. Prefijos propios: .quiz .prod .stage
   .ind .hw .migra .news .talks .close · motion solo transform/opacity · ver _docs/GUIA-COMPONENTES.md
   Ronda 31-08: #industrias se rehízo como muro de <details> (.ind*, §11 del brief) y «Cómo trabajamos»
   estrenó tarjetas propias y panel de llamado (.hw*, §12); se fueron .vert*, .step--key y .how__foot.
   Ronda 30-08: se fueron .cifras (franja de cifras al pie de Industrias) y el filtro doble .vert__filter.
   Ronda 30-08 (2ª pasada): #preguntas RECUPERA la revelación «Necesitas Wots.» (.quiz__need, enmienda del
   fundador) como remate del cierre, y las charlas llevan la bandera de su país (.flag, SVG del sprite). */

/* ---- 5. Preguntas (brief del fundador 30-08b: cuatro preguntas mapeadas a los cuatro verbos) ----
   La etiqueta del verbo repite el tratamiento de las píldoras del anillo del hero —píldora, versalita
   espaciada, verde— para que se lea como el MISMO sistema: apagada mientras la pregunta no se ha leído,
   encendida cuando pasa por la línea de lectura, igual que el frente que recorre el anillo.
   La respuesta se revela después de la pregunta (opacidad, sin reservar ni soltar espacio: cero salto de
   layout). Sin html.js todo está visible desde el primer pintado (D20) y el texto siempre está en el DOM. */
.quiz__list { margin-top: var(--space-head); border-top: 1px solid var(--line); }
/* La 2ª columna se dimensiona por el texto (los max-width de .quiz__q y .quiz__a ya lo
   acotan) y no por la retícula completa: así la etiqueta del verbo queda JUNTO a la
   pregunta que califica y no a 400 px, al otro extremo de la fila. El texto envuelve igual. */
.quiz__item { display: grid; grid-template-columns: 48px minmax(0, max-content) auto; gap: 8px 20px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.quiz__n { padding-top: .45em; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted-deep); transition: color var(--dur-3) var(--ease-out); }
.quiz__item.is-past .quiz__n { color: var(--green-2); }
.quiz__q { font-size: var(--fs-quiz-q); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); max-width: 34ch; text-wrap: pretty; }
/* Tarjeta 02: el fundador pide las dos preguntas en líneas separadas, dentro del mismo encabezado. */
.quiz__ln { display: block; }
.quiz__ln + .quiz__ln { margin-top: .12em; }
.quiz__a { margin-top: 8px; font-size: 1.0625rem; color: var(--ink-2); max-width: 60ch; }
html.js .quiz__a { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
html.js .quiz__item.is-past .quiz__a { opacity: 1; transform: none; }
.quiz__chief { color: var(--green-2); font-weight: 600; }
/* Las DOS caras de la etiqueta son, literal, las dos caras de las píldoras del anillo del hero
   (home-a.css .ring__st-bg / .ring__st-on .ring__st-bg): apagada = fondo del lienzo con contorno verde
   al 34 %, tinta clara; encendida = verde al 16 % con contorno verde pleno y tinta verde muy clara
   (#DCFCE7, el mismo literal de .ring__st-on .ring__st-t). Así CREA · ORQUESTA · GOBIERNA · MEJORA
   se leen como el mismo sistema que los cuatro verbos que giran arriba. */
.quiz__verb { display: inline-flex; justify-self: start; align-items: center; min-height: 24px; margin-top: .35em; padding: 3px 11px; border: 1px solid rgba(34,197,94,.34); border-radius: var(--r-pill); background: rgba(2,8,23,.6); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.quiz__item.is-past .quiz__verb { background: var(--green-a16); border-color: var(--green); color: #DCFCE7; }
/* Remate: veredicto → «Necesitas Wots.» → el único llamado a la acción de la sección. Es una pila,
   no una fila: la revelación es la respuesta a las cuatro preguntas y tiene que caer DESPUÉS del
   veredicto y ANTES del botón, en ese orden de lectura. */
.quiz__close { display: grid; justify-items: start; gap: clamp(8px, 1.2vw, 14px); margin-top: clamp(28px, 4vw, 44px); }
.quiz__verdict { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); max-width: 44ch; text-wrap: pretty; }
/* «Necesitas Wots.» conserva su tratamiento de siempre: letra hueca de contorno verde que se RELLENA
   de izquierda a derecha con el scroll. El relleno es un degradado recortado al texto y su ancho lo
   maneja --fill (0 % → 100 %), que home-b.js sube y nunca baja. Sin html.js el relleno nace al 100 %:
   sin JavaScript la frase se lee entera desde el primer pintado (D20) y siempre está en el DOM. */
.quiz__need { --fill: 100%; margin: 0; max-width: 100%; font-size: var(--fs-need); font-weight: 900; letter-spacing: -.035em; line-height: .92; text-wrap: balance; color: transparent; -webkit-text-stroke: 1px rgba(34,197,94,.42); background-image: linear-gradient(90deg, var(--green-3), var(--green)); background-repeat: no-repeat; background-size: var(--fill) 100%; -webkit-background-clip: text; background-clip: text; transition: background-size var(--dur-3) var(--ease-out); }
html.js .quiz__need { --fill: 0%; }
.quiz__btn { margin-top: clamp(6px, 1vw, 12px); }
/* Alto contraste de Windows: el relleno recortado al texto desaparece; base.css ya devuelve el color
   del sistema a .quiz__need, acá se apaga además el contorno para que no lo duplique. */
@media (forced-colors: active) { .quiz__need { -webkit-text-stroke: 0; } }
@media (prefers-reduced-motion: reduce) { .quiz__need { transition: none; } }
/* Mismo carril del FAB de WhatsApp que usaba el pie de #chief: entre 901 y 1366 px el botón
   flotante (56 px + 20 px de margen) cae justo sobre el borde derecho del contenedor. */
@media (min-width: 901px) and (max-width: 1366px) { .quiz__close { padding-right: 64px; } }
@media (max-width: 640px) {
  .quiz__item { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .quiz__n { padding: 0; font-size: 12px; }
  .quiz__q { font-size: 1.25rem; }
  .quiz__a { font-size: .9375rem; }
  .quiz__verb { margin-top: 4px; }
  .quiz__close { justify-items: stretch; }
  .quiz__need { font-size: clamp(2.25rem, 11.5vw, 3.25rem); letter-spacing: -.03em; }
  .quiz__close .btn { width: 100%; }
}

/* ---- 6. Producto · product stage (01 A7 · §3.9) ---- */
.prod__h { max-width: 36ch; font-size: clamp(1.5rem, .9rem + 2.4vw, 3rem); }
@media (max-width: 400px) { .prod__h { font-size: 1.3125rem; letter-spacing: -.01em; text-wrap: pretty; } }
/* SIN acordeón y sin pantallas a la derecha (brief del fundador 06-09-2026): las siete cajas
   quedan en rejilla, todas abiertas. Antes eran una columna de 380 px con un marco de capturas
   al lado; al sacar las capturas el acordeón quedó muerto —el JS se protege y sale— y seis de
   las siete cajas no se podían abrir. */
.stage { display: block; }
.stage__list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stage__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.stage__item.is-active { border-color: var(--green-a35); background: linear-gradient(160deg, var(--green-a10), transparent 60%), var(--surface); }
.stage__h3 { font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: inherit; text-wrap: initial; }
.stage__tab { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; width: 100%; padding: 16px 16px 10px; text-align: left; }
.stage__tab .ico-box { grid-row: 1 / span 2; }
.stage__name { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.stage__promise { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.35; color: var(--muted); transition: color var(--dur-2) var(--ease-out); }
.stage__item.is-active .stage__promise { color: var(--ink-2); }
.stage.is-paused @keyframes stage-progress { to { transform: scaleX(1); } }
.stage__panel { display: block; }

.stage__body { padding: 0 16px 16px; }
.stage__body > :first-child { padding-top: 2px; }
.stage__body > :last-child { padding-bottom: 14px; }
.stage__body > p { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.stage__more { margin-top: 4px; }
.prod__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: clamp(28px, 3vw, 40px); padding-top: 24px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
.prod__foot p { max-width: 64ch; }
.prod__foot strong { color: var(--ink); }
/* Carril del FAB de WhatsApp (01 §3.8 · ESPEC §6 «nunca sobre un boton/input»): de 641 a
   1366 px el borde derecho del contenedor cae bajo el boton flotante (56 px + 20 px de
   margen). Se reservan 64 px en las filas con un control alineado a la derecha, asi el FAB no
   tiene que esconderse (core.js §10) al pasar por ellas: deja >=20 px de aire con el FAB y
   no fuerza el salto de linea de .prod__foot a 1024 px (con 88 px si lo forzaba). Sobre 1366 px el
   contenedor ya centra con margen suficiente; bajo 641 px la fila envuelve sola. */
@media (min-width: 641px) and (max-width: 1366px) {
  .prod__foot, .news__head, .talks__head { padding-right: 64px; }
}
/* El tab del modulo es ancho completo bajo 900 px: ahi su promesa llegaba a pasar bajo el FAB.
   Sobre 900 px vive en una columna de 380 px y reservar carril solo lo estrecharia. */
@media (min-width: 641px) and (max-width: 899px) {
  .stage__tab { padding-right: 64px; }
}
@media (max-width: 899px) {
  .stage { grid-template-columns: 1fr; }
  .stage__body { padding-inline: 12px; }
}

/* ---- 7. Once industrias · muro de ENLACES (recorte 1 del fundador, 08-09-2026) ----
   Antes cada celda era un <details> que desplegaba tres fricciones y ocho puntos de contacto: el
   mismo material que /industrias ya cuenta con otro texto. Ahora la celda queda en su forma
   CERRADA de siempre —el nombre de la industria como imagen, su línea de promesa debajo— y es un
   ENLACE a la página que sí desarrolla el caso. Con el acordeón se fue todo lo que lo vestía: el
   expediente de dos columnas, el rótulo «Abre la tuya…» y los estados [open].
   Sigue siendo un MURO de celdas (4 · 3 · 2 · 1 columnas): de un vistazo se ve cuántas industrias
   hay. Es FLEX y no grid porque las celdas se reparten el sobrante de su fila. ---- */
.ind-wall { display: flex; flex-wrap: wrap; gap: 14px; }
/* Las celdas NO se estiran a la altura de su fila. La doceava —la invitación, que además del
   nombre y la bajada lleva un botón— es unos 70 px más alta que una tarjeta de industria, y con
   el estirado por omisión arrastraba a las tres de su fila: a 1440 px Prensa y ONGs quedaban en
   270 px con más de la mitad de la caja vacía, y el halo del hover iluminaba el hueco. Sin
   estirado cada tarjeta mide lo suyo (mismo aire al pie en las doce) y el alto del muro no
   cambia: el sobrante de la última fila queda FUERA de las tarjetas, sobre el fondo. */
.ind-wall { align-items: flex-start; }
/* Cada celda es su propio contenedor de consulta: la tarjeta se maqueta según SU ancho, no según
   el de la ventana. Así, cuando una celda se ensancha —al apilarse en móvil, o al repartirse una
   fila corta— pasa sola a la forma de banda horizontal, en vez de quedar como una tarjeta angosta
   estirada con aire de sobra. Es lo que hace que el muro se vea intencional cuando reflowea. */
.ind-cell { display: flex; flex: 1 1 262px; min-width: 0; container-type: inline-size; }

.ind { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
/* La celda es una TARJETA-ENLACE con el patrón de .news__card (base.css §5): el <a> vive DENTRO
   del <h3> —así el gemelo /index.md lo escribe como enlace de verdad, y no como texto suelto— y
   un pseudo estirado lo lleva a cubrir la tarjeta completa, que queda entera como zona de clic.
   El anillo de foco lo dibuja la tarjeta (:focus-within), no el trozo de título. */
/* El pseudo se posiciona contra .ind__sum (el único ancestro con `position`), así que .ind__sum
   tiene que llegar al fondo de la tarjeta para que la zona de clic sea la tarjeta ENTERA y no
   solo el bloque de texto. Estirarlo no mueve nada: la rejilla alinea sus filas arriba. */
.ind--link .ind__sum { flex: 1 1 auto; }
.ind--link .ind__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ind--link:focus-within { outline: 2px solid var(--green-2); outline-offset: 3px; }
.ind--link .ind__t a:focus-visible { outline: none; }
.ind__sum { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n chev" "ico ico" "head head"; align-items: start; gap: 12px 10px; padding: 16px 16px 18px; border-radius: inherit; }
.ind__head { grid-area: head; display: block; min-width: 0; }
.ind__t { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.ind__p { display: block; margin-top: 6px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.ind__chev { grid-area: chev; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; color: var(--green-2); transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.ind__chev .icon { width: 16px; height: 16px; }

/* Ancha (abierta, o estirada porque su fila quedó corta): la cabecera se acuesta y pasa a ser la
   barra del expediente. El umbral es el ancho a partir del cual la forma vertical deja aire muerto. */
@container (min-width: 470px) {
  .ind__sum { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "n ico head chev"; align-items: center; gap: 0 16px; padding: 18px 20px; }
  .ind__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
  .ind__p { margin-top: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .ind:hover .ind__chev { border-color: var(--green-a35); }
}
@media (max-width: 640px) {
  .ind-wall { gap: 12px; }
  .ind-cell { flex-basis: 100%; }
}

/* ---- 8. Cómo trabajamos contigo · segunda vuelta (brief del fundador 31-08 §12) ----
   «Está un poco pobre el diseño de las tarjetas… el "hablemos ahora" está muy pobre también.»
   Las tarjetas dejan el componente genérico .steps y pasan a ser propias: el número vive dentro del
   hexágono de la marca y de ese hexágono sale un riel que muere en el borde de la tarjeta —así se
   lee la secuencia sin dibujar líneas ENTRE tarjetas, que es lo que se rompe al apilarse en móvil—,
   más dos etiquetas de qué recibes en cada paso. El 03 conserva el destaque: es el diferenciador.
   Y el llamado deja de ser un enlace de texto suelto: es un panel con copy y botón. El botón sigue
   siendo btn--ghost (D4 reserva los sólidos al menú, al hero y al cierre); lo que cambió es que
   ahora tiene una superficie que lo sostiene. ---- */
.hw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.hw__step { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.hw__step--key { border-color: var(--green-a35); background: linear-gradient(160deg, var(--green-a10), transparent 55%), var(--surface); }
.hw__badge { display: flex; align-items: center; gap: 12px; }
.hw__badge::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--green-a35), transparent); }
.hw__hex { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; color: var(--green-a35); }
.hw__hex .icon { width: 46px; height: 46px; }
.hw__n { position: absolute; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hw__step--key .hw__hex { color: var(--green-a16); }
.hw__step--key .hw__n { color: var(--green-2); }
.hw__t { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.hw__p { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.hw__step--key .hw__p { color: var(--ink); }
.hw__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.hw__tags span { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); }
.hw__step--key .hw__tags span { border-color: var(--green-a35); color: var(--green-2); }

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

/* Cámbiate a Wots · el complemento del llamado (31-08 §14: «Solicita tu cambio» + «te llamamos hoy
   mismo»). La ficha vive en base.css §5.17; solo la nota es de la portada. */
.migra__card__note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--green-2); }
.migra__card__note .icon { flex: none; }

/* ---- 9. Actualidad: noticias · charlas (01 M4 · §3.9).
   Ronda 30-08: cada noticia lleva la FOTO real del artículo (assets/news/*.webp, 800×450 tomadas
   del blog) en vez del pictograma sobre malla que había; el bloque de suscripción por correo
   (.nl, .nl__h, .nl__p, .nl__text, .nl__form) se eliminó entero con la sección. ---- */
.news__head, .talks__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 24px; }
.news__head .display--sm { max-width: none; }
.news__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.news__card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 0 0 22px; }
.news__card > :not(.news__art) { margin-inline: clamp(18px, 2vw, 24px); }
/* Foto real del artículo. 16/9 (no 8/3 como el pictograma anterior): a 2,67:1 una foto de
   personas se decapita. object-fit: cover recorta al centro sin deformar; width/height en el
   <img> reservan la caja y el CLS queda en 0 aunque la foto llegue tarde. */
.news__art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.news__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.news__meta time { font-variant-numeric: tabular-nums; }
.news__t { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.news__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.news__card:focus-within { outline: 2px solid var(--green-2); outline-offset: 3px; }
.news__t a:focus-visible { outline: none; }
.news__x { font-size: .9375rem; color: var(--ink-2); }
.talks { margin-top: clamp(36px, 5vw, 56px); }
.talks__h { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.875rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.kicker + .talks__h { margin-top: 10px; }
.talks__sub { margin-top: 8px; font-size: .9375rem; color: var(--ink-2); max-width: 56ch; }
.talks__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.talks__item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
/* Las tres fichas tienen títulos de largo muy distinto: sin esto el «Inscribirme» de cada una
   queda a una altura diferente y la fila se lee desordenada. El cuerpo es una columna y el
   botón se empuja al fondo. */
.talks__body { display: flex; flex-direction: column; height: 100%; }
.talks__cta { margin-top: auto; padding-top: 14px; }
.talks__date time { display: grid; place-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--r-md); background: var(--green-a10); border: 1px solid var(--green-a35); color: var(--green-2); text-align: center; line-height: 1; }
.talks__date b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: inherit; }
.talks__date span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.talks__t { margin-top: 8px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.talks__t a { color: inherit; transition: color var(--dur-2) var(--ease-out); }
.talks__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.talks__meta li { display: inline-flex; align-items: center; gap: 6px; }
.talks__meta .icon { width: 14px; height: 14px; color: var(--green-2); }
/* Bandera del país de cada charla (adenda A1). SVG propio del sprite, nunca emoji: en Windows el
   emoji de bandera se ve como dos letras. Va al final de la línea del lugar, con su nombre de país
   accesible en el aria-label, y con un filo claro para que el blanco de la bandera no se funda con
   la tarjeta. Relación 3:2, alineada ópticamente con los íconos de 14 px de la misma línea. */
.talks__nb { white-space: nowrap; }  /* la bandera nunca cae sola a la línea siguiente */
.flag { display: inline-block; width: 18px; height: 12px; flex: none; margin-left: 7px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.talks__badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* La invitación a un evento es un mailto: no lo ve core.js, así que lleva data-track y la
   portada carga page-recursos.js (GUÍA §5.19). */
.talks__invite { margin-top: 22px; font-size: var(--fs-sm); color: var(--muted); }
.talks__invite a { color: var(--green-2); text-decoration: underline; text-underline-offset: 3px; }
/* Entre 641 y 1024 px las charlas bajan a dos columnas. Las notas se quedan en TRES: la
   tercera no se oculta —era contenido que desaparecía en un ancho real, el iPad vertical— y
   en dos columnas la que sobra queda como fila coja o como una tarjeta el doble de alta que
   las otras dos. Con tres columnas estrechas las tres se leen igual. */
@media (max-width: 1024px) { .talks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .news__list { gap: 14px; } }
@media (max-width: 640px) {
  .news__list { display: flex; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .news__list::-webkit-scrollbar { display: none; }
  .news__list li { flex: 0 0 82vw; scroll-snap-align: start; display: flex; }
  .news__list li:nth-child(3) { display: flex; }
  .talks__list { grid-template-columns: 1fr; gap: 12px; }
  .talks__item { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px; }
  .talks__date b { font-size: 1.25rem; }
}

/* ---- 10. Cierre + FAQ ----
   Ronda 30-08: se fue la tarjeta «¿Prefieres hablar con una persona?» y con ella .close__grid y
   .close__human (la promesa de llamada en horario hábil no era real). Queda UNA sola tarjeta
   centrada con el mismo par del hero —botón sólido + cápsula de correo— y el mismo destino: la
   ventana de datos. */
/* El cierre es una sola columna centrada: el título va centrado, así que la tarjeta también.
   Los campos del formulario recuperan la alineación a la izquierda (un placeholder centrado
   dentro de un input se lee como un error de maquetación). */
.close__main { max-width: 760px; margin-inline: auto; padding: clamp(24px, 3vw, 40px); text-align: center; }
.close__main .close__p { margin-inline: auto; }
.close__main .mailcap input { text-align: left; }
.close__main .form__legal { margin-inline: auto; }
/* Tres señales de qué es la asesoría. Nada de cifras: son las condiciones, no resultados. */
.close__sig { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.close__sig li { display: inline-flex; align-items: center; gap: 7px; }
.close__sig .icon { width: 16px; height: 16px; flex: none; color: var(--green-2); }
.close__help { margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.close__p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.close__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.close__row .mailcap { flex: 1 1 280px; max-width: 420px; }
.close__faq { max-width: 860px; margin: clamp(40px, 5vw, 64px) auto 0; }
.close__faq > .kicker { text-align: center; margin-bottom: 18px; }
.close__faq .faq__a p + p { margin-top: .4em; }
.close__jobs { margin-top: 32px; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
/* La firma «Agentes hay muchos…» dejó de vivir después de la FAQ (31-08 §16: «eliminar la frase que
   va después de las preguntas frecuentes para que no se repita tan luego») y pasó a ser el H2 de la
   sección. Como H2 necesita más de las 22ch de .display: son tres tramos, no un titular corto. */
.close__h { max-width: 30ch; }
@media (max-width: 640px) {
  .close__row { flex-direction: column; align-items: stretch; }
  .close__row > .btn { width: 100%; }
  .close__row .mailcap { flex: 0 0 auto; max-width: none; }
}

/* ---- Hover solo con puntero ---- */
@media (hover: hover) and (pointer: fine) {
  .news__card:hover .news__t { color: var(--green-2); }
.talks__t a:hover { color: var(--green-2); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html.js .quiz__a { opacity: 1; transform: none; }
}

/* ── Industrias · variante TIPOGRÁFICA (decisión del fundador 06-09-2026, boceto D de
   _docs/propuestas/industrias-visual.md). La tarjeta cerrada ya no lleva ícono de 20 px ni
   número de orden: el nombre de la industria ES la imagen. Es el patrón de Sierra, y el
   fundador pidió expresamente sacar el conteo («solo ensucian»). ── */
/* La marca de la esquina: era un chevron que giraba al abrir; ahora es la flecha de ir a la
   página, que avanza un pelo al pasar el cursor. Arriba a la derecha, alineada con el titular:
   es estable aunque la bajada tenga una o tres líneas. */
.ind__chev { width: 22px; height: 22px; border-color: transparent; color: var(--muted); opacity: .5; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.ind__chev .icon { width: 15px; height: 15px; }
.ind--link:hover .ind__chev { opacity: 1; color: var(--green-2); border-color: transparent; transform: translateX(3px); }

/* La última fila NO se ensancha. Con `flex: 1 1 262px` las tres últimas tarjetas se repartían
   el ancho completo y se leían como un error de maquetación. Ancho fijo por columna en cada
   escalón, con `flex-grow: 0`. */
@media (min-width: 1100px) { .ind-cell { flex: 0 1 calc((100% - 42px) / 4); } }
@media (min-width: 860px) and (max-width: 1099px) { .ind-cell { flex: 0 1 calc((100% - 28px) / 3); } }
@media (min-width: 641px) and (max-width: 859px) { .ind-cell { flex: 0 1 calc((100% - 14px) / 2); } }
.ind__sum { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "head chev"; align-items: start; gap: 0 12px; padding: 26px 22px 28px; }
.ind__head { grid-area: head; }
.ind__t { font-size: clamp(1.45rem, 1rem + 1.55vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
.ind__p { display: block; margin-top: 12px; max-width: 34ch; }
/* Doceava celda del muro de industrias: la invitación que cierra la rejilla en 4+4+4.
   Mismo lenguaje tipográfico que las once, pero con el borde verde de la marca para que se
   lea como salida y no como una industria más. No es un <details>: no se abre. */
.ind--cta { display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--green-a35); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--green-a10), transparent 70%); }
.ind--cta .ind__t { color: var(--ink); }
.ind--cta .ind__sum { cursor: default; }
.ind__ctafoot { padding: 0 22px 24px; }
.ind__ctafoot .btn { white-space: normal; }
@media (max-width: 640px) { .ind__ctafoot { padding: 0 16px 20px; } }

/* ---- Recorte 7 (08-09-2026) · «En móvil puedes desaparecerlo, pero en la landing por navegador
   déjalo como está» (fundador). El sub-bloque de charlas se oculta SOLO bajo 640 px y SOLO por
   CSS: el HTML no se toca, así que las tres charlas siguen en el DOM —Google, los modelos y el
   gemelo /index.md (md-twins lee a 1280 px y sin JS) las siguen leyendo— y en escritorio no
   cambia absolutamente nada. Se ocultan el titular y las tres fichas juntos: si quedara el
   titular «Aprende de IA aplicada» sin charlas debajo, sería peor que no tenerlo.
   Lo que SÍ sobrevive es la última línea, «¿Nos quieres invitar a un evento o charla?…»: vive
   dentro de .talks y con el bloque entero oculto desaparecía también en móvil, dejando la
   sección terminada en la segunda tarjeta de noticias cortada por el borde. Es el remate de
   Actualidad y el único correo de contacto de la sección; no es parte de la agenda de charlas,
   así que se queda. ---- */
@media (max-width: 639.98px) {
  .talks__head, .talks__list { display: none; }
  .talks__invite { margin-top: 0; }
}

/* «Wots paga Wots»: los dos párrafos son argumentos distintos y el botón necesita aire —
   iba pegado al texto (brief del fundador 06-09-2026). */
.ahorro .lead + .lead { margin-top: 16px; }
.ahorro__cta { margin-top: 34px; }

/* Acceso a la calculadora: no es un boton mas, es la puerta a un instrumento. Marco propio,
   icono, promesa y flecha, con el verde de la marca. Asi se distingue de los cinco CTA de
   asesoria de la portada sin sumar un sexto boton solido (recorte 6 del fundador). */
.ahorro__calc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 32px; padding: 20px 22px; border: 1px solid var(--green-a35); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--green-a10), transparent 65%), var(--surface); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.ahorro__calc:hover { border-color: var(--green); }
.ahorro__calc__ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: var(--r-md); background: var(--green-a16); color: var(--green-2); }
.ahorro__calc__ico .icon { width: 24px; height: 24px; }
.ahorro__calc__txt b { display: block; font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.ahorro__calc__txt span { display: block; margin-top: 4px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.ahorro__calc__arr { flex: none; color: var(--green-2); transition: transform var(--dur-2) var(--ease-out); }
.ahorro__calc:hover .ahorro__calc__arr { transform: translateX(4px); }
@media (max-width: 560px) {
  .ahorro__calc { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; }
  .ahorro__calc__arr { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ahorro__calc:hover .ahorro__calc__arr { transform: none; } }

/* Todas las cajas se ven iguales: ya no hay una «activa». */
.stage__item { display: flex; flex-direction: column; }
.stage__item .stage__promise { color: var(--ink-2); }
/* RECORTE 4 (08-09-2026): la tarjeta perdió su párrafo y su «Ejemplo:» —viven en /producto con el
   triple de detalle— y quedó en nombre + bajada + enlace. Con tan poco contenido, el `margin-top:
   auto` del enlace solo funciona si la columna llega al fondo de la tarjeta: sin esto, los siete
   enlaces quedaban a siete alturas distintas dentro de una fila de tarjetas del mismo alto. */
.stage__item .stage__panel { display: flex; flex: 1 1 auto; }
.stage__item .stage__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.stage__more { margin-top: auto; padding-top: 10px; }

/* WotsHub cierra la rejilla ocupando dos columnas: es la capa que lee todo lo anterior, y de
   paso evita que la última fila quede coja (7 tarjetas en filas de 4 dejaban un hueco). */
@media (min-width: 900px) { .stage__item--wide { grid-column: span 2; } }