/* Dra. Luciana Bertão · landing pages
   Cores: vinho #3F1E25 · creme #F8F4EE · terracota #977B6E · bege #D6C9BF · branco #FFFFFF */

@font-face{font-family:'Mogan';src:url(../fonts/mogan.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dm-sans-latin.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F8F4EE}
img{max-width:100%}
a{color:#3F1E25}
a:hover{color:#977B6E}

.lp{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#3F1E25;background:#F8F4EE;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.65}
.serif{font-family:'Mogan',Georgia,'Times New Roman',serif;font-weight:400}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.sec{padding:112px 0}
section[id],header[id]{scroll-margin-top:16px}

.skip{position:absolute;left:16px;top:-80px;z-index:100;background:#F8F4EE;color:#3F1E25;padding:12px 18px;border-radius:6px;font-weight:500;text-decoration:none}
.skip:focus{top:16px;outline:2px solid #3F1E25;outline-offset:2px}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;border-radius:6px;font-family:'DM Sans',system-ui,sans-serif;font-size:16px;font-weight:500;letter-spacing:.01em;line-height:1.3;text-decoration:none;transition:background-color .2s ease,color .2s ease;text-align:center}
.btn-p{background:#3F1E25;color:#F8F4EE}
.btn-p:hover{background:#D6C9BF;color:#3F1E25}
.btn-p:focus-visible{outline:2px solid #3F1E25;outline-offset:3px}
.btn-c{background:#D6C9BF;color:#3F1E25}
.btn-c:hover{background:#F8F4EE;color:#3F1E25}
.btn-c:focus-visible{outline:2px solid #D6C9BF;outline-offset:3px}
.tlink{color:#3F1E25;text-decoration:underline;text-underline-offset:3px}
.tlink:hover{color:#977B6E}
.tlink:focus-visible{outline:2px solid #3F1E25;outline-offset:2px;border-radius:2px}

/* Hero */
.hero{position:relative;background:#3F1E25;color:#F8F4EE;height:max(720px,56.25vw);overflow:hidden}
.hero-pic{position:absolute;inset:0;display:block;overflow:hidden}
/* Hero em camadas, todas no mesmo palco 16:9: arte sem monograma, monograma, recorte da Dra. e a barra do L (que passa na frente do braço) */
.hero-stage{position:absolute;top:0;left:calc((100% - max(100vw,1280px)) * .28);width:max(100vw,1280px);aspect-ratio:16/9}
.hl{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none;-webkit-user-select:none}
.hl-art{left:0;top:0;width:100%;height:100%;transform:translate3d(0,var(--ay,0px),0);will-change:transform}
.hl-dra{left:18.75%;top:0;width:22.5%;height:80%;transform:translate3d(0,var(--ay,0px),0);will-change:transform}
.hl-mono{left:8.1625%;top:10.7111%;width:24.65%;height:59.6889%;transform:translate3d(var(--mx,0px),var(--my,0px),0);will-change:transform}
.hl-front{clip-path:inset(68.8% 18.71% 19.21% 62.98%)}
.hero-txt{position:absolute;left:65%;right:6%;top:50%;transform:translateY(calc(-44% + var(--ty,0px)));max-width:460px}
.hero-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;gap:32px;padding:36px 6%;z-index:2}
.navl{color:#F8F4EE;text-decoration:none;font-size:14px;opacity:.85}
.navl:hover{color:#D6C9BF;opacity:1}
.navl:focus-visible{outline:2px solid #D6C9BF;outline-offset:4px;border-radius:2px}

/* Grades */
.g-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}
.g-about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}
.g-about img{height:auto}
.g-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:80px;align-items:start}
.g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.g-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.g-gal{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:16px}

/* Dúvidas frequentes (acordeão) */
.faq{border-bottom:1px solid #D6C9BF}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:20px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:500;line-height:1.4;color:#3F1E25}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:''}
.faq-q:hover{color:#5A2C35}
.faq-q:focus-visible{outline:2px solid #3F1E25;outline-offset:4px;border-radius:2px}
.faq-ic{flex:none;transition:transform .25s ease}
.faq[open] .faq-ic{transform:rotate(45deg)}
.faq-a{margin:0;padding:0 48px 24px 0;font-size:16.5px;line-height:1.7;color:#5A3A40}

/* Barra fixa no celular */
.mbar{display:none}

/* Aviso de cookies */
.cookie{position:fixed;left:24px;bottom:24px;z-index:60;width:360px;max-width:calc(100% - 32px);background:#FFFFFF;border:1px solid #D6C9BF;border-radius:10px;padding:20px 22px;box-shadow:0 12px 32px rgba(63,30,37,.12)}
.cookie[hidden]{display:none}
.cookie-t{margin:0 0 16px;font-size:14px;line-height:1.6;color:#3F1E25}
.cookie-x{min-height:44px;padding:0 20px;border-radius:6px;border:0;background:#3F1E25;color:#F8F4EE;font:500 15px 'DM Sans',system-ui,sans-serif;cursor:pointer}
.cookie-x:hover{background:#D6C9BF;color:#3F1E25}
.cookie-x:focus-visible{outline:2px solid #3F1E25;outline-offset:3px}

/* Página de texto (política de privacidade) */
.doc{max-width:760px;margin:0 auto;padding:96px 24px 120px}
.doc h1{font-family:'Mogan',Georgia,serif;font-weight:400;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.1;margin:0 0 32px}
.doc h2{font-size:20px;font-weight:600;margin:40px 0 12px}
.doc p,.doc li{color:#5A3A40}


/* Movimento
   - Hero: entrada em sequência e zoom leve da foto (CSS)
   - Rolagem: foto do hero desce mais devagar; no computador o texto esmaece ao sair (main.js)
   - Seções: títulos, listas, cartões e fotos aparecem uma única vez ao entrar na tela (main.js)
   Quem usa "reduzir movimento" no sistema vê tudo parado. */
@keyframes lbUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbZoom{from{transform:scale(1.04)}to{transform:none}}
@keyframes lbMono{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  .hero-pic{animation:lbZoom 1.8s cubic-bezier(.2,.7,.2,1) both}
  .hl-mono{animation:lbMono 1.6s cubic-bezier(.2,.7,.2,1) .15s both}
  .hero-txt>*{animation:lbUp .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-txt>:nth-child(1){animation-delay:.10s}
  .hero-txt>:nth-child(2){animation-delay:.19s}
  .hero-txt>:nth-child(3){animation-delay:.28s}
  .hero-txt>:nth-child(4){animation-delay:.37s}
  .hero-txt>:nth-child(5){animation-delay:.46s}
  .hero-nav{animation:lbFade 1s ease .5s both}
}
.js-anim main h2:not(.is-in),
.js-anim main p:has(+ h2):not(.is-in),
.js-anim main ul > li:not(.is-in),
.js-anim .g-4 > li:not(.is-in),
.js-anim .g-cards > article:not(.is-in),
.js-anim .g-about > img:not(.is-in),
.js-anim .g-gal > figure:not(.is-in),
.js-anim .faq:not(.is-in){opacity:0;transform:translateY(8px)}
.js-anim main h2,
.js-anim main p:has(+ h2),
.js-anim main ul > li,
.js-anim .g-4 > li,
.js-anim .g-cards > article,
.js-anim .g-about > img,
.js-anim .g-gal > figure,
.js-anim .faq{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),border-color .25s ease;transition-delay:var(--d,0ms)}
.g-4 > li:hover,.g-cards > article:hover{border-color:#977B6E!important}
.g-4 > li,.g-cards > article{transition:border-color .25s ease}

/* Menu fixo (só no computador): aparece depois que o hero sai da tela */
.topbar{display:none}
@media (min-width:1200px){
  .topbar{display:block;position:fixed;top:0;left:0;right:0;z-index:40;background:#F8F4EE;border-bottom:1px solid #D6C9BF;transform:translateY(-100%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s linear .4s}
  .topbar.on{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s}
  .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:32px;height:64px}
  .topbar-logo{display:block;flex:none;border-radius:4px}
  .topbar-logo img{display:block;height:42px;width:auto}
  .topbar-logo:focus-visible{outline:2px solid #3F1E25;outline-offset:4px}
  .topbar-links{display:flex;gap:32px;margin-left:auto}
  .tnav{position:relative;color:#3F1E25;text-decoration:none;font-size:14px;padding:6px 0}
  .tnav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#977B6E;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .tnav:hover{color:#3F1E25}
  .tnav:hover::after,.tnav[aria-current="true"]::after{transform:scaleX(1)}
  .tnav:focus-visible{outline:2px solid #3F1E25;outline-offset:4px;border-radius:2px}
  .topbar-btn{min-height:40px;padding:0 18px;font-size:14px;flex:none}
  section[id]{scroll-margin-top:72px}
}

@media (max-width:1199px){
  .hero{height:auto}
  .hero-pic{position:relative;inset:auto;height:clamp(420px,100vw,600px);transform-origin:center top}
  .hero-pic::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:34%;background:linear-gradient(to bottom,rgba(63,30,37,0) 0%,rgba(63,30,37,.55) 55%,#3F1E25 100%);pointer-events:none}
  .hero-stage{left:calc(50% - clamp(420px,100vw,600px) * .7222);width:auto;height:100%}
  .hero-txt{position:relative;left:auto;right:auto;top:auto;transform:none;max-width:680px;padding:40px 24px 64px}
  .hero-nav{display:none}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2,.g-about,.g-faq{gap:48px}
}

@media (max-width:768px){
  .lp{font-size:16px;padding-bottom:84px}
  .sec{padding:72px 0}
  .wrap{padding:0 20px}
  .g-2,.g-about,.g-faq,.g-4,.g-cards,.g-gal{grid-template-columns:minmax(0,1fr)}
  .g-2,.g-about,.g-faq{gap:40px}
  .btn{width:100%}
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#F8F4EE;border-top:1px solid #D6C9BF;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .cookie{left:12px;right:12px;width:auto;bottom:88px;display:flex;align-items:center;gap:14px;padding:12px 14px}
  .cookie-t{margin:0;font-size:12.5px;line-height:1.5}
  .cookie-x{flex:none;padding:0 16px}
  .faq-q{font-size:17px}
  .faq-a{padding-right:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .hl{transform:none!important}
}