/* Caso real — sección autocontenida, todas las reglas bajo .caso-real. Reutiliza tokens de style.css y el lenguaje visual de rendimiento.css */
.caso-real{
  --font-num:'Inter','IBM Plex Sans',Arial,sans-serif;
  --risk:#e0574f;--risk-bg:rgba(224,87,79,.12);--risk-line:rgba(224,87,79,.55);
}
.caso-real .cr-k-value,.caso-real .cr-abs-value,.caso-real .cr-stat dd,.caso-real .cr-tooltip b,.caso-real .cr-tooltip .tt-line{
  font-family:var(--font-num);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;
}
.caso-real .pos{color:var(--pos)}
.caso-real .neg{color:var(--neg)}
.caso-real .gold{color:var(--gold)}

/* título + pill */
.caso-real .section-head{max-width:none;margin-bottom:44px}
.caso-real .section-head p{max-width:680px}
.caso-real .cr-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:16px}
.caso-real .cr-title-row h2{margin:0}
.caso-real .cr-pill{
  display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;
  font:500 11px/1 var(--font-mono);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--risk);background:var(--risk-bg);border:1px solid var(--risk-line);border-radius:999px;padding:7px 12px 6px;
}
.caso-real .cr-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--risk);flex:none}
.caso-real .cr-pill-sm{font-size:10px;letter-spacing:1.1px;padding:5px 9px 4px;gap:6px}
.caso-real .cr-pill-sm:before{width:5px;height:5px}

/* review + abs gain */
.caso-real .cr-review-row{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:28px}
.caso-real .cr-review{margin:0;background:var(--panel);padding:34px 34px 28px;display:flex;flex-direction:column;gap:20px;min-width:0}
.caso-real .cr-person{display:flex;align-items:center;gap:16px;min-width:0}
.caso-real .cr-avatar{
  flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font:400 20px/1 var(--font-display);letter-spacing:.5px;color:var(--gold);
  background:radial-gradient(circle at 30% 25%,rgba(201,163,102,.28),rgba(201,163,102,.06) 70%);border:1px solid rgba(201,163,102,.55);
}
.caso-real .cr-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.caso-real .cr-name-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.caso-real .cr-name{font:400 22px/1.2 var(--font-display);color:var(--fg)}
.caso-real .cr-acct{font-size:13px;color:var(--fg-soft)}
.caso-real .cr-label{font:11px var(--font-mono);letter-spacing:1px;color:var(--soft)}
.caso-real .cr-rating{display:flex;align-items:center;gap:14px}
.caso-real .cr-stars{color:var(--gold);font-size:17px;letter-spacing:3px;line-height:1}
.caso-real .cr-date{font:11px var(--font-mono);color:var(--muted);letter-spacing:.8px}
.caso-real .cr-quote{margin:0;padding:0 0 0 18px;border-left:2px solid var(--gold)}
.caso-real .cr-quote p{margin:0;font:italic 400 18px/1.6 var(--font-display);color:var(--fg)}
.caso-real .cr-quote p:before{content:"\201C"}.caso-real .cr-quote p:after{content:"\201D"}
.caso-real .cr-verify{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:auto;padding-top:18px;border-top:1px solid var(--line-soft)}
.caso-real .cr-badge{display:inline-flex;align-items:center;gap:8px;font:11px var(--font-mono);letter-spacing:.8px;color:var(--pos)}
.caso-real .cr-dot{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px rgba(127,174,143,.18)}
.caso-real .cr-link{font-size:13px;color:var(--gold);border-bottom:1px solid rgba(201,163,102,.4);padding-bottom:1px;transition:border-color .2s,color .2s}
.caso-real .cr-link:hover{color:#dab77c;border-color:var(--gold)}

.caso-real .cr-abs{background:var(--panel);padding:34px 30px 28px;display:flex;flex-direction:column;gap:10px;min-width:0;
  background-image:linear-gradient(180deg,rgba(127,174,143,.07),rgba(127,174,143,0) 60%)}
.caso-real .cr-abs-label{font:11px var(--font-mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--soft)}
.caso-real .cr-abs-value{font-size:clamp(46px,5.2vw,64px);font-weight:300;letter-spacing:-1.6px;line-height:1;color:var(--pos)}
.caso-real .cr-abs-hint{font:11px var(--font-mono);color:var(--muted);letter-spacing:.4px}
.caso-real .cr-facts{list-style:none;margin:auto 0 0;padding:18px 0 0;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:6px;font:11px/1.4 var(--font-mono);color:var(--fg-soft)}
.caso-real .cr-facts li{white-space:nowrap;border:1px solid var(--line);padding:4px 8px;background:rgba(255,255,255,.015)}

/* KPIs (mismo patrón que .performance .kpi) */
.caso-real .cr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:28px}
.caso-real .cr-kpi{background:var(--panel);padding:28px 22px;min-height:118px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-width:0}
.caso-real .cr-k-label{font:11px var(--font-mono);letter-spacing:1.6px;color:var(--soft);text-transform:uppercase}
.caso-real .cr-k-value{font-size:clamp(28px,2.7vw,34px);font-weight:300;letter-spacing:-.6px;line-height:1;color:var(--fg)}
.caso-real .cr-k-value.pos{color:var(--pos)}.caso-real .cr-k-value.neg{color:var(--neg)}.caso-real .cr-k-value.gold{color:var(--gold)}
.caso-real .cr-k-hint{font:11px var(--font-mono);color:var(--muted);letter-spacing:.4px}

/* gráfico */
.caso-real .cr-chart-panel{border:1px solid var(--line);background:var(--panel);padding:28px 28px 20px;margin-bottom:28px}
.caso-real .cr-chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.caso-real .cr-legend{display:inline-flex;align-items:center;gap:8px;font:11px var(--font-mono);color:var(--muted);letter-spacing:.4px}
.caso-real .cr-legend i{display:inline-block}
.caso-real .cr-lg-line{width:18px;height:2px;background:var(--gold)}
.caso-real .cr-lg-bar{width:8px;height:10px;margin-left:10px;background:linear-gradient(90deg,rgba(127,174,143,.55) 50%,rgba(201,138,114,.55) 50%)}
.caso-real .cr-chart-wrap{position:relative;width:100%;aspect-ratio:1100/400;max-height:460px}
.caso-real .cr-chart-wrap canvas{width:100%!important;height:100%!important;display:block;cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.caso-real .cr-tooltip{position:absolute;left:0;top:0;pointer-events:none;z-index:2;background:rgba(16,18,22,.96);border:1px solid var(--line);padding:10px 12px 9px;font:12px var(--font-sans);color:var(--fg);min-width:160px;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.caso-real .cr-tooltip .tt-date{display:block;font:11px var(--font-mono);color:var(--soft);letter-spacing:.8px}
.caso-real .cr-tooltip b{display:block;font-size:20px;font-weight:300;letter-spacing:-.3px;margin:5px 0 1px}
.caso-real .cr-tooltip .tt-cap{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.caso-real .cr-tooltip .tt-line{display:flex;justify-content:space-between;gap:14px;font-size:11.5px;color:var(--soft);font-weight:300}
.caso-real .cr-tooltip .tt-line i{font-style:normal;color:var(--muted);font-family:var(--font-sans)}
.caso-real .cr-caption{margin:14px 0 4px;font-size:13px;color:var(--fg-soft)}
.caso-real .cr-chart-note{margin:0;font:11px/1.6 var(--font-mono);color:var(--muted);letter-spacing:.2px}

/* estadísticas */
.caso-real .cr-stats-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.caso-real .cr-stats-note{font:11px var(--font-mono);color:var(--muted);letter-spacing:.4px}
.caso-real .cr-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 22px}
.caso-real .cr-stat{background:var(--panel);padding:16px 18px 15px;display:flex;flex-direction:column;gap:6px;min-width:0}
.caso-real .cr-stat dt{font:400 12px/1.4 var(--font-sans);color:var(--soft);letter-spacing:.2px}
.caso-real .cr-stat dd{margin:0;font-size:19px;font-weight:300;letter-spacing:-.3px;line-height:1.15;color:var(--fg)}
.caso-real .cr-stat dd.pos{color:var(--pos)}.caso-real .cr-stat dd.neg{color:var(--neg)}
.caso-real .cr-risk{margin:0;max-width:640px}

@media(max-width:900px){
  .caso-real .cr-review-row{grid-template-columns:1fr}
  .caso-real .cr-kpis{grid-template-columns:1fr 1fr}
  .caso-real .cr-stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .caso-real .section-head{margin-bottom:32px}
  .caso-real .cr-pill{font-size:10px;padding:6px 10px 5px}
  .caso-real .cr-review{padding:24px 20px 20px;gap:16px}
  .caso-real .cr-avatar{width:48px;height:48px;font-size:17px}
  .caso-real .cr-name{font-size:20px}
  .caso-real .cr-quote{padding-left:14px}
  .caso-real .cr-quote p{font-size:16px}
  .caso-real .cr-verify{flex-direction:column;align-items:flex-start}
  .caso-real .cr-abs{padding:24px 20px 20px}
  .caso-real .cr-abs-value{font-size:48px}
  .caso-real .cr-facts{font-size:10.5px}
  .caso-real .cr-kpi{padding:20px 16px;min-height:100px}
  .caso-real .cr-k-value{font-size:25px}
  .caso-real .cr-k-label{font-size:10px;letter-spacing:1px}
  .caso-real .cr-k-hint{font-size:10px}
  .caso-real .cr-chart-panel{padding:20px 14px 14px}
  .caso-real .cr-chart-wrap{aspect-ratio:1.05}
  .caso-real .cr-legend{font-size:10px}
  .caso-real .cr-stat{padding:14px 14px 13px}
  .caso-real .cr-stat dt{font-size:11.5px}
  .caso-real .cr-stat dd{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.caso-real *{transition:none!important;animation:none!important}}

/* solo testimonios: sin espacio extra debajo, el resto de la página sube */
.caso-real{padding-bottom:0}
.caso-real .section-head{margin-bottom:32px}
.caso-real .section-head h2{margin-bottom:0}
.caso-real .cr-review-row{margin-bottom:0}

/* el porcentaje escala con el ancho real de la tarjeta: nunca se sale del recuadro (pantallas anchas/4K incluidas) */
.caso-real .cr-abs-value{white-space:nowrap;max-width:100%}
@supports (container-type:inline-size){
  .caso-real .cr-abs{container-type:inline-size}
  .caso-real .cr-abs-value{font-size:min(clamp(46px,5.2vw,64px),20cqi)}
  @media(max-width:680px){.caso-real .cr-abs-value{font-size:min(48px,20cqi)}}
}