/* ==========================================================================
   Spherics · sistema de componentes para artículos de /casos/
   ==========================================================================
   Se carga DESPUÉS de styles.css (no lo reemplaza): reutiliza sus tokens
   (--bg, --surface, --line, --text, --dim, --faint, --emerald, --cyan, --grad,
   --radius, --radius-sm, --radius-lg, --warning) y sus componentes de base
   (.eyebrow, .callout, .kicker, .data-table, .pipeline/.pipeline-step,
   .cta-card, .chart-wrap). Este archivo SOLO agrega lo que falta para la
   experiencia editorial de un caso: hero con métrica, grilla de métricas,
   comparaciones, calibración, línea de tiempo, TOC y estilos de impresión.

   Ver site/casos/README.md para cómo armar un caso nuevo con estas piezas,
   y site/casos/NUMBER_FORMATTING.md para la política de cifras.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. CASE HERO
   -------------------------------------------------------------------- */
html,body{overflow-x:hidden}
.case-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);
  gap:clamp(24px,5vw,56px);align-items:end;
  padding-top:64px;padding-bottom:40px;
}
.case-hero > *{min-width:0}
.case-hero .eyebrow{margin-bottom:14px}
.case-hero h1{font-size:clamp(28px,4.6vw,42px);max-width:16ch;margin:0 0 14px}
.case-hero__deck{font-size:clamp(15px,1.6vw,17px);color:var(--dim);max-width:52ch;margin:0}

.case-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.meta-pill{
  display:inline-flex;align-items:center;min-height:30px;padding:5px 12px;
  border-radius:999px;color:var(--dim);background:rgba(255,255,255,.035);
  border:1px solid var(--line);font-size:12.5px;
}

.hero-visual{
  position:relative;min-height:240px;border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(circle at 67% 30%,rgba(52,208,255,.16),transparent 16rem),
             linear-gradient(145deg,var(--surface2),var(--bg2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;
}
.hero-visual .stat-ring-wrap{width:min(190px,60%);flex:none}
.hero-visual .stat-ring-label .num{font-size:38px}
.hero-visual__caption{
  margin:14px 0 0;max-width:100%;
  color:var(--dim);font-size:13px;text-align:center;
}

@media (max-width:900px){
  .case-hero{grid-template-columns:1fr;align-items:start}
  .hero-visual{min-height:220px}
}

/* --------------------------------------------------------------------
   2. LAYOUT DE ARTÍCULO + ÍNDICE (TOC)
   -------------------------------------------------------------------- */
.case-layout{
  display:grid;grid-template-columns:minmax(0,var(--maxw-article)) var(--toc-w);
  justify-content:space-between;gap:clamp(28px,5vw,64px);align-items:start;
  max-width:var(--maxw);margin:0 auto;padding:0 20px;
}
.case-main{min-width:0}

.article-toc{
  position:sticky;top:80px;padding:16px;border-radius:var(--radius);
  background:rgba(18,26,46,.7);border:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.article-toc__title{
  display:block;margin-bottom:10px;color:var(--faint);font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.article-toc nav{display:flex;flex-direction:column}
.article-toc a{
  display:block;padding:7px 9px;color:var(--dim);text-decoration:none;
  border-left:2px solid transparent;border-radius:0 8px 8px 0;
  font-size:13px;line-height:1.35;
  transition:color .2s var(--ease-out),background .2s var(--ease-out),border-color .2s var(--ease-out);
}
.article-toc a:hover,.article-toc a[aria-current="true"]{
  color:var(--text);background:rgba(52,208,255,.08);border-color:var(--cyan);
}

.article-section{scroll-margin-top:84px;padding:44px 0;border-top:1px solid var(--line)}
.article-section:first-child{padding-top:0;border-top:0}
.section-deck{max-width:60ch;margin:-6px 0 22px;color:var(--dim);font-size:15.5px}

@media (max-width:900px){
  .case-layout{grid-template-columns:minmax(0,1fr)}
  .article-toc{position:relative;top:auto;order:-1;margin-bottom:28px}
  .article-toc nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .article-toc nav{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------
   3. METRIC GRID / METRIC CARD
   -------------------------------------------------------------------- */
.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:26px 0}
.metric-card{
  position:relative;padding:20px;border-radius:var(--radius);
  background:linear-gradient(145deg,var(--surface2),var(--surface));
  border:1px solid var(--line);
}
.metric-card--featured{
  grid-column:span 2;
  background:radial-gradient(circle at 87% 20%,rgba(16,211,158,.16),transparent 16rem),
             linear-gradient(145deg,var(--surface2),var(--surface));
}
.metric-card__label{
  display:block;color:var(--faint);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.metric-card__value{
  display:block;margin-top:8px;font-family:'Space Grotesk',sans-serif;
  font-size:clamp(28px,5vw,44px);font-weight:700;line-height:1;letter-spacing:-.03em;
  color:var(--text);
}
.metric-card__value small{font-size:.42em;color:var(--dim);font-weight:600}
.metric-card__interpretation{max-width:38ch;margin:10px 0 0;color:var(--dim);font-size:13.5px;line-height:1.5}
.metric-card__comparison{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  color:var(--emerald);font-size:12.5px;font-weight:700;
}
.metric-card__comparison::before{content:"↑"}
.metric-card__meta{
  display:block;margin-top:10px;color:var(--faint);font-size:11.5px;
}

@media (max-width:560px){
  .metric-grid{grid-template-columns:1fr}
  .metric-card--featured{grid-column:auto}
}

/* --------------------------------------------------------------------
   4. QUESTION GRID (los tres niveles de evaluación)
   -------------------------------------------------------------------- */
.question-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0}
.question-card{padding:18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.question-card__number{
  width:30px;height:30px;margin-bottom:12px;display:grid;place-items:center;
  border-radius:50%;background:var(--grad);color:#04140f;font-weight:800;font-size:14px;
}
.question-card h3{font-size:15.5px;margin-bottom:6px}
.question-card p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.5}

@media (max-width:760px){.question-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------
   5. COMPARISON CHART (barras HTML/CSS, accesibles)
   -------------------------------------------------------------------- */
.bar-chart{display:grid;gap:12px}
.bar-row{display:grid;grid-template-columns:112px 1fr 58px;gap:10px;align-items:center}
.bar-row__label{color:var(--dim);font-size:13.5px}
.bar-row__track{position:relative;height:16px;border-radius:999px;background:var(--line);overflow:hidden}
.bar-row__fill{
  position:absolute;inset:0;width:var(--value);height:100%;border-radius:inherit;
  background:var(--line2);transform-origin:left;
}
.bar-row--highlight .bar-row__fill{background:var(--grad)}
.bar-row__value{color:var(--text);font-variant-numeric:tabular-nums;font-size:13.5px;text-align:right;font-weight:600}

@media (max-width:560px){
  .bar-row{grid-template-columns:88px 1fr 50px;gap:8px}
}

/* --------------------------------------------------------------------
   6. SPLIT COMPARISON (grupos vs. eliminación, etc.)
   -------------------------------------------------------------------- */
.split-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.split-card{padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.split-card__label{color:var(--faint);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.split-card strong{
  display:block;margin-top:6px;font-family:'Space Grotesk',sans-serif;
  font-size:2rem;line-height:1;letter-spacing:-.03em;color:var(--text);
}
.split-card__meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--dim);font-size:13px}

@media (max-width:560px){.split-comparison{grid-template-columns:1fr}}

/* --------------------------------------------------------------------
   7. EDITION GRID (2018 / 2022 / 2026, etc.)
   -------------------------------------------------------------------- */
.edition-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.edition-card{padding:18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.edition-card--current{
  border-color:rgba(16,211,158,.5);
  background:linear-gradient(145deg,rgba(16,211,158,.08),var(--surface));
}
.edition-card__year{color:var(--faint);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.edition-card__rps{
  margin:8px 0 12px;font-family:'Space Grotesk',sans-serif;font-size:1.8rem;
  font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--text);
}
.edition-card dl{margin:0;display:grid;gap:7px}
.edition-card dl div{display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:13px}
.edition-card dt,.edition-card dd{margin:0}
.edition-card dd{color:var(--text);font-variant-numeric:tabular-nums}

@media (max-width:760px){.edition-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------
   8. CALLOUT — variantes sobre el .callout ya existente en styles.css
   -------------------------------------------------------------------- */
.callout{border-left:3px solid var(--cyan)}
.callout--lesson{border-left-color:var(--emerald);background:var(--emerald-soft)}
.callout--limit{border-left-color:var(--warning);background:var(--warning-soft)}
.callout--limit .kicker{color:var(--warning)}

/* --------------------------------------------------------------------
   9. FLUJO DE MÉTODO — conector visual sobre .pipeline/.pipeline-step
   -------------------------------------------------------------------- */
.pipeline{position:relative}
.pipeline-step{position:relative}
.pipeline-step:not(:last-child)::after{
  content:"→";position:absolute;top:50%;right:-15px;z-index:2;
  width:22px;height:22px;display:grid;place-items:center;transform:translateY(-50%);
  border-radius:50%;background:var(--bg);border:1px solid var(--line);
  color:var(--cyan);font-size:12px;
}
@media (max-width:860px){
  .pipeline-step:nth-child(2)::after{display:none}
}
@media (max-width:560px){
  .pipeline-step:not(:last-child)::after{
    content:"↓";top:auto;bottom:-15px;right:50%;transform:translateX(50%);
  }
}

/* --------------------------------------------------------------------
   10. TABLA — wrapper con scroll + fila destacada, sobre .data-table
   -------------------------------------------------------------------- */
.table-wrap{margin:20px 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
.table-wrap table.data-table{margin:0}
table.data-table tr.is-best td{color:var(--text);background:rgba(16,211,158,.05)}
table.data-table tr.is-best td:first-child{font-weight:600}

/* --------------------------------------------------------------------
   11. ACORDEÓN (details/summary nativos)
   -------------------------------------------------------------------- */
details.explainer{
  margin:16px 0;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);
}
details.explainer summary{
  padding:14px 16px;cursor:pointer;color:var(--text);font-weight:600;font-size:14.5px;
  list-style:none;
}
details.explainer summary::-webkit-details-marker{display:none}
details.explainer summary::after{content:"+";float:right;color:var(--cyan);font-size:16px}
details.explainer[open] summary::after{content:"−"}
details.explainer .details-body{padding:0 16px 16px;color:var(--dim);font-size:14px;line-height:1.6}
details.explainer .details-body p{margin:0 0 10px}
details.explainer .details-body p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------
   12. LÍNEA DE TIEMPO
   -------------------------------------------------------------------- */
.timeline{position:relative;margin:24px 0;padding-left:22px}
.timeline::before{
  content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;
  background:linear-gradient(var(--cyan),var(--emerald));
}
.timeline-item{position:relative;padding:0 0 22px 16px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
  content:"";position:absolute;left:-21px;top:4px;width:11px;height:11px;
  border-radius:50%;background:var(--bg);border:2px solid var(--cyan);
}
.timeline-item time{
  display:block;color:var(--cyan);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.timeline-item h3{font-size:15.5px;margin:5px 0 4px}
.timeline-item p{margin:0;color:var(--dim);font-size:14px}

/* --------------------------------------------------------------------
   13. CONCLUSIÓN DE CASO
   -------------------------------------------------------------------- */
.case-conclusion{
  margin:44px 0 0;padding:28px;border-radius:var(--radius-lg);
  background:radial-gradient(circle at 90% 10%,rgba(16,211,158,.12),transparent 18rem),
             linear-gradient(145deg,var(--surface2),var(--bg2));
  border:1px solid rgba(16,211,158,.3);
}
.conclusion-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none;counter-reset:lessons}
.conclusion-list li{
  counter-increment:lessons;display:grid;grid-template-columns:28px 1fr;gap:12px;
  align-items:start;color:var(--dim);font-size:14.5px;line-height:1.5;
}
.conclusion-list li::before{
  content:counter(lessons);width:28px;height:28px;display:grid;place-items:center;
  border-radius:50%;background:var(--grad);color:#04140f;font-weight:800;font-size:13px;
}

/* --------------------------------------------------------------------
   14. GRÁFICO DE CALIBRACIÓN (dispersión simple + tabla accesible)
   -------------------------------------------------------------------- */
.calibration-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(180px,.7fr);gap:20px;align-items:center}
.calibration-legend{display:grid;gap:10px}
.legend-item{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;color:var(--dim);font-size:13px}
.legend-dot{width:10px;height:10px;border-radius:50%;background:var(--cyan)}
.legend-item strong{color:var(--text)}

@media (max-width:760px){.calibration-wrap{grid-template-columns:1fr}}

/* --------------------------------------------------------------------
   15. IMPRESIÓN
   -------------------------------------------------------------------- */
@page{size:A4;margin:14mm}

@media print{
  :root{
    --bg:#ffffff; --bg2:#ffffff; --surface:#ffffff; --surface2:#f4f7fb;
    --text:#111827; --dim:#374151; --faint:#667085;
    --line:#cbd5e1; --line2:#94a3b8;
    --cyan:#0088aa; --emerald:#008b70; --warning:#8a6b1a;
    --warning-soft:#fff8e7; --emerald-soft:#edf9f5;
  }
  html,body{background:#fff !important;color:var(--text)}
  body{font-size:10.5pt;line-height:1.5}
  .nav,.article-toc,.hero-visual .stat-ring-wrap svg circle[stroke="url(#ringGrad)"]{ }
  .nav,.article-toc{display:none !important}
  .case-hero{grid-template-columns:1fr;padding:0 0 8mm}
  .hero-visual{display:none}
  .case-layout{display:block;max-width:100%;padding:0}
  .article-section{padding:8mm 0;border-color:var(--line)}
  h1{font-size:22pt}
  h2{font-size:15pt}
  h3{font-size:12pt}
  .metric-card,.question-card,.chart-wrap,.callout,.split-card,.edition-card,
  .pipeline-step,.case-conclusion,.cta-card,details.explainer,.table-wrap{
    background:#fff;border-color:var(--line);box-shadow:none;break-inside:avoid;
  }
  .metric-card--featured{grid-column:auto}
  .metric-grid,.question-grid,.edition-grid,.split-comparison,.grid-4.pipeline{gap:4mm}
  .bar-row__track{background:#dce4ee}
  .bar-row__fill{background:#667895}
  .bar-row--highlight .bar-row__fill{background:linear-gradient(90deg,var(--cyan),var(--emerald))}
  details.explainer > *{display:block}
  details.explainer summary::after{display:none}
  a{text-decoration:none;color:var(--text)}
  .btn-primary{background:#e5e7eb;color:#111827}
  .site-footer{margin-top:8mm;padding-top:4mm}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
}