/* Letra Grande · estilos
   ─────────────────────────────────────────────────────────────────────────────────────────────
   PARÁMETROS DEL BLOQUE: se editan una sola vez, acá. Todo lo demás (fondos, bordes, botones,
   campos, etiquetas, tarjetas, gráficos, movimiento) se calcula a partir de estos valores.
   Para usar el comparador dentro de otro sitio con otra identidad, alcanza con poner la clase
   «tasas» en el contenedor y cambiar estos parámetros en ese contenedor.
   Marca: Letra Grande (ver marca/MARCA.md). Tinta, papel y el resaltador celeste.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.tasas {
  --marca: #5EB8EE;                                                          /* resaltador celeste: el color de la marca */
  --tinta: #16181D;                                                          /* texto del tema claro y tinta sobre el celeste */
  --grafito: #191715;                                                        /* fondo del tema oscuro: grafito cálido, como tinta sobre papel */
  --papel: #F7F6F2;                                                          /* fondo del tema claro */
  --azul: #2F6AB0;                                                           /* datos y enlaces */
  --tipo-titulos: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;  /* tipo de los títulos y cifras grandes */
  --tipo-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;            /* tipo del texto */
  --tipo-datos: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;       /* tipo de etiquetas y datos */
  --radio: 22px;                                                             /* radio base (0 = todo recto) */
  --movimiento: 1;                                                           /* 1 = con animaciones, 0 = sin animaciones */
}

/* ── Derivados (no hace falta tocarlos) ───────────────────────────────────────────────────── */
.tasas {
  /* acompañantes de la marca: el mismo celeste y el azul (barras de costo y gráficos) */
  --marca-2: var(--marca);
  --marca-3: color-mix(in oklab, var(--azul) 70%, var(--marca));
  /* color: tema oscuro (grafito cálido: el fondo y las superficies se mezclan con el papel, así los grises son tibios) */
  --accent: var(--marca);
  --accent-ink: var(--tinta);                                                /* sobre el celeste siempre va tinta, nunca blanco */
  --accent-text: color-mix(in oklab, var(--marca) 82%, #fff);
  --bg: var(--grafito);
  --bg-2: color-mix(in oklab, var(--grafito) 97%, var(--papel));
  --surface: color-mix(in oklab, var(--grafito) 95%, var(--papel));
  --surface-2: color-mix(in oklab, var(--grafito) 90%, var(--papel));
  --surface-3: color-mix(in oklab, var(--grafito) 84%, var(--papel));
  --fg: var(--papel);
  --muted: color-mix(in oklab, var(--papel) 64%, var(--grafito));
  --line: color-mix(in srgb, var(--fg) 10%, transparent);
  --line-2: color-mix(in srgb, var(--fg) 18%, transparent);
  --glow: color-mix(in srgb, var(--marca) 22%, transparent);
  --brillo: color-mix(in srgb, #fff 6%, transparent);                     /* reflejo del borde superior de las tarjetas */
  --good: #7edc9e; --warn: #ffc857; --bad: #ff8b7a;
  --debajo: #4A9BDB; --encima: #E0603F;                                     /* frente a la media: por debajo / por encima */
  --shadow: 0 1px 0 var(--brillo) inset, 0 30px 60px -30px rgba(0, 0, 0, .75), 0 10px 20px -12px rgba(0, 0, 0, .45);
  --shadow-up: 0 1px 0 var(--brillo) inset, 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px var(--line-2);
  --grano: .04;
  /* el resaltador: color plano, sin degradés */
  --degrade: linear-gradient(var(--marca), var(--marca));
  --degrade-fuerte: linear-gradient(var(--marca), var(--marca));
  /* trazo de resaltador detrás de una palabra (la letra encima va en tinta) */
  --resaltador: linear-gradient(176deg, transparent 0 16%, var(--marca) 16% 90%, transparent 90%);
  color-scheme: dark;
  /* tipo */
  --f-display: var(--tipo-titulos); --f-body: var(--tipo-texto); --f-mono: var(--tipo-datos);
  /* forma: todos los radios salen de --radio */
  --r-card: var(--radio);
  --r-field: calc(var(--radio) * .6);
  --r-small: calc(var(--radio) * .4);
  --r-pill: calc(var(--radio) * 999);
  /* movimiento: entra y se asienta (curva que frena suave, sin pasarse ni rebotar) */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: calc(var(--movimiento) * 560ms);
  --dur-in: calc(var(--movimiento) * 900ms);
  --stagger: calc(var(--movimiento) * 70ms);
  --gutter: clamp(16px, 4vw, 48px); --maxw: 1240px; --alto-top: 68px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tasas {
    --accent-text: var(--azul);
    --bg: var(--papel); --bg-2: color-mix(in oklab, var(--papel) 94%, var(--tinta));
    --surface: #fff; --surface-2: color-mix(in oklab, var(--papel) 96%, var(--tinta)); --surface-3: color-mix(in oklab, var(--papel) 90%, var(--tinta));
    --fg: var(--tinta); --muted: color-mix(in oklab, var(--tinta) 68%, var(--papel));
    --line: color-mix(in srgb, var(--fg) 10%, transparent); --line-2: color-mix(in srgb, var(--fg) 17%, transparent);
    --glow: color-mix(in srgb, var(--marca) 26%, transparent); --brillo: transparent;
    --good: #12844a; --warn: #9a6400; --bad: #c03a22; --grano: .03; --debajo: #2F6AB0; --encima: #E5432B; --debajo: #2F6AB0; --encima: #E5432B;
    --shadow: 0 1px 2px rgba(22, 24, 29, .06), 0 20px 40px -24px rgba(22, 24, 29, .2);
    --shadow-up: 0 2px 4px rgba(22, 24, 29, .06), 0 30px 60px -28px rgba(22, 24, 29, .3), 0 0 0 1px var(--line-2);
    color-scheme: light;
  }
}
:root[data-theme="light"] .tasas {
  --accent-text: var(--azul);
  --bg: var(--papel); --bg-2: color-mix(in oklab, var(--papel) 94%, var(--tinta));
  --surface: #fff; --surface-2: color-mix(in oklab, var(--papel) 96%, var(--tinta)); --surface-3: color-mix(in oklab, var(--papel) 90%, var(--tinta));
  --fg: var(--tinta); --muted: color-mix(in oklab, var(--tinta) 68%, var(--papel));
  --line: color-mix(in srgb, var(--fg) 10%, transparent); --line-2: color-mix(in srgb, var(--fg) 17%, transparent);
  --glow: color-mix(in srgb, var(--marca) 26%, transparent); --brillo: transparent;
  --good: #12844a; --warn: #9a6400; --bad: #c03a22; --grano: .03;
  --shadow: 0 1px 2px rgba(22, 24, 29, .06), 0 20px 40px -24px rgba(22, 24, 29, .2);
  --shadow-up: 0 2px 4px rgba(22, 24, 29, .06), 0 30px 60px -28px rgba(22, 24, 29, .3), 0 0 0 1px var(--line-2);
  color-scheme: light;
}
:root[data-theme="dark"] .tasas { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { .tasas { --movimiento: 0; } }

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-top, 68px) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.tasas { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.6 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* grano: le saca lo «plano» a los fondos grandes */
body.tasas::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: var(--grano); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tasas ::selection { background: color-mix(in srgb, var(--marca) 40%, transparent); }
:where(.tasas) a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.tasas) a:hover { text-decoration-thickness: 2px; }
:where(.tasas) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.tasas :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
.tasas svg { flex: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { font-family: var(--f-display); font-weight: 800; letter-spacing: -.025em; line-height: .95; margin: 0; text-wrap: balance; }
.eyebrow { font: 500 .72rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--degrade); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.note { font-size: .84rem; color: var(--muted); margin: 0; }
.prose { max-width: 70ch; color: var(--muted); font-size: 1.05rem; margin: 0; text-wrap: pretty; }
.prose b { color: var(--fg); }

/* el video de la marca, arriba de todo: horizontal en pantallas anchas, vertical en celulares parados */
.video-top { padding-block: clamp(18px, 3vw, 36px) 0; position: relative; z-index: 1; }
.reel { margin: 0; display: grid; gap: 14px; }
.reel-video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r-card); background: var(--tinta); box-shadow: var(--shadow); border: 1px solid var(--line); }
.reel figcaption { display: grid; gap: 10px; max-width: 80ch; }
.reel-txt summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.reel-txt .note { margin: 10px 0 0; }
.reel-txt ol { margin: 10px 0 0; padding-left: 1.3em; color: var(--muted); display: grid; gap: 6px; font-size: .92rem; }
@media (max-width: 700px) and (orientation: portrait) {
  .reel-video { aspect-ratio: 9 / 16; width: min(100%, calc(72svh * 9 / 16)); margin-inline: auto; }
}
.saltar { position: fixed; left: 16px; top: -60px; z-index: 60; background: var(--accent); color: var(--accent-ink) !important; padding: 10px 16px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; transition: top .2s; }
.saltar:focus { top: 12px; }

/* ── Entrada: cada pieza sube un poco y se asienta, una después de otra ───────────────────── */
@keyframes asentar { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.entra { animation: asentar var(--dur-in) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.tasas.js:not(.listo) .entra, .tasas.js:not(.listo) .offer.nueva { animation-play-state: paused; }
.offer.nueva { animation: aparecer var(--dur) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger) * .6); }
/* al bajar: lo que entra en pantalla se asienta (solo con JS; sin JS todo se ve de entrada) */
.tasas.js .rev { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-in) var(--ease), transform var(--dur-in) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.tasas.js .rev.visto { opacity: 1; transform: none; }

/* ── Botones ──────────────────────────────────────────────────────────────────────────────── */
.btn { border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface-2) 60%, transparent); border-radius: var(--r-pill); padding: 9px 15px; cursor: pointer;
  font-weight: 600; font-size: .88rem; line-height: 1.2; color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tasas .btn { color: var(--fg); text-decoration: none; }
.btn:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); }
.btn:active { transform: scale(.97); }
.btn svg { transition: transform var(--dur) var(--ease); }
.btn:hover svg[width="18"] { transform: translateX(3px); }
.btn.primario, .tasas .btn.primario { background: var(--marca); border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--marca) 70%, transparent), 0 1px 0 rgba(255, 255, 255, .3) inset; }
.btn.primario:hover { background: color-mix(in oklab, var(--marca) 88%, #fff); box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--marca) 85%, transparent), 0 1px 0 rgba(255, 255, 255, .3) inset; }
.btn.grande { padding: 14px 22px; font-size: 1rem; }
.btn.ancho { width: 100%; }
.btn[aria-pressed="true"], .btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.chico-btn { padding: 8px 13px; font-size: .84rem; }
.icon-btn { width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 50%, transparent); display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; overflow: hidden; }
.icon-btn > svg { grid-area: 1 / 1; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.94); }
/* sol y luna: el que no corresponde gira y se va */
#tema .sol, #tema .luna { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
#tema .luna { transform: rotate(-90deg) scale(.4); opacity: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) #tema .sol { transform: rotate(90deg) scale(.4); opacity: 0; } :root:not([data-theme="dark"]) #tema .luna { transform: none; opacity: 1; } }
:root[data-theme="light"] #tema .sol { transform: rotate(90deg) scale(.4); opacity: 0; }
:root[data-theme="light"] #tema .luna { transform: none; opacity: 1; }
.mini-link { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; text-decoration: none; }
.tasas .mini-link { text-decoration: none; }
.mini-link svg { transition: transform var(--dur) var(--ease); }
.mini-link:hover svg { transform: translateX(3px); }

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 40; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); border-bottom: 1px solid transparent; }
.top.flota { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom-color: var(--line); box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .5); }
.top-in { display: flex; align-items: center; gap: 16px; height: var(--alto-top); }
.brand { display: flex; align-items: center; text-decoration: none; }
.tasas .brand { color: var(--fg); text-decoration: none; }
.logo-marca { display: block; height: 38px; width: auto; aspect-ratio: 761.4 / 150; color: var(--fg); transition: transform var(--dur) var(--ease); }
.brand:hover .logo-marca { transform: translateY(-1px); }
/* el trazo de resaltador detrás de una palabra: la letra encima va en tinta, en los dos temas */
.resaltado { font-style: normal; color: var(--tinta); background: var(--resaltador); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nav { display: flex; gap: 2px; margin-left: auto; position: relative; padding: 4px; border-radius: var(--r-pill); }
.nav::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--nw, 0); transform: translateX(var(--nx, 0)); border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line); opacity: var(--no, 0); transition: transform var(--dur) var(--ease), width var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav a { position: relative; color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; padding: 7px 13px; border-radius: var(--r-pill); transition: color var(--dur) var(--ease); }
.tasas .nav a { color: var(--muted); text-decoration: none; }
.tasas .nav a:hover, .tasas .nav a[aria-current="true"] { color: var(--fg); }
.top-acts { display: flex; gap: 8px; }
.menu-btn { display: none; }
.progreso-lectura { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--degrade); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  @keyframes leer { to { transform: scaleX(1); } }
  .progreso-lectura { animation: leer linear both; animation-timeline: scroll(root); }
}
@media (max-width: 900px) {
  .menu-btn { display: grid; }
  .top-acts { margin-left: auto; }
  .nav { position: absolute; top: calc(100% + 8px); right: var(--gutter); left: var(--gutter); flex-direction: column; padding: 8px; gap: 2px;
    background: color-mix(in srgb, var(--surface) 97%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-2);
    border-radius: var(--r-card); box-shadow: var(--shadow-up); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none; visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
  .nav.abierto { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .nav::before { display: none; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
  .tasas .nav a[aria-current="true"] { background: var(--surface-2); }
}

/* ── Portada ──────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(36px, 7vw, 88px) clamp(28px, 4vw, 48px); margin-top: calc(var(--alto-top) * -1); padding-top: calc(var(--alto-top) + clamp(28px, 6vw, 72px)); isolation: isolate; }
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.aurora::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); opacity: .6; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pildora { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--surface) 60%, transparent); backdrop-filter: blur(8px); font: 500 .78rem/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--good); position: relative; }
.pulso::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--good); animation: pulso calc(var(--movimiento) * 2s + .01s) var(--ease) infinite; }
@keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.hero h1 { font-size: clamp(2.8rem, 7.4vw, 6.2rem); margin-top: 22px; max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--tinta); background: var(--resaltador); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-txt > p { max-width: 58ch; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem); margin: 22px 0 0; text-wrap: pretty; }
.hero-txt > p b { color: var(--fg); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.promesas { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.promesas li { display: flex; gap: 12px; align-items: flex-start; }
.promesas li > svg { padding: 7px; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.promesas b { display: block; font: 700 .95rem/1.25 var(--f-body); }
.promesas span { color: var(--muted); font-size: .86rem; line-height: 1.4; display: block; margin-top: 2px; }

/* tarjeta «en vivo»: la simulación actual resumida, con ranking */
.vivo { position: relative; border-radius: calc(var(--r-card) * 1.2); padding: clamp(20px, 2.6vw, 28px); display: grid; gap: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 85%, transparent), color-mix(in srgb, var(--surface) 80%, transparent));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--shadow-up); }
.vivo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--marca-2) 70%, transparent), transparent 35%, transparent 65%, color-mix(in srgb, var(--marca) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.vivo-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vivo-q { margin: 0; font-size: .92rem; color: var(--muted); }
.vivo-q b { color: var(--fg); }
.vivo-mejor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px; border-radius: var(--r-field);
  background: color-mix(in srgb, var(--good) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.vivo-mejor .av { grid-row: span 2; }
.vivo-mejor .vm-nom { font: 700 1rem/1.2 var(--f-body); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vivo-mejor .vm-cifras { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); }
.vivo-mejor .vm-cifras b { font: 800 1.6rem/1 var(--f-display); letter-spacing: -.02em; color: var(--fg); display: block; margin-bottom: 2px; }
.vivo-mejor .vm-cifras b.acento { color: var(--good); }
.insignia { display: inline-flex; align-items: center; gap: 5px; font: 600 .66rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ranking li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 62px; gap: 10px; align-items: center; font-size: .84rem; }
.ranking li > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ranking li:first-child > span:first-child { color: var(--fg); font-weight: 600; }
.ranking .track { height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.ranking .track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--marca), var(--marca-3)); transition: width var(--dur-in) var(--ease); }
.ranking li:first-child .track i { background: linear-gradient(90deg, var(--marca-2), var(--good)); }
.ranking li > span:last-child { text-align: right; font: 500 .8rem/1 var(--f-mono); }
.vivo-pie { border-top: 1px solid var(--line); padding-top: 12px; }
.vivo-vacio { padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-field); color: var(--muted); font-size: .9rem; text-align: center; }

.cifras { margin: clamp(40px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(10px); overflow: hidden; }
.cifras > div { padding: 20px 22px; display: flex; flex-direction: column-reverse; gap: 4px; }
.cifras > div + div { border-left: 1px solid var(--line); }
.cifras dt { font-size: .84rem; color: var(--muted); }
.cifras dd { margin: 0; font: 800 clamp(1.7rem, 3.4vw, 2.4rem)/1 var(--f-display); letter-spacing: -.03em; }
@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero h1 { max-width: 15ch; }
}
@media (max-width: 640px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras > div:nth-child(3) { border-left: 0; }
  .cifras > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hero-ctas .btn { flex: 1 1 100%; }
}

/* ── Secciones ────────────────────────────────────────────────────────────────────────────── */
.sec { margin-top: clamp(72px, 10vw, 128px); }
.sec-cab { display: grid; gap: 14px; margin-bottom: clamp(22px, 3vw, 34px); }
.sec-cab h2, .sim h2#h-sim { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 20ch; }
.sim { margin-top: clamp(40px, 6vw, 72px); }

/* ── Simulador ────────────────────────────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(18px, 2.6vw, 28px); box-shadow: var(--shadow); }
.sim-grid { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.form { display: grid; gap: 22px; position: sticky; top: calc(var(--alto-top) + 16px); }
@media (max-width: 980px) { .sim-grid { grid-template-columns: 1fr; } .form { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px 28px; } }
.field { display: grid; gap: 9px; align-content: start; min-width: 0; }
.field > label, .field > .lbl { font-size: .84rem; font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field output { font: 500 .8rem/1 var(--f-mono); color: var(--fg); padding: 5px 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.in { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-field); padding: 12px 14px; min-width: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.in:hover { border-color: var(--line-2); }
.in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.money { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-field);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.money:hover { border-color: var(--line-2); }
.money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.money span { padding-left: 16px; color: var(--muted); font: 500 1rem/1 var(--f-mono); }
.money .in { border: 0; background: transparent; font: 800 1.7rem/1.1 var(--f-display); letter-spacing: -.02em; padding: 12px 14px 12px 10px; box-shadow: none; font-variant-numeric: tabular-nums; }
.rapidos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.rapido { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 7px 4px; white-space: nowrap; border-radius: var(--r-pill); cursor: pointer; font: 600 .8rem/1 var(--f-body); font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.rapido:hover { color: var(--fg); border-color: var(--line-2); }
.rapido[aria-pressed="true"] { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* control segmentado: la píldora elegida se desliza */
.seg { --n: 3; --i: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); transform: translateX(calc(var(--i) * 100%)); border-radius: var(--r-pill);
  background: var(--degrade-fuerte); background-size: calc(var(--n) * 100%) 100%; background-position: calc(var(--i) / max(var(--n) - 1, 1) * 100%) 0;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--marca) 80%, transparent), 0 1px 0 rgba(255, 255, 255, .25) inset;
  transition: transform var(--dur) var(--ease), background-position var(--dur) var(--ease); }
.seg:not([style*="--i"])::before { opacity: 0; }
.chip { position: relative; z-index: 1; border: 0; background: transparent; padding: 9px 8px; border-radius: var(--r-pill); cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: color var(--dur) var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip:hover { color: var(--fg); }
.chip[aria-pressed="true"] { color: var(--accent-ink); }
.seg.chico .chip { padding: 7px 12px; font-size: .84rem; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
[hidden] { display: none !important; } /* que ningún display de un componente le gane al atributo hidden */
.ver-ui { padding: 12px 14px; border-radius: var(--r-field); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* deslizador con relleno */
.tasas input[type="range"] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; margin: 0; }
.tasas input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--marca), var(--marca-2)) 0 / var(--p) 100% no-repeat, var(--surface-3); }
.tasas input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--surface-3); }
.tasas input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--marca), var(--marca-2)); }
.tasas input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--marca) 45%, transparent), 0 4px 12px rgba(0, 0, 0, .35); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tasas input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px color-mix(in srgb, var(--marca) 45%, transparent), 0 4px 12px rgba(0, 0, 0, .35); }
.tasas input[type="range"]:hover::-webkit-slider-thumb, .tasas input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 8px color-mix(in srgb, var(--marca) 35%, transparent), 0 4px 12px rgba(0, 0, 0, .35); }
.tasas input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.tasas input[type="range"]:focus-visible { outline: none; }
.marcas { display: flex; justify-content: space-between; font: 500 .7rem/1 var(--f-mono); color: var(--muted); padding-inline: 4px; }
.marcas button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.marcas button:hover { color: var(--fg); }

/* interruptores de requisitos */
.switches { display: grid; gap: 8px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 11px 12px 11px 14px; border-radius: var(--r-field);
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.switch:hover { border-color: var(--line-2); }
.switch b { font-weight: 600; font-size: .92rem; display: block; }
.switch small { color: var(--muted); font-size: .78rem; }
.switch .perilla { width: 42px; height: 24px; border-radius: 24px; background: var(--surface-3); border: 1px solid var(--line-2); position: relative; flex: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.switch .perilla::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform var(--dur) var(--ease); }
.switch[aria-checked="true"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.switch[aria-checked="true"] .perilla { background: var(--accent); border-color: transparent; }
.switch[aria-checked="true"] .perilla::after { transform: translateX(18px); }

.avanzado { border: 1px solid var(--line); border-radius: var(--r-field); padding: 0 14px; transition: background var(--dur) var(--ease); }
.avanzado[open] { background: color-mix(in srgb, var(--surface-2) 50%, transparent); padding-bottom: 14px; }
.avanzado summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 0; font-size: .88rem; font-weight: 600; }
.avanzado summary::-webkit-details-marker { display: none; }
.avanzado summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease); }
.avanzado[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.avanzado summary .muted { font-weight: 400; }

/* ── Desglose ─────────────────────────────────────────────────────────────────────────────── */
.resultados { min-width: 0; display: grid; gap: 0; }
.d-in { display: grid; gap: 22px; position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.d-in::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.d-head { display: grid; gap: 12px; position: relative; }
.d-head .d-fila { display: flex; gap: 14px; align-items: center; }
.d-titulo { margin: 0; font: 700 clamp(1.2rem, 2.3vw, 1.55rem)/1.3 var(--f-body); max-width: 46ch; text-wrap: balance; }
.d-titulo b { font-weight: 800; }
.acento { color: var(--accent-text); }
.d-titulo .acento { color: var(--tinta); background: var(--resaltador); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.d-grid { display: grid; gap: 22px 32px; grid-template-columns: 200px minmax(0, 1fr); align-items: center; position: relative; }
.dona { position: relative; width: 200px; aspect-ratio: 1; }
.dona svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dona circle { fill: none; stroke-width: 13; }
.dona .fondo { stroke: var(--surface-2); }
.dona circle[data-arc] { stroke-dasharray: 0 100; transition: stroke-dasharray var(--dur-in) var(--ease), stroke-dashoffset var(--dur-in) var(--ease), stroke-width var(--dur) var(--ease); }
.dona circle[data-arc]:hover { stroke-width: 16; }
.dona-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.dona-c > span { font-size: .72rem; color: var(--muted); line-height: 1.25; max-width: 13ch; margin-inline: auto; }
.dona-c b { font: 800 2.3rem/1 var(--f-display); letter-spacing: -.03em; }
.leyenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.leyenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 52px; align-items: center; gap: 10px; font-size: .9rem; padding: 7px 10px; border-radius: 10px; transition: background var(--dur) var(--ease); }
.leyenda li:hover { background: var(--surface-2); }
.leyenda li i { width: 12px; height: 12px; border-radius: 4px; display: block; }
.leyenda b { font-variant-numeric: tabular-nums; font-weight: 700; }
.leyenda .pc { font: 500 .76rem/1 var(--f-mono); color: var(--muted); text-align: right; }
.leyenda li.total { border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 11px; }
.leyenda li.total:hover { background: none; }
.c-cap { --c: color-mix(in oklab, var(--muted) 55%, var(--surface-2)); }
.c-int { --c: var(--marca); }
.c-iva { --c: var(--warn); }
.c-seg { --c: var(--bad); }
.c-com { --c: var(--marca-3); }
.leyenda li i, .stack i { background: var(--c); }
.dona circle.c-cap, .dona circle.c-int, .dona circle.c-iva, .dona circle.c-seg, .dona circle.c-com { stroke: var(--c); }
.versus { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-field); background: var(--surface-2); border: 1px solid var(--line); }
.versus > div { display: grid; grid-template-columns: 128px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: .84rem; }
.versus .track { height: 12px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.versus .track i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width var(--dur-in) var(--ease); }
.versus .v-aviso i { background: color-mix(in oklab, var(--muted) 70%, var(--surface-3)); }
.versus .v-real i { background: var(--degrade); }
.versus b { text-align: right; font: 600 .86rem/1 var(--f-mono); }
.versus .v-real b { color: var(--accent-text); }
.d-ojo { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 12px; }
.d-ojo > b { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.d-ojo > b svg { color: var(--warn); }
.d-ojo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.d-ojo li { color: var(--muted); font-size: .9rem; padding: 12px 14px 12px 38px; border-radius: var(--r-field); background: color-mix(in srgb, var(--warn) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warn) 18%, transparent); position: relative; line-height: 1.45; }
.d-ojo li::before { content: "!"; position: absolute; left: 12px; top: 12px; width: 17px; height: 17px; border-radius: 50%; background: var(--warn); color: color-mix(in oklab, var(--warn) 15%, #000);
  font: 800 .72rem/17px var(--f-body); text-align: center; }
.d-ojo li .num { color: var(--fg); font-weight: 700; }
@media (max-width: 720px) {
  .d-grid { grid-template-columns: 1fr; justify-items: center; }
  .d-grid > .d-der { width: 100%; }
  .versus > div { grid-template-columns: 96px minmax(0, 1fr) 64px; }
}

/* ── Resultados ───────────────────────────────────────────────────────────────────────────── */
.bar { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; justify-content: space-between; margin: 36px 0 16px; }
.bar h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.bar .note { margin-top: 6px; }
.orden-f { min-width: 260px; }
.list { display: grid; gap: 14px; }
.offer { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(16px, 2.4vw, 24px); display: grid; gap: 18px;
  box-shadow: var(--shadow); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); will-change: transform; isolation: isolate; }
.offer:hover { border-color: var(--line-2); box-shadow: var(--shadow-up); }
/* luz que sigue al puntero (tarjetas de ofertas y de lo escondido) */
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity var(--dur) var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--marca) 11%, transparent), transparent 60%); }
.spot:hover::after { opacity: 1; }
.offer.best { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(130deg, var(--good), var(--marca-2) 40%, var(--line) 70%) border-box; border: 1px solid transparent;
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--good) 10%, transparent), 0 20px 60px -30px color-mix(in srgb, var(--good) 50%, transparent); }
.cinta { position: absolute; top: -11px; left: clamp(16px, 2.4vw, 24px); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--good), var(--marca-2)); color: color-mix(in oklab, var(--good) 10%, #000); font: 700 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--good) 70%, transparent); }
.o-head { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.o-name { display: flex; gap: 14px; align-items: center; min-width: 0; }
.rank { font: 500 .8rem/1 var(--f-mono); color: var(--muted); width: 22px; text-align: center; }
.av { --h: 220; width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; font: 800 1rem/1 var(--f-display); letter-spacing: -.02em; color: #fff;
  background: linear-gradient(135deg, oklch(.68 .14 var(--h)), oklch(.5 .15 calc(var(--h) + 40))); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 6px 14px -6px oklch(.5 .15 var(--h)); }
.av.chico { width: 36px; height: 36px; border-radius: 11px; font-size: .85rem; }
/* con logo: ficha blanca (los logos de los bancos están pensados para fondo claro), en los dos temas */
.av { position: relative; overflow: hidden; }
.av.con-logo { background: #fff; color: transparent; box-shadow: 0 0 0 1px var(--line-2), 0 6px 14px -8px rgba(0, 0, 0, .35); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.av.chico img { padding: 4px; }
.o-name b { display: block; font: 800 1.35rem/1.05 var(--f-display); letter-spacing: -.02em; }
.o-name small { color: var(--muted); font-size: .88rem; display: block; margin-top: 3px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font: 500 .7rem/1 var(--f-mono); letter-spacing: .03em; padding: 6px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--muted); background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.tag.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.tag.req { color: var(--fg); }
.tag.req::before { background: var(--accent); }
.kpis { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-field); overflow: hidden; border: 1px solid var(--line); }
.kpi { background: var(--surface); padding: 14px 16px; min-width: 0; }
.offer.best .kpi { background: color-mix(in srgb, var(--good) 3%, var(--surface)); }
.kpi > span { display: block; font: 500 .66rem/1.25 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.kpi b { font: 700 1.12rem/1.15 var(--f-body); font-variant-numeric: tabular-nums; }
.kpi b small { font-weight: 500; color: var(--muted); font-size: .8rem; display: inline; }
.kpi.main b { font: 800 1.85rem/1 var(--f-display); letter-spacing: -.025em; }
.kpi.main > span { color: var(--accent-text); }
.kpi small { display: block; color: var(--muted); font-size: .78rem; margin-top: 5px; line-height: 1.35; }
.kpi.real b { color: var(--fg); }
.kpi.real > span { color: var(--accent-text); }
/* barra de costo: cuánto cuesta esta oferta frente a la más cara de la lista */
.cost { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font: 500 .7rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cost .num { color: var(--fg); font-size: .8rem; }
.cost .track { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.cost .track i { display: block; height: 100%; border-radius: inherit; width: 0; background: linear-gradient(90deg, var(--marca), var(--marca-3)); transition: width var(--dur) var(--ease); }
.offer.best .cost .track i { background: linear-gradient(90deg, var(--marca-2), var(--good)); }
.o-req { display: flex; gap: 8px; align-items: flex-start; }
/* lo que queda en mano después de los gastos al firmar */
.o-mano { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .88rem; color: var(--muted); }
.o-mano svg { flex: none; margin-top: 2px; color: var(--muted); }
.o-mano.con svg { color: var(--warn); }
.o-mano b, .o-mano .num { color: var(--fg); font-weight: 700; }
.d-firma { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 10px; }
.d-firma-tit { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.d-firma-tit svg { color: var(--warn); flex: none; }
.firma-lista { list-style: none; margin: 0; padding: 0; display: grid; max-width: 560px; }
.firma-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.firma-lista li > span { display: grid; gap: 2px; }
.firma-lista small { color: var(--muted); font-size: .78rem; }
.firma-lista b { font: 600 .92rem/1.2 var(--f-mono); white-space: nowrap; }
.firma-lista .menos b { color: var(--warn); }
.firma-lista .neto { border-bottom: 0; border-top: 2px solid var(--line-2); font-weight: 700; }
.firma-lista .neto b { color: var(--good); font-size: 1rem; }
.o-req svg { color: var(--muted); margin-top: 2px; }
.o-foot { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; font-size: .84rem; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); }
.o-foot .fuente { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.offer.sel:not(.best) { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.amort { display: grid; gap: 14px; animation: aparecer var(--dur) var(--ease) both; }
.grafico { position: relative; border-radius: var(--r-field); background: var(--surface-2); border: 1px solid var(--line); padding: 14px 14px 10px; }
.grafico-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.grafico-cab ul { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.grafico-cab li { display: flex; align-items: center; gap: 6px; }
.grafico-cab li i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.grafico svg { display: block; width: 100%; height: 150px; cursor: crosshair; touch-action: pan-y; }
.grafico .g-cap { fill: color-mix(in oklab, var(--muted) 50%, var(--surface-3)); }
.grafico .g-int { fill: var(--marca); }
.grafico .g-otros { fill: var(--bad); }
.grafico .g-guia { stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.grafico .g-ejes { display: flex; justify-content: space-between; font: 500 .68rem/1 var(--f-mono); color: var(--muted); margin-top: 8px; }
.tip { position: absolute; top: 40px; pointer-events: none; z-index: 2; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 10px 12px; font-size: .78rem; line-height: 1.5; box-shadow: var(--shadow-up); min-width: 170px; opacity: 0; transform: translate(-50%, 6px); transition: opacity .15s, transform .15s; }
.tip.on { opacity: 1; transform: translate(-50%, 0); }
.tip b { font-family: var(--f-mono); font-weight: 500; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
.tip span { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.tabla-wrap { overflow: auto; max-height: 340px; border-radius: var(--r-field); border: 1px solid var(--line); }
.amort table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: .84rem; font-variant-numeric: tabular-nums; }
.amort th, .amort td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.amort thead th { position: sticky; top: 0; background: var(--surface-2); font: 500 .66rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); z-index: 1; }
.amort tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.amort td:first-child, .amort th:first-child { text-align: left; }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-card); animation: aparecer var(--dur) var(--ease) both; display: grid; gap: 10px; justify-items: center; }
.empty svg { color: var(--accent-text); padding: 12px; width: 48px; height: 48px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.empty b { color: var(--fg); font-size: 1.05rem; }
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi.main, .kpi:last-child { grid-column: 1 / -1; }
  .rank { display: none; }
  .o-foot .acts { width: 100%; }
  .o-foot .acts .btn { flex: 1; }
  .orden-f { min-width: 0; width: 100%; }
}

/* ── Lo que se esconde ────────────────────────────────────────────────────────────────────── */
.ocultos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.oculto { position: relative; isolation: isolate; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; display: grid; gap: 12px;
  align-content: start; box-shadow: var(--shadow); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.oculto:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-up); }
.oculto .o-cab { display: flex; align-items: center; justify-content: space-between; }
.oculto .o-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--accent-text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--marca) 22%, transparent), color-mix(in srgb, var(--marca-3) 14%, transparent)); border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent); }
.oculto .o-n { font: 800 3.4rem/.8 var(--f-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.oculto .o-n::before { content: "0"; }
.oculto h3 { margin: 4px 0 0; font: 800 1.4rem/1.08 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.oculto p { margin: 0; color: var(--muted); font-size: .95rem; }
.oculto p .num { color: var(--fg); font-weight: 700; }
.oculto .aca { margin-top: 4px; border-radius: var(--r-field); padding: 12px 14px 12px 40px; font-size: .9rem; color: var(--fg); position: relative;
  background: color-mix(in srgb, var(--good) 7%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--good) 20%, transparent); }
.oculto .aca svg { position: absolute; left: 13px; top: 13px; color: var(--good); }
.oculto .aca b { color: var(--good); }
@media (min-width: 1000px) {
  .ocultos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oculto:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .oculto:last-child:nth-child(3n + 1) { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px 28px; }
  .oculto:last-child:nth-child(3n + 1) .aca { margin: 0; }
}

/* ── Antes de firmar ──────────────────────────────────────────────────────────────────────── */
.firmar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: start; }
.lista-firmar { display: grid; gap: 16px; }
.progreso { position: relative; display: flex; align-items: center; gap: 14px; }
.progreso b { display: block; font: 800 1.35rem/1.1 var(--f-display); letter-spacing: -.01em; }
.anillo { transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 5; stroke: var(--surface-3); }
.anillo circle + circle { stroke: var(--good); transition: stroke-dasharray var(--dur-in) var(--ease), opacity var(--dur) var(--ease); stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.checklist label { display: flex; gap: 14px; align-items: flex-start; padding: 11px 12px; border-radius: var(--r-field); cursor: pointer; transition: background var(--dur) var(--ease); }
.checklist label:hover { background: var(--surface-2); }
.checklist input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checklist .caja { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center; margin-top: 1px; color: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.checklist .caja svg { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--dur) var(--ease); }
.checklist input:checked + .caja { background: var(--good); border-color: var(--good); color: color-mix(in oklab, var(--good) 10%, #000); transform: scale(1.05); }
.checklist input:checked + .caja svg { stroke-dashoffset: 0; }
.checklist input:focus-visible + .caja { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.checklist .txt { transition: color var(--dur) var(--ease); }
.checklist input:checked ~ .txt { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--good) 60%, transparent); }
.confeti { position: absolute; left: 28px; top: 28px; pointer-events: none; }
.confeti i { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: confeti 1.1s var(--ease) forwards; }
@keyframes confeti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.carta { display: grid; gap: 14px; align-content: start; }
.carta-cab { display: flex; gap: 14px; align-items: flex-start; }
.carta-cab b { font: 800 1.3rem/1.15 var(--f-display); letter-spacing: -.01em; display: block; margin-bottom: 4px; }
.carta-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--accent-ink); background: var(--degrade-fuerte); flex: none; box-shadow: 0 8px 20px -8px var(--marca); }
.mensaje { resize: vertical; font: 400 .92rem/1.6 var(--f-body); min-height: 260px; background: var(--surface-2); border-radius: var(--r-field) var(--r-field) var(--r-field) 6px; }
.carta-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Glosario ─────────────────────────────────────────────────────────────────────────────── */
.glosario { display: grid; gap: 14px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.glosario > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.glosario > div:hover { border-color: var(--line-2); }
.glosario > div.destacado { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--degrade) border-box; border-color: transparent; }
.glosario dt { font: 700 1rem/1.2 var(--f-body); margin-bottom: 10px; color: var(--muted); }
.glosario dt span { font: 800 2rem/1 var(--f-display); letter-spacing: -.03em; color: var(--fg); display: inline-block; margin-right: 4px; }
.glosario .destacado dt span { color: var(--tinta); background: var(--resaltador); padding: 0 .08em; }
.glosario dd { margin: 0; color: var(--muted); font-size: .94rem; }
.glosario dd b { color: var(--fg); }

/* ── Fuentes ──────────────────────────────────────────────────────────────────────────────── */
.cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.src { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; font-size: .9rem; display: grid; gap: 12px; align-content: start;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.src:hover { border-color: var(--line-2); transform: translateY(-2px); }
.src-cab { display: flex; gap: 12px; align-items: center; }
.src-cab b { font: 800 1.1rem/1.1 var(--f-display); display: block; }
.src-cab small { color: var(--muted); font-size: .8rem; }
.src-docs { display: grid; gap: 6px; }
.src-doc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .84rem; min-width: 0; }
.src-doc a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); font-size: .78rem; }
.src-doc .estado { margin-left: auto; white-space: nowrap; font-size: .74rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.src-doc .estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); }
.src-doc .estado.mal::before { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }
.medidor { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.medidor i { display: block; height: 100%; background: var(--good); border-radius: inherit; }

/* ── Pie ──────────────────────────────────────────────────────────────────────────────────── */
.pie { margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); background: linear-gradient(var(--bg), var(--bg-2)); position: relative; overflow: hidden; }
.pie::before { content: ""; position: absolute; left: 50%; top: 0; width: 60%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--marca-2), transparent); }
.pie-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-block: 48px 32px; }
.pie-marca p { color: var(--muted); font-size: .9rem; max-width: 52ch; margin: 14px 0 0; }
.pie-marca p b { color: var(--fg); }
.pie-nav { display: grid; gap: 10px; align-content: start; font-size: .9rem; }
.pie-nav b { font: 500 .72rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tasas .pie-nav a { color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; opacity: .85; }
.tasas .pie-nav a:hover { opacity: 1; color: var(--accent-text); }
.pie-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 18px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
@media (max-width: 760px) { .pie-in { grid-template-columns: 1fr; } }
/* firma de Nina-labs: el perro toma el color del texto y sus líneas son huecos que dejan ver el fondo, así se invierte solo con el tema */
/* el perro arriba y el texto abajo, todo es un enlace a nina-labs.com */
.credito { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; border-radius: 10px; padding: 4px 8px; transition: color var(--dur) var(--ease); }
.credito:hover, .credito:focus-visible { color: var(--fg); }
.credito .perro { width: 104px; height: auto; aspect-ratio: 1566 / 562; flex: none; }
.credito span { font: 500 .8rem/1 var(--f-body); letter-spacing: .01em; }
.credito:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ── Flotantes: resumen pegado (móvil), aviso y volver arriba ─────────────────────────────── */
.pegado { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; transform: translateY(140%); transition: transform var(--dur) var(--ease); pointer-events: none; }
.pegado.on { transform: none; pointer-events: auto; }
.pegado-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid var(--line-2); box-shadow: var(--shadow-up); font-size: .84rem; }
.pegado-in .btn { white-space: nowrap; flex: none; }
.pegado-in span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pegado-in b { font-weight: 700; }
@media (min-width: 981px) { .pegado { display: none; } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 70; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-weight: 600; font-size: .9rem;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .5); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { color: var(--good); }
.arriba { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 30; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); cursor: pointer;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent); backdrop-filter: blur(12px); color: var(--fg); display: grid; place-items: center; box-shadow: var(--shadow-up);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.arriba.on { opacity: 1; transform: none; pointer-events: auto; }
.arriba:hover { background: var(--surface-3); }
@media (max-width: 980px) { .arriba { display: none; } }

/* cambio de tema: el nuevo se abre en círculo desde el botón (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media print {
  .top, .aurora, .pegado, .toast, .arriba, .hero-ctas, .vivo, .acts, .carta-acts, body.tasas::before { display: none !important; }
  body.tasas { background: #fff; color: #000; }
  .tasas.js .rev { opacity: 1; transform: none; }
}

/* ── Marca: lema del pie ─────────────────────────────────────────────────────────────────── */
.pie-marca .lema { margin: 16px 0 0; font: 800 1.6rem/1 var(--f-display); letter-spacing: -.02em; color: var(--fg); }
.pie-marca .lema + p { margin-top: 12px; }

/* ── Móvil: una vista por vez, con pestañas abajo y un menú «Más» ─────────────────────────────
   app.js pone la clase «pestanas» en <body> por debajo de 900 px y marca con «activa» los bloques de la vista elegida. */
.pestanas, .hoja, .hoja-fondo { display: none; }
body.modo-pestanas { --alto-pestanas: calc(64px + env(safe-area-inset-bottom)); padding-bottom: var(--alto-pestanas); }
body.modo-pestanas [data-vista]:not(.activa) { display: none !important; }
body.modo-pestanas .menu-btn, body.modo-pestanas .progreso-lectura { display: none; }
body.modo-pestanas .sec, body.modo-pestanas .sim { margin-top: 20px; }
body.modo-pestanas .hero { padding-bottom: 24px; }
body.modo-pestanas .bar { margin-top: 0; }
body.modo-pestanas .resultados { padding-top: 16px; }
body.modo-pestanas .pie { margin-top: 48px; }
body.modo-pestanas .pestanas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 6px 6px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 86%, transparent); border-top: 1px solid var(--line);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
.pestanas a, .pestanas button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 56px; padding: 4px 2px;
  border: 0; background: none; color: var(--muted); font: 600 .68rem/1 var(--f-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; border-radius: 14px;
  -webkit-tap-highlight-color: transparent; transition: color var(--dur) var(--ease); }
.tasas .pestanas a { color: var(--muted); text-decoration: none; }
.pestanas svg { padding: 3px 14px; width: 50px; height: 30px; border-radius: 999px; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tasas .pestanas [aria-current="true"] { color: var(--fg); }
.pestanas [aria-current="true"] svg { background: color-mix(in srgb, var(--marca) 26%, transparent); color: var(--fg); }
.pestanas a:active svg, .pestanas button:active svg { transform: scale(.92); }
.pestanas .cuenta { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--marca); color: var(--accent-ink);
  font: 700 .64rem/18px var(--f-body); text-align: center; }
.pestanas .cuenta:empty { display: none; }
body.modo-pestanas .pegado { bottom: calc(var(--alto-pestanas) + 10px); }
body.modo-pestanas .toast { bottom: calc(var(--alto-pestanas) + 16px); }
/* menú «Más»: hoja que sube desde abajo */
body.modo-pestanas .hoja-fondo:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45); animation: aparecer-fondo .25s ease both; }
body.modo-pestanas .hoja:not([hidden]) { display: grid; gap: 6px; position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 51; padding: 10px 14px 16px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 24px; box-shadow: var(--shadow-up); animation: subir-hoja var(--dur) var(--ease) both; }
@keyframes subir-hoja { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparecer-fondo { from { opacity: 0; } }
.hoja-asa { width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto 6px; }
.hoja-tit { font: 800 1.3rem/1.1 var(--f-display); padding: 2px 6px 6px; }
.hoja-item { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; text-decoration: none; }
.tasas .hoja-item { color: var(--fg); text-decoration: none; }
.hoja-item:hover, .hoja-item:focus-visible { background: var(--surface-2); }
.hoja-item svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--marca) 18%, transparent); }
.hoja-item b { display: block; font-size: .98rem; }
.hoja-item small { color: var(--muted); font-size: .82rem; }
.hoja-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ── Comparar bancos: barras horizontales, una por institución, con la media como línea ───────
   Cada barra es la oferta más baja de la institución, en el color de su marca; el bigote llega hasta la más alta.
   La posición frente a la media se lee en la línea y en la etiqueta con flecha (nunca solo por color). */
.comp { position: relative; display: grid; gap: 18px; }
.comp-ctrl { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.comp-ctrl .seg { min-width: min(100%, 300px); }
.comp-dos { display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.comp-bloque { display: grid; gap: 12px; min-width: 0; }
.comp-cab { display: grid; gap: 4px; }
.comp-cab h3 { margin: 0; font: 800 1.2rem/1.15 var(--f-display); letter-spacing: -.01em; display: flex; align-items: baseline; gap: 8px; }
.comp-cab h3 small { font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 99px; }
.comp-graf { position: relative; display: grid; grid-template-columns: minmax(78px, 132px) minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; padding-top: 26px; }
.comp-graf .empty { grid-column: 1 / -1; }
.comp-nom { grid-column: 1; display: flex; gap: 8px; align-items: center; min-width: 0; font-weight: 600; font-size: .86rem; }
.comp-nom span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-nom .av.chico { width: 26px; height: 26px; border-radius: 8px; font-size: .62rem; }
.comp-nom .av.chico img { padding: 3px; }
.comp-pista { grid-column: 2; position: relative; height: 28px; border-radius: 6px; outline-offset: 2px; }
.comp-pista:hover .comp-barra, .comp-pista:focus-visible .comp-barra { filter: brightness(1.12); }
.comp-barra { position: absolute; left: 0; top: 5px; height: 18px; width: 0; border-radius: 0 4px 4px 0; background: var(--c);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: width var(--dur-in) var(--ease), filter .15s; }
.comp-rango { position: absolute; top: 13px; height: 2px; background: var(--muted); opacity: .6; }
.comp-rango::after { content: ""; position: absolute; right: -1px; top: -4px; width: 2px; height: 10px; border-radius: 1px; background: inherit; }
.comp-val { grid-column: 3; display: grid; justify-items: end; gap: 3px; font-variant-numeric: tabular-nums; }
.comp-val b { font: 600 .9rem/1 var(--f-mono); }
.comp-val small { font: 600 .68rem/1 var(--f-body); color: var(--fg); padding: 3px 6px; border-radius: 99px; white-space: nowrap; }
.comp-val small.pol-abajo { background: color-mix(in srgb, var(--debajo) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--debajo) 55%, transparent); }
.comp-val small.pol-arriba { background: color-mix(in srgb, var(--encima) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--encima) 55%, transparent); }
/* la media: una línea sobre la columna de barras, con su etiqueta arriba */
.comp-media { grid-column: 2; grid-row: 1 / span var(--n); align-self: stretch; position: relative; z-index: 2; pointer-events: none; }
.comp-media::before { content: ""; position: absolute; left: var(--m); top: -6px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--fg); opacity: .85; }
.comp-media span { position: absolute; left: var(--m); top: -26px; transform: translateX(-50%); white-space: nowrap; font: 600 .7rem/1 var(--f-mono); padding: 4px 7px; border-radius: 99px;
  background: var(--fg); color: var(--bg); }
/* la mediana: línea punteada y etiqueta con borde; si queda cerca de la media, su etiqueta sube un renglón */
.comp-mediana { z-index: 1; }
.comp-mediana::before { width: 0; margin-left: 0; background: none; border-left: 2px dashed var(--fg); opacity: .7; border-radius: 0; }
.comp-mediana span { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.comp-graf.apilar { padding-top: 50px; }
.comp-graf.apilar .comp-mediana::before { top: -30px; }
.comp-graf.apilar .comp-mediana span { top: -50px; }
.comp-eje { grid-column: 2; position: relative; height: 16px; border-top: 1px solid var(--line); margin-top: 2px; }
.comp-eje span { position: absolute; top: 4px; transform: translateX(-50%); font: 500 .66rem/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.comp-eje span:first-child { transform: none; }
.comp-eje span:last-child { transform: translateX(-100%); }
.comp-ley { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .84rem; color: var(--muted); }
.comp-ley li { display: flex; align-items: center; gap: 8px; }
.comp-ley i { display: inline-block; flex: none; }
.comp-ley .k-barra { width: 26px; height: 12px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #EC0000 0 33%, #EC7000 33% 66%, #1D5FAA 66%); }
.comp-ley .k-rango { width: 22px; height: 2px; background: var(--muted); opacity: .6; position: relative; }
.comp-ley .k-rango::after { content: ""; position: absolute; right: -1px; top: -4px; width: 2px; height: 10px; background: inherit; }
.comp-ley .k-media { width: 2px; height: 16px; border-radius: 2px; background: var(--fg); }
.comp-ley .k-mediana { width: 0; height: 16px; border-left: 2px dashed var(--fg); opacity: .7; }
.comp-tabla summary { cursor: pointer; font-weight: 600; font-size: .88rem; padding: 6px 0; }
.comp-tabla table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .84rem; font-variant-numeric: tabular-nums; }
.comp-tabla th, .comp-tabla td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.comp-tabla th:first-child, .comp-tabla td:first-child { text-align: left; }
.comp-tabla th { font: 500 .66rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.comp-tip { position: absolute; z-index: 5; min-width: 200px; max-width: min(320px, calc(100% - 16px)); display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 94%, transparent); border: 1px solid var(--line-2); box-shadow: var(--shadow-up); font-size: .8rem; backdrop-filter: blur(8px); }
.comp-tip b { font-size: .84rem; }
.comp-tip span { display: flex; justify-content: space-between; gap: 14px; }
.comp-tip strong, .comp-tip em { font: 600 .82rem/1.3 var(--f-mono); font-style: normal; }
.comp-tip .sub { color: var(--muted); font-size: .76rem; display: block; }
@media (max-width: 560px) {
  .comp-graf { grid-template-columns: minmax(64px, 96px) minmax(0, 1fr) auto; column-gap: 8px; }
  .comp-nom { font-size: .78rem; gap: 6px; }
  .comp-nom .av.chico { width: 22px; height: 22px; }
}