/* Portfolio → detalle de cada ratio (assets/portfolio/ratios.js). Sin texto gris:
   blanco + champagne; los colores de estado solo en marcas y puntos. */
.pf-metric-card--pfr { cursor:pointer; transition:border-color .2s ease, transform .2s cubic-bezier(.23,1,.32,1), box-shadow .25s ease; }
@media (hover:hover) { .pf-metric-card--pfr:hover { transform:translateY(-2px); border-color:rgba(233,211,160,.45) !important; } .pf-metric-card--pfr:hover .pfr-ver { color:#f3e3bd; border-color:rgba(233,211,160,.6); } }
.pf-metric-card--pfr:active { transform:scale(.985); }
.pf-metric-card--pfr:focus-visible { outline:2px solid rgba(233,211,160,.7); outline-offset:2px; }
.pf-metric-card--pfr.is-on { border-color:rgba(233,211,160,.7) !important; box-shadow:0 0 0 1px rgba(233,211,160,.35), 0 18px 40px -24px rgba(233,211,160,.45); }
.pfr-ver { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1px solid rgba(233,211,160,.3); color:#e9d3a0; transition:color .2s, border-color .2s; }
.pfr-ver svg { width:12px; height:12px; }
.pf-metric-card--pfr.is-on .pfr-ver { background:#e9d3a0; color:#0a1322; border-color:#e9d3a0; }

.pfr[hidden] { display:none; }
.pfr { grid-column:1 / -1; margin:16px 0 6px; padding:1px; border-radius:18px;
  background:linear-gradient(140deg, rgba(243,227,189,.55), rgba(233,211,160,.08) 35%, rgba(120,150,210,.14) 70%, rgba(243,227,189,.35));
  animation:pfrIn .4s cubic-bezier(.23,1,.32,1) both; }
@keyframes pfrIn { from { opacity:0; transform:translateY(8px); } }
.pfr-in { border-radius:17px; padding:22px 24px 20px; color:#f3f6fb; font-family:'IBM Plex Sans',system-ui,sans-serif;
  background:radial-gradient(60% 80% at 0% 0%, rgba(233,211,160,.07), transparent 60%), linear-gradient(180deg,#0e1c35,#0a1528); }
.pfr-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.pfr-head h3 { margin:0; font:400 22px/1.1 'DM Serif Display',Georgia,serif; color:#f3f6fb; }
.pfr-x { width:32px; height:32px; border-radius:50%; border:1px solid rgba(233,211,160,.3); background:transparent; color:#f3f6fb; font-size:18px; line-height:1; cursor:pointer; transition:border-color .2s, color .2s, transform .15s; }
.pfr-x:hover { border-color:rgba(233,211,160,.7); color:#f3e3bd; }
.pfr-x:active { transform:scale(.94); }
.pfr-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; align-items:start; }
.pfr-chart { min-width:0; }
.pfr-svg { display:block; width:100%; height:230px; overflow:visible; }
.pfr-svg--sq { height:auto; max-height:360px; }
.pfr-grid line.pfr-grid, .pfr-svg .pfr-grid { stroke:rgba(233,211,160,.12); stroke-width:1; }
.pfr-svg .pfr-cero { stroke:rgba(233,211,160,.35); }
.pfr-tick { font:500 10.5px 'IBM Plex Mono',ui-monospace,monospace; fill:#e9d3a0; }
.pfr-tick--b { fill:#f3f6fb; font-weight:600; }
.pfr-tag { font:600 10.5px 'IBM Plex Mono',ui-monospace,monospace; }
.pfr-cel { font:600 11px 'IBM Plex Mono',ui-monospace,monospace; fill:#f3f6fb; }
.pfr-ley { display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font:500 12px 'IBM Plex Sans',system-ui,sans-serif; color:#f3f6fb; }
.pfr-ley span { display:inline-flex; align-items:center; gap:7px; }
.pfr-ley i { width:14px; height:3px; border-radius:2px; }
.pfr-txt h4 { margin:0 0 6px; font:500 10.5px 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:#e9d3a0; }
.pfr-txt h4 + .pfr-p { margin-bottom:16px; }
.pfr-p { margin:0; font:400 13.5px/1.6 'IBM Plex Sans',system-ui,sans-serif; color:#f3f6fb; }
.pfr-p b { font-weight:600; }
.pfr-perfil { margin-bottom:14px; padding:12px 14px; border-radius:12px; border:1px solid rgba(86,199,147,.35); background:rgba(86,199,147,.06); }
.pfr-perfil.ojo { border-color:rgba(233,196,106,.45); background:rgba(233,196,106,.07); }
.pfr-a { border:0; background:none; padding:0; cursor:pointer; font:inherit; color:#f3e3bd; text-decoration:underline; text-decoration-color:rgba(233,211,160,.45); text-underline-offset:3px; }
.pfr-disc { margin:4px 0 0; font:400 11px/1.5 'IBM Plex Mono',ui-monospace,monospace; color:#e9d3a0; }

.pfr-bars { display:grid; gap:10px; }
.pfr-bar { display:grid; grid-template-columns:110px minmax(0,1fr) 62px; gap:12px; align-items:center; }
.pfr-bar__n { display:grid; font:600 13px 'IBM Plex Sans',system-ui,sans-serif; color:#f3f6fb; }
.pfr-bar__n small { font:500 10.5px 'IBM Plex Mono',ui-monospace,monospace; color:#e9d3a0; }
.pfr-bar__t { position:relative; height:10px; border-radius:6px; background:rgba(233,211,160,.08); }
.pfr-bar__t i { position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:linear-gradient(90deg, rgba(233,211,160,.55), #e9d3a0); animation:pfrBar .6s cubic-bezier(.23,1,.32,1) both; transform-origin:left; }
@keyframes pfrBar { from { transform:scaleX(0); } }
.pfr-bar__t em, .pfr-bars__ref em { position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:2px; background:#8fb4ff; }
.pfr-bar b { font:500 13px 'IBM Plex Mono',ui-monospace,monospace; color:#f3f6fb; text-align:right; }
.pfr-bars__ref { position:relative; display:flex; align-items:center; gap:10px; margin:6px 0 0; font:500 12px 'IBM Plex Sans',system-ui,sans-serif; color:#f3f6fb; }
.pfr-bars__ref em { position:static; display:inline-block; height:12px; }

@media (max-width:820px) {
  .pfr-in { padding:18px 16px; }
  .pfr-grid { grid-template-columns:1fr; gap:18px; }
  .pfr-svg { height:190px; }
  .pfr-bar { grid-template-columns:84px minmax(0,1fr) 54px; }
}
@media (prefers-reduced-motion:reduce) { .pfr, .pfr-bar__t i { animation:none; } }