/* Humano — iconografía (Phosphor duotone). Teñido por CSS con currentColor, chips de marca y micro-animación sutil (hover + entrada en viewport). Versión original: un solo verde de marca por contexto (verde en chip claro, blanco sobre verde-oscuro); la suavidad duotone la da la capa al 20% del SVG. */ /* ── Base del icono ──────────────────────────────────────────────────────── */ .humano-icon { display: block; width: 100%; height: 100%; /* El color lo pone el contexto (currentColor en ambas capas del duotone). */ color: inherit; } /* ── Chip que contiene el icono ──────────────────────────────────────────── */ .humano-chip--icon { display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 224, 168, 0.10); box-shadow: inset 0 0 0 1px rgba(0, 224, 168, 0.28); color: var(--verde); /* chip claro → icono verde de marca (#00E0A8) */ overflow: visible; } /* Tamaños por contexto (el icono ocupa ~58% del chip). */ .humano-problema__item .humano-chip--icon, .humano-doc__feature .humano-chip--icon { width: 44px; height: 44px; border-radius: var(--radius-chip, 12px); } .humano-problema__item .humano-icon, .humano-doc__feature .humano-icon { width: 26px; height: 26px; } .humano-cultura__card .humano-chip--icon { width: 52px; height: 52px; border-radius: var(--radius-chip, 12px); } .humano-cultura__card .humano-icon { width: 30px; height: 30px; } /* ── Garantías: tarjeta verde-oscuro → icono blanco ──────────────────────── */ .humano-garantias__badge-tick.humano-chip--icon { width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); color: var(--blanco); /* sobre verde oscuro → blanco */ } /* Desactiva el "tick" pseudo-checkmark anterior (ahora hay icono). */ .humano-garantias__badge-tick.humano-chip--icon::after { content: none; } .humano-garantias__badge .humano-icon { width: 18px; height: 18px; } /* ── Soluciones (diagrama oscuro) → icono blanco ─────────────────────────── */ .humano-sol__node-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px; background: rgba(0, 240, 184, 0.14); box-shadow: inset 0 0 0 1px rgba(0, 240, 184, 0.32); color: var(--blanco); } .humano-sol__node-icon .humano-icon { width: 20px; height: 20px; } /* En el diagrama, las tarjetas a la derecha alinean el icono a la derecha. */ .humano-sol__node.is-right .humano-sol__node-icon { margin-left: auto; } /* ── Micro-animación: hover (realce leve) ────────────────────────────────── */ .humano-icon { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .humano-problema__item:hover .humano-icon, .humano-doc__feature:hover .humano-icon, .humano-cultura__card:hover .humano-icon, .humano-garantias__badge:hover .humano-icon, .humano-sol__node:hover .humano-icon { transform: translateY(-2px) scale(1.08); } /* ── Micro-animación: entrada en viewport ────────────────────────────────── */ /* Solo se activa si reveal.js marca (no-JS / reduced-motion → visibles). */ .humano-icons-anim .humano-icon { opacity: 0; transform: translateY(10px) scale(0.85); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .humano-icons-anim .humano-icon.is-inview { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .humano-icon, .humano-icons-anim .humano-icon { transition: none; opacity: 1; transform: none; } }