/* Clientes Page Styles */

/* Hero Clientes */
.clients-hero-container{position:relative;z-index:5;max-width:1400px;margin:0 auto;padding:40px 40px 60px;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 140px)}
.clients-content{text-align:center;position:relative;z-index:10;max-width:900px}
.clients-heading{font-size:73px;font-weight:900;line-height:1;margin:0 0 30px;color:#FFF;opacity:0;animation:fadeInUp .8s ease-out forwards;animation-delay:.2s}
.clients-subheading{font-size:28px;font-weight:500;line-height:1.2;margin:0 0 50px;color:#FFF;opacity:0;animation:fadeInUp .8s ease-out forwards;animation-delay:.5s}
.clients-cta{display:inline-block;opacity:0;animation:fadeInUp .8s ease-out forwards;animation-delay:.8s}

/* Logo Grid Section */
.logo-grid-section{background-color:#fc0001;padding:80px 0;position:relative;overflow:hidden}
.logo-grid-container{max-width:1200px;margin:0 auto;padding:0 40px}
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;justify-items:center;align-items:center}
.centered-row{grid-column:1/-1;display:flex;justify-content:center;gap:40px;width:100%}
.logo-item{width:100%;max-width:200px;height:120px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(40px) scale(.9);transition:all .6s cubic-bezier(.4,0,.2,1)}
.logo-item.animate{opacity:1;transform:translateY(0) scale(1)}
.logo-item:hover{transform:translateY(-5px) scale(1.05)}
.logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:1;transition:all .3s ease}
.logo-item:hover .logo-img{animation:heartbeat 1.5s ease-in-out infinite}

/* Heart CTA */
.heart-cta{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:40px;opacity:0;transform:translateY(40px) scale(.9);transition:all .6s cubic-bezier(.4,0,.2,1);transition-delay:2s}
.heart-cta.animate{opacity:1;transform:translateY(0) scale(1)}
.heart-link{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:15px;transition:transform .3s ease}
.heart-link:hover{transform:translateY(-10px) scale(1.1)}
.heart-icon{width:80px;height:80px;fill:#91E100;filter:drop-shadow(0 4px 20px rgba(145,225,0,.3));animation:pulseHeart 2s ease-in-out infinite}
.heart-text{color:#FFF;font-size:24px;font-weight:700;letter-spacing:-.5px;text-shadow:0 2px 10px rgba(0,0,0,.2)}

/* Quote Section */
.quote-section{background-color:#FF0000;padding:30px 0;position:relative;overflow:hidden}
.quote-container{max-width:1200px;margin:0 auto;padding:0 40px;text-align:center}
.quote-text{font-size:30px;font-weight:700;line-height:1.2;color:#FFF;margin:0;max-width:1000px;margin-left:auto;margin-right:auto}
.quote-line-1,.quote-line-2{display:inline}
.green-heart{color:#91E100;font-size:1.1em;margin-left:8px;display:inline-block;animation:heartbeat 2s ease-in-out infinite}

/* Tracking Section */
.tracking-section{background-color:#FF0000;padding:30px 0;position:relative}
.tracking-section::before{content:'';position:absolute;top:-30px;left:0;right:0;height:60px;background:linear-gradient(to bottom,transparent,rgba(255,0,0,.8));filter:blur(8px);z-index:-1;pointer-events:none}
.tracking-container{max-width:1000px;margin:0 auto;padding:35px 40px;border:2px solid rgba(255,255,255,.3);border-radius:var(--radius-xxl);text-align:center}
.tracking-title{font-size:60px;font-weight:700;color:#FFF;margin:0 0 30px;line-height:1}
.tracking-form{max-width:700px;margin:0 auto;width:100%}
.tracking-input-wrapper{display:flex;gap:20px;align-items:center}
.tracking-input{flex:1;padding:18px 24px;font-size:18px;font-weight:400;border:none;border-radius:8px;background-color:#FFF;color:#333;outline:none;transition:.3s ease}
.tracking-input:focus{box-shadow:0 0 0 3px rgba(145,225,0,.3)}
.tracking-input::placeholder{color:var(--color-gray-light)}
.tracking-button{padding:18px 40px;font-size:18px;font-weight:500;background-color:#91E100;color:#000;border:2px solid #91E100;border-radius:8px;cursor:pointer;transition:.3s ease;white-space:nowrap}
.tracking-button:hover{background-color:#FFF;color:#FF0000;border-color:#FFF}
.tracking-button:active{transform:scale(.98)}
.tracking-error{margin-top:20px;color:#FFF;font-size:16px;font-weight:400;display:none}
.tracking-error.show{display:block}

/* Animations */
@keyframes heartbeat{0%,70%,100%{transform:scale(1)}35%{transform:scale(1.15)}}
@keyframes pulseHeart{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Staggered Animation Delays */
.logo-item:nth-child(1){transition-delay:.1s}
.logo-item:nth-child(2){transition-delay:.2s}
.logo-item:nth-child(3){transition-delay:.3s}
.logo-item:nth-child(4){transition-delay:.4s}
.logo-item:nth-child(5){transition-delay:.5s}
.logo-item:nth-child(6){transition-delay:.6s}
.logo-item:nth-child(7){transition-delay:.7s}
.logo-item:nth-child(8){transition-delay:.8s}
.logo-item:nth-child(9){transition-delay:.9s}
.logo-item:nth-child(10){transition-delay:1s}
.logo-item:nth-child(11){transition-delay:1.1s}
.logo-item:nth-child(12){transition-delay:1.2s}
.logo-item:nth-child(13){transition-delay:1.3s}
.logo-item:nth-child(14){transition-delay:1.4s}
.logo-item:nth-child(15){transition-delay:1.5s}
.logo-item:nth-child(16){transition-delay:1.6s}
.centered-row .logo-item:nth-child(1){transition-delay:1.7s}
.centered-row .logo-item:nth-child(2){transition-delay:1.8s}
.centered-row .logo-item:nth-child(3){transition-delay:1.9s}
.centered-row .logo-item:nth-child(4){transition-delay:2s}

/* Responsive */
@media(max-width:1140px){
.clients-hero-container{padding:30px}
.clients-heading{font-size:55px}
.clients-subheading{font-size:22px;margin-bottom:40px}
}

@media(max-width:768px){
.hero-section{display:flex;flex-direction:column;min-height:100vh}
.clients-hero-container{padding:20px;flex:1;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 75px)}
.clients-content{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.clients-heading{font-size:38px;margin-bottom:20px;line-height:1.1}
.clients-subheading{font-size:18px;margin-bottom:30px;line-height:1.3}
.clients-cta .btn-primary{font-size:16px;padding:14px 28px}
.logo-grid-section{padding:60px 0}
.logo-grid-container{padding:0 20px}
.logo-grid{grid-template-columns:repeat(2,1fr);gap:30px}
.centered-row{flex-direction:column;align-items:center}
.logo-item{max-width:150px;height:100px}
.heart-icon{width:60px;height:60px}
.heart-text{font-size:20px}
.quote-section{padding:50px 0}
.quote-container{padding:0 10px}
.quote-text{font-size:25px;line-height:1.15}
.quote-line-1,.quote-line-2{display:block}
.tracking-section{padding:20px 0}
.tracking-container{padding:30px 20px;margin:0 20px;border-radius:20px}
.tracking-title{font-size:36px;margin-bottom:20px}
.tracking-input-wrapper{flex-direction:column;gap:15px;width:100%}
.tracking-input{width:100%;font-size:16px;padding:16px 20px}
.tracking-button{width:100%;max-width:280px;font-size:16px;padding:16px 30px;margin:0 auto}
}

@media(max-width:480px){
.logo-grid{gap:20px}
.logo-item{max-width:130px;height:80px}
.heart-icon{width:50px;height:50px}
.heart-text{font-size:18px}
}

@media(max-width:390px){
.clients-heading{font-size:32px;margin-bottom:18px}
.clients-subheading{font-size:16px;margin-bottom:25px}
}

@media(max-width:380px){
.tracking-title{font-size:32px}
.tracking-container{padding:25px 15px;margin:0 15px}
.tracking-input{font-size:14px;padding:14px 16px}
.tracking-button{font-size:14px;padding:14px 24px;max-width:240px}
.quote-text{font-size:15px;line-height:1.1}
}

@media(max-width:320px){
.clients-heading{font-size:28px}
.clients-subheading{font-size:15px}
}