/* Páginas de entidad y de tarjeta de /tarjetas-de-credito/ (las arma la
   función credit-card-pages). Se apoya en el sistema visual del cascarón de
   netlify/lib/paginas/plantilla.mjs: mismas variables, tablas y tarjetas. */

.tarjeta-arte { display:block; width:100%; height:auto; }
/* Tarjeta de pie (Black e Infinite de BBVA): el mismo espacio apaisado que las
   demás, con la tarjeta centrada y sin deformar. */
.tarjeta-arte--vertical { aspect-ratio:856 / 540; object-fit:contain; }

/* ---- Cabecera de la tarjeta ---- */
.tc-hero { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:40px; align-items:center; margin:8px 0 0; }
.tc-hero h1 { font-size:36px; }
.tc-arte { margin:0; }
.tc-arte .tarjeta-arte { max-width:440px; margin:0 auto; filter:drop-shadow(0 18px 28px rgba(20,20,43,.22)); }
/* En la cabecera, la tarjeta de pie ocupa su propio alto en vez de encogerse
   dentro del espacio apaisado. */
.tc-arte .tarjeta-arte--vertical { aspect-ratio:auto; max-width:240px; }
.tc-arte figcaption { text-align:center; font-size:12.5px; color:var(--tenue); margin-top:14px; }

.tc-datos { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 0; }
.tc-datos div { background:var(--blanco); border:1px solid var(--linea); border-radius:12px; padding:14px 16px; box-shadow:var(--sombra); }
.tc-datos dt { font-size:12.5px; color:var(--tenue); font-weight:600; margin-bottom:4px; }
.tc-datos dd { margin:0; font-size:22px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tc-datos dd small { font-size:13px; font-weight:600; color:var(--gris); letter-spacing:0; }
.tc-datos dd span { display:block; font-size:12.5px; font-weight:500; color:var(--gris); letter-spacing:0; margin-top:3px; }

.tc-cta { margin:22px 0 0; }
.tc-cta-nota { font-size:12.5px; color:var(--tenue); margin:10px 0 0; }
.tc-frescura { font-size:12.5px; color:var(--tenue); margin:14px 0 0; }
.tc-piloto { margin:22px 0 0; background:var(--oro-of); color:#5c4a00; border-radius:12px; padding:14px 16px; font-size:14.5px; }
.tc-piloto a { color:#5c4a00; }
/* Tasas del mes anterior (una entidad que todavía no publica las del mes). */
.tc-aviso { margin:0 0 14px; background:var(--oro-of); color:#5c4a00; border-radius:12px; padding:12px 16px; font-size:14px; }

/* ---- El compromiso de ahorrar.com.co ---- */
.tc-promesa { background:#f7f6fe; border:1px solid #e6e2fb; border-radius:var(--radio); padding:18px 22px; margin:36px 0 0; font-size:14.5px; color:var(--gris); }
.tc-promesa p { margin:0; }
.tc-promesa-titulo { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--tinta) !important; font-size:15.5px; margin-bottom:8px !important; }
.tc-promesa-titulo::before { content:'✓'; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--acento); color:#fff; font-size:13px; font-weight:800; }
.tc-promesa details { margin-top:10px; }
.tc-promesa summary { cursor:pointer; color:var(--acento); font-weight:600; font-size:14px; }
.tc-promesa ul { margin:10px 0 0; padding-left:20px; display:grid; gap:6px; }

/* ---- Lo que debes saber ---- */
.tc-pc { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:4px 0 0; }
.tc-pc--una { grid-template-columns:1fr; }
.tc-pc section { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:20px 22px; }
.tc-pc h3 { margin:0 0 12px; font-size:16.5px; }
.tc-lista { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.tc-lista li { position:relative; padding-left:30px; font-size:14.5px; line-height:1.55; color:var(--gris); }
.tc-lista strong { color:var(--tinta); }
.tc-lista li::before { position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; }
.tc-lista--pro li::before { content:'✓'; background:#e3f5ea; color:#1d7a45; }
.tc-lista--contra li::before { content:'!'; background:var(--oro-of); color:var(--oro); }

/* ---- Rejilla de tarjetas ---- */
.tc-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin:4px 0 0; }
.tc-grid--compacta { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; }
.tc-tile { display:flex; flex-direction:column; gap:6px; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:16px; text-decoration:none; color:var(--tinta); }
.tc-tile:hover { border-color:var(--acento); color:var(--tinta); }
.tc-tile .tarjeta-arte { margin:0 0 8px; filter:drop-shadow(0 8px 12px rgba(20,20,43,.16)); }
.tc-tile-nombre { font-weight:650; font-size:15px; }
.tc-tile-dato { font-size:13px; color:var(--gris); }
.tc-tile-dato strong { color:var(--tinta); }
.tc-sellos { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.tc-sello { font-size:11.5px; font-weight:650; padding:4px 9px; border-radius:999px; background:var(--acento-of); color:var(--acento-fuerte); }
.tc-sello--piloto { background:var(--oro-of); color:var(--oro); }
.tc-sello--promo { background:#e3f5ea; color:#1d7a45; }

/* ---- Tablas ---- */
/* estilos.css (la hoja vieja del sitio) le pone fondo gris a todo <th> y
   raya las filas pares de cualquier tabla. Aquí las filas van lisas. */
.tc-tabla tbody th, .tc-tabla tbody td { background:transparent; }
.tc-tabla th[scope="row"] { font-weight:600; }
.tc-tabla th a { color:var(--acento); text-decoration:none; }
.tc-alcance { display:block; font-size:12px; font-weight:400; color:var(--tenue); margin-top:3px; white-space:normal; }
.tc-tabla td small { color:var(--tenue); font-weight:400; }
.tc-tabla tr.tc-usura th, .tc-tabla tr.tc-usura td { background:#fbfbfe; }
.tc-comparativa { min-width:720px; }

.tc-tarifario { margin:4px 0 0; }
.tc-tarifario > summary { cursor:pointer; font-weight:650; color:var(--acento); padding:10px 0; }

.tc-beneficios { margin:4px 0 0; padding-left:20px; display:grid; gap:8px; color:var(--gris); max-width:72ch; }

@media (max-width: 760px) {
  .tc-hero { grid-template-columns:1fr; gap:24px; }
  .tc-hero h1 { font-size:28px; }
  .tc-arte .tarjeta-arte { max-width:340px; }
  .tc-arte .tarjeta-arte--vertical { max-width:180px; }
  .tc-pc { grid-template-columns:1fr; }
  .tc-datos dd { font-size:19px; }
}