/* ===========================================================
   DF CONSULTORES — componentes compartidos
   Requiere tokens.css
   =========================================================== */

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  font-size: var(--fs-eyebrow); font-weight:700;
  text-transform: uppercase; letter-spacing:.2em;
  color: var(--burgundy); display:inline-flex; align-items:center; gap:10px; margin:0;
}
.eyebrow::before{
  content:""; width:24px; height:1px; background: var(--champagne-600); display:inline-block;
}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--champagne-100); color: var(--burgundy-700);
  border:1px solid var(--champagne); border-radius: var(--r-pill);
  padding:8px 16px; font-size:13px; font-weight:700;
  letter-spacing:.02em; line-height:1; white-space:nowrap;
}
.badge .dot{ width:7px; height:7px; border-radius:50%; background: var(--champagne-600); box-shadow:0 0 0 4px rgba(226,186,134,.28); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-body); font-weight:700; font-size:16px; line-height:1;
  padding:17px 30px; border-radius: var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition: all .18s ease; white-space:nowrap;
}
.btn .arr{ transition: transform .18s ease; }
.btn:hover .arr{ transform: translateX(3px); }

.btn-primary{ background: var(--burgundy); color:#fff; }
.btn-primary:hover{ background: var(--burgundy-700); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn-primary .arr{ color: var(--champagne); }

.btn-champagne{ background: var(--champagne); color: var(--burgundy-900); }
.btn-champagne:hover{ background:#d4a86e; transform: translateY(-1px); box-shadow: var(--shadow-card); }

.btn-secondary{ background: transparent; color: var(--burgundy); border-color: var(--mauve-200); }
.btn-secondary:hover{ border-color: var(--burgundy); background: var(--mauve-100); }

.btn-ghost-light{ background: rgba(255,255,255,.10); color:#fff; border-color: rgba(255,255,255,.4); }
.btn-ghost-light:hover{ background: rgba(255,255,255,.18); }

.btn-lg{ padding:21px 38px; font-size:18px; }
.btn-block{ width:100%; }

/* ---------- Pillar / service card ---------- */
.pillar{
  background: var(--white); border:1px solid var(--line); border-radius: var(--r-lg);
  padding:34px 32px 30px; transition: all .22s ease; position:relative; overflow:hidden;
}
.pillar:hover{ border-color: var(--mauve-200); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.pillar .pnum{
  font-family: var(--font-display); font-size:22px; font-weight:600; color: var(--champagne-600);
  letter-spacing:.04em;
}
.pillar h3{
  font-family: var(--font-display); font-weight:600; font-size:26px; line-height:1.1;
  margin:14px 0 10px; color: var(--burgundy);
}
.pillar p{ margin:0 0 16px; color: var(--muted); font-size:15.5px; }
.pillar ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.pillar li{ font-size:14.5px; color: var(--ink); display:flex; gap:10px; align-items:flex-start; }
.pillar li::before{ content:""; flex:none; width:6px; height:6px; margin-top:7px; border-radius:50%; background: var(--champagne); }

/* ---------- Value prop ---------- */
.vprop{ display:flex; gap:18px; align-items:flex-start; }
.vprop .vmark{
  flex:none; width:46px; height:46px; border-radius: var(--r-md);
  background: var(--mauve-100); color: var(--burgundy); display:grid; place-items:center;
  font-family: var(--font-display); font-size:20px; font-weight:600; border:1px solid var(--mauve-200);
}
.vprop h4{ font-family: var(--font-body); font-weight:700; font-size:17px; margin:4px 0 6px; color: var(--ink); }
.vprop p{ margin:0; color: var(--muted); font-size:15px; }

/* ---------- FAQ accordion ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; font-weight:600; font-size:18px; color: var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--mauve-200);
  display:grid; place-items:center; color: var(--burgundy); transition: all .2s ease; position:relative;
}
.faq summary .pm::before, .faq summary .pm::after{
  content:""; position:absolute; background: currentColor; border-radius:2px;
}
.faq summary .pm::before{ width:12px; height:1.5px; }
.faq summary .pm::after{ width:1.5px; height:12px; transition: transform .2s ease; }
.faq details[open] summary .pm{ background: var(--burgundy); color:#fff; border-color: var(--burgundy); }
.faq details[open] summary .pm::after{ transform: scaleY(0); }
.faq .ans{ padding:0 4px 24px; color: var(--muted); font-size:16px; max-width:62ch; }

/* ---------- Tablero de Control Mensual (dashboard mock) ---------- */
.tablero{
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow:hidden;
}
.tablero .tb-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.tablero .tb-title{ display:flex; align-items:center; gap:12px; }
.tablero .tb-title .lg{ font-family:var(--font-display); font-weight:600; color:var(--burgundy); font-size:18px; }
.tablero .tb-month{
  font-size:13px; font-weight:600; color: var(--muted); border:1px solid var(--line);
  border-radius: var(--r-pill); padding:7px 14px; display:inline-flex; gap:8px; align-items:center;
}
.tablero .tb-kpis{ display:grid; grid-template-columns:repeat(4,1fr); }
.tablero .kpi{ padding:22px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.tablero .kpi:nth-child(4n){ border-right:none; }
.tablero .kpi .k-label{ font-size:12.5px; color: var(--muted); font-weight:600; letter-spacing:.02em; margin:0 0 8px; text-transform:uppercase; }
.tablero .kpi .k-val{ font-family: var(--font-body); font-weight:800; font-size:26px; color: var(--ink); letter-spacing:-.01em; font-variant-numeric: tabular-nums; }
.tablero .kpi .k-val.accent{ color: var(--burgundy); }
.tablero .kpi .k-sub{ font-size:12.5px; color: var(--muted); margin-top:6px; display:flex; align-items:center; gap:6px; }
.tablero .k-tag{ font-size:11px; font-weight:700; padding:3px 8px; border-radius: var(--r-pill); }
.tag-ok{ background: var(--salvia-100); color: var(--salvia-700); }
.tag-soon{ background: var(--champagne-100); color: var(--champagne-600); }
.tag-done{ background: var(--mauve-100); color: var(--burgundy-700); }

.tablero .tb-table{ padding:8px 24px 22px; }
.tablero .tb-table .row{
  display:grid; grid-template-columns: 1.6fr 1fr .9fr auto; gap:16px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px;
}
.tablero .tb-table .row:last-child{ border-bottom:1px solid var(--line); }
.tablero .tb-table .row .ob{ font-weight:600; color: var(--ink); }
.tablero .tb-table .row .amt{ font-variant-numeric: tabular-nums; font-weight:700; color: var(--ink); }
.tablero .tb-table .row .due{ color: var(--muted); font-size:13.5px; }
.tablero .tb-table .head-row{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.tablero .tb-table .head-row span{ font-weight:700; }

/* Mini bar chart */
.spark{ display:flex; align-items:flex-end; gap:5px; height:42px; }
.spark i{ flex:1; background: var(--mauve-200); border-radius:3px 3px 0 0; display:block; }
.spark i.on{ background: var(--burgundy); }