/* ============================================================
   ABAKAR / MARKETING IMOBILIARIO
   Site institucional - Design do Site v03
   Paleta e tipografia conforme a tela 16 do PDF de design
   e o Brand Book 2026 v2.1 (cap. 04)
   ============================================================ */

/* ---------- 01 / TOKENS ---------- */
:root{
  /* Paleta da direcao final (tela 16 do PDF) */
  --verde:  #025629;   /* Institucional */
  --ink:    #081510;   /* Base escura */
  --signal: #B8F45A;   /* Acao */
  --ivory:  #F4F1E8;   /* Editorial */
  --paper:  #E8E9DE;   /* Ivory + 5% do verde: plano claro alternativo */
  /* Apoio, do Brand Book 04.5 */
  --forest: #01361F;
  --sage:   #AFC7B7;

  /* Superficies escuras */
  --dark-1: #0C1A14;
  --dark-2: #10231A;
  --ink-deep: #05110C;   /* fundo do bloco do manifesto */
  --panel:    #0F241A;   /* cards e painel do logotipo */
  --panel-bd: #284136;
  --mint:     #28F2A3;   /* acento dos rotulos dos cards */

  /* Texto sobre escuro */
  --on-dark:      var(--ivory);
  --on-dark-mid:  #B4C4B8;
  --on-dark-dim:  #7E9086;

  /* Texto sobre claro */
  --on-light:     #0E1A13;
  --on-light-mid: #55655B;
  --on-light-dim: #7C8A80;

  /* Linhas */
  --line-dark:   rgba(244,241,232,.12);
  --line-dark-s: rgba(244,241,232,.06);
  --line-light:  rgba(14,26,19,.14);
  --line-signal: rgba(184,244,90,.38);

  /* Tipografia (Brand Book 04.7) */
  --serif: "Noto Serif", "Times New Roman", Georgia, serif;
  --sans:  "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:  "Source Code Pro", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Escala fluida */
  --fs-hero:    clamp(2.9rem, 1.15rem + 5.9vw, 5.4rem);
  --fs-display: clamp(2.3rem, 1.15rem + 3.9vw, 3.9rem);
  --fs-title:   clamp(1.85rem, 1.2rem + 2.1vw, 2.6rem);
  --fs-body:    clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-data:    clamp(.6875rem, .655rem + .14vw, .75rem);

  /* Ritmo */
  --maxw: 1320px;
  --gutter: clamp(20px, 4.6vw, 56px);
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;
  --sec-y: clamp(68px, 8vw, 118px);
  --header-h: 96px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --radius: 2px;

  color-scheme: dark;
}

/* ---------- 02 / RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  overflow-x:hidden;
}
body{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
[hidden]{ display:none !important; }
::selection{ background:var(--signal); color:var(--ink); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 03 / LAYOUT ---------- */
.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
  position:relative; z-index:1;
}
.section{ padding-block:var(--sec-y); position:relative; }
.section--tight{ padding-block:clamp(52px,5.6vw,80px); }
.section--flush{ padding-block:0; }

.bg-dark{ background:var(--ink); color:var(--on-dark); }
.bg-light{ background:var(--ivory); color:var(--on-light); }
/* Duas secoes claras seguidas: a segunda usa o tom de papel mais fundo. */
.bg-light--paper{ background:var(--paper); }
.bg-verde{ background:var(--verde); color:var(--ivory); }
.bg-forest{ background:var(--forest); color:var(--ivory); }

/* Grade tecnica sutil, so nas secoes escuras */
.gridfield{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, var(--line-dark-s) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-dark-s) 1px, transparent 1px);
  background-size:96px 96px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--ink); padding:12px 20px;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:var(--gutter); top:12px; }

/* ---------- 04 / TIPOGRAFIA ---------- */
.hero-title{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-hero);
  line-height:1.02; letter-spacing:-.028em; text-wrap:balance;
}
.display{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-display);
  line-height:1.1; letter-spacing:-.022em; text-wrap:balance;
}
.title{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-title);
  line-height:1.16; letter-spacing:-.016em; text-wrap:balance;
}
.lede{ font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); line-height:1.62; max-width:62ch; }
.bg-dark .lede{ color:var(--on-dark-mid); }
.bg-light .lede{ color:var(--on-light-mid); }

.eyebrow{
  font-family:var(--mono); font-weight:600; font-size:var(--fs-data);
  letter-spacing:.15em; text-transform:uppercase; display:block;
}
.bg-dark .eyebrow{ color:var(--signal); }
.bg-light .eyebrow{ color:var(--verde); }
.eyebrow.eyebrow--signal{ color:var(--signal); }

.num{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
.idx{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.1em; font-variant-numeric:tabular-nums;
}
.bg-dark .idx{ color:var(--signal); }
.bg-light .idx{ color:var(--verde); }

.sec-head{ display:grid; gap:var(--s3); margin-bottom:var(--s6); }
.sec-head .lede{ margin-top:calc(var(--s1) * -1); }

.footnote{ font-size:.75rem; line-height:1.5; margin-top:var(--s4); }
.bg-dark .footnote{ color:var(--on-dark-dim); }
.bg-light .footnote{ color:var(--on-light-dim); }

/* ---------- 05 / BOTOES ---------- */
.btn{
  --bg:transparent; --fg:var(--ivory); --bd:currentColor;
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:var(--s5); min-height:56px; padding:0 22px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  border-radius:var(--radius); cursor:pointer; text-align:left;
  font-weight:700; font-size:.9375rem;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .18s var(--ease);
}
.btn__ico{ flex:none; transition:transform .3s var(--ease); }
.btn:hover .btn__ico{ transform:translate(3px,-3px); }
.btn:active{ transform:translateY(1px); }
.btn--primary{ --bg:var(--signal); --fg:var(--ink); --bd:var(--signal); }
.btn--primary:hover{ --bg:#C9F97D; --bd:#C9F97D; }
.btn--verde{ --bg:var(--verde); --fg:var(--ivory); --bd:var(--verde); }
.btn--verde:hover{ --bg:#036B33; --bd:#036B33; }
.btn--ghost{ --bd:rgba(244,241,232,.4); }
.btn--bare{ --bd:transparent; padding-inline:0; }
.btn--bare:hover{ --fg:var(--signal); }
.btn--ghost:hover{ --bd:var(--signal); --fg:var(--signal); }
.btn--sm{ min-height:46px; padding:0 18px; gap:var(--s3); font-size:.875rem; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.tlink{
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:var(--s3); font-weight:700; font-size:.9375rem;
  padding-bottom:10px; border-bottom:1px solid;
  transition:gap .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.tlink .btn__ico{ transition:transform .3s var(--ease); }
.tlink:hover .btn__ico{ transform:translate(3px,-3px); }
.bg-dark .tlink{ color:var(--ivory); border-color:var(--line-dark); }
.bg-dark .tlink:hover{ color:var(--signal); border-color:var(--signal); }
.bg-light .tlink{ color:var(--on-light); border-color:var(--line-light); }
.bg-light .tlink:hover{ color:var(--verde); border-color:var(--verde); }

/* ---------- 06 / HEADER ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--ink); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.header.is-stuck{ border-bottom-color:var(--line-dark); }
.header__bar{ display:flex; align-items:center; gap:var(--s4); min-height:var(--header-h); }
.brand{ flex:none; display:flex; align-items:center; }
.brand__logo{ height:64px; width:auto; }

.nav{ display:none; margin-inline:auto; align-items:center; gap:clamp(24px,3.4vw,56px); }
.nav a{
  position:relative; padding-block:8px; font-size:.9375rem;
  color:var(--on-dark); transition:color .26s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--signal); transform:scaleX(0);
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--signal); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--signal); font-weight:700; }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.header__cta{ display:none; flex:none; }
.burger{
  margin-left:auto; width:48px; height:48px; flex:none;
  display:grid; place-content:center; gap:6px;
  background:transparent; border:1px solid var(--line-dark);
  border-radius:var(--radius); cursor:pointer;
}
.burger span{
  display:block; width:20px; height:1.5px; background:var(--ivory);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  padding:calc(var(--header-h) + 28px) var(--gutter) var(--s6);
  display:grid; align-content:start; gap:var(--s1);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y:auto;
}
.menu.is-open{ opacity:1; visibility:visible; transform:none; }
.menu a{
  font-family:var(--serif); font-size:clamp(1.7rem,7vw,2.2rem); line-height:1.2;
  padding-block:var(--s3); border-bottom:1px solid var(--line-dark);
}
.menu a[aria-current="page"]{ color:var(--signal); }
.menu .btn{ margin-top:var(--s4); }

/* ---------- 07 / HERO ---------- */
.hero{
  position:relative; min-height:min(94vh, 880px);
  display:flex; padding-top:var(--header-h);
  background:var(--ink); overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,21,16,.96) 0%, rgba(8,21,16,.88) 24%, rgba(8,21,16,.45) 56%, rgba(8,21,16,.3) 100%),
    linear-gradient(to bottom, rgba(8,21,16,.55) 0%, transparent 22%, transparent 58%, rgba(8,21,16,.8) 100%);
}
.hero__inner{
  position:relative; z-index:1; width:100%;
  display:grid; align-content:center; gap:var(--s5);
  padding-block:clamp(44px,5.5vw,72px);
}
.hero__copy{ display:grid; gap:var(--s3); }
.hero__copy .hero-title{ max-width:11ch; }
.hero__copy .lede{ max-width:44ch; color:var(--on-dark); }
.hero__claim{
  font-size:clamp(1.2rem,1rem + 1vw,1.55rem);
  line-height:1.3; color:var(--signal);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }
.hero__actions .btn{ flex:1 1 260px; }
.hero__foot{
  display:grid; gap:var(--s3);
  padding-top:var(--s4); border-top:1px solid var(--line-dark);
}
.hero__count{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.hero__count b{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(2rem,1.3rem + 2.2vw,2.75rem);
  line-height:1; letter-spacing:-.03em; color:var(--signal);
}
.hero__count span{ color:var(--on-dark-mid); font-size:.9375rem; }
.hero__pillars{
  font-family:var(--mono); font-weight:600; font-size:var(--fs-data);
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-dim);
}

.opbox{
  background:rgba(3,38,23,.86);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line-signal); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,26px); display:grid; gap:var(--s3);
}
.opbox__grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s4); }
.opbox__item{
  display:flex; align-items:baseline; gap:var(--s2);
  padding:12px 0; border-bottom:1px solid var(--line-dark); font-size:.9375rem;
}
.opbox__grid .opbox__item:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }

/* ---------- 07b / ROTAS (proximo passo) ---------- */
.rotas{ display:grid; gap:var(--s4); }

.rota{
  display:grid; align-content:start;
  padding:clamp(26px,3vw,36px);
  border-radius:var(--radius);
  background:var(--forest); color:var(--ivory);
}
.rota--lancamentos{ background:var(--ink); }

.rota__tag{
  display:flex; align-items:baseline; gap:14px;
  font-weight:700; font-size:clamp(.9375rem,1.1vw,1.0625rem);
  letter-spacing:.01em; text-transform:uppercase;
}
.rota__num{
  font-family:var(--mono); font-weight:600; color:var(--signal);
  font-variant-numeric:tabular-nums;
}

.rota__meta{
  margin-top:12px;
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sage);
}

.rota__titulo{
  margin-top:var(--s3);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.16;
  letter-spacing:-.018em;
}

.rota__desc{
  margin-top:var(--s2);
  font-size:clamp(1rem,.97rem + .2vw,1.0625rem); line-height:1.6;
  color:var(--on-dark-mid);
}

/* Trilha de etapas: tres colunas iguais, um marcador no inicio de cada uma.
   A ultima linha vai so ate a metade — o percurso continua. */
.rota__trilha{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin:clamp(26px,3.2vw,38px) 0 0; padding:0; list-style:none;
}
.rota__trilha li{
  position:relative; padding-top:22px;
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sage);
}
.rota__trilha li::before{     /* a linha da etapa */
  content:''; position:absolute; left:12px; right:0; top:3px;
  height:2px; background:var(--panel-bd);
}
.rota__trilha li:last-child::before{ right:50%; }
.rota__trilha li::after{      /* o quadradinho */
  content:''; position:absolute; left:0; top:0;
  width:8px; height:8px; background:var(--signal);
}

.rota .btn{ margin-top:clamp(26px,3.2vw,38px); min-height:60px; }

@media (min-width:900px){
  .rotas{ grid-template-columns:repeat(2,1fr); }
  /* O botao encosta no fim do card mesmo quando os textos tem alturas
     diferentes: os dois cards terminam alinhados. */
  .rota{ grid-template-rows:auto auto auto auto auto 1fr; }
  .rota .btn{ align-self:end; }
}

@media (max-width:400px){
  .rota__trilha li{ font-size:.5625rem; letter-spacing:.06em; }
}

/* ---------- 08 / LISTA EDITORIAL NUMERADA ---------- */
.pointlist{ display:grid; }
.pointlist li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  padding-block:var(--s3); border-top:1px solid;
}
.pointlist li:last-child{ border-bottom:1px solid; }
.bg-light .pointlist li{ border-color:var(--line-light); }
.bg-dark .pointlist li{ border-color:var(--line-dark); }
.pointlist__body{ display:grid; gap:4px; }
.pointlist__title{ font-weight:700; font-size:1.0625rem; }
.pointlist__desc{ font-size:.9375rem; }
.bg-light .pointlist__desc{ color:var(--on-light-mid); }
.bg-dark .pointlist__desc{ color:var(--on-dark-mid); }

/* ---------- 09 / FOTO COM LEGENDA ---------- */
.photo{
  position:relative; border-radius:var(--radius); overflow:hidden;
  min-height:340px; display:flex; align-items:flex-end;
}
.photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(8,21,16,.94) 0%, rgba(8,21,16,.55) 36%, transparent 66%);
}
.photo__cap{
  position:relative; z-index:2; padding:clamp(20px,2.6vw,30px);
  display:grid; gap:var(--s2); color:var(--ivory);
}
.photo__cap .eyebrow{ color:var(--signal); }
.photo__cap p{
  font-family:var(--serif); font-size:clamp(1.15rem,1rem + .7vw,1.45rem); line-height:1.28;
}
.figure-note{ font-size:.75rem; margin-top:12px; }
.bg-light .figure-note{ color:var(--on-light-dim); }
.bg-dark .figure-note{ color:var(--on-dark-dim); }

/* ---------- 10 / TRES FRENTES ---------- */
.fronts{ display:grid; gap:var(--s2); }
.front{
  display:grid; align-content:start;
  background:var(--dark-1); border:1px solid var(--line-dark);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.front:hover{ border-color:var(--line-signal); transform:translateY(-3px); }
.front__media{ aspect-ratio:16/9; overflow:hidden; }
.front__media img{ width:100%; height:100%; object-fit:cover; }
.front__body{ display:grid; gap:var(--s2); padding:clamp(20px,2.4vw,28px); }
.front__head{ display:flex; align-items:baseline; gap:var(--s2); }
.front__head h3{ font-family:var(--serif); font-weight:400; font-size:1.4rem; letter-spacing:-.014em; }
.front__claim{ color:var(--signal); font-weight:700; font-size:.9375rem; }
.front__desc{ color:var(--on-dark-mid); font-size:.9375rem; line-height:1.58; }

/* Escopo (pagina Solucoes) */
.scope{ display:grid; gap:var(--s2); }
.scopecard{
  display:grid; gap:var(--s3); align-content:start;
  background:var(--dark-1); border:1px solid var(--line-dark);
  border-top:3px solid var(--signal); border-radius:var(--radius);
  padding:clamp(22px,2.6vw,30px);
}
.scopecard__head{ display:flex; align-items:baseline; gap:var(--s2); }
.scopecard__head h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; letter-spacing:-.014em; }
.scopecard__claim{ color:var(--signal); font-weight:700; font-size:.9375rem; }
.scopecard__list{ display:grid; gap:12px; }
.scopecard__list li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline;
  color:var(--on-dark-mid); font-size:.9375rem;
}
.scopecard__list li::before{
  content:""; width:10px; height:1px; background:var(--signal); transform:translateY(-4px);
}

/* ---------- 10b / FRENTES (home) ---------- */
.frentes{ display:grid; gap:clamp(20px,2.2vw,32px); }
.frentecard{
  display:grid; align-content:start; gap:var(--s3);
  min-height:clamp(232px,18.5vw,286px);
  padding:clamp(24px,2.8vw,32px);
  background:var(--dark-1);
  border:1px solid var(--line-dark);
  border-top:5px solid var(--signal);
  border-radius:var(--radius);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
/* border-color no hover pegaria os quatro lados: a faixa do topo e reposta. */
.frentecard:hover{
  border-color:var(--line-signal); border-top-color:var(--signal);
  transform:translateY(-3px);
}
.frentecard__head{ display:flex; align-items:baseline; gap:var(--s2); }
.frentecard__num{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.1em; color:var(--mint); font-variant-numeric:tabular-nums;
}
.frentecard__head h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.375rem,1.1rem + .8vw,1.625rem); letter-spacing:-.014em;
}
.frentecard__claim{ color:var(--signal); font-weight:700; font-size:.9375rem; }
.frentecard__desc{ color:var(--on-dark-mid); font-size:.9375rem; line-height:1.58; }

.frentes__nota{
  margin-top:clamp(30px,3.4vw,44px);
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mint);
}

@media (min-width:900px){
  .frentes{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- 11 / METODO ---------- */
/* Padrao (telas estreitas): cada etapa e uma linha — selo ao lado do titulo,
   descricao recuada e um fio separando uma da outra, como no material. */
.steps{ display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:auto 1fr;
  column-gap:14px; row-gap:10px; align-items:center;
  padding-block:var(--s3);
  border-bottom:1px solid var(--line-light);
}
.bg-dark .step{ border-bottom-color:var(--line-dark); }
.step__rule{ display:flex; align-items:center; grid-column:1; grid-row:1; }
.step h3{ grid-column:2; grid-row:1; }
.step__desc{ grid-column:2; grid-row:2; }
.step__line{ display:none; }
.step__n{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.1em; color:var(--ivory);
  background:var(--verde); padding:7px 12px; flex:none;
}
.step__line{ height:1px; background:var(--verde); flex:1; }
.bg-dark .step__n{ background:var(--signal); color:var(--ink); }
.bg-dark .step__line{ background:rgba(244,241,232,.22); }

@media (min-width:900px){
  .step{
    grid-template-columns:1fr; row-gap:var(--s2);
    align-items:start; align-content:start;   /* sem isto, a etapa de texto
       mais curto ganha a folga e desalinha do resto da fileira */
    padding-block:0; border-bottom:0;
  }
  .step__rule, .step h3, .step__desc{ grid-column:1; grid-row:auto; }
  .step__line{ display:block; }
  .steps.steps--5{ grid-template-columns:repeat(5,1fr); gap:var(--s2); }
}
.step h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem); letter-spacing:-.016em;
}
.step__desc{ font-size:.9375rem; line-height:1.6; }
.bg-light .step__desc{ color:var(--on-light-mid); }
.bg-dark .step__desc{ color:var(--on-dark-mid); }

.callout{
  display:grid; gap:var(--s2); align-items:center;
  background:var(--verde); color:var(--ivory);
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.8vw,34px);
  border-radius:var(--radius); margin-top:var(--s6);
}
.callout b{ font-size:1.0625rem; }
.callout span{ color:rgba(244,241,232,.86); font-size:.9375rem; }

/* ---------- 11b / SOLUCOES ---------- */

/* Chamada + observacao, lado a lado no desktop. */
.acao{ display:grid; gap:var(--s3); align-items:center; margin-top:clamp(36px,4.4vw,60px); }
.acao .btn{ min-width:min(100%,360px); }
.acao__nota{ font-size:.9375rem; line-height:1.6; }
.bg-light .acao__nota{ color:var(--on-light-mid); }
.bg-dark .acao__nota{ color:var(--on-dark-mid); }

/* "Como o projeto comeca": numero solto no desktop, selo no mobile. */
.pontos{ display:grid; gap:0; }
.ponto{
  display:grid; grid-template-columns:auto 1fr;
  column-gap:14px; row-gap:10px; align-items:center;
  padding-block:var(--s3); border-bottom:1px solid var(--line-light);
}
.ponto__n{
  grid-column:1; grid-row:1; align-self:center;
  font-family:var(--mono); font-weight:600; font-size:.6875rem; letter-spacing:.1em;
  background:var(--verde); color:var(--ivory); padding:7px 12px;
}
.ponto h3{
  grid-column:2; grid-row:1;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem); letter-spacing:-.016em;
}
.ponto__desc{ grid-column:2; grid-row:2; font-size:.9375rem; line-height:1.6; color:var(--on-light-mid); }

/* Painel verde que fecha a pagina. */
.fecho{
  display:grid; gap:var(--s3); align-items:center;
  background:var(--forest); color:var(--ivory);
  border-radius:var(--radius);
  padding:clamp(28px,3.4vw,46px);
  margin-top:clamp(44px,5vw,72px);
}
.fecho__titulo{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1.15rem + 1.3vw,2.05rem);
  line-height:1.18; letter-spacing:-.016em;
}
.fecho__texto{ color:rgba(244,241,232,.86); font-size:.9375rem; line-height:1.6; }

@media (min-width:900px){
  .acao{ grid-template-columns:auto 1fr; gap:var(--s5); }
  .pontos{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
  .ponto{
    grid-template-columns:1fr; row-gap:var(--s2);
    align-items:start; align-content:start;
    padding-block:0; border-bottom:0;
  }
  .ponto__n{
    grid-column:1; grid-row:auto; justify-self:start;
    background:none; color:var(--verde); padding:0;
    font-size:1rem; font-weight:700; letter-spacing:.02em;
  }
  .ponto h3, .ponto__desc{ grid-column:1; grid-row:auto; }
  /* a pergunta precisa de folga para caber nas duas linhas do material */
  .fecho{ grid-template-columns:1.15fr .85fr; gap:var(--s6); }
}

/* ---------- 12 / CONFIANCA ---------- */
.trust{ display:grid; gap:var(--s6); align-items:center; }
.trust__count{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(3.4rem,2rem + 5vw,5.5rem);
  line-height:.9; letter-spacing:-.04em; color:var(--verde);
}
.trust__unit{ font-weight:700; font-size:1.0625rem; margin-top:var(--s1); }
.logowall{
  border-left:2px solid var(--signal); border-right:2px solid var(--verde);
  background:#fff; padding:clamp(12px,1.6vw,20px);
}

/* ---------- 13 / CASE EM DESTAQUE ---------- */
.feature{ display:grid; align-items:stretch; }
.feature__copy{ display:grid; gap:var(--s3); align-content:center; padding-block:var(--sec-y); }
.feature__stats{ display:flex; flex-wrap:wrap; gap:var(--s6); margin-top:var(--s2); }
.stat__v{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(2.2rem,1.4rem + 2.6vw,3rem);
  line-height:1; letter-spacing:-.032em;
}
.bg-dark .stat__v{ color:var(--signal); }
.bg-light .stat__v{ color:var(--verde); }
.stat__l{ font-size:.9375rem; margin-top:6px; }
.bg-dark .stat__l{ color:var(--on-dark-mid); }
.bg-light .stat__l{ color:var(--on-light-mid); }
.feature__media{
  position:relative; min-height:380px; overflow:hidden;
  border-radius:var(--radius);
}
.feature__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- 14 / GRADE DE CASES ---------- */
.cases{ display:grid; gap:var(--s3); }
.case{ display:grid; gap:var(--s1); align-content:start; }
.case__media{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); background:var(--dark-1); }
.case__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.case:hover .case__media img{ transform:scale(1.04); }
.case__name{ font-weight:700; font-size:1.0625rem; margin-top:var(--s2); }
.case__result{ color:var(--signal); font-weight:700; font-size:.9375rem; }
.case__foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  margin-top:var(--s1); padding-top:12px; border-top:1px solid var(--line-dark);
  color:var(--on-dark-dim); font-size:.8125rem;
}
.case__foot .btn__ico{ color:var(--signal); transition:transform .3s var(--ease); }
.case:hover .btn__ico{ transform:translate(3px,-3px); }

/* ---------- 15 / MANIFESTO ---------- */
.manifesto{ display:grid; }
.manifesto__aside{
  background:var(--forest); color:var(--ivory);
  padding:var(--sec-y) var(--gutter);
  display:grid; gap:var(--s3); align-content:center;
}
.manifesto__aside .display{ max-width:12ch; }
.manifesto__aside p{ color:var(--sage); }
.manifesto__photo{ position:relative; min-height:300px; display:flex; align-items:flex-end; }
.manifesto__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.manifesto__photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(1,54,31,.92), rgba(1,54,31,.4));
}
.manifesto__text{ padding:var(--sec-y) var(--gutter); display:grid; gap:var(--s4); align-content:center; }
.manifesto__text p{ font-size:clamp(1.0625rem,1rem + .42vw,1.25rem); line-height:1.62; }
.bg-light .manifesto__text p{ color:var(--on-light); }
.bg-dark .manifesto__text p{ color:var(--on-dark-mid); }

.today{
  font-family:var(--serif); font-weight:400; color:var(--signal);
  font-size:clamp(3.2rem,1.6rem + 6vw,5.6rem);
  line-height:.98; letter-spacing:-.03em;
}

/* ---------- 16 / FORMULARIO ---------- */
.talk{ display:grid; align-items:stretch; }
.talk__aside{
  position:relative; display:grid; align-content:center; gap:var(--s4);
  padding:var(--sec-y) var(--gutter); background:var(--ink); overflow:hidden;
}
.talk__media{ position:absolute; inset:0; z-index:0; }
.talk__media img{ width:100%; height:100%; object-fit:cover; }
.talk__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(8,21,16,.96) 8%, rgba(8,21,16,.88) 55%, rgba(8,21,16,.74) 100%);
}
.talk__aside > :not(.talk__media){ position:relative; z-index:1; }
.talk__form{
  background:var(--ivory); color:var(--on-light);
  padding:var(--sec-y) var(--gutter);
  display:grid; align-content:center; gap:var(--s2);
}

.form{ display:grid; gap:var(--s3); margin-top:var(--s2); }
.form__grid{ display:grid; gap:var(--s3); }
.field{ display:grid; gap:8px; }
.field > label{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde);
}
.field input, .field select, .field textarea{
  width:100%; padding:15px 16px; background:#fff;
  border:1px solid rgba(14,26,19,.18); border-radius:var(--radius);
  color:var(--on-light); font-size:1rem; font-family:var(--sans);
  transition:border-color .26s var(--ease), box-shadow .26s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:104px; line-height:1.55; }
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230E1A13' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:42px; cursor:pointer;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--on-light-dim); opacity:1; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(2,86,41,.12);
}
.field__err{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:#A8442B;
}
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#A8442B; }

.form__status{
  font-size:.875rem; line-height:1.55; padding:14px 16px;
  border-radius:var(--radius); border:1px solid var(--line-light); color:var(--on-light-mid);
}
.form__status--ok{ color:#0B5A2E; border-color:rgba(2,86,41,.4); background:rgba(2,86,41,.07); }
.form__status--err{ color:#8E3A24; border-color:rgba(168,68,43,.4); background:rgba(168,68,43,.06); }
.hpot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 17 / CTA FINAL ---------- */
.finale{ position:relative; overflow:hidden; background:var(--forest); }
.finale__grid{ display:grid; align-items:stretch; }
.finale__copy{ display:grid; gap:var(--s3); align-content:center; padding-block:var(--sec-y); }
.finale__grid{ gap:var(--s5); }
.finale__media{
  position:relative; min-height:280px; overflow:hidden;
  border-radius:var(--radius);
}
.finale__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- 18 / RODAPE ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--line-dark); padding-block:var(--s7) var(--s5); }
.footer__top{ display:grid; gap:var(--s6); }
.footer__brand{ display:grid; gap:var(--s3); align-content:start; }
.footer__logo{ height:68px; width:auto; }
.footer__brand p{ color:var(--on-dark-mid); font-size:.9375rem; line-height:1.55; }
.footer__nav{ display:grid; gap:var(--s5); }
.fcol{ display:grid; gap:12px; align-content:start; }
.fcol h3{
  font-family:var(--mono); font-weight:600; font-size:var(--fs-data);
  letter-spacing:.15em; text-transform:uppercase; color:var(--signal); margin-bottom:4px;
}
.fcol a{ color:var(--on-dark-mid); font-size:.9375rem; transition:color .26s var(--ease); }
.fcol a:hover{ color:var(--signal); }
.footer__bottom{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
  align-items:center; justify-content:space-between;
  color:var(--on-dark-dim); font-size:.8125rem;
}
.footer__bottom a:hover{ color:var(--signal); }

.totop{
  position:fixed; right:clamp(16px,3vw,26px); bottom:clamp(16px,3vw,26px); z-index:80;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--signal); color:var(--ink); border:0; border-radius:var(--radius);
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.totop.is-visible{ opacity:1; visibility:visible; transform:none; }

/* ---------- 19 / REVELACAO ---------- */
.js .reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ---------- 20 / RESPONSIVO ---------- */
@media (min-width:640px){
  .fronts{ grid-template-columns:repeat(2,1fr); }
  .cases{ grid-template-columns:repeat(2,1fr); }
  .form__grid{ grid-template-columns:1fr 1fr; }
  .field--full{ grid-column:1 / -1; }
  .callout{ grid-template-columns:auto 1fr; gap:var(--s5); }
  .footer__nav{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
  .scope{ grid-template-columns:repeat(3,1fr); }
  .fronts{ grid-template-columns:repeat(3,1fr); }
  .trust{ grid-template-columns:minmax(260px,.8fr) 1.2fr; gap:var(--s7); }
  .feature{ grid-template-columns:1fr 1fr; }
  .feature__copy{ padding-right:var(--s6); }
  .manifesto{ grid-template-columns:minmax(300px,.82fr) 1.18fr; }
  .manifesto__aside, .manifesto__text{ padding-inline:clamp(24px,3.4vw,56px); }
  .talk{ grid-template-columns:1fr 1.05fr; }
  .talk__aside, .talk__form{ padding-inline:clamp(24px,3.6vw,60px); }
  .finale__grid{ grid-template-columns:1.1fr .9fr; gap:var(--s6); align-items:stretch; }
  .split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:center; }
  .split--wide-left{ grid-template-columns:1.05fr .95fr; }
  .hero__top{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:end; }
  .hero__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); }
  .hero__actions .btn{ flex:0 1 auto; min-width:250px; }
}
@media (min-width:1080px){
  .nav{ display:flex; }
  .header__cta{ display:inline-flex; }
  .burger{ display:none; }
  .cases{ grid-template-columns:repeat(5,1fr); gap:var(--s2); }
  .case__name{ font-size:1rem; }
}

/* ---------- 21 / MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .marquee.is-rolling .marquee__track{ animation:none; }
}

/* ---------- 22 / IMPRESSAO ---------- */
@media print{
  .header,.menu,.totop,.gridfield{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:24px; break-inside:avoid; }
}

/* Enquadramento: foca o edificio e evita a tarja de ficha tecnica da peca */
.pos-esq{ object-position:22% center !important; }


/* ============================================================
   QUEM SOMOS / MANIFESTO
   Conforme o PDF "Abakar-Quem-Somos-Manifesto-Desktop-Mobile"
   ============================================================ */

.bg-ink-deep{ background:var(--ink-deep); color:var(--on-dark); }

/* ---------- Bloco 1: historia ---------- */
.sobre{ display:grid; gap:var(--s4); align-items:start; }
.sobre__cab{ display:grid; gap:var(--s3); }
.sobre__titulo{
  color:#fff;
  font-size:clamp(1.95rem, 1.1rem + 2.4vw, 2.8rem);
  line-height:1.14; letter-spacing:-.02em;
}
.sobre__texto{ display:grid; gap:var(--s3); }
.sobre__texto p{ color:var(--ivory); font-size:1.0625rem; line-height:1.66; max-width:64ch; }

/* Painel com o logotipo oficial */
.logopanel{
  background:var(--panel); border:1px solid var(--panel-bd);
  border-radius:4px; display:grid; place-items:center;
  padding:clamp(28px,5vw,64px); min-height:280px;
}
.logopanel img{ width:min(100%,420px); height:auto; }

/* Cards de numero */
.statcards{ display:grid; gap:var(--s2); }
.statcard{
  background:var(--panel); border:1px solid var(--panel-bd);
  border-radius:4px; padding:clamp(20px,2.6vw,28px);
  display:grid; gap:12px; align-content:start;
}
.statcard__rotulo{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mint);
}
.statcard__valor{
  font-family:var(--serif); font-weight:400; color:var(--signal);
  font-size:clamp(1.55rem,1.1rem + 1.25vw,1.95rem);
  line-height:1.1; letter-spacing:-.018em;
}
.statcard__nota{ color:var(--sage); font-size:.9375rem; line-height:1.4; }

/* Faixa com foto (somente no mobile, como no PDF) */
.faixa{
  position:relative; overflow:hidden; border-radius:4px;
  min-height:210px; display:flex; align-items:center;
}
.faixa img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.faixa::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(5,17,12,.34), rgba(5,17,12,.5)),
    rgba(1,54,31,.72);
}
.faixa p{
  position:relative; z-index:2; padding:clamp(20px,5vw,28px);
  font-family:var(--serif); color:#fff;
  font-size:clamp(1.25rem,1rem + 1.4vw,1.6rem); line-height:1.3;
}

/* ---------- Bloco 2: manifesto ---------- */
.manif{ display:grid; gap:var(--s5); align-items:start; }
.manif__lado{ display:grid; gap:var(--s4); align-content:start; }
.manif__hoje{
  font-family:var(--serif); font-weight:400; color:var(--signal);
  font-size:clamp(3.4rem,1.7rem + 6.4vw,5.9rem);
  line-height:.97; letter-spacing:-.032em;
}
.manif__energia{
  padding-top:var(--s4); border-top:1px solid var(--line-dark);
  color:var(--ivory); font-size:1.0625rem; line-height:1.5;
}
.manif__texto{ display:grid; gap:var(--s3); }
.manif__texto p{ color:var(--ivory); font-size:1.0625rem; line-height:1.66; }
.manif__texto p:first-child{ color:#fff; font-weight:700; }
.manif__texto p.manif__fecho{
  font-family:var(--serif); color:var(--signal);
  font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem); line-height:1.3;
  margin-top:var(--s2);
}

@media (min-width:900px){
  .sobre{
    grid-template-columns:1.2fr .8fr;
    grid-template-rows:auto auto 1fr;
    column-gap:var(--s6); row-gap:var(--s5);
  }
  .sobre__cab   { grid-column:1; grid-row:1; }
  .sobre__texto { grid-column:1; grid-row:2; }
  .statcards    { grid-column:1; grid-row:3; align-self:end; grid-template-columns:1fr 1fr; gap:var(--s3); }
  /* O painel ocupa a coluna da direita inteira, como no PDF desktop */
  .sobre__painel{ grid-column:2; grid-row:1 / -1; align-self:stretch; display:grid; }
  .logopanel{ min-height:100%; }
  /* A faixa com foto existe apenas na versao mobile do design */
  .faixa{ display:none; }

  .manif{ grid-template-columns:.42fr .58fr; gap:0; }
  .manif__lado{ padding-right:var(--s7); }
  .manif__texto{
    padding-left:clamp(32px,4.4vw,64px);
    border-left:1px solid var(--line-dark);
  }
}


/* ============================================================
   HOME v04 — diagrama do caminho rompido e mural de clientes
   ============================================================ */

/* ---------- Painel do diagrama ---------- */
.rompido{
  background:var(--ink); border-radius:12px;
  padding:clamp(22px,3vw,34px);
  display:grid; gap:var(--s3); align-content:start;
}
.rompido__titulo{
  font-family:var(--serif); font-weight:400; color:var(--ivory);
  font-size:clamp(1.5rem,1.2rem + 1.1vw,1.95rem);
  line-height:1.18; letter-spacing:-.016em; text-align:center;
}
.rompido__svg{ width:100%; height:auto; display:block; }
.rompido__arco-vivo{ stroke:var(--signal); }
.rompido__arco-morto{ stroke:var(--panel-bd); }
.rompido__no{ fill:var(--signal); }
.rompido__no-alerta{ fill:var(--ivory); }
.rompido__no-txt{
  font-family:var(--mono); font-weight:600; font-size:11px;
  fill:var(--ink); text-anchor:middle; dominant-baseline:central;
}
.rompido__rotulo{
  font-family:var(--mono); font-weight:600; font-size:10.5px;
  letter-spacing:.12em; fill:var(--ivory);
}
.rompido__x{ stroke:#fff; stroke-width:3.4; stroke-linecap:round; }
.rompido__fecho{ display:grid; gap:6px; text-align:center; }
.rompido__fecho b{ color:var(--signal); font-size:.9375rem; line-height:1.4; }
.rompido__fecho span{ color:var(--on-dark-mid); font-size:.875rem; }

/* ---------- Mural de clientes ---------- */
.clientes{
  background:var(--ink); border-radius:14px;
  padding:clamp(26px,3.4vw,44px) clamp(20px,3vw,40px);
  display:grid; gap:var(--s4);
}
.clientes__titulo{
  color:var(--ivory); text-align:center;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
}
/* Carrossel contínuo de logotipos.
   O JS duplica o grupo e liga a animação; sem JS vira uma faixa rolável. */
.marquee{ position:relative; overflow:hidden; }
.marquee:not(.is-rolling){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.marquee__track{ display:flex; width:max-content; }
.marquee__group{ display:flex; align-items:center; flex:none; }
.marquee__group img{
  flex:none; width:auto; height:auto;
  max-height:clamp(40px,5.2vw,62px); max-width:clamp(120px,17vw,190px);
  margin-inline:clamp(20px,3.2vw,46px);
}

.marquee.is-rolling{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee.is-rolling .marquee__track{
  animation:desliza var(--marquee-dur,70s) linear infinite;
}
/* Faixa do meio corre no sentido oposto: parte de -50% e volta a 0. */
.marquee--reverso.is-rolling .marquee__track{ animation-direction:reverse; }

/* As tres faixas empilhadas */
.clientes__faixas{ display:grid; gap:clamp(26px,3.6vw,52px); }
.marquee.is-rolling:hover .marquee__track,
.marquee.is-rolling:focus-within .marquee__track{ animation-play-state:paused; }
@keyframes desliza{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.clientes__rodape{
  padding-top:var(--s3); border-top:1px solid var(--line-dark);
  font-family:var(--mono); font-weight:600; font-size:var(--fs-data);
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-dim);
  text-align:center;
}

/* ---------- Confianca (bloco superior) ---------- */
.confianca{ display:grid; gap:var(--s5); align-items:start; }
.confianca__num{
  font-family:var(--sans); font-weight:700; color:var(--verde);
  font-size:clamp(3rem,1.9rem + 4.4vw,4.6rem);
  line-height:.95; letter-spacing:-.035em;
}
.confianca__unidade{ font-weight:700; font-size:1.0625rem; margin-top:var(--s1); }

/* ---------- Numero do hero ---------- */
.hero__vgv{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.hero__vgv b{
  font-weight:700; color:var(--signal);
  font-size:clamp(1.6rem,1.15rem + 1.5vw,2.1rem);
  line-height:1.1; letter-spacing:-.02em;
}
.hero__vgv span{ color:var(--on-dark-mid); font-size:.9375rem; }


@media (min-width:900px){
  .confianca{ grid-template-columns:1.15fr .85fr; gap:var(--s7); }
  .rompido{ padding:clamp(26px,2.8vw,38px); }
}


/* ============================================================
   PAGINA DE CASES
   Conforme "Abakar-Cases-Desktop" e "Abakar-Cases-Mobile"
   ============================================================ */

.caso{ display:grid; gap:var(--s5); align-items:center; }
.caso__copy{ display:grid; gap:var(--s3); align-content:center; }
.caso__nome{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem,1.3rem + 3vw,3.5rem);
  line-height:1.06; letter-spacing:-.024em;
}
.bg-dark .caso__nome{ color:var(--ivory); }
.bg-light .caso__nome{ color:var(--on-light); }
.caso__tag{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.15em; text-transform:uppercase;
  margin-top:calc(var(--s2) * -1);
}
.bg-dark .caso__tag{ color:var(--signal); }
.bg-light .caso__tag{ color:var(--verde); }
.caso__desc{ font-size:1.0625rem; line-height:1.62; max-width:46ch; }
.bg-dark .caso__desc{ color:var(--on-dark-mid); }
.bg-light .caso__desc{ color:var(--on-light-mid); }

/* Numeros lado a lado (cases 01 e 02) */
.caso__numeros{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s2); }
.caso__num{ display:grid; gap:4px; padding-top:var(--s3); border-top:1px solid; }
.bg-dark .caso__num{ border-color:var(--line-dark); }
.bg-light .caso__num{ border-color:var(--line-light); }
.caso__num b{
  font-weight:700; font-size:clamp(1.6rem,1rem + 2.1vw,2.4rem);
  line-height:1; letter-spacing:-.03em;
}
.bg-dark .caso__num b{ color:var(--signal); }
.bg-light .caso__num b{ color:var(--verde); }
.caso__num span{ font-size:.875rem; line-height:1.35; }
.bg-dark .caso__num span{ color:var(--on-dark-mid); }
.bg-light .caso__num span{ color:var(--on-light-mid); }

/* Numero unico em destaque (cases 03 e 05) */
.caso__destaque{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding-top:var(--s4); border-top:1px solid var(--line-dark);
  margin-top:var(--s2);
}
.caso__destaque b{
  font-weight:700; color:var(--signal);
  font-size:clamp(3rem,1.8rem + 4.6vw,4.9rem);
  line-height:.92; letter-spacing:-.04em;
}
.caso__destaque span{ font-weight:700; font-size:1.0625rem; line-height:1.35; color:var(--ivory); }

/* Numero em bloco verde (case 04) */
.caso__bloco{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  background:var(--forest); color:var(--ivory); border-radius:var(--radius);
  padding:clamp(22px,3vw,36px) clamp(22px,3vw,40px); margin-top:var(--s2);
}
.caso__bloco b{
  font-weight:700; color:var(--signal);
  font-size:clamp(3rem,1.8rem + 4.6vw,4.9rem);
  line-height:.92; letter-spacing:-.04em;
}
.caso__bloco span{ font-weight:700; font-size:1.0625rem; line-height:1.35; }

/* Botao e nota empilhados; so o case 04 traz os dois lado a lado. */
.caso__acao{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); margin-top:var(--s2); }
.caso__acao .btn{ min-width:270px; flex:none; }
.caso--espelhado .caso__acao{ flex-direction:row; align-items:center; gap:var(--s5); flex-wrap:wrap; }
.caso__nota{ font-size:.75rem; line-height:1.5; max-width:44ch; }
.bg-dark .caso__nota{ color:var(--on-dark-dim); }
.bg-light .caso__nota{ color:var(--on-light-dim); }

/* ---------- Midia ---------- */
.caso__midia{ display:grid; gap:var(--s2); }

/* Moldura fina usada nos cases 01, 04 e 05 */
.moldura{
  border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:clamp(10px,1.2vw,16px); position:relative;
}
.bg-light .moldura{ border-color:rgba(1,54,31,.28); }

/* Legenda em faixa sobre a foto */
.faixa-legenda{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:rgba(1,54,31,.86); color:var(--ivory);
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.15em; text-transform:uppercase;
  padding:10px clamp(12px,1.6vw,18px); text-align:center;
}
.faixa-tags{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(to top, rgba(8,21,16,.85), transparent);
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ivory);
  padding:26px clamp(12px,1.6vw,18px) 12px; text-align:center;
}

/* Case 01: vídeo + peça de campanha lado a lado */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); align-items:start; }
.videocard{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--dark-1); }
.videocard img, .videocard video{ width:100%; height:auto; display:block; aspect-ratio:9/16; object-fit:cover; }
.videocard__marca{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal);
}
.videocard__play{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer; padding:0;
}
.videocard__play svg{ width:clamp(48px,7vw,66px); height:auto; transition:transform .3s var(--ease); }
.videocard__play:hover svg{ transform:scale(1.08); }
.videocard__legenda{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mid);
  padding-top:12px; text-align:center;
}
.pecacard{ display:grid; gap:12px; }
.pecacard img{ width:100%; height:auto; border-radius:var(--radius); }
.pecacard__rot{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--signal);
}
.pecacard p{ font-size:.9375rem; }
.bg-dark .pecacard p{ color:var(--on-dark-mid); }
.bg-light .pecacard p{ color:var(--on-light-mid); }

/* Case 02: foto grande com peça sobreposta */
.sobreposto{ position:relative; }
.sobreposto__base{ position:relative; border-radius:var(--radius); overflow:hidden; }
.sobreposto__base img{ width:100%; height:auto; display:block; }
.sobreposto__peca{
  position:absolute; right:-4%; top:16%; width:34%; z-index:3;
  background:#fff; padding:8px; border-radius:2px;
  box-shadow:0 18px 40px rgba(8,21,16,.28);
}
.sobreposto__peca img{ width:100%; height:auto; display:block; }

/* Case 03: foto ocupando a coluna inteira */
.fotoplena{ position:relative; border-radius:var(--radius); overflow:hidden; }
.fotoplena img{ width:100%; height:auto; display:block; }

/* Case 04: peça emoldurada com aba numerada */
.emoldurado{ position:relative; background:var(--forest); padding:clamp(14px,1.8vw,22px); border-radius:var(--radius); }
.emoldurado__aba{
  position:absolute; top:0; left:0; z-index:3;
  background:var(--signal); color:var(--ink);
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.15em; text-transform:uppercase;
  padding:9px 18px;
}
.emoldurado__papel{ background:#fff; padding:clamp(12px,1.8vw,26px); }
.emoldurado__papel img{ width:100%; height:auto; display:block; }
.emoldurado__legenda{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ivory);
  padding-top:12px;
}

/* Case 05: selo do empreendimento sobre a paisagem */
.paisagem{ position:relative; border-radius:var(--radius); overflow:hidden; }
.paisagem > img{ width:100%; height:auto; display:block; }
.paisagem__selo{
  position:absolute; top:7%; left:5%; width:36%; z-index:2;
  border:3px solid #fff; border-radius:2px; overflow:hidden;
  box-shadow:0 10px 30px rgba(8,21,16,.35);
}
.paisagem__selo img{ width:100%; height:auto; display:block; }

@media (min-width:900px){
  /* No desktop o texto e a acao ficam empilhados numa coluna e a midia
     ocupa a outra inteira. No mobile vale a ordem do HTML, que segue o
     PDF: texto, midia e so depois o botao. */
  .caso{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    column-gap:var(--s7); row-gap:var(--s4);
  }
  /* Só os filhos diretos: o case 03 tem um .caso__acao aninhado dentro
     de .feature__copy, que não deve entrar nesse posicionamento. */
  .caso > .caso__copy { grid-column:1; grid-row:1; }
  .caso > .caso__acao { grid-column:1; grid-row:2; }
  .caso > .caso__midia{ grid-column:2; grid-row:1 / -1; }
  .caso--espelhado > .caso__midia{ grid-column:1; }
  .caso--espelhado > .caso__copy,
  .caso--espelhado > .caso__acao{ grid-column:2; }
}


/* ============================================================
   FORMULÁRIO DE QUALIFICAÇÃO
   Conforme "Design_Formulario_Qualificacao_Abakar"
   ============================================================ */

.qz{
  min-height:100vh; min-height:100svh;
  display:grid; grid-template-rows:auto 1fr;
  background:var(--ivory); color:var(--on-light);
}

/* ---------- Trilho lateral ---------- */
.qz__rail{
  position:relative; overflow:hidden;
  background:var(--verde); color:var(--ivory);
  padding:clamp(20px,4vw,40px);
  display:grid; place-content:center;
}
.qz__rail::after{
  content:""; position:absolute; right:-30%; top:-10%;
  width:120%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(244,241,232,.07);
  box-shadow:0 0 0 60px rgba(244,241,232,.04), 0 0 0 140px rgba(244,241,232,.03);
  pointer-events:none;
}
.qz__rail > *{ position:relative; z-index:1; }
.qz__logo{ height:56px; width:auto; }
/* ---------- Painel das perguntas ---------- */
.qz__painel{ position:relative; overflow:hidden; display:grid; }
.qz__painel::before{
  content:""; position:absolute; right:-12%; top:-16%;
  width:min(560px,60%); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(1,54,31,.07);
  box-shadow:0 0 0 46px rgba(1,54,31,.035), 0 0 0 110px rgba(1,54,31,.025);
  pointer-events:none;
}
.qz__palco{
  position:relative; z-index:1;
  padding:clamp(24px,4vw,40px) clamp(20px,4vw,52px) clamp(28px,4vw,48px);
  display:grid; align-content:center;
}
.qz__etapa{ display:grid; gap:var(--s3); max-width:820px; }
.js .qz__etapa{ display:none; }
.js .qz__etapa.is-ativa{ display:grid; animation:qzEntra .34s var(--ease) both; }
@keyframes qzEntra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.qz__rotulo{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--verde);
}
.qz__pergunta{
  font-family:var(--serif); font-weight:400; color:var(--on-light);
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.6rem);
  line-height:1.14; letter-spacing:-.02em; text-wrap:balance;
}
.qz__ajuda{ color:var(--on-light-mid); font-size:1rem; }

/* Ritmo interno da etapa: cada bloco recebe o próprio espaçamento,
   sem depender de gap nem de margem negativa. */
.qz__etapa__corpo{ display:grid; }
.qz__etapa__corpo > * + *{ margin-top:var(--s3); }
.qz__etapa__corpo .qz__pergunta{ margin-top:12px; }
.qz__etapa__corpo .qz__pergunta + .qz__ajuda{ margin-top:10px; }
.qz__etapa__corpo .qz__erro{ margin-top:10px; }

/* Campos */
.qz__campo{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid rgba(1,54,31,.16);
  border-radius:10px; padding:6px 18px 6px 6px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.qz__campo:focus-within{ border-color:var(--verde); box-shadow:0 0 0 3px rgba(2,86,41,.12); }
.qz__selo{
  flex:none; width:44px; height:44px; border-radius:8px;
  display:grid; place-items:center; background:rgba(2,86,41,.09);
  font-family:var(--mono); font-weight:600; font-size:.8125rem; color:var(--verde);
}
.qz__selo img{ width:22px; height:auto; border-radius:2px; }
.qz__ddi{
  font-weight:700; color:var(--on-light); padding-right:14px;
  border-right:1px solid rgba(1,54,31,.16);
}
.qz__campo input{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:1.0625rem; padding:14px 0; color:var(--on-light);
}
.qz__campo input::placeholder{ color:var(--on-light-dim); }

/* Opções de escolha única */
.qz__opcoes{ display:grid; gap:10px; }
.qz__opcao{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:#FFFEFA; border:1px solid rgba(1,54,31,.14);
  border-radius:10px; padding:16px 20px; cursor:pointer;
  font-size:1.0625rem; color:var(--on-light); line-height:1.4;
  transition:border-color .22s var(--ease), background .22s var(--ease),
             color .22s var(--ease), transform .16s var(--ease);
}
.qz__opcao:hover{ border-color:var(--verde); }
.qz__opcao:active{ transform:translateY(1px); }
.qz__letra{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:rgba(2,86,41,.09);
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  text-transform:uppercase; color:var(--verde);
  transition:background .22s var(--ease);
}
/* Opção com descrição (pergunta-chave que define o caminho) */
.qz__opcao--rico{ align-items:flex-start; padding:18px 20px; }
.qz__opcao--rico .qz__letra{ margin-top:2px; }
.qz__opcao__txt{ display:grid; gap:5px; }
.qz__opcao__txt strong{ font-weight:700; line-height:1.35; }
.qz__opcao__txt small{ font-size:.875rem; line-height:1.45; color:var(--on-light-mid); }
.qz__opcao--rico[aria-pressed="true"] .qz__opcao__txt small{ color:var(--sage); }

.qz__opcao[aria-pressed="true"]{
  background:var(--forest); border-color:var(--forest); color:var(--ivory);
}
.qz__opcao[aria-pressed="true"] .qz__letra{
  background:var(--signal); color:transparent; position:relative;
}
.qz__opcao[aria-pressed="true"] .qz__letra::after{
  content:""; position:absolute; width:11px; height:6px;
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) translate(1px,-2px);
}

/* Barra de ação */
.qz__acao{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; margin-top:var(--s2);
}
.qz__voltar{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; cursor:pointer; padding:8px 0;
  color:var(--on-light-mid); font-size:1rem;
  transition:color .22s var(--ease);
}
.qz__voltar:hover{ color:var(--verde); }
.qz__avancar{ display:flex; align-items:center; gap:var(--s3); margin-left:auto; }
.qz__btn{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--forest); color:var(--ivory);
  border:1px solid var(--forest); border-radius:8px;
  padding:0 26px; min-height:56px; cursor:pointer;
  font-weight:700; font-size:1rem;
  transition:background .25s var(--ease), transform .16s var(--ease);
}
.qz__btn:hover{ background:#0A4A2A; }
.qz__btn:active{ transform:translateY(1px); }
.qz__btn[disabled]{ opacity:.45; cursor:not-allowed; }
.qz__btn--signal{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
.qz__btn--signal:hover{ background:#C9F97D; }

.qz__erro{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:#A8442B; min-height:1em;
}

/* Abertura */
.qz__abre{ display:grid; gap:var(--s3); max-width:640px; }
.qz__abre .qz__pergunta{ font-size:clamp(1.75rem,1.2rem + 2.3vw,3rem); }
/* Marca de conclusão */
.qz__check{
  width:64px; height:64px; border-radius:50%; background:var(--signal);
  display:grid; place-items:center; position:relative;
}
.qz__check::after{
  content:""; width:24px; height:13px;
  border-left:3px solid var(--ink); border-bottom:3px solid var(--ink);
  transform:rotate(-45deg) translate(2px,-4px);
}

/* Resumo da conversa */
.qz__resumo{
  display:grid; gap:var(--s3);
  padding-top:var(--s4); border-top:1px solid rgba(1,54,31,.14);
  border-bottom:1px solid rgba(1,54,31,.14); padding-bottom:var(--s4);
}
.qz__resumo__item{ display:grid; gap:4px; }
.qz__resumo__item b{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde);
}
.qz__resumo__item span{ font-size:1rem; }

/* Calendário */
.qz__agenda{
  display:grid; background:#FFFEFA;
  border:1px solid rgba(1,54,31,.14); border-radius:10px; overflow:hidden;
}
.qz__cal{ padding:clamp(16px,2.2vw,24px); display:grid; gap:var(--s3); }
.qz__cal__topo{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.qz__cal__mes{
  font-family:var(--mono); font-weight:600; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--verde);
}
.qz__cal__nav{ display:flex; gap:6px; }
.qz__cal__nav button{
  width:30px; height:30px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid rgba(1,54,31,.16);
  color:var(--on-light); display:grid; place-items:center; font-size:.8125rem;
}
.qz__cal__nav button:hover:not([disabled]){ border-color:var(--verde); color:var(--verde); }
.qz__cal__nav button[disabled]{ opacity:.35; cursor:not-allowed; }
.qz__cal__grade{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.qz__cal__dia-nome{
  font-family:var(--mono); font-size:.625rem; text-align:center;
  color:var(--on-light-dim); padding-bottom:6px; text-transform:uppercase;
}
.qz__dia{
  aspect-ratio:1; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:6px;
  font-size:.9375rem; color:var(--on-light);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.qz__dia:hover:not([disabled]){ border-color:var(--verde); }
.qz__dia[disabled]{ color:rgba(14,26,19,.28); cursor:not-allowed; }
.qz__dia.is-hoje{ border-color:rgba(1,54,31,.3); }
.qz__dia[aria-pressed="true"]{ background:var(--forest); color:var(--ivory); border-color:var(--forest); font-weight:700; }
.qz__horas{
  padding:clamp(16px,2.2vw,24px); display:grid; gap:10px; align-content:start;
  border-top:1px solid rgba(1,54,31,.12);
}
.qz__horas__dia{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-light-mid);
}
.qz__hora{
  padding:14px; border-radius:8px; cursor:pointer; text-align:center;
  background:#fff; border:1px solid rgba(1,54,31,.16);
  font-weight:700; color:var(--verde); font-size:1rem;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.qz__hora:hover{ border-color:var(--verde); }
.qz__hora[aria-pressed="true"]{ background:var(--forest); color:var(--ivory); border-color:var(--forest); }

/* Cartão de revisão */
.qz__cartao{ display:grid; border-radius:10px; overflow:hidden; }
.qz__cartao__quando{
  background:var(--forest); color:var(--ivory);
  padding:clamp(20px,2.6vw,30px); display:grid; gap:10px; align-content:center;
}
.qz__cartao__quando b{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
}
.qz__cartao__quando strong{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem); line-height:1.15;
}
.qz__cartao__quando span{ color:var(--sage); font-size:.9375rem; }
.qz__cartao__quem{
  background:#FFFEFA; padding:clamp(20px,2.6vw,30px);
  display:grid; gap:var(--s3); align-content:center;
}

/* Confirmação final */
.qz__final{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;
  background:var(--forest); color:var(--ivory);
  border-radius:10px; padding:clamp(20px,2.6vw,30px);
}
.qz__final strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,1rem + .9vw,1.6rem); line-height:1.2;
}
.qz__final span{ color:var(--sage); font-size:.9375rem; }
.qz__agenda-btn{
  background:var(--signal); color:var(--ink); border:0; border-radius:8px;
  padding:14px 20px; cursor:pointer; text-decoration:none;
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.qz__agenda-btn:hover{ background:#C9F97D; }

/* Sem JavaScript o formulário vira uma página única, com tudo visível */
.qz__semjs{
  background:rgba(2,86,41,.08); border:1px solid rgba(2,86,41,.2);
  border-radius:8px; padding:14px 18px; font-size:.9375rem; color:var(--on-light);
  margin-bottom:var(--s4);
}
.js .qz__semjs{ display:none; }

@media (min-width:900px){
  .qz{ grid-template-rows:1fr; grid-template-columns:minmax(280px,26%) 1fr; }
  .qz__rail{ padding:clamp(28px,2.6vw,44px); }
  .qz__logo{ height:96px; }
  .qz__agenda{ grid-template-columns:1.6fr 1fr; }
  .qz__horas{ border-top:0; border-left:1px solid rgba(1,54,31,.12); }
  .qz__cartao{ grid-template-columns:1.15fr 1fr; }
}
@media (max-width:899px){
  /* No mobile o trilho vira uma faixa fina no topo, só com a marca. */
  .qz__rail{ place-content:center start; padding:14px clamp(16px,4vw,24px); }
  .qz__logo{ height:38px; }
  .qz__palco{
  position:relative; z-index:1;
  padding:clamp(24px,4vw,40px) clamp(20px,4vw,52px) clamp(28px,4vw,48px);
  display:grid; align-content:center;
}
.qz__etapa{ display:grid; gap:var(--s3); max-width:820px; }
.js .qz__etapa{ display:none; }
.js .qz__etapa.is-ativa{ display:grid; animation:qzEntra .34s var(--ease) both; }
@keyframes qzEntra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.qz__rotulo{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--verde);
}
.qz__pergunta{
  font-family:var(--serif); font-weight:400; color:var(--on-light);
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.6rem);
  line-height:1.14; letter-spacing:-.02em; text-wrap:balance;
}
.qz__ajuda{ color:var(--on-light-mid); font-size:1rem; margin-top:-8px; }

/* Campos */
.qz__campo{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid rgba(1,54,31,.16);
  border-radius:10px; padding:6px 18px 6px 6px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.qz__campo:focus-within{ border-color:var(--verde); box-shadow:0 0 0 3px rgba(2,86,41,.12); }
.qz__selo{
  flex:none; width:44px; height:44px; border-radius:8px;
  display:grid; place-items:center; background:rgba(2,86,41,.09);
  font-family:var(--mono); font-weight:600; font-size:.8125rem; color:var(--verde);
}
.qz__selo img{ width:22px; height:auto; border-radius:2px; }
.qz__ddi{
  font-weight:700; color:var(--on-light); padding-right:14px;
  border-right:1px solid rgba(1,54,31,.16);
}
.qz__campo input{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:1.0625rem; padding:14px 0; color:var(--on-light);
}
.qz__campo input::placeholder{ color:var(--on-light-dim); }

/* Opções de escolha única */
.qz__opcoes{ display:grid; gap:10px; }
.qz__opcao{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:#FFFEFA; border:1px solid rgba(1,54,31,.14);
  border-radius:10px; padding:16px 20px; cursor:pointer;
  font-size:1.0625rem; color:var(--on-light); line-height:1.4;
  transition:border-color .22s var(--ease), background .22s var(--ease),
             color .22s var(--ease), transform .16s var(--ease);
}
.qz__opcao:hover{ border-color:var(--verde); }
.qz__opcao:active{ transform:translateY(1px); }
.qz__letra{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:rgba(2,86,41,.09);
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  text-transform:uppercase; color:var(--verde);
  transition:background .22s var(--ease);
}
.qz__opcao[aria-pressed="true"]{
  background:var(--forest); border-color:var(--forest); color:var(--ivory);
}
.qz__opcao[aria-pressed="true"] .qz__letra{
  background:var(--signal); color:transparent; position:relative;
}
.qz__opcao[aria-pressed="true"] .qz__letra::after{
  content:""; position:absolute; width:11px; height:6px;
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) translate(1px,-2px);
}

/* Barra de ação */
.qz__acao{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; margin-top:var(--s2);
}
.qz__voltar{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; cursor:pointer; padding:8px 0;
  color:var(--on-light-mid); font-size:1rem;
  transition:color .22s var(--ease);
}
.qz__voltar:hover{ color:var(--verde); }
.qz__avancar{ display:flex; align-items:center; gap:var(--s3); margin-left:auto; }
.qz__enter{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-light-dim);
}
.qz__btn{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--forest); color:var(--ivory);
  border:1px solid var(--forest); border-radius:8px;
  padding:0 26px; min-height:56px; cursor:pointer;
  font-weight:700; font-size:1rem;
  transition:background .25s var(--ease), transform .16s var(--ease);
}
.qz__btn:hover{ background:#0A4A2A; }
.qz__btn:active{ transform:translateY(1px); }
.qz__btn[disabled]{ opacity:.45; cursor:not-allowed; }
.qz__btn--signal{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
.qz__btn--signal:hover{ background:#C9F97D; }

.qz__erro{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:#A8442B; min-height:1em;
}

/* Abertura */
.qz__abre{ display:grid; gap:var(--s3); max-width:640px; }
.qz__abre .qz__pergunta{ font-size:clamp(1.75rem,1.2rem + 2.3vw,3rem); }
/* Marca de conclusão */
.qz__check{
  width:64px; height:64px; border-radius:50%; background:var(--signal);
  display:grid; place-items:center; position:relative;
}
.qz__check::after{
  content:""; width:24px; height:13px;
  border-left:3px solid var(--ink); border-bottom:3px solid var(--ink);
  transform:rotate(-45deg) translate(2px,-4px);
}

/* Resumo da conversa */
.qz__resumo{
  display:grid; gap:var(--s3);
  padding-top:var(--s4); border-top:1px solid rgba(1,54,31,.14);
  border-bottom:1px solid rgba(1,54,31,.14); padding-bottom:var(--s4);
}
.qz__resumo__item{ display:grid; gap:4px; }
.qz__resumo__item b{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde);
}
.qz__resumo__item span{ font-size:1rem; }

/* Calendário */
.qz__agenda{
  display:grid; background:#FFFEFA;
  border:1px solid rgba(1,54,31,.14); border-radius:10px; overflow:hidden;
}
.qz__cal{ padding:clamp(16px,2.2vw,24px); display:grid; gap:var(--s3); }
.qz__cal__topo{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.qz__cal__mes{
  font-family:var(--mono); font-weight:600; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--verde);
}
.qz__cal__nav{ display:flex; gap:6px; }
.qz__cal__nav button{
  width:30px; height:30px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid rgba(1,54,31,.16);
  color:var(--on-light); display:grid; place-items:center; font-size:.8125rem;
}
.qz__cal__nav button:hover:not([disabled]){ border-color:var(--verde); color:var(--verde); }
.qz__cal__nav button[disabled]{ opacity:.35; cursor:not-allowed; }
.qz__cal__grade{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.qz__cal__dia-nome{
  font-family:var(--mono); font-size:.625rem; text-align:center;
  color:var(--on-light-dim); padding-bottom:6px; text-transform:uppercase;
}
.qz__dia{
  aspect-ratio:1; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:6px;
  font-size:.9375rem; color:var(--on-light);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.qz__dia:hover:not([disabled]){ border-color:var(--verde); }
.qz__dia[disabled]{ color:rgba(14,26,19,.28); cursor:not-allowed; }
.qz__dia.is-hoje{ border-color:rgba(1,54,31,.3); }
.qz__dia[aria-pressed="true"]{ background:var(--forest); color:var(--ivory); border-color:var(--forest); font-weight:700; }
.qz__horas{
  padding:clamp(16px,2.2vw,24px); display:grid; gap:10px; align-content:start;
  border-top:1px solid rgba(1,54,31,.12);
}
.qz__horas__dia{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-light-mid);
}
.qz__hora{
  padding:14px; border-radius:8px; cursor:pointer; text-align:center;
  background:#fff; border:1px solid rgba(1,54,31,.16);
  font-weight:700; color:var(--verde); font-size:1rem;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.qz__hora:hover{ border-color:var(--verde); }
.qz__hora[aria-pressed="true"]{ background:var(--forest); color:var(--ivory); border-color:var(--forest); }

/* Cartão de revisão */
.qz__cartao{ display:grid; border-radius:10px; overflow:hidden; }
.qz__cartao__quando{
  background:var(--forest); color:var(--ivory);
  padding:clamp(20px,2.6vw,30px); display:grid; gap:10px; align-content:center;
}
.qz__cartao__quando b{
  font-family:var(--mono); font-weight:600; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
}
.qz__cartao__quando strong{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem); line-height:1.15;
}
.qz__cartao__quando span{ color:var(--sage); font-size:.9375rem; }
.qz__cartao__quem{
  background:#FFFEFA; padding:clamp(20px,2.6vw,30px);
  display:grid; gap:var(--s3); align-content:center;
}

/* Confirmação final */
.qz__final{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;
  background:var(--forest); color:var(--ivory);
  border-radius:10px; padding:clamp(20px,2.6vw,30px);
}
.qz__final strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,1rem + .9vw,1.6rem); line-height:1.2;
}
.qz__final span{ color:var(--sage); font-size:.9375rem; }
.qz__agenda-btn{
  background:var(--signal); color:var(--ink); border:0; border-radius:8px;
  padding:14px 20px; cursor:pointer; text-decoration:none;
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.qz__agenda-btn:hover{ background:#C9F97D; }

/* Sem JavaScript o formulário vira uma página única, com tudo visível */
.qz__semjs{
  background:rgba(2,86,41,.08); border:1px solid rgba(2,86,41,.2);
  border-radius:8px; padding:14px 18px; font-size:.9375rem; color:var(--on-light);
  margin-bottom:var(--s4);
}
.js .qz__semjs{ display:none; }

@media (min-width:900px){
  .qz{ grid-template-rows:1fr; grid-template-columns:minmax(280px,26%) 1fr; }
  .qz__rail{ padding:clamp(28px,2.6vw,44px); }
  .qz__logo{ height:96px; }
  .qz__agenda{ grid-template-columns:1.6fr 1fr; }
  .qz__horas{ border-top:0; border-left:1px solid rgba(1,54,31,.12); }
  .qz__cartao{ grid-template-columns:1.15fr 1fr; }
}
@media (max-width:899px){
  /* No mobile o trilho vira uma faixa fina no topo, só com a marca. */
  .qz__rail{ place-content:center start; padding:14px clamp(16px,4vw,24px); }
  .qz__logo{ height:38px; }
  .qz__btn{ width:100%; justify-content:center; }
  .qz__avancar{ width:100%; flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .qz__acao{ flex-direction:column-reverse; align-items:stretch; }
  .qz__voltar{ justify-content:center; }
}