
/* ==========================================================================
   ODONTO ZOOM — PRO EDITION
   Design System & Editorial Stylesheet
   Enhanced with Anti-IA Principles, Interactive Tools & Accessibility
   ========================================================================== */


:root{--paper:#f4f6f3;--white:#fff;--ink:#15221f;--muted:#61706b;--line:#d8e0da;--green:#16a779;--green-dark:#087a58;--mint:#d9f4e9;--mint2:#b8ecd9;--blue:#c8e5f0;--yellow:#f5d96f;--dark:#14231f;--radius:24px;--pad:clamp(22px,5vw,76px);--header-h:76px;--scrollbar-width:0px;}
*{box-sizing:border-box;margin:0}html{scroll-behavior:auto;scroll-padding-top:100px}body{background:var(--paper);color:var(--ink);font-family:Manrope,Inter,Arial,sans-serif;font-size:16px;line-height:1.55;font-weight:450;overflow-x:hidden}body.nav-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}img{display:block;max-width:100%}::selection{background:var(--mint2);color:var(--ink)}:focus-visible{outline:2px solid var(--green);outline-offset:4px}.mono,.eyebrow,.nav-links,.micro,.service-number{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px}.page-progress{position:fixed;inset:0 auto auto 0;width:100%;height:3px;z-index:1000;pointer-events:none}.page-progress span{display:block;height:100%;width:0;background:var(--green);transform-origin:left}.site-header{position:fixed;z-index:100;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:22px;height:var(--header-h);padding:0 var(--pad);border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}.site-header.scrolled{background:rgba(244,246,243,.86);border-color:var(--line);backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:850;letter-spacing:-.055em;white-space:nowrap}.brand-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff}.brand-mark svg{width:20px;height:20px}.nav-links{display:flex;align-items:center;gap:clamp(14px,2.5vw,36px);font-size:10px}.nav-links a{position:relative;padding:8px 0}.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--green);transition:right .25s}.nav-links a:hover:after{right:0}.header-actions{display:flex;align-items:center;gap:12px;position:relative;z-index:3}.header-phone{font-size:12px;font-weight:750;white-space:nowrap}.menu-toggle{display:none;border:1px solid var(--line);background:var(--white);border-radius:50%;width:44px;height:44px;place-items:center;cursor:pointer}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:13px 18px;border-radius:999px;border:1px solid transparent;background:var(--green);color:#fff;font-size:13px;font-weight:800;letter-spacing:-.01em;cursor:pointer;overflow:hidden;transition:background .25s,color .25s,border-color .25s,transform .25s}.btn:hover{background:var(--green-dark);transform:translateY(-2px)}.btn .btn-label{display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.btn:hover .btn-label{transform:translateY(-1px)}.btn svg{width:16px;height:16px;flex:none}.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{background:var(--green-dark)}.btn.outline{background:transparent;color:var(--ink);border-color:#aebbb3}.btn.outline:hover{border-color:var(--green);color:var(--green-dark)}.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{background:var(--mint)}.section{padding:clamp(76px,10vw,148px) var(--pad)}.wrap{max-width:1500px;margin:0 auto}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted);margin-bottom:22px}.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}.display{font-family:"Space Grotesk",Manrope,sans-serif;font-weight:500;letter-spacing:-.065em;line-height:.95}.section-title{font-family:"Space Grotesk",Manrope,sans-serif;font-weight:500;font-size:clamp(38px,6vw,76px);letter-spacing:-.065em;line-height:.98;max-width:900px}.text-green{color:var(--green-dark)}.text-highlight{position:relative;display:inline-block;z-index:0;white-space:nowrap}.text-highlight:after{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;height:.24em;bottom:.06em;background:var(--yellow);transform-origin:left;transform:scaleX(0) rotate(-1deg);border-radius:99px}.text-highlight.is-on:after{animation:highlight-in .65s .25s cubic-bezier(.2,.8,.2,1) forwards}@keyframes highlight-in{to{transform:scaleX(1) rotate(-1deg)}}
/* HERO */
.hero{min-height:min(880px,100svh);padding:calc(var(--header-h) + 54px) var(--pad) 46px;position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden}.hero:before{content:"";position:absolute;z-index:-2;right:-10vw;top:15%;width:min(60vw,780px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 38%,#d9f4e9 0,#d9f4e9 29%,rgba(217,244,233,.3) 54%,rgba(217,244,233,0) 72%)}.hero-inner{width:100%;max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);gap:clamp(24px,5vw,78px);align-items:center}.hero-copy{position:relative;z-index:2;padding:28px 0}.hero .eyebrow{margin-bottom:28px}.hero h1{font-size:clamp(50px,7.6vw,112px);max-width:820px}.hero h1 .line{display:block;overflow:hidden;padding-bottom:.05em}.hero h1 .line span{display:inline-block}.hero-copy>p{font-size:clamp(16px,1.5vw,19px);max-width:510px;color:#4d5b55;margin-top:29px}.hero-buttons{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:30px}.hero-contact{display:flex;gap:14px;align-items:center;margin-top:28px;color:var(--muted);font-size:12px}.hero-contact .mini-dot{width:6px;height:6px;background:var(--green);border-radius:50%}.hero-visual{position:relative;min-height:580px;height:min(68vh,700px);isolation:isolate}.hero-visual:before{content:"";position:absolute;z-index:-1;inset:13% 0 7% 7%;border:1px solid #c2dcd0;border-radius:48% 48% 36% 36%;transform:rotate(9deg)}.hero-photo{position:absolute;overflow:hidden;border:7px solid rgba(255,255,255,.88);border-radius:28px;background:var(--mint);box-shadow:0 16px 60px rgba(27,62,47,.08);will-change:transform}.hero-photo img{width:100%;height:100%;object-fit:cover}.hero-photo.main-photo{top:9%;left:16%;width:67%;height:74%;border-radius:180px 180px 26px 26px;transform:rotate(3deg)}.hero-photo.side-photo{top:21%;right:-1%;width:39%;height:34%;border-radius:22px;transform:rotate(8deg)}.hero-photo.bottom-photo{bottom:0;left:0;width:43%;height:33%;border-radius:22px;transform:rotate(-8deg)}.floating-note{position:absolute;right:1%;bottom:8%;z-index:4;display:flex;gap:12px;align-items:center;max-width:210px;padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 34px #15221f0d;font-size:12px;font-weight:750;line-height:1.35}.floating-note svg{width:30px;height:30px;color:var(--green);flex:none}.hero-index{position:absolute;right:var(--pad);bottom:27px;color:#7c8b84}.hero-index span{color:var(--green-dark)}.scroll-cue{position:absolute;left:var(--pad);bottom:24px;display:flex;align-items:center;gap:10px;color:var(--muted)}.scroll-cue i{display:block;width:30px;height:1px;background:var(--green)}
/* MARQUEE */
.marquee{background:var(--green);color:#fff;overflow:hidden;padding:19px 0;transform:rotate(-1.1deg) scale(1.02);width:102%;margin-left:-1%;position:relative;z-index:3}.marquee-track{display:flex;width:max-content;align-items:center;gap:28px;will-change:transform}.marquee-item{display:flex;align-items:center;gap:28px;font-family:"Space Grotesk",Manrope,sans-serif;font-size:clamp(23px,4vw,48px);letter-spacing:-.055em;white-space:nowrap}.marquee-item svg{width:22px;height:22px;flex:none}
/* INTRO */
.intro{display:grid;grid-template-columns:.55fr 1.45fr;gap:50px;align-items:start}.intro-side{padding-top:10px}.intro-copy{max-width:900px}.intro-copy .section-title{font-size:clamp(37px,6.3vw,84px)}.intro-bottom{display:flex;gap:30px;justify-content:space-between;align-items:end;margin-top:34px}.intro-bottom p{max-width:430px;color:var(--muted)}.intro-stamp{display:grid;place-items:center;text-align:center;flex:none;width:110px;height:110px;border:1px solid #a8c4b6;border-radius:50%;font:10px "Space Mono",monospace;text-transform:uppercase;letter-spacing:.08em;transform:rotate(-12deg)}.intro-stamp svg{width:26px;height:26px;color:var(--green)}
/* SERVICES */
.services-section{background:#e8eee9}.services-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:42px}.services-heading .section-title{max-width:680px}.services-heading>p{color:var(--muted);max-width:330px;font-size:14px}.service-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}.service-tab{border:1px solid #c8d2cb;background:transparent;border-radius:999px;padding:10px 16px;color:var(--muted);font-size:12px;font-weight:750;cursor:pointer;transition:.25s}.service-tab[aria-selected=true],.service-tab:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.service-card{position:relative;min-height:340px;padding:0 0 20px;background:#f7f8f6;border:1px solid #d7e0d9;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,background .25s;will-change:transform}.service-card[hidden]{display:none}.service-card:hover{border-color:#8fbca8;background:#fff}.service-image{height:162px;position:relative;overflow:hidden;background:var(--mint)}.service-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}.service-card:hover .service-image img{transform:scale(1.06)}.service-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,35,27,.18),transparent 60%)}.service-number{position:absolute;right:14px;top:13px;z-index:2;color:#fff;text-shadow:0 1px 8px #0007}.service-card-body{padding:21px 20px 0;display:flex;flex:1;flex-direction:column;align-items:start}.service-card h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:23px;letter-spacing:-.045em;line-height:1.08}.service-card p{font-size:12px;color:var(--muted);margin-top:10px;max-width:36ch}.service-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-size:11px;font-weight:850;color:var(--green-dark)}.service-link svg{width:14px;height:14px;transition:transform .2s}.service-link:hover svg{transform:translate(3px,-3px)}.service-extra{margin-top:22px;font-size:12px;color:var(--muted)}
/* CTA PANEL */
.consult{padding-top:30px}.consult-panel{background:var(--dark);color:#f6f8f6;border-radius:30px;overflow:hidden;position:relative;padding:clamp(32px,6vw,82px);display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center}.consult-panel:after{content:"";position:absolute;width:480px;height:480px;border:1px solid #ffffff1d;border-radius:50%;right:-110px;top:-230px;box-shadow:0 0 0 48px #ffffff07,0 0 0 96px #ffffff04}.consult-copy{position:relative;z-index:1}.consult .eyebrow{color:#b7c9c0}.consult .section-title{font-size:clamp(38px,5.5vw,72px);max-width:740px}.consult-copy>p{color:#b9c7c1;max-width:480px;margin-top:20px}.consult-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.consult-side{position:relative;z-index:1;justify-self:end;width:min(100%,350px)}.consult-visual{position:relative;overflow:hidden;aspect-ratio:4/4.4;border-radius:180px 180px 24px 24px;border:1px solid #ffffff30;background:var(--mint)}.consult-visual img{width:100%;height:100%;object-fit:cover}.consult-badge{position:absolute;left:-24px;bottom:27px;display:flex;align-items:center;gap:10px;border-radius:13px;padding:13px 16px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;box-shadow:0 12px 35px #0002}.consult-badge svg{width:24px;color:var(--green)}
/* STEPS */
.steps-heading{display:flex;justify-content:space-between;gap:30px;align-items:end}.steps-heading p{max-width:330px;color:var(--muted);font-size:14px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}.step{border-top:1px solid #b8c5bc;padding:20px 0 0;min-height:190px}.step-top{display:flex;align-items:center;justify-content:space-between;color:var(--green-dark);font:11px "Space Mono",monospace}.step-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid #c8d5cc;border-radius:50%}.step-icon svg{width:17px;height:17px}.step h3{font:500 clamp(21px,3vw,31px)/1.08 "Space Grotesk",sans-serif;letter-spacing:-.045em;margin-top:24px}.step p{font-size:13px;color:var(--muted);max-width:320px;margin-top:10px}
/* GALLERY */
.gallery-section{padding-top:35px}.gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.gallery-heading p{max-width:310px;font-size:13px;color:var(--muted)}.gallery-viewport{overflow:hidden;position:relative;cursor:grab;touch-action:pan-y}.gallery-viewport.dragging{cursor:grabbing}.gallery-track{display:flex;gap:16px;width:max-content;will-change:transform;padding:5px 1px 22px}.gallery-card{position:relative;overflow:hidden;width:clamp(245px,30vw,420px);aspect-ratio:4/4.6;border-radius:22px;background:#dce7e0;border:1px solid var(--line);flex:none;transform:translateZ(0)}.gallery-card:nth-child(even){aspect-ratio:4/3.9;margin-top:40px}.gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.gallery-card:hover img{transform:scale(1.04)}.gallery-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(8,25,18,.65))}.gallery-caption{position:absolute;z-index:1;left:20px;right:20px;bottom:20px;color:#fff}.gallery-caption span{display:block;font:10px "Space Mono",monospace;text-transform:uppercase;letter-spacing:.1em;opacity:.8;margin-bottom:5px}.gallery-caption strong{font:500 21px/1.1 "Space Grotesk",sans-serif;letter-spacing:-.035em}.gallery-footnote{font-size:10px;color:#7a8981;margin-top:6px}
/* FAQ */
.faq-section{background:var(--mint)}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,8vw,120px);align-items:start}.faq-left{position:sticky;top:120px}.faq-left .section-title{font-size:clamp(38px,5.4vw,70px)}.faq-left>p{margin-top:20px;color:#536860;max-width:350px;font-size:14px}.faq-list{border-top:1px solid #abcbbb}.faq-item{border-bottom:1px solid #abcbbb}.faq-question{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font:500 clamp(18px,2.2vw,25px)/1.2 "Space Grotesk",sans-serif;letter-spacing:-.035em}.faq-question::-webkit-details-marker{display:none}.faq-plus{width:31px;height:31px;flex:none;position:relative;border:1px solid #92b5a3;border-radius:50%;transition:transform .3s,background .3s}.faq-plus:before,.faq-plus:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--ink);transform:translate(-50%,-50%)}.faq-plus:after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s}.faq-item[open] .faq-plus{background:#fff;transform:rotate(180deg)}.faq-item[open] .faq-plus:after{transform:translate(-50%,-50%) rotate(0)}.faq-answer{padding:0 48px 22px 0;color:#536860;font-size:14px;max-width:650px}
/* CONTACT / FOOTER */
.contact-section{padding-bottom:44px}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,105px)}.contact-intro .section-title{font-size:clamp(42px,6vw,76px)}.contact-intro>p{max-width:440px;color:var(--muted);margin-top:20px}.contact-methods{margin-top:32px;display:grid;gap:12px}.contact-method{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.contact-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green-dark);flex:none}.contact-icon svg{width:19px;height:19px}.contact-method small{display:block;font:10px "Space Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:3px}.contact-method strong{font-size:15px;font-weight:800}.contact-method .arrow{margin-left:auto;color:var(--green-dark)}.contact-form{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,42px)}.contact-form h3{font:500 30px/1.1 "Space Grotesk",sans-serif;letter-spacing:-.05em;margin-bottom:8px}.contact-form>p{color:var(--muted);font-size:13px;margin-bottom:24px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px;margin-bottom:16px}.field label{font:10px "Space Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:#61706b}.field input,.field select,.field textarea{display:block;width:100%;min-width:0;border:1px solid #d6dfd8;border-radius:10px;padding:12px 13px;background:#fafbf9;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #16a7791a}.field textarea{min-height:100px;resize:vertical}.contact-form .btn{width:100%;margin-top:3px}.privacy-note{font-size:10px;color:var(--muted);text-align:center;margin-top:13px}.footer{background:var(--dark);color:#f5f7f5;padding:55px var(--pad) 24px;overflow:hidden}.footer-top{display:flex;justify-content:space-between;align-items:start;gap:30px;padding-bottom:48px;border-bottom:1px solid #ffffff24}.footer-wordmark{font:500 clamp(55px,13.5vw,200px)/.78 "Space Grotesk",sans-serif;letter-spacing:-.095em;color:#c8f1df;white-space:nowrap;overflow:hidden;margin:34px 0 34px -1vw}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#a7b7ae;font-size:10px}.footer-social{display:flex;align-items:center;gap:20px;font-size:12px}.footer-social a:hover{color:#c8f1df}.footer-note{font-size:11px;color:#a7b7ae;max-width:410px}
/* MOTION STATES */
.js-motion .reveal{visibility:visible;opacity:0;transform:translateY(24px)}.js-motion .hero .reveal{visibility:visible;opacity:1;transform:none}.js-motion .service-card{visibility:visible}.mouse-glow{position:fixed;z-index:0;top:0;left:0;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#b8ecd92b 0,transparent 68%);pointer-events:none;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:multiply}.is-loaded .mouse-glow{opacity:1}.no-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:1100px){.hero-inner{grid-template-columns:1fr .82fr;gap:20px}.hero-visual{min-height:500px}.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-image{height:190px}.hero h1{font-size:clamp(55px,8vw,94px)}.header-phone{display:none}}
@media(max-width:820px){:root{--header-h:68px}.nav-links{position:fixed;inset:0;background:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:27px;z-index:2;pointer-events:none;transform:translateY(-110%);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;font-size:14px}.nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}.nav-links a{padding:5px 20px}.menu-toggle{display:grid}.header-actions>.btn{display:none}.hero{min-height:auto;padding-top:calc(var(--header-h) + 45px);padding-bottom:70px}.hero-inner{grid-template-columns:1fr}.hero-copy{padding:20px 0 0}.hero h1{font-size:clamp(54px,11.3vw,95px);max-width:12ch}.hero-visual{height:min(76vw,610px);min-height:360px;margin-top:5px;width:min(100%,620px);justify-self:center}.hero-photo.main-photo{left:18%;width:60%;height:75%}.hero-photo.side-photo{right:4%;width:35%;height:32%}.hero-photo.bottom-photo{left:6%;width:40%;height:32%}.floating-note{right:0;bottom:3%}.scroll-cue,.hero-index{display:none}.intro{grid-template-columns:1fr;gap:22px}.intro-side{display:flex;justify-content:space-between}.intro-bottom{align-items:start}.services-heading,.steps-heading,.gallery-heading{align-items:start;flex-direction:column}.services-heading>p,.steps-heading p,.gallery-heading p{max-width:560px}.consult-panel{grid-template-columns:1fr}.consult-side{width:min(75%,340px);justify-self:center;margin:10px 0 12px}.steps-grid{grid-template-columns:1fr;gap:8px}.step{min-height:0;padding:20px 0 28px}.step h3{margin-top:16px}.faq-layout{grid-template-columns:1fr;gap:35px}.faq-left{position:static}.contact-layout{grid-template-columns:1fr}.footer-top{flex-direction:column}.footer-note{max-width:500px}}
@media(max-width:520px){.brand{font-size:17px}.brand-mark{width:31px;height:31px}.hero h1{font-size:clamp(48px,12vw,66px)}.hero-copy>p{font-size:15px}.hero-buttons{align-items:stretch}.hero-buttons .btn{width:100%}.hero-contact{flex-wrap:wrap}.hero-visual{min-height:330px;height:90vw;margin-left:-6px;margin-right:-6px}.hero-photo{border-width:5px}.floating-note{max-width:175px;padding:10px 12px;font-size:10px}.floating-note svg{width:25px;height:25px}.marquee{padding:14px 0}.marquee-item{font-size:25px}.section{padding-top:76px;padding-bottom:76px}.services-grid{grid-template-columns:1fr;gap:12px}.service-card{min-height:0}.service-image{height:210px}.service-card-body{padding:18px 18px 4px}.service-card h3{font-size:25px}.service-card p{font-size:13px}.service-link{padding-top:16px}.service-tabs{gap:6px}.service-tab{padding:9px 12px;font-size:11px}.consult-panel{padding:28px 22px;border-radius:24px}.consult-actions .btn{width:100%}.consult-side{width:82%}.consult-badge{left:-18px}.gallery-card{width:76vw}.gallery-card:nth-child(even){margin-top:24px}.faq-question{font-size:19px}.faq-answer{font-size:13px}.field-grid{grid-template-columns:1fr;gap:0}.contact-form{padding:21px 17px}.contact-form h3{font-size:27px}.footer-wordmark{font-size:16vw}.footer-bottom{align-items:start;flex-direction:column}.footer-social{flex-wrap:wrap;gap:15px}.intro-bottom{flex-direction:column}.intro-stamp{width:90px;height:90px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.mouse-glow{display:none}}
/* MADEWITHGSAP-STYLE HORIZONTAL SCROLL */
.gallery-scroll-hint{display:flex;justify-content:flex-end;gap:8px;margin:-10px 0 10px;color:var(--green-dark);font-size:10px;line-height:1.5}
.gallery-scroll-hint b{font-size:15px;margin-left:5px}
.gallery-scroll-hint .mobile-hint{display:none}
@media(min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  .gallery-section .gallery-card{height:clamp(330px,55vh,460px);aspect-ratio:auto;flex:0 0 clamp(245px,30vw,420px)}
  .gallery-section .gallery-card:nth-child(even){height:clamp(305px,51vh,430px);margin-top:24px}
  .gallery-section .gallery-viewport{cursor:default;touch-action:pan-y}
}
@media(max-width:1023px), (prefers-reduced-motion:reduce){
  .gallery-scroll-hint .desktop-hint{display:none}
  .gallery-scroll-hint .mobile-hint{display:inline}
  .gallery-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity}
  .gallery-viewport::-webkit-scrollbar{display:none}
  .gallery-card{scroll-snap-align:start}
}

/* MADEWITHGSAP-INSPIRED: PINNED HORIZONTAL SPLIT-TEXT */
.split-scroll-section{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);color:var(--paper);padding:0}
.split-scroll-pin{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px;padding:104px var(--pad);overflow:hidden}
.split-scroll-kicker{position:absolute;top:clamp(24px,4.6vw,66px);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:center;gap:20px;color:rgba(255,255,255,.62);font-size:10px;z-index:2}
.split-scroll-kicker span:last-child{white-space:nowrap}
.split-scroll-text{position:relative;max-width:1000px;width:100%;margin:0 auto;text-align:center;font-family:"Space Grotesk",Manrope,sans-serif;font-size:clamp(48px,7.3vw,112px);font-weight:500;line-height:.92;letter-spacing:-.075em;overflow-wrap:normal}
.split-scroll-section.is-split-pinned .split-scroll-pin{height:100svh;min-height:560px;padding:0;justify-content:flex-start}
.split-scroll-section.is-split-pinned .split-scroll-text{display:flex;align-items:center;flex:none;width:max-content;max-width:none;margin:0;padding:0 100vw;text-align:left;white-space:nowrap;font-size:clamp(110px,15.5vw,250px);line-height:.82;will-change:transform}
.split-scroll-letter{display:inline-block;flex:none;transform-origin:50% 100%;will-change:transform}
.split-scroll-space{display:inline-block;width:.28em;flex:none}
.split-scroll-section.is-split-pinned .split-scroll-kicker{top:clamp(26px,5vw,72px)}
@media(max-width:768px){
  .split-scroll-section{padding:68px var(--pad) 74px}
  .split-scroll-pin{display:block;min-height:0;padding:0;overflow:visible}
  .split-scroll-kicker{position:static;margin-bottom:38px;gap:16px;font-size:9px}
  .split-scroll-kicker span:last-child{display:none}
  .split-scroll-text{width:auto;max-width:none;margin:0;text-align:left;font-size:clamp(48px,12.5vw,82px);line-height:.91;letter-spacing:-.07em;white-space:normal}
  .split-scroll-letter{will-change:auto}
}
@media(prefers-reduced-motion:reduce){.split-scroll-letter{transform:none!important}}



/* ==========================================================================
   ENHANCEMENTS & NEW COMPONENTS
   ========================================================================== */

/* --- Status Badge in Header & Contact --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mint);
  border: 1px solid var(--mint2);
  color: var(--green-dark);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  position: relative;
}

.status-dot.pulse:after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--green);
  opacity: 0.8;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* --- Hero Proof Badges --- */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.google-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 4px 12px rgba(20, 35, 31, 0.04);
}

.google-stars {
  color: #f59e0b;
  display: flex;
  gap: 2px;
}

/* --- Section 01 / Intro Bento Grid --- */
.intro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.bento-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
  box-shadow: 0 4px 20px rgba(20, 35, 31, 0.03);
}

.bento-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 12px 32px rgba(20, 35, 31, 0.07);
}

.bento-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.bento-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.bento-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Interactive Before & After Slider Section --- */
.before-after-section {
  padding: clamp(76px, 10vw, 130px) var(--pad);
  background: #edf1ec;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ba-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.ba-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.7);
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.ba-tab-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.25s;
}

.ba-tab-btn.active, .ba-tab-btn:hover {
  background: var(--ink);
  color: #fff;
}

.ba-card-wrapper {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 28px;
  padding: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 48px rgba(20, 35, 31, 0.08);
}

.ba-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  border-radius: 20px;
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
  background: #14231f;
}

.ba-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ba-after-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  will-change: width;
  border-right: 2px solid #fff;
}

.ba-after-wrapper .ba-img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  object-fit: cover;
}

.ba-badge {
  position: absolute;
  top: 18px;
  z-index: 5;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.ba-badge.before {
  right: 18px;
  background: rgba(20, 35, 31, 0.75);
  color: #fff;
}

.ba-badge.after {
  left: 18px;
  background: rgba(20, 167, 121, 0.85);
  color: #fff;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  top: 50%;
  margin-top: -22px;
  background: #fff;
  border-radius: 50%;
  z-index: 10;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  transition: transform 0.15s;
}

.ba-container:hover .ba-handle {
  transform: scale(1.1);
}

.ba-handle svg {
  width: 20px;
  height: 20px;
  color: var(--ink);
}

.ba-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 10px 6px 0;
  flex-wrap: wrap;
}

.ba-meta h4 {
  font-size: 18px;
  font-weight: 750;
  color: var(--ink);
}

.ba-meta p {
  font-size: 14px;
  color: var(--muted);
}

/* --- Interactive Smile Quiz Section --- */
.quiz-section {
  padding: clamp(76px, 10vw, 130px) var(--pad);
  background: var(--paper);
}

.quiz-card {
  max-width: 860px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line);
  box-shadow: 0 16px 48px rgba(20, 35, 31, 0.05);
  position: relative;
  overflow: hidden;
}

.quiz-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--green);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.quiz-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.quiz-step-num {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  color: var(--green-dark);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quiz-question {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
  color: var(--ink);
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .quiz-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quiz-option-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: all 0.25s;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.quiz-option-btn:hover {
  background: var(--mint);
  border-color: var(--green);
  transform: translateY(-2px);
}

.quiz-option-btn.selected {
  background: var(--mint2);
  border-color: var(--green);
  color: var(--green-dark);
}

.quiz-opt-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--green-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.quiz-result-view {
  display: none;
  text-align: center;
  padding: 20px 0;
}

.quiz-result-view.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.quiz-rec-box {
  background: var(--mint);
  border: 1px solid var(--mint2);
  border-radius: 20px;
  padding: 28px;
  margin: 24px 0 32px;
  text-align: left;
}

.quiz-rec-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.quiz-rec-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(22, 167, 121, 0.2);
  font-size: 13px;
  color: var(--ink);
}

/* --- Clinical Team / Especialistas Section --- */
.team-section {
  padding: clamp(76px, 10vw, 130px) var(--pad);
  background: #fff;
  border-top: 1px solid var(--line);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 48px;
}

.doctor-card {
  background: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  display: flex;
  flex-direction: column;
}

.doctor-card:hover {
  transform: translateY(-5px);
  border-color: var(--green);
  box-shadow: 0 16px 40px rgba(20, 35, 31, 0.08);
}

.doctor-photo-wrap {
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  position: relative;
  background: #e2e8e4;
}

.doctor-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.doctor-card:hover .doctor-photo-wrap img {
  transform: scale(1.05);
}

.doctor-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.doctor-spec {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--green-dark);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.doctor-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.doctor-cro {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 14px;
}

.doctor-bio {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 20px;
  flex: 1;
}

.doctor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.25s;
}

.doctor-btn:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* --- Social Proof & Google Reviews --- */
.reviews-section {
  padding: clamp(76px, 10vw, 130px) var(--pad);
  background: var(--paper);
}

.reviews-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.score-badge {
  display: flex;
  align-items: center;
  gap: 16px;
}

.score-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(20, 35, 31, 0.03);
}

.review-stars {
  color: #f59e0b;
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}

.review-quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
  font-style: italic;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
}

.review-info h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.review-info span {
  font-size: 12px;
  color: var(--muted);
}

/* --- Location & Hours Card --- */
.location-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  margin-top: 32px;
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.location-item h5 {
  font-size: 12px;
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.location-item p {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

/* --- Smart Booking Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 35, 31, 0.65);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-window {
  background: #fff;
  border-radius: 28px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 44px);
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-overlay.open .modal-window {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-close:hover {
  background: var(--mint2);
}

.modal-wizard-header {
  margin-bottom: 24px;
}

.modal-steps-nav {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.step-indicator {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.3s;
}

.step-indicator.active {
  background: var(--green);
}

.modal-step-pane {
  display: none;
}

.modal-step-pane.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

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

.modal-service-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.modal-service-pill {
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.modal-service-pill:hover, .modal-service-pill.selected {
  border-color: var(--green);
  background: var(--mint);
}

.modal-service-pill h6 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

.modal-service-pill span {
  font-size: 11px;
  color: var(--muted);
}

.modal-footer-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* --- Mobile Bottom Sticky Conversion Bar --- */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 820px) {
  .mobile-sticky-bar {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .mobile-sticky-bar .btn {
    flex: 1;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* --- Toast Notification System --- */
.toast-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 3000;
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
  font-size: 13px;
  font-weight: 600;
}

.toast-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-toast svg {
  color: var(--green);
  flex: none;
}

/* Responsive fixes for bento & details */
@media (max-width: 1024px) {
  .intro-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
  .ba-container {
    aspect-ratio: 4 / 3;
    min-height: 280px;
  }
}
