/* ═══════════════════════════════════════════════════════════
   NeuroFluxIA V3 — Agentes inteligentes
   Personalidad de maquetación: LA DEMOSTRACIÓN GUIADA.
   La página entera está montada en dos columnas: a la izquierda
   una COLUMNA GUÍA que se queda fija mientras se lee, y a la
   derecha la DEMOSTRACIÓN correspondiente —la conversación, la
   tabla, los cuadrantes, las preguntas—. Nadie explica en el
   vacío: cada afirmación tiene su prueba al lado.
   Se rompe el ritmo dos veces a propósito: la cita tipográfica
   y la línea de tiempo, que van a todo el ancho.
   ═══════════════════════════════════════════════════════════ */

/* ═══ 1. EL ARMAZÓN: GUÍA + DEMOSTRACIÓN ═════════════════
   Antes cada sección abría con el mismo bloque apilado a la
   izquierda —rótulo, titular, entradilla— y la mitad derecha
   se quedaba vacía. Cuatro seguidas se leían como la misma
   sección repetida. Ahora el titular y la prueba comparten
   fila y la página no tiene huecos muertos. */
.tramo{padding-block:clamp(2.8rem,6vw,5.2rem)}
.duo{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:minmax(0,1fr);align-items:start}
.duo > *{min-width:0}
@media (min-width:1000px){
  .duo{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem)}
  /* La guía acompaña a la demostración mientras se recorre. top:100px
     deja el hueco de la cabecera fija más un respiro. */
  .duo-guia{position:sticky;top:100px}
}
.duo-guia{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.duo-guia h2{font-size:clamp(1.65rem,3vw,2.45rem);max-width:15ch}
.duo-guia .prose{font-size:var(--fs-base);max-width:42ch}

/* Lista numerada de la guía: los pasos que hay que mirar en la prueba */
.guia-puntos{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.guia-puntos li{display:flex;align-items:flex-start;gap:.8rem;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55}
.guia-n{
  flex:none;width:1.55rem;height:1.55rem;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--gold-line);background:var(--gold-dim);color:var(--gold-text);
  font-size:.72rem;font-weight:700;
}

/* ═══ 2. LA CONVERSACIÓN ═════════════════════════════════
   La pieza de la página: se ve al agente trabajar antes de que
   nadie explique nada. */
.conv{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.2vw,1.6rem);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:1rem;
}
.conv-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.conv-canal{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-text);display:inline-flex;align-items:center;gap:.45rem;
}
.conv-canal::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.conv-hora{font-size:var(--fs-xs);color:var(--ink-2);font-weight:600}

.conv-hilo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.msg{display:flex;flex-direction:column;gap:.3rem;max-width:82%}
.msg p{padding:.8rem 1rem;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.6;margin:0}
.msg-hora{font-size:.66rem;color:var(--ink-3);font-weight:600}
.msg--cliente{align-self:flex-start}
.msg--cliente p{background:var(--paper-2);color:var(--ink);border-bottom-left-radius:2px}
.msg--agente{align-self:flex-end;align-items:flex-end;text-align:left}
.msg--agente p{background:var(--gold-dim);border:1px solid var(--gold-line);color:var(--ink);border-bottom-right-radius:2px}
/* El paso de sistema no es un mensaje: es el registro de lo que hizo. */
.msg--sistema{
  align-self:stretch;max-width:100%;
  flex-direction:row;align-items:center;gap:.6rem;
  border:1px dashed var(--line-2);border-radius:var(--r-sm);
  padding:.7rem .85rem;background:var(--paper);
}
.msg--sistema .ico{color:var(--gold-text);flex:none;width:1rem;height:1rem;stroke-width:2.4}
.msg--sistema p{padding:0;background:none;font-size:.78rem;color:var(--ink-2);font-weight:600}
.conv-nota{font-size:.72rem;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--line);padding-top:.8rem}

/* ═══ 3. CHATBOT / AGENTE ════════════════════════════════
   Hace de bloque de respuesta directa: define la entidad y da
   sus atributos, pero en forma de comparación, que es como lo
   pregunta la gente. La definición va en la columna guía y la
   tabla al lado, no debajo. */
.def-vs{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.18rem,1.95vw,1.58rem);line-height:1.38;letter-spacing:-.025em;
  color:var(--ink);max-width:26ch;
}
.def-vs strong{font-weight:700}
.vs{width:100%;border-collapse:collapse;text-align:left}
.vs caption{caption-side:top;text-align:left;padding-bottom:1.1rem;font-size:var(--fs-sm);color:var(--ink-2)}
.vs th,.vs td{padding:1rem .95rem;border-bottom:1px solid var(--line);vertical-align:top;font-size:var(--fs-sm);line-height:1.6}
.vs thead th{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--line-2);padding-top:0;
}
.vs thead th:nth-child(2){color:var(--ink-2)}
.vs thead th:nth-child(3){color:var(--gold-text)}
.vs tbody th{
  font-family:var(--f-display);font-weight:700;color:var(--ink);letter-spacing:-.015em;
  width:22%;
}
.vs .vs-bot{color:var(--ink-2);background:var(--paper-2)}
.vs .vs-ag{color:var(--ink);background:var(--white)}
.vs .vs-ag strong{font-weight:600}
/* En estrecho la tabla pasa a fichas: tres columnas no se leen en un móvil. */
@media (max-width:819px){
  .vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vs tbody tr{display:block;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.8rem;padding:1rem 1.1rem;background:var(--paper)}
  .vs tbody th,.vs tbody td{display:block;border:0;padding:.4rem 0;width:auto;background:none}
  .vs tbody td::before{
    content:attr(data-l);display:block;margin-bottom:.15rem;
    font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  }
  .vs .vs-bot::before{color:var(--ink-2)}
  .vs .vs-ag::before{color:var(--gold-text)}
}

/* ═══ 4. CAPACIDADES EN CUADRANTES ═══════════════════════
   Cuatro cuadrantes separados por filetes cruzados. Ni tarjetas
   ni filas numeradas: las filas anchas son de la página pilar y
   repetirlas aquí volvería a igualar las dos páginas. */
.cuad{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);counter-reset:cu}
.cuad > li{
  counter-increment:cu;min-width:0;
  padding:clamp(1.4rem,2.4vw,1.9rem) 0;border-top:1px solid var(--line);
}
@media (min-width:660px){
  .cuad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cuad > li:nth-child(odd){padding-right:clamp(1.4rem,2.6vw,2.2rem)}
  .cuad > li:nth-child(even){padding-left:clamp(1.4rem,2.6vw,2.2rem);border-left:1px solid var(--line)}
}
.cuad-cab{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1rem}
.cuad-cab::before{
  content:"0" counter(cu);flex:none;
  font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.18em;
  color:var(--gold-text);
}
.cuad h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.12rem,1.9vw,1.34rem);letter-spacing:-.028em;line-height:1.2}
.cuad ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
/* Sin flex en el li: el <strong> y el texto que le sigue serían dos elementos
   flex y el gap abriría un hueco en mitad de la frase. */
.cuad ul li{position:relative;padding-left:1.05rem;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}
.cuad ul li::before{content:"";position:absolute;left:0;top:.6rem;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cuad ul li strong{color:var(--ink);font-weight:600}

/* ═══ 5. CITA A SANGRE, SIN FOTOGRAFÍA ═══════════════════
   Primera rotura del ritmo a dos columnas. El respiro de esta
   página es tipográfico: la banda con foto ya la usan otras. */
.dicho{
  background:var(--paper-3);
  padding-block:clamp(3.4rem,8vw,6.5rem);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
/* El limite de medida va en el <p>, NO en .dicho-inner: ese div tambien
   lleva .container, que trae margin-inline:auto, y un max-width ahi le
   encoge la caja entera. Con 26ch a 1,02rem el bloque quedaba en 210 px
   y la cita salia centrada a dos palabras por linea. */
.dicho-inner{max-width:var(--maxw)}
/* Clase propia y no `.dicho p`: ese selector (0,0,1,1) le ganaba en
   especificidad a `.dicho-pie` (0,0,1,0) y le imponia el cuerpo de 3,6 rem
   en serif al parrafo de pie, que va en la tipografia de texto a 1,02 rem. */
.dicho-cita{
  font-family:var(--f-accent);font-weight:500;
  font-size:clamp(1.9rem,5.2vw,3.6rem);line-height:1.18;letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance;max-width:19ch;
}
.dicho-pie{
  margin-top:1.6rem;max-width:46ch;font-family:var(--f-ui);
  font-size:var(--fs-base);line-height:1.7;color:var(--ink-2);
}

/* ═══ 6. LA SEMANA, EN UNA LÍNEA DE TIEMPO ═══════════════
   Segunda rotura del ritmo: va a todo el ancho y es simétrica,
   así que su cabecera es la única centrada de la página.
   Antes era un antes/después en dos cajas, que es lo que hace
   media web; aquí los dos relatos comparten el mismo reloj. */
.reloj-cab{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.reloj-cab h2{max-width:18ch}
.reloj-cab .prose{max-width:48ch}

.reloj{position:relative;margin:0;padding:0;list-style:none}
@media (min-width:900px){
  /* El raíl central: las dos columnas laterales son 1fr, así que
     el 50% cae exactamente en el centro de la columna del reloj. */
  .reloj::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-2)}
}
.reloj-t{display:none}
@media (min-width:900px){
  .reloj-t{
    display:grid;grid-template-columns:minmax(0,1fr) 9rem minmax(0,1fr);
    gap:0 1.5rem;padding-bottom:1rem;align-items:end;
  }
  .reloj-t > *{min-width:0}
  .reloj-t b{font-family:var(--f-display);font-weight:700;font-size:1.14rem;letter-spacing:-.025em}
  .reloj-t .t-hoy{text-align:right;color:var(--ink-2)}
  .reloj-t .t-ok{color:var(--ink)}
}
.mom{position:relative;padding-block:1.25rem;border-top:1px solid var(--line);display:grid;gap:.45rem;grid-template-columns:minmax(0,1fr)}
.mom > *{min-width:0}
@media (min-width:900px){
  .mom{grid-template-columns:minmax(0,1fr) 9rem minmax(0,1fr);gap:0 1.5rem;align-items:center}
}
.mom-hora{order:-1}
.mom-hora span{
  display:inline-block;position:relative;z-index:1;
  /* El fondo tapa el rail justo detras de la hora. Va en blanco porque
     la seccion del reloj es .section--white. */
  background:var(--white);padding:.28rem .55rem;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-text);white-space:nowrap;
}
@media (min-width:900px){.mom-hora{order:0;text-align:center}}
.mom-hoy{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}
.mom-ok{color:var(--ink);font-size:var(--fs-sm);line-height:1.6;font-weight:500}
@media (min-width:900px){.mom-hoy{text-align:right}}
/* En estrecho no hay columnas que distingan un relato del otro:
   cada línea dice de quién es. */
@media (max-width:899px){
  .mom-hoy::before,.mom-ok::before{
    display:block;margin-bottom:.15rem;
    font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  }
  .mom-hoy::before{content:"Hoy";color:var(--ink-2)}
  .mom-ok::before{content:"Con agente";color:var(--gold-text)}
  .mom-ok{margin-top:.5rem}
}
.reloj-pie{margin-top:clamp(1.6rem,3vw,2.2rem);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2);max-width:70ch}
.reloj-pie strong{color:var(--ink);font-weight:600}