/* ==========================================================================
   Ficha de Tarjeta — rediseño (plantilla "Ficha de Tarjeta" de Claude Design)
   --------------------------------------------------------------------------
   Namespace `.fch-` a propósito para NO tocar el comparador (`tc-` en
   style_comparador_tarjetas.css) ni el resto del sitio. Paleta y medidas
   tomadas del design system `de-cero-al-infinito` (tokens/colors.css). Los
   números grandes usan Georgia igual que la lista.
   ========================================================================== */

/* El módulo vive dentro de `main`, así que el reset no lo afecta. Ponemos
   nuestros propios colores de enlace (style.css pone `a { color: inherit }`). */
.fch-wrap a:not(.fch-btn) { color: var(--fch-rojo-brick, #8f2a17); }
.fch-wrap a:not(.fch-btn):hover { color: var(--fch-rojo, #b30000); text-decoration: underline; }
.fch-wrap input[type="range"] { accent-color: var(--fch-rojo, #b30000); }
.fch-wrap [hidden] { display: none !important; }

.fch-wrap {
  --fch-rojo: #b30000;
  --fch-rojo-oscuro: #8f0000;
  --fch-rojo-brick: #8f2a17;
  --fch-oro: #d4af37;
  --fch-oro-ink: #7a5c00;
  --fch-oro-fuerte: #b8860b;
  --fch-oro-suave: #e0dba5;
  --fch-verde: #2e7d32;
  --fch-verde-fondo: #e8f5e9;
  --fch-rojo-alerta: #b71c1c;
  --fch-amber-ink: #856404;
  --fch-ink: #1a1a1a;
  --fch-ink-2: #292622;
  --fch-ink-3: #403b36;
  --fch-ink-4: #4f4a45;
  --fch-gris: #666;
  --fch-gris-2: #777;
  --fch-gris-3: #888;
  --fch-gris-4: #999;
  --fch-borde: #e6e2dc;
  --fch-borde-suave: #f0eeea;
  --fch-borde-claro: #eee;
  --fch-superficie: #fdfdfd;
  --fch-card: #fff;
  --fch-muted: #f8f8f6;
  --fch-crema: #fff8f0;
  --fch-crema-borde: #e5dfd3;
  --fch-cifras: Georgia, "Times New Roman", serif;
  --fch-sombra: 0 4px 20px rgba(0, 0, 0, .07);
  --fch-sombra-hover: 0 10px 28px rgba(0, 0, 0, .11);
  --fch-r: 14px;
  --fch-r-2xl: 16px;

  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--fch-ink-2);
  background: var(--fch-superficie);
}

/* box-sizing global del módulo: sin esto `width:100%` sobre un botón con
   padding (el "Solicitar en …" del rail) desborda la tarjeta. */
.fch-wrap *,
.fch-wrap *::before,
.fch-wrap *::after { box-sizing: border-box; }

/* ── Contenedor general ─────────────────────────────────────────────────── */
/* Sin límite de ancho ni padding lateral: las BANDAS ocupan toda la pantalla y
   cada una alinea su contenido con `.fch-seccion-inner` (980 px centrados). */
.fch-wrap { padding: 0; }

/* Columna de lectura: 980 px de contenido, centrada, con 20 px de respiro en
   pantallas chicas. Todo el contenido vive aquí dentro; el color lo pone la
   banda que lo envuelve. */
.fch-seccion-inner,
.fch-volver {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.fch-seccion-inner { width: 100%; }

.fch-migas { font-size: 12.5px; color: #9a8c6b; margin: 0 0 16px; }
.fch-migas a { color: #9a8c6b; }
.fch-migas span { opacity: .55; }
.fch-migas-actual { color: var(--fch-ink-4); opacity: 1; }
.fch-migas span { opacity: .5; }

/* ── Layout principal: una sola columna, sin límite ─────────────────────── */
/* `.fch-main` NO limita el ancho: si lo hiciera, las bandas de color se
   cortarían a media pantalla. El ancho de lectura lo pone `.fch-seccion-inner`,
   que va DENTRO de cada banda. */
.fch-main { min-width: 0; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.fch-hero { padding: 34px 0 40px; }
.fch-hero-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--fch-borde);
  line-height: 1.6;
}
.fch-badge--banco   { background: #eef4fb; border-color: #cfe0f2; color: #23558c; }
.fch-badge--fintech { background: #f0f7f1; border-color: #cbe4cf; color: #2b6b39; }
.fch-badge--tienda  { background: #fdf1ec; border-color: #f2d5c8; color: #96482c; }
.fch-badge--sofipo  { background: #f5f1fa; border-color: #ddd2ec; color: #5b3f8c; }
.fch-badge--ifpe    { background: #f0f7f1; border-color: #cbe4cf; color: #2b6b39; }
.fch-badge--casa-de-bolsa { background: #fdf1ec; border-color: #f2d5c8; color: #96482c; }
.fch-badge--destacada { background: #fdf6e0; border-color: #ecd9a0; color: var(--fch-oro-ink); }
.fch-badge i { font-size: 11px; }

.fch-hero-submeta { font-size: 12.5px; color: #8a837c; }

.fch-titulo {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--fch-ink);
  text-wrap: pretty;
}
.fch-emisor {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: #8a837c;
}
.fch-desc {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fch-ink-4);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Pestañas de plan */
.fch-plans {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.fch-plans-label {
  font-size: 10.5px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--fch-gris-4);
  font-weight: 700;
}
.fch-plan-tab {
  border: 1px solid var(--fch-borde);
  background: var(--fch-card);
  color: var(--fch-ink-4);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease;
}
.fch-plan-tab:hover { border-color: var(--fch-rojo); color: var(--fch-rojo); }
.fch-plan-tab[aria-pressed="true"] { background: var(--fch-rojo); border-color: var(--fch-rojo); color: #fff; }

/* ── Stats de portada ───────────────────────────────────────────────────── */
.fch-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.fch-stat {
  padding: 2px 0 2px 20px;
  border-left: 1px solid rgba(0,0,0,.1);
  min-width: 0;
}
.fch-stat:first-child { padding-left: 0; border-left: 0; }
.fch-stat-label {
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--fch-gris-3);
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fch-stat-valor {
  font-family: var(--fch-cifras);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fch-ink-2);
  letter-spacing: -.5px;
  text-wrap: pretty;
}
.fch-stat-valor.tono-verde { color: var(--fch-verde); }
.fch-stat-valor.tono-oro   { color: var(--fch-oro-fuerte); }
.fch-stat-valor.tono-rojo  { color: var(--fch-rojo-alerta); }
.fch-stat-valor.tono-gris  { color: var(--fch-gris-2); }
.fch-stat-sub {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fch-gris-3);
  margin-top: 4px;
}
.fch-info {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fch-gris-3);
  font-size: 12px;
  padding: 0;
}
.fch-info:hover { color: var(--fch-rojo); }
.fch-tooltip {
  display: none;
  position: absolute;
  z-index: 50;
  width: 240px;
  background: var(--fch-ink);
  color: #f4f4f4;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: var(--fch-sombra);
}
.fch-info:focus + .fch-tooltip,
.fch-info:hover + .fch-tooltip { display: block; }

/* Etiquetas / tags */
.fch-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fch-muted);
  border: 1px solid var(--fch-borde);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: #5a544e;
}

/* ── Bandas de sección ──────────────────────────────────────────────────── */
/* Cada sección ocupa el ancho completo con su color. Sin bordes ni recuadros
   dentro: la jerarquía la dan el color de la banda, la tipografía y el aire. */
.fch-section { padding: 44px 0 48px; }
.fch-tono--blanco { background: #fff; }
.fch-tono--crema  { background: #fbf7f0; }
.fch-tono--arena  { background: #f7f4ee; }
.fch-tono--oro    { background: #fdf7e6; }
.fch-tono--verde  { background: #f2f7f3; }
.fch-tono--gris   { background: #f4f2ed; }

/* Hero: banda de oferta. Amarillo difuminado con dos velos radiales cálidos
   para que no se lea como un bloque plano. */
.fch-tono--oferta {
  background:
    radial-gradient(120% 150% at 12% 0%, #fbf1d8 0%, rgba(253,248,236,0) 62%),
    radial-gradient(90% 120% at 92% 10%, #fdf6e6 0%, rgba(255,253,249,0) 58%),
    linear-gradient(180deg, #fefaf0 0%, #fffdfa 100%);
  border-top: 0;
}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.fch-section { scroll-margin-top: 70px; }
.fch-section h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--fch-ink);
}
.fch-section-lead {
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--fch-gris-2);
  max-width: 70ch;
}
/* El recuadro que envolvía cada bloque ya no existe: la sección entera es la
   banda de color y el contenido se separa con aire y tipografía. Las clases se
   conservan vacías para no tocar el generador. */
.fch-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.fch-card--pad, .fch-card--pad-lg { padding: 0; }

/* Columnas */
.fch-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.fch-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Nuestra opinión ────────────────────────────────────────────────────── */
.fch-borrador {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--fch-oro);
  font-size: 12.5px;
  color: var(--fch-amber-ink);
  font-weight: 600;
  margin-bottom: 18px;
  min-height: 22px;
}
.fch-opinion p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; color: var(--fch-ink-3); }
/* El veredicto es lo primero que se lee: una frase, más grande y en tinta plena. */
.fch-opinion .fch-opinion-veredicto { font-size: 19px; line-height: 1.5; font-weight: 700; color: var(--fch-ink); margin-bottom: 16px; }
/* Firma del análisis: distingue el texto humano del generado. El generado se
   dice como tal en vez de fingir una autoría que nadie escribió. */
.fch-opinion-firma { margin: 0 !important; font-size: 12.5px !important; color: #8a837c !important; }
.fch-opinion-firma--auto { font-style: italic; color: var(--fch-amber-ink) !important; }

/* ── Pros y contras ─────────────────────────────────────────────────────── */
/* Hueco de contenido: se ve, se puede encontrar (`[data-placeholder]`) y no se
   confunde con un dato. El texto lo reemplaza el autor. */
.fch-ph span { color: #9a938b; font-style: italic; }
.fch-proscon li.fch-ph i { color: #c9c3ba; }
.fch-faq-a[data-placeholder] { color: #9a938b; font-style: italic; }

.fch-proscon h3 {
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.fch-proscon.a-favor h3 { color: var(--fch-verde); }
.fch-proscon.en-contra h3 { color: var(--fch-rojo-alerta); }
.fch-proscon ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fch-proscon li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--fch-ink-3); }
.fch-proscon li i { font-size: 14px; margin-top: 3px; flex: none; }
.fch-proscon.a-favor li i { color: var(--fch-verde); }
.fch-proscon.en-contra li i { color: var(--fch-rojo-alerta); }

/* ── Recompensas en tiles (estilo NerdWallet: blancas, sin rojos) ─────────── */
.fch-reccats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fch-reccat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 26px 2px 22px;
  border-left: 1px solid rgba(0,0,0,.12);
}
.fch-reccat:first-child { border-left: 0; padding-left: 0; }
/* El destacado se marca con color y un subrayado, no con una caja. */
.fch-reccat--best { background: transparent; box-shadow: none; }
.fch-reccat-nombre { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; color: var(--fch-gris-2); }
.fch-reccat-pct { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 36px; line-height: 1.02; font-weight: 800; letter-spacing: -.5px; color: var(--fch-ink); }
.fch-reccat-cond { font-size: 13.5px; line-height: 1.55; color: var(--fch-ink-4); text-wrap: pretty; }
.fch-reccat-meta { font-size: 11.5px; line-height: 1.45; color: var(--fch-gris-3); padding-top: 10px; border-top: 1px solid var(--fch-borde-suave); }
/* El destacado se marca con color, no con fondo: la banda ya pone el color. */
.fch-reccat--best .fch-reccat-nombre { color: var(--fch-verde); }
.fch-reccat--best .fch-reccat-pct { color: var(--fch-verde); }

/* El máximo del programa va ANTES de las categorías: con un tope compartido,
   el porcentaje de cada una no se entiende sin él. */
.fch-tope-resumen { margin: 0 0 22px; padding: 12px 16px; border-left: 3px solid var(--fch-verde); background: rgba(255,255,255,.55); font-size: 15px; line-height: 1.55; color: var(--fch-ink-4); }
.fch-tope-resumen i { color: var(--fch-verde); margin-right: 9px; }
.fch-reccat-gasto { display: block; margin-top: 3px; color: var(--fch-ink-4); }
.fch-nota-info { margin: 14px 0 0; font-size: 13px; color: var(--fch-gris-2); line-height: 1.6; }
.fch-nota-info i { color: var(--fch-rojo); margin-right: 8px; }

.fch-norec { display: flex; gap: 16px; align-items: flex-start; }
.fch-norec > i { color: var(--fch-oro-fuerte); font-size: 20px; margin-top: 2px; }
.fch-norec-titulo { font-size: 16px; font-weight: 700; color: var(--fch-ink-2); margin-bottom: 6px; }
.fch-norec-texto { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fch-ink-4); max-width: 70ch; }

/* ── Costos ─────────────────────────────────────────────────────────────── */
.fch-costos { overflow: hidden; }
.fch-costo {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid rgba(0,0,0,.07);
  align-items: baseline;
}
.fch-costo:first-child { border-top: 0; }

/* Comisiones plegadas. `<details>` nativo: sin JavaScript, con teclado y con
   lector de pantalla funcionando de fábrica. */
.fch-costos-mas { border-top: 1px solid rgba(0,0,0,.07); }
.fch-costos-mas > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 0; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 650; color: var(--fch-rojo);
}
.fch-costos-mas > summary::-webkit-details-marker { display: none; }
.fch-costos-mas > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s ease;
}
.fch-costos-mas[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.fch-costos-mas > summary:hover { text-decoration: underline; }
.fch-costos-mas > summary:focus-visible { outline: 2px solid var(--fch-rojo); outline-offset: 3px; border-radius: 4px; }
.fch-costos-mas .fch-costo:first-child { border-top: 0; }
.fch-costo:first-child { border-top: none; }
.fch-costo-k { font-size: 13px; color: #6b655e; }
.fch-costo-v { font-size: 15px; font-weight: 600; color: var(--fch-ink-2); line-height: 1.5; }
.fch-costo-nota { margin: 16px 0 6px; font-size: 12.5px; color: #8a837c; line-height: 1.65; }

/* ── Requisitos ─────────────────────────────────────────────────────────── */
.fch-req h3 { font-size: 12px; letter-spacing: .9px; text-transform: uppercase; color: var(--fch-rojo); font-weight: 700; margin: 0 0 14px; }
.fch-req-campos { display: flex; flex-direction: column; gap: 13px; }
.fch-req-campo-k { font-size: 12.5px; color: #8a837c; margin-bottom: 2px; }
.fch-req-campo-v { font-size: 14.5px; font-weight: 650; color: var(--fch-ink-2); line-height: 1.45; }
.fch-req ul { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.fch-req ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--fch-ink-3); }
.fch-req ul li i { color: var(--fch-rojo); font-size: 13px; margin-top: 3px; flex: none; }
.fch-req-nota { margin: 0; padding-top: 14px; border-top: 1px solid #f0eeea; font-size: 13px; line-height: 1.6; color: var(--fch-gris-2); }

/* ── Meses sin intereses ────────────────────────────────────────────────── */
.fch-msi-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.fch-msi-head i { font-size: 17px; }
.fch-msi-head .ok { color: var(--fch-verde); }
.fch-msi-head .no { color: var(--fch-rojo-alerta); }
.fch-msi-titulo { font-size: 17px; font-weight: 700; color: var(--fch-ink-2); }
.fch-msi-detalle { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--fch-ink-4); max-width: 75ch; }
.fch-comercios-label { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--fch-gris-4); font-weight: 700; margin-bottom: 10px; }
.fch-comercios { display: flex; gap: 8px; flex-wrap: wrap; }
.fch-comercio { display: inline-flex; align-items: center; font-size: 13px; color: var(--fch-ink-4); }
.fch-comercio + .fch-comercio::before { content: "·"; margin: 0 8px; color: #c4bdb3; }

/* ── Beneficios y detalles ──────────────────────────────────────────────── */
.fch-detalles h3 { font-size: 12px; letter-spacing: .9px; text-transform: uppercase; color: var(--fch-rojo); font-weight: 700; margin: 0 0 14px; }
.fch-beneficios { display: flex; flex-direction: column; gap: 14px; }
.fch-beneficio-t { font-size: 14.5px; font-weight: 700; color: var(--fch-ink-2); line-height: 1.3; }
.fch-beneficio-d { font-size: 13.5px; line-height: 1.6; color: var(--fch-ink-4); margin-top: 2px; }
.fch-subbloque { margin-top: 20px; }
.fch-subbloque + .fch-subbloque { border-top: 1px solid var(--fch-borde-suave); padding-top: 20px; }
.fch-datos { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.fch-dato { display: flex; gap: 12px; align-items: baseline; }
.fch-dato dt { font-size: 12.5px; color: #8a837c; min-width: 120px; }
.fch-dato dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--fch-ink-2); }
.fch-vacio { margin: 0; font-size: 13px; color: var(--fch-gris-2); line-height: 1.5; }

/* ── Calculadora ────────────────────────────────────────────────────────── */
.fch-calc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
/* Encabezado de la calculadora: título + botón para vaciar los campos. */
.fch-calc-acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.fch-calc-acciones-titulo { font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #9a938b; }
.fch-calc-limpiar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--fch-ink-4); background: transparent;
  border: 1px solid #ddd6cb; border-radius: 999px; cursor: pointer;
}
.fch-calc-limpiar:hover { border-color: var(--fch-rojo); color: var(--fch-rojo); }
.fch-calc-limpiar i { font-size: 11px; }

.fch-calc-rows { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fch-calc-row > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.fch-calc-row label { font-size: 13.5px; font-weight: 650; color: var(--fch-ink-3); }
.fch-calc-row .hint { font-size: 12.5px; color: #8a837c; }
/* Campo de dinero: miles con coma y hasta 2 decimales, igual que
   js/calculadoras.js. Antes era una barra deslizadora de paso 500, que no
   permitía escribir un monto exacto. */
.fch-calc-campo { position: relative; display: flex; align-items: center; }
.fch-calc-prefijo { position: absolute; left: 13px; font-size: 14px; color: #9a938b; pointer-events: none; }
.fch-calc-campo input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 28px;
  font-family: var(--fch-cifras);
  font-size: 16px;
  font-weight: 700;
  color: var(--fch-ink-2);
  background: #fff;
  border: 1px solid #ddd6cb;
  border-radius: 8px;
}
.fch-calc-campo input:focus { outline: none; border-color: var(--fch-rojo); box-shadow: 0 0 0 3px rgba(179,0,0,.08); }
.fch-calc-total { border-top: 1px solid #f0eeea; padding-top: 14px; font-size: 13px; color: var(--fch-gris-2); }
.fch-calc-total strong { color: var(--fch-ink-2); }

.fch-calc-result { border-top: 2px solid var(--fch-verde); padding: 22px 0 0; }

/* Desglose mensual / anual: la comisión de la tarjeta se cobra por mes, así que
   el detalle mensual es el que explica de dónde sale el neto. */
.fch-calc-desglose { width: 100%; margin: 20px 0 0; border-collapse: collapse; font-size: 13.5px; }
.fch-calc-desglose caption { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #9a938b; padding-bottom: 9px; }
.fch-calc-desglose th, .fch-calc-desglose td { padding: 8px 0; border-bottom: 1px solid #f0eeea; }
.fch-calc-desglose thead th { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #9a938b; border-bottom: 1px solid #e6e2dc; }
.fch-calc-desglose th[scope="row"] { font-weight: 500; color: var(--fch-ink-4); text-align: left; }
.fch-calc-desglose thead th:not(:first-child), .fch-calc-desglose td { text-align: right; font-variant-numeric: tabular-nums; }
.fch-calc-desglose td { color: var(--fch-ink-2); font-weight: 600; }
.fch-calc-desglose td.green { color: var(--fch-verde); }
.fch-calc-desglose-total th, .fch-calc-desglose-total td { border-bottom: 0; padding-top: 12px; font-weight: 700; }
.fch-calc-desglose-total th[scope="row"] { color: var(--fch-ink-2); font-weight: 700; }
.fch-calc-desglose-total td { color: var(--fch-verde); }

/* Condición de exención: verde cuando el gasto simulado ya la cumple, ámbar
   cuando no. Es la diferencia entre pagar $0 y $2,028 al año. */
.fch-calc-exencion { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fch-amber-ink); }
.fch-calc-exencion.cumple { color: var(--fch-verde); }
.fch-calc-exencion:empty { display: none; }
.fch-calc-result-label { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--fch-gris-4); font-weight: 700; margin-bottom: 8px; }
.fch-calc-net { font-family: var(--fch-cifras); font-size: 38px; line-height: 1.05; font-weight: 700; margin-bottom: 6px; }
.fch-calc-net.positivo { color: var(--fch-verde); }
.fch-calc-net.negativo { color: var(--fch-rojo-alerta); }
.fch-calc-net.neutro { color: var(--fch-ink-4); }
.fch-calc-sub { font-size: 13px; color: var(--fch-gris-2); margin-bottom: 18px; }
.fch-calc-kpi { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid #eee; padding-top: 16px; }
.fch-calc-kpi > div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--fch-ink-4); }
.fch-calc-kpi .green { color: var(--fch-verde); }
.fch-calc-kpi .red { color: var(--fch-rojo-alerta); }

/* El tope del programa cierra el resultado: es lo que evita que la cifra se lea
   como ilimitada. `aviso` = el emisor no lo publica (no es lo mismo que no
   tener tope). */
.fch-calc-tope { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--fch-gris-2); }
.fch-calc-tope.topado { color: var(--fch-ink-4); font-weight: 600; }
.fch-calc-tope.aviso { color: #8a6d1f; }

/* ── Cierre: segunda llamada a la acción ────────────────────────────────── */
.fch-cta-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 28px 0 6px;
}
.fch-cta-final-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fch-oro-ink); margin-bottom: 6px; }
.fch-cta-final-valor { font-family: var(--fch-cifras); font-size: 40px; line-height: 1; font-weight: 700; color: var(--fch-rojo); letter-spacing: -1px; margin-bottom: 8px; }
.fch-cta-final-detalle { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fch-ink-4); max-width: 52ch; }
.fch-cta-final-accion { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }

/* ── Promociones del banco ──────────────────────────────────────────────── */
/* Tres promociones a la vista, con el valor grande: es un gancho, no un
   catálogo. El resto se pliega y el enlace lleva al hub de promociones. */
.fch-promos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 300px));
  justify-content: center;
  gap: 28px;
}
.fch-promo { padding: 2px 0 2px 22px; border-left: 1px solid rgba(0,0,0,.12); }
.fch-promo:first-child { border-left: 0; padding-left: 0; }
.fch-promo-comercio { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; color: var(--fch-ink-4); margin-bottom: 6px; }
.fch-promo-valor { font-family: var(--fch-cifras); font-size: 30px; line-height: 1.05; font-weight: 700; color: var(--fch-rojo); letter-spacing: -.5px; margin-bottom: 5px; }
.fch-promo-tipo { font-size: 12.5px; color: #8a837c; }

.fch-promos-mas { margin-top: 26px; border-top: 1px solid rgba(0,0,0,.07); }
.fch-promos-mas > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 0; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 650; color: var(--fch-rojo);
}
.fch-promos-mas > summary::-webkit-details-marker { display: none; }
.fch-promos-mas > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s ease;
}
.fch-promos-mas[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.fch-promos-mas > summary:hover { text-decoration: underline; }
.fch-promos-mas > summary:focus-visible { outline: 2px solid var(--fch-rojo); outline-offset: 3px; border-radius: 4px; }
.fch-promos-mas .fch-promos { margin-top: 6px; }

/* El aviso va pegado a las promociones, no al pie: es la condición para
   creerles. Media de las promociones que nombran una tarjeta la nombran para
   excluirla. */
.fch-promos-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 24px 0 0; padding: 13px 16px;
  background: #fdf7e6; border-left: 3px solid var(--fch-oro-fuerte);
  border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.55; color: var(--fch-amber-ink);
}
.fch-promos-aviso i { margin-top: 3px; flex: none; }

.fch-promos-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14px; font-weight: 650; }
.fch-promos-link i { font-size: 12px; transition: transform .2s ease; }
.fch-promos-link:hover i { transform: translateX(3px); }

/* ── Alternativas ───────────────────────────────────────────────────────── */
.fch-alts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 300px));
  justify-content: center;
  gap: 32px;
}
.fch-alt { display: flex; flex-direction: column; gap: 10px; }
.fch-alt-img {
  display: block;
  width: 100%;
  aspect-ratio: 1.586;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 16px rgba(60, 42, 10, .16));
}
.fch-alt-emisor { font-size: 12px; color: #8a837c; margin-bottom: 3px; }
.fch-alt-nombre { font-size: 15.5px; font-weight: 700; color: var(--fch-ink-2); line-height: 1.3; }
.fch-alt-datos { display: flex; gap: 16px; font-size: 12.5px; color: var(--fch-ink-4); }
.fch-alt-datos .c-k { color: #8a837c; }
.fch-alt-datos .c-v { display: block; color: var(--fch-ink-2); }
.fch-alt-datos .c-v.verde { color: var(--fch-verde); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.fch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s ease;
  white-space: nowrap;
}
.fch-btn:hover { text-decoration: none; }
.fch-btn--gold { background: var(--fch-oro); border-color: var(--fch-oro); color: #3a2d00; }
.fch-btn--gold:hover { background: #c39c2c; border-color: #c39c2c; color: #3a2d00; }
.fch-btn--outline { background: var(--fch-card); border-color: #ddd; color: var(--fch-ink-3); }
.fch-btn--outline:hover { border-color: var(--fch-rojo); color: var(--fch-rojo); }
.fch-btn--primary { background: var(--fch-rojo); border-color: var(--fch-rojo); color: #fff; }
.fch-btn--primary:hover { background: var(--fch-rojo-oscuro); border-color: var(--fch-rojo-oscuro); color: #fff; }
.fch-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; }
.fch-btn--sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
.fch-btn--full { width: 100%; }
.fch-volver { display: flex; align-items: center; gap: 9px; padding-top: 40px; padding-bottom: 8px; font-size: 13px; font-weight: 600; }
/* Dentro de la banda de oferta no lleva el margen del cierre de página. */
.fch-volver--banda { padding-top: 30px; padding-left: 0; padding-right: 0; max-width: none; }

/* ── Panel de oferta (dos columnas, arriba) ─────────────────────────────── */
/* El patrón de NerdWallet: gancho y botón a la izquierda, tarjeta a la derecha.
   Es el único bloque que compite por el primer scroll. */
.fch-oferta {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin: 6px 0 26px;
}
.fch-oferta-gancho { min-width: 0; }
.fch-oferta-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fch-oro-ink); margin-bottom: 6px; }
.fch-oferta-valor { font-family: Georgia, 'Times New Roman', serif; font-size: 46px; line-height: 1; font-weight: 700; color: var(--fch-rojo); letter-spacing: -1px; margin-bottom: 8px; }
.fch-oferta-detalle { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--fch-ink-4); max-width: 52ch; }

/* El descuento de bienvenida cuando NO es el gancho: una línea, debajo. */
.fch-oferta-extra { margin: -8px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--fch-ink-4); font-weight: 600; }
.fch-oferta-extra .fa-gift { color: var(--fch-rojo); margin-right: 7px; }
/* Signo de información + burbuja (mismo patrón que .tc-info del comparador).
   `:focus` y no `:focus-visible`: en táctil tocar el signo tiene que abrirla. */
.fch-info-wrap { position: relative; display: inline-flex; vertical-align: baseline; }
.fch-info { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin-left: 2px; border: 0; background: none; color: #a39b91; cursor: help; font-size: 12.5px; line-height: 1; border-radius: 50%; }
.fch-info:hover, .fch-info:focus { color: var(--fch-rojo); outline: none; }
.fch-info:focus-visible { box-shadow: 0 0 0 2px var(--fch-oro); }
.fch-tooltip {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 50;
  width: max-content; max-width: min(320px, 80vw); padding: 10px 12px; border-radius: 8px;
  background: var(--fch-ink); color: #f5f5f2; font-size: 12.5px; font-weight: 400; line-height: 1.5; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); visibility: hidden; opacity: 0; pointer-events: none;
}
.fch-tooltip::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--fch-ink); }
.fch-info-wrap:hover .fch-tooltip, .fch-info:focus + .fch-tooltip { visibility: visible; opacity: 1; }
@media (max-width: 640px) {
  /* En móvil la burbuja se ancla a la derecha para no salirse de la pantalla. */
  .fch-tooltip { left: auto; right: -8px; transform: none; }
  .fch-tooltip::after { left: auto; right: 12px; transform: none; }
}
.fch-oferta-cta { display: inline-flex; align-items: center; gap: 9px; }
.fch-oferta-cta-nota { display: block; margin-top: 7px; font-size: 12px; color: #8a837c; }

/* La tarjeta va sola, sin contenedor: medidas fijas y proporción de tarjeta
   real (85.6 × 53.98 mm = 1.586). */
.fch-oferta-media { position: relative; }
.fch-oferta-img {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1.586;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(60, 42, 10, .22));
}

/* Veredicto editorial, pegado al panel: es el «expert take» y aquí es donde el
   lector decide si sigue. */

/* Documentos oficiales dentro de «Fuentes»: antes vivían en el rail. */
.fch-docs { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #f0eeea; }
.fch-docs-titulo { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: #9a938b; margin-bottom: 11px; }
.fch-docs-lista { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.fch-docs-lista a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; text-decoration: none; }
.fch-docs-lista a:hover { text-decoration: underline; }
.fch-fuentes-pie .check { color: var(--fch-verde); margin-right: 6px; }


/* ── FAQ ────────────────────────────────────────────────────────────────── */
.fch-faq { overflow: hidden; }
.fch-faq-item { border-top: 1px solid #f0eeea; }
.fch-faq-item:first-child { border-top: none; }
.fch-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--fch-ink-2);
  transition: background .2s ease;
}
.fch-faq-q:hover { background: #fbfaf8; }
.fch-faq-q i { font-size: 12px; color: var(--fch-rojo); flex: none; transition: transform .25s ease; }
.fch-faq-item[data-open="true"] .fch-faq-q i { transform: rotate(180deg); }
.fch-faq-a { display: none; padding: 0 20px 20px; font-size: 14.5px; line-height: 1.65; color: var(--fch-ink-4); max-width: 78ch; }
.fch-faq-item[data-open="true"] .fch-faq-a { display: block; }

/* ── Fuentes ────────────────────────────────────────────────────────────── */
.fch-fuentes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.fch-fuentes li { display: flex; gap: 12px; align-items: flex-start; }
.fch-fuentes li i { color: var(--fch-rojo); font-size: 12px; margin-top: 5px; flex: none; }
.fch-fuentes a { font-size: 14.5px; font-weight: 650; }
.fch-fuentes .meta { font-size: 12.5px; color: #8a837c; margin-top: 2px; }
.fch-fuentes-pie { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #f0eeea; font-size: 12.5px; line-height: 1.65; color: #8a837c; }


/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1079px) {
  .fch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fch-calc { grid-template-columns: 1fr; }
  .fch-alts { grid-template-columns: repeat(auto-fit, minmax(0, 260px)); gap: 26px; }
  /* La oferta se apila: el gancho con el botón arriba —que es lo que
     convierte— y la tarjeta debajo. */
  .fch-oferta { grid-template-columns: 1fr; gap: 26px; }
  .fch-oferta-media { order: 2; }
  .fch-oferta-img { max-width: 300px; margin: 0 auto; }
  .fch-oferta-valor { font-size: 38px; }
}
@media (max-width: 760px) {
  .fch-titulo { font-size: 28px; }
  .fch-stats { grid-template-columns: 1fr; }
  .fch-cols, .fch-cols--3, .fch-alts { grid-template-columns: 1fr; }
  .fch-costo { grid-template-columns: 1fr; gap: 4px; }
  .fch-costo-k { font-size: 12.5px; }
  .fch-oferta-valor { font-size: 32px; }
  .fch-oferta-img { max-width: 250px; }
  .fch-section { padding: 34px 0 38px; }
  .fch-hero { padding: 26px 0 34px; }
      .fch-docs-lista a { font-size: 12.5px; }
}