section:not(#hero){content-visibility:auto;contain-intrinsic-size:auto 900px} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{ --bg:#F7F7F5;--surface:#fff;--card:#F2F2F0;--border:#E2E0DC; --accent:#1D4ED8;--accent-dark:#1438A0;--accent-g:rgba(29,78,216,0.07); --text:#111;--muted:#6B7280;--shadow:0 4px 24px rgba(0,0,0,0.08); --font-d:'Syne',sans-serif;--font-b:'Inter',sans-serif; }html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}/* PROGRESS BAR */ #progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:9999;transition:width .1s}/* BANNER */ .top-banner{background:var(--accent);color:#fff;text-align:center;font-size:.78rem;font-weight:600;padding:.45rem 1rem;display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.top-banner a{color:#fff;font-weight:700}/* NAV */ nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:.85rem 5%;background:rgba(247,247,245,0.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:background .3s}.nav-logo{font-family:var(--font-d);font-size:1.05rem;font-weight:800;color:var(--text);text-decoration:none}.nav-logo span{color:var(--accent)}.nav-links{display:flex;gap:1.2rem;list-style:none}.nav-links a{color:var(--muted);text-decoration:none;font-size:.8rem;font-weight:500;transition:color .2s}.nav-links a:hover{color:var(--accent)}.nav-actions{display:flex;gap:.5rem;align-items:center}.theme-toggle{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;cursor:pointer;font-size:1rem;transition:all .2s}.nav-cta{background:var(--accent);color:#fff;text-decoration:none;font-size:.8rem;font-weight:600;padding:.44rem .9rem;border-radius:6px;transition:background .2s}.nav-cta:hover{background:var(--accent-dark)}.nav-wa{background:#25D366;color:#fff;text-decoration:none;font-size:.8rem;font-weight:600;padding:.44rem .9rem;border-radius:6px}/* HERO */ #hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:5rem 5% 4rem;background:var(--surface);position:relative;overflow:hidden}.hero-bg-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:.3;pointer-events:none}.hero-bg-blob{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(29,78,216,0.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-55%);pointer-events:none}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-g);border:1px solid rgba(29,78,216,0.2);border-radius:100px;padding:.3rem .9rem;font-size:.72rem;font-weight:700;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.6rem;position:relative}.hero-badge::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}h1{font-family:var(--font-d);font-size:clamp(2.2rem,6vw,4.8rem);font-weight:800;line-height:1.04;letter-spacing:-0.03em;max-width:820px;margin-bottom:1.2rem;color:var(--text);position:relative}h1 em{font-style:normal;color:var(--accent)}.hero-tagline{font-family:var(--font-d);font-weight:800;font-size:clamp(.92rem,1.9vw,1.12rem);color:var(--text);margin:.9rem 0 .5rem;letter-spacing:-.01em}.hero-sub{color:var(--muted);font-size:clamp(.9rem,1.8vw,1.1rem);max-width:500px;margin-bottom:2.3rem;position:relative}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;position:relative}.btn-primary{background:var(--accent);color:#fff;padding:.78rem 1.7rem;border-radius:8px;font-weight:600;font-size:.93rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:background .2s,transform .15s}.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)}.btn-green{background:#25D366;color:#fff;padding:.78rem 1.7rem;border-radius:8px;font-weight:600;font-size:.93rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:opacity .2s,transform .15s}.btn-green:hover{opacity:.88;transform:translateY(-2px)}/* COUNTERS */ .hero-stats{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:center;margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--border);width:100%;max-width:680px;position:relative}.stat-num{font-family:var(--font-d);font-size:2rem;font-weight:800;color:var(--accent)}.stat-label{font-size:.78rem;color:var(--muted);margin-top:.08rem}/* COMMON */ section{padding:5rem 5%;position:relative}.section-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}.section-title{font-family:var(--font-d);font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:.8rem;color:var(--text)}.section-sub{color:var(--muted);max-width:500px;font-size:.92rem;line-height:1.65}.reveal{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}.reveal{opacity:1 !important;transform:none !important}.reveal.animate.visible{opacity:1;transform:none}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}/* AVANT/APRES SLIDER */ #avantapres{background:var(--surface)}/* ---------- GALERIE AVANT/APRÈS (défilement automatique) ---------- */ /* Avant/après: cabecera centrada */ #avantapres .section-title::after{margin-left:auto;margin-right:auto}#avantapres .section-sub{margin-left:auto;margin-right:auto}#avantapres .section-eyebrow{justify-content:center}.ba-wrap{margin:2.5rem auto 0;max-width:900px;width:100%}.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start;margin:0 auto;overflow:hidden;transition:opacity .5s ease,height .65s cubic-bezier(.22,1,.36,1)}.ba-col{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);margin:0;background:var(--card);aspect-ratio:1/var(--ba-ratio,1.3)}.ba-col img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.ba-tag{position:absolute;top:.7rem;font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,0.55);border-radius:100px;padding:.28rem .7rem}.ba-tag-avant{left:.7rem}.ba-tag-apres{right:.7rem;background:var(--accent)}.ba-dots{display:flex;gap:.4rem;margin-top:1rem;justify-content:center}.ba-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:background .25s,transform .25s}.ba-dot.on{background:var(--accent);transform:scale(1.35)}.ba-meta{margin-top:.7rem;font-size:.88rem;color:var(--muted);text-align:center}.ba-meta b{color:var(--text)}@media (prefers-reduced-motion: reduce){.ba-pair{transition:none}}/* BOUTIQUE */ #boutique{background:var(--surface)}.finder-box{background:var(--accent);border-radius:16px;padding:2rem;margin-top:2rem;color:#fff}.finder-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.8rem;align-items:end}.finder-row > div{display:flex;flex-direction:column;gap:.35rem;min-width:0}.finder-row select,.finder-row button{width:100%;min-height:46px}@media(max-width:760px){.finder-row{grid-template-columns:1fr 1fr;gap:.7rem}.finder-row > div:nth-child(3){grid-column:span 2}.finder-row > button{grid-column:span 2}}@media(max-width:430px){.finder-row{grid-template-columns:1fr}.finder-row > div:nth-child(3),.finder-row > button{grid-column:span 1}.finder-box{padding:1.3rem !important}}.shop-notice{display:flex;align-items:center;gap:.55rem;background:var(--accent-g);border:1px solid rgba(29,78,216,0.12);border-radius:8px;padding:.72rem .95rem;margin-bottom:1.5rem;font-size:.8rem;color:var(--muted)}.shop-notice strong{color:var(--accent)}.shop-tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin:1.8rem 0 1.3rem}.shop-tab{background:var(--card);border:1px solid var(--border);border-radius:100px;padding:.4rem .95rem;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;font-family:var(--font-b)}.shop-tab:hover,.shop-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1.1rem}.product-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;display:none}/* Tarjeta de catalogo: toda la superficie clicable (un solo boton visible) */ .product-card{position:relative}.product-name a{display:inline-block;padding:.25rem 0}.product-name a::after{content:'';position:absolute;inset:0;z-index:1}.product-card .product-cta{position:relative;z-index:2}.product-card.visible{display:block}.product-card:hover{border-color:var(--accent);box-shadow:0 5px 22px rgba(29,78,216,0.08);transform:translateY(-3px)}.product-img{width:100%;aspect-ratio:16/9;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;border-bottom:1px solid var(--border);overflow:hidden}.product-badge{position:absolute;top:.55rem;left:.55rem;background:var(--accent);color:#fff;font-size:.6rem;font-weight:700;padding:.16rem .52rem;border-radius:100px}.product-badge.green{background:#16a34a}.product-badge.orange{background:#EA580C}.product-body{padding:1rem}.product-category{font-size:.65rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.25rem}.product-name{font-family:var(--font-d);font-size:.9rem;font-weight:700;margin-bottom:.3rem;line-height:1.3;color:var(--text)}.product-desc{color:var(--muted);font-size:.77rem;line-height:1.6;margin-bottom:.8rem}.product-specs{display:flex;flex-wrap:wrap;gap:.28rem;margin-bottom:.85rem}.product-spec{font-size:.62rem;font-weight:600;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:.13rem .48rem;color:var(--muted)}.product-footer{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.product-price{font-family:var(--font-d);font-size:1.1rem;font-weight:800;color:var(--text)}.product-cta{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:.48rem .88rem;font-size:.78rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .2s;white-space:nowrap}.product-cta:hover{background:var(--accent-dark)}/* PROCESS */ #process{background:var(--surface)}.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));margin-top:3rem;position:relative}.process-steps::before{content:'';position:absolute;top:20px;left:0;right:0;height:1px;background:var(--border)}.step{padding:0 1.1rem 1.4rem;position:relative;z-index:1}.step-circle{width:40px;height:40px;background:var(--surface);border:2px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:800;font-size:.85rem;color:var(--accent);margin-bottom:1.1rem}.step h4{font-family:var(--font-d);font-size:.92rem;font-weight:700;margin-bottom:.32rem;color:var(--text)}.step p{color:var(--muted);font-size:.8rem;line-height:1.6}/* AVIS */ #avis{background:var(--bg)}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem;margin-top:2.5rem}.testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:border-color .2s}.testimonial-card:hover{border-color:var(--accent)}.stars{color:#F59E0B;font-size:.88rem;margin-bottom:.78rem;letter-spacing:.1em}.testimonial-text{color:var(--muted);font-size:.84rem;line-height:1.7;margin-bottom:1rem;font-style:italic}.testimonial-author{display:flex;align-items:center;gap:.62rem}.author-avatar{width:33px;height:33px;border-radius:50%;background:var(--accent-g);border:1px solid rgba(29,78,216,0.18);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;color:var(--accent);flex-shrink:0}.author-name{font-weight:600;font-size:.84rem;color:var(--text)}.author-car{color:var(--muted);font-size:.7rem}/* FAQ */ #faq{background:var(--bg)}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:2.5rem}.faq-item{border:1px solid var(--border);border-radius:10px;overflow:hidden}.faq-item.open{border-color:var(--accent)}.faq-question{width:100%;background:var(--surface);border:none;color:var(--text);text-align:left;font-family:var(--font-b);font-size:.86rem;font-weight:600;padding:.95rem 1.1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.8rem}.faq-question:hover{color:var(--accent)}.faq-arrow{color:var(--accent);font-size:1rem;transition:transform .25s;flex-shrink:0;font-weight:700}.faq-item.open .faq-arrow{transform:rotate(45deg)}.faq-answer{color:var(--muted);font-size:.82rem;line-height:1.7;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s;padding:0 1.1rem}.faq-item.open .faq-answer{max-height:300px;padding:.15rem 1.1rem .95rem}/* CHAT */ .chat-widget{position:fixed;bottom:5rem;right:1.5rem;z-index:300;width:320px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.12);display:none;flex-direction:column;overflow:hidden}.chat-widget.open{display:flex}.chat-header{background:var(--accent);color:#fff;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between}.chat-header-info{display:flex;align-items:center;gap:.7rem}.chat-avatar{width:36px;height:36px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.chat-name{font-family:var(--font-d);font-size:.95rem;font-weight:700}.chat-status{font-size:.72rem;opacity:.8}.chat-close{background:none;border:none;color:#fff;cursor:pointer;font-size:1.1rem}.chat-messages{flex:1;padding:1rem;max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:.8rem}.chat-msg{max-width:80%;padding:.6rem .9rem;border-radius:10px;font-size:.82rem;line-height:1.5}.chat-msg.bot{background:var(--card);color:var(--text);align-self:flex-start;border-bottom-left-radius:2px}.chat-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 1rem}.chat-quick-btn{background:var(--accent-g);border:1px solid rgba(29,78,216,0.2);color:var(--accent);border-radius:100px;padding:.3rem .7rem;font-size:.72rem;font-weight:600;cursor:pointer;font-family:var(--font-b)}.chat-input-row{display:flex;gap:.5rem;padding:.8rem 1rem;border-top:1px solid var(--border)}.chat-input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.5rem .8rem;font-family:var(--font-b);font-size:.82rem;color:var(--text);outline:none}.chat-send{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:.5rem .8rem;cursor:pointer;font-size:.9rem}.chat-toggle{position:fixed;bottom:1.5rem;right:1.5rem;z-index:301;background:var(--accent);color:#fff;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;box-shadow:0 4px 16px rgba(29,78,216,0.4);border:none;transition:transform .2s}.chat-toggle:hover{transform:scale(1.1)}.chat-notif{position:absolute;top:-3px;right:-3px;background:#EF4444;color:#fff;width:18px;height:18px;border-radius:50%;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center}/* CONTACT */ #contact{background:var(--surface)}.contact-map{border-radius:14px;overflow:hidden;height:100%;min-height:320px;border:1px solid var(--border)}.contact-map iframe{width:100%;height:100%;min-height:320px;border:none;display:block}/* FOOTER */ footer{background:var(--text);color:rgba(255,255,255,0.48);padding:2.5rem 5% 1.5rem}.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}.footer-logo{font-family:var(--font-d);font-size:1.05rem;font-weight:800;color:#fff;text-decoration:none;display:block;margin-bottom:.65rem}.footer-logo span{color:#60A5FA}.footer-desc{font-size:.8rem;line-height:1.65}.footer-col h5{font-family:var(--font-d);font-size:.8rem;font-weight:700;color:#fff;margin-bottom:.75rem}.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}.footer-col ul a{color:rgba(255,255,255,0.48);text-decoration:none;font-size:.78rem;transition:color .2s}.footer-col ul a:hover{color:#fff}.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,0.1);font-size:.73rem;flex-wrap:wrap;gap:.5rem}/* RESPONSIVE */ @media(max-width:900px){ .contact-wrapper,.footer-top{grid-template-columns:1fr} .faq-grid{grid-template-columns:1fr} .nav-cta{display:none} }@media(max-width:600px){.nav-links{display:none}.hero-stats{gap:1.5rem}.process-steps{grid-template-columns:1fr 1fr}.process-steps::before{display:none}.footer-top{grid-template-columns:1fr}.chat-widget{width:calc(100vw - 2rem);right:1rem}.top-banner{font-size:.68rem;padding:.4rem .6rem;gap:.5rem;flex-direction:column;line-height:1.4}.top-banner a{font-size:.72rem}.contact-map{min-height:240px}.contact-map iframe{min-height:240px}}@media(prefers-reduced-motion:reduce){*,.reveal{animation:none!important;transition:none!important}}/* ====== ANIMATIONS ====== */ /* Page loader */ .page-loader{ position:fixed; inset:0; background:var(--surface); z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; transition:opacity .6s ease, visibility .6s ease; }.page-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }.loader-logo{ font-family:var(--font-d); font-size:1.5rem; font-weight:800; color:var(--text); }.loader-logo span{ color:var(--accent); }.loader-bar{ width:180px; height:3px; background:var(--border); border-radius:3px; overflow:hidden; }.loader-fill{ height:100%; background:var(--accent); border-radius:3px; animation:loader-anim .4s ease forwards; }@keyframes loader-anim { 0%{width:0%} 100%{width:100%} }/* Particles */ .particle{ position:absolute; border-radius:50%; background:var(--accent); opacity:0; animation:particle-rise linear infinite; pointer-events:none; }@keyframes particle-rise { 0%{transform:translateY(100px);opacity:0} 20%{opacity:.5} 80%{opacity:.2} 100%{transform:translateY(-600px);opacity:0} }/* Gradient animated text */ .grad-text{ background:linear-gradient(135deg,#60A5FA 0%,#1D4ED8 50%,#7C3AED 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }/* Button shine */ .btn-primary,.btn-green{ position:relative; overflow:hidden; }.testimonial-card{ transition:transform .3s ease, box-shadow .3s ease, border-color .2s !important; }.testimonial-card:hover{ transform:translateY(-6px) !important; box-shadow:0 16px 32px rgba(0,0,0,0.08) !important; }.product-card{ transition:transform .3s ease, box-shadow .3s ease, border-color .2s !important; }.product-card:hover{ transform:translateY(-6px) !important; box-shadow:0 16px 32px rgba(29,78,216,0.1) !important; }/* Testimonial top border */ .testimonial-card{ position:relative; overflow:hidden; }.testimonial-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),#7C3AED); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; border-radius:3px 3px 0 0; }.testimonial-card:hover::before{ transform:scaleX(1); }/* Step circles */ .step-circle{ transition:transform .3s ease, background .3s, color .3s; }.step:hover .step-circle{ transform:scale(1.2); background:var(--accent); color:#fff; }/* Nav underline */ .nav-links a{ position:relative; }.nav-links a::after{ content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--accent); transition:width .3s ease; border-radius:2px; }.nav-links a:hover::after{ width:100%; }/* Progress bar glow */ /* FAQ hover */ .faq-item{ transition:transform .2s ease, box-shadow .2s ease; }.faq-item:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.06); }/* Smooth page entrance */ body{ animation:page-in .8s cubic-bezier(.16,1,.3,1) both; }@keyframes page-in { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }/* Magnetic buttons */ .btn-primary,.btn-green{ transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease !important; }/* Glowing border on hover */ .glow-hover{ transition:box-shadow .3s ease, border-color .3s ease !important; }.glow-hover:hover{ box-shadow:0 0 0 3px var(--accent-g), 0 8px 32px rgba(29,78,216,0.15) !important; border-color:var(--accent) !important; }/* Counter odometer style */ .stat-num{ position:relative; overflow:hidden; }/* Typewriter cursor */ #typing-text::after{ content:'|'; animation:blink .7s step-end infinite; color:var(--accent); margin-left:2px; }@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }/* Progress indicator sections */ .section-progress{ position:fixed; right:1.5rem; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:.5rem; z-index:100; }.section-dot{ width:8px; height:8px; border-radius:50%; background:var(--border); transition:background .3s, transform .3s; cursor:pointer; }/* Smooth scroll line */ .scroll-line{ position:fixed; left:0; top:0; width:3px; height:0%; background:linear-gradient(180deg,var(--accent),#7C3AED); z-index:9998; transition:height .1s ease; border-radius:0 3px 3px 0; }/* Testimonial slide */ .testimonials-grid{ position:relative; }/* noise removed for perf */ /* Hero badge enhanced */ .hero-badge{ box-shadow:0 0 20px rgba(29,78,216,0.2); }.hero-badge::before{ animation:pulse-dot 2s ease-in-out infinite; }@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(29,78,216,0.4)} 50%{box-shadow:0 0 0 6px rgba(29,78,216,0)} }/* Stats enhanced */ .hero-stats{ position:relative; }.hero-stats::before{ content:''; position:absolute; inset:-1px; background:linear-gradient(135deg,transparent,rgba(29,78,216,0.05),transparent); border-radius:12px; }/* Nav scroll effect */ nav.scrolled{ box-shadow:0 4px 24px rgba(0,0,0,0.06); }/* Smooth everything */ *{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }/* ====== NIVEL PRO ====== */ /* Mobile sticky action bar */ .mobile-bar{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:400; background:var(--surface); border-top:1px solid var(--border); padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); grid-template-columns:1fr 1fr 1fr; gap:.5rem; box-shadow:0 -4px 20px rgba(0,0,0,0.08); }.mobile-bar a{ display:flex; flex-direction:column; align-items:center; gap:.15rem; text-decoration:none; font-size:.68rem; font-weight:700; padding:.45rem .3rem; border-radius:10px; transition:transform .15s; }.mobile-bar a:active{ transform:scale(.94); }.mb-call{ background:var(--accent); color:#fff; }.mb-wa{ background:#25D366; color:#fff; }.mb-devis{ background:var(--card); color:var(--text); border:1px solid var(--border); }.mobile-bar .mb-ico{ font-size:1.1rem; }@media(max-width:768px){.mobile-bar{ display:grid; }footer{ padding-bottom:6rem; }.section-progress{ display:none; }/* ===== UNA SOLA CAPA DE BOTONES FLOTANTES ===== En movil la barra inferior ya ofrece Appeler / WhatsApp / Devis. Todo lo demas que flotaba encima se retira para no saturar. */ .chat-toggle{ display:none !important; }.chat-widget{ display:none !important; }/* Volver arriba: discreto,pegado al borde y sin tapar la barra */ .back-top{ bottom:5.4rem !important; right:.7rem !important; width:36px !important; height:36px !important; font-size:.9rem !important; opacity:0; background:rgba(0,0,0,.32) !important; color:#fff !important; border:none !important; box-shadow:none !important; }.back-top.show{ opacity:.75 !important; visibility:visible !important; }/* Cookies: encima de la barra,no debajo */ .ck-bar{ bottom:5.4rem !important; }}/* Back to top */ .back-top{ position:fixed; bottom:6rem; right:1.5rem; z-index:299; width:44px; height:44px; border-radius:50%; background:var(--surface); border:1px solid var(--border); color:var(--accent); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s, transform .2s; box-shadow:0 4px 16px rgba(0,0,0,0.1); }.back-top.show{ opacity:1; visibility:visible; }.back-top:hover{ transform:translateY(-3px); }@media(max-width:768px){.back-top{ bottom:10.5rem; right:1rem; }}/* Hero CarPlay screen mockup */ .hero-mockup{ margin-top:3rem; width:100%; max-width:560px; position:relative; }.mockup-screen{ background:#0B0F1A; border-radius:18px; padding:14px 16px; box-shadow:0 30px 60px rgba(0,0,0,0.25), 0 0 0 6px #1a2030, 0 0 0 8px #2a3348; animation:mockup-float 5s ease-in-out infinite; }@keyframes mockup-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }.mockup-statusbar{ display:flex; justify-content:space-between; color:#8b95a8; font-size:.6rem; font-weight:600; margin-bottom:10px; }.mockup-apps{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.mockup-app{ aspect-ratio:1; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; transition:transform .2s; cursor:pointer; }.mockup-app:hover{ transform:scale(1.12); }.mockup-dock{ display:flex; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid #1e2637; justify-content:center; }.mockup-dot{ width:5px; height:5px; border-radius:50%; background:#3b465e; }.mockup-dot.on{ background:#3B82F6; }.mockup-glow{ position:absolute; inset:-20%; background:radial-gradient(ellipse at center, rgba(59,130,246,0.15) 0%, transparent 60%); pointer-events:none; z-index:-1; }/* Premium button press */ .btn-primary:active,.btn-green:active,.nav-cta:active{ transform:scale(.96) !important; }/* Urgency pill in banner */ .urgency-dot{ display:inline-block; width:7px; height:7px; background:#4ADE80; border-radius:50%; margin-right:.35rem; animation:pulse-dot 1.5s ease-in-out infinite; vertical-align:middle; }/* Exit intent popup */ .exit-popup{ position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); z-index:1500; display:none; align-items:center; justify-content:center; padding:1.5rem; }.exit-popup.show{ display:flex; animation:popup-in .3s ease; }@keyframes popup-in { from{opacity:0} to{opacity:1} }.exit-box{ background:var(--surface); border-radius:20px; padding:2.5rem 2rem; max-width:420px; width:100%; text-align:center; position:relative; animation:box-in .4s cubic-bezier(.34,1.56,.64,1); box-shadow:0 30px 80px rgba(0,0,0,0.3); }@keyframes box-in { from{transform:scale(.8) translateY(30px);opacity:0} to{transform:none;opacity:1} }.exit-close{ position:absolute; top:1rem; right:1rem; background:var(--card); border:1px solid var(--border); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:.9rem; color:var(--muted); display:flex; align-items:center; justify-content:center; }.exit-gift{ font-size:3rem; margin-bottom:.8rem; display:inline-block; animation:gift-shake 2s ease-in-out infinite; }@keyframes gift-shake { 0%,90%,100%{transform:rotate(0)} 92%{transform:rotate(-8deg)} 94%{transform:rotate(8deg)} 96%{transform:rotate(-6deg)} 98%{transform:rotate(6deg)} }.exit-title{ font-family:var(--font-d); font-size:1.4rem; font-weight:800; color:var(--text); margin-bottom:.5rem; }.exit-sub{ color:var(--muted); font-size:.88rem; margin-bottom:1.4rem; }.exit-code{ font-family:var(--font-d); font-size:1.5rem; font-weight:800; letter-spacing:.12em; color:var(--accent); background:var(--card); border:2px dashed var(--accent); border-radius:12px; padding:.75rem 1rem; margin-bottom:1.2rem; cursor:pointer; transition:background .2s, transform .15s; }.exit-code:hover{ background:var(--accent-g); }.exit-code:active{ transform:scale(.97); }.exit-cta{ display:block; background:var(--accent); color:#fff; text-decoration:none; padding:.85rem; border-radius:10px; font-weight:700; font-size:.92rem; transition:background .2s; }.exit-cta:hover{ background:var(--accent-dark); }/* Countdown timer */ /* Testimonials auto-scroll on mobile */ @media(max-width:768px){ .testimonials-grid { display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem; padding-bottom:1rem; -webkit-overflow-scrolling:touch; } .testimonial-card { min-width:82%; scroll-snap-align:center; } }.live-dot{ width:7px; height:7px; background:#4ADE80; border-radius:50%; animation:pulse-dot 1.5s ease-in-out infinite; }@keyframes icon-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }/* Section titles animated underline */ .section-title::after{ content:''; display:block; width:52px; height:4px; margin-top:.7rem; border-radius:4px; background:linear-gradient(90deg,var(--accent),#7C3AED); background-size:200%; animation:underline-flow 3s linear infinite; }@keyframes underline-flow { 0%{background-position:0%} 100%{background-position:200%} }/* Chat toggle bounce periodically */ .chat-toggle{ animation:chat-bounce 8s ease-in-out infinite; }@keyframes chat-bounce { 0%,90%,100%{transform:translateY(0)} 92%{transform:translateY(-8px)} 95%{transform:translateY(0)} 97%{transform:translateY(-4px)} }/* Reduce all on prefers-reduced-motion */ @media(prefers-reduced-motion:reduce){ .service-icon, .why-icon, .gallery-item img, .stat-num, .step-circle, .fidelite-icon, .form-submit, .rdv-submit, .chat-toggle, .trust-badge, .nav-wa, .zone-dot::after, .mockup-screen, .exit-gift { animation:none !important; } }/* ====== HERO SPLIT PRO ====== */ @media(min-width:900px){ #hero { flex-direction:row; text-align:left; align-items:center; justify-content:space-between; gap:3rem; padding:4rem 6% 5rem; } .hero-left { flex:1; max-width:560px; display:flex; flex-direction:column; align-items:flex-start; } .hero-right { flex:1; max-width:520px; display:flex; flex-direction:column; align-items:center; } #hero h1 { font-size:clamp(2.6rem,4.2vw,4.2rem); } .hero-actions { justify-content:flex-start; } .hero-mockup { margin-top:0; } .trust-row { justify-content:flex-start; } .hero-stats { border-top:none; padding-top:0; margin-top:2.2rem; gap:2rem; justify-content:flex-start; max-width:none; } .scroll-indicator { display:none; } }/* ====== WIZARD DEVIS EXPRESS ====== */ .wizard{ max-width:640px; margin:2.5rem 0 0; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:2rem; position:relative; overflow:hidden; box-shadow:var(--shadow); }.wizard-progress{ display:flex; gap:.4rem; margin-bottom:1.8rem; }.wizard-progress span{ flex:1; height:4px; border-radius:4px; background:var(--border); transition:background .3s; }.wizard-progress span.done{ background:var(--accent); }.wizard-step{ display:none; animation:step-in .35s ease; }.wizard-step.active{ display:block; }@keyframes step-in { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }.wizard-q{ font-family:var(--font-d); font-size:1.25rem; font-weight:800; margin-bottom:.4rem; color:var(--text); }.wizard-hint{ font-size:.82rem; opacity:.65; margin-bottom:1.3rem; }.wizard-opts{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }@media(max-width:600px){.wizard-opts{ grid-template-columns:1fr; }}.wizard-opt{ background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:1rem 1.1rem; cursor:pointer; text-align:left; color:var(--text); font-family:var(--font-b); font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:.7rem; transition:background .2s, border-color .2s, transform .15s; }.wizard-opt:hover{ background:var(--accent-g); border-color:var(--accent); transform:translateY(-2px); }.wizard-opt .wo-ico{ font-size:1.3rem; }.wizard-opt .wo-sub{ display:block; font-size:.72rem; font-weight:500; opacity:.65; margin-top:.1rem; }.wizard-input{ width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:.9rem 1.1rem; color:var(--text); font-family:var(--font-b); font-size:.95rem; outline:none; margin-bottom:.8rem; }.wizard-input::placeholder{ color:var(--muted); }.wizard-input:focus{ border-color:var(--accent); background:var(--surface); }.wizard-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; }.wizard-back{ background:none; border:none; color:var(--muted); font-family:var(--font-b); font-size:.85rem; font-weight:600; cursor:pointer; padding:.5rem; }.wizard-back:hover{ color:var(--text); }.wizard-next{ background:var(--accent); color:#fff; border:none; border-radius:10px; padding:.75rem 1.6rem; font-family:var(--font-b); font-size:.9rem; font-weight:700; cursor:pointer; transition:transform .15s, opacity .2s, background .2s; }.wizard-next:hover{ transform:translateY(-2px); background:var(--accent-dark); }.wizard-recap{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.3rem; margin-bottom:1.2rem; }.wizard-done{ text-align:center; padding:1rem 0; }.wizard-done .wd-ico{ font-size:3.5rem; display:block; margin-bottom:.8rem; animation:icon-breathe 2s ease-in-out infinite; }/* ====== GOOGLE STYLE REVIEWS ====== */ .g-badge{ display:inline-flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.6rem 1.1rem; margin-top:1.2rem; box-shadow:0 4px 14px rgba(0,0,0,0.05); }.g-logo{ font-weight:800; font-size:1.05rem; }.g-logo .g1{color:#4285F4}.g-logo .g2{color:#EA4335}.g-logo .g3{color:#FBBC05}.g-logo .g4{color:#4285F4}.g-logo .g5{color:#34A853}.g-logo .g6{color:#EA4335}.g-score{ font-family:var(--font-d); font-weight:800; font-size:1.05rem; color:var(--text); }.g-stars{ color:#FBBC05; letter-spacing:.05em; }.g-count{ font-size:.75rem; color:var(--muted); }.g-reviews-btn{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; background:var(--surface); border:2px solid var(--border); border-radius:100px; padding:.95rem 1.9rem; font-family:var(--font-b); font-size:1rem; font-weight:800; color:var(--text); box-shadow:0 6px 20px rgba(0,0,0,0.07); transition:border-color .2s, transform .18s, box-shadow .2s; position:relative; }.g-reviews-btn:hover{ border-color:#4285F4; transform:translateY(-3px); box-shadow:0 14px 34px rgba(66,133,244,0.28); }.g-reviews-btn::after{ content:''; position:absolute; inset:-4px; border-radius:100px; border:2px solid rgba(66,133,244,0.35); opacity:0; animation:g-pulse 2.4s ease-out infinite; pointer-events:none; }@keyframes g-pulse { 0%{opacity:.7;transform:scale(.98)} 70%{opacity:0;transform:scale(1.06)} 100%{opacity:0} }.g-reviews-btn.ghost{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; box-shadow:0 6px 20px rgba(29,78,216,0.28); }.g-reviews-btn.ghost::after{ display:none; }.g-reviews-btn.ghost:hover{ background:var(--accent-dark); border-color:var(--accent-dark); box-shadow:0 14px 34px rgba(29,78,216,0.34); }.g-logo-sm{ font-weight:800; font-size:1.1rem; }.g-logo-sm .g1{color:#4285F4}.g-logo-sm .g2{color:#EA4335}.g-logo-sm .g3{color:#FBBC05}.g-logo-sm .g4{color:#4285F4}.g-logo-sm .g5{color:#34A853}.g-logo-sm .g6{color:#EA4335}.g-arrow{ font-size:.9rem; opacity:.6; }.g-cta-wrap{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; align-items:center; margin-top:1.8rem; }.g-cta-note{ width:100%; text-align:center; font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:-.2rem; }@media(max-width:520px){.g-reviews-btn{ width:100%; justify-content:center; padding:.9rem 1.2rem; font-size:.92rem; }}.verified-badge{ display:inline-flex; align-items:center; gap:.25rem; font-size:.66rem; color:#4285F4; font-weight:700; }/* ====== MOBILE MENU ====== */ .menu-btn{ display:none; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:.45rem .65rem; cursor:pointer; font-size:1.05rem; color:var(--text); }@media(max-width:900px){.menu-btn{ display:block; }.nav-wa{ display:none; }}.mobile-menu{ position:fixed; top:0; right:-100%; bottom:0; width:min(320px,85vw); background:var(--surface); z-index:500; transition:right .35s cubic-bezier(.16,1,.3,1); box-shadow:-10px 0 40px rgba(0,0,0,0.15); display:flex; flex-direction:column; padding:1.5rem; }.mobile-menu.open{ right:0; }.mm-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:499; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }.mm-overlay.open{ opacity:1; visibility:visible; }.mm-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }.mm-logo{ font-family:var(--font-d); font-weight:800; font-size:1.05rem; color:var(--text); }.mm-logo span{ color:var(--accent); }.mm-close{ background:var(--card); border:1px solid var(--border); border-radius:8px; width:36px; height:36px; cursor:pointer; font-size:1rem; color:var(--text); }.mm-links{ display:flex; flex-direction:column; gap:.2rem; flex:1; overflow-y:auto; }.mm-links a{ color:var(--text); text-decoration:none; font-size:1rem; font-weight:600; padding:.75rem .5rem; border-radius:10px; display:flex; align-items:center; gap:.7rem; transition:background .2s, color .2s; }.mm-links a:hover{ background:var(--accent-g); color:var(--accent); }.mm-footer{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; padding-top:1rem; border-top:1px solid var(--border); }.mm-footer a{ text-align:center; padding:.75rem; border-radius:10px; text-decoration:none; font-weight:700; font-size:.85rem; }.mm-tel{ background:var(--accent); color:#fff; }.mm-wa{ background:#25D366; color:#fff; }/* Anchor offset fix - sections not hidden under sticky nav */ section{ scroll-margin-top: 72px; }/* ====== CONNECTION SCENE (waves/app icons used inside .connect-scene-inline) ====== */ .cs-waves{ display:flex; gap:6px; align-items:center; }.cs-wave{ width:9px; height:9px; border-radius:50%; background:var(--accent); opacity:.25; animation:wave-travel 1.6s ease-in-out infinite; }.cs-wave:nth-child(2){ animation-delay:.2s; }.cs-wave:nth-child(3){ animation-delay:.4s; }.cs-wave:nth-child(4){ animation-delay:.6s; }@keyframes wave-travel { 0%,100%{opacity:.2;transform:scale(.8)} 50%{opacity:1;transform:scale(1.25)} }.cs-app{ width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.85rem; animation:app-pop 3s ease-in-out infinite; }.cs-app:nth-child(2){ animation-delay:.3s; }.cs-app:nth-child(3){ animation-delay:.6s; }@keyframes app-pop { 0%,20%,100%{transform:scale(1)} 10%{transform:scale(1.2)} }/* Colored avatars */ .author-avatar.av-1{ background:#DBEAFE; color:#1D4ED8; border-color:#93C5FD; }.author-avatar.av-2{ background:#FCE7F3; color:#DB2777; border-color:#F9A8D4; }.author-avatar.av-3{ background:#D1FAE5; color:#059669; border-color:#6EE7B7; }.author-avatar.av-4{ background:#FEF3C7; color:#D97706; border-color:#FCD34D; }.author-avatar.av-5{ background:#EDE9FE; color:#7C3AED; border-color:#C4B5FD; }.author-avatar.av-6{ background:#FFE4E6; color:#E11D48; border-color:#FDA4AF; }/* Active nav link */ .nav-links a.nav-active{ color:var(--accent); font-weight:700; }.nav-links a.nav-active::after{ width:100%; }/* ====== CARPLAY INTERACTIVO ====== */ .mockup-screen{ min-height:190px; position:relative; }.cp-screen{ display:none; animation:cp-in .3s ease; }.cp-screen.active{ display:block; }@keyframes cp-in { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }.cp-back{ background:rgba(255,255,255,0.12); border:none; color:#8b95a8; border-radius:8px; padding:.3rem .7rem; font-size:.65rem; font-weight:700; cursor:pointer; font-family:var(--font-b); margin-bottom:.6rem; }.cp-back:hover{ color:#fff; }.try-label{ display:flex; align-items:center; justify-content:center; gap:.45rem; width:fit-content; margin:1.2rem auto 0; text-align:center; font-family:var(--font-b); font-size:.9rem; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--accent),#7C3AED); padding:.7rem 1.4rem; border-radius:100px; box-shadow:0 8px 26px rgba(29,78,216,.35); animation:try-bounce 2.5s ease-in-out infinite; position:relative; cursor:default; }.try-label::before{ content:''; position:absolute; inset:-5px; border-radius:100px; border:2px solid var(--accent); opacity:.55; animation:try-ring 2s ease-out infinite; pointer-events:none; }@keyframes try-ring { 0%{opacity:.55;transform:scale(.97)} 70%{opacity:0;transform:scale(1.12)} 100%{opacity:0} }.try-finger{ font-size:1.15rem; display:inline-block; animation:try-tap 1.4s ease-in-out infinite; }@keyframes try-tap { 0%,100%{transform:translateY(0)} 45%{transform:translateY(5px)} }@keyframes try-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }/* Music player */ .cp-music{ display:flex; gap:12px; align-items:center; }.cp-art{ width:64px; height:64px; border-radius:10px; background:linear-gradient(135deg,#FF3B30,#7C3AED); display:flex; align-items:center; justify-content:center; font-size:1.8rem; flex-shrink:0; animation:art-spin 8s linear infinite; }@keyframes art-spin { to{transform:rotate(360deg)} }.cp-track{ flex:1; }.cp-title{ color:#fff; font-size:.8rem; font-weight:700; }.cp-artist{ color:#8b95a8; font-size:.66rem; margin-bottom:.5rem; }.cp-bar{ height:4px; background:#2a3348; border-radius:4px; overflow:hidden; }.cp-bar-fill{ height:100%; width:0%; background:#fff; border-radius:4px; animation:track-progress 24s linear infinite; }@keyframes track-progress { 0%{width:0%} 100%{width:100%} }.cp-controls{ display:flex; gap:14px; justify-content:center; margin-top:.7rem; color:#fff; font-size:1rem; }.cp-controls span{ cursor:pointer; transition:transform .15s; }.cp-controls span:hover{ transform:scale(1.25); }/* Map */ .cp-map{ position:relative; height:110px; background:#182236; border-radius:10px; overflow:hidden; }.cp-road{ position:absolute; background:#2c3a54; }.cp-road.h1{ top:35%; left:0; right:0; height:9px; }.cp-road.h2{ top:72%; left:0; right:0; height:6px; }.cp-road.v1{ left:28%; top:0; bottom:0; width:8px; }.cp-road.v2{ left:68%; top:0; bottom:0; width:6px; }.cp-route{ position:absolute; top:37%; left:0; height:5px; width:100%; background:linear-gradient(90deg,#3B82F6 60%,transparent 60%); background-size:14px 5px; }.cp-car{ position:absolute; top:30%; font-size:1rem; animation:car-drive 6s linear infinite; }@keyframes car-drive { 0%{left:-8%} 100%{left:104%} }.cp-eta{ position:absolute; top:8px; right:8px; background:rgba(11,15,26,0.85); border:1px solid #2a3348; border-radius:8px; padding:.3rem .6rem; color:#fff; font-size:.62rem; font-weight:700; }.cp-eta small{ display:block; color:#8b95a8; font-weight:500; font-size:.55rem; }/* Phone */ .cp-phone-scr{ text-align:center; padding:.4rem 0; }.cp-caller{ width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#34C759,#1D8FCC); margin:0 auto .5rem; display:flex; align-items:center; justify-content:center; font-size:1.5rem; animation:caller-pulse 1.6s ease-in-out infinite; }@keyframes caller-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,0.4)} 50%{box-shadow:0 0 0 12px rgba(52,199,89,0)} }.cp-caller-name{ color:#fff; font-size:.82rem; font-weight:700; }.cp-caller-status{ color:#8b95a8; font-size:.64rem; margin-bottom:.7rem; }.cp-call-btns{ display:flex; gap:16px; justify-content:center; }.cp-call-btn{ width:36px; height:36px; border-radius:50%; border:none; font-size:1rem; cursor:pointer; transition:transform .15s; }.cp-call-btn:hover{ transform:scale(1.15); }/* ====== QUALITY PASS ====== */ /* Global: eyebrow con línea decorativa */ .section-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; }.section-eyebrow::before{ content:''; width:28px; height:2px; background:var(--accent); border-radius:2px; }/* Hero: fila de avatares clientes */ .clients-row{ display:flex; align-items:center; gap:.7rem; margin-top:1.4rem; }.clients-avatars{ display:flex; }.clients-avatars span{ width:32px; height:32px; border-radius:50%; border:2px solid var(--surface); display:flex; align-items:center; justify-content:center; font-size:.85rem; margin-left:-8px; }.clients-avatars span:first-child{ margin-left:0; }.clients-txt{ font-size:.78rem; color:var(--muted); }.clients-txt b{ color:var(--text); }/* Boutique: buscador */ .shop-search{ position:relative; margin:1.5rem 0 0; max-width:420px; }.shop-search input{ width:100%; background:var(--bg); border:1.5px solid var(--border); border-radius:12px; padding:.8rem 1rem .8rem 2.6rem; font-family:var(--font-b); font-size:.9rem; color:var(--text); outline:none; transition:border-color .2s; }.shop-search input:focus{ border-color:var(--accent); }.shop-search::before{ content:'🔍'; position:absolute; left:.9rem; top:50%; transform:translateY(-50%); font-size:.9rem; }.shop-noresult{ display:none; text-align:center; color:var(--muted); padding:2rem; font-size:.9rem; }/* Process: chips de tiempo + línea animada */ .step-time{ display:inline-block; margin-top:.6rem; background:var(--accent-g); border:1px solid rgba(29,78,216,0.15); color:var(--accent); border-radius:100px; padding:.18rem .6rem; font-size:.66rem; font-weight:700; }.process-steps::before{ background:linear-gradient(90deg, var(--accent) 0%, var(--border) 0%); background-size:200% 100%; }/* Avis: barras de resumen tipo Amazon */ .rating-summary{ display:flex; gap:2.5rem; align-items:center; margin-top:1.8rem; flex-wrap:wrap; }.rs-score{ text-align:center; }.rs-num{ font-family:var(--font-d); font-size:3.2rem; font-weight:800; color:var(--text); line-height:1; }.rs-stars{ color:#FBBC05; font-size:1rem; letter-spacing:.08em; margin:.3rem 0; }.rs-total{ font-size:.75rem; color:var(--muted); }.rs-bars{ flex:1; min-width:240px; max-width:380px; display:flex; flex-direction:column; gap:.4rem; }.rs-row{ display:flex; align-items:center; gap:.6rem; font-size:.74rem; color:var(--muted); }.rs-row span:first-child{ width:20px; }.rs-track{ flex:1; height:8px; background:var(--card); border-radius:8px; overflow:hidden; }.rs-fill{ height:100%; background:#FBBC05; border-radius:8px; width:0; transition:width 1s ease .3s; }.rs-row span:last-child{ width:34px; text-align:right; }/* FAQ: CTA final */ .faq-cta{ grid-column:1/-1; background:var(--accent-g); border:1.5px dashed rgba(29,78,216,0.3); border-radius:14px; padding:1.6rem; text-align:center; }.faq-cta h4{ font-family:var(--font-d); font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:.3rem; }.faq-cta p{ color:var(--muted); font-size:.85rem; margin-bottom:1rem; }/* Contact: badge tiempo de respuesta */ .resp-badge{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.3); border-radius:100px; padding:.4rem 1rem; font-size:.78rem; font-weight:700; color:#16a34a; margin-top:1rem; }/* ============ REDESIGN DRAMATICO ============ */ /* Tipografía gigante estilo editorial */ .section-title{ font-size:clamp(2.2rem,5.5vw,3.6rem) !important; letter-spacing:-0.035em !important; line-height:1.05 !important; }h1{ font-size:clamp(2.6rem,6.5vw,5.2rem) !important; letter-spacing:-0.04em !important; }/* Palabras fantasma gigantes de fondo (estilo agencia) */ .ghost-word{ position:absolute; top:2.2rem; left:50%; transform:translateX(-50%); font-family:var(--font-d); font-weight:800; font-size:clamp(4rem,14vw,11rem); line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--border); letter-spacing:.02em; pointer-events:none; user-select:none; white-space:nowrap; opacity:.55; z-index:0; }section > *:not(.ghost-word){ position:relative; z-index:1; }/* Botones premium pill con sombra de color */ .btn-primary,.btn-green,.wizard-next,.exit-cta{ border-radius:100px !important; box-shadow:0 8px 24px rgba(29,78,216,0.28); }.btn-green{ box-shadow:0 8px 24px rgba(37,211,102,0.3); }.btn-primary:hover{ box-shadow:0 12px 32px rgba(29,78,216,0.4); }.nav-cta,.nav-wa{ border-radius:100px !important; }.product-cta{ border-radius:100px !important; }.testimonial-card,.product-card,.faq-item{ border-radius:20px !important; }/* Nav glass premium */ nav{ backdrop-filter:blur(20px) saturate(1.6); }:root{--sale:#DC2626;--sale-dark:#B91C1C;--sale-glow:rgba(220,38,38,0.08);--sale-border:rgba(220,38,38,0.18)}} /* Separador de ola entre secciones */ .wave-sep{ display:block; width:100%; height:70px; margin-bottom:-1px; } /* Números de sección estilo editorial */ .sec-num { position:absolute; top:3rem; right:5%; font-family:var(--font-d); font-size:1rem; font-weight:800; color:var(--accent); opacity:.5; letter-spacing:.1em; } /* Marquee mejorado con máscara de degradado */ .marquee-wrapper { -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } /* ============ HERO DEFINITIVO ============ */ /* Movil: TODO CENTRADO */ #hero { min-height:auto !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:center !important; text-align:center !important; padding:3rem 5% 3.5rem !important; gap:0 !important; } #hero h1 { font-size:clamp(2.1rem,5.5vw,3rem) !important; line-height:1.1 !important; margin-bottom:1rem !important; text-align:center !important; letter-spacing:-0.03em !important; } .hero-left { display:flex; flex-direction:column; align-items:center !important; text-align:center !important; width:100%; max-width:560px; } .hero-right { display:flex; flex-direction:column; align-items:center !important; width:100%; max-width:480px; margin-top:2.4rem; } .hero-sub { min-height:3.2em !important; text-align:center !important; margin-bottom:1.4rem !important; } .hero-tagline { text-align:center !important; } .hero-actions { justify-content:center !important; gap:.7rem !important; flex-wrap:wrap; } .hero-actions a { font-size:.88rem !important; padding:.72rem 1.3rem !important; } .clients-row { justify-content:center !important; margin-top:1.7rem !important; } .hero-stats { justify-content:center !important; margin-top:1.7rem !important; padding-top:1.5rem !important; border-top:1px solid var(--border) !important; gap:1.6rem !important; max-width:none !important; } .stat-num { font-size:1.6rem !important; } .hero-mockup { max-width:440px !important; width:100% !important; margin-top:0 !important; } .mockup-glow { inset:-10% !important; } .trust-row { justify-content:center !important; margin-top:1.4rem !important; } /* Escritorio: dos columnas CENTRADAS EN MEDIO, texto a la izquierda */ @media(min-width:900px){ #hero { flex-direction:row !important; justify-content:center !important; align-items:center !important; gap:4.5rem !important; padding:4.5rem 5% !important; text-align:left !important; }#hero h1{ font-size:clamp(1.9rem,2.9vw,2.9rem) !important; text-align:left !important; }.hero-left{ flex:0 1 520px !important; align-items:flex-start !important; text-align:left !important; }.hero-right{ flex:0 1 450px !important; margin-top:0 !important; }.hero-sub{ text-align:left !important; min-height:3.2em !important; }.hero-actions{ justify-content:flex-start !important; }.clients-row{ justify-content:flex-start !important; }.hero-stats{ justify-content:flex-start !important; }} /* ============ FIX DESBORDAMIENTO HORIZONTAL ============ */ html,body{ overflow-x:hidden !important; max-width:100% !important; } footer, nav, .top-banner { overflow-x:clip; } @media(max-width:768px){ .footer-col a{padding:.18rem 0 !important;min-height:0 !important;line-height:1.6}.footer-col li{margin-bottom:.1rem}.footer-col h5{margin-bottom:.5rem}.footer-top{gap:1.6rem}/* boton "ver mas" del catalogo */ .shop-more{display:block;width:100%;margin:1.4rem auto 0;background:var(--surface);border:1.5px solid var(--accent);color:var(--accent);border-radius:100px;padding:.85rem 1.2rem;font-family:var(--font-b);font-weight:700;font-size:.9rem;cursor:pointer}.shop-more:hover{background:var(--accent);color:#fff}} .shop-more{display:block;width:100%;max-width:340px;margin:1.6rem auto 0;background:var(--surface);border:1.5px solid var(--accent);color:var(--accent);border-radius:100px;padding:.85rem 1.2rem;font-family:var(--font-b);font-weight:700;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s} .shop-more:hover{background:var(--accent);color:#fff} .product-card.hidden-extra{display:none !important} /* Visual de las fichas del catalogo (antes iba repetido en cada tarjeta) */ .pv{width:100%;height:100%;background:linear-gradient(135deg,var(--pv-c),color-mix(in srgb,var(--pv-c) 80%,transparent));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1rem} .pv-apps{background:rgba(0,0,0,.35);border-radius:9px;padding:.45rem .8rem;display:flex;gap:.35rem;box-shadow:0 4px 12px rgba(0,0,0,.25);font-size:.7rem} .pv-name{font-family:var(--font-d);font-weight:800;font-size:.98rem;color:var(--pv-t,#fff);text-align:center;line-height:1.25} .pv-tag{font-size:.56rem;font-weight:700;color:var(--pv-t,#fff);opacity:.7;letter-spacing:.14em;text-transform:uppercase} /* ===== RENDIMIENTO ===== */ /* El navegador solo calcula y pinta las secciones visibles */ /* Aislar las tarjetas del catalogo: un cambio dentro no re-calcula toda la pagina */ .product-card{ contain:layout paint style; } /* Avisar al navegador de lo que va a animarse */ .ba-col img{ will-change:opacity; } /* En movil se apagan las animaciones decorativas: son las que hacen tirones */ @media(max-width:768px){ .particle, .hero-bg-blob, .mockup-glow, .ghost-word{ display:none !important; }.urgency-dot,.live-dot,.try-label::before,.g-reviews-btn::after{ animation:none !important; }.cs-wave,.cs-app{ animation:none !important; }.grad-text{ animation:none !important; background-size:100% 100% !important; }} /* Respetar la preferencia del sistema de reducir movimiento */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }} /* ===== AJUSTES FINOS MOVIL (auditados en 390px) ===== */ @media(max-width:768px){ /* H1: evitar que "Auto" quede huerfano en su propia linea */ h1, #hero h1{font-size:clamp(1.5rem,6.6vw,2rem) !important;line-height:1.2 !important;letter-spacing:-.02em !important;margin-bottom:.6rem !important}#hero h1 br.desk-only{display:none}.hero-tagline{font-size:.86rem !important;margin:.7rem 0 .35rem !important}/* el texto que se escribe solo reservaba 3 lineas vacias */ .hero-sub{min-height:2.4em !important;margin-bottom:1.1rem !important;font-size:.88rem !important}/* los dos CTA con el mismo ancho,apilados */ .hero-actions{flex-direction:column;align-items:stretch;gap:.6rem !important;width:100%;max-width:340px;margin-left:auto;margin-right:auto}.hero-actions a{width:100%;justify-content:center;text-align:center;min-height:50px;display:inline-flex;align-items:center}/* barra de progreso lateral: sobra en movil,se veia como una raya morada */ .scroll-line{display:none !important}/* la palabra fantasma seguia asomando tras los titulos */ .ghost-word{opacity:.18 !important;top:.6rem !important}/* titulos de seccion mas contenidos */ .section-title{font-size:clamp(1.5rem,6.4vw,2rem) !important;line-height:1.2 !important}.section-sub{font-size:.88rem !important}/* caja del buscador: menos aire,cabe mas en pantalla */ .finder-box{padding:1.4rem 1.2rem !important;margin-top:1.4rem !important}.finder-box > p:first-child{font-size:1.05rem !important;line-height:1.3}.finder-box > p:nth-child(2){font-size:.8rem !important;margin-bottom:1.1rem !important}/* separacion entre secciones mas compacta */ section{padding-top:2.6rem !important;padding-bottom:2.6rem !important}} /* ===== ERGONOMIA TACTIL MOVIL (objetivos >=44px) ===== */ @media(max-width:768px){ .shop-tab{padding:.62rem 1.05rem !important;font-size:.82rem !important;min-height:40px;display:inline-flex;align-items:center}.product-cta{padding:.7rem 1.1rem !important;min-height:42px;display:inline-flex;align-items:center;justify-content:center}.top-banner a{padding:.35rem .2rem;display:inline-block;min-height:34px;line-height:1.9}.ck-more,footer button{padding:.45rem .2rem !important;min-height:34px;display:inline-block}.footer-col a{padding:.3rem 0;display:inline-block;min-height:32px}.mockup-glow{max-width:100%;left:0 !important;right:0 !important}.hero-bg-blob{display:none}} /* ============ FIX RECADRAGE MOBILE ============ */ @media(max-width:700px){ /* nada debe sobresalir del ancho de pantalla */ img, iframe, video, svg, table { max-width:100%; height:auto; }section{ padding-left:1.1rem !important; padding-right:1.1rem !important; }/* palabra fantasma: se salia y quedaba cortada a los lados */ .ghost-word{ font-size:clamp(2.2rem,13vw,4.5rem) !important; max-width:100%; white-space:nowrap; overflow:visible; opacity:.35; top:1.2rem; }/* titulos y textos largos: partir palabras en vez de desbordar */ h1,h2,h3,.section-title,.product-name{ overflow-wrap:anywhere; word-break:normal; hyphens:auto; }/* etiquetas que forzaban nowrap y se cortaban */ .csi-label{ white-space:normal !important; text-align:center; }.hero-tagline{ overflow-wrap:anywhere; }/* ruban promo: la diagonal se salia de la tarjeta */ /* widgets flotantes que se salian por la derecha */ .chat-widget{ width:calc(100vw - 1.6rem) !important; right:.8rem !important; left:.8rem !important; max-width:none !important; }.ck-bar{ left:.6rem !important; right:.6rem !important; padding:.9rem 1rem !important; }/* barras de notas: el min-width empujaba el bloque fuera */ .rs-bars{ min-width:0 !important; width:100%; }.rating-summary{ flex-wrap:wrap; gap:1.2rem; }/* blob decorativo del hero desplazaba la pagina */ .hero-bg-blob{ max-width:100vw; }/* botones de avis Google a ancho completo */ .g-cta-wrap{ padding:0 .2rem; }.g-badge{ flex-wrap:wrap; justify-content:center; max-width:100%; }} @media(max-width:400px){ section { padding-left:.9rem !important; padding-right:.9rem !important; }.ghost-word{ font-size:2rem !important; }} /* ============ ANTI-FREEZE v2 (sin tocar el scroll) ============ */ section.anim-paused *{ animation-play-state:paused !important; } body { animation:none !important; } /* Blur del backdrop en nav es caro en móvil antiguo: reducirlo */ @media(max-width:768px){ nav, nav.scrolled { backdrop-filter:none !important; background:var(--surface) !important; }.exit-popup{ backdrop-filter:none; }} /* ============ STATS A GAUCHE ============ */ .hero-stats{ display:grid !important; grid-template-columns:repeat(2, minmax(120px, max-content)) !important; justify-content:flex-start !important; justify-items:start !important; text-align:left !important; gap:1.2rem 2.5rem !important; } .hero-stats > div { text-align:left !important; } @media(min-width:900px){ .hero-stats { grid-template-columns:repeat(4, max-content) !important; gap:1rem 2.2rem !important; }} @media(max-width:899px){ .hero-stats { width:100%; max-width:420px; }} /* ============ ESCENA CONEXION EN LINEA (arriba izquierda) ============ */ .connect-scene-inline{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem; padding:.7rem 1rem; background:var(--card); border:1px solid var(--border); border-radius:14px; width:fit-content; max-width:100%; flex-wrap:nowrap; } .csi-phone { width:30px; height:48px; background:#0B0F1A; border-radius:7px; border:2px solid #2a3348; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; position:relative; } .csi-phone::before { content:''; position:absolute; top:3px; width:10px; height:2px; background:#2a3348; border-radius:2px; } .csi-screen { height:44px; background:#0B0F1A; border-radius:7px; border:2px solid #2a3348; display:flex; align-items:center; justify-content:center; gap:4px; padding:0 .55rem; flex-shrink:0; } .csi-screen .cs-app { width:19px; height:19px; border-radius:5px; font-size:.6rem; } .csi-label { font-size:.7rem; font-weight:700; color:var(--accent); line-height:1.35; white-space:nowrap; } .connect-scene-inline .cs-waves { gap:4px; } .connect-scene-inline .cs-wave { width:6px; height:6px; } @media(max-width:420px){ .csi-label { font-size:.64rem; }.connect-scene-inline{ gap:.55rem; padding:.6rem .75rem; }} @media(max-width:380px){ .mobile-bar{grid-template-columns:1fr 1fr 1fr;gap:.35rem;padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom))}.mobile-bar a{font-size:.62rem;padding:.35rem .2rem}} @media(max-width:899px){ .connect-scene-inline { margin-left:0; }} /* ============ HERO: LLENAR EL ANCHO,SIN ESPACIOS VACIOS ============ */ @media(min-width:900px){ #hero { max-width:1280px !important; margin:0 auto !important; padding:4.5rem 4% !important; gap:3.5rem !important; justify-content:space-between !important; }.hero-left{ flex:1 1 55% !important; max-width:none !important; }.hero-right{ flex:1 1 45% !important; max-width:none !important; }.hero-mockup{ max-width:100% !important; }#hero h1{ font-size:clamp(1.9rem,2.9vw,2.9rem) !important; line-height:1.15 !important; }} /* ============ ENTRADA HERO CSS PURA (siempre termina visible) ============ */ @media (prefers-reduced-motion: no-preference){ .hero-badge { animation:enter-up .6s cubic-bezier(.16,1,.3,1) both; }#hero h1{ animation:enter-up .7s cubic-bezier(.16,1,.3,1) .1s both; }.connect-scene-inline{ animation:enter-up .7s cubic-bezier(.16,1,.3,1) .2s both; }.hero-actions{ animation:enter-up .7s cubic-bezier(.16,1,.3,1) .3s both; }.hero-mockup{ animation:enter-up .8s cubic-bezier(.16,1,.3,1) .25s both; }} @keyframes enter-up{ from{opacity:0;transform:translateY(18px)}} /* ============ ORDEN LIMPIO HERO ============ */ .hero-actions{ margin-bottom:0 !important; } .connect-scene-inline { margin:1.5rem 0 0 !important; } .hero-stats { margin-top:1.7rem !important; } .clients-row { display:none !important; } /* redundante con stats */ /* ============ HERO DESKTOP EQUILIBRADO (verificado visualmente) ============ */ @media(min-width:900px){ #hero { align-items:center !important; gap:4rem !important; padding:4rem 5% 4.5rem !important; }.hero-left{ flex:1 1 50% !important; }.hero-right{ flex:1 1 50% !important; justify-content:center !important; }/* Mockup GRANDE que llena su columna */ .hero-mockup{ max-width:540px !important; width:100% !important; }.mockup-screen{ padding:20px 22px !important; border-radius:22px !important; }.mockup-apps{ gap:14px !important; }.mockup-app{ font-size:2.1rem !important; border-radius:18px !important; }.mockup-statusbar{ font-size:.72rem !important; margin-bottom:14px !important; }.mockup-dock{ margin-top:16px !important; padding-top:14px !important; }.try-label{ font-size:.82rem !important; padding:.6rem 1.1rem !important; margin-top:1rem !important; }/* Reproductor y mapa proporcionales al mockup grande */ .cp-art{ width:84px !important; height:84px !important; font-size:2.3rem !important; }.cp-title{ font-size:1rem !important; }.cp-artist{ font-size:.78rem !important; }.cp-map{ height:150px !important; }.cp-caller{ width:70px !important; height:70px !important; font-size:2rem !important; }} /* ============ HERO PANTALLA COMPLETA CENTRADO ============ */ @media(min-width:900px){ #hero { min-height:calc(100vh - 108px) !important; /* toda la pantalla menos banner+nav */ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; max-width:none !important; padding:2rem 6% !important; gap:5rem !important; }.hero-left{ flex:0 1 620px !important; display:flex; flex-direction:column; justify-content:center; }.hero-right{ flex:0 1 560px !important; display:flex; align-items:center; justify-content:center; }#hero h1{ font-size:clamp(1.9rem,2.9vw,2.9rem) !important; line-height:1.15 !important; }.hero-sub{ font-size:1.1rem !important; }.hero-mockup{ max-width:560px !important; }} /* ============ FIX RAIZ: decorativos fuera del flujo flex ============ */ #hero > #particles-container,#hero > .hero-bg-grid,#hero > .hero-bg-blob{ position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; flex:none !important; pointer-events:none !important; margin:0 !important; } /* ============ MAPA IDF REAL ============ */ .idf-paris-dot { position:absolute; width:14px; height:14px; background:var(--accent); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(29,78,216,0.25); } .idf-paris-dot::after { content:''; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--accent); opacity:0; animation:idf-ping 2s ease-out infinite; } @keyframes idf-ping { 0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}} .idf-lbl{ position:absolute; transform:translate(-50%,-50%); background:var(--accent); color:#fff; font-size:.68rem; font-weight:800; padding:.18rem .5rem; border-radius:100px; box-shadow:0 2px 8px rgba(29,78,216,0.3); white-space:nowrap; } [data-theme="dark"] .carte-map { background:#E8E8E4 !important; } @media(max-width:600px){ .idf-lbl { font-size:.56rem; padding:.12rem .4rem; }} /* ============ CARTE: GRID CUADRICULADO ESTABLE ============ */ /* ============ CARTE: MAPA PANORAMICO + ZONAS DEBAJO ============ */ /* ============ BLURS -> GRADIENTES (scroll fluido) ============ */ .hero-bg-blob{ filter:none !important; background:radial-gradient(closest-side, rgba(29,78,216,0.14), rgba(124,58,237,0.07) 55%, transparent 75%) !important; } .mockup-glow { filter:none !important; background:radial-gradient(closest-side, rgba(29,78,216,0.22), transparent 70%) !important; } nav { backdrop-filter:blur(10px) !important; } nav.scrolled { backdrop-filter:blur(10px) !important; } @media(max-width:768px){ nav, nav.scrolled { backdrop-filter:none !important; background:var(--surface) !important; }} /* ====== PAGES LÉGALES ====== */ .legal-modal{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:1700;display:none;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto} .legal-modal.show{display:flex} .legal-box{background:var(--surface);border-radius:18px;max-width:760px;width:100%;padding:2.4rem 2.2rem 2.8rem;position:relative;margin:auto} .legal-box h3{font-family:var(--font-d);font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:.3rem;line-height:1.2} .legal-date{font-size:.75rem;color:var(--muted);margin-bottom:1.6rem} .legal-box h4{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--text);margin:1.5rem 0 .5rem} .legal-box p,.legal-box li{color:var(--muted);font-size:.9rem;line-height:1.75} .legal-box ul{padding-left:1.1rem;margin:.4rem 0 .2rem} .legal-box li{margin-bottom:.35rem} .legal-box b{color:var(--text)} .legal-box a{color:var(--accent);font-weight:600} .legal-todo{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);border-radius:10px;padding:.85rem 1rem;margin:.9rem 0;font-size:.84rem;color:var(--text)} .legal-close{position:absolute;top:1rem;right:1rem;background:var(--card);border:1px solid var(--border);border-radius:8px;width:34px;height:34px;cursor:pointer;color:var(--text);font-size:1rem} .legal-links{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;padding-top:1rem;font-size:.78rem} .legal-links button{background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--font-b);font-size:.78rem;text-decoration:underline;padding:0} .legal-links button:hover{color:var(--accent)} /* Bandeau cookies */ .ck-bar{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.3rem;box-shadow:0 18px 44px rgba(0,0,0,.22);z-index:1500;display:none;gap:.9rem;align-items:center;flex-wrap:wrap} .ck-bar.show{display:flex} .ck-bar p{font-size:.83rem;color:var(--muted);flex:1;min-width:220px;line-height:1.55;margin:0} .ck-bar b{color:var(--text)} .ck-bar button{white-space:nowrap} .ck-ok{background:var(--accent);color:#fff;border:none;border-radius:100px;padding:.55rem 1.3rem;font-family:var(--font-b);font-weight:700;font-size:.83rem;cursor:pointer} .ck-more{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:.8rem;cursor:pointer;font-family:var(--font-b)} @media(max-width:520px){.ck-bar{padding:1rem}} /* ====== FORMULES (3 niveaux) ====== */ .formules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem;align-items:start} .formule{position:relative;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.9rem 1.5rem;display:flex;flex-direction:column;height:100%} .formule-star{border:2px solid var(--accent);box-shadow:0 12px 40px rgba(37,99,235,.16);padding-top:2.4rem} .formule-tag{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.12em;padding:.35rem .85rem;border-radius:99px;white-space:nowrap} .formule-nom{font-family:var(--font-d);font-weight:800;font-size:1.3rem;margin-bottom:.3rem} .formule-prix{font-family:var(--font-d);font-weight:800;font-size:2.6rem;line-height:1;color:var(--accent);margin-bottom:.4rem} .formule-sub{font-size:.86rem;color:var(--muted);margin-bottom:1.3rem;min-height:2.4em} .formule-list{list-style:none;padding:0;margin:0 0 1.6rem;flex:1} .formule-list li{position:relative;padding-left:1.6rem;margin-bottom:.65rem;font-size:.9rem;line-height:1.45} .formule-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:800} .formule-cta{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:700;padding:.85rem 1rem;border-radius:12px;text-decoration:none;transition:transform .15s,filter .15s} .formule-cta:hover{transform:translateY(-2px);filter:brightness(1.07)} .formule-cta-ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)} .formules-note{margin-top:2rem;font-size:.84rem;color:var(--muted);line-height:1.6;text-align:center;max-width:760px;margin-left:auto;margin-right:auto} .formules-note a{color:var(--accent)} @media(max-width:900px){ .formules-grid{grid-template-columns:1fr;gap:1.6rem;max-width:460px;margin-left:auto;margin-right:auto} .formule-sub{min-height:0} .formule-star{margin-top:.6rem} } .product-price-wrap{display:flex;flex-direction:column;gap:.1rem} .product-price-note{font-size:.68rem;color:var(--muted);font-weight:600;line-height:1.2} /* 2026-09 conversion + local SEO improvements */ .local-seo-section{padding:5rem 5%;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .local-seo-section .container{max-width:1100px;margin:0 auto} .local-seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem auto;max-width:980px} .local-seo-grid>div{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.3rem;display:flex;flex-direction:column;gap:.45rem} .local-seo-grid strong{font-family:var(--font-d);font-size:1rem}.local-seo-grid span{color:var(--muted);font-size:.88rem;line-height:1.5} .local-seo-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap} @media(max-width:768px){.local-seo-grid{grid-template-columns:1fr}.local-seo-section{padding:4rem 5%}.hero-stats .stat-num{font-size:1.15rem!important}} /* V4 — galerie Avant/Après 100% vidéo */ .video-transform-section{text-align:center}.video-transform-grid{width:min(1180px,100%);margin:2.4rem auto 0;display:grid;gap:1.4rem}.video-transform-card{padding:1.1rem;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:0 12px 35px rgba(0,0,0,.08)}.video-transform-card h3{font-family:var(--font-d);font-size:1.15rem;margin:0 0 .9rem;color:var(--text)}.video-pair{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.video-stage{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#050505;aspect-ratio:3/4}.video-stage video{display:block;width:100%;height:100%;object-fit:cover;background:#050505}.video-badge{position:absolute;z-index:2;top:.65rem;padding:.3rem .7rem;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.68);pointer-events:none}.video-badge.before{left:.65rem}.video-badge.after{right:.65rem;background:var(--accent)}.video-transform-note{max-width:760px;margin:1.25rem auto 0;color:var(--muted);font-size:.86rem}@media(max-width:700px){.video-transform-grid{gap:1rem}.video-transform-card{padding:.75rem;border-radius:14px}.video-pair{gap:.45rem}.video-stage{border-radius:10px}.video-badge{top:.45rem;padding:.24rem .55rem;font-size:.62rem}.video-badge.before{left:.45rem}.video-badge.after{right:.45rem}} /* V5 — galerie Avant/Après type Reels */ .reels-section{overflow:hidden;text-align:center}.reels-track{width:min(1180px,100%);margin:2.2rem auto 0;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem max(1rem,calc((100% - 330px)/2)) 1.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}.reels-track::-webkit-scrollbar{display:none}.reel-card{flex:0 0 min(330px,82vw);scroll-snap-align:center}.reel-media{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#050505;box-shadow:0 18px 55px rgba(0,0,0,.2);border:1px solid var(--border)}.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s ease;background:#050505}.reel-video.is-active{opacity:1}.reel-top,.reel-bottom{position:absolute;z-index:3;left:0;right:0;display:flex;color:#fff;pointer-events:none}.reel-top{top:0;justify-content:space-between;align-items:center;padding:1rem;background:linear-gradient(to bottom,rgba(0,0,0,.62),transparent)}.reel-phase{padding:.36rem .72rem;border-radius:999px;background:#fff;color:#111;font-size:.72rem;font-weight:900;letter-spacing:.08em}.reel-phase.is-after{background:var(--accent);color:#fff}.reel-brand{font-size:.76rem;font-weight:800}.reel-bottom{bottom:0;flex-direction:column;align-items:flex-start;text-align:left;padding:3.5rem 1rem 1.2rem;background:linear-gradient(to top,rgba(0,0,0,.78),transparent)}.reel-bottom strong{font-family:var(--font-d);font-size:1.2rem}.reel-bottom span{font-size:.78rem;opacity:.86;margin-top:.2rem}.reel-progress{position:absolute;z-index:4;left:1rem;right:1rem;bottom:.55rem;height:3px;background:rgba(255,255,255,.3);border-radius:9px;overflow:hidden}.reel-progress i{display:block;width:0;height:100%;background:#fff}.reels-hint{margin:.2rem auto 0;color:var(--muted);font-size:.82rem}@media(min-width:900px){.reels-track{padding-left:1rem;padding-right:1rem}.reel-card{flex-basis:300px}}@media(prefers-reduced-motion:reduce){.reel-video{transition:none}} /* V6 — all videos, no model names */ .reel-top{justify-content:flex-end;background:linear-gradient(to bottom,rgba(0,0,0,.28),transparent)} .reel-video{opacity:1} /* V12 — 4 transformations AVANT → APRÈS, optimisées pour mobile */ .transform-card .reel-top{justify-content:flex-start}.transform-card .reel-phase{box-shadow:0 6px 20px rgba(0,0,0,.22)}.transform-card.is-after .reel-media{box-shadow:0 18px 60px rgba(0,122,255,.22)}.transform-flash{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.68);opacity:0;pointer-events:none;transition:opacity .18s ease}.transform-flash span{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;color:#111;font-size:2.1rem;font-weight:900;transform:scale(.7);transition:transform .18s ease}.transform-card.is-switching .transform-flash{opacity:1}.transform-card.is-switching .transform-flash span{transform:scale(1)}.transform-video{opacity:1}.transform-card:not(.is-current) .transform-video{opacity:.72}.transform-card.is-current{transform:translateY(-2px)} /* V13 — transformations à la demande : zéro vidéo chargé avant clic */ .transform-cover{position:absolute;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.4rem;text-align:center;background:radial-gradient(circle at 50% 35%,#242424 0,#0a0a0a 58%,#050505 100%);color:#fff}.transform-cover strong{font-family:var(--font-d);font-size:1.45rem}.transform-cover>span{margin:.55rem 0 1.25rem;font-weight:900;letter-spacing:.12em;font-size:.76rem;color:rgba(255,255,255,.72)}.transform-play{border:0;border-radius:999px;padding:.9rem 1.15rem;background:var(--accent);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 28px rgba(0,122,255,.35)}.transform-play b{font-size:1.15rem;margin-left:.35rem}.transform-card.is-playing .transform-cover{display:none}.transform-card:not(.is-playing) .reel-top{display:none}.transform-card:not(.is-playing) .transform-video{display:none}.transform-card.is-playing .transform-video{display:block;opacity:1}.transform-card .reel-top{justify-content:space-between!important;align-items:center}.reel-model{font-weight:900;font-size:.78rem;text-shadow:0 2px 10px rgba(0,0,0,.65)}.transform-flash span{width:auto!important;height:auto!important;min-width:210px;padding:1rem 1.15rem;border-radius:999px!important;display:flex!important;gap:.7rem;align-items:center}.transform-flash small{font-size:.7rem;font-weight:900;letter-spacing:.08em}.transform-flash b{font-size:1.65rem}.transform-card:not(.is-playing) .reel-media{box-shadow:0 14px 38px rgba(0,0,0,.13)} /* V22 — aperçu réel visible sans télécharger les MP4 */ .transform-cover{background-image:linear-gradient(180deg,rgba(0,0,0,.08) 15%,rgba(0,0,0,.78) 88%),var(--transform-poster);background-size:cover;background-position:center}.transform-cover strong{margin-top:auto;text-shadow:0 2px 14px rgba(0,0,0,.85);font-size:1.55rem}.transform-cover>span{text-shadow:0 2px 10px rgba(0,0,0,.9);color:#fff}.transform-play{margin-bottom:.5rem}.transform-cover:before{content:'▶';position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;font-size:1.15rem;padding-left:3px;box-shadow:0 10px 30px rgba(0,0,0,.25)} /* ===== V25 FOOTER ===== */ .footer-cta{padding:3.2rem 5%;background:linear-gradient(135deg,#0b1220,#172554);color:#fff}.footer-cta-inner{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}.footer-cta-kicker{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;color:#93c5fd;margin-bottom:.65rem}.footer-cta h2{font-family:var(--font-d);font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.1;margin:0 0 .6rem}.footer-cta p{max-width:680px;color:rgba(255,255,255,.72);line-height:1.65;margin:0}.footer-cta-wa{flex:0 0 auto;background:#25D366;color:#07150c;text-decoration:none;font-weight:800;border-radius:12px;padding:1rem 1.25rem;box-shadow:0 10px 30px rgba(37,211,102,.18)} .footer-v25{background:#080d18;color:rgba(255,255,255,.6);padding:3rem 5% 1.4rem}.footer-v25-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.45fr 1fr 1.15fr 1.25fr;gap:2.5rem}.footer-brand p{font-size:.82rem;line-height:1.7;max-width:340px}.footer-trust{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.footer-trust span{font-size:.7rem;color:#dbeafe;background:rgba(59,130,246,.1);border:1px solid rgba(96,165,250,.18);padding:.38rem .55rem;border-radius:7px}.footer-v25 .footer-col ul span{font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.48)}.footer-v25-bottom{max-width:1180px;margin:2.3rem auto 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.7rem}.footer-v25-bottom .legal-links{display:flex;gap:.8rem;flex-wrap:wrap}.footer-v25-bottom button{background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer;font:inherit}.footer-v25-bottom button:hover{color:#fff} @media(max-width:900px){.footer-cta-inner{align-items:flex-start;flex-direction:column}.footer-cta-wa{width:100%;text-align:center}.footer-v25-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.footer-cta{padding:2.4rem 1.2rem}.footer-v25{padding:2.4rem 1.2rem 6.2rem}.footer-v25-grid{grid-template-columns:1fr;gap:1.7rem}.footer-v25-bottom{align-items:flex-start;flex-direction:column}.footer-brand p{max-width:none}} /* V29 — transformations: play centré + indication claire AVANT/APRÈS */ .transform-cover{justify-content:flex-end!important;padding-bottom:1.35rem!important} .transform-cover strong{margin-top:0!important} .transform-cover:before{display:none!important} .transform-play{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:72px!important;height:72px!important;border-radius:50%!important;padding:0!important;margin:0!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.95)!important;color:#111!important;box-shadow:0 12px 35px rgba(0,0,0,.35)!important;border:1px solid rgba(255,255,255,.75)!important} .transform-play .play-icon{font-size:1.55rem;line-height:1;transform:translateX(2px)} .phase-intro{position:absolute;z-index:10;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.34);opacity:0;pointer-events:none;transition:opacity .2s ease} .phase-intro span{display:inline-flex;align-items:center;justify-content:center;min-width:120px;padding:.72rem 1.15rem;border-radius:999px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:1rem;font-weight:950;letter-spacing:.14em;box-shadow:0 10px 30px rgba(0,0,0,.28)} .transform-card.show-phase .phase-intro{opacity:1} .transform-card.is-after .phase-intro span{background:var(--accent);border-color:rgba(255,255,255,.35)} .reel-phase{font-size:.8rem!important;padding:.42rem .78rem!important} /* V33 — indication de balayage Avant/Après */ .transform-swipe-hint{display:flex;align-items:center;justify-content:center;gap:.65rem;margin:.85rem auto -.8rem;color:var(--muted);font-size:.86rem;font-weight:700}.transform-swipe-hint b{display:inline-block;color:var(--accent);font-size:1.45rem;line-height:1;animation:swipeCue 1.15s ease-in-out infinite}@keyframes swipeCue{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(9px);opacity:1}}@media(prefers-reduced-motion:reduce){.transform-swipe-hint b{animation:none}} @media(max-width:600px){.transform-track{padding-right:18vw}.transform-swipe-hint{font-size:.8rem}} /* V35 — hero + navigation refresh */ .hero-v35 .hero-tagline{max-width:620px;font-size:clamp(1rem,1.8vw,1.18rem);font-weight:500;line-height:1.65;color:var(--muted);margin:.8rem 0 1.55rem}.hero-proof{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.3rem}.hero-proof span{display:inline-flex;align-items:center;padding:.55rem .78rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.82rem;font-weight:700;color:var(--text);box-shadow:0 6px 20px rgba(15,23,42,.05)}.hero-offer-mini{display:flex;align-items:center;gap:.65rem;margin-top:1rem;padding:.65rem .85rem;border-radius:12px;background:var(--accent-g);border:1px solid rgba(29,78,216,.16);font-size:.8rem}.hero-offer-mini strong{color:var(--accent);letter-spacing:.04em}.hero-offer-mini span{color:var(--muted)}.hero-v35 h1{max-width:690px}.nav-links a{white-space:nowrap}@media(max-width:767px){.hero-v35 .hero-tagline{text-align:center!important}.hero-proof{justify-content:center}.hero-offer-mini{flex-direction:column;gap:.15rem;text-align:center}.hero-v35 .hero-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.hero-v35 .hero-actions a{justify-content:center;padding:.78rem .7rem}.hero-v35 h1{text-align:center!important}}