/**{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;font-size:21px;line-height:1.7}*/
html{font-size:17px !important}
*{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;line-height:1.7}
.font-heading{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#F9FAFB}
::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px}

@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)}70%{box-shadow:0 0 0 14px rgba(245,158,11,0)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
@keyframes typing{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
@keyframes shake-x{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}

.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}
.animate-marquee{animation:marquee 35s linear infinite}
.animate-wiggle{animation:wiggle .8s ease-in-out}
.animate-shake{animation:shake-x .6s ease-in-out}

.card-hover{transition:all .3s cubic-bezier(.4,0,.2,1)}
.card-hover:hover{transform:translateY(-5px);box-shadow:0 20px 40px -12px rgba(0,0,0,.12)}

.pricing-popular{position:relative}
.pricing-popular::before{content:'⭐ MÁS ELEGIDO';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#F59E0B,#FBBF24);color:#111827;font-weight:700;font-size:10px;padding:4px 14px;border-radius:9999px;letter-spacing:.06em;white-space:nowrap}

.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.faq-answer.open{max-height:500px}
.faq-icon{transition:transform .3s ease}
.faq-item.active .faq-icon{transform:rotate(180deg)}

/*.reveal{opacity:0;transform:translateY(20px);transition:all .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}*/

/* =============================================
   SCROLL REVEAL SYSTEM v2.0
   6 efectos + stagger + delays individuales
   ============================================= */

/* --- Direcciones: estado oculto --- */
[data-sr="up"],
.reveal{opacity:0;transform:translateY(28px)}
[data-sr="down"]{opacity:0;transform:translateY(-28px)}
[data-sr="left"]{opacity:0;transform:translateX(36px)}
[data-sr="right"]{opacity:0;transform:translateX(-36px)}
[data-sr="zoom"]{opacity:0;transform:scale(.92)}
[data-sr="fade"]{opacity:0}

/* --- Estado revelado --- */
[data-sr].sr-visible,
.reveal.visible{
    opacity:1;
    transform:translateY(0) translateX(0) scale(1);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}

/* --- Reduced motion --- */
@media(prefers-reduced-motion:reduce){
    [data-sr],.reveal{opacity:1!important;transform:none!important;transition:none!important}
    .h-in{animation:none!important;opacity:1!important}
}

/* =============================================
   HERO ENTRANCE (on load, no scroll)
   Animaciones de entrada para above-the-fold
   ============================================= */
@keyframes hero-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes hero-scale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}

.h-in{opacity:0;animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.h-in-up{animation-name:hero-up}
.h-in-right{animation-name:hero-right}
.h-in-scale{animation-name:hero-scale}
.h-in-fade{animation-name:hero-fade}

.toast{position:fixed;top:90px;right:20px;z-index:9999;transform:translateX(130%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.toast.show{transform:translateX(0)}

.modal-overlay{opacity:0;visibility:hidden;transition:all .3s ease}
.modal-overlay.active{opacity:1;visibility:visible}
.modal-content{transform:scale(.92) translateY(20px);transition:all .35s cubic-bezier(.4,0,.2,1)}
.modal-overlay.active .modal-content{transform:scale(1) translateY(0)}

.whatsapp-float{position:fixed;bottom:20px;right:20px;z-index:9999;animation:pulse-glow 2s ease-in-out infinite}
.whatsapp-float-tooltip{position:fixed;bottom:32px;right:88px;z-index:9998;background:#111827;color:white;padding:8px 14px;border-radius:12px;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;transform:translateX(10px);transition:all .3s ease;pointer-events:none}
.whatsapp-float-tooltip.show{opacity:1;transform:translateX(0);pointer-events:auto}
.whatsapp-float-tooltip::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:#111827}

.sticky-mobile-cta{position:fixed;bottom:0;left:0;right:0;z-index:9990;padding:12px 16px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid #E5E7EB;transform:translateY(100%);transition:transform .3s ease}
.sticky-mobile-cta.visible{transform:translateY(0)}

/*.gradient-text{background:linear-gradient(135deg,#FBBF24,#F59E0B,#D97706);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}*/
.gradient-text{background:linear-gradient(135deg,#DC2626,#af232b,#7F1D1D);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.typing-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#FBBF24;animation:typing 1.4s infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}

.exit-overlay{position:fixed;inset:0;z-index:9997;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .3s ease}
.exit-overlay.active{opacity:1;visibility:visible}