/* NINIA — Seguimiento automatizado. Depende de base.css. */

.phero-seg { --phero-op: .5; --phero-pos: 58% 50%; }

/* ───────── línea de tiempo del hero ───────── */
.linea { max-width: 430px; margin-left: auto; }
.ln-cap {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota-3);
  margin-bottom: 16px;
}
.ln-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: rgb(var(--surface-rgb) / .06);
  border: 1px solid rgb(var(--cream-rgb) / .13);
  margin-bottom: 8px;
}
.ln-item-on { background: rgb(var(--sage-2-rgb) / .2); border-color: rgb(var(--sage-2-rgb) / .4); }
.ln-day {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--terracota-3);
  flex-shrink: 0;
  width: 48px;
  padding-top: 2px;
}
.ln-item-on .ln-day { color: var(--sage-2); }
.ln-b b { display: block; font-size: var(--t-2xs); font-weight: 600; color: var(--cream); }
.ln-b i { font-style: normal; font-size: var(--t-2xs); line-height: 1.45; color: rgb(var(--cream-rgb) / .68); }
.ln-rest { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.ln-rest-line { flex: 1; height: 1px; background: rgb(var(--cream-rgb) / .14); }
.ln-rest-tag {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--cream-rgb) / .68);
  white-space: nowrap;
}

.phero-extra { margin-top: 56px; position: relative; }
.phero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 28px;
  padding-top: 32px;
  border-top: 1px solid var(--dark-border);
}
.phero-stats li { display: flex; flex-direction: column; gap: 6px; }
.phero-stats strong {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--terracota-3);
  letter-spacing: -.03em;
  line-height: 1;
}
.phero-stats span { font-size: var(--t-2xs); line-height: 1.45; color: rgb(var(--cream-rgb) / .68); }

/* ───────── etapas ───────── */
.stages { border-top: 1px solid var(--border); }
.stage {
  display: grid;
  grid-template-columns: 56px 1fr minmax(160px, 200px);
  gap: 24px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), background .3s ease;
}
.stage:hover { background: var(--cream-2); }
.stage-idx { font-family: var(--font-serif); font-size: var(--t-md); color: var(--terracota); line-height: 1.2; }
.stage-name { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 400; margin-bottom: 7px; }
.stage-d { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.stage-ritmo {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--terracota);
  background: var(--terracota-bg);
  border: 1px solid var(--terracota-border);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  justify-self: end;
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 860px) {
  .stage { grid-template-columns: 44px 1fr; }
  .stage-ritmo { grid-column: 2; justify-self: start; margin-top: 12px; }
}

/* ───────── reposo ───────── */
.rest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--gap-card);
}
/* Llevaban border-left de 3px de color. Ahora se distinguen por tinte de
   fondo y borde completo, que es lo que el sistema permite. */
.rest-card {
  background: var(--terracota-bg);
  border: 1px solid var(--terracota-border);
  border-radius: var(--radius);
  padding: 34px 32px 36px;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), box-shadow .3s ease;
}
.rest-card:hover { box-shadow: 0 14px 34px rgb(var(--ink-rgb) / .08); }
.rest-card-sage { background: var(--sage-bg); border-color: rgb(var(--sage-rgb) / .24); }
.rest-tag {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 14px;
}
.rest-tag-sage { color: var(--sage); }
.rest-title { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 400; margin-bottom: 13px; line-height: 1.2; }
.rest-card p { font-size: var(--t-xs); line-height: 1.62; color: var(--ink-2); }
.rest-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 22px; }
.rest-line span {
  font-size: var(--t-2xs);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-md);
  color: var(--ink-2);
}
.rest-line i { font-style: normal; color: var(--muted); }
.rest-note {
  margin-top: 30px;
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink);
  max-width: 52ch;
}

/* ───────── capa de IA ───────── */
.flow { display: flex; align-items: stretch; gap: 12px; margin-bottom: 48px; flex-wrap: wrap; }
.flow-step {
  flex: 1;
  min-width: 170px;
  background: rgb(var(--surface-rgb) / .05);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-step b { font-size: var(--t-xs); color: var(--cream); font-weight: 600; }
.flow-step i { font-style: normal; font-size: var(--t-2xs); color: rgb(var(--cream-rgb) / .68); line-height: 1.45; }
.flow-n {
  font-family: var(--font-serif);
  font-size: var(--t-2xs);
  color: var(--terracota-3);
  border: 1px solid rgb(var(--terracota-3-rgb) / .35);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 6px;
}
.flow-step-ai { background: rgb(var(--sage-2-rgb) / .15); border-color: rgb(var(--sage-2-rgb) / .35); }
.flow-step-ai .flow-n { color: var(--sage-2); border-color: rgb(var(--sage-2-rgb) / .45); font-weight: 600; }
.flow-arrow { align-self: center; color: rgb(var(--cream-rgb) / .6); font-size: var(--t-sm); }

.q3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.q3-card {
  background: rgb(var(--surface-rgb) / .05);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), border-color .3s ease;
}
.q3-card:hover { border-color: rgb(var(--terracota-3-rgb) / .4); }
.q3-n { font-family: var(--font-serif); font-size: var(--t-md); color: var(--terracota-3); margin-bottom: 14px; }
.q3-q { font-family: var(--font-serif); font-size: var(--t-sm); font-weight: 400; color: var(--cream); margin-bottom: 11px; }
.q3-d { font-size: var(--t-2xs); line-height: 1.6; color: rgb(var(--cream-rgb) / .7); margin-bottom: 18px; }
/* Era un border-left de color. Un fondo tenue agrupa igual sin acento lateral. */
.q3-ej {
  font-size: var(--t-2xs);
  line-height: 1.5;
  color: var(--terracota-3);
  background: rgb(var(--terracota-3-rgb) / .1);
  border: 1px solid rgb(var(--terracota-3-rgb) / .22);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-style: italic;
}

/* ───────── reacciones ───────── */
.react-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.react-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), box-shadow .3s ease;
}
.react-card:hover { box-shadow: 0 12px 30px rgb(var(--ink-rgb) / .08); }
.react-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.react-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.react-icon svg { width: 18px; height: 18px; display: block; }
.react-hot .react-icon { background: var(--terracota); color: var(--cream); }
.react-warm .react-icon { background: var(--terracota-bg); color: var(--terracota); border: 1px solid var(--terracota-border); }
.react-cool .react-icon { background: var(--cream-3); color: var(--ink-2); }
.react-label { font-family: var(--font-serif); font-size: var(--t-sm); font-weight: 400; }
.react-tone {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.react-d { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-2); margin-bottom: 16px; }
/* La cita llevaba border-left de color y un radio fuera de escala. */
.react-quote {
  margin: 0;
  font-size: var(--t-2xs);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border-md);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}

.group-note {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 34px;
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 34px 40px;
}
.group-num { font-size: var(--t-3xl); color: var(--terracota-3); line-height: 1; flex-shrink: 0; }
.group-num span { font-size: .34em; }
.group-title { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 400; margin-bottom: 8px; }
.group-note p { font-size: var(--t-xs); line-height: 1.6; color: rgb(var(--cream-rgb) / .75); max-width: 70ch; }
.group-note strong { color: var(--cream); }

/* ───────── ventana 24 h ───────── */
.win-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.win-copy, .win-viz { min-width: 0; }
/* Era border-left. Ahora regla superior. */
.win-kicker {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border-md);
  font-size: var(--t-2xs);
  line-height: 1.6;
  color: var(--muted);
}
.win-timeline {
  display: flex;
  min-height: 150px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-md);
}
.win-free {
  flex: 3;
  background: var(--sage-bg);
  /* 1px: es el límite de las 24 h dentro del diagrama, no un acento lateral. */
  border-right: 1px dashed rgb(var(--sage-rgb) / .55);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.win-paid {
  flex: 1;
  background: var(--terracota-bg);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.win-cap {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.win-free .win-val { font-family: var(--font-serif); font-size: var(--t-sm); color: var(--sage); }
.win-paid .win-val { font-family: var(--font-serif); font-size: var(--t-xs); color: var(--terracota); }
.win-nudge { display: flex; align-items: center; gap: 8px; font-size: var(--t-2xs); color: var(--ink-2); }
.win-nudge span { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.win-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: var(--t-2xs);
  color: var(--muted);
}
.win-loop { margin-top: 18px; font-size: var(--t-2xs); color: var(--sage); font-weight: 600; }

.endcta { background: var(--cream-2); }