/* Identidad de benperk.com (estilos computados en producción, 11-oct-2026):
   índigo #3F35EC · lavanda #EEEDFE · amarillo #FEDD3E · verde verificado #34D399 · texto #0E0F12
   Geist 700 con tracking negativo en títulos; Geist Mono en cifras, etiquetas y "kickers"; botones índigo radio 6–8px;
   tarjetas blancas con filo 1px #E5E7EB; secciones alternas #F7F8FA. */
:root {
  --indigo: #3f35ec; --indigo-deep: #2e25c9; --lav: #eeedfe; --lav-line: #d9d6fc;
  --yellow: #fedd3e; --green: #34d399; --green-deep: #047857; --green-soft: #e7f8f0;
  --warn: #b45309; --warn-soft: #fdf4ec; --warn-line: #fbe2cc; --danger: #d14343; --danger-soft: #fdecec;
  --text: #0e0f12; --mute: #6b7280; --faint: #a8aeb8;
  --bg: #fff; --alt: #f7f8fa; --sunken: #eff1f4; --line: #e5e7eb; --line-strong: #d1d5db;
  --amex: #006fcf; --visa: #1a1f71; --mc: #1f1f1f;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --card: 0 1px 0 rgba(15, 17, 21, .03), inset 0 0 0 1px var(--line);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--bg); font-size: 15px; line-height: 1.55; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Encabezado */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 24px; width: auto; display: block; }
.tag { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line-strong); padding: 6px 10px; border-radius: 6px; }
main { max-width: 760px; margin: 0 auto; padding: 0 20px 140px; }
.cargando { color: var(--mute); padding: 60px 0; text-align: center; }

/* Kicker (etiqueta en mono, mayúsculas) */
.kicker { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); }

/* Hero en banda índigo, como benperk.com */
.hero { margin-inline: calc(50% - 50vw); padding: 44px max(20px, calc(50vw - 360px)) 40px; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, #5a52f2 0%, var(--indigo) 45%, #3a31dc 100%); animation: sube .6s var(--ease) both; }
.hero .kicker { color: var(--yellow); }
.hero h1 { font-weight: 700; font-size: clamp(34px, 8vw, 50px); line-height: 1.04; letter-spacing: -.032em; margin: 14px 0 14px; }
.hero h1 .resalta { color: var(--yellow); }
.hero p.sub { color: rgba(255, 255, 255, .82); font-size: 16.5px; margin: 0; max-width: 560px; }
.acciones-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; }
.hero .btn-pri { background: #fff; color: var(--indigo); }
.hero .btn-pri:hover { background: var(--lav); }
.hero .btn-txt { color: rgba(255, 255, 255, .85); padding-left: 2px; }
.hechos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.hecho { border-radius: 10px; padding: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.hecho b { display: block; font-family: var(--mono); font-size: 24px; font-weight: 700; }
.hecho span { display: block; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .78); margin-top: 4px; }
.hecho.alerta b { color: var(--yellow); }
.como { margin-top: 30px; }
.como h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 14px; }
.como ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: paso; }
.como li { counter-increment: paso; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; box-shadow: var(--card); color: var(--mute); }
.como li::before { content: counter(paso); flex: none; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: var(--lav); color: var(--indigo); font-family: var(--mono); font-weight: 700; font-size: 13px; }
.como b { color: var(--text); }
.enlace { background: none; border: 0; padding: 0; color: var(--indigo); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Botones */
.btn { border: 0; border-radius: 8px; padding: 13px 18px; font-weight: 600; font-size: 14.5px; transition: background .2s, transform .15s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-pri, .btn-naranja { background: var(--indigo); color: #fff; }
.btn-pri:hover, .btn-naranja:hover { background: var(--indigo-deep); }
.btn-sec { background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; }
.btn-txt { background: none; color: var(--mute); padding: 10px 8px; }
.btn-grande { padding: 16px 22px; font-size: 16px; }
.btn-chico { padding: 8px 14px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Resultado */
.res-cab { padding: 28px 0 8px; animation: sube .5s var(--ease) both; }
.h-res { font-weight: 700; font-size: clamp(26px, 6.5vw, 36px); line-height: 1.08; letter-spacing: -.03em; margin: 10px 0 14px; }
.h-res .resalta { color: var(--indigo); }
.res-cab .sub { color: var(--mute); margin: 0; }
.pildoras { display: flex; flex-wrap: wrap; gap: 6px; }
.pildora { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 10px; font-size: 12.5px; }
.pildora.vacia { border-style: dashed; color: var(--indigo); border-color: var(--lav-line); background: var(--lav); font-weight: 600; }
.modo { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 8px; padding: 14px 16px; border-radius: 10px; background: var(--alt); box-shadow: var(--card); font-size: 14px; }
.modo.minimo { background: var(--danger-soft); box-shadow: inset 0 0 0 1px #f6caca; }
.modo .ico { font-size: 18px; line-height: 1.2; }
.tabla-ctrl { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 8px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.toggle input { accent-color: var(--indigo); width: 17px; height: 17px; }
.nota-scroll { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* Tabla comparativa */
.tabla-wrap { overflow-x: auto; padding: 0 0 6px; border-radius: 10px; box-shadow: var(--card); -webkit-overflow-scrolling: touch; }
.cmp2 { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 14px; }
.cmp2 th, .cmp2 td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.cmp2 tbody th, .cmp2 thead .esquina { position: sticky; left: 0; z-index: 2; background: #fff; width: 132px; min-width: 132px; max-width: 132px; font-weight: 500; font-size: 13.5px; color: var(--text); border-right: 1px solid var(--line); }
.cmp2 tbody th small { display: block; color: var(--mute); font-size: 11.5px; font-weight: 400; line-height: 1.3; margin-top: 3px; }
.cmp2 thead .esquina { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); vertical-align: bottom; }
.cmp2 .col { min-width: 160px; width: 160px; position: relative; background: #fff; border-bottom: 1px solid var(--line); }
.cmp2 .col + .col { border-left: 1px solid var(--line); }
.cmp2 .col.ancla { background: var(--alt); }
.cmp2 .col.mejor { background: var(--lav); box-shadow: inset 0 -2px 0 var(--indigo); }
.cmp2 .col.ancla::before, .cmp2 .col.mejor::before { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; margin-bottom: 8px; }
.cmp2 .col.ancla::before { content: "TU TARJETA"; color: var(--mute); }
.cmp2 .col.mejor::before { content: "✓ MEJOR PARA TI"; color: var(--indigo); }
.cmp2 .col b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; margin-top: 10px; letter-spacing: -.01em; }
.cmp2 .col .emisor { display: block; font-size: 12px; color: var(--mute); }
.cmp2 .col .porque { display: block; font-size: 12px; color: var(--indigo); font-weight: 600; margin-top: 6px; line-height: 1.3; }
.cmp2 .col .ver { font-size: 13px; padding: 6px 0 0; }
.cmp2 td { font-family: var(--mono); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cmp2 td.gana { color: var(--indigo); background: var(--lav); font-weight: 700; }
.cmp2 tr.seccion th, .cmp2 tr.seccion td { background: var(--alt); padding-top: 14px; }
.cmp2 tr.seccion th { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.sello { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 9999px; }
.sello.si { background: var(--green-soft); color: var(--green-deep); }
.sello.si::before { content: "✓ "; }
.sello.no { background: var(--sunken); color: var(--mute); }
.etq-servicio { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); border-radius: 6px; padding: 3px 6px; }
.quitar { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line-strong); background: #fff; color: var(--mute); font-size: 15px; line-height: 1; }
.quitar:hover { color: var(--danger); border-color: var(--danger); }
.cmp2 .col.agregar { min-width: 130px; vertical-align: middle; text-align: center; background: #fff; }
.cmp2 .col.agregar button { border: 1px dashed var(--lav-line); background: var(--lav); border-radius: 8px; padding: 18px 12px; font-weight: 600; color: var(--indigo); width: 100%; }

/* Plástico de tarjeta */
.plastico { flex: none; width: 46px; height: 30px; border-radius: 6px; position: relative; overflow: hidden; background: linear-gradient(135deg, #2b2f38, #0e0f12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.plastico::after { content: ""; position: absolute; left: 6px; top: 9px; width: 9px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, #f5d27a, #c9a14a); }
.plastico.amex { background: linear-gradient(135deg, #2f8fe0, var(--amex)); }
.plastico.visa { background: linear-gradient(135deg, #3a3f9e, var(--visa)); }
.plastico.mastercard { background: linear-gradient(135deg, #444, var(--mc)); }
.plastico.oro { background: linear-gradient(135deg, #f4d58a, #c99a3d); }
.plastico.platino, .plastico.platinum { background: linear-gradient(135deg, #e6e8ec, #9aa1ad); }
.plastico.black, .plastico.infinite { background: linear-gradient(135deg, #3a3a3a, #000); }
.cmp2 .col .plastico { width: 40px; height: 26px; }

/* Otras y guardar */
.otras { margin-top: 30px; }
.otras h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.otra { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.otra-n { flex: 1; min-width: 0; }
.otra-n b { display: block; font-size: 15px; font-weight: 600; }
.otra-n span { font-size: 12.5px; color: var(--mute); }
.guardar { margin-top: 28px; padding: 20px; border-radius: 10px; background: #fff; box-shadow: var(--card), 0 10px 30px rgba(15, 17, 21, .06); }
.guardar::before { content: "GUARDA TU RESULTADO"; display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--indigo); margin-bottom: 6px; }
.guardar h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.guardar p { margin: 0 0 14px; color: var(--mute); font-size: 14px; }
.guardar form { display: flex; gap: 8px; }
.guardar input { flex: 1; min-width: 0; border-radius: 6px; border: 1px solid var(--line-strong); padding: 12px 14px; }
.pie { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mute); }
.pie p { margin: 0 0 8px; }

/* Explorar */
.filtros { display: flex; gap: 6px; overflow-x: auto; padding: 14px 20px 10px; margin: 0 -20px; scrollbar-width: none; position: sticky; top: 49px; z-index: 10; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); }
.filtros::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line-strong); background: #fff; border-radius: 6px; padding: 8px 13px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: all .15s; }
.chip[aria-pressed="true"] { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.lista { display: grid; gap: 10px; }
.item { border-radius: 10px; padding: 16px; background: #fff; box-shadow: var(--card); animation: sube .45s var(--ease) both; }
.item-cab { display: flex; gap: 12px; align-items: center; }
.item-nombre { min-width: 0; flex: 1; }
.item-nombre h3 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
.item-nombre .emisor { font-size: 12.5px; color: var(--mute); }
.metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.metrica span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); line-height: 1.3; }
.metrica b { font-family: var(--mono); font-size: 14.5px; font-weight: 600; }
.alertas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.aviso { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 5px 9px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.aviso.gris { background: var(--alt); color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }
.aviso.verde { background: var(--green-soft); color: var(--green-deep); box-shadow: none; }
.item-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.ver { background: none; border: 0; font-weight: 600; font-size: 14px; color: var(--indigo); padding: 6px 0; }
.ver::after { content: " →"; }

/* Hoja inferior (preguntas, agregar, desglose) */
.sheet { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.sheet[aria-hidden="false"] { pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(14, 15, 18, .42); opacity: 0; transition: opacity .3s; }
.sheet[aria-hidden="false"] .sheet-backdrop { opacity: 1; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; background: #fff; border-radius: 16px 16px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .38s var(--ease); max-width: 760px; margin: 0 auto; outline: none; }
.sheet[aria-hidden="false"] .sheet-panel { transform: none; }
.sheet[aria-hidden="true"] .sheet-panel { visibility: hidden; transition: transform .38s var(--ease), visibility 0s .38s; }
.asa { width: 40px; height: 4px; border-radius: 99px; background: var(--line-strong); margin: 0 auto 14px; }
.paso-barra { height: 4px; background: var(--sunken); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.paso-barra i { display: block; height: 100%; background: var(--indigo); transition: width .4s var(--ease); }
.paso { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); }
.sheet h2 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin: 8px 0 6px; }
.sheet p.ayuda, .ayuda { color: var(--mute); margin: 0 0 16px; font-size: 14px; }
.sub3 { font-size: 16px; font-weight: 700; margin: 18px 0 8px; letter-spacing: -.01em; }
.opciones { display: grid; gap: 8px; }
.opcion { text-align: left; border: 0; background: #fff; box-shadow: var(--card); border-radius: 10px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; transition: box-shadow .15s, background .15s; }
.opcion[aria-pressed="true"] { background: var(--lav); box-shadow: inset 0 0 0 1.5px var(--indigo); }
.opcion .t { font-weight: 600; display: block; }
.opcion .d { font-size: 13px; color: var(--mute); display: block; }
.opcion.obj .rango { flex: none; width: 32px; height: 32px; border-radius: 6px; border: 1px dashed var(--line-strong); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--indigo); }
.opcion.obj[aria-pressed="true"] .rango { border: 0; background: var(--indigo); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { padding: 10px 14px; }
.pie-sheet { display: flex; gap: 10px; margin-top: 20px; }
.pie-sheet .btn { flex: 1; }
.campo { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px 14px; font-size: 15px; background: #fff; }
.campo:focus, .guardar input:focus { outline: 2px solid var(--lav-line); border-color: var(--indigo); }
.busq { display: grid; gap: 6px; margin-top: 10px; max-height: 46vh; overflow: auto; }
.res-busq { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: #fff; box-shadow: var(--card); border-radius: 8px; padding: 10px 12px; }
.res-busq span:nth-child(2) { flex: 1; min-width: 0; }
.res-busq b { display: block; font-size: 14.5px; font-weight: 600; }
.res-busq small { color: var(--mute); font-size: 12px; }
.res-busq .check { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--mute); font-weight: 700; }
.res-busq.on { background: var(--lav); box-shadow: inset 0 0 0 1.5px var(--indigo); }
.res-busq.on .check { background: var(--indigo); box-shadow: none; color: #fff; }
.desglose { border-radius: 10px; overflow: hidden; margin: 10px 0; box-shadow: var(--card); }
.fila { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.fila:last-child { border-bottom: 0; }
.fila .v { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.fila.total { background: var(--alt); font-weight: 600; }
.fila small { display: block; color: var(--mute); font-size: 12px; }
.fuentes { font-size: 12.5px; color: var(--mute); margin-top: 10px; }
.fuentes a { color: var(--indigo); }
.equilibrio { margin: 14px 0; padding: 14px 16px; border-radius: 10px; background: var(--lav); box-shadow: inset 0 0 0 1px var(--lav-line); font-size: 14px; }
.protec { display: flex; flex-wrap: wrap; gap: 6px; }
.bandeja[hidden] { display: none; }

@keyframes sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .hechos { grid-template-columns: 1fr 1fr; }
  .hechos .hecho:last-child { grid-column: 1 / -1; }
  .metricas { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
  .cmp2 tbody th, .cmp2 thead .esquina { width: 104px; min-width: 104px; max-width: 104px; padding: 10px 8px; font-size: 12.5px; }
  .cmp2 .col { min-width: 126px; width: 126px; padding: 10px 8px; }
  .cmp2 .col b { font-size: 13.5px; }
  .cmp2 td { font-size: 13px; padding: 10px 8px; }
  .cmp2 .col .porque { font-size: 11.5px; }
  .quitar { top: 6px; right: 6px; width: 22px; height: 22px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.cmp2 td.txt { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0; }
.cmp2 .col.mejor::before { content: "MEJOR PARA TI"; letter-spacing: .06em; }
.cmp2 td ul.bens { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.cmp2 td ul.bens li { font-family: var(--sans); font-weight: 500; font-size: 12.5px; line-height: 1.3; padding-left: 14px; position: relative; }
.cmp2 td ul.bens li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 2px; background: var(--indigo); opacity: .55; }
.cmp2 td .mas { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--indigo); }

/* MVP B · Tu mapa */
.pregunta { margin-top: 18px; padding: 18px; border-radius: 12px; background: var(--lav); box-shadow: inset 0 0 0 1px var(--lav-line); }
.pregunta label { display: block; font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin-bottom: 10px; }
.q-fila { display: flex; gap: 8px; }
.q-fila .campo { flex: 1; min-width: 0; }
.rapidas { margin-top: 10px; }
.rapidas .chip { padding: 7px 11px; font-size: 13px; }
.resp { margin-top: 14px; padding: 16px; border-radius: 10px; background: #fff; box-shadow: var(--card), 0 8px 24px rgba(63, 53, 236, .08); animation: sube .35s var(--ease) both; }
.resp .resp-l { font-size: 16.5px; line-height: 1.45; margin: 6px 0 0; }
.resp .resp-l b { color: var(--indigo); }
.resp ul { margin: 10px 0 0; padding: 0 0 0 18px; color: var(--mute); font-size: 13.5px; display: grid; gap: 4px; }
.resp ul b { color: var(--text); }
.resp .fuente { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--indigo); }
.rutas, .lado { margin-top: 28px; }
.rutas h2, .lado h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.lado .ayuda { margin-bottom: 10px; }
.rutas-l { border-radius: 10px; box-shadow: var(--card); overflow: hidden; }
.ruta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: #fff; text-align: left; transition: background .15s; }
.ruta:last-child { border-bottom: 0; }
.ruta:hover { background: var(--alt); }
.ruta .sit { font-weight: 600; font-size: 14.5px; flex: 0 0 38%; }
.ruta .usa { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; justify-content: flex-end; text-align: right; }
.ruta .usa b { display: block; font-size: 14px; }
.ruta .usa b.gris { color: var(--mute); }
.ruta .usa small { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.ruta .plastico { width: 36px; height: 24px; }
.cmp2 td small { display: block; font-family: var(--sans); font-weight: 400; font-size: 11.5px; color: var(--mute); margin-top: 3px; line-height: 1.3; }
.cmp2 td.si { color: var(--green-deep); }
.cmp2 td.no { color: var(--faint); }
.corte { border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: #fff; font-size: 13px; }
@media (max-width: 520px) { .ruta .sit { flex-basis: 34%; font-size: 13.5px; } .q-fila .btn { padding: 12px 14px; } }
.nota-umbral { padding: 12px 14px; background: var(--warn-soft); border-top: 1px solid var(--warn-line); font-size: 13px; color: var(--text); }
.nota-umbral ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.nota-umbral b { font-weight: 700; }