/* ============================================================
   BLOQUE DE PRODUCTOS (reutilizable en cualquier landing)
   Cards clickeables -> ficha de producto. Soporta card "Destacado".
   Autocontenido (colores hardcodeados) para no depender del CSS
   de cada landing. Enlazar con: <link rel="stylesheet" href="/css/productos.css">
   ============================================================ */
.productos-band { background: #f7f9fc; padding: 60px 0; }
.productos-band .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.productos-band h2 { font-size: 2.5rem; margin-bottom: 14px; color: #162839; text-align: center; }
.productos-band .lede-centrado { text-align: center; max-width: 760px; margin: 0 auto; color: #5a6b7e; font-size: 1.05rem; }
.prod-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 44px; }
.prod-card { position: relative; background: #fff; border: 1px solid #dbe3ec; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(22,40,57,.10); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.prod-card:hover { transform: translateY(-8px); box-shadow: 0 22px 46px rgba(22,40,57,.16); }
.prod-media { background: #f1f5f9; }
.prod-media img { width: 100%; height: 200px; object-fit: contain; padding: 18px; display: block; }
.prod-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.prod-body h3 { color: #162839; font-size: 1.18rem; margin: 0 0 8px; }
.prod-body p { color: #5a6b7e; font-size: .94rem; margin: 0; line-height: 1.55; }
.prod-cta { margin-top: 16px; font-weight: 600; font-size: .92rem; color: #00a2ff; display: inline-flex; align-items: center; gap: 7px; }
.prod-cta i { transition: transform .25s ease; }
.prod-card:hover .prod-cta i { transform: translateX(4px); }
/* Card destacada */
.prod-card.is-destacado { border-color: #00a2ff; box-shadow: 0 18px 42px rgba(0,162,255,.16); }
.prod-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: #00a2ff; color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 16px rgba(0,162,255,.35); }
.prod-cards-cta { text-align: center; margin-top: 40px; }
.prod-cards-cta a { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: #0077cc; text-decoration: none; font-size: 1.02rem; }
.prod-cards-cta a:hover { color: #00a2ff; }
@media (max-width: 600px) { .productos-band h2 { font-size: 1.9rem; } }