/* ===================================
   LUKA LANDING PAGE - CUSTOM STYLES
   =================================== */

/* === GLOBAL STYLES === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* === ANIMATED GRADIENT BACKGROUND (VERDES OSCUROS) === */
.bg-gradient-animated {
    background: linear-gradient(-45deg, #064e3b, #047857, #059669);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === PARTICLES ANIMATION === */
#particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: float-up linear infinite;
}

@keyframes float-up {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

/* === MOCKUP FLOAT ANIMATION === */
.mockup-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

/* === CTA PULSE EFFECT === */
.cta-pulse {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.8);
    }
}

/* === SCROLL ANIMATION === */
@keyframes scroll {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.animate-scroll {
    animation: scroll 2s ease-in-out infinite;
}

/* === FADE IN ANIMATION === */
.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* === SLIDE UP ANIMATION === */
.animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === ANIMATION DELAYS === */
.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

/* === PULSE SLOW === */
.animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .mockup-float {
        transform: scale(0.85);
    }
}

/* === CUSTOM SCROLLBAR === */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1B263B;
}

::-webkit-scrollbar-thumb {
    background: #10B981;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0D9C73;
}
/* === ROTATING TEXT GLOW (EFECTO APPLE) === */
.rotating-text-glow {
    text-shadow: 
        0 0 10px rgba(16, 185, 129, 0.3),
        0 0 20px rgba(16, 185, 129, 0.2),
        0 0 30px rgba(16, 185, 129, 0.1);
    transition: text-shadow 0.3s ease;
}

/* Efecto hover sutil (opcional) */
.rotating-text-glow:hover {
    text-shadow: 
        0 0 15px rgba(16, 185, 129, 0.5),
        0 0 30px rgba(16, 185, 129, 0.3),
        0 0 45px rgba(16, 185, 129, 0.2);
}

/* === ROTATING TEXT - FIX DEFINITIVO === */
/* Contenedor del h1 con altura fija */
.text-center.lg\:text-left > h1 {
    min-height: 240px; /* Reducido de 320px */
    line-height: 1.2;
}

/* El span rotativo debe ser inline para que fluya */
#rotating-text {
    display: inline !important;
    line-height: 1.2 !important;
    vertical-align: baseline !important;
}

/* Responsive - más altura en pantallas pequeñas */
@media (max-width: 1280px) {
    .text-center.lg\:text-left > h1 {
        min-height: 300px; /* Reducido de 360px */
    }
}

@media (max-width: 1024px) {
    .text-center.lg\:text-left > h1 {
        min-height: 100px; /* Reducido de 400px */
    }
}

@media (max-width: 768px) {
    .text-center.lg\:text-left > h1 {
        min-height: 100px; /* Reducido de 450px */
    }
}

@media (max-width: 640px) {
    .text-center.lg\:text-left > h1 {
        min-height: 100px; /* Reducido de 500px */
    }
}

@media (max-width: 480px) {
    .text-center.lg\:text-left > h1 {
        min-height: 130px; /* Reducido de 550px */
    }
}

/* ===================================
   PROBLEM SECTION STYLES
   =================================== */

/* === FALLING ICONS ANIMATION === */
.falling-icon {
    position: absolute;
    font-size: 48px;
    opacity: 0;
    animation: fall linear infinite;
}

.falling-icon-1 {
    left: 20%;
    animation-duration: 3s;
    animation-delay: 0s;
}

.falling-icon-2 {
    left: 50%;
    animation-duration: 3.5s;
    animation-delay: 1s;
}

.falling-icon-3 {
    left: 75%;
    animation-duration: 4s;
    animation-delay: 2s;
}

@keyframes fall {
    0% {
        top: -60px;
        opacity: 0;
        transform: rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 120px;
        opacity: 0;
        transform: rotate(360deg);
    }
}

/* === PROBLEM CARDS === */
.problem-card {
    position: relative;
    overflow: hidden;
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #EF4444, #DC2626);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.problem-card:hover::before {
    transform: scaleX(1);
}

/* === GLOW TEXT EFFECT === */
.glow-text {
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 30px rgba(255, 255, 255, 0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(255, 255, 255, 0.5),
            0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 255, 255, 0.8),
            0 0 40px rgba(255, 255, 255, 0.6);
    }
}

/* === MULTIPLYING COUNTER EFFECT === */
@keyframes multiply {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.multiplying-counter {
    animation: multiply 0.5s ease-in-out 3;
}

/* === TOTAL IMPACT CARD === */
.total-impact-card {
    position: relative;
    overflow: hidden;
}

.total-impact-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* === SCROLL REVEAL ANIMATIONS === */
.problem-card,
.total-impact-card {
    opacity: 0;
    transform: translateY(30px);
}

.problem-card.revealed,
.total-impact-card.revealed {
    animation: revealCard 0.6s ease-out forwards;
}

@keyframes revealCard {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .falling-icon {
        font-size: 36px;
    }
    
    .problem-card {
        margin-bottom: 1rem;
    }
}
/* ===================================
   VILLAIN SECTION STYLES
   =================================== */

/* === SPOTLIGHT EFFECT === */
.spotlight {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    pointer-events: none;
    animation: spotlightMove 20s ease-in-out infinite;
}

.spotlight-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #10B981 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.spotlight-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #EF4444 0%, transparent 70%);
    top: 50%;
    right: -250px;
    animation-delay: 7s;
}

.spotlight-3 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #10B981 0%, transparent 70%);
    bottom: -300px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 14s;
}

@keyframes spotlightMove {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, 30px) scale(1.1);
    }
    50% {
        transform: translate(-30px, 50px) scale(0.9);
    }
    75% {
        transform: translate(40px, -40px) scale(1.05);
    }
}

/* === GRID BACKGROUND === */
.grid-background {
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(16, 185, 129, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* === VILLAIN CARDS === */
.villain-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.villain-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(239, 68, 68, 0.3);
}

/* Shake animation on hover */
.villain-card:hover .shake-text {
    animation: shake 0.5s ease-in-out;
}

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

/* === GLITCH EFFECT ON ICONS === */
.villain-icon {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.glitch-icon {
    animation: glitchIdle 5s infinite;
}

.villain-card:hover .glitch-icon {
    animation: glitch 0.3s ease-in-out 3;
}

@keyframes glitchIdle {
    0%, 100% { transform: translate(0); }
    50% { transform: translate(1px, -1px); }
}

@keyframes glitch {
    0% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translate(-3px, 3px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translate(3px, -3px);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translate(-3px, -3px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translate(3px, 3px);
        filter: hue-rotate(360deg);
    }
    100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
}

/* === EMPOWERMENT CARD === */
.empowerment-card {
    position: relative;
    overflow: hidden;
}

.empowerment-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(16, 185, 129, 0.1),
        transparent
    );
    animation: shine 3s infinite;
}

/* === PULSE GLOW GREEN === */
.pulse-glow-green {
    animation: pulseGlowGreen 2s ease-in-out infinite;
}

@keyframes pulseGlowGreen {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(16, 185, 129, 0.3),
            0 0 20px rgba(16, 185, 129, 0.2),
            0 0 30px rgba(16, 185, 129, 0.1);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(16, 185, 129, 0.5),
            0 0 30px rgba(16, 185, 129, 0.3),
            0 0 40px rgba(16, 185, 129, 0.2);
    }
}

/* === SCROLL REVEAL FOR VILLAIN CARDS === */
.villain-card {
    opacity: 0;
    transform: translateY(30px);
}

.villain-card.revealed {
    animation: revealVillainCard 0.6s ease-out forwards;
}

@keyframes revealVillainCard {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger reveal delays */
.villain-card:nth-child(1).revealed {
    animation-delay: 0s;
}

.villain-card:nth-child(2).revealed {
    animation-delay: 0.15s;
}

.villain-card:nth-child(3).revealed {
    animation-delay: 0.3s;
}

.villain-card:nth-child(4).revealed {
    animation-delay: 0.45s;
}

/* === EMPOWERMENT CARD REVEAL === */
.empowerment-card {
    opacity: 0;
    transform: scale(0.95);
}

.empowerment-card.revealed {
    animation: revealEmpowerment 0.8s ease-out forwards;
    animation-delay: 0.6s;
}

@keyframes revealEmpowerment {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .spotlight {
        width: 300px !important;
        height: 300px !important;
    }
    
    .villain-card {
        margin-bottom: 1rem;
    }
    
    .grid-background {
        background-size: 30px 30px;
    }
}
/* ===================================
   SOLUTION SECTION STYLES
   =================================== */

/* === SOLUTION BADGE ANIMATION === */
.solution-badge {
    animation: badgePulse 2s ease-in-out infinite;
}

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

/* === CHAT DEMO CONTAINER === */
.chat-demo-container {
    animation: containerFloat 6s ease-in-out infinite;
}

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

/* === CHAT MESSAGES === */
.chat-message {
    animation: messageSlideIn 0.5s ease-out forwards;
}

.user-message {
    animation-name: messageSlideInRight;
}

.luka-message {
    animation-name: messageSlideInLeft;
}

@keyframes messageSlideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes messageSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === TYPING INDICATOR === */
.typing-indicator {
    animation: fadeIn 0.3s ease-out forwards;
}

/* === TYPEWRITER TEXT === */
.typewriter-text {
    position: relative;
    display: inline-block;
}

.typewriter-text::after {
    content: '|';
    position: absolute;
    right: -10px;
    animation: blink 0.7s infinite;
}

.typewriter-text.typing-complete::after {
    display: none;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* === SPACING FIX: Chat Demo y Feature Cards === */

/* Más espacio después del chat en mobile */
.chat-demo-container {
    margin-bottom: 3rem; /* 48px */
}

@media (max-width: 768px) {
    .chat-demo-container {
        margin-bottom: 4rem; /* 64px - más espacio en mobile */
    }
}

@media (max-width: 640px) {
    .chat-demo-container {
        margin-bottom: 5rem; /* 80px - aún más en pantallas pequeñas */
    }
}

/* === FEATURE CARDS === */
.feature-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Remover el padding aqu铆 - dejar que Tailwind lo maneje */
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10B981, #059669);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

/* Feature icon animation */
.feature-icon {
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Empujar caja verde al final */
.feature-card > div:last-child {
    margin-top: auto;
}

/* === FEATURE CARDS REVEAL === */
.feature-card {
    opacity: 0;
    transform: translateY(30px);
}

.feature-card.revealed {
    animation: revealFeature 0.6s ease-out forwards;
}

/* Stagger animation */
.feature-card:nth-child(1).revealed {
    animation-delay: 0s;
}

.feature-card:nth-child(2).revealed {
    animation-delay: 0.2s;
}

.feature-card:nth-child(3).revealed {
    animation-delay: 0.4s;
}

@keyframes revealFeature {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === FIX: Forzar posici贸n de elementos internos === */
.feature-card .feature-icon,
.feature-card > div:last-child {
    transform: none !important;
    translate: none !important;
}

/* === CHAT DEMO CONTAINER REVEAL === */
.chat-demo-container {
    opacity: 0;
    transform: scale(0.95);
}

.chat-demo-container.revealed {
    animation: revealChatDemo 0.8s ease-out forwards;
}

@keyframes revealChatDemo {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .chat-message {
        max-width: 90%;
    }
    
    .typewriter-text {
        font-size: 1.5rem;
    }
    
    .feature-card {
        margin-bottom: 1rem;
    }
}

/* === SMOOTH GRADIENT TRANSITION === */
#solution {
    background: linear-gradient(
        to bottom,
        #111827 0%,
        #1f2937 10%,
        #f9fafb 40%,
        #ffffff 70%,
        #ffffff 100%
    );
}

/* ===================================
   FEATURES SECTION STYLES
   =================================== */

/* === ANIMATED GRID BACKGROUND === */
.features-grid-background {
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(16, 185, 129, 0.1) 2px, transparent 2px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.1) 2px, transparent 2px);
    background-size: 60px 60px;
    animation: gridPulse 4s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

/* === GLOWING LINES === */
.glow-line {
    animation: glowLineMove 8s linear infinite;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

@keyframes glowLineMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* === DATA FLOW PARTICLES === */
.data-flow-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.data-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
    animation: dataFlow 6s linear infinite;
}

.data-particle:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
}

.data-particle:nth-child(2) {
    top: 40%;
    animation-delay: 1.2s;
}

.data-particle:nth-child(3) {
    top: 60%;
    animation-delay: 2.4s;
}

.data-particle:nth-child(4) {
    top: 80%;
    animation-delay: 3.6s;
}

.data-particle:nth-child(5) {
    top: 50%;
    animation-delay: 4.8s;
}

@keyframes dataFlow {
    0% {
        left: -10px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: calc(100% + 10px);
        opacity: 0;
    }
}

/* === 3D FEATURE CARDS === */
.feature-3d-card {
    perspective: 1000px;
}

.feature-3d-inner {
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-3d-card:hover .feature-3d-inner {
    transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(16, 185, 129, 0.2);
}

/* Shine effect on hover */
.feature-3d-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(16, 185, 129, 0.1) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.5s;
    border-radius: 1.5rem;
    pointer-events: none;
}

.feature-3d-card:hover .feature-3d-inner::before {
    opacity: 1;
}

/* === FEATURE CARDS REVEAL === */
.feature-3d-card {
    opacity: 0;
    transform: translateY(30px) rotateX(-15deg);
}

.feature-3d-card.revealed {
    animation: revealFeature3D 0.8s ease-out forwards;
}

/* Stagger animation */
.feature-3d-card:nth-child(1).revealed {
    animation-delay: 0s;
}

.feature-3d-card:nth-child(2).revealed {
    animation-delay: 0.15s;
}

.feature-3d-card:nth-child(3).revealed {
    animation-delay: 0.3s;
}

.feature-3d-card:nth-child(4).revealed {
    animation-delay: 0.45s;
}

.feature-3d-card:nth-child(5).revealed {
    animation-delay: 0.6s;
}

.feature-3d-card:nth-child(6).revealed {
    animation-delay: 0.75s;
}

@keyframes revealFeature3D {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .feature-3d-card:hover .feature-3d-inner {
        transform: scale(1.02);
    }
    
    .features-grid-background {
        background-size: 40px 40px;
    }
}

/* ===================================
   SOCIAL PROOF SECTION STYLES
   =================================== */

/* === TESTIMONIALS CAROUSEL === */
.testimonials-container {
    position: relative;
    padding: 20px 0;
}

/* Desktop: animación automática */
@media (min-width: 769px) {
    .testimonials-container {
        overflow: hidden;
        cursor: grab;
    }
    
    .testimonials-container:active {
        cursor: grabbing;
    }
    
    .testimonials-track {
        display: flex;
        gap: 2rem;
        animation: testimonialScroll 20s linear infinite;
        will-change: transform;
    }
}

/* Mobile: scroll manual sin animación */
@media (max-width: 768px) {
    .testimonials-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        cursor: grab;
    }
    
    .testimonials-container:active {
        cursor: grabbing;
    }
    
    /* Ocultar scrollbar pero mantener funcionalidad */
    .testimonials-container::-webkit-scrollbar {
        display: none;
    }
    
    .testimonials-container {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .testimonials-track {
        display: flex;
        gap: 1.5rem;
        padding: 0 1.5rem;
        /* SIN animación en mobile */
    }
}

@keyframes testimonialScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50%));
    }
}

/* === TESTIMONIAL CARDS === */
.testimonial-card {
    flex-shrink: 0;
    transition: all 0.3s ease;
    user-select: none;
}

/* Desktop */
@media (min-width: 769px) {
    .testimonial-card {
        min-width: 350px;
        max-width: 350px;
    }
}

/* Mobile con scroll snap */
@media (max-width: 768px) {
    .testimonial-card {
        min-width: 85vw;
        max-width: 85vw;
        scroll-snap-align: center;
    }
}

.testimonial-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #10B981;
}

/* === COUNTER NUMBERS === */
.counter-number {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* === PROGRESS BAR === */
.progress-bar-fill {
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === COUNTDOWN TIMER === */

/* Desktop: 4 cajas separadas */
@media (min-width: 769px) {
    .countdown-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    
    .countdown-box {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border: 2px solid #e5e7eb;
        transition: all 0.3s ease;
        text-align: center;
    }
    
    .countdown-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
        border-color: #10B981;
    }
}

/* Mobile: 1 caja horizontal con todos */
@media (max-width: 768px) {
    .countdown-container {
        background: white;
        border-radius: 1.5rem;
        padding: 1.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border: 2px solid #e5e7eb;
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 1rem;
    }
    
    .countdown-box {
        flex: 1;
        text-align: center;
        border: none;
        box-shadow: none;
        padding: 0;
        background: transparent;
    }
    
    /* Separadores entre números */
    .countdown-box:not(:last-child)::after {
        content: ':';
        position: absolute;
        right: -0.5rem;
        top: 50%;
        transform: translateY(-50%);
        color: #10B981;
        font-size: 2rem;
        font-weight: bold;
    }
    
    .countdown-box {
        position: relative;
    }
}

@media (max-width: 480px) {
    .countdown-container {
        padding: 1rem 0.75rem;
        gap: 0.5rem;
    }
    
    .countdown-box:not(:last-child)::after {
        right: -0.25rem;
        font-size: 1.5rem;
    }
}

/* === COUNTDOWN MOBILE - TAMAÑOS FIJOS === */

/* Mobile: números más pequeños con !important */
@media (max-width: 640px) {
    #countdown-days,
    #countdown-hours,
    #countdown-minutes,
    #countdown-seconds {
        font-size: 1.5rem !important; /* 24px - más pequeño */
        line-height: 1 !important;
    }
    
    .countdown-box .text-gray-600 {
        font-size: 0.7rem !important; /* 11px - labels más pequeños */
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 480px) {
    #countdown-days,
    #countdown-hours,
    #countdown-minutes,
    #countdown-seconds {
        font-size: 1.25rem !important; /* 20px - aún más pequeño */
    }
    
    .countdown-box .text-gray-600 {
        font-size: 0.65rem !important; /* 10px */
    }
    
    .countdown-container {
        padding: 1rem 0.5rem;
        gap: 0.25rem;
    }
}

/* iPhone SE y similares (muy pequeños) */
@media (max-width: 375px) {
    #countdown-days,
    #countdown-hours,
    #countdown-minutes,
    #countdown-seconds {
        font-size: 1.1rem !important; /* 18px - extra pequeño */
    }
    
    .countdown-box .text-gray-600 {
        font-size: 0.6rem !important; /* 9.6px */
    }
}

/* === PULSE CTA === */
.pulse-cta {
    animation: pulseCTA 2s ease-in-out infinite;
}

@keyframes pulseCTA {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.8);
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .testimonial-card {
        min-width: 280px;
        max-width: 280px;
    }
    
    .countdown-box {
        padding: 1rem;
    }
    
    #countdown-days,
    #countdown-hours,
    #countdown-minutes,
    #countdown-seconds {
        font-size: 2rem;
    }
}

/* === SMOOTH GRADIENT TRANSITION === */
#social-proof {
    background: linear-gradient(
        to bottom,
        #000000 0%,
        #111827 20%,
        #1f2937 40%,
        #f9fafb 70%,
        #ffffff 100%
    );
}

/* ===================================
   OBJECTIONS SECTION STYLES
   =================================== */

/* === SPLIT SCREEN PANELS === */
.split-screen-panel {
    transition: all 0.3s ease;
}

.split-screen-panel:hover {
    transform: translateY(-8px);
}

/* Chaos items shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-2deg); }
    75% { transform: translateX(5px) rotate(2deg); }
}

.chaos-item {
    animation: shake 2s ease-in-out infinite;
}

/* Order items fade in */
.order-item {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.order-item:nth-child(1) { animation-delay: 0.1s; }
.order-item:nth-child(2) { animation-delay: 0.2s; }
.order-item:nth-child(3) { animation-delay: 0.3s; }
.order-item:nth-child(4) { animation-delay: 0.4s; }

/* === FAQ ACCORDION === */
.faq-item {
    transition: all 0.3s ease;
}

.faq-question {
    cursor: pointer;
    user-select: none;
}

.faq-question:hover {
    background-color: #f9fafb;
}

.faq-icon {
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-item.active {
    border-color: #10B981;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
}

/* Smooth animation for accordion */
.faq-answer {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === FAQ REVEAL ON SCROLL === */
.faq-item {
    opacity: 0;
    transform: translateY(20px);
}

.faq-item.revealed {
    animation: revealFAQ 0.5s ease-out forwards;
}

/* Stagger animation */
.faq-item:nth-child(1).revealed { animation-delay: 0s; }
.faq-item:nth-child(2).revealed { animation-delay: 0.1s; }
.faq-item:nth-child(3).revealed { animation-delay: 0.15s; }
.faq-item:nth-child(4).revealed { animation-delay: 0.2s; }
.faq-item:nth-child(5).revealed { animation-delay: 0.25s; }

@keyframes revealFAQ {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === SPLIT SCREEN REVEAL === */
.split-screen-panel {
    opacity: 0;
    transform: scale(0.95);
}

.split-screen-panel.revealed {
    animation: revealPanel 0.6s ease-out forwards;
}

.chaos-panel.revealed {
    animation-delay: 0s;
}

.order-panel.revealed {
    animation-delay: 0.2s;
}

@keyframes revealPanel {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .split-screen-panel {
        margin-bottom: 2rem;
    }
    
    .faq-question {
        padding: 1.25rem;
    }
    
    .faq-answer {
        font-size: 0.95rem;
    }
}

/* ===================================
   FINAL CTA SECTION STYLES
   =================================== */

/* === AURORA BACKGROUND === */
.aurora-bg {
    background: linear-gradient(
        45deg,
        rgba(16, 185, 129, 0.3) 0%,
        rgba(5, 150, 105, 0.3) 25%,
        rgba(16, 185, 129, 0.3) 50%,
        rgba(5, 150, 105, 0.3) 75%,
        rgba(16, 185, 129, 0.3) 100%
    );
    background-size: 400% 400%;
    animation: auroraMove 15s ease infinite;
}

@keyframes auroraMove {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* === SUCCESS PARTICLES === */
.success-particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.success-particle {
    position: absolute;
    font-size: 24px;
    opacity: 0;
    animation: particleRise 8s ease-in infinite;
}

.success-particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.success-particle:nth-child(2) {
    left: 25%;
    animation-delay: 1s;
}

.success-particle:nth-child(3) {
    left: 40%;
    animation-delay: 2s;
}

.success-particle:nth-child(4) {
    left: 55%;
    animation-delay: 3s;
}

.success-particle:nth-child(5) {
    left: 70%;
    animation-delay: 4s;
}

.success-particle:nth-child(6) {
    left: 85%;
    animation-delay: 5s;
}

.success-particle:nth-child(7) {
    left: 20%;
    animation-delay: 6s;
}

.success-particle:nth-child(8) {
    left: 60%;
    animation-delay: 7s;
}

@keyframes particleRise {
    0% {
        bottom: -50px;
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(50px) rotate(360deg);
    }
}

/* === PULSE SLOW ANIMATION === */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

/* === GIANT CTA BUTTON === */
.giant-cta-button {
    animation: ctaPulseGlow 2s ease-in-out infinite;
    position: relative;
}

@keyframes ctaPulseGlow {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(255, 255, 255, 0.5),
            0 0 60px rgba(255, 255, 255, 0.3),
            0 20px 40px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(255, 255, 255, 0.8),
            0 0 80px rgba(255, 255, 255, 0.5),
            0 25px 50px rgba(0, 0, 0, 0.3);
    }
}

/* === TYPEWRITER CTA === */
.typewriter-cta::after {
    content: '|';
    margin-left: 2px;
    animation: blink 0.7s infinite;
}

.typewriter-cta.typing-complete::after {
    display: none;
}

/* === BENEFIT CHECKS === */
.benefit-check {
    opacity: 0;
    transform: translateX(-20px);
}

.benefit-check.revealed {
    animation: slideInLeft 0.5s ease-out forwards;
}

.benefit-check:nth-child(1).revealed {
    animation-delay: 0s;
}

.benefit-check:nth-child(2).revealed {
    animation-delay: 0.2s;
}

.benefit-check:nth-child(3).revealed {
    animation-delay: 0.4s;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === PHONE MOCKUP === */
.phone-mockup-container {
    animation: phoneFloat 6s ease-in-out infinite;
}

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

/* === SCREEN SLIDES === */
.screen-slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.screen-slide.active {
    opacity: 1;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .phone-mockup-container {
        display: none;
    }
    
    .giant-cta-button {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .success-particle {
        font-size: 18px;
    }
    
    .benefit-check {
        font-size: 1rem;
    }
}

/* ===================================
   FOOTER SECTION STYLES
   =================================== */

/* === GRID BACKGROUND === */
.grid-background-footer {
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(16, 185, 129, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* === FOOTER OPTIONS === */
.footer-option {
    transition: all 0.3s ease;
    cursor: default;
}

.footer-option:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
}

/* === FOOTER CTA BUTTON === */
.footer-cta-button {
    animation: footerCTAPulse 2s ease-in-out infinite;
}

@keyframes footerCTAPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(16, 185, 129, 0.4),
            0 10px 30px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(16, 185, 129, 0.6),
            0 15px 40px rgba(0, 0, 0, 0.4);
    }
}

/* === FOOTER OPTIONS REVEAL === */
.footer-option {
    opacity: 0;
    transform: translateY(20px);
}

.footer-option.revealed {
    animation: revealFooterOption 0.6s ease-out forwards;
}

.footer-option:nth-child(1).revealed {
    animation-delay: 0s;
}

.footer-option:nth-child(2).revealed {
    animation-delay: 0.2s;
}

@keyframes revealFooterOption {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .footer-option {
        padding: 1.5rem;
    }
    
    .footer-cta-button {
        width: 100%;
        padding: 1.25rem 2rem;
    }
}