/* ================================
   PITIUPI PRESENTATION - SLIDE 10 STYLES
   Escrow Model (The Safe)
   ================================ */

   .slide[data-slide="10"] {
    padding: 1rem !important;
}

.slide-10-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 4rem;
}

/* ================================
   TÍTULOS Y TEXTOS
   ================================ */
.escrow-title {
    font-size: 3rem;
    margin-bottom: 3rem;
    text-align: center;
    opacity: 0;
    transform: translateY(-20px);
}

.slide[data-slide="10"][data-step="1"] .step-1,
.slide[data-slide="10"][data-step="2"] .step-1,
.slide[data-slide="10"][data-step="3"] .step-1,
.slide[data-slide="10"][data-step="4"] .step-1,
.slide[data-slide="10"][data-step="5"] .step-1 { 
    opacity: 1; transform: translateY(0); transition: all 0.6s ease; 
}

/* ================================
   ESCENARIO DE ANIMACIÓN
   ================================ */
.escrow-animation-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 100%;
    height: 300px;
    position: relative;
    margin-bottom: 2rem;
}

/* Jugadores */
.player-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 2;
}

.player-avatar {
    font-size: 4rem;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}

.player-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dim);
}

/* Estado Jugadores Aparecen */
.slide[data-slide="10"][data-step="2"] .step-2,
.slide[data-slide="10"][data-step="3"] .step-2,
.slide[data-slide="10"][data-step="4"] .step-2,
.slide[data-slide="10"][data-step="5"] .step-2 { opacity: 1; }

/* ORBES DE DINERO (La Magia) */
.money-orb {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #fff 20%, var(--primary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #000;
    box-shadow: 0 0 20px var(--neon);
    z-index: 10;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Rebote elástico */
}

/* PASO 3: DINERO ENTRA A LA BÓVEDA */
.slide[data-slide="10"][data-step="3"] .money-left {
    top: 50%; left: 50%; 
    transform: translate(120px, 20px) scale(0); /* Se mete a la bóveda */
    opacity: 0;
}
.slide[data-slide="10"][data-step="3"] .money-right {
    top: 50%; left: 50%; 
    transform: translate(-120px, 20px) scale(0);
    opacity: 0;
}

/* BÓVEDA CENTRAL (PITIUPI) */
.vault-zone {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.vault-shield {
    width: 100%; height: 100%;
    background: rgba(3, 0, 46, 0.9);
    border: 3px solid #555; /* Apagado al inicio */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: all 0.5s ease;
    z-index: 5;
}

.vault-icon { font-size: 3rem; margin-bottom: 5px; transition: all 0.3s; }
.vault-status { font-size: 0.7rem; font-weight: 700; color: #777; letter-spacing: 1px; }

/* PASO 3: BÓVEDA SE CIERRA (CUSTODIA) */
.slide[data-slide="10"][data-step="3"] .vault-zone,
.slide[data-slide="10"][data-step="4"] .vault-zone,
.slide[data-slide="10"][data-step="5"] .vault-zone {
    opacity: 1; transform: scale(1);
}

.slide[data-slide="10"][data-step="3"] .vault-shield,
.slide[data-slide="10"][data-step="4"] .vault-shield {
    border-color: var(--neon);
    box-shadow: 0 0 40px rgba(57, 255, 20, 0.4);
    animation: lockPulse 0.5s ease-out;
}

.slide[data-slide="10"][data-step="3"] .vault-status,
.slide[data-slide="10"][data-step="4"] .vault-status {
    color: var(--neon); text-shadow: 0 0 10px var(--neon);
}

@keyframes lockPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* PASO 4: BATALLA (VS) */
.vs-effect {
    position: absolute;
    font-size: 5rem;
    opacity: 0;
    transform: scale(2);
    z-index: 20;
    text-shadow: 0 0 20px red;
    pointer-events: none;
}

.slide[data-slide="10"][data-step="4"] .vs-effect {
    animation: clashEffect 1s ease-out forwards;
}

@keyframes clashEffect {
    0% { opacity: 0; transform: scale(2) rotate(-20deg); }
    50% { opacity: 1; transform: scale(1) rotate(0deg); }
    80% { opacity: 1; transform: scale(1.1) rotate(10deg); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* PASO 5: PAGO (DISTRIBUCIÓN) */
.slide[data-slide="10"][data-step="5"] .vault-shield {
    border-color: gold;
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.5);
}
.slide[data-slide="10"][data-step="5"] .vault-icon { content: '🔓'; transform: rotateY(180deg); } /* Abre */
.slide[data-slide="10"][data-step="5"] .vault-status { color: gold; text-shadow: 0 0 10px gold; content: 'PAGADO'; }

/* Dinero viaja al ganador (Jugador A) */
.slide[data-slide="10"][data-step="5"] .money-left {
    opacity: 1;
    transform: translateX(-50%) scale(1.5); /* Vuelve más grande */
    top: -40px; /* Sube triunfante */
    box-shadow: 0 0 40px gold;
    background: radial-gradient(circle, #fff 20%, gold 100%);
}

/* Perdedor se apaga */
.slide[data-slide="10"][data-step="5"] .p-right {
    opacity: 0.3; filter: grayscale(1);
}

/* ================================
   TEXTO DE PASOS
   ================================ */
.escrow-steps-text {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.e-step {
    font-size: 1.1rem;
    color: #555;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}

/* Iluminar paso actual */
.slide[data-slide="10"][data-step="2"] .step-2-text { color: #fff; border-color: var(--primary); }
.slide[data-slide="10"][data-step="3"] .step-3-text { color: var(--neon); border-color: var(--neon); font-weight: 700; transform: scale(1.1); }
.slide[data-slide="10"][data-step="4"] .step-4-text { color: red; border-color: red; font-weight: 700; transform: scale(1.1); }
.slide[data-slide="10"][data-step="5"] .step-5-text { color: gold; border-color: gold; font-weight: 700; transform: scale(1.2); }

/* ================================
   FOOTER (Frase Final)
   ================================ */
.escrow-footer {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

.slide[data-slide="10"][data-step="5"] .escrow-footer {
    opacity: 1; transform: translateY(0); transition: all 0.5s ease 0.5s;
}

.escrow-badge {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid red;
    color: #ffcccc;
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.escrow-footer p {
    font-size: 1.8rem;
    color: #fff;
}

.escrow-footer span {
    color: var(--neon);
    font-weight: 700;
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 768px) {
    .escrow-animation-container { gap: 1rem; height: 200px; }
    .player-avatar { font-size: 2.5rem; }
    .vault-zone { width: 100px; height: 100px; }
    .vault-icon { font-size: 2rem; }
    .escrow-steps-text { flex-wrap: wrap; justify-content: center; gap: 1rem; }
    .e-step { font-size: 0.9rem; }
    .escrow-footer p { font-size: 1.2rem; }
}