/* Panelito - PNG Parts Positioning (Based on example structure) */

/* Main Avatar Container */
.avatar-main {
    position: relative;
    width: 390px;
    height: 585px;
    margin: 0 auto;
    z-index: 10;
    animation: floatAvatar 3s ease-in-out infinite;
    transform: scale(0.91);
}

@keyframes floatAvatar {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

/* Common styles for all parts */
.avatar-main img {
    position: absolute;
    height: auto;
}

/* Panel Solar */
.panelito-panel {
    top: 0px;
    left: 104px;
    width: 312px;
    z-index: 6;
    animation: panelTilt 6s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes panelTilt {
    0%, 100% { transform: rotateY(3deg); }
    50% { transform: rotateY(-3deg); }
}

/* Cabeza */
/* Grupo de cabeza: contiene la imagen y los ojos para moverlos juntos */
.head-group {
    position: absolute;
    top: 104px;
    left: 169px;
    width: 182px;
    height: 150px; /* altura aproximada visible de la cabeza */
    z-index: 5;
    animation: headBob 4s ease-in-out infinite;
}

.panelito-cabeza {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
}

@keyframes headBob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* Facial features overlay aligned to head */
.facial-features {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 6;   /* encima de la imagen de cabeza dentro del grupo */
    pointer-events: none;
}

/* Place eyes relative to head */
.eye-left {
    position: absolute;
    top: 10px;
    left: 17px;
    z-index: 1;
}

.eye-right {
    position: absolute;
    top: 17px;
    left: 65px;
}

/* Place mouth centered under eyes */
#panelitoMouth {
    position: absolute;
    top: 92px;
    left: 50%;
    transform: translateX(-50%);
}

/* Cuello */
.panelito-cuello {
    top: 169px;
    left: 241px;
    width: 26px;
    z-index: 4;
}

/* Cuerpo */
.panelito-cuerpo {
    top: 208px;
    left: 91px;
    width: 390px;
    z-index: 3;
}

/* ==========================================
   BRAZO IZQUIERDO CON ARTICULACIONES
   ========================================== */

/* Grupo principal del brazo - punto de articulación del hombro */
.brazo-izq-group {
    position: absolute;
    top: 240px;      /* NO MODIFICAR - posición del hombro */
    left: 365px;     /* NO MODIFICAR - posición del hombro */
    width: 1px;
    height: 1px;
    z-index: 3;
    /* Este punto es el "hombro" desde donde cuelga todo el brazo */
}

/* Brazo superior - imagen dentro del grupo */
.panelito-brazo-izq-sup {
    position: absolute;
    top: 0;
    left: 0;
    width: 117px;
    /* La imagen se posiciona desde el punto del hombro */
}

/* Grupo del antebrazo - punto de articulación del codo */
.antebrazo-izq-group {
    position: absolute;
    top: -100px;     /* Offset desde el hombro hasta el codo */
    left: 60px;      /* Offset horizontal hasta el codo */
    width: 1px;
    height: 1px;
    /* Este punto es el "codo" que rota */
    transform-origin: 50px 105px; /* Rota desde la unión del antebrazo con el brazo (codo real) */
}

/* Antebrazo - imagen dentro del grupo del codo */
.panelito-brazo-izq-inf {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    /* La imagen se posiciona desde el punto del codo */
}

/* Grupo de la mano - punto de articulación de la muñeca */
.mano-izq-group {
    position: absolute;
    top: -60px;      /* Offset desde el codo hasta la muñeca */
    left: -35px;     /* Offset horizontal hasta la muñeca */
    width: 1px;
    height: 1px;
    /* Este punto es la "muñeca" que rota */
    transform-origin: 0px 0px; /* Rota desde el punto de la muñeca (1px) */
}

/* Mano - imagen dentro del grupo de la muñeca */
.panelito-mano-izq {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    /* La imagen se posiciona desde el punto de la muñeca */
}

/* ==========================================
   BRAZO DERECHO CON ARTICULACIONES
   ========================================== */

/* Grupo principal del brazo derecho - punto de articulación del hombro */
.brazo-der-group {
    position: absolute;
    top: 230px;      /* NO MODIFICAR - posición del hombro derecho */
    left: 65px;      /* NO MODIFICAR - posición del hombro derecho */
    width: 1px;
    height: 1px;
    z-index: 2;
    /* Este punto es el "hombro derecho" desde donde cuelga todo el brazo */
}

/* Brazo superior derecho - imagen dentro del grupo */
.panelito-brazo-der-sup {
    position: absolute;
    top: 0;
    left: 0;
    width: 104px;
    /* La imagen se posiciona desde el punto del hombro */
}

/* Grupo del antebrazo derecho - punto de articulación del codo */
.antebrazo-der-group {
    position: absolute;
    top: -30px;      /* Offset desde el hombro hasta el codo */
    left: -85px;     /* Offset horizontal hasta el codo */
    width: 1px;
    height: 1px;
    /* Este punto es el "codo derecho" que rota */
    transform-origin: 85px 70px; /* Rota desde la unión del antebrazo con el brazo (codo real) */
}

/* Antebrazo derecho - imagen dentro del grupo del codo */
.panelito-brazo-der-inf {
    position: absolute;
    top: 0;
    left: 0;
    width: 104px;
    /* La imagen se posiciona desde el punto del codo */
}

/* Grupo de la mano derecha - punto de articulación de la muñeca */
.mano-der-group {
    position: absolute;
    top: -48px;      /* Offset desde el codo hasta la muñeca */
    left: -38px;     /* Offset horizontal hasta la muñeca */
    width: 1px;
    height: 1px;
    /* Este punto es la "muñeca derecha" que rota */
    transform-origin: 0px 0px; /* Rota desde el punto de la muñeca */
}

/* Mano derecha - imagen dentro del grupo de la muñeca */
.panelito-mano-der {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    /* La imagen se posiciona desde el punto de la muñeca */
}

/* Ruedas */
.panelito-rueda-1 {
    top: 416px;
    left: 26px;
    width: 130px;
    z-index: 1;
}

.panelito-rueda-2 {
    top: 350px;
    left: 408px;
    width: 130px;
    z-index: 3;
}

.panelito-rueda-3 {
    top: 416px;
    left: 273px;
    width: 130px;
    z-index: 3;
}

.panelito-rueda-4 {
    top: 364px;
    left: 153px;
    width: 130px;
    z-index: 1;
}

/* ===== STATE ANIMATIONS ===== */

/* Listening State */
.state-listening {
    animation: floatListening 1s ease-in-out infinite;
}

.state-listening .panelito-panel {
    filter: drop-shadow(0 0 20px rgba(255, 100, 100, 0.8));
}

@keyframes floatListening {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-25px); }
}

/* Thinking State */
.state-thinking {
    animation: pulseThinking 0.8s ease-in-out infinite;
}

.state-thinking .panelito-panel {
    filter: drop-shadow(0 0 25px rgba(100, 150, 255, 0.8));
}

@keyframes pulseThinking {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Speaking State */
.state-speaking {
    animation: bounceSpeak 0.4s ease-in-out infinite;
}

.state-speaking .panelito-panel {
    filter: drop-shadow(0 0 20px rgba(100, 255, 100, 0.8));
}

@keyframes bounceSpeak {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* ===== INTERACTIVE PARTS HOVER EFFECTS ===== */

/* Partes interactivas - cursor pointer */
[data-part] {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Efecto hover - brillo suave */
[data-part]:hover {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
    transform: scale(1.05);
}

/* Efecto cuando se hace clic */
[data-part]:active {
    transform: scale(0.95);
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

/* ===== IDLE ANIMATIONS (Gestos de inactividad) ===== */

/* ===== EXTRA ANIMATIONS (baratas y efectivas) ===== */
/* 1) Flotar con tilt sutil */
.float-tilt.avatar-main,
.float-tilt {
    animation: floatTilt 3s ease-in-out infinite !important;
}

@keyframes floatTilt {
    0%, 100% { transform: translateY(0) rotateZ(0deg) scale(0.91); }
    25% { transform: translateY(-8px) rotateZ(-1.5deg) scale(0.91); }
    50% { transform: translateY(-12px) rotateZ(0deg) scale(0.91); }
    75% { transform: translateY(-8px) rotateZ(1.5deg) scale(0.91); }
}

/* 2) Asentir “sí” */
.nod-yes .head-group {
    transform-origin: center bottom;
    animation: nodYes 0.6s ease-out;
}

@keyframes nodYes {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    100% { transform: rotate(0deg); }
}

/* 3) Negar “no” */
.shake-no .head-group {
    transform-origin: center center;
    animation: shakeNo 0.6s ease-out;
}

@keyframes shakeNo {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-7deg); }
    100% { transform: rotate(0deg); }
}

/* 4) Mirada con sacádicos rápidos */
.saccade-look .pupil {
    animation: saccade 1.8s steps(3, end) infinite !important;
}

@keyframes saccade {
    0% { transform: translate(-50%, -50%); }
    33% { transform: translate(-40%, -55%); }
    66% { transform: translate(-60%, -45%); }
    100% { transform: translate(-50%, -50%); }
}

/* 5) Brillo barrido en el panel */
.panel-sheen .panelito-panel::before {
    content: '';
    position: absolute;
    top: -30%; left: -30%;
    width: 160%; height: 160%;
    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.28) 50%, transparent 55%);
    animation: sheen 2.5s ease-in infinite;
    pointer-events: none;
}

@keyframes sheen {
    0% { transform: translateX(-120%) translateY(-120%); }
    100% { transform: translateX(120%) translateY(120%); }
}

/* 6) Pulso de estado en todo el avatar */
.status-pulse {
    animation: statusPulse 1.8s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0.0)); }
    50% { filter: drop-shadow(0 0 28px rgba(255, 215, 0, 0.7)); }
}

/* 7) Chispa/partículas explosivas */
.spark-burst::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 420px; height: 420px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,240,120,0.0) 0deg 10deg,
        rgba(255,240,120,0.85) 10deg 12deg,
        rgba(255,240,120,0.0) 12deg 20deg
    );
    animation: burst 800ms ease-out forwards;
}

@keyframes burst {
    from { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

/* 8) Sorpresa (ojos) reutilizable */
.surprised .facial-features {
    animation: eyesSurprisedQuick 0.4s ease-out;
}

@keyframes eyesSurprisedQuick {
    0% { transform: translateY(0) scale(1); }
    60% { transform: translateY(-14px) scale(1.05); }
    100% { transform: translateY(-12px) scale(1.03); }
}

/* 9) Squash & stretch breve en el contenedor */
.squash-bounce {
    animation: squash 300ms ease-out;
}

@keyframes squash {
    0% { transform: scale(1, 1) translateY(0); }
    40% { transform: scale(1.06, 0.92) translateY(2px); }
    80% { transform: scale(0.97, 1.03) translateY(-2px); }
    100% { transform: scale(1, 1) translateY(0); }
}

/* 10) Vibración mecánica corta */
.vibrate {
    animation: vibrate 120ms linear 0s 5;
}

@keyframes vibrate {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, 2px); }
    100% { transform: translate(0, 0); }
}

/* 11) Polvo/huella al rodar */
.rolling-dust::before {
    content: '';
    position: absolute;
    left: 50%; bottom: -10px;
    width: 480px; height: 160px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 30% 90%, rgba(160,140,100,0.35) 0%, rgba(160,140,100,0.15) 45%, transparent 70%),
                radial-gradient(ellipse at 70% 90%, rgba(160,140,100,0.35) 0%, rgba(160,140,100,0.15) 45%, transparent 70%);
    filter: blur(2px);
    pointer-events: none;
    animation: dust 1.6s ease-out forwards;
}

@keyframes dust {
    0% { opacity: 0.8; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(1.2); }
}

/* Animación 1: Panel brillante (efecto sol apareciendo) */
@keyframes panelGlow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0px rgba(255, 215, 0, 0));
    }
    20% {
        filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    }
    40% {
        filter: brightness(1.5) drop-shadow(0 0 50px rgba(255, 215, 0, 1)) drop-shadow(0 0 70px rgba(255, 255, 100, 0.9));
    }
    60% {
        filter: brightness(1.6) drop-shadow(0 0 60px rgba(255, 200, 0, 1)) drop-shadow(0 0 90px rgba(255, 255, 150, 1));
    }
    80% {
        filter: brightness(1.3) drop-shadow(0 0 30px rgba(255, 215, 0, 0.7));
    }
}

.idle-panel-glow .panelito-panel {
    animation: panelGlow 5s ease-in-out;
    position: relative;
}

/* Sol apareciendo detrás del panel */
.idle-panel-glow .panelito-panel::before {
    content: '☀️';
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
    width: 120px;
    height: 120px;
    font-size: 80px;
    line-height: 120px;
    text-align: center;
    background: radial-gradient(circle,
        rgba(255, 255, 100, 1) 0%,
        rgba(255, 215, 0, 0.95) 20%,
        rgba(255, 180, 0, 0.7) 40%,
        rgba(255, 150, 0, 0.3) 60%,
        transparent 80%);
    border-radius: 50%;
    animation: sunAppear 5s ease-in-out;
    pointer-events: none;
    z-index: 5;
    box-shadow:
        0 0 40px rgba(255, 215, 0, 1),
        0 0 80px rgba(255, 215, 0, 0.7),
        0 0 120px rgba(255, 200, 0, 0.5),
        0 0 160px rgba(255, 180, 0, 0.3);
}

/* Rayos de sol decorativos */
.idle-panel-glow .panelito-panel::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -300px;
    width: 600px;
    height: 600px;
    background:
        linear-gradient(0deg, transparent 48%, rgba(255, 215, 0, 0.4) 50%, transparent 52%),
        linear-gradient(45deg, transparent 48%, rgba(255, 215, 0, 0.3) 50%, transparent 52%),
        linear-gradient(90deg, transparent 48%, rgba(255, 215, 0, 0.4) 50%, transparent 52%),
        linear-gradient(135deg, transparent 48%, rgba(255, 215, 0, 0.3) 50%, transparent 52%);
    animation: sunRays 5s ease-in-out;
    pointer-events: none;
    z-index: 4;
}

/* Energía amarilla alrededor de Panelito cuando el panel brilla */
.idle-panel-glow .avatar-main::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    background: 
        radial-gradient(circle at center,
            rgba(255, 220, 50, 0.25) 0%,
            rgba(255, 220, 50, 0.18) 45%,
            rgba(255, 220, 50, 0.05) 60%,
            transparent 75%
        ),
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 230, 80, 0.0) 0deg 6deg,
            rgba(255, 230, 80, 0.9) 6deg 8deg,
            rgba(255, 230, 80, 0.0) 8deg 14deg
        );
    filter: blur(0.3px) saturate(1.1);
    pointer-events: none;
    z-index: -1; /* detrás del avatar, delante del fondo */
    border-radius: 50%;
    mask-image: radial-gradient(circle at center, black 65%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, black 65%, transparent 90%);
    animation: energySpin 8s linear infinite, energyPulse 2.4s ease-in-out infinite;
}

@keyframes energySpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.85; }
    50% { transform: translate(-50%, -50%) rotate(180deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0.85; }
}

@keyframes energyPulse {
    0%, 100% { box-shadow: 0 0 40px 10px rgba(255, 230, 80, 0.3); }
    50% { box-shadow: 0 0 70px 18px rgba(255, 230, 80, 0.55); }
}

@keyframes sunAppear {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(200px) scale(0.5);
    }
    20% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(100px) scale(0.7);
    }
    40% {
        opacity: 1;
        transform: translateX(-50%) translateY(0px) scale(1);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(0px) scale(1.05);
    }
    80% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(-80px) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-180px) scale(0.4);
    }
}

@keyframes sunRays {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.3) rotate(0deg);
    }
    20% {
        opacity: 0.2;
        transform: translateX(-50%) scale(0.6) rotate(20deg);
    }
    40% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1) rotate(45deg);
    }
    60% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1.1) rotate(90deg);
    }
    80% {
        opacity: 0.3;
        transform: translateX(-50%) scale(0.7) rotate(120deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.3) rotate(180deg);
    }
}

/* Animación 5: Cabeza mirando alrededor */
@keyframes lookAround {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) translateX(-20px) rotate(-8deg);
    }
    50% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    75% {
        transform: translateY(-8px) translateX(20px) rotate(8deg);
    }
}

.idle-look-around .head-group {
    animation: lookAround 4s ease-in-out !important;
}
.idle-look-around .panelito-cabeza { animation: none !important; }
.idle-look-around .facial-features { animation: none !important; }
.idle-look-around .pupil { animation: none !important; }

/* Animación 6: Panel tilting más pronunciado */
@keyframes panelTiltStrong {
    0%, 100% { transform: rotateY(0deg); }
    25% { transform: rotateY(-15deg); }
    50% { transform: rotateY(0deg); }
    75% { transform: rotateY(15deg); }
}

.idle-tilt-panel .panelito-panel {
    animation: panelTiltStrong 3s ease-in-out;
    transform-origin: bottom center;
}

/* Animación 7: EXPLOSIÓN - Panel sobrecalentado */
@keyframes overheating {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0px rgba(255, 0, 0, 0));
    }
    30% {
        filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 100, 0, 0.8));
    }
    50% {
        filter: brightness(1.6) drop-shadow(0 0 40px rgba(255, 0, 0, 1)) drop-shadow(0 0 60px rgba(255, 50, 0, 1));
    }
    70% {
        filter: brightness(2) drop-shadow(0 0 60px rgba(255, 0, 0, 1)) drop-shadow(0 0 100px rgba(255, 0, 0, 1));
    }
}

.idle-explosion {
    animation: shake 0.5s ease-in-out infinite !important;
}

.idle-explosion .panelito-panel {
    animation-name: overheating, explodePart;
    animation-duration: 2.5s, 3s;
    animation-timing-function: ease-in-out, ease-out;
    animation-delay: 0s, 2.5s;
    animation-fill-mode: forwards, forwards;
}

/* ==========================================
   ANIMACIÓN: SALUDAR AMBOS BRAZOS (Articulaciones mecánicas)
   ========================================== */

/* Animación del brazo izquierdo */
.idle-wave .antebrazo-izq-group {
    animation: waveAntebrazo 3s ease-in-out;
}

/* Animación del brazo derecho */
.idle-wave .antebrazo-der-group {
    animation: waveAntebrazoDer 3s ease-in-out;
}

/* La mano izquierda NO se anima - está fija al antebrazo */
/* La mano derecha NO se anima - está fija al antebrazo */

/* Rotación del antebrazo izquierdo desde el codo - 2 vueltas completas (720°) */
@keyframes waveAntebrazo {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(720deg); /* 2 rotaciones completas en sentido horario */
    }
}

/* Rotación del antebrazo derecho desde el codo - 2 vueltas completas (720°) */
@keyframes waveAntebrazoDer {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-720deg); /* 2 rotaciones completas en sentido antihorario */
    }
}

/* ==========================================
   ANIMACIÓN: SALUDAR (Movimiento natural)
   ========================================== */

/* Animación de saludo para brazo izquierdo */
.idle-greet .antebrazo-izq-group {
    animation: greetLeft 2s ease-in-out;
}

/* Animación de saludo para brazo derecho */
.idle-greet .antebrazo-der-group {
    animation: greetRight 2s ease-in-out;
}

/* Saludo brazo izquierdo - levanta y mueve */
@keyframes greetLeft {
    0%, 100% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-60deg); /* Levanta el antebrazo */
    }
    25% {
        transform: rotate(-70deg); /* Movimiento de saludo 1 */
    }
    35% {
        transform: rotate(-50deg);
    }
    45% {
        transform: rotate(-70deg); /* Movimiento de saludo 2 */
    }
    55% {
        transform: rotate(-50deg);
    }
    65% {
        transform: rotate(-70deg); /* Movimiento de saludo 3 */
    }
    75% {
        transform: rotate(-50deg);
    }
    85% {
        transform: rotate(-30deg); /* Empieza a bajar */
    }
}

/* Saludo brazo derecho - levanta y mueve */
@keyframes greetRight {
    0%, 100% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(60deg); /* Levanta el antebrazo */
    }
    25% {
        transform: rotate(70deg); /* Movimiento de saludo 1 */
    }
    35% {
        transform: rotate(50deg);
    }
    45% {
        transform: rotate(70deg); /* Movimiento de saludo 2 */
    }
    55% {
        transform: rotate(50deg);
    }
    65% {
        transform: rotate(70deg); /* Movimiento de saludo 3 */
    }
    75% {
        transform: rotate(50deg);
    }
    85% {
        transform: rotate(30deg); /* Empieza a bajar */
    }
}

/* ==========================================
   ANIMACIÓN: MOVIMIENTO HORIZONTAL (Turbo)
   ========================================== */

.idle-drive {
    animation: driveHorizontal 4s ease-in-out;
}

/* Animación de brazos durante el movimiento */
.idle-drive .antebrazo-izq-group {
    animation: waveAntebrazo 4s ease-in-out;
}

.idle-drive .antebrazo-der-group {
    animation: waveAntebrazoDer 4s ease-in-out;
}

@keyframes driveHorizontal {
    0% {
        transform: translateX(-45vw) scale(0.91); /* Extremo izquierdo */
    }
    50% {
        transform: translateX(45vw) scale(0.91); /* Extremo derecho */
    }
    100% {
        transform: translateX(-45vw) scale(0.91); /* Regresa al extremo izquierdo */
    }
}

/* ==========================================
   ANIMACIÓN: LANZAR PANEL
   ========================================== */

.idle-throw .antebrazo-izq-group {
    animation: throwLeft 3s ease-in-out;
}

.idle-throw .antebrazo-der-group {
    animation: throwRight 3s ease-in-out;
}

.idle-throw .panelito-panel {
    animation: panelThrow 3s ease-in-out;
    transform-origin: center center;
}

/* Brazo izquierdo: sube, agarra, lanza */
@keyframes throwLeft {
    0%, 100% {
        transform: rotate(0deg); /* Posición inicial */
    }
    20% {
        transform: rotate(-90deg); /* Sube hacia el panel */
    }
    40% {
        transform: rotate(-95deg); /* Agarra el panel */
    }
    50% {
        transform: rotate(-85deg); /* Prepara lanzamiento */
    }
    60% {
        transform: rotate(-110deg); /* Lanza */
    }
    80% {
        transform: rotate(-30deg); /* Regresa */
    }
}

/* Brazo derecho: sube, agarra, lanza */
@keyframes throwRight {
    0%, 100% {
        transform: rotate(0deg); /* Posición inicial */
    }
    20% {
        transform: rotate(90deg); /* Sube hacia el panel */
    }
    40% {
        transform: rotate(95deg); /* Agarra el panel */
    }
    50% {
        transform: rotate(85deg); /* Prepara lanzamiento */
    }
    60% {
        transform: rotate(110deg); /* Lanza */
    }
    80% {
        transform: rotate(30deg); /* Regresa */
    }
}

/* Panel: se mueve con las manos y luego sale volando */
@keyframes panelThrow {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    20%, 40% {
        transform: translateY(0) translateX(0) rotate(0deg); /* Quieto mientras lo agarran */
        opacity: 1;
    }
    50% {
        transform: translateY(10px) translateX(0) rotate(-5deg); /* Preparación */
        opacity: 1;
    }
    60% {
        transform: translateY(-30px) translateX(0) rotate(10deg); /* Inicio del lanzamiento */
        opacity: 1;
    }
    75% {
        transform: translateY(-200px) translateX(100px) rotate(180deg); /* Sale volando */
        opacity: 0.8;
    }
    100% {
        transform: translateY(0) translateX(0) rotate(360deg); /* Regresa girando */
        opacity: 1;
    }
}

/* Ojos acompañan a animaciones de la cabeza */
.idle-look-around .head-group {
    animation: lookAround 4s ease-in-out !important;
}

/* Secuencia para explosión: sorpresa -> salen volando */
.idle-explosion .facial-features {
    animation-name: eyesSurprised, explodeEyes;
    animation-duration: 2.4s, 3s;
    animation-timing-function: ease-out, ease-out;
    animation-delay: 0s, 2.5s; /* coincide con calentamiento y explosión de partes */
    animation-fill-mode: forwards, forwards;
}

@keyframes eyesSurprised {
    0% { transform: translateY(0) scale(1); }
    20% { transform: translateY(-10px) scale(1.02); }
    40% { transform: translateY(-16px) scale(1.04); }
    100% { transform: translateY(-16px) scale(1.04); }
}

@keyframes explodeEyes {
    0% { transform: translateY(-16px) rotate(0deg); opacity: 1; }
    50% { transform: translateY(-180px) rotate(-180deg); opacity: 0.7; }
    100% { transform: translateY(-320px) rotate(-360deg); opacity: 0; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0px) translateY(0px) scale(0.91); }
    10% { transform: translateX(-3px) translateY(2px) scale(0.91); }
    20% { transform: translateX(3px) translateY(-2px) scale(0.91); }
    30% { transform: translateX(-3px) translateY(2px) scale(0.91); }
    40% { transform: translateX(3px) translateY(-2px) scale(0.91); }
    50% { transform: translateX(-3px) translateY(2px) scale(0.91); }
    60% { transform: translateX(3px) translateY(-2px) scale(0.91); }
    70% { transform: translateX(-3px) translateY(2px) scale(0.91); }
    80% { transform: translateX(3px) translateY(-2px) scale(0.91); }
    90% { transform: translateX(-3px) translateY(2px) scale(0.91); }
}

/* Explosión de las partes */
.idle-explosion .panelito-cabeza {
    animation: explodePart 3s ease-out forwards;
    animation-delay: 2.5s;
}

/* Asegurar que todo el grupo de cabeza también salga volando */
.idle-explosion .head-group {
    animation: explodePart 3s ease-out forwards;
    animation-delay: 2.5s;
}

/* Explosión de cuello y cuerpo */
.idle-explosion .panelito-cuello {
    animation: explodePart 3s ease-out forwards;
    animation-delay: 2.6s;
}

.idle-explosion .panelito-cuerpo {
    animation: explodePart 3s ease-out forwards;
    animation-delay: 2.55s;
}

.idle-explosion .panelito-brazo-izq-sup {
    animation: explodePartLeft 3s ease-out forwards;
    animation-delay: 2.5s;
}

.idle-explosion .panelito-brazo-izq-inf {
    animation: explodePartLeft 3s ease-out forwards;
    animation-delay: 2.6s;
}

.idle-explosion .panelito-mano-izq {
    animation: explodePartLeft 3s ease-out forwards;
    animation-delay: 2.7s;
}

.idle-explosion .panelito-brazo-der-sup {
    animation: explodePartRight 3s ease-out forwards;
    animation-delay: 2.5s;
}

.idle-explosion .panelito-brazo-der-inf {
    animation: explodePartRight 3s ease-out forwards;
    animation-delay: 2.6s;
}

.idle-explosion .panelito-mano-der {
    animation: explodePartRight 3s ease-out forwards;
    animation-delay: 2.7s;
}

.idle-explosion .panelito-rueda-1,
.idle-explosion .panelito-rueda-2,
.idle-explosion .panelito-rueda-3,
.idle-explosion .panelito-rueda-4 {
    animation: explodeWheel 3s ease-out forwards;
    animation-delay: 2.5s;
}

@keyframes explodePart {
    0% {
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-300px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes explodePartLeft {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-400px) translateY(-200px) rotate(-720deg);
        opacity: 0;
    }
}

@keyframes explodePartRight {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(400px) translateY(-200px) rotate(720deg);
        opacity: 0;
    }
}

@keyframes explodeWheel {
    0% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-150px) rotate(360deg) scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: translateY(300px) rotate(720deg) scale(0.3);
        opacity: 0;
    }
}