/* =========================================
   CATALOGO.CSS // DIRECTORIO DE PRODUCTOS B2B
   ========================================= */
.directorio-b2b { background-color: #020b14; padding: 100px 5% 100px 5%; min-height: 100vh; }
.directorio-container { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 50px; align-items: start; }

/* SIDEBAR TÁCTICO */
.sidebar-tactico { background: rgba(5,5,5,0.8); border: 1px solid rgba(255,255,255,0.05); border-top: 3px solid var(--tech-gray); padding: 30px 25px; position: sticky; top: 100px; }
.sidebar-header h3 { font-family: var(--font-display); font-size: 14px; color: white; letter-spacing: 2px; margin-bottom: 10px; }
.linea-escaner { height: 2px; width: 100%; background: linear-gradient(90deg, var(--neon-yellow) 0%, transparent 100%); margin-bottom: 25px; }
.menu-lateral { list-style: none; padding: 0; margin: 0; }
.menu-lateral li { margin-bottom: 15px; }
.menu-lateral a { font-family: var(--font-display); font-size: 12px; color: #888; text-decoration: none; display: block; padding: 8px 10px; border-left: 2px solid transparent; transition: 0.3s; }
.menu-lateral a:hover, .menu-lateral a.activo { color: var(--neon-yellow); border-left-color: var(--neon-yellow); background: rgba(255,234,0,0.05); transform: translateX(5px); }
.sidebar-footer { margin-top: 40px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,0.1); font-size: 10px; color: #555; font-family: var(--font-text); }

/* PANEL DE PRODUCTOS */
.header-categoria { margin-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 30px; }
.titulo-categoria { font-family: var(--font-display); font-size: 38px; color: white; letter-spacing: 5px; margin: 15px 0; }
.desc-categoria { font-family: var(--font-text); font-size: 15px; color: #aaa; max-width: 800px; line-height: 1.6; }
.titulo-familia { font-family: var(--font-display); font-size: 20px; color: white; border-left: 4px solid var(--neon-yellow); padding-left: 15px; margin: 50px 0 30px 0; letter-spacing: 2px; display: flex; align-items: center; gap: 15px; }
.sub-familia-desc { font-size: 11px; color: var(--tech-gray); letter-spacing: 1px; font-weight: normal; }

/* DATA CARDS (TARJETAS) */
.grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
.tarjeta-producto { background: linear-gradient(180deg, rgba(15,15,15,0.9) 0%, rgba(5,5,5,1) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; display: flex; flex-direction: column; transition: 0.3s ease; position: relative; overflow: hidden; }
.tarjeta-producto::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--tech-gray); transition: 0.3s; }
.tarjeta-producto:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.8); border-color: rgba(255,234,0,0.3); }
.tarjeta-producto:hover::before { background: var(--neon-yellow); box-shadow: 0 0 15px var(--neon-yellow); }
.tarjeta-cabecera { padding: 25px 25px 15px 25px; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.codigo-sys { font-family: var(--font-display); font-size: 10px; color: var(--neon-yellow); letter-spacing: 2px; display: block; margin-bottom: 8px; }
.tarjeta-cabecera h3 { font-family: var(--font-display); font-size: 16px; color: white; letter-spacing: 1px; margin: 0; }
.tarjeta-cuerpo { padding: 20px 25px; flex-grow: 1; }
.producto-desc { font-family: var(--font-text); font-size: 12px; color: #999; line-height: 1.5; margin-bottom: 20px; }
.producto-datos { list-style: none; padding: 0; margin: 0; font-family: var(--font-text); font-size: 11px; }
.producto-datos li { margin-bottom: 8px; display: flex; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,0.02); padding-bottom: 6px; gap: 3px; }
.producto-datos .etiqueta-dato { color: #666; font-family: var(--font-display); font-size: 9px; letter-spacing: 1px; }
.producto-datos strong { color: white; font-weight: normal; line-height: 1.4; }
.producto-datos .dato-destacado { color: var(--neon-yellow); }
.tarjeta-accion { padding: 20px 25px; background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.05); }
.btn-cotizar-tarjeta { display: flex; justify-content: space-between; align-items: center; text-decoration: none; font-family: var(--font-display); font-size: 11px; color: var(--neon-yellow); letter-spacing: 1px; transition: 0.3s; }
.btn-cotizar-tarjeta:hover { color: white; }
.btn-cotizar-tarjeta span { font-size: 14px; transition: transform 0.3s; }
.btn-cotizar-tarjeta:hover span { transform: translateX(5px); }
.tarjeta-imagen { width: 100%; height: 180px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.05); background-color: #050a0f; position: relative; }
.tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: all 0.5s ease; }
.tarjeta-producto:hover .tarjeta-imagen img { opacity: 1; transform: scale(1.08); }

@media (max-width: 1000px) {
    .directorio-container { grid-template-columns: 1fr; }
    .sidebar-tactico { position: static; margin-bottom: 30px; }
    .titulo-familia { flex-direction: column; align-items: flex-start; gap: 5px; }
}