/* ==========================================================================
   GEOKATU - SISTEMA UNIVERSAL DE PINES (CLON EXACTO DE FASE 1)
   ========================================================================== */

/* 📍 1. CONTENEDOR MAESTRO DEL PIN */
.pin-wrapper { 
    position: relative;
    display: inline-flex;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    z-index: 10;
    filter: drop-shadow(0px 6px 8px rgba(0,0,0,0.6));
    justify-content: center;
    align-items: center;
    --rotacion: 0deg;
    --color-main: #ff6b00;
    --color-sec: #ffffff;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    overflow: visible !important; /* 🛡️ VITAL: Nunca recortar emojis ni accesorios */
    cursor: pointer;
    will-change: transform;
}

/* 🎨 2. SILUETA VECTORIAL SVG DE FONDO */
.svg-pin-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.svg-pin-fondo path,
.svg-pin-fondo polygon,
.svg-pin-fondo circle {
    fill: #0a0a0c;
    stroke: var(--color-main);
    stroke-width: 3px; 
    stroke-linejoin: round;
    transition: stroke 0.3s ease, fill 0.3s ease;
}

/* 🏷️ 3. TEXTO DE CENTRO DE MASA */
.texto-centro-masa {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,0.85);
    font-size: 10px; 
    font-weight: 900;
    text-align: center;
    line-height: 1.1;
    pointer-events: none;
}

/* 🖼️ 4. IMAGEN INTERIOR */
.img-pin-interior {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3; 
    transform: translate(-50%, -50%) scale(0.85);
    display: none;
    pointer-events: none;
}

/* ✂️ 5. RECORTES GEOMÉTRICOS EXACTOS DE LA FOTO (CLIP-PATHS FASE 1) */
.pin-wrapper[data-forma="forma-esfera"] .img-pin-interior { border-radius: 50%; }
.pin-wrapper[data-forma="forma-gota"] .img-pin-interior { clip-path: path('M 30 57 C 30 57 10 38 10 20 C 10 9 19 3 30 3 C 41 3 50 9 50 20 C 50 38 30 57 30 57 Z'); }
.pin-wrapper[data-forma="forma-triangulo"] .img-pin-interior { clip-path: polygon(10% 10%, 90% 10%, 50% 90%); }
.pin-wrapper[data-forma="forma-estrella"] .img-pin-interior { clip-path: polygon(50% 5%, 61% 35%, 95% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 5% 35%, 39% 35%); }
.pin-wrapper[data-forma="forma-hexagono"] .img-pin-interior { clip-path: polygon(50% 6.6%, 88.3% 28.3%, 88.3% 71.6%, 50% 93.3%, 11.6% 71.6%, 11.6% 28.3%); }
.pin-wrapper[data-forma="forma-corazon"] .img-pin-interior { clip-path: path('M 30 16 C 22 2 10 6 10 20 C 10 35 25 45 30 57 C 35 45 50 35 50 20 C 50 6 38 2 30 16 Z'); }
.pin-wrapper[data-forma="forma-arbol"] .img-pin-interior { clip-path: polygon(43.3% 93.3%, 56.6% 93.3%, 56.6% 70%, 83.3% 70%, 50% 10%, 16.6% 70%, 43.3% 70%); }
.pin-wrapper[data-forma="forma-hongo"] .img-pin-interior { clip-path: path('M 24 56 L 36 56 L 36 36 L 52 36 C 52 15 44 8 30 8 C 16 8 8 15 8 36 L 24 36 Z'); }
.pin-wrapper[data-forma="forma-paleta"] .img-pin-interior { clip-path: path('M 28 56 L 32 56 L 32 37 A 16 16 0 1 0 28 37 Z'); }

/* 🎯 6. CENTRO DE MASA ÓPTICO PARA TEXTO */
.pin-wrapper[data-forma="forma-gota"] .texto-centro-masa { margin-top: -8px; }
.pin-wrapper[data-forma="forma-triangulo"] .texto-centro-masa { margin-top: -15px; }
.pin-wrapper[data-forma="forma-corazon"] .texto-centro-masa { margin-top: -6px; }
.pin-wrapper[data-forma="forma-arbol"] .texto-centro-masa { margin-top: 10px; }
.pin-wrapper[data-forma="forma-hongo"] .texto-centro-masa { margin-top: -5px; }
.pin-wrapper[data-forma="forma-paleta"] .texto-centro-masa { margin-top: -12px; font-size: 8px; }

/* ❤️ 7. CORRECCIÓN DEL CORAZÓN (TAMAÑO EQUIPARABLE A LA GOTA) */
.pin-wrapper[data-forma="forma-corazon"] .svg-pin-fondo {
    transform: scale(1.15);
    transform-origin: center center;
}
.pin-wrapper[data-forma="forma-corazon"] .img-pin-interior {
    transform: translate(-50%, -50%) scale(1.0) !important;
}

/* 👑 8. EMOJIS, GORRAS Y CORONAS (SIN RECORTES) */
.pin-wrapper[data-emoji]::after {
    content: attr(data-emoji);
    position: absolute;
    font-size: 20px !important;
    z-index: 25;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
}

.pin-wrapper[data-anclaje="anclaje-arriba"]::after {
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}

.pin-wrapper[data-anclaje="anclaje-esquina"]::after {
    top: -10px;
    right: -10px;
    transform: rotate(15deg);
}

.pin-wrapper[data-forma="forma-gota"][data-anclaje="anclaje-arriba"]::after { top: -18px; }
.pin-wrapper[data-forma="forma-triangulo"][data-anclaje="anclaje-arriba"]::after { top: -18px; }
.pin-wrapper[data-forma="forma-corazon"][data-anclaje="anclaje-arriba"]::after { top: -20px; }

/* 🎬 9. ANIMACIONES FÍSICAS DE LA BÓVEDA */
@keyframes salto { 
    0%, 100% { transform: translateY(0) rotate(var(--rotacion, 0deg)); } 
    50% { transform: translateY(-12px) rotate(var(--rotacion, 0deg)); } 
}
@keyframes pulso { 
    0%, 100% { transform: scale(1); } 
    50% { transform: scale(1.10); } 
}
@keyframes giro { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

.anim-salto { animation: salto 1.4s infinite ease-in-out !important; }
.anim-pulso { animation: pulso 1.5s infinite ease-in-out !important; }
.anim-giro { animation: giro 6s infinite linear !important; }
.sin-animacion { animation: none !important; }

/* ✨ 10. CASOS ESPECIALES (ALIADOS Y REMATES) */
.pin-moneda-magica .svg-pin-fondo path,
.pin-moneda-magica .svg-pin-fondo circle {
    stroke: #FFD700 !important;
    fill: #1a1600 !important;
}

.pin-en-fuego .svg-pin-fondo path {
    stroke: #ff0044 !important;
    filter: drop-shadow(0 0 10px #ff0044);
}