/* ═══════════════════════════════════════════════════════════════════
🎬 SPRITES 3D PIXAR — v16.2
Dos hojas de 4×4 (16 iconos cada una) renderizadas en estilo Pixar
con fondo transparente. Se recortan por `background-position` en
porcentajes, de modo que el mismo CSS sirve para cualquier tamaño.
GEOMETRÍA
─────────
Hoja de 2048×2048 con 16 celdas de 512×512 (4 columnas × 4 filas).
Con `background-size: 400% 400%` cada celda ocupa exactamente el
elemento, y la posición de la celda (col c, fila f) es:
x = c × 100/3 % y = f × 100/3 %
Es decir 0% · 33.3333% · 66.6667% · 100%.
USO
───
Todo icono decorativo debe llevar aria-hidden="true"; si sustituye a
un texto informativo, debe llevar role="img" + aria-label.
═══════════════════════════════════════════════════════════════════ */
:root {
--ic-sheet-a: url('../images/icons-sheet-a.png');
--ic-sheet-b: url('../images/icons-sheet-b.png');
--ic-sheet-c: url('../images/icons-sheet-c.png');
--ic-sheet-d: url('../images/icons-sheet-d.png');
--ic-size: 56px;
}
/* ── Base ── */
.ic {
display: inline-block;
flex: 0 0 auto;
width: var(--ic-size);
height: var(--ic-size);
background-repeat: no-repeat;
background-size: 400% 400%;
vertical-align: middle;
/* El PNG ya trae su propia iluminación; solo se añade contacto suave */
filter: drop-shadow(0 2px 3px rgba(10, 2, 24, 0.45));
/* Evita que el navegador recalcule layout por el sprite */
contain: paint;
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.32s ease;
}
/* ── Escalas ── */
.ic-xs { --ic-size: 22px; }
.ic-sm { --ic-size: 32px; }
.ic-md { --ic-size: 56px; }
.ic-lg { --ic-size: 84px; }
.ic-xl { --ic-size: 120px; }
.ic-hero { --ic-size: 160px; }
/* ── Hojas ── */
.ic-a { background-image: var(--ic-sheet-a); }
.ic-b { background-image: var(--ic-sheet-b); }
.ic-c { background-image: var(--ic-sheet-c); }
.ic-d { background-image: var(--ic-sheet-d); }
/* ── Columnas y filas (celdas 4×4) ── */
.ic-c1 { background-position-x: 0%; }
.ic-c2 { background-position-x: 33.3333%; }
.ic-c3 { background-position-x: 66.6667%; }
.ic-c4 { background-position-x: 100%; }
.ic-r1 { background-position-y: 0%; }
.ic-r2 { background-position-y: 33.3333%; }
.ic-r3 { background-position-y: 66.6667%; }
.ic-r4 { background-position-y: 100%; }
/* ═══════════════════════════════════════════
HOJA A — Líneas mayores, montes y elementos
═══════════════════════════════════════════ */
/* Fila 1 — las cuatro líneas cardinales */
.ic-line-life { background-image: var(--ic-sheet-a); background-position: 0% 0%; }
.ic-line-head { background-image: var(--ic-sheet-a); background-position: 33.3333% 0%; }
.ic-line-heart { background-image: var(--ic-sheet-a); background-position: 66.6667% 0%; }
.ic-line-fate { background-image: var(--ic-sheet-a); background-position: 100% 0%; }
/* Fila 2 — líneas secundarias mayores + montes superiores */
.ic-line-sun { background-image: var(--ic-sheet-a); background-position: 0% 33.3333%; }
.ic-line-mercury { background-image: var(--ic-sheet-a); background-position: 33.3333% 33.3333%; }
.ic-mount-jupiter{ background-image: var(--ic-sheet-a); background-position: 66.6667% 33.3333%; }
.ic-mount-saturn { background-image: var(--ic-sheet-a); background-position: 100% 33.3333%; }
/* El Sol y Mercurio comparten glifo entre línea y monte */
.ic-mount-apollo { background-image: var(--ic-sheet-a); background-position: 0% 33.3333%; }
.ic-mount-mercury_mount {
background-image: var(--ic-sheet-a); background-position: 33.3333% 33.3333%; }
/* Fila 3 — montes restantes */
.ic-mount-mars_positive {
background-image: var(--ic-sheet-a); background-position: 0% 66.6667%; }
.ic-mount-moon { background-image: var(--ic-sheet-a); background-position: 33.3333% 66.6667%; }
.ic-mount-mars_negative {
background-image: var(--ic-sheet-a); background-position: 66.6667% 66.6667%; }
.ic-mount-venus { background-image: var(--ic-sheet-a); background-position: 100% 66.6667%; }
/* Fila 4 — los cuatro elementos (forma de la mano) */
.ic-el-fire { background-image: var(--ic-sheet-a); background-position: 0% 100%; }
.ic-el-water { background-image: var(--ic-sheet-a); background-position: 33.3333% 100%; }
.ic-el-air { background-image: var(--ic-sheet-a); background-position: 66.6667% 100%; }
.ic-el-earth { background-image: var(--ic-sheet-a); background-position: 100% 100%; }
/* La Llanura de Marte comparte el glifo ígneo del elemento fuego */
.ic-mount-plain_mars {
background-image: var(--ic-sheet-a); background-position: 0% 100%; }
/* ═══════════════════════════════════════════
HOJA B — Marcas especiales y líneas menores
═══════════════════════════════════════════ */
/* Fila 1 */
.ic-mark-cross { background-image: var(--ic-sheet-b); background-position: 0% 0%; }
.ic-mark-star { background-image: var(--ic-sheet-b); background-position: 33.3333% 0%; }
.ic-mark-triangle { background-image: var(--ic-sheet-b); background-position: 66.6667% 0%; }
.ic-mark-square { background-image: var(--ic-sheet-b); background-position: 100% 0%; }
/* Fila 2 */
.ic-mark-circle { background-image: var(--ic-sheet-b); background-position: 0% 33.3333%; }
.ic-mark-island { background-image: var(--ic-sheet-b); background-position: 33.3333% 33.3333%; }
.ic-mark-dot { background-image: var(--ic-sheet-b); background-position: 66.6667% 33.3333%; }
.ic-mark-grill { background-image: var(--ic-sheet-b); background-position: 100% 33.3333%; }
/* Fila 3 */
.ic-mark-tassel { background-image: var(--ic-sheet-b); background-position: 0% 66.6667%; }
.ic-mark-chain { background-image: var(--ic-sheet-b); background-position: 33.3333% 66.6667%; }
.ic-mark-trident { background-image: var(--ic-sheet-b); background-position: 66.6667% 66.6667%; }
.ic-mark-fish { background-image: var(--ic-sheet-b); background-position: 100% 66.6667%; }
/* Fila 4 — líneas menores con glifo propio */
.ic-minor-marriage { background-image: var(--ic-sheet-b); background-position: 0% 100%; }
.ic-minor-girdle_venus { background-image: var(--ic-sheet-b); background-position: 33.3333% 100%; }
.ic-minor-travel { background-image: var(--ic-sheet-b); background-position: 66.6667% 100%; }
.ic-minor-intuition { background-image: var(--ic-sheet-b); background-position: 100% 100%; }
/* Reutilizaciones coherentes: la Cruz Mística y el Cuadrado del Maestro
son literalmente una cruz y un cuadrado; los anillos son el toro. */
.ic-minor-mystic_cross { background-image: var(--ic-sheet-b); background-position: 0% 0%; }
.ic-minor-teachers_square { background-image: var(--ic-sheet-b); background-position: 100% 0%; }
.ic-minor-ring_solomon { background-image: var(--ic-sheet-a); background-position: 66.6667% 33.3333%; }
.ic-minor-ring_saturn { background-image: var(--ic-sheet-a); background-position: 100% 33.3333%; }
.ic-minor-bracelets { background-image: var(--ic-sheet-b); background-position: 33.3333% 66.6667%; }
.ic-minor-healers_marks { background-image: var(--ic-sheet-a); background-position: 33.3333% 33.3333%; }
.ic-minor-via_lascivia { background-image: var(--ic-sheet-a); background-position: 100% 100%; }
/* Las líneas de hijos son trazos verticales que brotan de la línea de unión:
la borla (tres hebras desde un tallo) es su glifo natural, no los anillos. */
.ic-minor-children { background-image: var(--ic-sheet-b); background-position: 0% 66.6667%; }
/* ═══════════════════════════════════════════
HOJA C — Cabeceras de sección y navegación
═══════════════════════════════════════════ */
/* Fila 1 */
.ic-sec-overview { background-image: var(--ic-sheet-c); background-position: 0% 0%; }
.ic-sec-lines { background-image: var(--ic-sheet-c); background-position: 33.3333% 0%; }
.ic-sec-mounts { background-image: var(--ic-sheet-c); background-position: 66.6667% 0%; }
.ic-sec-fingers { background-image: var(--ic-sheet-c); background-position: 100% 0%; }
/* Fila 2 */
.ic-sec-marks { background-image: var(--ic-sheet-c); background-position: 0% 33.3333%; }
.ic-sec-minor { background-image: var(--ic-sheet-c); background-position: 33.3333% 33.3333%; }
.ic-sec-nails { background-image: var(--ic-sheet-c); background-position: 66.6667% 33.3333%; }
.ic-sec-comparison { background-image: var(--ic-sheet-c); background-position: 100% 33.3333%; }
/* Fila 3 */
.ic-sec-insights { background-image: var(--ic-sheet-c); background-position: 0% 66.6667%; }
.ic-sec-ai_scan { background-image: var(--ic-sheet-c); background-position: 33.3333% 66.6667%; }
.ic-nav-home { background-image: var(--ic-sheet-c); background-position: 66.6667% 66.6667%; }
.ic-nav-guide { background-image: var(--ic-sheet-c); background-position: 100% 66.6667%; }
/* Fila 4 */
.ic-nav-reading { background-image: var(--ic-sheet-c); background-position: 0% 100%; }
.ic-nav-cosmos { background-image: var(--ic-sheet-c); background-position: 33.3333% 100%; }
.ic-nav-about { background-image: var(--ic-sheet-c); background-position: 66.6667% 100%; }
.ic-nav-history { background-image: var(--ic-sheet-c); background-position: 100% 100%; }
/* La marca de la app es la palma abierta: es su identidad, y así no
repite el glifo de "Lectura" (manos ahuecadas) en la misma barra. */
.ic-nav-brand { background-image: var(--ic-sheet-c); background-position: 100% 0%; }
/* ═══════════════════════════════════════════
HOJA D — Módulos del Cosmos y pestañas de guía
═══════════════════════════════════════════ */
/* Fila 1 */
.ic-cos-astro { background-image: var(--ic-sheet-d); background-position: 0% 0%; }
.ic-cos-tarot { background-image: var(--ic-sheet-d); background-position: 33.3333% 0%; }
.ic-cos-iching { background-image: var(--ic-sheet-d); background-position: 66.6667% 0%; }
.ic-cos-runes { background-image: var(--ic-sheet-d); background-position: 100% 0%; }
/* Fila 2 */
.ic-cos-oracle { background-image: var(--ic-sheet-d); background-position: 0% 33.3333%; }
.ic-cos-synastry { background-image: var(--ic-sheet-d); background-position: 33.3333% 33.3333%; }
.ic-cos-numerology { background-image: var(--ic-sheet-d); background-position: 66.6667% 33.3333%; }
.ic-cos-aura { background-image: var(--ic-sheet-d); background-position: 100% 33.3333%; }
/* Fila 3 */
.ic-cos-sky { background-image: var(--ic-sheet-d); background-position: 0% 66.6667%; }
.ic-cos-mandala { background-image: var(--ic-sheet-d); background-position: 33.3333% 66.6667%; }
.ic-cos-codex { background-image: var(--ic-sheet-d); background-position: 66.6667% 66.6667%; }
.ic-cos-sound { background-image: var(--ic-sheet-d); background-position: 100% 66.6667%; }
/* Fila 4 — logros + pestañas de la guía */
.ic-cos-achievements { background-image: var(--ic-sheet-d); background-position: 0% 100%; }
.ic-guide-position { background-image: var(--ic-sheet-d); background-position: 33.3333% 100%; }
.ic-guide-anatomy { background-image: var(--ic-sheet-d); background-position: 66.6667% 100%; }
.ic-guide-lines { background-image: var(--ic-sheet-d); background-position: 100% 100%; }
/* La pestaña de montes reutiliza el pico de la hoja C */
.ic-guide-mounts { background-image: var(--ic-sheet-c); background-position: 66.6667% 0%; }
/* ═══════════════════════════════════════════
FAMILIA `ui` — cromo de la interfaz
Reutiliza celdas cuyo objeto ya significa lo que el control hace,
de modo que no hace falta generar más hojas.
═══════════════════════════════════════════ */
.ic-ui-dual { background-image: var(--ic-sheet-c); background-position: 0% 100%; } /* manos ahuecadas */
.ic-ui-ai { background-image: var(--ic-sheet-c); background-position: 33.3333% 33.3333%; } /* cabeza robot */
.ic-ui-traditions { background-image: var(--ic-sheet-d); background-position: 33.3333% 66.6667%; } /* mandala */
.ic-ui-lines { background-image: var(--ic-sheet-d); background-position: 100% 100%; } /* huella */
.ic-ui-trophy { background-image: var(--ic-sheet-d); background-position: 0% 100%; } /* trofeo */
.ic-ui-history { background-image: var(--ic-sheet-c); background-position: 100% 100%; } /* reloj atrás */
.ic-ui-camera { background-image: var(--ic-sheet-d); background-position: 33.3333% 100%; } /* cámara */
.ic-ui-hand-left { background-image: var(--ic-sheet-c); background-position: 100% 0%; } /* palma abierta */
.ic-ui-hand-right { background-image: var(--ic-sheet-c); background-position: 100% 0%; }
.ic-ui-magic { background-image: var(--ic-sheet-c); background-position: 33.3333% 0%; } /* regla/varita */
.ic-ui-sparkle { background-image: var(--ic-sheet-c); background-position: 0% 33.3333%; } /* destellos */
.ic-ui-star { background-image: var(--ic-sheet-c); background-position: 0% 0%; }
.ic-ui-mounts { background-image: var(--ic-sheet-c); background-position: 66.6667% 0%; }
.ic-ui-marks { background-image: var(--ic-sheet-b); background-position: 33.3333% 0%; }
.ic-ui-book { background-image: var(--ic-sheet-c); background-position: 100% 66.6667%; }
.ic-ui-advice { background-image: var(--ic-sheet-a); background-position: 0% 0%; } /* corazón-hoja: consejo vital */
.ic-ui-health { background-image: var(--ic-sheet-a); background-position: 33.3333% 33.3333%; } /* caduceo */
.ic-ui-spiritual { background-image: var(--ic-sheet-c); background-position: 0% 66.6667%; } /* bola de cristal */
/* ═══════════════════════════════════════════
FAMILIA `finger` — los cinco dedos y su regente
Cada dedo hereda el glifo de su monte planetario, que es
exactamente lo que la quiromancia le atribuye.
═══════════════════════════════════════════ */
.ic-finger-thumb { background-image: var(--ic-sheet-a); background-position: 100% 66.6667%; } /* Venus */
.ic-finger-index { background-image: var(--ic-sheet-a); background-position: 66.6667% 33.3333%; } /* Júpiter: corona */
.ic-finger-middle { background-image: var(--ic-sheet-a); background-position: 100% 33.3333%; } /* Saturno: reloj de arena */
.ic-finger-ring { background-image: var(--ic-sheet-a); background-position: 0% 33.3333%; } /* Apolo: sol */
.ic-finger-pinky { background-image: var(--ic-sheet-a); background-position: 33.3333% 33.3333%; } /* Mercurio: caduceo */
/* ═══════════════════════════════════════════
INTERACCIÓN — física de resorte estilo Pixar
═══════════════════════════════════════════ */
.ic-interactive { cursor: pointer; }
.ic-interactive:hover,
a:hover > .ic, button:hover > .ic,
.atlas-card-head:hover > .ic {
transform: translateY(-3px) scale(1.09) rotate(-2deg);
filter: drop-shadow(0 6px 10px rgba(10, 2, 24, 0.55))
drop-shadow(0 0 14px rgba(244, 221, 154, 0.45));
}
.ic-interactive:active {
transform: translateY(1px) scale(0.94, 0.9);
transition-duration: 0.09s;
}
/* Latido suave para el icono destacado de una tarjeta abierta */
.ic-breathe { animation: icBreathe 3.4s ease-in-out infinite; }
@keyframes icBreathe {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.05) translateY(-2px); }
}
/* Entrada escalonada cuando se pintan varias tarjetas de golpe */
.ic-pop {
animation: icPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
animation-delay: calc(var(--ic-i, 0) * 0.06s);
}
@keyframes icPop {
from { opacity: 0; transform: scale(0.4) translateY(10px); }
60% { opacity: 1; transform: scale(1.08) translateY(-2px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Halo de fondo opcional para separar el icono de fondos claros */
.ic-disc {
border-radius: 50%;
background-color: rgba(26, 7, 51, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 3px 10px -2px rgba(10, 2, 24, 0.5);
padding: 0;
background-clip: padding-box;
}
/* ═══════════════════════════════════════════
ACCESIBILIDAD Y CONTEXTOS ESPECIALES
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.ic, .ic-breathe, .ic-pop { animation: none !important; transition: none; }
.ic-interactive:hover,
a:hover > .ic, button:hover > .ic { transform: none; }
}
/* En modo alto contraste y colores forzados los PNG decorativos
pueden desaparecer: se oculta el sprite y reaparece el texto/FA. */
@media (forced-colors: active) {
.ic { display: none; }
}
@media (max-width: 640px) {
:root { --ic-size: 44px; }
.ic-lg { --ic-size: 64px; }
.ic-xl { --ic-size: 88px; }
.ic-hero { --ic-size: 112px; }
}
/* Impresión: los sprites oscuros no aportan sobre papel */
@media print {
.ic { display: none; }
}
/* ═══════════════════════════════════════════
ENCAJE EN LOS COMPONENTES EXISTENTES
Los huecos ya estaban dimensionados para un emoji de texto;
aquí se adaptan al sprite sin tocar su CSS original.
═══════════════════════════════════════════ */
/* Respaldo cuando una clave no tiene celda: conserva el tamaño del emoji */
.ic-fallback {
display: inline-block;
line-height: 1;
font-size: 1.5rem;
vertical-align: middle;
}
/* Tarjetas de marcas y líneas menores del panel de resultados */
.mark-emoji > .ic,
.minor-emoji > .ic { --ic-size: 46px; }
.mark-emoji, .minor-emoji { min-width: 50px; }
/* Rejilla de montes */
.mount-emoji > .ic { --ic-size: 50px; }
.mount-emoji { line-height: 1; }
/* Título de una línea mayor: el icono se alinea con el texto */
.line-reading.has-ic > h4 {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.line-reading.has-ic > h4 > .ic { --ic-size: 40px; }
/* Cápsula del elemento dominante */
.overview-element-card > .ic {
--ic-size: 34px;
margin-right: 6px;
}
.overview-element-card { display: inline-flex; align-items: center; gap: 2px; }
.reading-title > .ic { --ic-size: 30px; margin-right: 5px; }
/* Emblema de la tarjeta del Atlas: el sprite sustituye al recuadro,
así que recupera su marco para no perder la jerarquía visual. */
.atlas-card-head > .ic {
--ic-size: 52px;
padding: 6px;
box-sizing: content-box;
/* El sprite se dibuja en la caja de contenido para que el `padding`
cree de verdad el margen del marco; el color rellena hasta el borde. */
background-origin: content-box;
border-radius: 16px;
background-color: rgba(30, 12, 58, 0.72);
border: 1px solid rgba(212, 175, 55, 0.42);
box-shadow: 0 8px 22px -10px rgba(212, 175, 55, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
background-clip: padding-box;
}
/* Cabecera de sección de resultados: sustituye a .card-emoji */
.ic-sec { --ic-size: 34px; }
.result-card-header h3 {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Barra de navegación: el sprite ocupa el sitio del icono FontAwesome.
A tamaños pequeños la sombra oscura de `.ic` se lee como una mancha
detrás del objeto, así que aquí se sustituye por un halo luminoso
nítido que integra el icono con el cristal de la barra. */
.nav-link > .ic { --ic-size: 24px; margin-right: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; }
.nav-icon.ic { --ic-size: 36px; }
.nav-link > .ic,
.nav-icon.ic {
background-color: transparent;
border: 0;
border-radius: 0;
filter: drop-shadow(0 1px 2px rgba(10, 2, 24, 0.55));
opacity: 0.86;
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
filter .3s ease, opacity .3s ease;
}
/* El enlace activo o en hover enciende su icono */
.nav-link:hover > .ic,
.nav-link:focus-visible > .ic {
opacity: 1;
transform: translateY(-2px) scale(1.08);
filter: drop-shadow(0 2px 5px rgba(10, 2, 24, .5))
drop-shadow(0 0 7px rgba(167, 139, 250, .75));
}
.nav-link.active > .ic {
opacity: 1;
filter: drop-shadow(0 1px 3px rgba(10, 2, 24, .5))
drop-shadow(0 0 8px rgba(212, 175, 55, .8));
}
/* Emblema de marca: palma abierta, con respiración suave y aura dorada */
.nav-brand .nav-icon.ic {
opacity: 1;
filter: drop-shadow(0 2px 4px rgba(10, 2, 24, .5))
drop-shadow(0 0 9px rgba(212, 175, 55, .55));
animation: icBrandFloat 4.6s ease-in-out infinite;
}
.nav-brand:hover .nav-icon.ic {
transform: scale(1.1) rotate(-6deg);
filter: drop-shadow(0 3px 6px rgba(10, 2, 24, .5))
drop-shadow(0 0 13px rgba(212, 175, 55, .9));
}
@keyframes icBrandFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-2.5px) rotate(-3deg); }
}
/* Pestañas: mismo criterio, sin placa detrás */
.guide-tab > .ic,
.cosmos-tab > .ic {
background-color: transparent;
border: 0;
filter: drop-shadow(0 1px 2px rgba(10, 2, 24, 0.5));
opacity: .88;
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.guide-tab:hover > .ic,
.cosmos-tab:hover > .ic,
.guide-tab.active > .ic,
.cosmos-tab.active > .ic { opacity: 1; transform: scale(1.09); }
/* Pestañas de la guía y del cosmos */
.guide-tab > .ic,
.cosmos-tab > .ic { --ic-size: 26px; }
.guide-tab, .cosmos-tab { display: inline-flex; align-items: center; gap: 8px; }
/* En pantallas estrechas la fila de pestañas del cosmos es larguísima:
el icono se reduce para que quepan más por línea. */
@media (max-width: 640px) {
.atlas-card-head > .ic { --ic-size: 42px; padding: 5px; }
.mark-emoji > .ic, .minor-emoji > .ic { --ic-size: 38px; }
.mount-emoji > .ic { --ic-size: 42px; }
.line-reading.has-ic > h4 > .ic { --ic-size: 34px; }
.ic-sec { --ic-size: 28px; }
.guide-tab > .ic, .cosmos-tab > .ic { --ic-size: 22px; }
.nav-link > .ic { --ic-size: 21px; }
.nav-icon.ic { --ic-size: 30px; }
}
/* ═══════════════════════════════════════════
ENCAJE DEL SEGUNDO LOTE (v16.3)
Insignias del portal, estadísticas, botones de la barra,
zonas de subida y tarjetas de dedos.
═══════════════════════════════════════════ */
/* Insignias del portal: el sprite sustituye al glifo FontAwesome */
.feature-badge { display: inline-flex; align-items: center; gap: 8px; }
.feature-badge > .ic {
--ic-size: 26px;
filter: drop-shadow(0 1px 3px rgba(10, 2, 24, .5));
transition: transform .34s cubic-bezier(.34, 1.56, .64, 1);
}
.feature-badge:hover > .ic { transform: translateY(-2px) scale(1.1) rotate(-4deg); }
/* Tarjetas de estadísticas: emblema sobre el número */
.stat-card > .ic {
--ic-size: 44px;
display: block;
margin: 0 auto 6px;
filter: drop-shadow(0 3px 6px rgba(10, 2, 24, .45))
drop-shadow(0 0 9px rgba(212, 175, 55, .32));
animation: icBreathe 4.8s ease-in-out infinite;
animation-delay: calc(var(--ic-i, 0) * .5s);
}
/* Botones circulares de la barra (logros / historial): el sprite se
centra sin placa propia; la placa la aporta ya el botón. */
.nav-icon-btn > .ic,
.theme-toggle > .ic { --ic-size: 24px; filter: drop-shadow(0 1px 2px rgba(10, 2, 24, .5)); }
.nav-icon-btn:hover > .ic { transform: scale(1.12) rotate(-6deg); }
/* Menú móvil desplegable */
.mobile-link { display: flex; align-items: center; gap: 10px; }
.mobile-link > .ic { --ic-size: 26px; filter: drop-shadow(0 1px 3px rgba(10, 2, 24, .5)); }
/* Zonas de subida de foto: la mano 3D reemplaza al emoji plano */
.upload-hand-icon.ic {
--ic-size: 76px;
display: block;
margin: 0 auto;
animation: icBreathe 4.2s ease-in-out infinite;
}
.upload-zone[data-hand="left"] .upload-hand-icon.ic { transform: scaleX(-1); }
.upload-zone[data-hand="left"] .upload-hand-icon.ic { animation: none; }
.upload-camera.ic { --ic-size: 34px; display: block; margin: 8px auto 0; opacity: .9; }
/* Tarjetas de dedos: el regente planetario del dedo */
.finger-emoji > .ic { --ic-size: 46px; }
/* Emblemas en línea dentro de los bloques de lectura.
Van dentro de un párrafo, así que se alinean con la línea base del
texto en vez de con su caja, o el interlineado se rompe. */
.reading-inline.ic {
--ic-size: 20px;
margin-right: 5px;
vertical-align: -0.32em;
filter: drop-shadow(0 1px 2px rgba(10, 2, 24, .45));
}
/* Insignias de mano: el sprite debe caber en una píldora de 0.7rem */
.hand-badge > .reading-inline.ic { --ic-size: 17px; margin-right: 2px; }
/* Escudo de la cabecera de resultados: sustituye al emoji de 3rem */
.results-crest.ic {
display: block;
margin: 0 auto 10px;
filter: drop-shadow(0 6px 14px rgba(10, 2, 24, .55))
drop-shadow(0 0 18px rgba(212, 175, 55, .45));
animation: icBreathe 5s ease-in-out infinite;
}
/* Rejilla "¿Qué Analizamos?" de la portada: 9 emblemas grandes */
.analysis-icon.ic {
--ic-size: 62px;
display: block;
margin: 0 auto 10px;
filter: drop-shadow(0 4px 9px rgba(10, 2, 24, .5));
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
filter .4s ease;
}
.analysis-card:hover .analysis-icon.ic {
transform: translateY(-5px) scale(1.11) rotate(-3deg);
filter: drop-shadow(0 9px 16px rgba(10, 2, 24, .55))
drop-shadow(0 0 15px rgba(212, 175, 55, .5));
}
/* Cabeceras de las fichas de línea en la Guía */
.line-guide-emoji.ic {
--ic-size: 46px;
filter: drop-shadow(0 3px 7px rgba(10, 2, 24, .5))
drop-shadow(0 0 10px var(--line-color, rgba(212, 175, 55, .45)));
}
/* Cabeceras h3 de la guía, del aviso legal y del Cosmos */
.guide-step h3,
.legal-item h3,
.cosmos-card > h3,
.history-header h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Cabeceras de las 16 tarjetas del Cosmos: el emblema del módulo */
.cosmos-card > h3 > .ic {
--ic-size: 34px;
filter: drop-shadow(0 2px 5px rgba(10, 2, 24, .5))
drop-shadow(0 0 8px rgba(212, 175, 55, .35));
transition: transform .34s cubic-bezier(.34, 1.56, .64, 1);
}
.cosmos-card:hover > h3 > .ic { transform: scale(1.09) rotate(-4deg); }
/* Zona de subida del lector de aura */
.aura-upload-icon.ic {
--ic-size: 54px;
animation: icBreathe 4.4s ease-in-out infinite;
}
@media (max-width: 640px) {
.stat-card > .ic { --ic-size: 36px; }
.feature-badge > .ic { --ic-size: 22px; }
.upload-hand-icon.ic { --ic-size: 60px; }
.finger-emoji > .ic { --ic-size: 38px; }
.mobile-link > .ic { --ic-size: 23px; }
.analysis-icon.ic { --ic-size: 50px; }
.line-guide-emoji.ic { --ic-size: 38px; }
.results-crest.ic { --ic-size: 92px; }
.reading-inline.ic { --ic-size: 18px; }
.cosmos-card > h3 > .ic { --ic-size: 28px; }
.aura-upload-icon.ic { --ic-size: 44px; }
}
/* Movimiento reducido: se congela la respiración del emblema */
@media (prefers-reduced-motion: reduce) {
.nav-brand .nav-icon.ic,
.stat-card > .ic,
.upload-hand-icon.ic,
.results-crest.ic,
.aura-upload-icon.ic { animation: none; }
}