/* NINIA — La plataforma. Depende de base.css. */

.phero-plat { --phero-op: .34; --phero-pos: 60% 58%; }

/* ───────── mosaico del hero ─────────
   Las teselas llevaban backdrop-filter y una animación infinita cada una.
   Fondo sólido semiopaco: misma lectura, sin recomposición por frame. */
.mosaico { max-width: 440px; margin-left: auto; }
.mos-cap {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota-3);
  margin-bottom: 14px;
}
.mos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 9px;
}
.tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  background: rgb(var(--dark-rgb) / .6);
  border: 1px solid rgb(var(--cream-rgb) / .13);
  animation: pulse 9s ease-in-out infinite;
}
.tile-on { background: rgb(var(--terracota-rgb) / .5); border-color: rgb(var(--terracota-3-rgb) / .5); }
.tile-ico {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: grid; place-items: center;
  background: rgb(var(--terracota-3-rgb) / .2);
  color: var(--terracota-3);
}
.tile-ico svg { width: 13px; height: 13px; display: block; }
.tile-n { font-size: var(--t-2xs); font-weight: 600; color: var(--cream); }
.mos-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: var(--t-2xs);
  color: rgb(var(--cream-rgb) / .68);
}
.mos-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-2); flex-shrink: 0; }
@keyframes pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ───────── numeración de piezas ───────── */
.piece-n {
  font-family: var(--font-serif);
  font-size: var(--t-2xs);
  color: var(--cream);
  background: var(--terracota);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.piece-n-center { margin-left: auto; margin-right: auto; }
.piece-n-light {
  background: rgb(var(--terracota-3-rgb) / .18);
  color: var(--terracota-3);
  border: 1px solid rgb(var(--terracota-3-rgb) / .35);
}
.piece-rev .piece-copy { order: 2; }
.piece-rev .piece-visual { order: 1; }
.section-eyebrow .soon { margin-left: 2px; }

/* ───────── CRM ───────── */
.crm-stages { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.crm-stages span {
  font-size: var(--t-2xs);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--terracota-bg);
  border: 1px solid var(--terracota-border);
  color: var(--terracota);
}
.crm-stages .crm-tab {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-md);
  color: var(--muted);
}

/* ───────── ADN ─────────
   Era border-left de color. Ahora regla superior, que agrupa sin ser acento
   lateral. */
.adn-list { margin-top: 30px; display: grid; gap: 16px; }
.adn-item { padding-top: 14px; border-top: 1px solid var(--terracota-border); }
.adn-t {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 4px;
}
.adn-item p { font-size: var(--t-2xs); line-height: 1.55; color: var(--ink-2); }

/* ───────── teléfono ───────── */
.link-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}
.link-chain { min-width: 0; }
.tel { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tel-marco {
  width: 100%;
  max-width: 300px;
  border-radius: var(--radius-lg);
  padding: 9px;
  background: linear-gradient(160deg, var(--dark-3), var(--dark));
  box-shadow: 0 26px 60px rgb(0 0 0 / .38), inset 0 0 0 1px rgb(var(--cream-rgb) / .1);
}
.tel-marco img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.tel figcaption { font-size: var(--t-2xs); color: rgb(var(--cream-rgb) / .68); text-align: center; }

.chain { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.chain-step {
  flex: 1;
  min-width: 190px;
  background: rgb(var(--surface-rgb) / .05);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.chain-step b { font-size: var(--t-xs); color: var(--cream); font-weight: 600; }
.chain-step i { font-style: normal; font-size: var(--t-2xs); color: rgb(var(--cream-rgb) / .68); line-height: 1.5; }
.chain-step-end { background: rgb(var(--sage-2-rgb) / .15); border-color: rgb(var(--sage-2-rgb) / .35); }
.chain-arrow { align-self: center; color: rgb(var(--cream-rgb) / .6); }
.chain-note { margin-top: 26px; font-size: var(--t-xs); color: rgb(var(--cream-rgb) / .72); }
.chain-note .link-arrow { margin-left: 8px; }

/* ───────── micrositio ───────── */
.browser {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgb(var(--ink-rgb) / .12);
  background: var(--surface);
}
.browser img { width: 100%; height: auto; display: block; }
.browser figcaption {
  font-size: var(--t-2xs);
  color: var(--muted);
  padding: 11px 14px;
  background: var(--cream-2);
  border-top: 1px solid var(--border);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
}
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--cream-3); }
.browser-bar span { margin-left: 12px; font-size: var(--t-2xs); color: var(--muted); }

/* ───────── bolsa ───────── */
.bolsa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.bolsa-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;
}
.bolsa-card:hover { box-shadow: 0 12px 30px rgb(var(--ink-rgb) / .08); }
.bolsa-card-key { background: var(--sage-bg); border-color: rgb(var(--sage-rgb) / .24); }
.bolsa-dir {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 14px;
}
.bolsa-dir-sage { color: var(--sage); }
.bolsa-card h3 { font-family: var(--font-serif); font-size: var(--t-sm); font-weight: 400; margin-bottom: 11px; line-height: 1.2; }
.bolsa-card p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-2); }
.bolsa-note { margin-top: 26px; font-size: var(--t-xs); line-height: 1.6; color: var(--muted); max-width: 70ch; }

/* ───────── seguimiento (banda oscura) ───────── */
.seg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}
.seg-card {
  background: rgb(var(--surface-rgb) / .05);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), border-color .3s ease;
}
.seg-card:hover { border-color: rgb(var(--terracota-3-rgb) / .4); }
.seg-card-key { background: rgb(var(--sage-2-rgb) / .14); border-color: rgb(var(--sage-2-rgb) / .3); }
.seg-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgb(var(--terracota-3-rgb) / .16);
  color: var(--terracota-3);
  margin-bottom: 16px;
}
.seg-icon svg { width: 20px; height: 20px; display: block; }
.seg-icon-sage { background: rgb(var(--sage-2-rgb) / .18); color: var(--sage-2); }
.seg-card h3 { font-family: var(--font-serif); font-size: var(--t-sm); font-weight: 400; color: var(--cream); margin-bottom: 9px; line-height: 1.2; }
.seg-card p { font-size: var(--t-2xs); line-height: 1.55; color: rgb(var(--cream-rgb) / .7); }
.seg-link { margin-top: 28px; }

/* ───────── reportes ───────── */
.soon-note { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.soon-note .soon { margin-left: 0; }

.rep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  align-items: stretch;
}
.rep-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), box-shadow .3s ease;
}
.rep-card:hover { box-shadow: 0 14px 34px rgb(var(--ink-rgb) / .09); }
.rep-card .soon { position: absolute; top: 26px; right: 24px; }
.rep-card .rep-tag { padding-right: 120px; }
/* La tarjeta principal es oscura, así que aquí sí toca la variante sage-2. */
.rep-card-main .soon {
  color: var(--sage-2);
  background: rgb(var(--sage-2-rgb) / .16);
  border-color: rgb(var(--sage-2-rgb) / .35);
}
.rep-tag {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 14px;
}
.rep-tag-sage { color: var(--sage); }
.rep-title { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 400; margin-bottom: 12px; line-height: 1.2; }
.rep-card p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-2); flex: 1; }
.rep-card .link-arrow { margin-top: 20px; }
.rep-card-main { background: var(--dark); color: var(--cream); border-color: transparent; }
.rep-card-main .rep-title { color: var(--cream); }
.rep-card-main p { color: rgb(var(--cream-rgb) / .75); }
.rep-card-main .rep-tag, .rep-card-main .link-arrow { color: var(--terracota-3); }
.rep-card-sage { background: var(--sage-bg); border-color: rgb(var(--sage-rgb) / .24); }

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

@media (max-width: 980px) {
  .phero-plat { --phero-op: .2; }
  .piece-rev .piece-copy { order: 1; }
  .piece-rev .piece-visual { order: 2; }
  .chain-arrow { display: none; }
  .mosaico { margin: 0 auto; }
}