/* ==========================================
   PAGE CSS - Rubros (Generic Category Pages)
   Hero background via CSS custom properties
   ========================================== */

/* HERO BACKGROUND - uses custom properties set via inline style */
.hero-bg-container { position: absolute; inset: -5%; width: 110%; height: 110%; z-index: 0; background-color: #f8fafc; overflow: hidden; pointer-events: none; }
.hero-bg-image { 
    position: absolute; inset: 0; width: 100%; height: 100%; 
    background-size: cover; background-position: center right; 
    background-image: var(--hero-bg-desktop, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    animation: smooth-zoom 20s linear infinite alternate;
}
@media (max-width: 768px) {
    .hero-bg-image { 
        background-image: var(--hero-bg-mobile, var(--hero-bg-desktop, linear-gradient(135deg, #667eea 0%, #764ba2 100%))); 
        background-position: top center; 
        animation: none; 
    }
}

/* ==========================================
   FEATURE 1 - CSS-ONLY ANIMATIONS
   Calendar hub + floating elements
   ========================================== */

/* Duración total del ciclo de la historia */
:root {
    --total-time: 20s;
}

/* Contenedor principal */
.floating-stage {
    position: relative;
    overflow: visible;
}

/* --- SECUENCIA DE LA HISTORIA (KEYFRAMES) --- */

/* 1. Turno Inicial (Leandro Torres) - Se tacha, no desaparece */
.turn-leandro {
    animation: f1_leandroCancelSequence var(--total-time) forwards infinite;
}

/* 2. Mensaje WhatsApp de Cancelación */
.wa-cancel-msg {
    opacity: 0;
    animation: f1_showMessage var(--total-time) forwards infinite;
    transform-origin: top left;
}

/* 3. Protocolo de Llenado (Tragamonedas con Avatares) */
.slot-machine-container {
    opacity: 0;
    animation: f1_appearForSlot var(--total-time) forwards infinite;
}

.slot-list {
    animation: f1_slotScroll var(--total-time) forwards infinite;
    transform: translateY(0);
}

/* Barras de progreso secuenciales */
.contact-progress-1 { width: 0%; animation: f1_progress1 var(--total-time) forwards infinite; }
.contact-progress-2 { width: 0%; animation: f1_progress2 var(--total-time) forwards infinite; }
.contact-progress-3 { width: 0%; animation: f1_progress3 var(--total-time) forwards infinite; }

/* Contacto ganador en el tragamonedas */
.slot-winner {
    animation: f1_highlightWinner var(--total-time) forwards infinite;
}

/* 4. Nuevo Turno Confirmado (Aparece como nuevo bloque) */
.turn-new-confirmed {
    opacity: 0;
    height: 0;
    overflow: hidden;
    animation: f1_appearConfirmedNew var(--total-time) forwards infinite;
}

/* 5. Notificación de Mercado Pago */
.mp-notification {
    opacity: 0;
    animation: f1_mpSequence var(--total-time) forwards infinite;
}

.mp-progress-bar {
    width: 0%;
    animation: f1_mpProgressBar var(--total-time) forwards infinite;
}

/* 6. Sincronización de Google Calendar */
.gcal-notification {
    opacity: 0;
    animation: f1_gcalSequence var(--total-time) forwards infinite;
}

/* --- DEFINICIÓN DE KEYFRAMES --- */
/* 
   TIMING (Total 20s):
   0-3s: Estado Normal
   3-6s: Cancelación WA (Clic y Tachado)
   6-12s: Búsqueda Tragamonedas (Lenta, Secuencial)
   12-14s: Turno Confirmado (Aparece)
   14-17s: Mercado Pago
   17-20s: Google Calendar
*/

@keyframes f1_leandroCancelSequence {
    0%, 25% { opacity: 1; background-color: #F8FAFC; border-left-color: #3B82F6; }
    26%, 28% { background-color: #FEF2F2; border-left-color: #EF4444; }
    29%, 95% { 
        background-color: #F1F5F9;
        border-left-color: #CBD5E1;
        opacity: 0.6;
    } 
    96%, 100% { opacity: 1; background-color: #F8FAFC; border-left-color: #3B82F6; }
}

/* Para tachar el texto interior de Leandro */
.turn-leandro .text-leandro { animation: f1_textCancel var(--total-time) forwards infinite; }
@keyframes f1_textCancel {
    0%, 28% { text-decoration: none; color: inherit; }
    29%, 95% { text-decoration: line-through; color: #94A3B8; }
    96%, 100% { text-decoration: none; color: inherit; }
}
.turn-leandro .icon-leandro { animation: f1_iconCancel var(--total-time) forwards infinite; }
@keyframes f1_iconCancel {
    0%, 28% { opacity: 1; }
    29%, 95% { opacity: 0.3; filter: grayscale(100%); }
    96%, 100% { opacity: 1; filter: none; }
}

/* Animación del botón "No asistiré" */
@keyframes f1_clickNoAsistire {
    0%, 23% { background-color: #ffffff; color: #334155; border-color: #E2E8F0; transform: scale(1); }
    24%, 26% { background-color: #FEE2E2; color: #EF4444; border-color: #FCA5A5; transform: scale(0.95); }
    27%, 100% { background-color: #FEF2F2; color: #DC2626; border-color: #FECACA; transform: scale(1); }
}
.btn-no-asistire {
    animation: f1_clickNoAsistire var(--total-time) forwards infinite;
}

@keyframes f1_showMessage {
    0%, 15% { opacity: 0; transform: translateY(10px) scale(0.95); z-index: 0; }
    16%, 28% { opacity: 1; transform: translateY(0) scale(1); z-index: 50; }
    30%, 100% { opacity: 0; transform: translateY(-10px) scale(0.95); z-index: 0; }
}

@keyframes f1_appearForSlot {
    0%, 30% { opacity: 0; transform: translateX(20px); z-index: 0; }
    31%, 58% { opacity: 1; transform: translateX(0); z-index: 40; }
    60%, 100% { opacity: 0; transform: translateX(20px); z-index: 0; }
}

@keyframes f1_slotScroll {
    0%, 32% { transform: translateY(0); }
    38%, 43% { transform: translateY(-48px); }
    48%, 51% { transform: translateY(-96px); }
    55%, 100% { transform: translateY(-144px); }
}

@keyframes f1_progress1 {
    0%, 32% { width: 0%; opacity: 1;}
    33%, 37% { width: 100%; opacity: 1;} 
    38%, 100% { width: 100%; opacity: 0;}
}
@keyframes f1_progress2 {
    0%, 37% { width: 0%; opacity: 0;}
    38%, 42% { width: 0%; opacity: 1;}
    43%, 47% { width: 100%; opacity: 1;} 
    48%, 100% { width: 100%; opacity: 0;}
}
@keyframes f1_progress3 {
    0%, 47% { width: 0%; opacity: 0;}
    48%, 51% { width: 0%; opacity: 1;}
    52%, 54% { width: 100%; opacity: 1;} 
    55%, 100% { width: 100%; opacity: 0;}
}

/* Iconos de WA confirmados en el tragamonedas */
@keyframes f1_waIcon1 { 0%, 36% { opacity: 0; transform: scale(0); } 37%, 100% { opacity: 1; transform: scale(1); } }
@keyframes f1_waIcon2 { 0%, 46% { opacity: 0; transform: scale(0); } 47%, 100% { opacity: 1; transform: scale(1); } }
@keyframes f1_waIcon3 { 0%, 53% { opacity: 0; transform: scale(0); } 54%, 100% { opacity: 1; transform: scale(1); } }
.wa-sent-icon-1 { animation: f1_waIcon1 var(--total-time) forwards infinite; }
.wa-sent-icon-2 { animation: f1_waIcon2 var(--total-time) forwards infinite; }
.wa-sent-icon-3 { animation: f1_waIcon3 var(--total-time) forwards infinite; }

@keyframes f1_highlightWinner {
    0%, 55% { background-color: transparent; }
    56%, 100% { background-color: #F0FDF4; }
}

@keyframes f1_appearConfirmedNew {
    0%, 59% { opacity: 0; transform: scale(0.95) translateY(-10px); height: 0; padding: 0; margin-top: 0; border: none; }
    60%, 95% { opacity: 1; transform: scale(1) translateY(0); height: auto; padding: 0.75rem; margin-top: 0.5rem; border-left-width: 3px; }
    96%, 100% { opacity: 0; height: 0; margin-top: 0; }
}

@keyframes f1_mpSequence {
    0%, 65% { opacity: 0; transform: translateY(20px); }
    66%, 82% { opacity: 1; transform: translateY(0); z-index: 45; }
    84%, 100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes f1_mpProgressBar {
    0%, 68% { width: 0%; }
    75%, 100% { width: 100%; }
}

@keyframes f1_showPaid {
    0%, 81% { opacity: 0; transform: scale(0); }
    83%, 95% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(0); }
}
.paid-badge { 
    transform-origin: left center; 
    animation: f1_showPaid var(--total-time) forwards infinite; 
}

@keyframes f1_gcalSequence {
    0%, 82% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    84%, 95% { opacity: 1; transform: translateY(0) scale(1); z-index: 45; }
    96%, 100% { opacity: 0; transform: translateY(-10px) scale(0.9); }
}

/* ==========================================
   HERO PHONE - New SVG iPhone Styles
   ========================================== */

/* Gradient for planning/resumen card */
.bg-resumen-dia {
    background: linear-gradient(135deg, #ff9e00 0%, #ff6b00 100%);
}

/* Gradient for magic floating button */
.bg-btn-magico {
    background: linear-gradient(135deg, #b42be1 0%, #d82b9a 100%);
}

/* Chat message backgrounds */
.bg-bot-message {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
}

.bg-user-message {
    background: #3b82f6;
    color: white;
}