/* =====================================================================
   diagrams-shared.css — Diagramas y grafismos de las páginas de servicio
   Luis López Comunicación
   ---------------------------------------------------------------------
   Se carga ANTES del <style> inline de cada página, de modo que ante
   cualquier empate de especificidad gane siempre el CSS propio de la
   página. No define nunca nombres genéricos (.step, .service-card,
   .info-block, .container, .section...). Los patrones nuevos usan el
   prefijo dg-.

   Depende de las variables ya presentes en todas las páginas:
   --purple --purple-light --purple-mid --bg-deep --white --gray
   --font-display --ease-out
   ===================================================================== */


/* ============ 1. TIMELINE DE PROCESO (.rhythm-track) ============
   Línea horizontal con hitos numerados. Vertical por debajo de 860px. */

.rhythm-track{margin-top:3rem;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem}
.rhythm-track::before{content:"";position:absolute;left:11px;right:11px;top:10px;height:2px;background:linear-gradient(90deg,var(--purple),var(--purple-mid) 68%,rgba(176,132,208,.28));z-index:0}
.rhythm-step{position:relative;z-index:1;padding-top:2.6rem}
.rhythm-step::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--bg-deep);border:3px solid var(--purple);box-sizing:content-box}
.rhythm-step .rs-when{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--purple);margin-bottom:.5rem}
.rhythm-step h3,.rhythm-step h4{font-family:var(--font-display);font-size:1.22rem;line-height:1.18;color:var(--white);margin:0 0 .45rem}
.rhythm-step p{font-size:.92rem;line-height:1.62;color:var(--gray);margin:0}

/* Variante sobre fondo claro alterno: el punto toma el color del fondo */
.rhythm-track--on-dark .rhythm-step::before{background:var(--bg-dark)}
.rhythm-track--on-white .rhythm-step::before{background:#fff}

@media(max-width:860px){
  .rhythm-track{grid-template-columns:1fr;gap:1.7rem;margin-top:2.4rem}
  .rhythm-track::before{left:10px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,var(--purple),rgba(176,132,208,.28))}
  .rhythm-step{padding:0 0 0 2.4rem}
  .rhythm-step::before{top:1px}
}


/* ============ 2. FLUJO 1 → N (.omni-flow) ============
   Origen a la izquierda, conector animado, salidas a la derecha.
   Con el modificador --converge se invierte: N fuentes → 1 destino. */

.omni-flow{margin-top:2.6rem;display:grid;grid-template-columns:minmax(0,1fr) 78px minmax(0,1.1fr);gap:.9rem;align-items:center}
.of-root{background:linear-gradient(135deg,var(--purple) 0%,#7b36aa 55%,var(--purple-light) 100%);color:#fff;border-radius:20px;padding:1.7rem 1.6rem;box-shadow:0 18px 44px rgba(107,38,156,.18)}
.of-root .of-kicker{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:rgba(255,255,255,.72);margin-bottom:.6rem}
.of-root strong{display:block;font-family:var(--font-display);font-size:1.35rem;line-height:1.15;font-weight:400;margin-bottom:.55rem}
.of-root p{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.86);margin:0}
.of-link{display:grid;place-items:center;color:var(--purple-mid)}
.of-link svg{width:74px;height:auto}
@keyframes ofFlow{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}
.of-link .of-wire{stroke-dasharray:6 8;animation:ofFlow 2.4s linear infinite}
.of-outputs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.of-outputs li{background:#fff;border:1px solid rgba(31,27,46,.12);border-radius:14px;padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.of-outputs li span{font-weight:600;font-size:.95rem;color:var(--white)}
.of-outputs li em{font-style:normal;font-size:.78rem;letter-spacing:.04em;color:var(--gray);text-align:right}

/* Convergencia N → 1: fuentes a la izquierda, destino a la derecha */
.omni-flow--converge{grid-template-columns:minmax(0,1.1fr) 78px minmax(0,1fr)}
.omni-flow--converge .of-link{transform:scaleX(-1)}
.omni-flow--converge .of-link .of-wire{animation-direction:reverse}

@media(max-width:900px){
  .omni-flow{grid-template-columns:1fr;gap:1rem}
  .of-link{transform:rotate(90deg);margin:.2rem auto}
  .of-link svg{max-width:48px}
  .omni-flow--converge .of-link{transform:rotate(90deg) scaleX(-1)}
}


/* ============ 3. BARRAS COMPARADAS (.omni-cost) ============
   Dos barras horizontales comparadas dentro de sus tarjetas. */

.omni-cost{margin-top:1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.oc-row{background:#fff;border:1px solid rgba(31,27,46,.08);border-radius:20px;padding:1.4rem 1.5rem}
.oc-row--omni{border-color:rgba(107,38,156,.22);box-shadow:0 16px 40px rgba(107,38,156,.08)}
.oc-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.75rem}
.oc-head span{font-size:.95rem;font-weight:600;color:var(--white)}
.oc-head b{font-size:.8rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;color:var(--gray)}
.oc-row--omni .oc-head b{color:var(--purple)}
.oc-bar{height:9px;border-radius:99px;background:rgba(31,27,46,.07);overflow:hidden}
.oc-bar i{display:block;height:100%;border-radius:99px;background:rgba(31,27,46,.22)}
.oc-row--omni .oc-bar i{background:linear-gradient(90deg,var(--purple),var(--purple-light))}
.oc-row p{margin:.8rem 0 0;font-size:.9rem;line-height:1.6;color:var(--gray)}

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


/* ============ 4. CAPAS APILADAS (dg-layers) ============
   Tres losas isométricas superpuestas: cada capa se apoya en la anterior.
   Sin animación: se usa en páginas que ya tienen mucha carga visual. */

.dg-layers{margin-top:2.6rem;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:2.6rem;align-items:center}
.dgl-viz{position:relative}
.dgl-viz svg{display:block;width:100%;height:auto}
.dgl-caption{display:block;margin-top:.9rem;text-align:center;font-size:.78rem;letter-spacing:.03em;color:var(--gray)}
.dgl-num{font-family:var(--font-display);font-size:22px;font-weight:700;fill:#fff;opacity:.85}
.dgl-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.dgl-item{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(31,27,46,.08);border-radius:20px;padding:1.5rem 1.6rem 1.5rem 1.9rem;box-shadow:0 10px 30px rgba(31,27,46,.05)}
.dgl-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.dgl-item--base::before{background:var(--purple)}
.dgl-item--mid::before{background:var(--purple-light)}
.dgl-item--top::before{background:var(--purple-mid)}
.dgl-item .dgl-tier{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--purple);margin-bottom:.3rem}
.dgl-item h3{font-family:var(--font-display);font-size:1.18rem;line-height:1.2;color:var(--white);margin:0 0 .4rem}
.dgl-item p{font-size:.92rem;line-height:1.6;color:var(--gray);margin:0}
.dgl-points{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.42rem}
.dgl-points li{position:relative;padding-left:1.1rem;font-size:.88rem;line-height:1.5;color:var(--gray)}
.dgl-points li::before{content:"";position:absolute;left:0;top:.5rem;width:.38rem;height:.38rem;border-radius:50%;background:var(--purple-mid)}

@media(max-width:860px){
  .dg-layers{grid-template-columns:1fr;gap:1.8rem}
  .dgl-item{padding:1.4rem 1.4rem 1.4rem 1.7rem}
}


/* ============ 5. VIÑETAS ILUSTRATIVAS (dg-adviz) ============
   Tres ilustraciones que acompañan a un listado de canales. Sin datos:
   sólo apoyo visual. */

.dg-adviz{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.dgv-card{margin:0;background:transparent!important;border:none!important;padding:0;box-shadow:none!important}
.dgv-card svg{display:block;width:100%;height:auto}
.dgv-chip{font-family:var(--font-body);font-size:8.5px;font-weight:700;letter-spacing:.06em;fill:#fff}
.dgv-card figcaption{margin-top:1.1rem;text-align:center;font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--purple)}

@media(max-width:820px){
  .dg-adviz{grid-template-columns:1fr;gap:1rem;max-width:420px}
}


/* ============ 6. MOVIMIENTO REDUCIDO ============ */

@media(prefers-reduced-motion:reduce){
  .of-link .of-wire{animation:none!important}
}