/* =========================================================================
   Work Path × Bidafarma — extra components
   Builds on styles.css + colors_and_type.css (Genios Invisibles tokens)
   ========================================================================= */

/* segment tags row (hero) */
.seg-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--gi-space-8); }
.seg {
  font-family: var(--gi-font-body); font-weight: var(--gi-w-semi);
  font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase;
  color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16); padding: 7px 13px; border-radius: var(--gi-radius-pill);
}

/* highlight pills on the hero (the three pillars) */
.hero .pill.lit { background: var(--gi-yellow); color: var(--gi-black); border-color: var(--gi-yellow); font-weight: var(--gi-w-semi); }
.hero .pill.lit:hover { background: #ffbf45; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gi-border); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); overflow: hidden; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--gi-white); padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.stat .big { font-family: var(--gi-font-display); font-weight: var(--gi-w-extra); font-size: clamp(32px, 3.5vw, 48px); line-height: 1.0; letter-spacing: -0.03em; color: var(--gi-yellow-deep); overflow-wrap: break-word; text-wrap: balance; }
.stat .lab { font-family: var(--gi-font-display); font-weight: var(--gi-w-semi); font-size: var(--gi-text-md); color: var(--gi-fg); }
.stat .desc { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-snug); }

/* ---------- Dark capa list (Argumento) ---------- */
.contrast { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 760px) { .contrast { grid-template-columns: 1fr; } }
.cpanel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--gi-radius-lg); padding: clamp(26px, 2.8vw, 38px); }
.cpanel.hi { background: var(--gi-yellow); border-color: var(--gi-yellow); }
.cpanel .eyb { display: block; font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: var(--gi-space-5); }
.cpanel.hi .eyb { color: rgba(29,29,27,0.6); }
.cpanel p { font-family: var(--gi-font-body); font-size: var(--gi-text-md); line-height: var(--gi-leading-base); color: rgba(255,255,255,0.82); }
.cpanel.hi p { color: var(--gi-black); }
.cpanel .em { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); }

/* ---------- Capa cards (3 capas) ---------- */
.capa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px); }
@media (max-width: 940px) { .capa-grid { grid-template-columns: 1fr; } }
.capa-card { background: var(--gi-white); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); border-top: 4px solid var(--gi-yellow); padding: clamp(26px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.capa-card .cnum { display: inline-flex; align-items: center; gap: 10px; font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase; color: var(--gi-yellow-deep); }
.capa-card .cnum .ibub { width: 40px; height: 40px; background: rgba(248,177,51,0.16); color: var(--gi-yellow-deep); }
.capa-card .cnum .ibub svg { width: 20px; height: 20px; }
.capa-card h3 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-lg); line-height: 1.12; letter-spacing: -0.01em; }
.capa-card > p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-base); }
.capa-card .clave { font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase; color: var(--gi-fg-soft); margin-top: 2px; }

/* ---------- Levels stepper (yellow) ---------- */
.levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 18px); }
@media (max-width: 1000px) { .levels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .levels { grid-template-columns: 1fr; } }
.level { background: var(--gi-white); border-radius: var(--gi-radius-lg); padding: clamp(20px, 2vw, 26px); box-shadow: var(--gi-shadow-md); display: flex; flex-direction: column; gap: 12px; }
.level .lv { font-family: var(--gi-font-body); font-weight: var(--gi-w-bold); font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase; color: var(--gi-black); background: var(--gi-yellow); align-self: flex-start; padding: 5px 11px; border-radius: var(--gi-radius-pill); }
.level h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); line-height: 1.14; letter-spacing: -0.01em; }
.level p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-snug); }

/* ---------- Chips row ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--gi-font-body); font-weight: var(--gi-w-medium); font-size: var(--gi-text-sm);
  background: var(--gi-white); border: 1px solid var(--gi-border); color: var(--gi-fg);
  padding: 9px 16px; border-radius: var(--gi-radius-pill);
}
.chip svg { width: 16px; height: 16px; color: var(--gi-yellow-deep); }
section[data-tone="beige"] .chip { background: rgba(255,255,255,0.7); }

/* ethics + scenarios sub-blocks */
.subhead { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-xl); letter-spacing: -0.01em; margin-bottom: var(--gi-space-5); }
.sublede { font-family: var(--gi-font-body); font-size: var(--gi-text-md); color: var(--gi-fg-muted); line-height: var(--gi-leading-base); max-width: 70ch; margin-bottom: var(--gi-space-6); }
.block-sep { margin-top: clamp(40px, 5vw, 68px); }

.scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 800px) { .scenarios { grid-template-columns: 1fr; } }
.scn { background: var(--gi-white); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.scn .ibub { width: 44px; height: 44px; background: rgba(248,177,51,0.14); color: var(--gi-yellow-deep); }
.scn .ibub svg { width: 22px; height: 22px; }
.scn h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); }
.scn .who { font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-sm); color: var(--gi-fg); }
.scn p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-snug); }

/* ---------- Phases (dark) ---------- */
.phases { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 16px); }
.phase {
  display: grid; grid-template-columns: 150px 1fr auto; gap: clamp(18px, 2.4vw, 36px); align-items: start;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--gi-radius-lg); padding: clamp(22px, 2.4vw, 32px);
}
@media (max-width: 800px) { .phase { grid-template-columns: 1fr; gap: 12px; } }
.phase .ph-tag { font-family: var(--gi-font-display); font-weight: var(--gi-w-extra); font-size: var(--gi-text-sm); letter-spacing: 0.02em; color: var(--gi-yellow); line-height: 1.2; }
.phase .ph-body h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); color: #fff; margin-bottom: 8px; }
.phase .ph-body p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: rgba(255,255,255,0.74); line-height: var(--gi-leading-base); }
.phase .ph-body .meta { display: inline-block; margin-top: 12px; font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-sm); color: var(--gi-yellow); }
.phase .ph-cost { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); color: #fff; white-space: nowrap; }
.phase.hi { border-color: var(--gi-yellow); background: rgba(248,177,51,0.08); }

/* generic two-line eyebrow accent under section heads */
.lead-accent { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.16; letter-spacing: -0.02em; color: var(--gi-yellow-deep); margin-top: var(--gi-space-6); text-wrap: balance; }
section[data-tone="dark"] .lead-accent { color: var(--gi-yellow); }
section[data-tone="yellow"] .lead-accent { color: var(--gi-black); }

/* outcome cards on white */
.out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 860px) { .out-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .out-grid { grid-template-columns: 1fr; } }
.out { background: var(--gi-surface); border-radius: var(--gi-radius-lg); padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.out .ibub { width: 42px; height: 42px; background: rgba(248,177,51,0.16); color: var(--gi-yellow-deep); }
.out .ibub svg { width: 21px; height: 21px; }
.out h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); }
.out p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-snug); }

/* ===== Visión CEO — numbered priority cards ===== */
.ceo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 860px) { .ceo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ceo-grid { grid-template-columns: 1fr; } }
.ceo-card { position: relative; background: var(--gi-white); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.ceo-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--gi-yellow); }
.ceo-card .ceo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ceo-card .ibub { width: 46px; height: 46px; background: rgba(248,177,51,0.16); color: var(--gi-yellow-deep); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ceo-card .ibub svg { width: 23px; height: 23px; }
.ceo-card .ceo-num { font-family: var(--gi-font-display); font-weight: var(--gi-w-extra); font-size: clamp(34px, 4vw, 50px); line-height: 1; color: rgba(29,29,27,0.10); letter-spacing: -0.03em; }
.ceo-card h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); line-height: 1.16; letter-spacing: -0.01em; }
.ceo-card p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-base); }
/* Resultado callout band */
.ceo-result { margin-top: clamp(20px, 2.4vw, 32px); background: var(--gi-yellow); border-radius: var(--gi-radius-xl); padding: clamp(28px, 3vw, 44px); display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.ceo-result .ibub { width: 62px; height: 62px; background: rgba(29,29,27,0.10); color: var(--gi-black); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ceo-result .ibub svg { width: 30px; height: 30px; }
.ceo-result .rc-body { flex: 1; min-width: 280px; }
.ceo-result .rc-lab { display: block; font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wider); text-transform: uppercase; color: rgba(29,29,27,0.62); margin-bottom: 8px; }
.ceo-result .rc-text { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -0.02em; color: var(--gi-black); }
.ceo-result .rc-text em { font-style: normal; color: var(--gi-white); background: var(--gi-black); padding: 0 8px; border-radius: 6px; }

/* eyebrow tag above an outcomes/cards group */
.group-eyebrow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: var(--gi-space-8); }
.group-eyebrow .ge-title { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-lg); letter-spacing: -0.01em; }
.group-eyebrow .ge-sub { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); }