/* ==========================================================================
   COMPARADOR DE TARJETAS — /tarjetas y /tarjetas/<id>
   Rediseño 2026-09 (proyecto Claude Design "Comparador de Tarjetas").
   Lo pintan js/comparador-tarjetas.js (lista) y
   scripts/generar-fichas-tarjetas.js (fichas individuales, HTML estático).

   NO confundir con style_tarjetas_credito.css: esa hoja sigue viva y la cargan
   los ~52 hubs de /instituciones/ para su sección "Tarjetas de crédito del
   emisor". Son dos módulos distintos; no se tocan entre sí.
   ========================================================================== */

:root {
  --tc-rojo: #b30000;
  --tc-rojo-oscuro: #8f2a17;
  --tc-oro: #d4af37;
  --tc-oro-ink: #7a5c00;
  --tc-oro-fuerte: #b8860b;
  --tc-verde: #2e7d32;
  --tc-verde-oscuro: #1b5e20;
  --tc-rojo-alerta: #b71c1c;

  --tc-ink: #1a1a1a;
  --tc-ink-2: #292622;
  --tc-ink-3: #403b36;
  --tc-ink-4: #4f4a45;
  --tc-gris: #666;
  --tc-gris-2: #777;
  --tc-gris-3: #888;
  --tc-gris-4: #999;
  --tc-gris-5: #aaa;

  --tc-superficie: #fdfdfd;
  --tc-card: #fff;
  --tc-muted: #f8f8f6;
  --tc-crema: #fff8f0;
  --tc-crema-borde: #f0e9dd;
  --tc-borde: #e6e2dc;
  --tc-borde-suave: #f0efec;
  --tc-borde-claro: #eee;

  --tc-r-sm: 8px;
  --tc-r-md: 10px;
  --tc-r-lg: 12px;
  --tc-r-xl: 14px;
  --tc-r-2xl: 16px;
  --tc-pill: 999px;

  --tc-sombra: 0 4px 20px rgba(0, 0, 0, .07);
  --tc-sombra-menu: 0 12px 32px rgba(0, 0, 0, .16);
  --tc-cifras: Georgia, 'Times New Roman', serif;
}

/* La hoja base pone `a { color: inherit }`; aquí los enlaces del módulo sí
   deben leerse como enlaces. */
.tc-app a,
.tc-ficha a { color: var(--tc-rojo-oscuro); }
.tc-app a:hover,
.tc-ficha a:hover { color: var(--tc-rojo); text-decoration: underline; }

.tc-app input[type=range] { accent-color: var(--tc-rojo); }

/* El JS oculta cosas con `el.hidden`, y varias de ellas traen su propio
   `display` (inline-flex, grid…), que gana sobre el `display:none` del UA.
   Sin esta regla los contadores de filtro se ven siempre. */
.tc-app [hidden],
.tc-ficha [hidden] { display: none !important; }

@keyframes tcIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes tcFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.tc-hero {
  background: var(--tc-card);
  border-bottom: 1px solid var(--tc-borde);
}

.tc-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 32px;
}

.tc-hero h1 {
  margin: 0 0 14px;
  font-size: 42px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.tc-hero-sub {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tc-ink-4);
  max-width: 56ch;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .tc-hero h1 { font-size: 30px; }
  .tc-hero-sub { font-size: 15.5px; }
}

/* ==========================================================================
   2. BARRA DE FILTROS (sticky)
   ========================================================================== */
/* NO es sticky (decisión del 2026-09-04): se queda en su lugar y se va con el
   scroll. `position:relative` es solo para que el z-index del panel desplegable
   cuente contra el contenido de abajo. */
.tc-filtros {
  position: relative;
  z-index: 60;
  background: var(--tc-superficie);
  border-bottom: 1px solid var(--tc-borde);
}

.tc-filtros-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
}

.tc-filtros-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tc-buscador {
  flex: 0 1 280px;
  min-width: 210px;
}

.tc-buscador input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tc-ink-2);
  background: var(--tc-card);
  border: 1px solid #ddd;
  border-radius: var(--tc-r-md);
}

.tc-buscador input:focus {
  outline: none;
  border-color: var(--tc-rojo);
  box-shadow: 0 0 0 3px rgba(179, 0, 0, .12);
}

/* Botones que abren cada menú de filtro */
.tc-menu { position: relative; display: inline-block; }

.tc-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 15px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--tc-r-md);
  transition: border-color .2s, background .2s, color .2s;
  border: 1px solid #ddd;
  background: var(--tc-card);
  color: var(--tc-ink-3);
}

.tc-menu-btn:hover { border-color: var(--tc-rojo); }
.tc-menu-btn i { font-size: 13px; color: #8a8580; }
.tc-menu-btn svg { flex: 0 0 auto; transition: transform .25s ease; }

/* Con filtros puestos en ese menú */
.tc-menu-btn.con-valor {
  background: var(--tc-crema);
  color: var(--tc-rojo);
  border-color: var(--tc-oro);
}

/* Menú abierto */
.tc-menu-btn.abierto {
  background: #fff5f5;
  color: var(--tc-rojo);
  border-color: var(--tc-rojo);
}

.tc-menu-btn.con-valor i,
.tc-menu-btn.abierto i { color: var(--tc-rojo); }
.tc-menu-btn.abierto svg { transform: rotate(180deg); }

.tc-menu-count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--tc-pill);
  background: var(--tc-rojo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tc-espaciador { flex: 1; }

/* Presets "Empieza por aquí" */
.tc-presets {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tc-presets-label {
  font-size: 11.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tc-gris-4);
  font-weight: 700;
  margin-right: 2px;
}

/* Panel desplegable: uno solo abierto a la vez, ancho completo de la barra */
.tc-panel-host {
  position: absolute;
  left: 20px;
  right: 20px;
  margin-top: 8px;
  z-index: 90;
}

.tc-panel {
  background: var(--tc-card);
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-r-xl);
  box-shadow: var(--tc-sombra-menu);
  padding: 20px 22px;
  animation: tcFade .16s ease both;
}

.tc-panel-titulo {
  display: block;
  font-size: 11.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tc-gris);
  font-weight: 700;
  margin-bottom: 12px;
}

.tc-panel-nota {
  display: block;
  font-size: 12px;
  color: var(--tc-gris-3);
  line-height: 1.5;
  margin-top: 12px;
}

.tc-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.tc-panel-pie {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--tc-borde-suave);
}

.tc-panel-pie .tc-btn--gold:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}

.tc-emisores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 18px;
  max-height: 250px;
  overflow: auto;
}

.tc-emisor {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px;
  font-size: 13px;
  color: var(--tc-ink-3);
  cursor: pointer;
  border-radius: 6px;
}

.tc-emisor:hover { background: var(--tc-muted); }
.tc-emisor input { accent-color: var(--tc-rojo); width: 14px; height: 14px; }
.tc-emisor span:first-of-type { flex: 1; }
.tc-emisor .tc-emisor-count { color: var(--tc-gris-5); font-size: 11.5px; }

.tc-slider { display: block; max-width: 460px; }

.tc-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.tc-slider-campo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: var(--tc-r-sm);
  background: var(--tc-card);
}

.tc-slider-campo:focus-within { border-color: var(--tc-rojo); }
.tc-slider-campo-pre { font-size: 13px; font-weight: 700; color: var(--tc-gris-3); }

.tc-slider-num {
  width: 96px;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--tc-cifras);
  font-size: 15px;
  font-weight: 700;
  color: var(--tc-rojo);
  text-align: right;
}

.tc-slider-num:focus { outline: none; }
.tc-slider-num::placeholder { color: var(--tc-gris-4); font-weight: 600; font-style: italic; }
.tc-slider-num::-webkit-outer-spin-button,
.tc-slider-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tc-slider-num { -moz-appearance: textfield; appearance: textfield; }

.tc-slider-escala {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--tc-gris-4);
  font-family: var(--tc-cifras);
}

.tc-slider input[type=range] { width: 100%; }

/* Chip reutilizable (filtros rápidos, categorías, planes, presets) */
.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--tc-pill);
  border: 1px solid #ddd;
  background: var(--tc-card);
  color: var(--tc-ink-3);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
}

.tc-chip:hover { border-color: var(--tc-rojo); color: var(--tc-rojo); }

.tc-chip[aria-pressed="true"] {
  background: var(--tc-rojo);
  border-color: var(--tc-rojo);
  color: #fff;
}

.tc-chip i { font-size: 11px; margin-right: 6px; }
.tc-chip .tc-chip-count { opacity: .65; margin-left: 5px; font-weight: 500; }
.tc-chip--sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* ==========================================================================
   3. BOTONES
   ========================================================================== */
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--tc-r-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}

.tc-btn i { font-size: 12px; }

.tc-btn--gold {
  background: var(--tc-oro);
  border-color: var(--tc-oro);
  color: #3d2f00;
  box-shadow: 0 2px 8px rgba(212, 175, 55, .3);
}

.tc-btn--gold:hover {
  background: #c39f2c;
  border-color: #c39f2c;
  color: #3d2f00;
  text-decoration: none;
}

.tc-btn--primary { background: var(--tc-rojo); border-color: var(--tc-rojo); color: #fff; }
.tc-btn--primary:hover { background: #8f0000; border-color: #8f0000; color: #fff; text-decoration: none; }

.tc-btn--outline { background: var(--tc-card); border-color: #ddd; color: var(--tc-ink-3); }
.tc-btn--outline:hover { border-color: var(--tc-rojo); color: var(--tc-rojo); text-decoration: none; }

.tc-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tc-rojo-oscuro);
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.tc-btn--ghost:hover { background: var(--tc-muted); color: var(--tc-rojo); text-decoration: none; }
.tc-btn--sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
.tc-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; }

/* Enlace discreto tipo "Ver ficha completa →" */
.tc-link {
  background: none;
  border: none;
  color: var(--tc-rojo-oscuro);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 0;
  white-space: nowrap;
}

.tc-link:hover { color: var(--tc-rojo); text-decoration: underline; }

.tc-link--folleto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.tc-link--folleto i { font-size: 13px; }

/* ==========================================================================
   4. CABECERA DE RESULTADOS
   ========================================================================== */
.tc-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}

.tc-resultados {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tc-resultados-titulo { font-size: 19px; font-weight: 700; color: var(--tc-ink); }
.tc-resultados-sub { font-size: 13px; color: var(--tc-gris); margin-top: 2px; }

.tc-orden { width: 236px; }

.tc-orden label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tc-gris);
  font-weight: 700;
  margin-bottom: 6px;
}

.tc-orden select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tc-ink-2);
  background: var(--tc-card);
  border: 1px solid #ddd;
  border-radius: var(--tc-r-md);
  cursor: pointer;
}

.tc-orden select:focus { outline: none; border-color: var(--tc-rojo); }

/* ==========================================================================
   5. LISTA — una tarjeta por fila, con volteo
   ========================================================================== */
.tc-lista { display: flex; flex-direction: column; gap: 16px; }

.tc-fila { perspective: 2400px; }

.tc-flip {
  position: relative;
  min-height: 290px;
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.45, 0, .25, 1);
  will-change: transform;
}

.tc-flip.volteada { transform: rotateY(180deg); }

.tc-cara {
  background: var(--tc-card);
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-r-2xl);
  box-shadow: var(--tc-sombra);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* La cara frontal es la que define la altura de la fila; la trasera se
   superpone. `visibility` la alterna el JS a media vuelta: Safari sigue
   pintando la cara oculta cuando el hijo tiene su propio contexto 3D. */
.tc-frente {
  position: relative;
  height: 100%;
  border-top: 4px solid var(--tc-rojo);
  padding: 20px 22px;
  display: grid;
  /* Dos columnas: imagen + contenido. Las acciones bajaron a una fila propia al
     pie (antes eran una tercera columna de 220px), y esos ~240px se los queda
     el contenido: las cinco cifras caben en un solo renglón y los subtítulos
     dejaron de truncarse. */
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 20px 24px;
}

.tc-dorso {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  border-top: 4px solid var(--tc-oro);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

.tc-flip.mostrar-dorso .tc-frente { visibility: hidden; }
.tc-flip.mostrar-dorso .tc-dorso { visibility: visible; }

/* — columna de imagen — */
.tc-media { display: flex; flex-direction: column; gap: 12px; }

.tc-imagen {
  border-radius: var(--tc-r-lg);
  background-color: var(--tc-muted);
  border: 1px solid var(--tc-borde-claro);
  height: 152px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  padding: 10px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .14));
}

.tc-red { font-size: 11.5px; color: var(--tc-gris-2); text-align: center; }
.tc-red strong { color: var(--tc-ink-3); }
/* Pago móvil: misma tipografía que la red, justo debajo. */
.tc-red--pago { margin-top: -6px; }
.tc-red--pago i { font-size: 10.5px; color: var(--tc-gris-4); margin-right: 5px; }

/* Cabecera del cuerpo: identidad a la izquierda y el CTA a la derecha, sobre la
   misma rejilla de 3 columnas que las cifras de abajo. */
.tc-cuerpo-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: start;
}

.tc-cuerpo-id { grid-column: 1 / 3; min-width: 0; display: flex; flex-direction: column; }

/* «Solicitar» arriba a la derecha: es la acción que la fila persigue y estaba
   perdida al pie, después de tres desplegables. Va CENTRADO en su hueco —el que
   dejan el bloque del nombre y el borde derecho— tanto horizontal como
   verticalmente, y la flecha de la esquina avisa que sale del sitio. */
.tc-cta-top {
  grid-column: 3;
  justify-self: center;
  align-self: center;
  position: relative;
  /* `align-self:center` lo centra en la FILA de la cabecera, que empieza tras el
     padding de la tarjeta (20px + 4px de borde) y termina 14px antes de las
     cifras. Ese desbalance deja el botón 5px abajo del punto medio real entre el
     borde de la tarjeta y el renglón de anualidad: (24 - 14) / 2. */
  top: -5px;
  height: 58px;
  padding: 0 40px;
  font-size: 16px;
}

/* La flecha es un SVG y no dos pseudo-elementos con bordes: la versión anterior
   dibujaba la punta con `border-top`+`border-right` y el asta con un `::before`
   rotado, y las dos piezas no empataban — se veía cortada. */
.tc-cta-flecha {
  position: absolute;
  top: 8px;
  right: 9px;
  opacity: .7;
}

/* — columna central — */
.tc-cuerpo { display: flex; flex-direction: column; min-width: 0; }

.tc-badges {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.tc-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--tc-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--tc-muted);
  border: 1px solid var(--tc-borde);
  color: var(--tc-ink-3);
}

.tc-badge i { font-size: 11px; margin-right: 5px; }
.tc-badge--destacada { background: #fdf6e0; border-color: #ecd9a0; color: var(--tc-oro-ink); }
.tc-badge--banco { background: #eef4fb; border-color: #cfe0f2; color: #23558c; }
.tc-badge--fintech { background: #f0f7f1; border-color: #cbe4cf; color: #2b6b39; }
.tc-badge--tienda { background: #fdf1ec; border-color: #f2d5c8; color: #96482c; }
.tc-badge--sofipo { background: #f5f1fa; border-color: #ddd2ec; color: #5b3f8c; }

.tc-segmento { color: var(--tc-gris-3); font-size: 11.5px; }

.tc-nombre {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--tc-ink);
  line-height: 1.2;
}

.tc-nombre a { color: inherit; }
.tc-nombre a:hover { color: var(--tc-rojo); text-decoration: none; }
/* El tipo de emisor va pegado a quién emite, que es donde significa algo:
   «Tienda · Liverpool» se lee de corrido. Suelto arriba del nombre era una
   etiqueta sin sujeto. */
.tc-emisor-linea {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.tc-emisor-nombre { font-size: 13.5px; color: var(--tc-gris); }

.tc-planes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  flex-wrap: wrap;
}

.tc-planes-label {
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--tc-gris-4);
  font-weight: 700;
}

/* — stats — */
/* Dos renglones de tres: arriba lo que cuesta y lo que da (anualidad, cashback,
   ingreso); abajo la letra chiquita (CAT, historial, bono). El bono va al final
   porque puede no existir, y así su ausencia no abre un hueco en medio. */
.tc-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid var(--tc-borde-suave);
  border-bottom: 1px solid var(--tc-borde-suave);
  padding: 13px 0;
}

.tc-stat { min-width: 0; }

.tc-stat-label {
  font-size: 10.5px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--tc-gris-4);
  font-weight: 700;
}

.tc-stat-valor {
  font-family: var(--tc-cifras);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 3px;
  color: var(--tc-ink-2);
  overflow-wrap: anywhere;
}

.tc-stat-valor.tono-verde { color: var(--tc-verde); }
.tc-stat-valor.tono-oro { color: var(--tc-oro-fuerte); }
.tc-stat-valor.tono-rojo { color: var(--tc-rojo-alerta); }
.tc-stat-valor.tono-gris { color: var(--tc-gris-5); }

.tc-stat-sub {
  font-size: 11px;
  color: var(--tc-gris-2);
  line-height: 1.4;
  margin-top: 3px;
}

/* Signo de admiración + tooltip (el patrón de NerdWallet). SIN retardo: se
   muestra y se oculta con `visibility`, sin transition ni transition-delay. */
.tc-info-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }

.tc-info {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--tc-oro-fuerte);
  cursor: help;
  font-size: 12px;
  line-height: 1;
}

.tc-info:hover { color: var(--tc-rojo); }

.tc-tooltip {
  position: absolute;
  top: calc(100% + 7px);
  /* Se abre hacia la IZQUIERDA: el bono vive pegado al borde derecho de la
     tarjeta y `.tc-cara` recorta con overflow:hidden. */
  right: -6px;
  z-index: 40;
  width: max-content;
  max-width: 300px;
  padding: 10px 12px;
  border-radius: var(--tc-r-sm);
  background: var(--tc-ink);
  color: #f5f5f2;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--tc-sombra-menu);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.tc-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 9px;
  border: 6px solid transparent;
  border-bottom-color: var(--tc-ink);
}

/* `:focus` a secas, no `:focus-visible`: en táctil no hay hover y focus-visible
   no se activa al tocar, así que el tooltip quedaría inalcanzable en el celular.
   Con focus, tocar el signo lo abre y tocar fuera lo cierra. */
.tc-info-wrap:hover .tc-tooltip,
.tc-info:focus + .tc-tooltip {
  visibility: visible;
  opacity: 1;
}

/* — verificación — */
/* Bajó a la fila de acciones, junto a las fuentes: es procedencia del dato, no
   una característica del producto, y arriba competía con las cifras. */
.tc-verificado {
  font-size: 11.5px;
  color: var(--tc-gris-4);
  white-space: nowrap;
  flex: 0 0 auto;
}

.tc-verificado i { font-size: 12px; color: var(--tc-verde); margin-right: 5px; }

/* — desplegables (el patrón de Bankrate/NerdWallet: el contenido empuja hacia
     abajo en vez de esconder el frente, así se puede leer con la tarjeta a la
     vista y comparar dos abiertas a la vez) — */
.tc-acordeon {
  grid-column: 1 / -1;
  border-top: 1px solid var(--tc-borde-suave);
  padding-top: 12px;
}

/* Apilados y NO excluyentes: cada uno se abre por su cuenta y se pueden tener
   los tres abiertos a la vez, como en NerdWallet y Bankrate. Antes eran
   pestañas en fila con un solo panel, y eso obligaba a cerrar uno para ver otro. */
.tc-acordeon-item + .tc-acordeon-item { border-top: 1px solid var(--tc-borde-suave); }

.tc-acordeon-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 2px;
  border: none;
  background: transparent;
  color: var(--tc-rojo-oscuro);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color .18s;
}

.tc-acordeon-tab:hover { color: var(--tc-rojo); }
.tc-acordeon-tab i { font-size: 12px; width: 14px; text-align: center; }
.tc-acordeon-tab svg { margin-left: auto; flex: 0 0 auto; transition: transform .22s ease; }
.tc-acordeon-tab.abierto { color: var(--tc-rojo); }
.tc-acordeon-tab.abierto svg { transform: rotate(180deg); }

.tc-acordeon-panel {
  padding: 4px 2px 16px;
  animation: tcIn .18s ease both;
}

.tc-panel-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.tc-panel-vacio { margin: 0; font-size: 12.5px; color: var(--tc-gris-3); line-height: 1.5; }

/* Editorial propio */
.tc-veredicto {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tc-ink-2);
  font-weight: 600;
  text-wrap: pretty;
}

.tc-balance { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }

.tc-balance li {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tc-ink-3);
}

.tc-balance i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 9px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.tc-balance.a-favor i { background: var(--tc-green-bg, #e8f5e9); color: var(--tc-verde); }
.tc-balance.en-contra i { background: #fdecec; color: var(--tc-rojo-alerta); }

.tc-editorial-texto {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tc-ink-4);
  text-wrap: pretty;
}


/* — fila de acciones (al pie de la tarjeta) — */
.tc-acciones {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--tc-borde-suave);
  padding-top: 16px;
}

.tc-acciones-desc {
  font-size: 12.5px;
  color: var(--tc-gris);
  line-height: 1.45;
  flex: 1 1 auto;
  min-width: 0;
  /* Un renglón: es el lema de la tarjeta, no un párrafo. El texto completo
     queda en el title y en la ficha. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* ==========================================================================
   6. DORSO DE LA FILA
   ========================================================================== */
.tc-dorso-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--tc-borde-suave);
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.tc-dorso-nombre { font-size: 15px; font-weight: 700; color: var(--tc-ink); }
.tc-dorso-plan { font-size: 12px; color: var(--tc-gris-3); }

.tc-dorso-cuerpo {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tc-bloque-titulo {
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tc-rojo);
  font-weight: 700;
  margin-bottom: 9px;
}

.tc-bono {
  background: var(--tc-crema);
  border: 1px solid var(--tc-crema-borde);
  border-left: 3px solid var(--tc-oro);
  border-radius: var(--tc-r-md);
  padding: 11px 13px;
  margin-bottom: 13px;
}

.tc-bono-label {
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tc-oro-ink);
  font-weight: 700;
  margin-bottom: 4px;
}

.tc-bono-valor {
  font-family: var(--tc-cifras);
  font-size: 16px;
  font-weight: 700;
  color: var(--tc-oro-fuerte);
  line-height: 1.2;
}

.tc-bono-detalle {
  font-size: 11.5px;
  color: var(--tc-gris);
  line-height: 1.45;
  margin-top: 4px;
}

.tc-beneficios { display: flex; flex-direction: column; gap: 9px; }
.tc-beneficio-t { font-size: 12.5px; font-weight: 700; color: var(--tc-ink-2); line-height: 1.3; }
.tc-beneficio-d { font-size: 11.5px; color: var(--tc-gris); line-height: 1.45; margin-top: 2px; }

.tc-sub-bloque {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--tc-borde-suave);
}

.tc-msi-detalle { font-size: 11.5px; color: var(--tc-gris); line-height: 1.45; }
.tc-comercios { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.tc-comercio {
  background-color: var(--tc-muted);
  border: 1px solid var(--tc-borde);
  color: #595550;
  border-radius: var(--tc-pill);
  padding: 4px 11px;
  font-size: 11px;
  background-size: 14px auto;
  background-repeat: no-repeat;
  background-position: 8px center;
}

.tc-comercio.con-logo { padding: 4px 10px 4px 26px; }

.tc-datos { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--tc-ink-3); }

.tc-dato {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dotted var(--tc-borde-claro);
  padding-bottom: 5px;
}

.tc-dato dt, .tc-dato-k { color: var(--tc-gris-2); margin: 0; }
.tc-dato dd, .tc-dato-v { font-weight: 700; text-align: right; margin: 0; }

.tc-docs {
  margin: 0;
  padding-left: 16px;
  font-size: 11.5px;
  color: var(--tc-gris);
  line-height: 1.5;
}

.tc-nota { font-size: 11px; color: var(--tc-gris-3); line-height: 1.45; margin-top: 8px; }
.tc-beneficios-lista { font-size: 12.5px; color: var(--tc-ink-3); line-height: 1.6; }
.tc-beneficios-lista .tc-mas { list-style: none; margin-left: -16px; color: var(--tc-gris-3); font-size: 11.5px; }
/* «Condiciones completas en la ficha»: el desplegable es un resumen. */
.tc-panel-mas { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--tc-rojo); text-decoration: none; }
.tc-panel-mas:hover { text-decoration: underline; }
.tc-fuentes { display: flex; flex-direction: column; gap: 5px; }
.tc-fuentes a { font-size: 11.5px; }
.tc-fuentes i { font-size: 11px; margin-right: 6px; }

/* ==========================================================================
   7. PAGINADO Y VACÍO
   ========================================================================== */
.tc-mas { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.tc-mas-restante { font-size: 13px; color: var(--tc-gris-3); }

.tc-vacio {
  border: 1px dashed #ddd;
  border-radius: var(--tc-r-2xl);
  padding: 48px 24px;
  text-align: center;
  background: var(--tc-card);
}

.tc-vacio i { font-size: 22px; color: #ccc; }
.tc-vacio-titulo { font-size: 16px; font-weight: 700; color: var(--tc-ink-3); margin: 12px 0 6px; }
.tc-vacio-sub { font-size: 13.5px; color: var(--tc-gris); margin-bottom: 16px; }

.tc-cargando { padding: 40px 0; text-align: center; color: var(--tc-gris-3); font-size: 14px; }

/* ==========================================================================
   8. CALCULADORA DE RECOMPENSAS (total + desglose por categoría)
   ==========================================================================
   Tres columnas de cifras —recompensa, costo/mes y neto mensual— sobre el
   mismo motor que la ficha individual (js/tarjetas-presentacion.js), para que
   la lista y la ficha no puedan dar números distintos. */
.tc-calc {
  margin-top: 44px;
  border: 1px solid var(--tc-borde);
  border-top: 4px solid var(--tc-rojo);
  border-radius: var(--tc-r-2xl);
  background: linear-gradient(145deg, #f8fbf8, #fff);
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  scroll-margin-top: 96px;
}

.tc-calc-head { margin-bottom: 22px; }

.tc-calc h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--tc-ink);
}

.tc-calc-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--tc-ink-4);
  line-height: 1.55;
  max-width: 74ch;
  text-wrap: pretty;
}

.tc-calc-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* ── Formulario ─────────────────────────────────────────────────────────── */
.tc-calc-form {
  background: var(--tc-card);
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-r-xl);
  padding: 20px;
}

.tc-calc-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tc-gris);
  font-weight: 700;
  margin-bottom: 8px;
}

.tc-calc-campo { position: relative; display: flex; align-items: center; }

.tc-calc-prefijo {
  position: absolute;
  left: 14px;
  font-size: 15px;
  color: var(--tc-gris-2);
  pointer-events: none;
}

.tc-calc-campo input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 28px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--tc-ink-2);
  border: 1px solid #ddd;
  border-radius: var(--tc-r-md);
}

.tc-calc-campo input:focus { outline: none; border-color: var(--tc-rojo); }

.tc-calc-hint { font-size: 11.5px; color: var(--tc-gris-3); margin: 6px 0 12px; }
.tc-calc-form input[type=range] { width: 100%; }

.tc-gasto-presets { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

.tc-gasto-preset {
  border-radius: var(--tc-r-sm);
  padding: 6px 11px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid #ddd;
  background: var(--tc-card);
  color: #595550;
}

.tc-gasto-preset:hover { border-color: var(--tc-rojo); color: var(--tc-rojo); }

.tc-gasto-preset[aria-pressed="true"] {
  background: var(--tc-rojo);
  border-color: var(--tc-rojo);
  color: #fff;
}

.tc-calc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tc-ink-3);
  text-align: left;
  background: #faf9f7;
  border: 1px solid var(--tc-borde-claro);
  border-radius: var(--tc-r-md);
  cursor: pointer;
}

.tc-calc-toggle:hover { border-color: var(--tc-rojo); color: var(--tc-rojo); }
.tc-calc-toggle em { font-style: normal; font-weight: 400; color: var(--tc-gris-3); }
.tc-calc-chevron { transition: transform .2s; }
.tc-calc-toggle.abierto .tc-calc-chevron { transform: rotate(180deg); }

.tc-cats { margin-top: 14px; }

.tc-cats-intro {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--tc-gris);
  line-height: 1.5;
}

.tc-cats-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.tc-cat-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tc-cat-campo label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tc-ink-4);
  line-height: 1.3;
}

.tc-cat-campo label i { color: var(--tc-gris-3); font-size: 11px; }

.tc-cat-campo-input { position: relative; display: flex; align-items: center; }
.tc-cat-campo-input .tc-calc-prefijo { left: 10px; font-size: 12.5px; }

.tc-cat-campo-input input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 22px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tc-ink-2);
  border: 1px solid #e2ded9;
  border-radius: var(--tc-r-sm);
  background: #fff;
}

.tc-cat-campo-input input:focus { outline: none; border-color: var(--tc-rojo); }

.tc-cats-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 8px;
  font-size: 12px;
  color: var(--tc-gris);
}

.tc-cats-pie strong { color: var(--tc-ink-3); }

.tc-calc-resumen {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--tc-borde-suave);
  font-size: 12.5px;
  color: var(--tc-gris);
  line-height: 1.55;
}

.tc-calc-resumen strong { color: var(--tc-verde); }

/* ── Tabla de resultados ────────────────────────────────────────────────── */
.tc-calc-out { min-width: 0; }

.tc-calc-tabla-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tc-calc-tabla-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--tc-gris);
}

.tc-calc-tabla-head p { margin: 0; font-size: 12.5px; color: var(--tc-gris-2); }
.tc-calc-aviso { color: var(--tc-rojo-alerta); font-weight: 600; }

.tc-calc-scroll { overflow-x: auto; }

.tc-calc-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tc-calc-tabla th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  text-align: left;
  color: var(--tc-gris-3);
  background: #f7f6f4;
  border-bottom: 1px solid var(--tc-borde);
  white-space: nowrap;
}

.tc-calc-tabla td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--tc-borde-suave);
  vertical-align: middle;
}

.tc-calc-tabla tbody tr:hover { background: #fbfaf8; }
.tc-calc-tabla tr.tc-fila-top { background: #f4faf4; }
.tc-calc-tabla tr.tc-fila-top:hover { background: #eef7ee; }
.tc-calc-tabla tr.tc-fila-neg .tc-calc-neto { color: var(--tc-rojo-alerta); }

.tc-col-pos { width: 34px; text-align: center; color: var(--tc-gris-3); font-weight: 700; }
.tc-col-num { text-align: right; white-space: nowrap; }

.tc-medalla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--tc-verde);
}

.tc-calc-nombre { font-weight: 600; color: var(--tc-ink-2); text-decoration: none; }
.tc-calc-nombre:hover { color: var(--tc-rojo); text-decoration: underline; }

.tc-calc-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #6b5a12;
  background: #fdf3d8;
  border-radius: 999px;
}

.tc-calc-cifra { font-weight: 600; color: var(--tc-verde); }
.tc-calc-costo { color: var(--tc-ink-4); }
.tc-calc-cero { color: var(--tc-gris-3); }

.tc-calc-neto { font-weight: 700; color: var(--tc-verde); }
.tc-calc-neto.negativo { color: var(--tc-rojo-alerta); }

.tc-calc-barra {
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  background: #eceae7;
  overflow: hidden;
}

.tc-calc-barra span { display: block; height: 100%; background: var(--tc-verde); border-radius: 999px; }

.tc-calc-icono { margin-left: 5px; font-size: 11px; color: var(--tc-gris-3); cursor: help; }
.tc-calc-icono--aviso { color: #b8860b; }

.tc-calc-vacio { padding: 28px 10px; text-align: center; color: var(--tc-gris-3); }

.tc-calc-fuera {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--tc-gris);
  background: #faf9f7;
  border: 1px solid var(--tc-borde-claro);
  border-radius: var(--tc-r-md);
}

.tc-calc-fuera summary { cursor: pointer; font-weight: 600; color: var(--tc-ink-4); }
.tc-calc-fuera p { margin: 10px 0 8px; line-height: 1.5; }
.tc-calc-fuera ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.tc-calc-fuera li span { display: block; color: var(--tc-gris-3); font-size: 11.5px; }
.tc-calc-fuera a { color: var(--tc-ink-3); font-weight: 600; }

.tc-calc-nota {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 11.5px;
  color: var(--tc-gris-3);
  line-height: 1.55;
  max-width: 78ch;
}

.tc-calc-nota i { margin-top: 3px; }

/* ==========================================================================
   9. GUÍAS Y AVISO
   ========================================================================== */
.tc-guias {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tc-guia {
  background: var(--tc-card);
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-r-xl);
  padding: 20px;
}

.tc-guia i { font-size: 16px; color: var(--tc-rojo); }
.tc-guia h3 { margin: 11px 0 7px; font-size: 16px; font-weight: 700; color: var(--tc-ink); }
.tc-guia p { margin: 0; font-size: 13px; color: var(--tc-gris); line-height: 1.55; text-wrap: pretty; }

.tc-aviso {
  margin: 28px 0 0;
  font-size: 12px;
  color: var(--tc-gris-4);
  line-height: 1.6;
  max-width: 80ch;
}

/* ==========================================================================
   10. FICHA INDIVIDUAL — /tarjetas/<id>
   ========================================================================== */
.tc-ficha { max-width: 1040px; margin: 0 auto; padding: 26px 24px 70px; }
.tc-ficha-volver { margin-bottom: 18px; }

.tc-migas {
  font-size: 12.5px;
  color: var(--tc-gris-3);
  margin-bottom: 14px;
}

.tc-migas a { color: var(--tc-rojo-oscuro); }
.tc-migas span { margin: 0 6px; color: #ccc; }

.tc-ficha-head {
  background: var(--tc-card);
  border: 1px solid var(--tc-borde);
  border-top: 4px solid var(--tc-rojo);
  border-radius: var(--tc-r-2xl);
  padding: 28px;
  box-shadow: var(--tc-sombra);
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.tc-ficha-imagen {
  border-radius: var(--tc-r-xl);
  background-color: var(--tc-muted);
  border: 1px solid var(--tc-borde-claro);
  height: 172px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  padding: 16px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .16));
}

.tc-ficha-cta { margin-top: 14px; }
.tc-ficha-cta .tc-btn { width: 100%; }
.tc-ficha-links { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.tc-ficha-links a { font-size: 12.5px; }
.tc-ficha-links i { font-size: 11px; margin-right: 7px; }

.tc-ficha-verificado {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--tc-gris-4);
  line-height: 1.5;
}

.tc-ficha-verificado i { font-size: 12px; color: var(--tc-verde); margin-right: 5px; }

.tc-ficha-titulo {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--tc-ink);
  line-height: 1.12;
}

.tc-ficha-desc { margin: 8px 0 0; font-size: 15px; color: var(--tc-ink-4); line-height: 1.55; }

.tc-ficha-stats {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tc-ficha-stat {
  background: var(--tc-superficie);
  border: 1px solid var(--tc-borde-claro);
  border-radius: var(--tc-r-lg);
  padding: 12px;
}

/* En la ficha las secciones van una tras otra a ancho completo (ya no en pares):
   el cuerpo lo arman los mismos constructores que el comparador, y varios de
   ellos ya traen dos columnas por dentro. */
.tc-panel-ficha { margin-top: 20px; }

.tc-panel-ficha--editorial {
  background: var(--tc-crema);
  border-color: var(--tc-crema-borde);
}

.tc-panel-ficha--editorial h2 i { color: var(--tc-oro-fuerte); }

.tc-panel-ficha {
  background: var(--tc-card);
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-r-2xl);
  padding: 24px;
}

.tc-panel-ficha h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tc-ink);
}

.tc-panel-ficha h2 i { font-size: 14px; color: var(--tc-rojo); margin-right: 9px; }
.tc-panel-ficha h2 i.oro { color: var(--tc-oro-fuerte); }

.tc-bono--ficha { border-radius: var(--tc-r-lg); padding: 14px 16px; margin-bottom: 16px; }
.tc-bono--ficha .tc-bono-valor { font-size: 22px; line-height: 1.15; }
.tc-bono--ficha .tc-bono-detalle { font-size: 13px; color: var(--tc-ink-4); line-height: 1.5; margin-top: 6px; }

.tc-programa { font-size: 13px; color: var(--tc-gris); margin-bottom: 14px; line-height: 1.5; }
.tc-cats { display: flex; flex-direction: column; gap: 9px; }

.tc-cat {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  border-bottom: 1px solid #f4f3f0;
  padding-bottom: 9px;
}

.tc-cat-pct {
  font-family: var(--tc-cifras);
  font-size: 20px;
  font-weight: 700;
  color: var(--tc-verde);
  text-align: right;
}

.tc-cat-nombre { display: block; font-size: 13.5px; font-weight: 700; color: var(--tc-ink-2); }
.tc-cat-aplica { display: block; font-size: 11.5px; color: var(--tc-gris-2); line-height: 1.45; margin-top: 2px; }
.tc-cat-tope { display: block; font-size: 11.5px; color: var(--tc-oro-fuerte); margin-top: 2px; }
/* El máximo del programa, antes de las categorías: el tope global no es una
   nota al pie, es lo que decide cuánto rinde un porcentaje alto. */
.tc-tope-resumen {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--tc-oro);
  background: #fdf8e8;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tc-oro-ink);
}

.tc-panel-ficha .tc-datos { font-size: 13px; gap: 8px; }
.tc-panel-ficha .tc-dato { padding-bottom: 6px; gap: 12px; }
.tc-panel-ficha .tc-docs { margin: 14px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.tc-panel-ficha .tc-nota { font-size: 12px; color: var(--tc-gris); line-height: 1.55; margin-top: 12px; }
.tc-panel-ficha .tc-beneficios { gap: 12px; }
.tc-panel-ficha .tc-beneficio-t { font-size: 13.5px; }
.tc-panel-ficha .tc-beneficio-d { font-size: 12.5px; line-height: 1.5; }
.tc-panel-ficha .tc-fuentes a { font-size: 12.5px; }

.tc-msi-ficha {
  margin-top: 20px;
  background: var(--tc-crema);
  border: 1px solid var(--tc-crema-borde);
  border-radius: var(--tc-r-2xl);
  padding: 22px 24px;
}

.tc-msi-ficha h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--tc-ink); }
.tc-msi-ficha h2 i { font-size: 14px; color: var(--tc-rojo); margin-right: 9px; }
.tc-msi-ficha p { margin: 0; font-size: 13.5px; color: var(--tc-ink-4); line-height: 1.55; }
.tc-msi-ficha .tc-comercios { gap: 6px; margin-top: 11px; }
.tc-msi-ficha .tc-comercio { background-color: #fff; font-size: 12px; background-size: 15px auto; }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1179px) {
  .tc-frente { grid-template-columns: 200px minmax(0, 1fr); }
  /* La calculadora pasa a una columna: formulario arriba, tabla abajo. La tabla
     conserva sus cinco columnas porque el contenedor hace scroll horizontal. */
  .tc-calc-grid { grid-template-columns: 1fr; }
  .tc-cats-lista { max-height: none; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 859px) {
  .tc-flip { min-height: 0; }
  .tc-flip.volteada { transform: none; }

  /* Debajo de 860 px el volteo 3D se cambia por mostrar/ocultar: una fila
     apilada mide 600+ px y una cara absoluta encima de la otra desalinea la
     altura del contenedor. */
  .tc-dorso { position: static; transform: none; display: none; }
  .tc-flip.mostrar-dorso .tc-frente { display: none; visibility: visible; }
  .tc-flip.mostrar-dorso .tc-dorso { display: flex; visibility: visible; }
  .tc-dorso-cuerpo { overflow: visible; }
  .tc-panel-cols { grid-template-columns: 1fr; gap: 16px; }

  .tc-frente { grid-template-columns: 1fr; padding: 18px; }
  .tc-imagen { height: 150px; }
  .tc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-cuerpo-head { grid-template-columns: 1fr; gap: 12px; }
  .tc-cuerpo-id { grid-column: 1 / -1; }
  .tc-cta-top { grid-column: 1 / -1; justify-self: stretch; }
  /* El tooltip se abre a la izquierda del signo, que aquí ya no está pegado al
     borde derecho de la tarjeta. */
  .tc-tooltip { right: auto; left: -6px; max-width: 240px; }
  .tc-tooltip::after { right: auto; left: 9px; }
  .tc-guias { grid-template-columns: 1fr; }
  .tc-orden { width: 100%; }
  .tc-calc { padding: 20px; }
  .tc-calc h2 { font-size: 20px; }
  .tc-calc-form { padding: 16px; }
  /* En móvil la tabla se lee mejor sin la columna de costo: el neto ya lo
     incluye, y el detalle vive en el tooltip de la recompensa. */
  .tc-calc-tabla th.tc-col-costo, .tc-calc-tabla td.tc-col-costo { display: none; }
  .tc-cats-lista { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  .tc-ficha-head { grid-template-columns: 1fr; padding: 20px; }
  .tc-ficha-titulo { font-size: 26px; }
  .tc-ficha-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-ficha-pair { grid-template-columns: 1fr; }
  .tc-ficha { padding: 20px 16px 60px; }
  .tc-panel-ficha { padding: 20px; }
}

@media (max-width: 640px) {
  .tc-filtros-inner { padding: 12px 16px; }
  .tc-panel-host { left: 16px; right: 16px; }
  .tc-panel { padding: 16px; }
  .tc-buscador { flex: 1 1 100%; }
  .tc-menu, .tc-menu-btn { width: 100%; }
  .tc-menu-btn { justify-content: flex-start; }
  .tc-menu-btn svg { margin-left: auto; }
  .tc-acciones { flex-wrap: wrap; }
  .tc-acciones-desc { flex-basis: 100%; -webkit-line-clamp: 2; }
  .tc-acciones .tc-btn { flex: 1 1 140px; }
  .tc-shell { padding: 20px 16px 50px; }
  .tc-hero-inner { padding: 28px 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-flip { transition: none; }
  .tc-panel { animation: none; }
  .tc-btn, .tc-chip, .tc-menu-btn { transition: none; }
}

@media print {
  /* Se van los controles, NO la descripción: ahora vive en la fila de acciones
     y al imprimir sigue siendo contenido útil. */
  .tc-noprint, .tc-filtros, .tc-mas { display: none !important; }
  .tc-acciones .tc-btn, .tc-acciones .tc-link { display: none !important; }
  .tc-acciones { border-top: none; padding-top: 8px; }
  .tc-flip { min-height: 0; }
  .tc-dorso { display: none; }
}

/* --------------------------------------------------------------------------
   Directorio estático de fichas (/tarjetas) — lo inyecta
   scripts/generar-fichas-tarjetas.js debajo del comparador. Es la ruta de
   rastreo hacia las 73 fichas: el comparador (JS) pagina y no las enlaza todas.
   -------------------------------------------------------------------------- */
.tc-directorio {
  border-top: 1px solid var(--tc-borde);
  background: var(--tc-superficie);
}
.tc-directorio-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 20px 48px;
}
.tc-directorio h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  color: var(--tc-ink);
}
.tc-directorio-sub {
  margin: 0 0 22px;
  color: var(--tc-gris);
}
.tc-directorio-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px 28px;
}
.tc-directorio-grupo h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--tc-ink-3);
}
.tc-directorio-grupo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-directorio-grupo li { margin: 0 0 4px; }
.tc-directorio-grupo a {
  color: var(--tc-rojo);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.4;
}
.tc-directorio-grupo a:hover { text-decoration: underline; }