/* Sistema aprovado em 04/09/2026: DM Sans + família de fundos solares. */
:root {
  color-scheme: light;
  --canvas: #f7f4ed;
  --surface: #e5e1d8;
  --surface-strong: #d6c4aa;
  --inverse: #1b1b19;
  --inverse-hover: #39332c;
  --ink: #1d1b18;
  --ink-muted: #514b44;
  --link: #6f3718;
  --focus: #9a4d16;
  --error: #8c2f39;
  --success: #6b421b;
  --warm-start: #d4862b;
  --warm-middle: #e8a646;
  --warm-light: #fff8ea;
  --solar-ivory:
    radial-gradient(circle at 82% 18%, #fffdf8 0, rgba(255, 253, 248, .88) 13%, transparent 42%),
    linear-gradient(145deg, #f7f4ed 18%, #efc982 100%);
  --solar-limestone:
    radial-gradient(circle at 76% 22%, #fff8e8 0, rgba(255, 248, 232, .72) 14%, transparent 42%),
    linear-gradient(145deg, #e5e1d8 12%, #dda65a 100%);
  --solar-sand:
    radial-gradient(circle at 74% 20%, #fbe6bb 0, rgba(251, 230, 187, .66) 15%, transparent 43%),
    linear-gradient(145deg, #d6c4aa 10%, #d27f30 100%);
  --solar-full:
    radial-gradient(ellipse 145% 92% at 118% -18%, rgba(255, 244, 218, .36) 0, rgba(250, 216, 160, .2) 42%, transparent 74%),
    linear-gradient(145deg, #ebb25c 0, #e3a047 50%, #d88832 100%);
  --solar-bronze:
    radial-gradient(ellipse 145% 92% at 118% -18%, rgba(239, 181, 112, .34) 0, rgba(205, 132, 71, .2) 42%, transparent 74%),
    linear-gradient(145deg, #8a593b 0, #704936 56%, #50382f 100%);
  --solar-charcoal:
    radial-gradient(ellipse 150% 96% at 120% -20%, rgba(207, 139, 75, .3) 0, rgba(139, 85, 49, .16) 44%, transparent 76%),
    linear-gradient(145deg, #302a25 0, #24211e 58%, #191817 100%);

  /* Compatibilidade com a estrutura cinematográfica existente. */
  --paper: var(--canvas);
  --light: var(--warm-light);
  --blue: #26211e;
  --mineral: #704936;
  --amber: var(--warm-middle);
  --line: rgba(29, 27, 24, .2);
}



.cinematic-home :is(h1, h2, h3, blockquote, time, .brand, .path-list span, .care-paths span, .people-credit strong) {
  font-weight: 500;
  letter-spacing: -.035em;
}

.cinematic-home :is(.button, .hero-kicker, .cinema-name, .cinema-sound, .case-motion, .care-motion, .treatment-copy a, .process-cinema-copy a, .process-journey span, .education-library, .case-frame figcaption) {
  font-weight: 600;
}

.cinematic-home .hero h1 {
  max-width: 13ch;
  font-size: clamp(48px, 5vw, 80px);
  line-height: .98;
}

.legacy-prologue h2 {
  max-width: 13ch;
  font-size: clamp(64px, 8.5vw, 112px);
  line-height: .96;
}

.manifesto-copy h2,
.care-prologue-copy h2,
.treatments-prologue-copy h2,
.process-cinema-copy h2,
.history-beat h2,
.education-copy h2,
.cinematic-home .people-story h2 {
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: 1.02;
}

.cinema-copy h3,
.treatment-copy h3 {
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1.03;
}

.history-beat time {
  font-size: clamp(52px, 6vw, 84px);
  line-height: .95;
}

body.cinematic-home {
  color: var(--ink);
  background: var(--solar-ivory);
}

.cinematic-home .hero-image::before {
  background: radial-gradient(circle at 55% 30%, transparent 0 24%, rgba(24, 20, 17, .12) 55%, rgba(24, 20, 17, .36));
}



.cinematic-home .paper,
.cinematic-home .pathways {
  background: var(--solar-ivory);
}

.cinematic-home .path-list a {
  background: var(--solar-limestone);
}

.cinematic-home .path-list a:nth-child(2n) {
  background: var(--solar-sand);
}

.cinematic-home .path-list a::before,
.cinematic-home .path-list a:hover,
.cinematic-home .path-list a:focus-visible {
  color: var(--warm-light);
  background: var(--solar-bronze);
}

.legacy-prologue {
  color: var(--ink);
  background: var(--solar-full);
}

.legacy-cinema {
  background: var(--solar-full);
}

.manifesto,
.manifesto-stage,
.case-reel-actions,
.care-cinema,
.treatments-cinema,
.process-cinema,
.history-cinema,
.education-cinema,
.cinematic-home .people-cinema,
.cinematic-home .contact,
.cinematic-home #legado,
.cinematic-home .ink {
  color: var(--warm-light);
  background: var(--solar-charcoal);
}

.care-paths,
.cinematic-home .mineral {
  color: var(--warm-light);
  background: var(--solar-bronze);
}

.case-frame,
.cinema-scenes,
.treatment-film,
.history-films,
.education-film,
.care-reel,
.care-reel figure,
.cinema-film {
  background: var(--inverse);
}

.hero p,
.treatment-track p,
.years p,
.contact address,
.cinematic-home .people-story > p,
.cinematic-home .people-credit span,
.care-prologue-copy > span,
.care-paths small,
.treatments-prologue-copy p,
.treatment-copy p,
.process-cinema-copy p,
.history-beat p,
.education-copy > p,
.education-offer > p,
.legacy-epilogue-copy p {
  color: rgba(255, 248, 234, .84);
}

.manifesto-copy p,
.case-motion:hover,
.case-motion:focus-visible,
.cinema-copy .cinema-name,
.cinema-sound::before,
.care-motion:hover,
.care-motion:focus-visible,
.care-paths svg,
.treatment-copy a::after,
.process-cinema-copy a::after,
.process-journey span,
.history-progress i,
.history-beat time,
.education-offer h3,
.education-library::after {
  color: var(--warm-middle);
}

.case-motion:hover,
.case-motion:focus-visible,
.care-motion:hover,
.care-motion:focus-visible {
  border-color: var(--warm-middle);
}

.care-paths svg {
  stroke: var(--warm-middle);
}

.treatment-copy a::after,
.process-cinema-copy a::after,
.history-progress i,
.education-library::after {
  background: var(--warm-middle);
}

.manifesto-shade,
.cinematic-home .people-shade,
.treatment-shade,
.treatment-scene-right .treatment-shade,
.process-shade,
.history-shade,
.education-shade {
  background:
    linear-gradient(90deg, rgba(24, 20, 17, .92) 0, rgba(24, 20, 17, .56) 48%, rgba(24, 20, 17, .08) 80%),
    linear-gradient(0deg, rgba(24, 20, 17, .96) 0, rgba(24, 20, 17, .28) 62%, rgba(24, 20, 17, .06) 100%);
}

.cinema-shade,
.cinema-neymar .cinema-shade,
.legacy-epilogue-shade,
.care-prologue-shade {
  background:
    linear-gradient(90deg, rgba(24, 20, 17, .88) 0, rgba(24, 20, 17, .42) 54%, rgba(24, 20, 17, .05) 82%),
    linear-gradient(0deg, rgba(24, 20, 17, .94) 0, rgba(24, 20, 17, .22) 62%, transparent 100%);
}

.cinema-sound,
.case-frame figcaption,
.treatment-film-pair span {
  background: rgba(68, 47, 38, .64);
}

.education-cinema::before {
  background: radial-gradient(circle at 77% 27%, rgba(232, 166, 70, .46) 0, rgba(212, 134, 43, .18) 5%, transparent 16%);
}

::selection {
  color: var(--ink);
  background: var(--warm-middle);
}

:focus-visible {
  outline-color: var(--focus);
}

@media (max-width: 760px) {
  .cinematic-home .hero h1 {
    font-size: clamp(44px, 11.5vw, 56px);
    line-height: 1;
  }

  .manifesto-copy h2,
  .care-prologue-copy h2,
  .treatments-prologue-copy h2,
  .process-cinema-copy h2,
  .history-beat h2,
  .education-copy h2,
  .cinematic-home .people-story h2 {
    max-width: 13ch;
    font-size: clamp(36px, 9.2vw, 44px);
    line-height: 1.04;
  }

  .legacy-prologue h2 {
    max-width: 12ch;
    font-size: clamp(48px, 12vw, 60px);
    line-height: .98;
  }

  .cinema-copy h3,
  .treatment-copy h3 {
    max-width: 13ch;
    font-size: clamp(34px, 8.8vw, 42px);
    line-height: 1.04;
  }

  .manifesto-shade,
  .cinematic-home .people-shade,
  .treatment-shade,
  .treatment-scene-right .treatment-shade,
  .process-shade,
  .history-shade,
  .education-shade,
  .cinema-shade,
  .cinema-neymar .cinema-shade,
  .legacy-epilogue-shade,
  .care-prologue-shade {
    background: linear-gradient(0deg, rgba(24, 20, 17, .97) 0, rgba(24, 20, 17, .68) 46%, rgba(24, 20, 17, .08) 80%, rgba(24, 20, 17, .03) 100%);
  }
}

@media (max-width: 1024px) {
  .treatment-scene {
    height: clamp(760px, 112vw, 980px);
  }

  .treatment-scene .treatment-film {
    bottom: 34%;
  }

  .treatment-scene .treatment-shade,
  .treatment-scene-right .treatment-shade {
    background: linear-gradient(0deg, rgba(24, 20, 17, 1) 0 31%, rgba(24, 20, 17, .94) 36%, rgba(24, 20, 17, .12) 62%, rgba(24, 20, 17, .02) 100%);
  }

  .treatment-scene .treatment-copy {
    position: absolute;
    top: 66%;
    bottom: auto;
    left: 0;
    max-width: 680px;
    margin: 0;
    padding: 24px 40px 0;
  }

  .treatment-scene-right .treatment-copy {
    right: 0;
    left: auto;
  }

  .treatment-scene .treatment-copy h3 {
    max-width: 14ch;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.02;
  }

  .treatment-scene .treatment-copy p {
    max-width: 40ch;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }

  .treatment-scene .treatment-copy a {
    margin-top: 12px;
  }
}

@media (max-width: 760px) {
  .treatment-scene {
    height: clamp(700px, 172vw, 820px);
  }

  .treatment-scene .treatment-film {
    bottom: 36%;
  }

  .treatment-scene .treatment-copy {
    top: 64%;
    right: auto;
    left: 0;
    padding: 20px 20px 0;
  }

  .treatment-scene .treatment-copy h3 {
    font-size: clamp(29px, 8vw, 36px);
  }

  .treatment-scene .treatment-copy p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
  }

  .treatment-scene .treatment-copy a {
    min-height: 42px;
    margin-top: 9px;
  }
}