/* Clara Moraes Odontologia, conceito "Porcelana". Direção em ../referencias/DIRECAO.md
   Grade de 12 colunas. Títulos em Gloock, texto em Figtree. A régua de cor dos dentistas é o elemento próprio. */
:root{
  --porcelana:#F3F2EE; --branco:#fff; --tinta:#1B1416; --grafite:#6E6466; --apagado:#A39A9B;
  --quartzo:#E8CFC8; --quartzo-claro:#F4E6E2; --vinho:#4A1F2A; --noite:#2A1419; --linha:#DCD7D2;
  --serif:"Gloock",Didot,"Times New Roman",serif;
  --sans:"Figtree",system-ui,sans-serif;
  --pad:clamp(20px,4vw,64px);
  --gap:clamp(16px,2vw,32px);
  --space:clamp(96px,12vw,184px);
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{margin:0;background:var(--porcelana);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400}
p,figure{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--vinho);outline-offset:3px}
.skip{position:absolute;left:16px;top:-60px;background:#fff;color:#000;padding:10px 16px;z-index:200}
.skip:focus{top:12px}

.split .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.split .line > span{display:inline-block;will-change:transform}
.anim .split:not(.is-shown) .line > span{transform:translateY(110%)}
.split.is-shown .line > span{transform:none;transition:transform 1.05s var(--ease)}
.split.is-shown .line:nth-child(2) > span{transition-delay:.09s}
.title{font-family:var(--serif);font-size:clamp(44px,6vw,100px);line-height:.98;letter-spacing:-.025em}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;text-decoration:none;font-weight:600;font-size:16px;transition:background-color .25s,color .25s}
.btn-dark{background:var(--tinta);color:#fff}
.btn-dark:hover{background:var(--vinho)}

/* Cortina: abre do meio para os lados */
.curtain{display:none}
.intro .curtain{display:block;position:fixed;inset:0;z-index:150;pointer-events:none}
.curtain-half{position:absolute;top:0;bottom:0;width:50.5%;background:var(--quartzo);animation:open-l 1.25s var(--ease-io) 1s forwards}
.curtain-l{left:0}
.curtain-r{right:0;animation-name:open-r}
.curtain-word{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:clamp(44px,8vw,124px);letter-spacing:-.02em;color:var(--vinho);animation:word 2.1s var(--ease) forwards}
@keyframes open-l{to{transform:translateX(-101%)}}
@keyframes open-r{to{transform:translateX(101%)}}
@keyframes word{0%{opacity:0;transform:translateY(24px)}35%{opacity:1;transform:none}55%{opacity:1}75%,100%{opacity:0;transform:scale(1.04)}}
.intro .trck-banner{visibility:hidden}

.concept-bar{position:relative;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:9px var(--pad);background:var(--noite);color:#CDBFC1;font-size:13px;text-align:center}
.concept-bar a{color:#fff;font-weight:500;text-underline-offset:3px}

.topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--pad);background:rgba(243,242,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);transform:translateY(-101%);transition:transform .5s var(--ease)}
.topbar.is-shown{transform:none}
.topbar-brand{font-family:var(--serif);font-size:24px;text-decoration:none}
.topbar-wa{display:flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:var(--tinta);color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.topbar-wa:hover{background:var(--vinho)}

/* Abertura clara: a lente gira à direita, o texto fica à esquerda */
.hero{position:relative;min-height:calc(100svh - 38px);display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden;background:var(--porcelana)}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:url(/fotos/abertura.jpg) center/cover,radial-gradient(60% 70% at 70% 55%,#fff 0%,var(--quartzo-claro) 45%,var(--porcelana) 80%)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,242,238,.92) 0%,rgba(243,242,238,.55) 38%,rgba(243,242,238,0) 66%)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.nav{display:flex;align-items:center;gap:36px;padding:22px var(--pad)}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;font-family:var(--serif);font-size:28px;letter-spacing:-.01em;margin-right:auto}
.brand small{margin-top:6px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--grafite)}
.nav-links{display:flex;gap:32px;font-size:15px}
.nav-links a{text-decoration:none;color:var(--grafite);transition:color .2s}
.nav-links a:hover{color:var(--tinta)}
.nav-cta{display:flex;align-items:center;height:44px;padding:0 22px;border:1px solid var(--tinta);border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;transition:background-color .25s,color .25s}
.nav-cta:hover{background:var(--tinta);color:#fff}
.hero-text{padding:0 var(--pad) clamp(40px,5vw,72px)}
.hero h1{font-family:var(--serif);font-size:clamp(56px,8.4vw,150px);line-height:.94;letter-spacing:-.035em}
.hero h1 .line > span{text-wrap:balance}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 48px;margin-top:clamp(24px,3vw,40px)}
.hero-foot p{max-width:40ch;font-size:clamp(17px,1.4vw,20px);color:var(--grafite)}
.js .hero h1 .line > span{transform:translateY(110%)}
.js .hero.is-in h1 .line > span{transform:none;transition:transform 1.2s var(--ease)}
.js .hero.is-in h1 .line:nth-child(2) > span{transition-delay:.1s}
.js .hero-foot{opacity:0}
.js .hero.is-in .hero-foot{opacity:1;transition:opacity .9s ease .5s}
.intro .hero.is-in h1 .line > span{transition-delay:1.6s}
.intro .hero.is-in h1 .line:nth-child(2) > span{transition-delay:1.7s}
.intro .hero.is-in .hero-foot{transition-delay:2.1s}

/* A régua de cor */
.shade{background:var(--noite);color:#fff;padding:var(--space) 0}
.shade-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap);padding:0 var(--pad)}
.shade-head .title{grid-column:1 / span 7}
.shade-intro{grid-column:8 / span 5;align-self:end;color:#D6C7C9;max-width:42ch}
.shade-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gap);align-items:center;margin-top:clamp(56px,6vw,96px);padding-left:var(--pad)}
.shade-readout{grid-column:1 / span 4;padding-right:var(--gap)}
.shade-code{font-family:var(--serif);font-size:clamp(96px,12vw,200px);line-height:.85;letter-spacing:-.04em;color:var(--quartzo)}
.shade-zone{margin-top:20px;font-weight:600;font-size:15px;color:#fff}
.shade-text{margin-top:10px;color:#D6C7C9;max-width:36ch;min-height:6.4em}
.shade-rail{grid-column:5 / -1;display:flex;gap:14px;overflow-x:auto;padding:48px var(--pad) 28px 8px;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 64px),transparent)}
.shade-rail::-webkit-scrollbar{display:none}
.shade-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.tab{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0;border:0;background:none;color:#CDBFC1;cursor:pointer;font:600 14px/1 var(--sans)}
/* Cada tom tem o formato da plaquinha da escala: mais escuro perto da gengiva, translúcido na ponta */
.tab-chip{display:block;width:clamp(48px,4.2vw,64px);height:clamp(132px,12vw,180px);border-radius:30px 30px 22px 22px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#8a6a4a) 0%,var(--c) 32%,var(--c) 72%,color-mix(in srgb,var(--c) 70%,#dfe6ee) 100%);box-shadow:inset 0 -10px 18px rgba(255,255,255,.25),inset 0 8px 14px rgba(0,0,0,.08),0 10px 30px rgba(0,0,0,.35);transition:transform .45s var(--ease)}
.tab[aria-selected="true"]{color:#fff}
.tab[aria-selected="true"] .tab-chip{transform:translateY(-22px) scale(1.1)}
.tab:hover .tab-chip{transform:translateY(-8px)}
.tab[aria-selected="true"]:hover .tab-chip{transform:translateY(-22px) scale(1.1)}
.shade-note{padding:28px var(--pad) 0;font-size:14px;color:#A8979A;max-width:80ch}

/* Tratamentos */
.treat{padding:var(--space) var(--pad)}
.treat-list{margin-top:clamp(48px,5vw,80px);border-bottom:1px solid var(--linha)}
.treat-item{border-top:1px solid var(--linha)}
.treat-item summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:clamp(22px,2.4vw,34px) 0;transition:color .3s,padding-left .45s var(--ease)}
.treat-item summary::-webkit-details-marker{display:none}
.treat-name{font-family:var(--serif);font-size:clamp(34px,4.6vw,80px);line-height:1;letter-spacing:-.025em}
.treat-short{font-size:15px;color:var(--grafite);text-align:right}
.treat-item summary:hover{color:var(--vinho);padding-left:18px}
.treat-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap);padding:0 0 40px}
.treat-img{grid-column:1 / span 4;aspect-ratio:3/4;border-radius:18px;background-color:var(--quartzo-claro);background-size:cover;background-position:center}
.treat-body p{grid-column:6 / span 6;align-self:end;max-width:52ch;font-size:18px}
/* Foto que segue o mouse (só no computador) */
.treat-follow{position:fixed;left:0;top:0;z-index:40;width:280px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .3s,transform .4s var(--ease)}
.treat-follow span{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--quartzo)}
.treat-follow.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Primeira consulta */
.visit{background:var(--quartzo);padding:var(--space) var(--pad)}
.track{position:relative;height:1px;margin:clamp(56px,6vw,88px) 0 0;background:rgba(74,31,42,.25)}
.track-fill{position:absolute;inset:0;background:var(--vinho);transform-origin:left;transform:scaleX(.08)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gap)}
.steps li{padding-top:36px}
.steps h3{font-family:var(--serif);font-size:clamp(38px,4vw,68px);line-height:1;letter-spacing:-.025em;margin-bottom:18px;color:var(--vinho)}
.steps p{max-width:34ch}

/* A dentista */
.doctor{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gap);align-items:end;padding:var(--space) var(--pad)}
.doctor-photo{grid-column:1 / span 5;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:24px;background:var(--quartzo-claro)}
.doctor-text{grid-column:7 / span 5}
.cro{margin:18px 0 24px;font-weight:600;color:var(--vinho)}
.doctor-text p + p{margin-top:14px}
.doctor-text p:not(.cro){color:var(--grafite);max-width:46ch}
.img{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform}
.doctor-photo .img{background-position:center 20%}

.room{position:relative;height:clamp(360px,72vh,780px);overflow:hidden;margin:0 var(--pad);border-radius:28px;background:var(--quartzo-claro)}

/* Perguntas */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gap);padding:var(--space) var(--pad)}
.faq .title{grid-column:1 / span 5;align-self:start;position:sticky;top:110px}
.faq-list{grid-column:7 / span 6;border-bottom:1px solid var(--linha)}
.faq details{border-top:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:26px 0;font-family:var(--serif);font-size:clamp(24px,2.2vw,34px);line-height:1.15;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--vinho);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:56ch;padding-bottom:28px;color:var(--grafite)}

.closing{margin:0 var(--pad) var(--pad);padding:clamp(96px,12vw,200px) clamp(24px,5vw,80px);border-radius:28px;background:var(--quartzo);text-align:center}
.closing h2{font-family:var(--serif);font-size:clamp(52px,8.4vw,144px);line-height:.94;letter-spacing:-.035em;color:var(--vinho)}
.closing p{margin:24px auto 36px;max-width:40ch;font-size:19px}

.footer{background:var(--noite);color:#CDBFC1;padding:48px var(--pad) 64px;font-size:14px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap)}
.footer > p:nth-child(1){grid-column:span 3}
.footer > p:nth-child(2){grid-column:span 4}
.footer > p:nth-child(3){grid-column:span 4}
.footer > p:nth-child(4){grid-column:span 1;justify-self:end}
.footer-brand{font-family:var(--serif);font-size:24px;color:#fff;line-height:1.1}
.footer-note{color:#9C8C8F}
.footer-cookies{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

@media (max-width:900px){
  .nav-links{display:none}
  /* No celular o vídeo fica na metade de cima e o texto embaixo, cada um no seu espaço */
  .hero-media{bottom:44%}
  .hero-media::after{background:linear-gradient(180deg,rgba(243,242,238,0) 0%,rgba(243,242,238,0) 70%,var(--porcelana) 100%)}
  .hero-video{object-position:58% 60%}
  .shade-head,.shade-stage,.treat-body,.doctor,.faq,.footer{grid-template-columns:1fr}
  .shade-head .title,.shade-intro,.shade-readout,.shade-rail,.treat-img,.treat-body p,.doctor-photo,.doctor-text,.faq .title,.faq-list{grid-column:1}
  .shade-stage{padding:0}
  .shade-readout{padding:0 var(--pad);order:2}
  .shade-rail{order:1;padding:40px var(--pad) 24px}
  .shade-text{min-height:0}
  .treat-short{display:none}
  .treat-img{max-width:360px}
  .steps{grid-template-columns:1fr}
  .faq .title{position:static}
  .faq-list{margin-top:40px}
  .footer > p{grid-column:1 !important;justify-self:start !important}
}
@media (max-width:560px){
  .nav{padding:16px var(--pad)}
  .brand{font-size:24px}
  .nav-cta{height:40px;padding:0 16px;font-size:14px}
  .hero h1{font-size:clamp(50px,15vw,96px)}
}
@media (prefers-reduced-motion:reduce){
  .intro .curtain{display:none}
  .js .hero h1 .line > span,.anim .split:not(.is-shown) .line > span{transform:none}
  .js .hero-foot{opacity:1}
}