/* ===================================================== style-visual-categoria.css Estilos del bloque visual de categoría (viewcatone.php) Agregar en el de viewcatone.php: ===================================================== */ /* Tabler Icons — mover al si ya lo tenés cargado en el proyecto */ @import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css'); /* Contenedor general */ .vc-wrap { font-family: inherit; } /* Badge superior */ .vc-badge { display: inline-flex; align-items: center; gap: 6px; background: #E6F1FB; color: #185FA5; font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 20px; margin-bottom: 1.25rem; } /* Bloque alerta */ .vc-alerta { display: flex; gap: 14px; align-items: flex-start; background: #E6F1FB; border: 1px solid #B5D4F4; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 2rem; } .vc-alerta i { color: #185FA5; font-size: 20px; flex-shrink: 0; margin-top: 2px; } .vc-alerta p { font-size: 18px; color: #042C53; margin: 0; line-height: 1.65; } /* Etiqueta de sección */ .vc-section-label { font-size: 16px !important; font-weight: 700 !important; color: #444 !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; margin-bottom: 1rem !important; } /* Grid de casos */ .vc-casos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 2rem; } .vc-caso-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: row; align-items: center; gap: 16px; } .vc-caso-num { font-size: 32px; font-weight: 700; color: #185FA5; line-height: 1; flex-shrink: 0; width: 36px; text-align: center; } .vc-caso-card p { font-size: 17px !important; color: #444 !important; margin: 0 !important; line-height: 1.5 !important; } /* Pasos */ .vc-pasos { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; } .vc-paso { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 1rem 0; border-bottom: 1px solid #f0f0f0; } .vc-paso:last-child { border-bottom: none; } .vc-paso-num { font-size: 32px; font-weight: 700; color: #185FA5; line-height: 1; flex-shrink: 0; width: 36px; text-align: center; } .vc-paso-content h3 { font-size: 19px !important; font-weight: 600 !important; color: #222 !important; margin: 0 0 3px !important; } .vc-paso-content p { font-size: 18px !important; color: #555 !important; margin: 0 !important; line-height: 1.6 !important; } /* Grid de herramientas */ .vc-herramientas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 2rem; } .vc-herramienta { background: #f8f8f8; border-radius: 8px; padding: 0.85rem 1rem; } .vc-herramienta strong { display: flex; align-items: center; gap: 6px; font-size: 17px; color: #222; margin-bottom: 4px; } .vc-herramienta strong i { font-size: 17px; } .vc-herramienta span { font-size: 16px; color: #666; line-height: 1.5; display: block; } /* CTA */ .vc-cta { background: #E6F1FB; border: 2px solid #B5D4F4; border-radius: 12px; padding: 1.75rem 1.5rem; text-align: center; margin-top: 0.5rem; margin-bottom: 3rem; } .vc-cta h2 { font-size: 22px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 0.5rem !important; } .vc-cta p { font-size: 18px !important; color: #555 !important; margin: 0 0 0.75rem !important; } .vc-recurso { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; color: #888; margin-top: 0.75rem; } .vc-recurso a { color: #0F6E56; text-decoration: none; } .vc-recurso a:hover { text-decoration: underline; } .vc-recurso i { font-size: 15px; } /* Sidebar — tarjetas con acento */ .vc-sidebar-cats { display: flex; flex-direction: column; gap: 8px; } .vc-sidebar-card { display: block; background: #fff; border: 1px solid #e8e8e8; border-left: 3px solid #185FA5; border-radius: 0 8px 8px 0; padding: 10px 14px; text-decoration: none !important; transition: background 0.15s, border-left-color 0.15s; } .vc-sidebar-card:hover { background: #E6F1FB; border-left-color: #0C447C; } .vc-sidebar-card--active { background: #E6F1FB; border-left-color: #0C447C; } .vc-sidebar-card-nombre { display: block; font-size: 16px; font-weight: 600; color: #222; line-height: 1.3; } .vc-sidebar-card-desc { display: block; font-size: 13px; color: #666; margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Resultado — infografía */ .vc-resultado { background: #f8f8f8; border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; } .vc-resultado-desc { font-size: 18px !important; color: #555 !important; margin: 0 0 1.25rem !important; line-height: 1.6 !important; } .vc-resultado-cards { display: flex; align-items: stretch; gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid #ddd; margin-bottom: 12px; } .vc-resultado-card { flex: 1; background: #fff; padding: 1.25rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .vc-resultado-card--destacado { background: #E6F1FB; } .vc-resultado-card i { font-size: 36px; color: #185FA5; line-height: 1; } .vc-resultado-label { font-size: 16px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; } .vc-resultado-card--destacado .vc-resultado-label { color: #0C447C; } .vc-resultado-valor { font-size: 28px; font-weight: 700; color: #185FA5; line-height: 1.1; } .vc-resultado-plus { display: flex; align-items: center; justify-content: center; padding: 0 8px; background: #f0f0f0; border-left: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 28px; font-weight: 600; color: #888; } .vc-resultado-cita { background: #fff; border-radius: 8px; border: 1px solid #e8e8e8; padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; } .vc-resultado-cita i { font-size: 18px; color: #185FA5; flex-shrink: 0; margin-top: 2px; } .vc-resultado-cita p { font-size: 18px !important; color: #555 !important; margin: 0 !important; line-height: 1.6 !important; } .cover-background .row.align-items-center { padding-top: 80px; } @media (max-width: 600px) { .vc-resultado-cards { flex-direction: column; } .vc-resultado-plus { padding: 8px 0; border-left: none; border-right: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } } /* Responsive */ @media (max-width: 600px) { .vc-casos-grid, .vc-herramientas-grid { grid-template-columns: 1fr; } .vc-cta { padding: 1.25rem 1rem; } .vc-cta h2 { font-size: 18px !important; } }