/*
 * Lumière · Identidade Areia & Carvalho | 2026-10-11
 * Harmonizada com as fotos reais: paredes greige, ripas verticais de madeira,
 * porcelanato pedra-clara e dourado champagne. Apenas CSS, sem rebuild.
 */
html:root {
  --background: 36 30% 94%;
  --foreground: 27 24% 20%;
  --card: 37 43% 98%;
  --card-foreground: 27 24% 20%;
  --popover: 37 42% 98%;
  --popover-foreground: 27 24% 20%;
  --primary: 34 54% 39%;
  --primary-foreground: 36 54% 99%;
  --secondary: 34 27% 85%;
  --secondary-foreground: 27 24% 20%;
  --muted: 32 22% 90%;
  --muted-foreground: 27 13% 39%;
  --accent: 34 34% 89%;
  --accent-foreground: 27 24% 20%;
  --border: 34 19% 81%;
  --input: 34 19% 81%;
  --ring: 34 54% 39%;
  --gold: 34 54% 39%;
  --gold-light: 37 65% 73%;
  --gold-dark: 30 54% 28%;
  --cream: 37 33% 95%;
  --cream-dark: 34 24% 85%;
  --charcoal: 27 27% 15%;
  --warm-white: 40 48% 99%;
  --lum-gold: #aa7d42;
  --lum-gold-light: #e1c292;
  --lum-deep: #322820;
  --lum-wood: #8c6449;
  --lum-taupe: #cbbba8;
  --lum-stone: #ece6dd;
  --lum-wood-slats: repeating-linear-gradient(90deg,
    #76543e 0px, #997051 4px, #bb926c 10px,
    #a47a58 15px, #5e4332 18px, #634632 20px, #8a6044 22px);
}
html { background:#f4eee6; }
body {background:#f4eee6;color:#3f332b;}

/* HERO: photographic layout untouched; correct only its color grade and contrast. */
#root main > section:first-of-type > .absolute.inset-0 > img {
  filter:sepia(.36) saturate(.72) hue-rotate(-7deg) brightness(.94);
}
#root main > section:first-of-type > .absolute.inset-0 > .bg-gradient-to-b {
  background-image:linear-gradient(180deg,
    rgba(43,31,24,.78) 0%,
    rgba(65,44,31,.55) 38%,
    rgba(49,34,27,.73) 74%,
    rgba(37,28,24,.91) 100%)!important;
}
#root main > section:first-of-type h1,
#root main > section:first-of-type h1:not(.text-gold-light) {color:#fffaf3}
#root main > section:first-of-type h1 span {color:#e7c694!important;text-shadow:0 2px 16px rgba(35,22,13,.20)}
#root main > section:first-of-type h1 + p {color:#f4eae0!important}
#root main > section:first-of-type h1 + p span {color:rgba(255,246,235,.78)}
#root main > section:first-of-type .lumiere-section-watermark {filter:sepia(.8) saturate(.6);opacity:.10}
#root main > section:first-of-type a.bg-primary {background:linear-gradient(130deg,#986a34,#bb9153)!important;border-color:#b68a4d;box-shadow:0 10px 28px rgba(40,27,20,.3);color:#fff}
#root main > section:first-of-type a.border-2 {border-color:rgba(255,238,217,.7)!important;background:rgba(48,33,24,.20);color:#fff9ee}
#root main > section:first-of-type a.border-2:hover {background:#f1e6d6!important;color:#3f3027!important}
#root main > section:first-of-type > .absolute.inset-0 > .absolute.bottom-0 {background-image:linear-gradient(90deg,transparent,#bb9163,transparent)}

/* Unified header: replace cool charcoal/green cast with dark walnut. */
.lumiere-unified-header[data-variant="home"]:not(.is-scrolled) {
  background:linear-gradient(180deg,rgba(37,28,22,.65),rgba(45,31,22,0));
}
.lumiere-unified-header[data-variant="internal"]:not(.is-scrolled) {
  background:linear-gradient(110deg,rgba(48,37,30,.98),rgba(67,49,37,.96));
  border-bottom-color:rgba(219,185,139,.25);
}
.lumiere-unified-header.is-scrolled {
  background:rgba(48,36,29,.965);
  box-shadow:0 8px 26px rgba(32,22,17,.18);
}
.lumiere-unified-header .lumiere-header-nav > a:not(.lumiere-book),
.lumiere-unified-header .lumiere-nav-toggle {color:#f9f1e9}
.lumiere-unified-header .lumiere-nav-toggle:hover,
.lumiere-unified-header .lumiere-header-nav > a:not(.lumiere-book):hover {color:#f2d4aa;background:rgba(228,192,139,.12)}
.lumiere-unified-header .lumiere-header-nav .lumiere-book {
  background:linear-gradient(135deg,#9b6e36,#b98b4b);color:white;
  box-shadow:0 7px 20px rgba(29,20,13,.16);
}
.lumiere-unified-header .lumiere-nav-panel {
  background:linear-gradient(135deg,#49362a 0%,#2b231f 100%);
  border-color:rgba(224,186,131,.52);
  box-shadow:0 18px 43px rgba(33,21,15,.36),inset 0 1px 0 rgba(251,227,192,.08);
}
.lumiere-unified-header .lumiere-nav-panel > span {color:#e0bf8b}
.lumiere-unified-header .lumiere-nav-panel a {color:#f4e9dd!important}
.lumiere-unified-header .lumiere-nav-panel a svg {stroke:#d2a771}
.lumiere-unified-header .lumiere-nav-panel a:hover,
.lumiere-unified-header .lumiere-nav-panel a:focus-visible {background:rgba(197,147,90,.18);color:#ffdfac!important}
.lumiere-unified-header[data-variant="internal"]:not(.is-scrolled) .lumiere-brand {
  background:linear-gradient(145deg,#6b5540,#32261f 72%);
  border-color:rgba(217,178,117,.58);
}
@media(max-width:970px) {
  .lumiere-unified-header .lumiere-header-nav {background:#3c2d25;border-color:#ad8458}
  .lumiere-unified-header .lumiere-nav-panel {background:rgba(32,23,18,.66)}
}

/* About the doctor: warm linen with authentic wooden wall rhythm. */
#root main #sobre {
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(113deg,#faf8f3 0%,#f3ebe2 55%,#e6d9c9 100%)!important;
}
#root main #sobre::before {
  content:"";position:absolute;right:0;top:7%;bottom:7%;
  width:clamp(36px,7vw,108px);background:var(--lum-wood-slats);
  opacity:.16;mask-image:linear-gradient(90deg,transparent 0%,#000 80%);
  pointer-events:none;
}
#root main #sobre > .container {position:relative;z-index:1}
#root main #sobre img {border-radius:14px;box-shadow:0 18px 39px rgba(74,52,36,.16)}
#root main #sobre h2 {color:#463329}
#root main #sobre p {color:#65564b}
#root main #sobre .text-primary {color:#94683a}

/* Photo gallery and clinic interior: greige, stone and tasteful wood trim. */
#lumiere-photo-gallery {
  background:linear-gradient(150deg,#e9e0d4 0%,#f5f0e8 46%,#e6dac9 100%)!important;
  color:#44352a;
  border-top:1px solid rgba(156,115,69,.24);
  border-bottom:1px solid rgba(156,115,69,.2);
  overflow:hidden;
}
#lumiere-photo-gallery::before {
  content:"";position:absolute;top:0;left:0;bottom:0;width:clamp(8px,2.4vw,36px);
  background:var(--lum-wood-slats);opacity:.65;pointer-events:none;
  mask-image:linear-gradient(90deg,#000 4%,transparent 100%);
}
#lumiere-photo-gallery .lum-gallery-shell {position:relative;z-index:1}
#lumiere-photo-gallery h2 {color:#463329}
#lumiere-photo-gallery .lum-gallery-eyebrow {color:#976a38}
#lumiere-photo-gallery .lum-gallery-intro {color:#66574b}
#lumiere-photo-gallery .lum-gallery-tile {border-color:rgba(130,91,55,.33);box-shadow:0 10px 23px rgba(63,42,29,.11)}
#lumiere-photo-gallery .lum-gallery-number {background:rgba(55,40,28,.7);border-color:rgba(240,213,180,.6)}
#lumiere-photo-gallery .lum-gallery-footer {color:#866a51}

/* Services: sand-coloured canvas, warm walnut titles, premium ivory cards. */
#root main #servicos {
  position:relative;
  background:linear-gradient(175deg,#f6f0e8,#eee4d8 80%,#f1e9df)!important;
  border-top:1px solid rgba(141,101,61,.13);
}
#root main #servicos::before {
  content:"";position:absolute;inset:0 0 auto;height:12px;
  background:var(--lum-wood-slats);opacity:.46;
  pointer-events:none;
}
#root main #servicos > .container {position:relative}
#root main #servicos article {
  background:linear-gradient(160deg,#fffdfa,#f7f1e8)!important;
  border:1px solid rgba(143,109,70,.23);
  box-shadow:0 9px 24px rgba(79,58,39,.075);
  border-radius:17px;
}
#root main #servicos article:hover {border-color:rgba(167,122,71,.6);box-shadow:0 16px 32px rgba(85,61,40,.13)}
#root main #servicos article h3 {color:#473529}
#root main #servicos article p {color:#6d5d51}
#root main #servicos article a.bg-primary,
#root main #servicos article .bg-primary {background:#987040!important}
#root main #servicos article a.bg-primary:hover {background:#805931!important}
#root main #servicos .text-primary {color:#936635}

/* Differentials: light stone and minimalist wooden separators. */
#root main #servicos + section {
  background:#fbf8f3!important;
  border-top:1px solid #e2d5c5;
}
#root main #servicos + section h2 {color:#413128}
#root main #servicos + section .bg-primary\/10 {background:rgba(168,121,69,.11)}
#root main #servicos + section h3 {color:#513c2e}

/* FAQ: warm stone panels instead of stark white. */
#root main #faq {background:linear-gradient(180deg,#fbf8f3,#f0e7dc)!important}
#root main #faq h2 {color:#49362b}
#root main #faq .bg-card {
  background:#fcf9f4!important;
  border:1px solid #ded0c0;
  box-shadow:0 2px 9px rgba(72,50,29,.045);
}
#root main #faq .bg-card:hover {border-color:#b99a75}
#root main #faq .bg-card[data-state="open"] {border-color:#b58b58;background:#fffdfa!important}

/* Final CTA: warm wood façade with vertical grain subtly overlaid. */
#root main > section:last-of-type.relative.overflow-hidden {
  isolation:isolate;background:#3c2b23;
}
#root main > section:last-of-type.relative.overflow-hidden > .absolute.inset-0 > img {
  filter:sepia(.5) saturate(.8) brightness(.9);
}
#root main > section:last-of-type.relative.overflow-hidden > .absolute.inset-0 > .bg-gradient-to-r {
  background-image:linear-gradient(90deg,rgba(45,30,20,.93),rgba(65,42,27,.73))!important;
}
#root main > section:last-of-type.relative.overflow-hidden::after {
  content:"";position:absolute;inset:0 0 0 auto;
  width:min(24vw,290px);background:var(--lum-wood-slats);
  opacity:.16;mask-image:linear-gradient(90deg,transparent,#000);
  pointer-events:none;z-index:0;
}

/* Footer: espresso/walnut with an architectural top trim. */
#root footer {position:relative;background:#2d241e!important;color:#eee5db}
#root footer::before {
  content:"";display:block;height:7px;width:100%;
  background:var(--lum-wood-slats);opacity:.8;
}
#root footer a:hover {color:#e7c79b!important}

/* Typography / rhythm without changing order, copy or site structure. */
#root main #sobre h2,
#root main #servicos h2,
#root main #faq h2,
#lumiere-photo-gallery h2 {letter-spacing:-.023em}
#root main section a.bg-primary, #root main section button.bg-primary {
  border-radius:9px;
  box-shadow:0 7px 18px rgba(74,49,28,.11);
}
#root main section a.bg-primary:hover, #root main section button.bg-primary:hover {filter:brightness(1.07)}
@media(max-width:760px) {
  #root main #sobre::before{width:28px;opacity:.10}
  #root main #servicos::before{height:7px}
  #lumiere-photo-gallery::before{width:11px;opacity:.3}
  #root main > section:last-of-type.relative.overflow-hidden::after{width:15vw;opacity:.12}
  #root main > section:first-of-type .lumiere-section-watermark {opacity:.045}
}
@media(prefers-reduced-motion:reduce) {
  #root main #servicos article,#root main section a.bg-primary {transition:none!important}
}
