/* ============================================================ TOOLarts Tarjetas — estilos de "herramientas relacionadas". Se usa junto con tarjetas.js. Toma los colores del :root de la página host (--accent, --accent-dark, --ink, --muted, --line), igual que el resto del sitio. ============================================================ */ .related-section{ max-width: 1200px; margin: 0 auto 0; padding: 0 40px 80px; } .related-header{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; } .related-header h2{ font-family: 'Manrope', system-ui, sans-serif; font-size: 18px; margin: 0; transition: color .4s ease; } .related-header a{ font-size: 13px; font-weight: 700; color: var(--accent, #477FFF); text-decoration: none; } .related-header a:hover{ color: var(--accent-dark, #2e5fd6); } .related-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .related-card{ position: relative; background: #fff; border: 1px solid var(--line, rgba(20,21,26,0.1)); border-radius: 16px; padding: 20px 18px; text-decoration: none; display: flex; flex-direction: column; gap: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .4s ease, background .4s ease; } .related-card .card-sticker, .tool-card .card-sticker{ position: absolute; top: -10px; right: -8px; font-size: 22px; line-height: 1; transform: rotate(12deg); filter: drop-shadow(0 3px 5px rgba(0,0,0,0.18)); pointer-events: none; user-select: none; } /* ============================================================ TEMA aplicado a la cuadrícula del catálogo (index.html) Mismas variables que la sección de tarjetas relacionadas, pero puestas en por tarjetas.js para que las herede cualquier .tool-card, esté en el apartado que esté. Solo entra en juego si la página tiene esa cuadrícula — en las páginas de una sola herramienta no pasa nada. ============================================================ */ .tool-card{ position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .4s ease, background .4s ease; } body.con-tema .tool-card{ border-color: var(--tema-borde, var(--line)); background: linear-gradient(180deg, #fff 0%, var(--tema-fondo, #fff) 100%); } body.con-tema .tool-card:hover{ box-shadow: 0 14px 30px color-mix(in srgb, var(--tema-borde, transparent) 45%, transparent); } body.con-tema .tool-card .tool-icon{ background: var(--tema-icono-bg, rgba(71,127,255,0.1)); color: var(--tema-icono, var(--accent, #477FFF)); } body.con-tema .tool-card .tool-go{ color: var(--tema-go, var(--accent, #477FFF)); } body.con-tema .eyebrow{ color: var(--tema-titulo, var(--accent, #477FFF)); } .related-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,21,26,0.08); border-color: rgba(71,127,255,0.35); } .related-icon{ width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft, rgba(71,127,255,0.08)); color: var(--accent, #477FFF); display: flex; align-items: center; justify-content: center; transition: color .4s ease, background .4s ease; } .related-icon svg{ width: 18px; height: 18px; } .related-title{ font-size: 14px; font-weight: 700; color: var(--ink, #14151A); } .related-desc{ font-size: 12.5px; color: var(--muted, #6B7280); line-height: 1.5; margin: -6px 0 0; } .related-go{ margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--accent, #477FFF); display: flex; align-items: center; gap: 5px; transition: color .4s ease; } .related-go svg{ width: 12px; height: 12px; transition: transform .18s ease; } .related-card:hover .related-go svg{ transform: translateX(3px); } @media (max-width: 900px){ .related-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .related-grid{ grid-template-columns: 1fr; } .related-section{ padding: 30px 20px 60px; } } /* ============================================================ TEMA (dinámico, desde Firestore) tarjetas.js carga el tema activo desde la base de datos y rellena estas variables sobre #tarjetas-relacionadas, agregando la clase .con-tema. No hay que tocar este archivo para crear temas nuevos — eso se hace desde temas-manager.html. ============================================================ */ .related-section{ --tema-borde: transparent; --tema-fondo: #fff; --tema-titulo: var(--ink, #14151A); --tema-icono: var(--accent, #477FFF); --tema-icono-bg: var(--accent-soft, rgba(71,127,255,0.08)); --tema-go: var(--accent, #477FFF); } .related-section.con-tema .related-header h2{ color: var(--tema-titulo); } .related-section.con-tema .related-card{ border-color: var(--tema-borde); background: linear-gradient(180deg, #fff 0%, var(--tema-fondo) 100%); } .related-section.con-tema .related-card:hover{ box-shadow: 0 14px 30px color-mix(in srgb, var(--tema-borde) 45%, transparent); } .related-section.con-tema .related-icon{ background: var(--tema-icono-bg); color: var(--tema-icono); } .related-section.con-tema .related-go{ color: var(--tema-go); }