/* ===================================================================== Dra. Luana Nogueira — Mastologista | São Luís, MA Estilos do site institucional (transcrição fiel do design Claude Design). Escopo em #luana-site. Base off-white + vinho em acento. ===================================================================== */ #luana-site *{margin:0;padding:0;box-sizing:border-box} /* --- Ajustes --------------------------------------------------------- Selo "Membro da Sociedade Brasileira de Mastologia" no hero e folga entre o bloco de agendamento e o rodapé. */ #luana-site .sbm{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600;letter-spacing:.01em;color:var(--vinho);background:#fdeef0;border:1px solid var(--rosa);border-radius:30px;padding:9px 16px;line-height:1.2} #luana-site .sbm svg{width:17px;height:17px;flex-shrink:0} #luana-site #agendar .contact-grid{margin-bottom:clamp(48px,7vw,88px)} /* --------------------------------------------------------------------- */ #luana-site{ --rosa:#FFD9DA; --vinho:#E03E5F; --vinho-d:#c33150; --off:#FBF7F4; --white:#FFFFFF; --grafite:#2B2522; --cinza:#6B6360; --linha:#EAE2DC; --serif:'Cormorant Garamond',Georgia,serif; --brand:'Playfair Display',Georgia,serif; --sans:'Hanken Grotesk',system-ui,sans-serif; --script:'Sacramento',cursive; font-family:var(--sans); color:var(--grafite); background:var(--off); -webkit-font-smoothing:antialiased; line-height:1.65; scroll-behavior:smooth; overflow-x:hidden; } #luana-site img{display:block;max-width:100%} #luana-site picture{display:block;width:100%;height:100%} #luana-site a{color:inherit;text-decoration:none} #luana-site button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} #luana-site section{scroll-margin-top:88px} #luana-site .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px} /* Typography */ #luana-site h1,#luana-site h2,#luana-site h3{font-family:var(--serif);font-weight:500;color:var(--grafite);line-height:1.04;letter-spacing:-.01em} #luana-site h2{font-size:clamp(2.1rem,4.6vw,3.5rem);color:var(--vinho)} #luana-site .brandname{font-family:var(--brand);font-weight:600;color:var(--vinho)} #luana-site h3{font-size:clamp(1.35rem,2.4vw,1.7rem);font-weight:600} #luana-site p{color:var(--cinza)} #luana-site .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:#534b48;line-height:1.75} #luana-site .script{font-family:var(--script);color:var(--vinho);font-weight:400} /* Eyebrow / section label */ #luana-site .eyebrow{display:inline-flex;align-items:center;gap:13px;margin-bottom:20px} #luana-site .eyebrow .ln{width:36px;height:1px;background:var(--vinho)} #luana-site .eyebrow span{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--vinho);font-weight:700} #luana-site .heads{font-family:var(--serif);font-size:clamp(.95rem,1.4vw,1.12rem);letter-spacing:.04em;color:var(--cinza);font-style:italic;margin-top:6px} /* Buttons */ #luana-site .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.96rem;letter-spacing:.01em;padding:15px 28px;border-radius:40px;transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,box-shadow .3s,color .3s;white-space:nowrap} #luana-site .btn svg{width:18px;height:18px} #luana-site .btn-primary{background:var(--vinho);color:#fff;box-shadow:0 10px 24px -10px rgba(224,62,95,.65)} #luana-site .btn-primary:hover{background:var(--vinho-d);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(224,62,95,.6)} #luana-site .btn-outline{border:1.4px solid var(--grafite);color:var(--grafite)} #luana-site .btn-outline:hover{background:var(--grafite);color:#fff;transform:translateY(-2px)} #luana-site .btn-light{background:#fff;color:var(--vinho);box-shadow:0 10px 30px -12px rgba(43,37,34,.3)} #luana-site .btn-light:hover{transform:translateY(-2px)} /* Header */ #site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:transform .45s cubic-bezier(.16,1,.3,1),background .4s,box-shadow .4s;background:transparent} #site-header .bar{display:flex;align-items:center;justify-content:space-between;height:78px} #luana-site .logo{line-height:.92;display:flex;align-items:center} #luana-site .logo img{height:30px;width:auto;display:block} #luana-site .drawer-logo{height:34px;width:auto;align-self:flex-start;margin-bottom:30px} #luana-site .ft-logo{height:78px;width:auto;display:block} #luana-site .nav{display:none;align-items:center;gap:21px} #luana-site .nav a{font-size:.835rem;font-weight:500;color:var(--vinho);position:relative;padding:4px 0;transition:color .25s} #luana-site .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--grafite);transition:right .3s ease} #luana-site .nav a:hover{color:var(--grafite)} #luana-site .nav a:hover::after{right:0} #luana-site .hdr-right{display:flex;align-items:center;gap:14px} #luana-site .hdr-cta{display:none} #luana-site .menu-btn{display:flex;flex-direction:column;gap:5px;width:30px;height:30px;align-items:center;justify-content:center} #luana-site .menu-btn span{display:block;width:24px;height:2px;background:var(--grafite);border-radius:2px;transition:transform .35s,opacity .25s} #luana-site.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)} #luana-site.menu-open .menu-btn span:nth-child(2){opacity:0} #luana-site.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Drawer */ #luana-site .drawer{position:fixed;inset:0;z-index:55;background:var(--off);transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;padding:100px 30px 40px;opacity:0;visibility:hidden} #luana-site.menu-open .drawer{transform:translateX(0);opacity:1;visibility:visible} #luana-site .drawer a{font-family:var(--serif);font-size:1.7rem;font-weight:500;padding:13px 0;border-bottom:1px solid var(--linha);color:var(--grafite)} #luana-site .drawer .btn{margin-top:26px;justify-content:center} /* Hero */ #luana-site .hero{position:relative;padding:118px 0 24px} #luana-site .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 88% 8%,rgba(255,217,218,.55),rgba(251,247,244,0) 58%);z-index:0} #luana-site .hero .wrap{position:relative;z-index:1} #luana-site .hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center} #luana-site .hero h1{font-size:clamp(3rem,9vw,5.6rem);font-weight:500;margin:14px 0 0;color:var(--vinho)} #luana-site .hero h1.wordmark{margin:16px 0 0} #luana-site .hero h1.wordmark img{width:min(100%,390px);height:auto;display:block} #luana-site h2.wordmark img{width:min(100%,272px);height:auto;display:block} #luana-site .hero .over{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--vinho);font-weight:700} #luana-site .hero .sig{font-family:var(--script);font-size:2.1rem;color:var(--vinho);line-height:1;margin:6px 0 18px} #luana-site .hero p{max-width:540px;margin:8px 0 30px} #luana-site .hero-cta{display:flex;flex-wrap:wrap;gap:14px} #luana-site .hero-photo{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/3.6;background:#e9e2dc} #luana-site .hero-photo img{width:100%;height:112%;object-fit:cover;object-position:center top;margin-top:-6%} #luana-site .hero-photo .frame{position:absolute;inset:13px;border:1px solid rgba(255,255,255,.55);border-radius:12px;pointer-events:none} /* Stats */ #luana-site .stats{border-top:1px solid var(--linha);margin-top:50px;display:grid;grid-template-columns:1fr;gap:0} #luana-site .stat{padding:30px 6px;border-bottom:1px solid var(--linha)} #luana-site .stat .num{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.4rem);color:var(--vinho);font-weight:500;line-height:1} #luana-site .stat .lab{margin-top:8px;font-size:.92rem;color:var(--cinza);max-width:300px} /* generic section spacing — margem vertical reduzida (só espaçamento, foto/texto intactos) */ #luana-site .sec{padding:clamp(30px,3.6vw,52px) 0} #luana-site #consulta{padding-top:0} /* remove a faixa branca acima da seção "A consulta" */ #luana-site #tratamentos{padding-top:0} /* remove a faixa branca acima da seção "O que trato" */ #luana-site #proposito{padding-top:0} /* remove a faixa branca acima da seção "Meu propósito" */ #luana-site #sobre{padding-bottom:0} /* remove a faixa branca abaixo da seção "Quem sou" */ #luana-site .sec-rosa{background:linear-gradient(180deg,var(--off),#fdeef0)} /* About */ #luana-site .about-grid{display:grid;grid-template-columns:1fr;gap:46px;align-items:start} #luana-site .about-photo{border-radius:16px;overflow:hidden;aspect-ratio:3/3.9;background:#e9e2dc;max-width:460px;margin-inline:auto} #luana-site .about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%} #luana-site .about-body p{margin-bottom:16px;font-size:1.05rem;line-height:1.78} #luana-site .creds{margin-top:30px;background:#fff;border:1px solid var(--linha);border-radius:16px;padding:26px 28px} #luana-site .creds h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--vinho);font-weight:700;margin-bottom:16px} #luana-site .creds li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:.97rem;color:#433c39;list-style:none} #luana-site .creds li svg{width:19px;height:19px;color:var(--vinho);flex-shrink:0;margin-top:2px} /* Pillars */ #luana-site .pil-top{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;margin-bottom:46px} #luana-site .pil-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3.4;background:#e9e2dc} #luana-site .pil-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%} #luana-site .pillars{display:grid;grid-template-columns:1fr;gap:18px} #luana-site .pillar{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:30px 28px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s} #luana-site .pillar:hover{transform:translateY(-5px);border-color:var(--rosa);box-shadow:0 22px 40px -26px rgba(43,37,34,.4)} #luana-site .pillar .ic{width:46px;height:46px;border-radius:12px;background:#fdeef0;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--vinho)} #luana-site .pillar .ic svg{width:24px;height:24px} #luana-site .pillar p{margin-top:9px;font-size:.98rem;line-height:1.7} #luana-site .pillar h3{color:var(--vinho)} /* Subtítulos/títulos de cards no tom da marca (vinho) */ /* Quote / editorial */ #luana-site .quote-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center} #luana-site .quote-photo{border-radius:16px;overflow:hidden;aspect-ratio:3/3.7;background:#ddd;max-width:430px;margin-inline:auto} #luana-site .quote-photo img{width:100%;height:112%;object-fit:cover;margin-top:-6%} #luana-site blockquote{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.28;color:var(--grafite);font-weight:500;position:relative} #luana-site blockquote .mark{font-family:var(--serif);color:var(--rosa);font-size:3.4rem;line-height:0;position:relative;top:18px;margin-right:4px} /* Condition grid */ #luana-site .cond-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:14px} #luana-site .cond{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:26px 24px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s} #luana-site .cond:hover{transform:translateY(-4px);border-color:var(--vinho);box-shadow:0 22px 40px -26px rgba(224,62,95,.35)} #luana-site .cond .ix{font-family:var(--serif);font-size:1.05rem;color:var(--vinho);font-weight:600;letter-spacing:.05em} #luana-site .cond h3{font-size:1.18rem;margin:8px 0 9px;color:var(--vinho)} #luana-site .cond p{font-size:.94rem;line-height:1.65} #luana-site .cond.feat{background:var(--grafite)} #luana-site .cond.feat h3,#luana-site .cond.feat .ix{color:#fff} #luana-site .cond.feat p{color:#cfc6c1} #luana-site .cond.feat:hover{border-color:var(--vinho)} /* Procedures */ #luana-site .proc-head{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;margin-bottom:48px} #luana-site .proc-photo{border-radius:16px;overflow:hidden;aspect-ratio:3/3.5;background:#e9e2dc;max-width:420px;margin-inline:auto} #luana-site .proc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%} #luana-site .proc-grid{display:grid;grid-template-columns:1fr;gap:16px} #luana-site .proc{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:26px 24px;display:flex;gap:16px;align-items:flex-start;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s} #luana-site .proc:hover{transform:translateY(-4px);border-color:var(--vinho);box-shadow:0 22px 40px -26px rgba(224,62,95,.3)} #luana-site .proc .pn{font-family:var(--serif);font-size:1.7rem;color:var(--rosa);font-weight:600;line-height:1;flex-shrink:0;width:42px} #luana-site .proc h3{font-size:1.1rem;margin-bottom:6px;color:var(--vinho)} #luana-site .proc p{font-size:.93rem;line-height:1.62} /* Timeline */ #luana-site .tl-wrap{display:grid;grid-template-columns:1fr;gap:42px;align-items:start} #luana-site .tl-photo{border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:#ddd} #luana-site .tl-photo img{width:100%;height:100%;object-fit:cover} #luana-site .timeline{position:relative;padding-left:54px} #luana-site .tl-track{position:absolute;left:18px;top:8px;bottom:8px;width:2px;background:var(--linha);border-radius:2px} #luana-site #tl-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--vinho);border-radius:2px} #luana-site .tl-step{position:relative;padding:0 0 34px} #luana-site .tl-step:last-child{padding-bottom:0} #luana-site .tl-step .dot{position:absolute;left:-54px;top:-2px;width:38px;height:38px;border-radius:50%;background:#fff;border:1.6px solid var(--linha);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;color:var(--vinho);font-size:1.05rem;transition:border-color .4s,background .4s,color .4s} #luana-site .tl-step.lit .dot{border-color:var(--vinho);background:var(--vinho);color:#fff} #luana-site .tl-step h3{font-size:1.16rem;margin-bottom:6px;color:var(--vinho)} #luana-site .tl-step p{font-size:.96rem;line-height:1.66} /* Chips */ #luana-site .ask{margin-top:48px;background:#fff;border:1px solid var(--linha);border-radius:18px;padding:clamp(28px,4vw,44px)} #luana-site .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} #luana-site .chip{background:var(--off);border:1px solid var(--linha);border-radius:30px;padding:11px 19px;font-size:.92rem;color:#433c39;transition:transform .3s,background .3s,border-color .3s,color .3s} #luana-site .chip:hover{background:var(--rosa);border-color:var(--rosa);color:var(--grafite);transform:translateY(-2px)} /* Prevention grid */ #luana-site .prev-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:14px;border-top:1px solid var(--linha)} #luana-site .prev{padding:30px 4px;border-bottom:1px solid var(--linha);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start} #luana-site .prev .pn{font-family:var(--serif);font-size:clamp(2.1rem,4vw,2.7rem);color:var(--vinho);font-weight:500;line-height:.9} #luana-site .prev h3{font-size:1.14rem;margin-bottom:7px} #luana-site .prev p{font-size:.96rem;line-height:1.66;max-width:640px} #luana-site .prev-top{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;margin-bottom:50px} #luana-site .prev-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3.6;background:#e9e2dc} #luana-site .prev-photo img{width:100%;height:100%;object-fit:cover;object-position:center 24%} /* Signs checker */ #luana-site .signs{margin-top:54px;background:linear-gradient(135deg,#fff,#fdeef0);border:1px solid var(--rosa);border-radius:20px;padding:clamp(28px,4vw,46px)} #luana-site .signs .intro{max-width:680px;margin-bottom:8px} #luana-site .sign-list{display:grid;grid-template-columns:1fr;gap:12px;margin:24px 0} #luana-site .sign{display:flex;gap:14px;align-items:flex-start;text-align:left;background:#fff;border:1.4px solid var(--linha);border-radius:13px;padding:16px 18px;transition:border-color .3s,background .3s;width:100%} #luana-site .sign .box{flex-shrink:0;width:24px;height:24px;border-radius:7px;border:1.8px solid #cbb9b4;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s;margin-top:1px} #luana-site .sign .box svg{width:15px;height:15px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s} #luana-site .sign[aria-checked="true"]{border-color:var(--vinho)} #luana-site .sign[aria-checked="true"] .box{background:var(--vinho);border-color:var(--vinho)} #luana-site .sign[aria-checked="true"] .box svg{opacity:1;transform:scale(1)} #luana-site .sign span{font-size:.95rem;color:#433c39;line-height:1.45} #luana-site .sign-msg{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s,margin .4s} #luana-site .sign-msg.show{max-height:340px;opacity:1;margin-top:8px} #luana-site .sign-msg .inner{background:var(--vinho);color:#fff;border-radius:14px;padding:24px 26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between} #luana-site .sign-msg p{color:#fff;max-width:520px;font-size:1rem;line-height:1.55} #luana-site .disc{margin-top:18px;font-size:.82rem;color:var(--cinza);display:flex;gap:8px;align-items:center} #luana-site .disc svg{width:16px;height:16px;color:var(--vinho);flex-shrink:0} /* Emotional vinho band */ #luana-site .band{background:var(--vinho);color:#fff;text-align:center;padding:clamp(64px,9vw,108px) 0;position:relative;overflow:hidden} #luana-site .band::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% -10%,rgba(255,255,255,.18),transparent 60%)} #luana-site .band .wrap{position:relative;z-index:1} #luana-site .band h2{color:#fff;max-width:880px;margin:0 auto;font-size:clamp(1.9rem,4vw,3rem)} #luana-site .band p{color:rgba(255,255,255,.9);max-width:600px;margin:22px auto 32px;font-size:1.08rem} /* Blog */ #luana-site .blog-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:14px} #luana-site .blog-card{background:#fff;border:1px solid var(--linha);border-radius:16px;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s} #luana-site .blog-card:hover{transform:translateY(-5px);box-shadow:0 26px 46px -28px rgba(43,37,34,.45)} #luana-site .blog-card .ph{aspect-ratio:16/10;position:relative;overflow:hidden} #luana-site .blog-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} #luana-site .blog-card:hover .ph img{transform:scale(1.05)} #luana-site .blog-card .ph .tag{position:absolute;top:14px;left:14px;background:rgba(251,247,244,.95);color:var(--vinho);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:30px} #luana-site .blog-card .bd{padding:24px 24px 28px} #luana-site .blog-card .dt{font-size:.78rem;letter-spacing:.05em;color:var(--cinza);text-transform:uppercase} #luana-site .blog-card h3{font-size:1.28rem;margin:8px 0 10px;line-height:1.2;color:var(--vinho)} #luana-site .blog-card p{font-size:.93rem;line-height:1.6;margin-bottom:16px} #luana-site .blog-card .more{color:var(--vinho);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:7px} #luana-site .blog-card .more svg{width:16px;height:16px;transition:transform .3s} #luana-site .blog-card:hover .more svg{transform:translateX(4px)} #luana-site .ph-grad{position:absolute;inset:0} #luana-site .ph-1{background:linear-gradient(135deg,#fde2e5,#f6c9cf)} #luana-site .ph-2{background:linear-gradient(135deg,#f3ece7,#e6d8cf)} #luana-site .ph-3{background:linear-gradient(135deg,#fbe5e1,#f3d0d6)} #luana-site .ph-mono{position:absolute;font-family:var(--serif);font-size:5rem;color:rgba(224,62,95,.22);right:18px;bottom:-6px;font-weight:600} #luana-site .blog-note{margin-top:26px;font-size:.85rem;color:var(--cinza);text-align:center;font-style:italic} /* FAQ */ #luana-site .faq{max-width:820px;margin:18px auto 0} #luana-site .faq-item{border-bottom:1px solid var(--linha)} #luana-site .faq-q{width:100%;display:flex;justify-content:space-between;gap:20px;align-items:center;text-align:left;padding:24px 4px;font-family:var(--serif);font-size:clamp(1.12rem,2vw,1.35rem);font-weight:600;color:var(--grafite)} #luana-site .faq-q .ic{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.4px solid var(--linha);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .3s} #luana-site .faq-q .ic svg{width:16px;height:16px;color:var(--vinho);transition:transform .35s} #luana-site .faq-item.open .faq-q .ic{background:var(--vinho);border-color:var(--vinho)} #luana-site .faq-item.open .faq-q .ic svg{color:#fff;transform:rotate(45deg)} #luana-site .faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)} #luana-site .faq-a p{padding:0 4px 26px;font-size:1rem;line-height:1.7;max-width:680px} /* Contact */ #luana-site .contact-grid{display:grid;grid-template-columns:1fr;gap:42px;align-items:center} #luana-site .contact-photo{border-radius:16px;overflow:hidden;aspect-ratio:3/3.7;background:#e9e2dc;max-width:430px;margin-inline:auto} #luana-site .contact-photo img{width:100%;height:100%;object-fit:cover;object-position:center 16%} #luana-site .contact-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px} #luana-site .cc{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:20px 22px;display:flex;gap:16px;align-items:center;transition:border-color .3s,transform .3s} #luana-site .cc:hover{border-color:var(--vinho);transform:translateY(-2px)} #luana-site .cc .ic{width:44px;height:44px;border-radius:11px;background:#fdeef0;color:var(--vinho);display:flex;align-items:center;justify-content:center;flex-shrink:0} #luana-site .cc .ic svg{width:22px;height:22px} #luana-site .cc .k{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);font-weight:600} #luana-site .cc .v{font-size:1.04rem;font-weight:600;color:var(--grafite);margin-top:2px} /* Footer */ #luana-site #agendar{padding-bottom:0} /* o footer fica dentro de #agendar; remove a faixa branca abaixo do rodapé */ #luana-site footer{background:var(--grafite);color:#cfc6c1;padding:46px 0 16px} #luana-site footer .ft-grid{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.12)} #luana-site footer .logo .nm{color:#fff} #luana-site footer .logo .sub{color:var(--rosa)} #luana-site footer h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:700} #luana-site footer .addr{margin-bottom:18px;font-size:.92rem;line-height:1.55} #luana-site footer .addr b{color:#fff;font-weight:600;display:block;margin-bottom:2px;font-family:var(--serif);font-size:1rem} #luana-site footer .ft-links{display:flex;flex-direction:column;gap:10px} #luana-site footer .ft-links a{font-size:.92rem;transition:color .25s} #luana-site footer .ft-links a:hover{color:var(--rosa)} #luana-site footer .ft-bot{padding-top:26px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.82rem;color:#9b918c} #luana-site footer .ig{display:inline-flex;align-items:center;gap:8px;color:#cfc6c1} #luana-site footer .ig:hover{color:var(--rosa)} #luana-site footer .ig svg{width:18px;height:18px} /* FAB — WhatsApp limpo: círculo sólido, sem contorno/anel/halo/glow */ #luana-site .fab{position:fixed;right:24px;bottom:24px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.22);transition:transform .25s,box-shadow .25s} #luana-site .fab:hover{transform:scale(1.06);box-shadow:0 6px 16px rgba(0,0,0,.26)} #luana-site .fab svg{width:32px;height:32px;color:#fff;display:block;transform:translateX(1px)} @media(max-width:600px){#luana-site .fab{width:56px;height:56px;right:18px;bottom:18px}} /* Reveal */ @media (prefers-reduced-motion: no-preference){ #luana-site .reveal.pre{opacity:0;transform:translateY(30px)} #luana-site .reveal.in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)} } /* Responsive */ @media(min-width:620px){ #luana-site .stats{grid-template-columns:repeat(3,1fr)} #luana-site .stat{border-bottom:none;padding:34px 22px;border-right:1px solid var(--linha)} #luana-site .stat:last-child{border-right:none} #luana-site .cond-grid{grid-template-columns:1fr 1fr} #luana-site .proc-grid{grid-template-columns:1fr 1fr} #luana-site .pillars{grid-template-columns:repeat(3,1fr)} #luana-site .sign-list{grid-template-columns:1fr 1fr} #luana-site .blog-grid{grid-template-columns:repeat(3,1fr)} #luana-site .contact-cards{grid-template-columns:1fr 1fr} } @media(min-width:1080px){ #luana-site .nav{display:flex} #luana-site .hdr-cta{display:inline-flex} #luana-site .menu-btn{display:none} } @media(min-width:960px){ #luana-site .hero{padding:150px 0 30px} #luana-site .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px} #luana-site .about-grid{grid-template-columns:.85fr 1.15fr;gap:60px} #luana-site .pil-top{grid-template-columns:1fr 1fr;gap:56px} #luana-site .quote-grid{grid-template-columns:.8fr 1.2fr;gap:56px} #luana-site .cond-grid{grid-template-columns:repeat(4,1fr)} #luana-site .proc-head{grid-template-columns:.8fr 1.2fr;gap:56px} #luana-site .proc-grid{grid-template-columns:repeat(3,1fr)} #luana-site .tl-wrap{grid-template-columns:.85fr 1.15fr;gap:64px} #luana-site .prev-top{grid-template-columns:1.15fr .85fr;gap:60px} #luana-site .contact-grid{grid-template-columns:.85fr 1.15fr;gap:60px} #luana-site footer .ft-grid{grid-template-columns:1.3fr 1.3fr .9fr} } /* === Sistema único de "foto fundida": sangra por fora, dissolve por dentro === */ #luana-site .hero-photo, #luana-site .about-photo, #luana-site .pil-photo, #luana-site .quote-photo, #luana-site .proc-photo, #luana-site .tl-photo, #luana-site .prev-photo, #luana-site .contact-photo{ border-radius:0; border:0; box-shadow:none; max-width:none; margin-inline:0; background:transparent; aspect-ratio:auto; overflow:hidden; } #luana-site .hero-photo .frame{display:none} #luana-site .tl-photo img{object-position:center 14%} /* A imagem ganha folga de escala (preenchida pelo parallax) e aceleração de GPU, evitando o tremor no scroll e bordas vazias. */ #luana-site .hero-photo img, #luana-site .about-photo img, #luana-site .pil-photo img, #luana-site .quote-photo img, #luana-site .proc-photo img, #luana-site .tl-photo img, #luana-site .prev-photo img, #luana-site .contact-photo img{ height:100%; margin-top:0; will-change:transform; backface-visibility:hidden; transform:translateZ(0); } /* Bordas dos cards mais finas/suaves — sem efeito "caixinha/divisória" */ #luana-site .cond{border-color:#F1ECE7} #luana-site .blog-card{border-color:#F1ECE7} #luana-site .proc{border-color:#F1ECE7} /* Mobile: imagem sangra de borda a borda; dissolve na borda inferior (toca o texto) */ @media(max-width:959px){ #luana-site .hero-photo, #luana-site .about-photo, #luana-site .pil-photo, #luana-site .quote-photo, #luana-site .proc-photo, #luana-site .tl-photo, #luana-site .prev-photo, #luana-site .contact-photo{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); height:auto; min-height:64vh; max-height:84vh; -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%); mask-image:linear-gradient(to bottom,#000 84%,transparent 100%); } #luana-site .hero-photo img, #luana-site .about-photo img, #luana-site .pil-photo img, #luana-site .quote-photo img, #luana-site .proc-photo img, #luana-site .tl-photo img, #luana-site .prev-photo img, #luana-site .contact-photo img{height:100%} } /* Desktop: a foto sangra até a borda externa da tela e dissolve na borda interna */ @media(min-width:960px){ #luana-site .hero-grid{grid-template-columns:1fr 1fr;gap:48px} #luana-site .about-grid{grid-template-columns:1fr 1fr;gap:52px} #luana-site .quote-grid{grid-template-columns:1fr 1fr;gap:52px} #luana-site .proc-head{grid-template-columns:1fr 1fr;gap:52px} #luana-site .tl-wrap{grid-template-columns:1fr 1fr;gap:52px} #luana-site .contact-grid{grid-template-columns:1fr 1fr;gap:52px} #luana-site .prev-top{grid-template-columns:1fr 1fr;gap:52px} /* Fotos à esquerda → sangram à esquerda da tela, dissolvem à direita (lado do texto) */ #luana-site .about-photo, #luana-site .pil-photo, #luana-site .quote-photo, #luana-site .proc-photo, #luana-site .tl-photo, #luana-site .contact-photo{ margin-left:calc(50% - 50vw); align-self:stretch; -webkit-mask-image:linear-gradient(to right,#000 78%,transparent 100%); mask-image:linear-gradient(to right,#000 78%,transparent 100%); } /* CORREÇÃO 2 — figura puxada para o lado do texto (direita), bem centralizada */ #luana-site .about-photo img{object-position:70% 16% !important} /* Foto 2 — Quem sou: + p/ direita (texto) */ #luana-site .proc-photo img{object-position:64% 18% !important} #luana-site .contact-photo img{object-position:60% 12% !important} /* Foto 7 — Agende: consulta, rosto enquadrado */ #luana-site .pil-photo img{object-position:60% 20% !important} #luana-site .quote-photo img{object-position:62% 18% !important} #luana-site .tl-photo img{object-position:65% 26% !important} /* Foto 5 — A consulta: + p/ direita (texto) */ /* Fotos à direita → sangram à direita da tela, dissolvem à esquerda (lado do texto) */ #luana-site .hero-photo, #luana-site .prev-photo{ margin-right:calc(50% - 50vw); align-self:stretch; -webkit-mask-image:linear-gradient(to left,#000 78%,transparent 100%); mask-image:linear-gradient(to left,#000 78%,transparent 100%); } /* figura puxada para o lado do texto (esquerda) */ #luana-site .hero-photo img{object-position:42% top !important} #luana-site .prev-photo img{object-position:40% 22% !important} /* PASSO 1 — fotos GRANDES de corpo inteiro, sangrando na seção (full-bleed) */ #luana-site .hero-photo{min-height:86vh} #luana-site .about-photo{min-height:90vh} #luana-site .pil-photo{min-height:84vh} #luana-site .quote-photo{min-height:88vh} #luana-site .proc-photo{min-height:88vh} #luana-site .tl-photo{min-height:86vh} #luana-site .prev-photo{min-height:86vh} #luana-site .contact-photo{min-height:88vh} #luana-site .hero-photo img, #luana-site .about-photo img, #luana-site .pil-photo img, #luana-site .quote-photo img, #luana-site .proc-photo img, #luana-site .tl-photo img, #luana-site .prev-photo img, #luana-site .contact-photo img{height:100%} } /* Sem movimento: nenhuma transformação/parallax nas imagens */ @media (prefers-reduced-motion: reduce){ #luana-site [data-parallax] img{transform:none !important} }