/* ==========================================================================
   SEÇÕES · um bloco por seção, na ordem da página
   Usa apenas os tokens de css/tokens.css. Breakpoints: 1023 / 767 / 599.
   ========================================================================== */

/* ---------- Espaço reservado para imagens (sem texto) ---------- */
.ph-frame {
  position: relative; display: grid; place-items: center; width: 100%;
  background: var(--paper-deep);
  aspect-ratio: var(--ph-ratio, 4 / 3);
}
.ph-frame::after { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--olive) 28%, transparent); pointer-events: none; }
.ph-frame--portrait { --ph-ratio: 4 / 5; }
.ph-frame--scene { --ph-ratio: 4 / 3; }
.ph-mark { display: block; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--caramel) 70%, transparent); border-radius: 50%; }

/* ---------- 01 · HeroSection ---------- */
/* A foto é o FUNDO da hero (camada de baixo); o texto fica por cima.
   <picture> baixa só a versão do breakpoint: mobile vertical (1080×1920) até 767px,
   desktop horizontal (1774×887) a partir de 768px. Arquivos usados sem alteração. */
.hero { position: relative; overflow: hidden; background: var(--hero-ground); }
.hero-stage { position: relative; }
.hero-media { position: absolute; z-index: 0; pointer-events: none; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-photo { display: block; width: 100%; height: 100%; }
.js .hero-media.reveal-img { transform: none; }
.hero-overlay { position: relative; z-index: 1; }
.hero-copy { display: grid; gap: var(--s3); justify-items: start; text-align: left; }
.hero-title { max-width: 18ch; }
.hero-title .line { display: block; }
.hero-title em { color: var(--terra); }
.hero-copy .lead { max-width: 52ch; color: var(--ink-soft); }
.hero-cta { margin-top: var(--s0); }

/* ---- Mobile (até 767px): Lucy no topo, texto logo abaixo, sobre a área clara da foto ---- */
@media (max-width: 767px) {
  /* a foto ocupa a largura toda na proporção original (altura = 177.8vw), sem corte */
  .hero-media { top: 0; left: 0; right: 0; aspect-ratio: 1080 / 1920; }
  /* transição suave: reforça o esmaecimento da própria foto antes do texto */
  .hero-media::after {
    content: ""; position: absolute; left: 0; right: 0; top: 72vw; height: 32vw;
    background: linear-gradient(to bottom, transparent, var(--hero-ground));
  }
  /* o texto começa onde o tronco já se dissolve no fundo; rosto e ombros ficam livres */
  .hero-overlay { padding-top: 96vw; padding-bottom: var(--s5); }
  .hero-copy { gap: var(--s2); }
  .hero-cta, .hero-cta .btn { width: 100%; }
}

/* ---- Tablet (768–1023px): foto horizontal no topo, texto logo abaixo com fusão suave ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-media { position: relative; aspect-ratio: 1774 / 887; }
  .hero-media::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    background: linear-gradient(to bottom, transparent, var(--hero-ground));
  }
  .hero-overlay { margin-top: calc(-1 * var(--s5)); padding-bottom: var(--s5); }
}

/* ---- Desktop (1024px+): foto como fundo da seção inteira, texto no espaço livre à esquerda ---- */
@media (min-width: 1024px) {
  /* altura mínima = altura natural da foto; se o texto pedir mais, a foto cobre ancorada à direita */
  .hero-stage { display: grid; align-items: center; min-height: calc(100vw * 887 / 1774); }
  .hero-media { inset: 0; }
  .hero-photo { object-fit: cover; object-position: right center; }
  .hero-overlay { padding-block: var(--s5); }
  .hero-copy {
    --hero-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
    /* nunca passa de ~46% da largura: Lucy começa por volta de 51% */
    max-width: min(560px, calc(46vw - var(--hero-left)));
    gap: var(--s2);
  }
  /* título levemente menor só na hero, para caber no espaço livre sem invadir a foto */
  .hero-title { font-size: clamp(2.5rem, 1rem + 2.6vw, 3.5rem); max-width: none; }
}

/* ---------- 02 · Cenas (IdentificationSection) ---------- */
.ident { background: var(--paper-deep); padding-top: var(--s5); }
.ident-head { display: grid; gap: var(--s1); justify-items: start; margin-bottom: var(--head-gap); }
.ident-head .h2 em { color: var(--terra); }
.ident-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.scene { display: grid; grid-template-rows: auto 1fr; background: var(--paper-lift); border: var(--border); }
.scene-media { overflow: hidden; }
.scene-media img { --od-ratio: 4 / 3; transition: transform 900ms var(--ease-out); }
.scene-media .ph-frame { background: var(--paper); }
@media (hover: hover) {
  .scene { transition: border-color var(--dur-2) var(--ease-out); }
  .scene:hover { border-color: color-mix(in srgb, var(--olive) 40%, transparent); }
  .scene:hover .scene-media img { transform: scale(1.04); }
}
.scene-body { display: grid; align-content: start; gap: var(--s1); padding: var(--s3); }
.ident-num { display: block; font-family: var(--font-serif); font-style: italic; font-size: 2rem; line-height: 1; color: var(--terra); }
.ident-text { font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; }
.ident-foot { display: grid; justify-items: start; gap: var(--s2); margin-top: var(--head-gap); max-width: 760px; }
.ident-foot .h3 em { color: var(--terra); }
.ident-foot .btn { margin-top: var(--s0); }

@media (max-width: 1023px) { .ident-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .ident { padding-top: var(--s4); }
  .ident-grid { grid-template-columns: 1fr; gap: var(--s0); }
  /* texto primeiro: miniatura pequena ao lado */
  .scene { grid-template-rows: none; grid-template-columns: 72px minmax(0, 1fr); align-items: stretch; }
  .scene-media .ph-frame, .scene-media img { --ph-ratio: auto; --od-ratio: auto; height: 100%; min-height: 96px; }
  .scene-media .ph-frame::after { inset: 6px; }
  .scene-media .ph-mark { width: 24px; height: 24px; }
  .scene-body { padding: var(--s2); gap: var(--s0); }
  .ident-num { font-size: 1.5rem; }
  .ident-foot .btn { width: 100%; }
}

/* ---------- MarqueeSection ---------- */
.marquee { background: var(--terra); color: var(--paper); overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-speed) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) 0; white-space: nowrap; font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1; }
.marquee-item:nth-child(even) { font-style: italic; }
.marquee-dot { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: auto; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .marquee-group { flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
}

/* ---------- 03 · O que é (WhatIsSection) ---------- */
.whatis-head { display: grid; gap: var(--s2); max-width: 980px; margin-bottom: var(--head-gap); }
.whatis-head .h2 em { color: var(--terra); }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--border); }
.role { display: grid; align-content: start; gap: var(--s1); padding: var(--s3) var(--s3) var(--s4) 0; }
.role + .role { padding-left: var(--s3); border-left: var(--border); }
.role-k { display: block; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--olive); }
.role-name { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; }
.role-text { color: var(--ink-soft); }
.role--key { background: var(--olive); padding-right: var(--s3); }
.role--key .role-k { color: var(--paper-soft); }
.role--key .role-text { color: var(--paper); }

.maestro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6); align-items: center; margin-block: var(--s6); }
.collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.collage-a { grid-column: 1 / 11; grid-row: 1; }
.collage-b { overflow: hidden; grid-column: 8 / 13; grid-row: 1; align-self: end; margin-bottom: calc(-1 * var(--s6)); z-index: 1; border: 8px solid var(--paper); background: var(--paper); }
.maestro-copy { display: grid; gap: var(--s3); }
.maestro-copy .h2 em { color: var(--olive); }
.maestro-copy .lead strong { color: var(--ink); }

.example { background: var(--paper-deep); padding: clamp(24px, 5vw, 72px); display: grid; gap: var(--s3); }
.example-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); }
.example-text { display: grid; gap: var(--s2); }
.example-highlights { display: grid; gap: var(--s3); margin: 0; }
.example-highlights .od-stat { --od-gap: var(--s0); padding-top: var(--s2); border-top: var(--border); }
.hl-value { order: -1; margin: 0; font-family: var(--font-serif); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 3rem); line-height: 1.05; color: var(--terra); white-space: nowrap; }
.hl-caption { font-size: var(--fs-small); color: var(--ink-soft); }
.example-close { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; padding-top: var(--s3); border-top: var(--border); text-wrap: balance; }
.example-close strong { font-weight: 400; font-style: italic; color: var(--olive); }

@media (max-width: 1023px) {
  .roles { grid-template-columns: 1fr; }
  .role, .role + .role { padding: var(--s3) 0; border-left: 0; border-bottom: var(--border); }
  .role--key { padding: var(--s3); }
  .maestro { grid-template-columns: 1fr; gap: var(--s6); }
  .example-grid { grid-template-columns: 1fr; gap: var(--s3); }
}
@media (max-width: 599px) {
  .maestro { margin-block: var(--s4); gap: var(--s5); }
  .collage-b { margin-bottom: calc(-1 * var(--s4)); border-width: 6px; }
  .example { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}

/* ---------- 04 · Manifesto (EditorialHeadlineSection) ---------- */
.editorial { overflow: hidden; padding-block: var(--s5); }
.ed-stage { display: grid; justify-items: center; }
.ed-word {
  grid-area: 1 / 1;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-mega); line-height: .86; letter-spacing: -.035em;
  color: var(--olive); white-space: nowrap;
}
.ed-figure {
  grid-area: 1 / 1; z-index: 1;
  width: min(560px, 76%);
  margin-top: calc(var(--fs-mega) * .66);
  border: 10px solid var(--paper); background: var(--paper);
}
.manifesto-copy { display: grid; justify-items: center; gap: var(--s2); max-width: 900px; margin: var(--s4) auto 0; text-align: center; }
.manifesto-copy .quote em { color: var(--terra); }
.manifesto-copy .quote .line { display: block; }
.manifesto-sign { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--olive); }
.manifesto-sign::before, .manifesto-sign::after { content: ""; width: 32px; height: 1px; background: currentColor; }
@media (max-width: 599px) {
  .ed-word { font-size: clamp(4.5rem, 26vw, 7rem); }
  .ed-figure { margin-top: calc(clamp(4.5rem, 26vw, 7rem) * .66); width: 88%; border-width: 6px; }
  .manifesto-copy { justify-items: start; text-align: left; }
}

/* ---------- 05 · Como funciona (HowItWorksSection) ---------- */
.learn-card { background: var(--paper-lift); border: var(--border); padding: clamp(24px, 5vw, 80px); }
.learn-head { display: grid; gap: var(--s2); max-width: 820px; margin-bottom: var(--head-gap); }
.learn-head .h2 em { color: var(--olive); }
.work-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.work-title { padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); }
.work-title em { color: var(--terra); }
.work-list { display: grid; }
.learn-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s0) var(--s2); padding-block: var(--s3); border-bottom: var(--border); }
.learn-icon { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; font-size: var(--fs-small); font-weight: 500; color: var(--terra); }
.learn-title { display: block; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; }
.learn-desc { grid-column: 2; display: block; color: var(--ink-soft); }
.learn-desc strong { color: var(--ink); }
.learn-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: end; margin-top: var(--s4); padding-top: var(--s3); border-top: var(--border); }
.work-close { margin: 0; display: grid; gap: var(--s1); max-width: 62ch; }
.work-close p:first-child { color: var(--ink-soft); }
.work-close p:last-child { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; text-wrap: balance; }
.work-close em { color: var(--olive); }

@media (max-width: 1023px) {
  .work-groups { grid-template-columns: 1fr; gap: var(--s4); }
  .learn-foot { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .learn-card { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; padding-inline: var(--gutter); }
  .learn-foot .btn { width: 100%; }
}

/* ---------- 06 · O que muda (ChangesSection) ---------- */
.changes { background: var(--ink); }
.changes-head { display: grid; gap: var(--s2); margin-bottom: var(--head-gap); }
.changes-head .h2 em { color: var(--caramel); }
.changes-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-small); color: var(--paper-soft); }
.changes-legend li { display: flex; align-items: center; gap: var(--s0); }
.change-list { display: grid; }
.change { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s1); padding-block: var(--s2); border-top: 1px solid var(--line-light); }
.change-num { font-family: var(--font-serif); font-style: italic; font-size: 2rem; line-height: 1; color: var(--caramel); padding-top: var(--s2); }
.change-side { display: grid; align-content: start; gap: var(--s0); padding: var(--s3); }
.change-side--without { border: 1px solid var(--line-light); color: var(--paper-soft); }
.change-side--with { background: var(--olive); color: var(--paper); }
.change-side { transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .change-side--without:hover { border-color: color-mix(in srgb, var(--paper) 48%, transparent); }
  .change-side--with:hover { background: color-mix(in srgb, var(--olive) 88%, var(--caramel)); }
  .change-side:hover, .js .change-side.reveal.is-in:hover { transform: translateY(-2px); }
}
.change-label { display: flex; align-items: center; gap: var(--s0); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.change-side--without .change-label { color: var(--paper-soft); }
.change-side--with .change-label .icon { color: var(--caramel); }
.change-title { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; color: var(--paper); }
.change-side--without .change-title { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--paper) 40%, transparent); }

@media (max-width: 767px) {
  .changes-legend { display: none; }
  .change { grid-template-columns: 1fr; gap: var(--s0); padding-block: var(--s3); }
  .change-num { padding-top: 0; font-size: 1.75rem; }
  .change-side { padding: var(--s2); }
}

/* ---------- 07 · Na prática (AreasSection) ---------- */
.areas-head { display: grid; gap: var(--s2); max-width: 820px; margin-bottom: var(--head-gap); }
.areas-head .h2 em { color: var(--terra); }
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.area { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); background: var(--paper-lift); border: var(--border); height: 100%; }
.area-media { overflow: hidden; background: var(--olive); }
.area-media img { --od-ratio: auto; height: 100%; min-height: 260px; }
.area-body { display: grid; align-content: start; gap: var(--s1); padding: var(--s3); }
.area-k { display: block; font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--terra); }
.area-name { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; }
.area-text { color: var(--ink-soft); }

@media (max-width: 1023px) { .area-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .area { grid-template-columns: 1fr; }
  .area-media img { --od-ratio: 16 / 9; height: auto; min-height: 0; }
  .area-body { padding: var(--s2) var(--s2) var(--s3); }
}

/* ---------- 08 · Cases e depoimentos (CasesSection) ---------- */
.cases { background: var(--paper-deep); }
.cases-head { display: grid; gap: var(--s2); margin-bottom: var(--head-gap); }
.cases-head .h2 em { color: var(--olive); }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.case { display: grid; align-content: start; gap: var(--s2); padding: clamp(24px, 4vw, 56px); background: var(--paper-lift); border: var(--border); }
.case--dark { background: var(--olive); border-color: transparent; }
.case-logo {
  display: grid; place-items: center; width: min(100%, 280px); height: 112px; padding: var(--s2);
  background: var(--paper); border: var(--border);
}
.case-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.case-logo.is-empty { position: relative; }
.case-logo.is-empty::after { content: ""; position: absolute; inset: 8px; border: 1px dashed color-mix(in srgb, var(--olive) 30%, transparent); }
.case-name { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.1; }
.case-context { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--olive); padding-bottom: var(--s2); border-bottom: var(--border); }
.case--dark .case-context { color: var(--paper-soft); border-color: var(--line-light); }
.case-result { font-size: var(--fs-lead); line-height: 1.55; }
.case-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.case-video figcaption { padding-top: var(--s0); font-size: .8125rem; color: inherit; opacity: .8; }

.testi-block { margin-top: var(--s6); }
.testi-title { max-width: 720px; margin-bottom: var(--s3); }
.testi-title em { color: var(--terra); }
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.quote-card { display: grid; align-content: start; gap: var(--s1); padding: var(--s4); background: var(--paper); border: var(--border); }
.quote-k { display: block; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em; color: var(--terra); }
.quote-title { font-family: var(--font-serif); font-weight: 400; font-size: 1.625rem; line-height: 1.2; }
.quote-text { color: var(--ink-soft); }
.quote-author { font-size: var(--fs-small); font-weight: 500; }
.record-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.record-grid figcaption { padding-top: var(--s1); font-size: var(--fs-small); color: var(--ink-soft); }

@media (max-width: 1023px) {
  .case-grid, .quote-grid { grid-template-columns: 1fr; }
  .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .testi-block { margin-top: var(--s5); }
  .quote-card { padding: var(--s3) var(--s2); }
  .record-grid { grid-template-columns: 1fr; }
}

/* ---------- 09 · Quem está por trás (AboutSection) ---------- */
.about { overflow: hidden; }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.about-card { grid-column: 1 / 9; grid-row: 1; background: var(--olive); color: var(--paper); padding: clamp(40px, 6vw, 96px); padding-right: calc(25% + var(--s4)); display: grid; gap: var(--s3); }
.about-card .h2 em { color: var(--caramel); }
.about-text { display: grid; gap: var(--s2); }
.about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line-light); }
.about-stats .od-stat { --od-gap: var(--s0); }
.about-stats .n { order: -1; margin: 0; font-family: var(--font-serif); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; white-space: nowrap; }
.about-stats .n-unit { font-size: .5em; font-style: italic; color: var(--caramel); }
.about-stats .c { font-size: var(--fs-small); color: var(--paper-soft); }
.about-figure { grid-column: 7 / 13; grid-row: 1; z-index: 1; border: 10px solid var(--paper); background: var(--paper); }
.about-figure figcaption { padding: var(--s1) var(--s0) 0; font-size: .8125rem; color: var(--ink-soft); }
.about-mega {
  margin-top: var(--s3);
  font-family: var(--font-serif); font-size: clamp(3rem, 1rem + 8.4vw, 9.5rem);
  line-height: .95; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; text-align: right;
}
.about-mega em { font-style: italic; color: var(--terra); }

@media (max-width: 1023px) {
  .about-card { grid-column: 1 / -1; padding-right: clamp(40px, 6vw, 96px); padding-bottom: calc(var(--s7) + var(--s4)); }
  .about-figure { grid-column: 3 / -1; grid-row: 2; margin-top: calc(-1 * var(--s7)); }
}
@media (max-width: 599px) {
  .about-card { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: var(--s7); }
  .about-stats { grid-template-columns: 1fr; gap: var(--s2); }
  .about-figure { grid-column: 2 / -1; margin-top: calc(-1 * var(--s6)); border-width: 6px; }
  .about-mega { white-space: normal; text-align: left; font-size: clamp(2.75rem, 13vw, 4rem); }
}

/* ---------- 10 · Qualificação (FitSection) ---------- */
.fit-head { display: grid; justify-items: center; gap: var(--s2); text-align: center; margin-bottom: var(--head-gap); }
.fit-head .h2 em { color: var(--terra); }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); align-items: stretch; }
.fit-col {
  padding: clamp(24px, 4vw, 56px);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
/* positivo: verde-oliva, confirmação */
.fit-col--yes { --fit-soft: var(--paper-soft); --fit-line: var(--line-light); background: var(--olive); color: var(--paper); border: 1px solid var(--olive); }
.fit-col--yes .fit-badge { background: var(--paper); color: var(--olive); }
.fit-col--yes .fit-list .icon { color: var(--caramel); }
/* negativo: terracota suave, alerta discreto */
.fit-col--no { --fit-soft: var(--ink-soft); --fit-line: color-mix(in srgb, var(--terra) 26%, transparent); background: color-mix(in srgb, var(--terra) 14%, var(--paper)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--terra) 34%, transparent); }
.fit-col--no .fit-badge { background: var(--terra); color: var(--paper); }
.fit-col--no .fit-list .icon { color: var(--terra); }
.fit-title { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s2); margin-bottom: var(--s0); border-bottom: 1px solid currentColor; font-family: var(--font-serif); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.1; }
.fit-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; }
.fit-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: start; padding-block: var(--s2); border-bottom: 1px solid var(--fit-line); transition: transform var(--dur-2) var(--ease-out); }
.fit-list li:last-child { border-bottom: 0; }
.fit-list .icon { margin-top: 3px; }
@media (hover: hover) {
  .fit-col:hover, .js .fit-col.reveal.is-in:hover { transform: translateY(-4px); }
  .fit-col--yes:hover { border-color: var(--caramel); }
  .fit-col--no:hover { border-color: var(--terra); }
  .fit-list li:hover, .js .fit-list li.reveal.is-in:hover { transform: translateX(4px); }
}
@media (max-width: 767px) {
  .fit-head { justify-items: start; text-align: left; }
  .fit-grid { grid-template-columns: 1fr; gap: var(--s1); }
}
@media (max-width: 599px) {
  .fit-col { padding: var(--s3) var(--s2); }
  .fit-badge { width: 44px; height: 44px; }
}

/* ---------- 11 · Aplicação (ApplySection) ---------- */
.offer { position: relative; }
.offer-band { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; overflow: hidden; background: var(--terra); }
.offer-band img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .55; }
.offer-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.offer-benefits { background: var(--paper-deep); padding: clamp(24px, 5vw, 72px); display: grid; gap: var(--s3); align-content: start; }
.offer-benefits .h2 em { color: var(--terra); }
.offer-benefits .h2 .line { display: block; }
.steps-title { margin-top: var(--s2); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--olive); }
.steps { display: grid; border-top: var(--border); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s2); padding-block: var(--s2); border-bottom: var(--border); }
.step-num { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--olive); color: var(--paper); font-size: var(--fs-small); font-weight: 500; }
.step-title { display: block; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.25; }
.step-text { grid-column: 2; display: block; color: var(--ink-soft); }

.offer-box { background: var(--olive); color: var(--paper); padding: clamp(24px, 4vw, 56px); display: grid; gap: var(--s2); align-content: start; }
.offer-name { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.2; }
.form-note { font-size: var(--fs-small); color: var(--paper-soft); }
.apply-form { display: grid; gap: var(--s3); margin-top: var(--s1); }
.form-field { --od-gap: var(--s0); }
.form-field label { font-weight: 500; }
.form-field .req { color: var(--caramel); }
.form-field .help { font-size: var(--fs-small); color: var(--paper-soft); }
.input {
  display: block; width: 100%; min-height: 52px; padding: 12px 16px;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid transparent; border-radius: var(--radius);
  transition: border-color var(--dur-1) var(--ease-out);
}
textarea.input { min-height: 128px; resize: vertical; line-height: 1.5; }
.input:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-color: var(--caramel); }
.has-error .input { border-color: var(--terra); }
.field-error { display: flex; align-items: flex-start; gap: var(--s0); font-size: var(--fs-small); font-weight: 500; color: var(--paper); }
.field-error[hidden] { display: none; }
.field-error .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--caramel); }
.form-summary { padding: var(--s2); background: var(--paper); color: var(--ink); border-left: 0; border-top: 3px solid var(--terra); }
.form-summary[hidden] { display: none; }
.form-summary p { display: flex; align-items: center; gap: var(--s0); font-weight: 500; }
.form-summary .icon { color: var(--terra); }
.form-summary ul { margin-top: var(--s0); padding-left: 28px; list-style: disc; }
.form-summary a { color: var(--ink); text-underline-offset: 3px; }
.form-submit { width: 100%; white-space: normal; text-align: center; padding-block: 12px; min-height: 56px; }
.form-submit[disabled] { opacity: .7; cursor: progress; }
.form-help { font-size: var(--fs-small); color: var(--paper-soft); text-align: center; }
.form-status:empty { display: none; }
.form-status { padding: var(--s2); font-size: var(--fs-small); font-weight: 500; background: var(--paper); color: var(--ink); border-top: 3px solid var(--caramel); }
.form-status.is-error { border-top-color: var(--terra); }
.form-status.is-success { border-top-color: var(--olive); }

@media (max-width: 1023px) {
  .offer-grid { grid-template-columns: 1fr; }
  .offer-band { height: 30%; }
}
@media (max-width: 599px) {
  .offer-grid { padding-inline: 0; }
  .offer-benefits, .offer-box { padding: var(--s4) var(--gutter); }
}