/*
  LUMIÈRE • Home Design System / Fendi · Marfim · Champagne
  2026-10-10 | Scope: homepage sections below the hero, clinic CTA and footer.
  No structural or textual mutations; no filters on portraits/clinic photographs.
*/
:root {
 --lum-home-ivory:#f8f5ef;
 --lum-home-linen:#f2eee7;
 --lum-home-stone:#e9e4db;
 --lum-home-sand:#ddd5c8;
 --lum-home-fendi:#777168;
 --lum-home-fendi-deep:#57544d;
 --lum-home-ink:#353532;
 --lum-home-copy:#625e56;
 --lum-home-champagne:#bb9c6d;
 --lum-home-accent:#957850;
 --lum-home-border:rgba(125,113,96,.22);
 --lum-home-soft-shadow:0 10px 30px rgba(70,65,57,.065);
}
#root main #sobre,
#lumiere-photo-gallery,
#root main #servicos,
#root main #servicos + section,
#root main #faq {scroll-margin-top:90px}
/* One common grid / vertical rhythm across real React sections. */
#root main #servicos,
#root main #servicos + section,
#root main #faq {
 padding-top:clamp(80px,7.2vw,112px)!important;
 padding-bottom:clamp(80px,7.2vw,112px)!important;
}
#root main #sobre > .container,
#root main #servicos > .container,
#root main #servicos + section > .container,
#root main #faq > .container {
 width:100%;max-width:1280px!important;
 padding-left:clamp(22px,3.2vw,54px)!important;
 padding-right:clamp(22px,3.2vw,54px)!important;
}
/* Architectural accents: thin engraved separators, not thick wood bands. */
#root main #sobre {background:linear-gradient(113deg,#fbf9f4 0%,#f6f2eb 50%,#ece6dc 100%)!important}
#root main #sobre::before {opacity:.055!important;width:clamp(20px,3.1vw,48px)!important}
#root main #sobre::after {opacity:.6}
#root main #servicos::before {
 height:1px!important;opacity:1!important;inset:0 8% auto!important;
 background:linear-gradient(90deg,transparent,rgba(174,145,104,.42),transparent)!important
}
/* A uniform editorial title system. */
#root main #sobre h2,
#lumiere-photo-gallery h2,
#root main #servicos h2,
#root main #servicos + section h2,
#root main #faq h2 {
 font-family:"Playfair Display",Georgia,serif!important;
 color:var(--lum-home-ink)!important;
 font-size:clamp(2.05rem,3.2vw,3.28rem)!important;
 line-height:1.2!important;
 letter-spacing:-.027em!important;
 font-weight:500!important;
 text-wrap:balance;
}
#root main #servicos h2,
#root main #servicos + section h2,
#root main #faq h2 {max-width:850px;margin-left:auto;margin-right:auto}
#root main #servicos .text-gradient-gold,
#root main #servicos + section .text-gradient-gold,
#root main #faq .text-gradient-gold,
#root main #sobre .text-gradient-gold {
 background:linear-gradient(105deg,#947348 0%,#b99a6a 53%,#8d6e47 100%)!important;
 background-clip:text!important;-webkit-background-clip:text!important;
 -webkit-text-fill-color:transparent!important;color:transparent!important;
}
#root main #sobre > .container > .grid > div:nth-child(2) > span:first-child,
#root main #servicos > .container > div:first-child > span:first-child,
#root main #servicos + section > .container > div:first-child > span:first-child,
#root main #faq > .container > div:first-child > span:first-child,
#lumiere-photo-gallery .lum-gallery-eyebrow {
 color:var(--lum-home-accent)!important;
 font:700 11px/1.45 Lato,Arial,sans-serif!important;
 letter-spacing:.20em!important;
 text-transform:uppercase!important;
}
#root main #servicos > .container > div:first-child > span:first-child::before,
#root main #servicos + section > .container > div:first-child > span:first-child::before,
#root main #faq > .container > div:first-child > span:first-child::before {
 content:"";display:block;width:36px;height:1px;
 background:linear-gradient(90deg,#9d7d50,#d9c19c);
 margin:0 auto 16px;
}
#root main #servicos > .container > div:first-child > p,
#root main #servicos + section > .container > div:first-child > p,
#lumiere-photo-gallery .lum-gallery-intro {color:var(--lum-home-copy)!important;line-height:1.75!important}
#root main #servicos > .container > div:first-child,
#root main #servicos + section > .container > div:first-child {margin-bottom:clamp(34px,4.5vw,58px)!important}
/* About: preserve photography and brass outline, soften edge and align typography. */
#root main #sobre > .container > .grid > div:first-child > .relative.rounded-2xl {
 box-shadow:0 25px 62px rgba(63,60,51,.13),0 5px 16px rgba(63,60,51,.06)!important
}
#root main #sobre > .container > .grid > div:first-child img {filter:none!important}
#root main #sobre .space-y-4 p {color:var(--lum-home-copy)!important}
#root main #sobre > .container > .grid > div:nth-child(2) > .mt-8 > span {
 background:rgba(255,254,250,.69)!important;
 border-color:rgba(144,122,93,.28)!important;
 color:#5c554b!important;
}
/* Clinic photography: feel like a continuous chapter after the doctor. */
#lumiere-photo-gallery {
 padding-top:clamp(77px,7vw,108px)!important;
 padding-bottom:clamp(82px,7vw,115px)!important;
 background:linear-gradient(150deg,#ede8df 0%,#f2eee7 62%,#e9e2d7 100%)!important;
 border-top:1px solid rgba(145,124,95,.20)!important;
 border-bottom:1px solid rgba(145,124,95,.18)!important;
}
#lumiere-photo-gallery::before {width:clamp(5px,1.1vw,16px)!important;opacity:.19!important}
#lumiere-photo-gallery .lum-gallery-shell {max-width:1170px!important}
#lumiere-photo-gallery h2 {max-width:840px}
#lumiere-photo-gallery .lum-gallery-intro {max-width:700px!important;margin-top:19px!important;margin-bottom:32px!important}
#lumiere-photo-gallery .lum-gallery-grid {gap:18px!important}
#lumiere-photo-gallery .lum-gallery-tile {
 border:1px solid rgba(156,136,108,.26)!important;
 border-radius:15px!important;
 background:#ebe6dc!important;
 box-shadow:var(--lum-home-soft-shadow)!important;
}
#lumiere-photo-gallery .lum-gallery-tile:hover {
 box-shadow:0 16px 37px rgba(65,59,48,.15)!important;
 border-color:rgba(175,141,95,.63)!important;
}
#lumiere-photo-gallery .lum-gallery-number {
 background:rgba(66,65,60,.68)!important;
 border-color:rgba(255,249,234,.5)!important
}
#lumiere-photo-gallery .lum-gallery-footer {
 color:#80786a!important;margin-top:24px!important;font-size:12px
}
/* SERVICES: high-end light card system with a single gold detail. */
#root main #servicos {
 background:linear-gradient(180deg,#f9f7f2 0%,#f6f3ed 62%,#f3efe8 100%)!important
}
#root main #servicos .grid.md\:grid-cols-2.xl\:grid-cols-3 {gap:clamp(16px,1.7vw,25px)!important}
#root main #servicos article {
 padding:clamp(23px,2.3vw,31px)!important;
 background:linear-gradient(155deg,rgba(255,254,251,.98),#faf8f3)!important;
 border:1px solid var(--lum-home-border)!important;
 border-radius:16px!important;
 box-shadow:0 7px 22px rgba(64,61,55,.058),0 1px 0 rgba(255,255,255,.85) inset!important;
 transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important;
}
#root main #servicos article:hover {
 transform:translateY(-4px);
 border-color:rgba(174,142,97,.52)!important;
 box-shadow:0 19px 38px rgba(64,61,55,.12)!important;
}
#root main #servicos article > .absolute.top-0 {
 height:2px!important;background:linear-gradient(90deg,#ad9066,#e1ccaa,#ad9066)!important
}
#root main #servicos article > .w-14.h-14 {
 height:52px!important;width:52px!important;margin-bottom:21px!important;
 background:linear-gradient(145deg,#eee8dd,#e7ddce)!important;
 border:1px solid rgba(163,138,107,.21);
 border-radius:12px!important
}
#root main #servicos article > .w-14.h-14 svg {
 color:#977b54!important;width:26px;height:26px
}
#root main #servicos article h3 {
 color:var(--lum-home-ink)!important;font-size:clamp(1.2rem,1.5vw,1.45rem)!important;
 line-height:1.3!important;margin-bottom:13px!important;
}
#root main #servicos article > p {color:#69665e!important;line-height:1.74!important}
#root main #servicos article .space-y-4 {margin-top:5px}
#root main #servicos article .space-y-4 > a:not(.bg-primary) {
 color:#806647!important;font-size:13px!important;
 text-underline-offset:4px
}
#root main #servicos article .space-y-4 > a:not(.bg-primary):hover {color:#5b4e3e!important}
#root main #servicos article .bg-primary,
#root main #servicos article a.bg-primary {
 background:linear-gradient(120deg,#7b7367,#8e816d)!important;
 border:1px solid rgba(105,92,75,.20)!important;
 border-radius:9px!important;
 box-shadow:0 5px 12px rgba(62,61,54,.11)!important;
 color:#fffefa!important;
 min-height:43px;
}
#root main #servicos article .bg-primary:hover,
#root main #servicos article a.bg-primary:hover {
 background:linear-gradient(120deg,#6d655b,#827561)!important;
 filter:none!important;
}
/* DIFFERENTIALS: six calm architectural tiles, not floating icons. */
#root main #servicos + section {
 background:linear-gradient(180deg,#ede8df,#f2eee8)!important;
 border-top:1px solid rgba(152,131,107,.19)!important;
 border-bottom:1px solid rgba(152,131,107,.16)!important;
}
#root main #servicos + section > .container > .grid {
 gap:clamp(14px,1.7vw,25px)!important;
}
#root main #servicos + section > .container > .grid > div {
 min-height:143px;
 display:flex;align-items:flex-start;
 gap:17px!important;
 padding:clamp(19px,2vw,26px);
 border-radius:15px;
 border:1px solid rgba(141,129,111,.22);
 background:rgba(255,254,249,.69);
 box-shadow:0 7px 23px rgba(66,63,55,.042);
}
#root main #servicos + section > .container > .grid > div > .w-12 {
 width:46px!important;height:46px!important;flex:0 0 46px;
 border-radius:12px!important;
 background:#e9e1d4!important;
 border:1px solid rgba(151,129,97,.18);
}
#root main #servicos + section > .container > .grid > div > .w-12 svg {
 color:#967953!important;width:21px;height:21px
}
#root main #servicos + section h3 {
 color:#45423c!important;font-size:clamp(1.12rem,1.35vw,1.34rem)!important;
 line-height:1.36!important;margin-bottom:7px!important
}
#root main #servicos + section > .container > .grid > div p {
 color:#6e695f!important;font-size:14px;line-height:1.65!important
}
/* FAQ: accordion is from the same material family as the service cards. */
#root main #faq {
 background:linear-gradient(180deg,#f8f6f1 0%,#f5f2ec 100%)!important;
}
#root main #faq > .container {max-width:940px!important}
#root main #faq > .container > div:first-child {margin-bottom:clamp(32px,4vw,49px)!important}
#root main #faq [data-state] {
 scroll-margin-top:110px;
}
#root main #faq [data-state].bg-card {
 background:#fffdfa!important;
 border:1px solid rgba(145,132,110,.26)!important;
 border-radius:12px!important;
 box-shadow:0 4px 16px rgba(75,69,58,.045)!important;
 padding-left:clamp(17px,2vw,25px)!important;
 padding-right:clamp(17px,2vw,25px)!important;
}
#root main #faq [data-state="open"].bg-card {
 border-color:rgba(183,150,99,.65)!important;
 box-shadow:0 9px 23px rgba(77,68,55,.075)!important
}
#root main #faq button[data-state] {
 min-height:58px;
 padding-top:17px!important;padding-bottom:17px!important;
 color:#46423c!important;
 font-weight:600!important;
 line-height:1.5!important
}
#root main #faq button[data-state] svg {color:#a28a68}
#root main #faq button[data-state]:hover {color:#846b48!important}
#root main #faq [data-state] [role="region"] {
 color:#68635a!important;line-height:1.75!important
}
/* Unified CTA: real clinic photograph, toned with light neutral Fendi rather than walnut. */
#root main > section:last-of-type.relative.overflow-hidden.lum-clinic-cta {
 padding-top:clamp(83px,7vw,120px)!important;
 padding-bottom:clamp(89px,7.5vw,125px)!important;
 background:#777168!important;
}
#root main > section:last-of-type.relative.overflow-hidden.lum-clinic-cta::before {
 filter:none!important;
 background-position:center 53%!important;
}
#root main > section:last-of-type.relative.overflow-hidden.lum-clinic-cta::after {
 background:linear-gradient(95deg,
  rgba(61,60,55,.82) 0%,rgba(75,72,65,.73) 53%,
  rgba(57,58,54,.78) 100%)!important;
}
#root main .lum-clinic-cta h2 {
 max-width:900px!important;
 font-family:"Playfair Display",Georgia,serif!important;
 font-size:clamp(2.3rem,3.3vw,3.65rem)!important;
 font-weight:500!important;
 line-height:1.23!important;
 color:#fffdfa!important;
 letter-spacing:-.025em;
 text-wrap:balance
}
#root main .lum-clinic-cta h2 span {
 color:#e6cda5!important;
}
#root main .lum-clinic-cta p {
 color:#f8f4ec!important;
 font-size:clamp(15px,1.15vw,17px)!important;
 line-height:1.77!important;
 max-width:640px!important;
}
#root main .lum-clinic-cta a.bg-primary,
#root main .lum-clinic-cta a {
 background:linear-gradient(120deg,#bd9c69,#d0b585)!important;
 border:1px solid rgba(251,237,212,.55)!important;
 color:#35332e!important;
 border-radius:10px!important;
 box-shadow:0 11px 25px rgba(30,31,28,.17)!important;
 font-weight:700!important;
}
#root main .lum-clinic-cta a:hover {filter:brightness(1.05)}
/* Footer: link CTA to the first light section through stone, not dark-brown bands. */
#lum-medical-footer {background:#eee9e1!important}
#lum-medical-footer::before {
 height:3px!important;opacity:1!important;
 background:linear-gradient(90deg,transparent 1%,#b69a74 30%,#dfc6a4 50%,#b69a74 70%,transparent 99%)!important;
 box-shadow:none!important;
}
#lum-medical-footer .lumf-main {
 background:linear-gradient(110deg,#f8f5ef 0%,#f0ebe3 63%,#e9e2d8 100%)!important;
 padding-top:clamp(67px,6vw,90px);
 padding-bottom:clamp(65px,6vw,85px);
}
#lum-medical-footer .lumf-main::before {width:clamp(7px,1vw,16px)!important;opacity:.12!important}
#lum-medical-footer h2 {color:#47433d!important}
#lum-medical-footer h2::after {background:linear-gradient(90deg,#a58964,#d8bd95)!important;height:1px!important}
#lum-medical-footer .lumf-brand p,
#lum-medical-footer .lumf-contact-item,
#lum-medical-footer .lumf-link-list a {color:#665f54!important}
#lum-medical-footer .lumf-place,
#lum-medical-footer .lumf-contact-item svg {color:#977c58!important;stroke:#977c58!important}
#lum-medical-footer .lumf-social {background:#fffdf9!important;border-color:#d9cdbb!important;color:#8e7453!important}
#lum-medical-footer .lumf-social:hover {background:#777168!important;color:white!important;border-color:#777168!important}
#lum-medical-footer .lumf-book {background:#777168!important;color:#fff!important;border-color:rgba(113,105,94,.26)!important}
#lum-medical-footer .lumf-book:hover {background:#625c54!important}
#lum-medical-footer .lumf-bottom {
 background:#615d55!important;
 border-top:1px solid rgba(242,221,186,.21)!important;
 color:#f4efe7!important
}
/* Smaller screens: no forced columns, typography breathes; gallery remains a grid. */
@media(max-width:970px) {
 #root main #servicos + section > .container > .grid > div {min-height:0}
 #root main #servicos article {padding:24px!important}
}
@media(max-width:767px) {
 #root main #servicos,
 #root main #servicos + section,
 #root main #faq {padding-top:70px!important;padding-bottom:75px!important}
 #root main #servicos > .container,
 #root main #servicos + section > .container,
 #root main #faq > .container {padding-left:23px!important;padding-right:23px!important}
 #lumiere-photo-gallery {padding:74px 22px 78px!important}
 #lumiere-photo-gallery .lum-gallery-grid {gap:11px!important}
 #root main #servicos + section > .container > .grid {gap:13px!important}
 #root main #servicos + section > .container > .grid > div {padding:20px!important}
 #root main #servicos h2,
 #root main #servicos + section h2,
 #root main #faq h2,
 #lumiere-photo-gallery h2 {font-size:clamp(2rem,7.5vw,2.65rem)!important}
 #lum-medical-footer .lumf-main {padding:59px 23px 64px!important}
}
@media(prefers-reduced-motion:reduce) {
 #root main #servicos article,#lumiere-photo-gallery .lum-gallery-tile {transition:none!important;transform:none!important}
}


/* LUMIÈRE | acabamento editorial v2 · detalhes e interações
   Foco: continuidade, legibilidade, acessibilidade e fotografia real. */
#lumiere-photo-gallery .lum-gallery-tile::after {
 background:linear-gradient(180deg,transparent 63%,rgba(55,53,48,.24) 100%)!important
}
#lumiere-photo-gallery .lum-gallery-tile img {filter:none!important}
#lumiere-photo-gallery .lum-gallery-tile:hover img {transform:scale(1.025)}
#lumiere-photo-gallery .lum-gallery-tile:focus-visible {
 outline:2px solid #ab8e68!important;outline-offset:4px!important
}
#lumiere-photo-gallery .lum-gallery-number {
 width:30px;height:30px;min-height:30px;line-height:30px;
 border-radius:50%;font-size:11px;letter-spacing:.045em
}
#root main #servicos article a:focus-visible,
#root main #faq button:focus-visible,
#root main #servicos + section a:focus-visible,
#lumiere-photo-gallery .lum-gallery-tile:focus-visible,
#lum-medical-footer a:focus-visible {
 outline:2px solid #a68c64!important;outline-offset:3px!important;
}
#root main #servicos article > .w-14.h-14 {
 box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 5px 16px rgba(108,99,83,.065)
}
#root main #servicos article h3 {transition:color .18s ease}
#root main #servicos article:hover h3 {color:#74644f!important}
#root main #servicos + section > .container > .grid > div {
 position:relative;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease
}
#root main #servicos + section > .container > .grid > div::before {
 content:"";position:absolute;inset:0 auto 0 0;width:2px;
 background:linear-gradient(180deg,transparent,#b7a07d,transparent);
 opacity:0;transition:opacity .2s ease;pointer-events:none
}
@media(hover:hover) {
 #root main #servicos + section > .container > .grid > div:hover {
  border-color:rgba(174,151,116,.47);
  box-shadow:0 13px 28px rgba(68,65,57,.075);
  transform:translateY(-2px)
 }
 #root main #servicos + section > .container > .grid > div:hover::before {opacity:1}
}
#root main #faq [data-state].bg-card {
 overflow:hidden;transition:border-color .22s ease,box-shadow .22s ease,background .22s ease
}
#root main #faq [data-state].bg-card:hover {
 background:#fffefa!important;border-color:rgba(171,147,111,.46)!important
}
#root main #faq [data-state="open"].bg-card {
 background:linear-gradient(135deg,#fffefa,#f9f6f0)!important
}
#root main #faq button[data-state] svg {
 width:17px;height:17px;stroke-width:1.6;
 transition:transform .23s ease,color .2s ease
}
#root main #faq button[data-state="open"] svg {
 color:#947750!important
}
/* Let the actual clinic interior remain recognisable in the last CTA. */
#root main > section:last-of-type.relative.overflow-hidden.lum-clinic-cta::after {
 background:linear-gradient(97deg,
  rgba(56,56,52,.73) 0%,rgba(76,73,67,.60) 54%,
  rgba(56,58,54,.69) 100%)!important
}
#root main .lum-clinic-cta h2,
#root main .lum-clinic-cta p {text-shadow:0 2px 15px rgba(22,23,22,.20)!important}
#root main .lum-clinic-cta h2 span {
 color:#f0d7ad!important
}
#lum-medical-footer .lumf-main#contato {scroll-margin-top:88px}
#lum-medical-footer .lumf-social,
#lum-medical-footer .lumf-book {
 transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease
}
#lum-medical-footer .lumf-social:hover {transform:translateY(-2px)}
#lum-medical-footer .lumf-book:hover {
 transform:translateY(-2px);
 box-shadow:0 10px 22px rgba(52,49,44,.12)
}
/* WhatsApp remains identifiable, without an isolated neon-green spot. */
#root a[aria-label="Fale com a Lumière pelo WhatsApp"] {
 display:flex;align-items:center;justify-content:center;
 width:57px;height:57px;padding:12px!important;
 background:#5b786a!important;
 border:2px solid rgba(225,204,169,.86);
 box-shadow:0 8px 24px rgba(39,49,42,.22),0 0 0 4px rgba(247,242,231,.64)!important;
 color:#fff!important;
 right:clamp(17px,2.1vw,30px)!important;
 bottom:clamp(18px,2.2vw,30px)!important;
 border-radius:50%!important;
}
#root a[aria-label="Fale com a Lumière pelo WhatsApp"]:hover,
#root a[aria-label="Fale com a Lumière pelo WhatsApp"]:focus-visible {
 background:#476357!important;transform:translateY(-3px)!important;
 box-shadow:0 12px 28px rgba(39,49,42,.24),0 0 0 4px rgba(247,242,231,.75)!important;
}
#root a[aria-label="Fale com a Lumière pelo WhatsApp"] svg {width:27px;height:27px}
@media(max-width:620px) {
 #root main > section:last-of-type.relative.overflow-hidden.lum-clinic-cta::after {
  background:linear-gradient(180deg,rgba(51,52,47,.75),rgba(54,55,50,.68))!important
 }
 #root a[aria-label="Fale com a Lumière pelo WhatsApp"] {
  width:52px;height:52px;padding:11px!important;
  bottom:18px!important;right:17px!important
 }
 #root a[aria-label="Fale com a Lumière pelo WhatsApp"] svg {width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce) {
 #root main #servicos + section > .container > .grid > div,
 #root main #faq [data-state].bg-card,
 #root main #faq button[data-state] svg,
 #lum-medical-footer .lumf-social,
 #lum-medical-footer .lumf-book,
 #root a[aria-label="Fale com a Lumière pelo WhatsApp"] {
  transition:none!important;transform:none!important
 }
}


/* Homepage service CTA V3 | 2026-10-11
   First CTA stays WhatsApp; right CTA scrolls to the #servicos section. */
#root main > section:first-of-type a.lum-hero-services-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  min-height:56px!important;
  padding:14px 22px!important;
  max-width:100%!important;
  font-size:clamp(13px,1vw,15px)!important;
  font-weight:700!important;
  letter-spacing:.015em!important;
  text-align:center!important;
  white-space:normal!important;
  text-decoration:none!important;
}
#root main > section:first-of-type a.lum-hero-services-link .lum-home-services-arrow{
  display:inline-block; flex:none;
  font-size:20px;line-height:1;color:inherit;
  transition:transform .2s ease;
}
#root main > section:first-of-type a.lum-hero-services-link:hover .lum-home-services-arrow{
  transform:translateY(3px);
}
#root main > section:first-of-type a.lum-hero-services-link:focus-visible{
  outline:2px solid #ead1a8!important;
  outline-offset:4px!important;
}
#root main #servicos{scroll-margin-top:110px!important}
@media(max-width:640px){
 #root main > section:first-of-type a.lum-hero-services-link{
  width:100%!important;min-height:52px!important;
  padding:12px 18px!important;gap:10px!important;
  font-size:14px!important;
 }
 #root main #servicos{scroll-margin-top:88px!important}
}
@media(prefers-reduced-motion:reduce){
 #root main > section:first-of-type a.lum-hero-services-link .lum-home-services-arrow{
  transition:none!important;transform:none!important;
 }
}