/* ============================================================
   BENETTON EMPREENDIMENTOS — Design System v5.0
   Fonte de verdade: o site e a página do Primum no ar.
   Base escura. Preto e verde. Gabarito em dois pesos.

   Ordem do arquivo
   1  Tokens primitivos
   2  Superfícies
   3  Temas de empreendimento
   4  Reset e base
   5  Tipografia
   6  Layout
   7  Componentes
   8  Utilitários
   ============================================================ */

/* ---------- 1. TOKENS PRIMITIVOS -------------------------- */
:root{

  /* --- Preto. A cor de fundo do sistema. ------------------ */
  --black-950:#080808;   /* poço, hero, rodapé              */
  --black-900:#0F0F0F;   /* fundo padrão da página          */
  --black-800:#161616;   /* faixa alternada                 */
  --black-700:#1C1C1C;   /* superfície de card              */
  --black-600:#2C2C2C;   /* hover do preto, borda forte     */
  --black-500:#3D3D3D;
  --black-400:#5C5C5C;
  --black-300:#919191;   /* cinza de apoio                  */
  --black-200:#C2C2C2;
  --black-100:#E0E0E0;

  /* --- Verde. A cor da marca. ----------------------------- */
  --green-950:#061A0B;
  --green-900:#092510;   /* hover escuro                    */
  --green-800:#0D2E15;   /* hover                           */
  --green-700:#123D1C;   /* MARCA. o verde do site          */
  --green-600:#1A5227;
  --green-500:#256834;
  --green-400:#427036;   /* acento de preenchimento         */
  --green-300:#4A773F;   /* acento claro                    */
  --green-200:#6E9A62;   /* texto verde sobre escuro        */
  --green-100:#8FB585;   /* texto verde de leitura confortável */
  --green-50:#D6E4D1;

  /* --- Creme. O texto e o claro. -------------------------- */
  --cream:#EBE9DD;
  --cream-deep:#E3DECE;
  --cream-70:rgba(235,233,221,.70);
  --cream-45:rgba(235,233,221,.45);
  --cream-20:rgba(235,233,221,.20);
  --cream-10:rgba(235,233,221,.10);
  --cream-06:rgba(235,233,221,.06);

  /* --- Brancos quebrados. Nunca branco puro. -------------- */
  --off-100:#FBFAF7;
  --off-200:#F8F8F7;
  --off-300:#F6F6F6;

  /* --- Escuros sobre claro ------------------------------- */
  --ink-70:rgba(15,15,15,.70);
  --ink-45:rgba(15,15,15,.45);
  --ink-14:rgba(15,15,15,.14);
  --ink-08:rgba(15,15,15,.08);

  /* --- Sinal ---------------------------------------------- */
  --ok:#4A773F;
  --warn:#C1872E;
  --stop:#A6483A;

  /* --- Tipografia ----------------------------------------- */
  --font:'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-reg:400;
  --fw-bold:700;

  --fs-hero:clamp(38px, 7vw, 72px);
  --fs-display:clamp(32px, 5.6vw, 56px);
  --fs-h1:clamp(28px, 4.6vw, 48px);
  --fs-h2:clamp(26px, 3.6vw, 40px);
  --fs-h3:clamp(24px, 2.8vw, 32px);
  --fs-h4:clamp(20px, 2vw, 24px);
  --fs-lead:clamp(17px, 1.6vw, 20px);
  --fs-body-lg:18px;
  --fs-body:clamp(15px, 1.2vw, 16px);
  --fs-label:clamp(13px, 1vw, 14px);
  --fs-micro:12px;

  --lh-tight:1.05;
  --lh-title:1.3;
  --lh-body:1.5;
  --lh-loose:1.65;

  --tr-title:-0.025em;
  --tr-body:-0.0125em;
  --tr-label:0.08em;

  /* --- Espaço. Tudo múltiplo de 4. ------------------------ */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px;  --s8:32px;  --s10:40px; --s12:48px; --s14:56px;
  --s16:64px; --s18:72px; --s20:80px; --s24:96px; --s26:104px;
  --s32:128px; --s40:160px;

  /* Respiro vertical de seção */
  --sec-y:clamp(56px, 8vw, 104px);
  --sec-y-lg:clamp(72px, 11vw, 160px);

  /* --- Medida ---------------------------------------------- */
  --w-page:1280px;
  --w-narrow:920px;
  --w-prose:66ch;
  --gutter:clamp(20px, 5vw, 48px);

  /* --- Raio. O padrão é canto reto. ----------------------- */
  --r-0:0;
  --r-1:2px;
  --r-2:8px;
  --r-3:16px;
  --r-pill:100px;

  /* --- Traço ---------------------------------------------- */
  --bw:1px;

  /* --- Elevação. Discreta: no preto, sombra quase não lê. - */
  --sh-1:0 2px 8px rgba(0,0,0,.30);
  --sh-2:0 12px 28px rgba(0,0,0,.38);
  --sh-3:0 28px 64px rgba(0,0,0,.46);

  /* --- Movimento ------------------------------------------ */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-circ:cubic-bezier(.785,.135,.15,.86);  /* do 21st.dev */
  --d1:.20s; --d2:.35s; --d3:.60s; --d4:.90s;
  --d-fill:.45s;                             /* do 21st.dev */

  /* --- Camadas -------------------------------------------- */
  --z-base:1; --z-sticky:50; --z-header:100; --z-overlay:200; --z-modal:300;
}

/* ---------- 2. SUPERFÍCIES -------------------------------- */
/* O sistema tem três chãos. Todo componente lê só estas
   variáveis, nunca um hexadecimal. Trocar a superfície de uma
   seção troca tudo que está dentro dela.                     */

:root,
[data-surface="dark"]{
  --bg:var(--black-900);
  --bg-alt:var(--black-800);
  --bg-deep:var(--black-950);
  --surface:var(--black-700);
  --surface-hi:var(--black-600);
  --fg:var(--cream);
  --fg-muted:var(--cream-70);
  --fg-faint:var(--cream-45);
  --line:var(--cream-20);
  --line-soft:var(--cream-10);
  --line-hair:var(--cream-06);
  --accent:var(--green-400);        /* preenchimento, ícone   */
  --accent-hi:var(--green-300);
  --accent-text:var(--green-100);   /* acento legível em texto */
  --on-accent:var(--cream);
  --btn-bg:var(--green-700);
  --btn-bg-hover:var(--green-900);
  --btn-fg:var(--cream);
  --ab-bg:var(--green-700);         /* botão com disco de seta  */
  --ab-fg:var(--cream);
  --ab-fill:var(--cream);
  --ab-fill-fg:var(--green-700);
  --sh-1:#080808;                   /* rampa do fundo animado   */
  --sh-2:#123D1C;
  --sh-3:#427036;
  --sh-4:#8FB585;
}

[data-surface="green"]{
  --bg:var(--green-700);
  --bg-alt:var(--green-800);
  --bg-deep:var(--green-950);
  --surface:var(--green-800);
  --surface-hi:var(--green-600);
  --fg:var(--cream);
  --fg-muted:var(--cream-70);
  --fg-faint:var(--cream-45);
  --line:var(--cream-20);
  --line-soft:var(--cream-10);
  --line-hair:var(--cream-06);
  --accent:var(--cream);
  --accent-hi:var(--cream-deep);
  --accent-text:var(--cream);
  --on-accent:var(--green-700);
  --btn-bg:var(--cream);
  --btn-bg-hover:var(--cream-deep);
  --btn-fg:var(--green-700);
  --ab-bg:var(--cream);
  --ab-fg:var(--green-700);
  --ab-fill:var(--black-900);
  --ab-fill-fg:var(--cream);
  --sh-1:#061A0B;
  --sh-2:#123D1C;
  --sh-3:#4A773F;
  --sh-4:#A8C79E;
}

[data-surface="light"]{
  --bg:var(--cream);
  --bg-alt:var(--off-300);
  --bg-deep:var(--cream-deep);
  --surface:var(--off-100);
  --surface-hi:var(--off-200);
  --fg:var(--black-900);
  --fg-muted:var(--ink-70);
  --fg-faint:var(--ink-45);
  --line:var(--ink-14);
  --line-soft:var(--ink-08);
  --line-hair:var(--ink-08);
  --accent:var(--green-700);
  --accent-hi:var(--green-800);
  --accent-text:var(--green-700);
  --on-accent:var(--cream);
  --btn-bg:var(--green-700);
  --btn-bg-hover:var(--green-900);
  --btn-fg:var(--cream);
  --ab-bg:var(--green-700);
  --ab-fg:var(--cream);
  --ab-fill:var(--black-900);
  --ab-fill-fg:var(--cream);
  --sh-1:#D6E4D1;
  --sh-2:#E3DECE;
  --sh-3:#EBE9DD;
  --sh-4:#F6F6F6;
}

/* Toda superfície pinta a si mesma. */
[data-surface]{ background:var(--bg); color:var(--fg); }

/* ---------- 3. TEMAS DE EMPREENDIMENTO -------------------- */
/* Vai na tag <html> da página do empreendimento. Reescreve só
   o acento e o botão; o chão continua preto.                 */

[data-theme="primum"]{
  --accent:#155226;
  --accent-hi:#1C6B31;
  --accent-text:#E5D3AF;   /* champagne */
  --btn-bg:#E5D3AF;
  --btn-bg-hover:#C9B489;
  --btn-fg:var(--black-900);
  --on-accent:#FFF8EE;
  --ab-bg:#155226;
  --ab-fg:#FFF8EE;
  --ab-fill:#E5D3AF;
  --ab-fill-fg:#0C3419;
  --sh-1:#050D07;
  --sh-2:#0C3419;
  --sh-3:#155226;
  --sh-4:#E5D3AF;
}
[data-theme="primum"] [data-surface="green"]{
  --bg:#155226; --bg-alt:#0C3419; --surface:#0C3419;
  --accent:#E5D3AF; --accent-text:#E5D3AF; --on-accent:#0C3419;
  --btn-bg:#E5D3AF; --btn-bg-hover:#C9B489; --btn-fg:#0C3419;
}

[data-theme="galleria"]{
  --bg:#0A0F13;
  --accent:#C9C0AF;        /* pedra */
  --accent-hi:#DAD3C6;
  --accent-text:#C9C0AF;
  --fg:#EDE9E1;            /* osso */
  --btn-bg:#C9C0AF;
  --btn-bg-hover:#DAD3C6;
  --btn-fg:#05080B;
  --on-accent:#05080B;
  --ab-bg:#111820;
  --ab-fg:#EDE9E1;
  --ab-fill:#C9C0AF;
  --ab-fill-fg:#05080B;
  --sh-1:#05080B;
  --sh-2:#0A0F13;
  --sh-3:#2A343E;
  --sh-4:#C9C0AF;
}
[data-theme="galleria"] [data-surface="dark"]{
  --bg:#0A0F13; --bg-alt:#0D1318; --bg-deep:#05080B;
  --surface:#111820; --surface-hi:#1A232C;
  --fg:#EDE9E1;
}

/* ---------- 4. RESET E BASE ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:var(--fw-reg);
  line-height:var(--lh-body);
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
hr{ border:0; border-top:var(--bw) solid var(--line); margin:var(--s10) 0; }

::selection{ background:var(--accent); color:var(--on-accent); }

:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:3px;
}

/* ---------- 5. TIPOGRAFIA --------------------------------- */
/* Um peso para quase tudo. O 700 é exceção, não hierarquia.  */

h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--s4);
  font-weight:var(--fw-reg);
  line-height:var(--lh-title);
  letter-spacing:var(--tr-title);
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
h5{ font-size:var(--fs-lead); }
h6{ font-size:var(--fs-body-lg); }

p{ margin:0 0 var(--s4); }
p:last-child{ margin-bottom:0; }

a{ color:inherit; text-decoration:none; }

strong,b{ font-weight:var(--fw-bold); }

small{ font-size:var(--fs-micro); }

/* Escala como classe, para quando a tag não é a certa */
.t-hero    { font-size:var(--fs-hero);    line-height:var(--lh-tight); letter-spacing:var(--tr-title); font-weight:var(--fw-reg); }
.t-display { font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--tr-title); font-weight:var(--fw-reg); }
.t-h1      { font-size:var(--fs-h1);      line-height:var(--lh-title); letter-spacing:var(--tr-title); font-weight:var(--fw-reg); }
.t-h2      { font-size:var(--fs-h2);      line-height:var(--lh-title); letter-spacing:var(--tr-title); font-weight:var(--fw-reg); }
.t-h3      { font-size:var(--fs-h3);      line-height:var(--lh-title); letter-spacing:var(--tr-title); font-weight:var(--fw-reg); }
.t-h4      { font-size:var(--fs-h4);      line-height:var(--lh-title); letter-spacing:var(--tr-title); font-weight:var(--fw-reg); }
.t-lead    { font-size:var(--fs-lead);    line-height:var(--lh-body);  color:var(--fg-muted); max-width:var(--w-prose); }
.t-body    { font-size:var(--fs-body);    line-height:var(--lh-body); }
.t-micro   { font-size:var(--fs-micro);   line-height:var(--lh-body);  color:var(--fg-faint); }

/* Rótulo. Caixa alta, espaçado, é o que abre quase toda seção. */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  margin:0 0 var(--s4);
  font-size:var(--fs-label);
  font-weight:var(--fw-reg);
  text-transform:uppercase;
  letter-spacing:var(--tr-label);
  color:var(--accent-text);
}
.eyebrow::before{
  content:''; width:24px; height:1px; background:currentColor; flex:none;
}
.eyebrow--bare::before{ display:none; }

.prose{ max-width:var(--w-prose); color:var(--fg-muted); }
.prose p + p{ margin-top:var(--s4); }

/* ---------- 6. LAYOUT ------------------------------------- */
.container{
  width:100%;
  max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:var(--w-narrow); }
.container--full{ max-width:none; }

.section{ padding-block:var(--sec-y); }
.section--lg{ padding-block:var(--sec-y-lg); }
.section--flush{ padding-block:0; }

/* Cabeçalho de seção: rótulo, título, apoio. */
.section-head{ max-width:var(--w-prose); margin-bottom:var(--s12); }
.section-head--wide{ max-width:none; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }

.grid{ display:grid; gap:var(--s6); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--split{ grid-template-columns:1fr 1fr; gap:var(--s16); align-items:center; }
.grid--aside{ grid-template-columns:minmax(0,1fr) 380px; gap:var(--s16); }

@media (max-width:980px){
  .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--split,.grid--aside{ grid-template-columns:1fr; gap:var(--s10); }
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
}

.stack{ display:flex; flex-direction:column; gap:var(--s4); }
.row{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.row--between{ justify-content:space-between; }

/* Régua fina. Divide sem pesar. */
.rule{ height:var(--bw); background:var(--line-soft); border:0; margin:0; }

/* ---------- 7. COMPONENTES -------------------------------- */

/* 7.1 Botão — canto reto, generoso, peso 700.               */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:var(--s6) var(--s8);
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:var(--bw) solid transparent;
  border-radius:var(--r-0);
  font-size:var(--fs-body);
  font-weight:var(--fw-bold);
  line-height:var(--lh-body);
  letter-spacing:var(--tr-body);
  cursor:pointer;
  transition:background var(--d1) var(--e-out), color var(--d1) var(--e-out),
             border-color var(--d1) var(--e-out), transform var(--d1) var(--e-out);
}
.btn:hover{ background:var(--btn-bg-hover); }
.btn:active{ transform:translateY(1px); }

.btn--ghost{
  background:transparent;
  color:var(--fg);
  border-color:var(--line);
}
.btn--ghost:hover{ background:var(--surface); border-color:var(--fg-faint); }

.btn--solid{
  background:var(--fg);
  color:var(--bg);
}
.btn--solid:hover{ background:var(--accent); color:var(--on-accent); }

.btn--sm{ padding:var(--s3) var(--s5); font-size:var(--fs-label); }
.btn--lg{ padding:var(--s8) var(--s12); font-size:var(--fs-body-lg); }
.btn--block{ display:flex; width:100%; }

/* 7.1b Botão com disco de seta — .btn-arrow ----------------- */
/* Porte fiel do arrow-fill-button de @hyperiux (21st.dev).
   Em repouso: botão sólido com um disco claro na direita, onde
   mora a seta. No hover esse mesmo disco cresce e vira o fundo
   do botão inteiro, o rótulo recolore por trás de um clip-path
   que abre junto, e a seta troca — a de dentro sai pela direita
   enquanto outra entra pela esquerda.

   Quatro camadas empilhadas:
     z1  rótulo em repouso
     z2  o disco que cresce
     z2  cópia do rótulo, recortada pelo disco
     z3  o disco da seta, sempre por cima                       */
.btn-arrow{
  --ab-h:clamp(52px, 4.2vw, 64px);
  --ab-ico:clamp(40px, 3.1vw, 48px);
  --ab-gap:5px;
  --ab-inset-y:calc((100% - var(--ab-ico)) / 2);
  --ab-pad-l:var(--s8);
  --ab-pad-r:calc(var(--ab-ico) + var(--ab-gap) + var(--s6));

  position:relative; isolation:isolate;
  display:inline-flex; align-items:center;
  height:var(--ab-h);
  padding-inline:var(--ab-pad-l) var(--ab-pad-r);
  overflow:hidden; white-space:nowrap;
  background:var(--ab-bg);
  color:var(--ab-fg);
  border:var(--bw) solid var(--ab-bg);
  border-radius:var(--r-pill);
  font-size:var(--fs-body);
  font-weight:var(--fw-bold);
  line-height:1;
  letter-spacing:var(--tr-body);
  cursor:pointer;
}

.btn-arrow__label{ position:relative; z-index:1; }

/* O disco que cresce até cobrir o botão. */
.btn-arrow__fill{
  position:absolute; z-index:2;
  inset:var(--ab-inset-y) var(--ab-gap) var(--ab-inset-y)
        calc(100% - var(--ab-gap) - var(--ab-ico));
  border-radius:var(--r-pill);
  background:var(--ab-fill);
  pointer-events:none;
  transition:inset var(--d-fill) var(--e-circ),
             border-radius var(--d-fill) var(--e-circ);
}

/* Cópia do rótulo, na cor de cima, revelada pelo mesmo recorte. */
.btn-arrow__over{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  padding-inline:var(--ab-pad-l) var(--ab-pad-r);
  color:var(--ab-fill-fg);
  pointer-events:none;
  clip-path:inset(var(--ab-inset-y) var(--ab-gap) var(--ab-inset-y)
                  calc(100% - var(--ab-gap) - var(--ab-ico)));
  transition:clip-path var(--d-fill) var(--e-circ);
}

/* O disco da seta. Fica sempre visível, por cima de tudo. */
.btn-arrow__badge{
  position:absolute; z-index:3;
  right:var(--ab-gap); top:50%;
  width:var(--ab-ico); height:var(--ab-ico);
  translate:0 -50%;
  display:grid; place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--ab-fill);
  color:var(--ab-fill-fg);
  pointer-events:none;
}
.btn-arrow__badge svg{
  position:absolute;
  width:40%; height:40%;
  transition:translate var(--d-fill) var(--e-circ),
             scale var(--d-fill) var(--e-circ);
}
.btn-arrow__badge svg:first-child{ translate:-120% 0; scale:0; }   /* entra */
.btn-arrow__badge svg:last-child { translate:0 0;     scale:1; }   /* sai   */

/* ---- Estados ---- */
.btn-arrow:hover .btn-arrow__fill,
.btn-arrow:focus-visible .btn-arrow__fill,
.btn-arrow.is-pressed .btn-arrow__fill{ inset:0; }

.btn-arrow:hover .btn-arrow__over,
.btn-arrow:focus-visible .btn-arrow__over,
.btn-arrow.is-pressed .btn-arrow__over{ clip-path:inset(0 0 0 0); }

.btn-arrow:hover .btn-arrow__badge svg:first-child,
.btn-arrow:focus-visible .btn-arrow__badge svg:first-child,
.btn-arrow.is-pressed .btn-arrow__badge svg:first-child{ translate:0 0; scale:1; }

.btn-arrow:hover .btn-arrow__badge svg:last-child,
.btn-arrow:focus-visible .btn-arrow__badge svg:last-child,
.btn-arrow.is-pressed .btn-arrow__badge svg:last-child{ translate:120% 0; scale:0; }

.btn-arrow:active{ transform:translateY(1px); }

/* ---- Variações ---- */
/* Canto reto. A forma padrão deste componente é a cápsula: ela
   é a única exceção de raio do sistema, porque tudo aqui nasce
   de um disco redondo e o canto vivo brigaria com o movimento.
   Esta variação existe para quando o bloco pedir canto reto —
   o disco morfa de círculo para quadrado enquanto cresce.      */
.btn-arrow--sq{ border-radius:var(--r-0); }
.btn-arrow--sq:hover .btn-arrow__fill,
.btn-arrow--sq:focus-visible .btn-arrow__fill,
.btn-arrow--sq.is-pressed .btn-arrow__fill{ border-radius:var(--r-0); }

/* Vazado: sem fundo em repouso, só o contorno e o disco. */
.btn-arrow--ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--fg);
}

.btn-arrow--sm{ --ab-h:44px; --ab-ico:34px; --ab-pad-l:var(--s6); font-size:var(--fs-label); }
.btn-arrow--lg{ --ab-h:72px; --ab-ico:56px; --ab-pad-l:var(--s10); font-size:var(--fs-body-lg); }

@media (prefers-reduced-motion:reduce){
  .btn-arrow__fill,
  .btn-arrow__over,
  .btn-arrow__badge svg{ transition:none; }
}

/* 7.2 Link de texto — sublinhado que cresce.                */
.link{
  display:inline-block;
  position:relative;
  color:var(--accent-text);
  font-weight:var(--fw-bold);
}
.link::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:currentColor; transition:right var(--d2) var(--e-out);
}
.link:hover::after{ right:0; }

/* Link com seta, para "ver mais" */
.link-arrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:var(--tr-label); color:var(--accent-text);
}
.link-arrow svg,.link-arrow span[aria-hidden]{ transition:transform var(--d1) var(--e-out); }
.link-arrow:hover svg,.link-arrow:hover span[aria-hidden]{ transform:translateX(4px); }

/* 7.3 Card — a peça mais usada. Canto reto por padrão.      */
.card{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:var(--bw) solid var(--line-soft);
  border-radius:var(--r-0);
  padding:var(--s8);
  transition:border-color var(--d2) var(--e-out), background var(--d2) var(--e-out),
             transform var(--d2) var(--e-out);
}
.card:hover{ border-color:var(--line); }
.card--link:hover{ transform:translateY(-3px); }
.card--flat{ background:transparent; padding:0; border:0; }
.card--outline{ background:transparent; border-color:var(--line); }
.card--round{ border-radius:var(--r-3); overflow:hidden; }
.card--pad-lg{ padding:var(--s12); }

.card__label{
  font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:var(--tr-label); color:var(--fg-faint);
  margin-bottom:var(--s3);
}
.card__title{ font-size:var(--fs-h4); line-height:var(--lh-title); letter-spacing:var(--tr-title); margin:0 0 var(--s3); }
.card__text{ color:var(--fg-muted); margin:0; }
.card__foot{ margin-top:auto; padding-top:var(--s6); }

/* 7.4 Card de empreendimento — imagem cheia, texto embaixo. */
.dev-card{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-0);
  background:var(--surface);
}
.dev-card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.dev-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--d4) var(--e-out);
}
.dev-card:hover .dev-card__media img{ transform:scale(1.04); }
.dev-card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,8,8,.78) 100%);
}
.dev-card__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:var(--s8);
  color:var(--cream);
}
.dev-card__status{
  display:inline-block; margin-bottom:var(--s3);
  padding:var(--s1) var(--s3);
  border:var(--bw) solid var(--cream-20);
  border-radius:var(--r-pill);
  font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:var(--tr-label);
}
.dev-card__name{ font-size:var(--fs-h3); line-height:1.15; letter-spacing:var(--tr-title); margin:0 0 var(--s1); }
.dev-card__place{ font-size:var(--fs-label); color:var(--cream-70); margin:0; }

/* 7.5 Ficha técnica — par rótulo/valor, separado por régua. */
.spec{ display:grid; gap:0; }
.spec__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s6);
  padding:var(--s4) 0;
  border-bottom:var(--bw) solid var(--line-soft);
}
.spec__row:first-child{ border-top:var(--bw) solid var(--line-soft); }
.spec__k{ color:var(--fg-faint); font-size:var(--fs-label); }
.spec__v{ text-align:right; }

/* 7.6 Número grande — o contador das seções de dado.        */
.stat{ }
.stat__v{
  display:block;
  font-size:var(--fs-display);
  line-height:1;
  letter-spacing:var(--tr-title);
  color:var(--fg);
}
.stat__k{
  display:block; margin-top:var(--s3);
  font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:var(--tr-label); color:var(--fg-faint);
}

/* 7.7 Pill / tag */
.pill{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4);
  border:var(--bw) solid var(--line);
  border-radius:var(--r-pill);
  font-size:var(--fs-label);
  color:var(--fg-muted);
}
.pill--solid{ background:var(--accent); border-color:transparent; color:var(--on-accent); }

/* 7.8 Citação */
.quote{ max-width:var(--w-narrow); margin:0; }
.quote blockquote{
  margin:0;
  font-size:var(--fs-h3);
  line-height:var(--lh-title);
  letter-spacing:var(--tr-title);
  font-weight:var(--fw-reg);
  text-wrap:balance;
}
.quote figcaption{
  margin-top:var(--s6);
  font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:var(--tr-label); color:var(--fg-faint);
}

/* 7.9 Mídia */
.media{ position:relative; overflow:hidden; border-radius:var(--r-0); background:var(--bg-alt); }
.media img{ width:100%; height:100%; object-fit:cover; }
.media--4x5{ aspect-ratio:4/5; }
.media--3x2{ aspect-ratio:3/2; }
.media--16x9{ aspect-ratio:16/9; }
.media--1x1{ aspect-ratio:1/1; }
.media__caption{ margin-top:var(--s3); font-size:var(--fs-micro); color:var(--fg-faint); }

/* 7.10 Cabeçalho fixo */
.header{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-header);
  display:flex; align-items:center;
  height:80px;
  transition:transform var(--d2) var(--e-out), background var(--d2) var(--e-out);
}
.header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bg-deep);
  border-bottom:var(--bw) solid var(--line-hair);
  opacity:0; transition:opacity var(--d2) var(--e-out);
}
.header.is-solid::before{ opacity:1; }
.header.is-hidden{ transform:translateY(-100%); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s8); width:100%; }
.header__logo img,.header__logo svg{ height:28px; width:auto; }

.nav{ display:flex; align-items:center; gap:var(--s8); }
.nav a{
  font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:var(--tr-label); color:var(--fg-muted);
  transition:color var(--d1) var(--e-out);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--fg); }

.burger{
  display:none; width:40px; height:40px; padding:0;
  background:transparent; border:var(--bw) solid var(--line); cursor:pointer;
}
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:grid; place-items:center; }
}

/* 7.11 Rodapé */
.footer{ background:var(--bg-deep); color:var(--fg); padding-block:var(--sec-y) var(--s10); }
.footer a{ color:var(--fg-muted); transition:color var(--d1) var(--e-out); }
.footer a:hover{ color:var(--fg); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s10); }
.footer__title{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--fg-faint); margin-bottom:var(--s5); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:var(--s6); flex-wrap:wrap;
  margin-top:var(--s16); padding-top:var(--s6);
  border-top:var(--bw) solid var(--line-hair);
  font-size:var(--fs-micro); color:var(--fg-faint);
}
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

/* 7.12 Formulário */
.field{ display:flex; flex-direction:column; gap:var(--s2); }
.field label{
  font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:var(--tr-label); color:var(--fg-faint);
}
.field input,.field textarea,.field select{
  padding:var(--s4);
  background:transparent;
  color:var(--fg);
  border:0; border-bottom:var(--bw) solid var(--line);
  border-radius:var(--r-0);
  transition:border-color var(--d1) var(--e-out);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-faint); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-bottom-color:var(--accent-text);
}
.field textarea{ min-height:120px; resize:vertical; }
.field__hint{ font-size:var(--fs-micro); color:var(--fg-faint); }

/* 7.13 Acordeão */
.acc__item{ border-bottom:var(--bw) solid var(--line-soft); }
.acc__btn{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s6);
  width:100%; padding:var(--s6) 0;
  background:transparent; border:0; text-align:left; cursor:pointer;
  font-size:var(--fs-h4); line-height:var(--lh-title); letter-spacing:var(--tr-title);
  color:var(--fg);
}
.acc__sign{ flex:none; width:20px; height:20px; position:relative; }
.acc__sign::before,.acc__sign::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1px;
  background:currentColor; transition:transform var(--d2) var(--e-out);
}
.acc__sign::after{ transform:rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after{ transform:rotate(0); }
.acc__panel{ overflow:hidden; max-height:0; transition:max-height var(--d3) var(--e-io); }
.acc__panel > div{ padding:0 0 var(--s6); color:var(--fg-muted); max-width:var(--w-prose); }

/* 7.14 Faixa de chamada */
.band{ background:var(--bg-alt); padding-block:var(--sec-y); }
.band--accent{ background:var(--green-700); color:var(--cream); }
.band--accent .btn{ --btn-bg:var(--cream); --btn-fg:var(--green-700); --btn-bg-hover:var(--cream-deep); }

/* 7.15 Letreiro */
.marquee{ overflow:hidden; border-block:var(--bw) solid var(--line-hair); padding-block:var(--s5); }
.marquee__track{ display:flex; gap:var(--s10); width:max-content; animation:slide 32s linear infinite; }
.marquee span{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--fg-faint); white-space:nowrap; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* 7.16 Botão flutuante do WhatsApp */
.wa{
  position:fixed; right:var(--s6); bottom:var(--s6); z-index:var(--z-sticky);
  display:grid; place-items:center; width:56px; height:56px;
  background:var(--green-700); color:var(--cream);
  border-radius:var(--r-pill); box-shadow:var(--sh-2);
  transition:transform var(--d1) var(--e-out), background var(--d1) var(--e-out);
}
.wa:hover{ transform:scale(1.06); background:var(--green-800); }


/* 7.17 Fundo animado em WebGL — .shader-bg ------------------ */
/* Shader "Mesh drift" do Shader Builder do 21st.dev, portado
   para WebGL1 puro. As cores saem das variáveis --sh-1 a --sh-4
   da superfície, então o fundo acompanha tema sem código novo.

   <div class="shader-bg" data-shader>
     <div class="shader-bg__scrim"></div>
   </div>

   O véu (.shader-bg__scrim) não é opcional: sem ele o texto
   deita sobre uma imagem que muda de claridade o tempo todo.   */
.shader-bg{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  /* Fundo de reserva: é o que se vê antes do primeiro quadro,
     e é o que fica se o navegador não tiver WebGL.             */
  background:
    radial-gradient(120% 90% at 18% 12%, var(--sh-3) 0%, transparent 55%),
    radial-gradient(90% 80% at 82% 78%, var(--sh-2) 0%, transparent 60%),
    var(--sh-1);
}
.shader-bg__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  opacity:0;
  transition:opacity .9s var(--e-out);
}
.shader-bg.is-on .shader-bg__canvas{ opacity:1; }

/* Véu. Obrigatório sob texto. */
.shader-bg__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(8,8,8,.58) 0%, rgba(8,8,8,.30) 42%, rgba(8,8,8,.92) 100%),
    linear-gradient(90deg, rgba(8,8,8,.52) 0%, rgba(8,8,8,0) 64%);
}
.shader-bg__scrim--soft{
  background:linear-gradient(180deg, rgba(8,8,8,.30) 0%, rgba(8,8,8,.70) 100%);
}
[data-surface="light"] .shader-bg__scrim{
  background:linear-gradient(180deg, rgba(235,233,221,.55) 0%, rgba(235,233,221,.86) 100%);
}

/* O conteúdo por cima precisa subir de camada. */
.shader-host{ position:relative; isolation:isolate; }
.shader-host > *:not(.shader-bg){ position:relative; z-index:1; }

/* ---------- 8. UTILITÁRIOS -------------------------------- */
.u-muted{ color:var(--fg-muted); }
.u-faint{ color:var(--fg-faint); }
.u-accent{ color:var(--accent-text); }
.u-bold{ font-weight:var(--fw-bold); }
.u-upper{ text-transform:uppercase; letter-spacing:var(--tr-label); }
.u-center{ text-align:center; }
.u-right{ text-align:right; }
.u-prose{ max-width:var(--w-prose); }
.u-narrow{ max-width:var(--w-narrow); margin-inline:auto; }
.u-nowrap{ white-space:nowrap; }
.u-mt0{ margin-top:0; } .u-mb0{ margin-bottom:0; }
.u-mt2{ margin-top:var(--s2); } .u-mt3{ margin-top:var(--s3); }
.u-mt4{ margin-top:var(--s4); } .u-mt5{ margin-top:var(--s5); }
.u-mt6{ margin-top:var(--s6); } .u-mt8{ margin-top:var(--s8); }
.u-mt10{ margin-top:var(--s10); } .u-mt12{ margin-top:var(--s12); }
.u-mt16{ margin-top:var(--s16); } .u-mt24{ margin-top:var(--s24); }
.u-hide{ display:none; }

.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;
}

.skip{
  position:absolute; left:var(--s4); top:-100px; z-index:var(--z-modal);
  padding:var(--s3) var(--s5); background:var(--fg); color:var(--bg);
}
.skip:focus{ top:var(--s4); }