/* ============================================================ DRA. APARECIDA AZEVEDO — estilos customizados Complementa o Tailwind (CDN). Tokens no do index.html Paleta editorial clara: creme + vinho + terracota (ref. modelo de clínica de estética premium), tipografia Cormorant + Inter. ============================================================ */ :root{ --cream: #FAF6F1; --cream-soft: #FDF9F6; --wine: #581B21; --wine-deep: #3E1218; --clay: #7C5336; --sand: #E9E0D5; --sand-line: #DDD6CF; --ink: #201917; --muted: #8A7B72; --ease: cubic-bezier(.22,1,.36,1); } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ overflow-x:hidden; } ::-webkit-scrollbar{ width:9px; } ::-webkit-scrollbar-track{ background:var(--cream); } ::-webkit-scrollbar-thumb{ background:var(--sand-line); border-radius:9px; } ::-webkit-scrollbar-thumb:hover{ background:var(--wine); } /* ---------- estados iniciais (só quando o JS está ativo) ---- */ .js [data-reveal]{ opacity:0; transform:translateY(28px); } .js [data-reveal-lines] .rl-line{ display:block; } .js .line-mask .line{ transform:translateY(130%); } .js #hero-eyebrow, .js #hero-sub, .js #hero-cta, .js #hero-stats{ opacity:0; transform:translateY(24px); } .js .card-proc{ opacity:0; transform:translateY(36px); } .js .gal{ opacity:0; transform:translateY(40px); } .js .feat-card{ opacity:0; transform:translateY(30px); } .js.is-loading body{ overflow:hidden; height:100vh; } /* liberado pelo preloader */ /* ---------- textura de grão (só no bloco escuro final) -------- */ .grain{ pointer-events:none; opacity:.10; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ---------- cursor ------------------------------------------- */ #cursor{ width:26px; height:26px; margin:-13px 0 0 -13px; border:1px solid rgba(88,27,33,.45); border-radius:999px; transition:width .35s var(--ease), height .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease); will-change:transform; } #cursor.is-hover{ width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(88,27,33,.08); border-color:rgba(88,27,33,.7); } /* ---------- header ------------------------------------------- */ .brand-logo{ display:block; height:auto; } .brand-logo--header{ width:clamp(220px,20vw,280px); } .brand-logo--menu{ width:min(250px,78vw); } .brand-logo--footer{ width:min(260px,78vw); } #header.is-stuck{ background:rgba(250,246,241,.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--sand-line); } .nav-link{ position:relative; font-size:13px; letter-spacing:.06em; color:rgba(32,25,23,.7); transition:color .35s var(--ease); } .nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--wine); transition:width .45s var(--ease); } .nav-link:hover{ color:var(--ink); } .nav-link:hover::after{ width:100%; } .burger-line{ transition:transform .4s var(--ease), opacity .3s; background:var(--ink); } #burger.is-open .burger-line:nth-child(1){ transform:translateY(3.5px) rotate(45deg); } #burger.is-open .burger-line:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); } /* ---------- botões -------------------------------------------- rounded-sm (não pill) — segue o padrão do modelo de referência */ .btn-primary, .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:1rem 2rem; border-radius:3px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); will-change:transform; } .btn-primary{ background:var(--wine); color:var(--cream); } .btn-primary:hover{ background:var(--wine-deep); } .btn-ghost{ border:1px solid rgba(32,25,23,.2); color:var(--ink); } .btn-ghost:hover{ border-color:var(--wine); color:var(--wine); } .btn-primary--onwine{ background:var(--cream); color:var(--wine); } .btn-primary--onwine:hover{ background:var(--sand); } .btn-ghost--onwine{ border-color:rgba(250,246,241,.35); color:var(--cream); } .btn-ghost--onwine:hover{ border-color:var(--cream); } /* ---------- tipografia de seção ------------------------------ */ .section-eyebrow{ display:flex; align-items:center; gap:1rem; font-size:11px; letter-spacing:.35em; text-transform:uppercase; color:var(--clay); } .section-eyebrow::before{ content:''; height:1px; width:2.5rem; background:rgba(124,83,54,.5); } .section-title{ font-family:"Cormorant Garamond",serif; font-weight:400; line-height:1.05; color:var(--ink); font-size:clamp(2.1rem,4.8vw,3.6rem); } /* As máscaras cortam a linha para a animação de subida. Com line-height ~1, a "perna" das letras (p, q, ç) passa da caixa de linha e seria cortada — o padding devolve esse espaço e a margem negativa cancela no layout. */ [data-reveal-lines] .rl-mask, .line-mask{ display:block; overflow:hidden; padding-bottom:.22em; margin-bottom:-.22em; } /* ---------- marquee ------------------------------------------ */ .mq{ font-family:"Cormorant Garamond",serif; font-size:clamp(1.2rem,2.4vw,1.7rem); font-style:italic; font-weight:400; color:rgba(32,25,23,.4); } .mq-dot{ width:5px; height:5px; border-radius:999px; background:var(--wine); opacity:.6; flex:none; } /* ---------- stats do hero -------------------------------------*/ .hero-stat{ } .hero-stat b{ display:block; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.7rem; color:var(--wine); } .hero-stat > span{ display:block; margin-top:.3rem; font-size:11px; line-height:1.3; color:var(--muted); } /* ---------- cards de diferencial (feature grid) --------------*/ .feat-card{ background:var(--cream-soft); border:1px solid var(--sand-line); border-radius:3px; padding:1.75rem 1.5rem; transition:border-color .4s var(--ease), transform .4s var(--ease); } .feat-card:hover{ border-color:var(--wine); transform:translateY(-3px); } .feat-card svg{ color:var(--wine); } .feat-card h3{ margin-top:1.1rem; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.2rem; color:var(--ink); } .feat-card p{ margin-top:.5rem; font-size:.88rem; line-height:1.6; color:var(--muted); } /* ---------- cards de procedimento (bento, padrão modelo) ------*/ .card-proc{ position:relative; overflow:hidden; background:var(--cream-soft); border:1px solid var(--sand-line); border-radius:3px; padding:2.4rem 1.9rem 2.2rem; min-height:17rem; display:flex; flex-direction:column; transition:background-color .5s var(--ease), border-color .5s var(--ease); } .card-proc::before{ /* numeração fantasma */ content:attr(data-num); position:absolute; top:1.4rem; right:1.7rem; font-family:"Cormorant Garamond",serif; font-size:2.4rem; color:rgba(88,27,33,.08); transition:color .5s var(--ease); } .card-proc::after{ /* spotlight que segue o mouse */ content:''; position:absolute; inset:0; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(88,27,33,.06), transparent 62%); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; } .card-proc:hover{ border-color:var(--wine); background:#fff; } .card-proc:hover::after{ opacity:1; } .card-proc:hover::before{ color:rgba(88,27,33,.18); } .card-tag-eyebrow{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--clay); } .card-proc h3{ margin-top:.6rem; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.55rem; line-height:1.2; max-width:16ch; color:var(--ink); transition:color .4s var(--ease); } .card-proc:hover h3{ color:var(--wine); } .card-proc p{ margin-top:.9rem; font-size:.9rem; font-weight:400; line-height:1.65; color:var(--muted); } .card-tag{ margin-top:auto; padding-top:1.5rem; font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); } /* ---------- abas de serviços -------------------------------- */ .service-tabs{ margin-top:1rem; } .service-tablist{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--sand-line); } .service-tab{ position:relative; min-height:5.4rem; display:flex; align-items:center; gap:1.1rem; padding:1.1rem 1.35rem; text-align:left; font-family:"Cormorant Garamond",serif; font-size:clamp(1.25rem,2.4vw,1.65rem); line-height:1.15; color:var(--muted); transition:color .35s var(--ease), background-color .35s var(--ease); } .service-tab::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--wine); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); } .service-tab:hover, .service-tab:focus-visible, .service-tab.is-active{ color:var(--wine); background:rgba(255,255,255,.32); } .service-tab.is-active::after{ transform:scaleX(1); } .service-tab:focus-visible{ outline:2px solid var(--clay); outline-offset:-2px; } .service-tab-number{ flex:none; font-family:Inter,system-ui,sans-serif; font-size:10px; letter-spacing:.22em; color:var(--clay); } .service-panel{ padding-top:3.25rem; } .service-panel-heading{ display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,25rem); align-items:end; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid var(--sand-line); } .service-panel-heading h3{ margin-top:.6rem; font-family:"Cormorant Garamond",serif; font-size:clamp(2rem,4vw,3rem); font-weight:500; line-height:1.05; color:var(--ink); } .service-panel-heading h3 span{ font-style:italic; color:var(--wine); } .service-panel-heading > p{ color:var(--muted); font-size:.92rem; line-height:1.7; } .service-item-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:1px; background:var(--sand-line); border:1px solid var(--sand-line); } .service-item{ position:relative; min-height:18rem; display:flex; flex-direction:column; padding:2rem 1.8rem 1.8rem; background:var(--cream-soft); transition:background-color .4s var(--ease); } .service-item:hover{ background:#fff; } .service-item-media{ height:clamp(12rem,22vw,15rem); margin:-2rem -1.8rem 1.7rem; overflow:hidden; background:var(--sand); } .service-item-media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 52%; transition:transform .8s var(--ease), filter .8s var(--ease); } .service-item:nth-child(2) .service-item-media img{ object-position:center 50%; } .service-item:nth-child(3) .service-item-media img{ object-position:center 40%; } .service-item:nth-child(4) .service-item-media img{ object-position:center 42%; } .service-item:hover .service-item-media img{ transform:scale(1.035); filter:saturate(.94); } .service-item-number{ font-size:10px; letter-spacing:.25em; color:var(--clay); } .service-item h4{ margin-top:.7rem; padding-right:2rem; font-family:"Cormorant Garamond",serif; font-size:1.55rem; font-weight:500; line-height:1.12; color:var(--ink); } .service-item p,.skin-service p{ margin-top:.8rem; font-size:.88rem; line-height:1.65; color:var(--muted); } .service-item ul{ margin-top:1rem; padding-left:1rem; list-style:disc; color:var(--muted); } .service-item li{ padding-left:.25rem; font-size:.82rem; line-height:1.65; } .service-item-note{ margin-top:auto; padding-top:1.4rem; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--clay); } .skin-line-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:1px; background:var(--sand-line); border:1px solid var(--sand-line); } .skin-line{ padding:1.8rem; background:var(--cream-soft); } .skin-line-label{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--clay); } .skin-line-label--solo{ margin-bottom:1.1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--sand-line); } .skin-line > h4{ margin-top:.55rem; padding-bottom:1.1rem; border-bottom:1px solid var(--sand-line); font-family:"Cormorant Garamond",serif; font-size:1.55rem; font-weight:500; line-height:1.15; color:var(--wine); } .skin-service{ padding:1.2rem 0; border-bottom:1px solid var(--sand-line); } .skin-service:last-child{ padding-bottom:.15rem; border-bottom:0; } .skin-service h5{ font-family:"Cormorant Garamond",serif; font-size:1.2rem; font-weight:500; line-height:1.2; color:var(--ink); } .skin-service h5 span{ font-family:Inter,system-ui,sans-serif; font-size:.68em; color:var(--muted); } @media (max-width:767px){ .service-tablist{ grid-template-columns:1fr; } .service-tab{ min-height:4.7rem; padding:.95rem 1rem; } .service-tab::after{ right:auto; width:100%; } .service-panel{ padding-top:2.4rem; } .service-panel-heading{ grid-template-columns:1fr; gap:1rem; padding-bottom:1.8rem; } .service-item-grid,.skin-line-grid{ grid-template-columns:1fr; } .service-item{ min-height:0; padding:1.6rem 1.35rem; } .service-item-media{ height:15rem; margin:-1.6rem -1.35rem 1.5rem; } .skin-line{ padding:1.45rem 1.35rem; } } /* ---------- comparador antes/depois -------------------------- */ .compare{ --pos:50%; position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:3px; cursor:ew-resize; user-select:none; background:var(--sand); touch-action:pan-y; } .compare-pane{ position:absolute; inset:0; overflow:hidden; } .compare-pane img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; } .compare-before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); } .compare-badge{ position:absolute; bottom:1.25rem; padding:.45rem 1.1rem; border-radius:3px; background:rgba(250,246,241,.75); backdrop-filter:blur(10px); border:1px solid var(--sand-line); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink); } .compare-handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; transform:translateX(-1px); display:flex; align-items:center; justify-content:center; } .compare-line{ position:absolute; inset-block:0; left:0; width:2px; background:var(--cream); box-shadow:0 0 18px rgba(88,27,33,.4); } .compare-knob{ position:relative; z-index:2; height:52px; width:52px; border-radius:999px; background:rgba(250,246,241,.85); backdrop-filter:blur(10px); border:1px solid var(--wine); color:var(--wine); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), background-color .35s var(--ease); } .compare:hover .compare-knob{ transform:scale(1.08); background:var(--cream); } /* ---------- galeria ------------------------------------------ */ .gal{ position:relative; overflow:hidden; border-radius:3px; } .gal img{ --z:1; /* zoom base — usado para recortar marcas d'água */ --ty:0%; /* deslocamento vertical do recorte */ width:100%; aspect-ratio:4/5; object-fit:cover; transform:translateY(var(--ty)) scale(var(--z)); transition:transform 1.1s var(--ease), filter .8s var(--ease); filter:saturate(.96); } .gal:hover img{ transform:translateY(var(--ty)) scale(calc(var(--z) * 1.05)); filter:saturate(1.04); } .gal figcaption{ position:absolute; inset-inline:0; bottom:0; display:flex; flex-direction:column; gap:.35rem; padding:1.75rem 1.5rem; background:linear-gradient(to top, rgba(32,25,23,.78), transparent); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--cream); } /* ---------- processo ------------------------------------------*/ .step h3{ margin-top:1.5rem; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.4rem; color:var(--ink); } .step p{ margin-top:.8rem; max-width:22rem; font-size:.9rem; font-weight:400; line-height:1.65; color:var(--muted); } .step-dot{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:42px; width:42px; border-radius:999px; background:var(--cream); border:1px solid rgba(88,27,33,.3); font-family:"Cormorant Garamond",serif; font-size:1rem; color:var(--wine); } /* ---------- depoimentos -----------------------------------------*/ .testi{ width:min(23rem,80vw); flex:none; background:var(--cream-soft); border:1px solid var(--sand-line); border-radius:3px; padding:2.1rem 1.85rem; transition:border-color .4s var(--ease), background-color .4s var(--ease); } .testi:hover{ border-color:var(--wine); background:#fff; } .testi-stars{ display:flex; gap:.2rem; color:var(--wine); } .testi-stars svg{ width:13px; height:13px; } .testi p{ margin-top:1rem; font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:400; font-size:1.25rem; line-height:1.5; color:var(--ink); } .testi footer{ margin-top:1.4rem; font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); } /* ---------- localização -----------------------------------------*/ .map-box{ position:relative; aspect-ratio:4/3; border-radius:3px; overflow:hidden; background:var(--sand); border:1px solid var(--sand-line); } .map-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .map-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; padding:2rem; } .map-placeholder svg{ color:var(--wine); } .map-placeholder p{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); } /* ---------- FAQ ---------------------------------------------- */ .faq{ border-bottom:1px solid var(--sand-line); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.6rem 0; text-align:left; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(1.1rem,2vw,1.4rem); color:var(--ink); transition:color .4s var(--ease); } .faq-q:hover{ color:var(--wine); } .faq.is-open .faq-q{ color:var(--wine); } .faq-ico{ position:relative; flex:none; height:14px; width:14px; color:var(--wine); } .faq-ico::before, .faq-ico::after{ content:''; position:absolute; inset:0; margin:auto; background:currentColor; } .faq-ico::before{ height:1px; width:14px; } .faq-ico::after{ width:1px; height:14px; transition:transform .45s var(--ease), opacity .45s var(--ease); } .faq.is-open .faq-ico::after{ transform:rotate(90deg); opacity:0; } .faq-a{ overflow:hidden; height:0; } .faq-a p{ padding:0 0 1.8rem; max-width:52ch; font-size:.92rem; font-weight:400; line-height:1.75; color:var(--muted); } /* ---------- formulário rápido (agenda via WhatsApp) ----------- */ .field label{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(32,25,23,.65); margin-bottom:.5rem; } .field input, .field select{ width:100%; background:var(--cream); border:1px solid var(--sand-line); padding:.85rem 1rem; font-size:.9rem; color:var(--ink); border-radius:3px; font-family:'Inter',sans-serif; transition:border-color .3s var(--ease); } .field input:focus, .field select:focus{ outline:none; border-color:var(--wine); } /* ---------- quiz rápido --------------------------------------- */ .quiz-backdrop{ background:rgba(32,25,23,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } .quiz-card{ position:relative; width:100%; max-width:26rem; max-height:88vh; overflow-y:auto; background:var(--cream-soft); border:1px solid var(--sand-line); border-radius:4px; padding:2.25rem 2rem 2rem; box-shadow:0 24px 60px -14px rgba(32,25,23,.35); } .quiz-close{ position:absolute; top:1rem; right:1rem; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:color .3s var(--ease); } .quiz-close:hover{ color:var(--wine); } .quiz-eyebrow{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--clay); } .quiz-title{ margin-top:.6rem; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.5rem; line-height:1.2; color:var(--ink); } .quiz-intro{ margin-top:.65rem; font-size:.85rem; line-height:1.6; color:var(--muted); } .quiz-progress{ margin-top:1.5rem; font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--clay); } .quiz-question{ margin-top:.5rem; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.25rem; color:var(--ink); } .quiz-options{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.65rem; } .quiz-option{ text-align:left; padding:.85rem 1.1rem; border:1px solid var(--sand-line); border-radius:3px; font-size:.9rem; color:var(--ink); background:var(--cream); transition:border-color .3s var(--ease), background-color .3s var(--ease); } .quiz-option:hover{ border-color:var(--wine); background:#fff; } .quiz-result-treatment{ margin-top:.75rem; font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:1.6rem; color:var(--wine); } .quiz-cta{ margin-top:1.5rem; width:100%; justify-content:center; } /* ---------- scroll hint -------------------------------------- */ .scroll-dot{ transform:translateY(-100%); } /* ---------- mobile ------------------------------------------- */ #mobile-menu{ transition:transform .7s var(--ease); } #mobile-menu.is-open{ transform:translateY(0); } @media (max-width:1023px){ .brand-logo--header{ width:240px; } .card-proc{ min-height:15rem; padding:2.1rem 1.6rem 1.9rem; } } /* ---------- acessibilidade ----------------------------------- */ @media (prefers-reduced-motion:reduce){ .js [data-reveal], .js .card-proc, .js .gal, .js .feat-card, .js #hero-eyebrow, .js #hero-sub, .js #hero-cta, .js #hero-stats{ opacity:1 !important; transform:none !important; } .js .line-mask .line{ transform:none !important; } html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }