@font-face { font-family: 'Braskem Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('../assets/fonts/BraskemSans-Light.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 300; font-style: italic; font-display: swap; src: url('../assets/fonts/BraskemSans-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/BraskemSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('../assets/fonts/BraskemSans-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/BraskemSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 500; font-style: italic; font-display: swap; src: url('../assets/fonts/BraskemSans-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/BraskemSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 600; font-style: italic; font-display: swap; src: url('../assets/fonts/BraskemSans-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/BraskemSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 700; font-style: italic; font-display: swap; src: url('../assets/fonts/BraskemSans-BoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 800; font-style: normal; font-display: swap; src: url('../assets/fonts/BraskemSans-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Braskem Sans'; font-weight: 800; font-style: italic; font-display: swap; src: url('../assets/fonts/BraskemSans-ExtraBoldItalic.woff2') format('woff2'); }

:root {
  --esp-blue:        #0057B8;
  --esp-cyan:        #00A9E0;
  --esp-yellow:      #FFCD00;
  --esp-gray:        #425563;
  --esp-blue-light:  #B9DAF3;
  --esp-cyan-light:  #74D5F5;   /* tint p/ linhas de outline decorativo (Sobre/Negócio) */
  --esp-blue-pale:   #CDE7F7;   /* azul pálido — placeholder de avatar sem foto */
  --esp-blue-mist:   #EEF4FB;   /* hover de pílula branca (.esp-btn--light + CTA especialista) */
  --esp-gray-dark:   #3F4D58;   /* barra "fale com especialista" (home) */

  --esp-blue-deep:      #003D80;
  --esp-blue-btn:       #0057B8;
  --esp-blue-btn-hover: #00468F;

  --esp-ink:    #425563;   /* títulos */
  --esp-ink-2:  #425563;   /* nav/labels */
  --esp-body:   #425563;   /* parágrafos */
  --esp-muted:  #5F6E78;   /* AA 4.5+ sobre branco e bg-soft (o #6B7A86 ficava a 4.42) */

  --esp-bg:     #FFFFFF;
  --esp-bg-soft:#F3F6F9;
  --esp-border: #E2E8EE;
  --esp-footer: #425563;

  --esp-container: 75rem;
  --esp-gutter: 3rem;
  --esp-header-h: 4.75rem;
  --esp-sec-y: 5.25rem;

  --esp-font: 'Braskem Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica — usar sempre estes tokens. Texto de conteúdo nunca abaixo de --fs-body. */
  --fs-display: 3.25rem;   /* 52px — H1 do hero */
  --fs-h2:      1.75rem;   /* 28px — títulos de seção, números-destaque */
  --fs-h3:      1.5rem;    /* 24px — sub-títulos, chamada forte */
  --fs-lead:    1.25rem;   /* 20px — lead / intro grande */
  --fs-body:    1rem;      /* 16px — corpo, descrições, botões, labels de conteúdo */
  --fs-sm:      0.875rem;  /* 14px — UI/meta: nav, footer, datas, tags */
  --fs-xs:      0.75rem;   /* 12px — micro-rótulo (tags de infográfico no mobile); abaixo da escala de leitura */

  --esp-radius-pill: 999px;
  --esp-radius-xl: 1.5rem;
  --esp-radius-2xl: 4rem;   /* degrau acima do xl — painel de produto */
  --esp-radius-lg: 1.25rem;
  --esp-radius-round: 1rem;
  --esp-radius-md: 0.75rem;
  --esp-radius-sm: 0.5rem;
  --esp-radius-leaf: 0.5rem 2.25rem;   /* shape "folha" da marca — cantos TR/BL grandes (inverter a ordem = espelho) */
  --esp-radius-leaf-rev: 2.25rem 0.5rem;   /* folha espelhada (--esp-radius-leaf invertido) */
  --esp-radius-nub: 0.4rem;   /* canto reto do satélite do .feat-duo */
  /* shapes de folha em % (border-radius completo) — usar SEMPRE via token, nunca valor cru */
  --esp-shape-1: 50% 3% 50% 50%;      /* ponta no topo-direito */
  --esp-shape-2: 3% 45% 3% 45%;       /* folha diagonal ↗↙ */
  --esp-shape-3: 45% 3% 45% 3%;       /* folha diagonal ↖↘ */
  --esp-shape-4: 3% 50% 50% 50%;      /* ponta no topo-esquerdo */
  --esp-shape-card: 10% 40% 10% 40%;  /* card/foto (box intro hero-band, foto do painel) */
  --esp-shape-blob: 40% 4%;           /* blob orgânico do .feat-duo main */
  --esp-shape-blob-alt: 4% 40%;       /* blob girado (foto extra da Sustentabilidade) */
  --esp-shape-event: 1.125rem 1.125rem 4.5rem 1.125rem;   /* card de evento (home) */
  --esp-shape-assoc: 1rem 6rem;       /* card de associação (home) */

  --esp-sh-drop: 0 1.125rem 2.75rem rgba(10,42,74,.16);
  --esp-sh-card: 0 0.5rem 1.5rem rgba(10,42,74,.10);   /* sombra padrão de card (stats, notas, etc.) */
  --esp-sh-cat-hover: 0 0.5rem 1.25rem rgba(10,42,74,.12);   /* hover suave do card .esp-cat em fundo branco (negocio/portfolio) */
  --esp-sh-pin: 0 0 0 0.26rem rgba(255,205,0,.6);   /* halo do pin do mapa (sobre) */
  --esp-sh-modal: 0 1.5rem 3.75rem rgba(0,0,0,.3);

  /* Gradientes de seção (90deg, esquerda→direita) */
  --esp-grad-hero:    linear-gradient(90deg, #0057B8, #0099D8);   /* hero azul da home */
  --esp-grad-section: linear-gradient(90deg, #005FAF, #00907B);   /* seções azul-teal (Sobre/Negócio/assoc) */
  --esp-grad-cycle:   linear-gradient(90deg, #00A6DF, #0063BD);   /* ciclo do carbono (Sustentabilidade) */
}

*, *::before, *::after { box-sizing: border-box; }
/* fluida: 1rem 16→22px (≤1440 → ~2880). Ondas usam vw de propósito (fora desta escala). */
html { font-size: clamp(16px, 0.4167vw + 10px, 22px); scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--esp-font);
  color: var(--esp-body);
  background: var(--esp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Lenis: lenis-stopped trava a rolagem (drawer/modal) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--esp-blue); color: #fff; padding: 0.625rem 1rem; font: 700 var(--fs-sm)/1 var(--esp-font); }
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* 2 curvas: --wave1 (foto→azul, com corpo) + --wave2 (fecha no branco). --ovl = vale da wave1, --w2h = altura da wave2. Variantes por breakpoint evitam a curva achatada em ultrawide. */
#main {
  overflow-x: clip;
  --ovl: 20.3vw; --w2h: 28.18vw;
  --wave1: url("../assets/wave-hero-1.svg");
  --wave2: url("../assets/wave-hero-2.svg");
}
@media (min-width: 2201px) {
  #main { --ovl: 15.23vw; --w2h: 21.13vw; --wave1: url("../assets/wave-hero-1-2560.svg"); --wave2: url("../assets/wave-hero-2-2560.svg"); }
}
@media (min-width: 2961px) {
  #main { --ovl: 11.34vw; --w2h: 15.73vw; --wave1: url("../assets/wave-hero-1-3440.svg"); --wave2: url("../assets/wave-hero-2-3440.svg"); }
}
@media (max-width: 768px) {
  #main { --ovl: 30.74vw; --w2h: 50.09vw; --wave1: url("../assets/wave-hero-1-mobile.svg"); --wave2: url("../assets/wave-hero-2-mobile.svg"); }
}

/* Crista igual em todas as internas: mesma min-height + altura da wave em % DA LARGURA (a base com que o <img> renderiza). % e não vw: vw inclui a scrollbar e descasaria da largura de conteúdo. */
/* altura da banner = a mesma da home (--ovl stepped + 380px). NÃO usar clamp com teto em rem: o rem é fluido e o banner balonava progressivamente em telas largas. */
#main { --esp-hero-min: calc(var(--ovl) + 380px); --esp-hero-wave: 25.9375%; }
@media (min-width: 2201px) { #main { --esp-hero-wave: 19.4531%; } }
@media (min-width: 2961px) { #main { --esp-hero-wave: 14.4767%; } }
@media (max-width: 768px)  { #main { --esp-hero-wave: 46.1111%; } }

/* Hero interno (todas menos a home): min-height do token + entrada "assenta" (min-height +--hero-settle → final),
   como a home mas mais sutil. A home (.home-hero) tem a sua própria. Off em reduced-motion. */
@keyframes espHeroSettle { from { min-height: calc(var(--esp-hero-min) + var(--hero-settle, 1rem)); } to { min-height: var(--esp-hero-min); } }   /* 1rem (era 2): CLS verde */
.esp-hero:not(.home-hero) { min-height: var(--esp-hero-min); animation: espHeroSettle 1.1s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .esp-hero:not(.home-hero) { animation: none; } }

/* Faixa azul curta pós-hero (2 curvas: wave1 foto→azul glassy + wave2 fecha no branco). Só cabe uma breve
   intro. margin-top (= -esp-hero-wave, % da largura) fixa a CRISTA no mesmo pixel do hero; padding-top no vale
   (--ovl) põe o conteúdo no azul sólido; min-height garante que o azul cubra a foto antes da wave2 (sem vazar).
   Usada por Negócio e Sustentabilidade. */
.esp-hero-band {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--esp-hero-wave)); padding-top: calc(var(--ovl) + 0.5rem);
  padding-bottom: calc(var(--w2h) * 0.5);
  min-height: calc(25.94vw + var(--w2h) + 1rem);
}
@media (min-width: 2201px) { .esp-hero-band { min-height: calc(19.45vw + var(--w2h) + 1rem); } }
@media (min-width: 2961px) { .esp-hero-band { min-height: calc(14.48vw + var(--w2h) + 1rem); } }
.esp-hero-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--wave1) top center / 100% auto no-repeat,
              var(--esp-grad-hero) bottom center / 100% calc(100% - var(--ovl) + 1px) no-repeat;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--w2h) + 0.5vw) no-repeat,
                var(--wave2) bottom / 100% var(--w2h) no-repeat;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--w2h) + 0.5vw) no-repeat,
                var(--wave2) bottom / 100% var(--w2h) no-repeat;
}
.esp-hero-band__grid { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 0.36fr) 1fr; gap: 4rem; align-items: center; }
.esp-hero-band__txt .esp-h2 { color: #fff; font-weight: 700; }
.esp-hero-band__txt .esp-lead { color: rgba(255, 255, 255, .92); }
.esp-hero-band__card { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--esp-shape-card); }   /* fotos do card são 1:1; reserva o espaço antes do load (CLS) */
/* tablet: foto menor + gap menor = respiro p/ o texto; padding maior deixa o texto acima da wave */
@media (min-width: 769px) and (max-width: 980px) {
  .esp-hero-band { padding-bottom: calc(var(--w2h) * 0.75); }
  .esp-hero-band__grid { grid-template-columns: minmax(0, 0.3fr) 1fr; gap: 2.5rem; }
}
/* mobile: wave2 alta (50vw) → folga extra p/ a intro empilhada ficar acima da dobra; intro empilha */
@media (max-width: 768px) {
  .esp-hero-band { padding-bottom: calc(var(--w2h) + 1.5rem); }
  .esp-hero-band__grid { grid-template-columns: 1fr; gap: 2rem; }
  .esp-hero-band__card { max-width: 16rem; }
}

.esp-container {
  max-width: var(--esp-container);
  margin: 0 auto;
  padding-left: var(--esp-gutter);
  padding-right: var(--esp-gutter);
}

/* reveal: data-reveal / -group (escalona filhos) / -hero+data-split. layout.js adiciona .is-in; .js esconde (sem flash sem-JS). */
.js [data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="tick"] { transform: scaleX(0); transform-origin: left center; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal-group] > * { opacity: 0; transform: translateY(1.75rem); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--reveal-i, 0) * 90ms); }
.js [data-reveal-group].is-in > * { opacity: 1; transform: none; }
.js [data-reveal-group] > .esp-tick { transform: scaleX(0); transform-origin: left center; }
.js [data-reveal-group].is-in > .esp-tick { transform: none; }
.js [data-reveal-group="scale"] > * { transform: scale(.94); }
.js [data-reveal-group="scale"].is-in > * { transform: none; }
/* .esp-btn no grupo não transiciona transform (senão amortece o magnético do GSAP) */
.js [data-reveal-group] > .esp-btn { transition: opacity .6s cubic-bezier(.22,1,.36,1), background .3s ease, box-shadow .3s ease; }

.js [data-split]:not(.is-split) { visibility: hidden; }
.js [data-split] .esp-split__line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.js [data-split] .esp-split__inner { display: block; transform: translateY(115%); transition: transform .9s cubic-bezier(.19,1,.22,1); }
.js .esp-hero__inner[data-reveal-hero].is-in .esp-split__inner { transform: translateY(0); }
.js .esp-hero__inner[data-reveal-hero].is-in .esp-split__line:nth-child(2) .esp-split__inner { transition-delay: .12s; }
.js .esp-hero__inner[data-reveal-hero].is-in .esp-split__line:nth-child(3) .esp-split__inner { transition-delay: .24s; }
.js .esp-hero__inner[data-reveal-hero] .home-hero__sub { opacity: 0; transform: translateY(0.75rem); filter: blur(6px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1), filter .75s ease; transition-delay: .4s; }
.js .esp-hero__inner[data-reveal-hero].is-in .home-hero__sub { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-split] .esp-split__inner, .js .esp-hero__inner[data-reveal-hero] .home-hero__sub { transform: none !important; opacity: 1 !important; filter: none !important; transition: none !important; }
}

.esp-tick { display: block; width: 3rem; height: 0.5rem; border-radius: var(--esp-radius-pill); background: var(--esp-yellow); margin-bottom: 1.125rem; }
.esp-tick--cyan { background: var(--esp-cyan); }
.esp-h2 { margin: 0; font: 300 var(--fs-h2)/1 var(--esp-font); color: var(--esp-ink); letter-spacing: -0.01em; }
.esp-h2 strong { color: var(--esp-ink); font-weight: 700; }
.esp-h3 { margin: 0; font: 700 var(--fs-h3)/1.2 var(--esp-font); color: var(--esp-ink); }
.esp-lead { margin: 1rem 0 0; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }

/* .feat-duo: 2 fotos + blob. comp 934×570; main 61%, deco 21.8%, mini 34.9% @ 65.1%. --rev espelha. */
.feat-duo { position: relative; width: 100%; margin-left: auto; aspect-ratio: 934 / 570; }
.feat-duo__main { position: absolute; left: 0; top: 0; width: 61%; aspect-ratio: 1; border-radius: var(--esp-shape-blob); overflow: hidden; }
.feat-duo__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-duo__deco { position: absolute; left: 65.1%; top: 0; width: 21.8%; aspect-ratio: 1; border: 0.125rem solid var(--esp-blue-light); border-radius: 50% 50% 50% var(--esp-radius-nub); }
.feat-duo__mini { position: absolute; left: 65.1%; bottom: 0; width: 34.9%; aspect-ratio: 1; border-radius: var(--esp-radius-nub) 50% 50% 50%; overflow: hidden; z-index: 2; }
.feat-duo__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-duo--rev { margin-left: 0; margin-right: auto; }
.feat-duo--rev .feat-duo__main { left: auto; right: 0; border-radius: var(--esp-shape-blob); }
.feat-duo--rev .feat-duo__deco { left: auto; right: 65.1%; border-radius: 50% 50% var(--esp-radius-nub) 50%; }
.feat-duo--rev .feat-duo__mini { left: auto; right: 65.1%; border-radius: 50% var(--esp-radius-nub) 50% 50%; }
/* --flip: troca vertical mini↔deco (mini em cima, deco embaixo); o canto reto segue encaixando na main */
.feat-duo--flip .feat-duo__deco { top: auto; bottom: 0; border-radius: var(--esp-radius-nub) 50% 50% 50%; }
.feat-duo--flip .feat-duo__mini { top: 0; bottom: auto; border-radius: 50% 50% 50% var(--esp-radius-nub); }
.feat-duo--rev.feat-duo--flip .feat-duo__deco { border-radius: 50% var(--esp-radius-nub) 50% 50%; }
.feat-duo--rev.feat-duo--flip .feat-duo__mini { border-radius: 50% 50% var(--esp-radius-nub) 50%; }

.esp-cat { display: flex; min-width: 0; }
.esp-cat__link { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem;
  color: inherit; text-decoration: none; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.esp-cat__link:hover { transform: translateY(-6px); }
.esp-cat__link:hover .esp-cat__img { box-shadow: var(--esp-cat-hover-sh, 0 0.875rem 1.75rem rgba(3,25,54,.30)); }
.esp-cat__link:hover .esp-cat__img img { transform: scale(1.08); }
.esp-cat__img { width: 12rem; height: 12rem; overflow: hidden; display: block; transition: box-shadow .35s ease; }
.esp-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.esp-cat:nth-child(1) .esp-cat__img,
.esp-cat:nth-child(7) .esp-cat__img { border-radius: var(--esp-shape-1); }
.esp-cat:nth-child(2) .esp-cat__img,
.esp-cat:nth-child(8) .esp-cat__img { border-radius: var(--esp-shape-2); }
.esp-cat:nth-child(3) .esp-cat__img,
.esp-cat:nth-child(5) .esp-cat__img { border-radius: var(--esp-shape-3); }
.esp-cat:nth-child(4) .esp-cat__img,
.esp-cat:nth-child(6) .esp-cat__img { border-radius: var(--esp-shape-4); }
/* anywhere (não break-word): reduz o min-content → a coluna encolhe no mobile */
.esp-cat__label { font: 700 var(--fs-body)/1.2 var(--esp-font); width: 13.4rem; overflow-wrap: anywhere; }
@media (max-width: 980px) { .esp-cat__label { width: auto; } }
@media (max-width: 600px) { .esp-cat__img { width: 100%; height: auto; aspect-ratio: 1; max-width: 10.5rem; } }

.esp-outline__line { fill: none; stroke: var(--esp-cyan-light); stroke-width: 1; }

.esp-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 3.125rem; padding: 0.5rem 1.6rem 0.5rem 1rem;   /* min-height + padding: cresce sem estourar se o texto quebrar */
  font: 700 var(--fs-body)/1.2 var(--esp-font);
  border: 0; cursor: pointer; border-radius: var(--esp-radius-pill);
  background: var(--esp-blue-btn); color: #fff;
  transition: background .3s ease, box-shadow .3s ease;
}
.esp-btn:hover { background: var(--esp-blue-btn-hover); box-shadow: 0 0.5rem 1.75rem rgba(0,87,184,.38); }
.esp-btn:active { box-shadow: 0 0.25rem 0.75rem rgba(0,87,184,.30); transition-duration: .1s; }
/* repouso sem ícone; hover = pop com bounce via GSAP (layout.js initCtaIcon) — não animar aqui.
   margin -0.15rem deixa 0.6rem do gap sobrando à esq. → texto fica simétrico (1.6rem dos 2 lados).
   bg proporcional (90% da largura) → o círculo CRESCE junto com a caixa (pop, não recorte).
   Touch (hover:none) e reduced-motion mantêm o ícone sempre visível. */
.esp-btn__icon { width: 0; height: 1.75rem; flex: 0 0 auto; opacity: 0; margin-right: -0.15rem;
  background: url(../assets/icon-arrow-right-white.svg) center/90% no-repeat; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .esp-btn__icon { width: 1.75rem; margin-right: 0; opacity: 1; }
}
.esp-btn__icon img { display: none; }
/* --light: pílula branca, texto azul (fundos escuros) */
.esp-btn--light { background: #fff; color: var(--esp-blue); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.10); }
.esp-btn--light:hover { background: var(--esp-blue-mist); box-shadow: 0 0.75rem 2rem rgba(10,42,74,.22); }
.esp-btn--light .esp-btn__icon { background-image: url(../assets/icon-arrow-right-blue.svg); }
/* pílula branca com acento por cor (p/ boxes coloridos): --light-cyan (box cyan) · --light-gray (box cinza) */
.esp-btn--light-cyan { background: #fff; color: var(--esp-cyan); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.10); }
.esp-btn--light-cyan:hover { background: var(--esp-blue-mist); box-shadow: 0 0.75rem 2rem rgba(10,42,74,.22); }
.esp-btn--light-cyan .esp-btn__icon { background-image: url(../assets/icon-arrow-right-cyan.svg); }
.esp-btn--light-gray { background: #fff; color: var(--esp-gray); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.10); }
.esp-btn--light-gray:hover { background: var(--esp-blue-mist); box-shadow: 0 0.75rem 2rem rgba(10,42,74,.22); }
.esp-btn--light-gray .esp-btn__icon { background-image: url(../assets/icon-arrow-right-gray.svg); }
/* --block: CTA de texto longo vira bloco full-width no mobile (o pill de 1 linha aperta o texto) */
@media (max-width: 600px) { .esp-btn--block { width: 100%; } }

.esp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--esp-blue);
  transition: transform .3s ease, background .35s ease, box-shadow .35s ease;
}
.esp-header--hidden { transform: translateY(-100%); }
.esp-header__inner {
  max-width: var(--esp-container); margin: 0 auto;
  padding: 0 var(--esp-gutter); height: var(--esp-header-h);
  display: flex; align-items: center; gap: 1.75rem;
}
.esp-header__brand { flex: 0 0 auto; display: flex; }
.esp-header__logo { height: 1.875rem; display: block; }
.esp-header__logo--color { display: none; }
.esp-header__nav {
  margin-left: auto;
  display: flex; gap: 1.6rem; align-items: center;
  font: 600 var(--fs-sm)/1 var(--esp-font); white-space: nowrap;
}
.esp-header__nav a { position: relative; color: rgba(255,255,255,.92); transition: color .25s ease; }
.esp-header__nav a:hover { color: #fff; }
.esp-header__nav a.is-active { color: #fff; }
/* sublinhado amarelo: desenha da esquerda no hover; fixo no ativo */
.esp-header__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.5rem; height: 0.1875rem;
  border-radius: var(--esp-radius-pill); background: var(--esp-yellow);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.esp-header__nav a:hover::after,
.esp-header__nav a:focus-visible::after { transform: scaleX(1); }
.esp-header__nav a.is-active::after { transform: scaleX(1); }

.esp-header__divider { width: 0.0625rem; height: 1.5rem; background: rgba(255,255,255,.3); flex: 0 0 auto; }

.esp-header__search { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,.78); font: 400 var(--fs-sm)/1 var(--esp-font); white-space: nowrap; }   /* .78 = contraste AA 4.8:1 sobre --esp-blue */
.esp-header__search img { width: 1.1875rem; height: 1.1875rem; flex: 0 0 auto; }
.esp-header__search strong { color: #fff; font-weight: 700; }
.esp-header__search:hover { color: rgba(255,255,255,.85); }
/* palavra rotativa da busca (layout.js initSearchWords, GSAP): digitação fluida + cursor amarelo.
   As fontes @T ficam nos spans (invisíveis mas mensuráveis); sem JS/GSAP/reduced-motion só a 1ª aparece. */
.esp-header__search-words { position: relative; white-space: nowrap; }
/* spans SEM classe = as fontes @T (o live/caret têm classe própria e escapam destas regras) */
.esp-header__search-words > span:not([class]) { display: none; }
.esp-header__search-words > span:first-child { display: inline; }
.esp-header__search-words.is-live { display: inline-flex; align-items: baseline; overflow: hidden; }
.js .esp-header__search-words.is-live > span:not(.esp-header__search-live):not(.esp-header__search-caret) {
  display: inline-block; position: absolute; visibility: hidden; }
.esp-header__search-live { display: inline-flex; white-space: pre; }
.esp-header__search-live .l { display: inline-block; opacity: 0; }
.esp-header__search-caret { position: absolute; left: 0.125rem; top: calc(50% - 0.45em); width: 0.125rem; height: 0.9em;
  border-radius: var(--esp-radius-pill); background: var(--esp-yellow); }   /* o x é do GSAP (segue a digitação) */

.esp-lang { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.esp-lang__toggle { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; cursor: pointer; color: #fff; font: 400 var(--fs-sm)/1 var(--esp-font); }
.esp-lang__globe { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.esp-lang__caret { width: 0.625rem; height: auto; flex: 0 0 auto; }
.esp-lang__menu { position: absolute; top: 2rem; right: 0; min-width: 9.375rem; list-style: none; margin: 0; padding: 0.375rem; background: #fff; border-radius: var(--esp-radius-md); box-shadow: var(--esp-sh-drop); z-index: 60; }
.esp-lang__menu a { display: block; padding: 0.5625rem 0.75rem; border-radius: var(--esp-radius-sm); font: 600 var(--fs-sm)/1 var(--esp-font); color: var(--esp-ink-2); }
.esp-lang__menu a:hover { background: var(--esp-bg-soft); }

/* dropdown custom (.esp-select) — mesmo painel do menu de idioma; o gatilho é estilizado por página */
.esp-select { position: relative; }
.esp-select__toggle { display: flex; align-items: center; gap: 0.75rem; width: 100%; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; }
.esp-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-select__value.is-placeholder { color: var(--esp-muted); font-weight: 400; }
.esp-select__caret { flex: 0 0 auto; width: 0.85rem; height: 0.85rem; background: url(../assets/icon-arrow-dropdown.svg) center/contain no-repeat; transition: transform .25s ease; }
.esp-select.is-open .esp-select__caret { transform: rotate(180deg); }
.esp-select__menu { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; z-index: 40; margin: 0; padding: 0.375rem; list-style: none;
  background: #fff; border-radius: var(--esp-radius-md); box-shadow: var(--esp-sh-drop); max-height: 18rem; overflow-y: auto; }
.esp-select__menu[hidden] { display: none; }
.esp-select__option { padding: 0.625rem 0.75rem; border-radius: var(--esp-radius-sm); font: 400 var(--fs-body)/1.2 var(--esp-font); color: var(--esp-ink-2); cursor: pointer; }
.esp-select__option.is-active { background: var(--esp-bg-soft); }
.esp-select__option[aria-selected="true"] { color: var(--esp-blue); font-weight: 700; }

/* facade de vídeo: thumb própria (canto redondo limpo, sem a franja preta do iframe) + play; o YouTube só carrega no clique (layout.js) */
.esp-video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; display: block; }
.esp-video__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.esp-video__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--esp-blue); display: flex; align-items: center; justify-content: center; transition: background .25s ease, transform .25s ease; }
.esp-video__play:hover .esp-video__btn, .esp-video__play:focus-visible .esp-video__btn { background: var(--esp-blue-btn-hover); transform: translate(-50%, -50%) scale(1.06); }
.esp-video__btn::before { content: ""; margin-left: 0.375rem; border-left: 1.25rem solid #fff; border-top: 0.75rem solid transparent; border-bottom: 0.75rem solid transparent; }
.esp-video__frame { width: 100%; height: 100%; border: 0; display: block; }

.esp-header__burger { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; margin-left: auto; }
.esp-header__burger img { display: block; width: 1.5rem; height: auto; }

.esp-header-spacer { height: var(--esp-header-h); }

body.esp-no-scroll { overflow: hidden; }

/* Busca modal (overlay azul full-screen; resultados virão do módulo de busca do CMS no go-live) */
.esp-search { position: fixed; inset: 0; z-index: 520; display: flex; align-items: center; justify-content: center; padding: var(--esp-gutter); }
.esp-search[hidden] { display: none; }
.esp-search__backdrop { position: absolute; inset: 0; background: var(--esp-blue); opacity: 0; transition: opacity .25s ease; }
.esp-search.is-open .esp-search__backdrop { opacity: .97; }
.esp-search__box { position: relative; width: min(58rem, 100%); opacity: 0; transform: translateY(0.75rem); transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.esp-search.is-open .esp-search__box { opacity: 1; transform: none; }
.esp-search__title { margin: 0 0 1.5rem; color: #fff; font: 700 var(--fs-display)/1.1 var(--esp-font); }
.esp-search__form { position: relative; }
.esp-search__input { width: 100%; min-height: 4.5rem; padding: 1rem 5.5rem 1rem 2rem; background: none;
  border: 0.125rem solid var(--esp-cyan); border-radius: var(--esp-radius-pill); color: #fff; font: 400 var(--fs-h3)/1.2 var(--esp-font); }
.esp-search__input::-webkit-search-cancel-button { display: none; }
.esp-search__go { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem;
  border: 0; cursor: pointer; background: url(../assets/icon-search.svg) center/1.75rem no-repeat; }
.esp-search__close { position: absolute; right: 0.25rem; top: -3.25rem; width: 2.25rem; height: 2.25rem;
  border: 0; cursor: pointer; background: url(../assets/icon-close.svg) center/1.25rem no-repeat; }
@media (max-width: 600px) {
  .esp-search__title { font-size: var(--fs-h2); }
  .esp-search__input { min-height: 3.5rem; padding: 0.75rem 4rem 0.75rem 1.25rem; font-size: var(--fs-body); }
}

.esp-drawer { position: fixed; inset: 0; z-index: 500; background: rgba(8,28,48,0); transition: background .3s ease; }
.esp-drawer.is-open { background: rgba(8,28,48,.5); }
.esp-drawer__panel {
  position: absolute; top: 0; right: 0; width: min(86vw, 360px); height: 100%;
  background: #fff; box-shadow: var(--esp-sh-modal); display: flex; flex-direction: column;
  overflow-y: auto; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.esp-drawer.is-open .esp-drawer__panel { transform: translateX(0); }
.esp-drawer [data-mask] { -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

.esp-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 0.0625rem solid var(--esp-border); }
.esp-drawer__logo { height: 1.75rem; display: block; }
.esp-drawer__close { width: 2.375rem; height: 2.375rem; border: 0; background: none; cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease; }
.esp-drawer__close:hover { background: var(--esp-bg-soft); }
.esp-drawer__close::before { content: ""; width: 1.125rem; height: 1.125rem;
  background: url(../assets/icon-close2.svg) center/contain no-repeat; }

.esp-drawer__search { display: flex; align-items: center; gap: 0.625rem; margin: 1.375rem 1.5rem 0.5rem; padding: 0.875rem 1.125rem;
  border: 0.0625rem solid var(--esp-border); border-radius: var(--esp-radius-pill); color: var(--esp-muted); font: 400 var(--fs-sm)/1 var(--esp-font); transition: border-color .2s ease, background .2s ease; }
.esp-drawer__search:hover { border-color: var(--esp-blue-light); background: var(--esp-bg-soft); }
.esp-drawer__search strong { color: var(--esp-ink); font-weight: 700; }
.esp-drawer__search-ico { width: 1.1875rem; height: 1.1875rem; flex: 0 0 auto;
  background: url(../assets/icon-search2.svg) center/contain no-repeat; }

.esp-drawer__nav { display: flex; flex-direction: column; padding: 0.5rem 1.5rem; }
.esp-drawer__nav a { position: relative; display: flex; align-items: center; padding: 0.9375rem 0.25rem;
  border-bottom: 0.0625rem solid var(--esp-border); font: 600 var(--fs-body)/1.2 var(--esp-font); color: var(--esp-ink-2); transition: color .2s ease; }
.esp-drawer__nav a:last-child { border-bottom: 0; }
.esp-drawer__nav a:hover { color: var(--esp-blue); }
.esp-drawer__nav a.is-active { color: var(--esp-blue); padding-left: 0; }
.esp-drawer__nav a.is-active::before { content: ""; width: 0.25rem; height: 1.125rem; border-radius: var(--esp-radius-pill); background: var(--esp-yellow); margin: 0 0.625rem 0 -0.25rem; }

.esp-drawer__lang { margin-top: auto; padding: 1.25rem 1.5rem 1.5rem; background: var(--esp-gray); }
.esp-drawer__lang-label { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font: 700 var(--fs-sm)/1 var(--esp-font); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,.65); }
.esp-drawer__globe { width: 1.25rem; height: 1.25rem; background: rgba(255,255,255,.65);
  -webkit-mask: url(../assets/icon-language2.svg) center/contain no-repeat; mask: url(../assets/icon-language2.svg) center/contain no-repeat; }
.esp-drawer__lang-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; }
.esp-drawer__lang-list li { flex: 1; display: flex; }
.esp-drawer__lang-list a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5625rem 0.375rem; border-radius: var(--esp-radius-pill);
  border: 0.0625rem solid rgba(255,255,255,.28); background: transparent; font: 600 var(--fs-sm)/1 var(--esp-font); color: rgba(255,255,255,.9); white-space: nowrap; transition: all .2s ease; }
.esp-drawer__lang-list a:hover { border-color: rgba(255,255,255,.55); }
.esp-drawer__lang-list a.is-current { background: #fff; color: var(--esp-gray); border-color: #fff; }

.esp-hero { position: relative; min-height: 27.5rem; display: flex; align-items: center; background: var(--esp-blue-deep); overflow: hidden; }
.esp-hero__bg { position: absolute; inset: 0; z-index: 0; }
.esp-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* escurece à esquerda p/ contraste do título branco */
.esp-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(8,40,77,.78) 0%, rgba(8,40,77,.45) 32%, rgba(8,40,77,0) 62%); pointer-events: none; }
.esp-hero__wave { position: absolute; left: 0; right: 0; bottom: -0.0625rem; width: 100%; height: auto; z-index: 1; pointer-events: none; }
.esp-hero__wave img { display: block; width: 100%; height: auto; }
.esp-hero__inner { position: relative; z-index: 3; max-width: var(--esp-container); margin: 0 auto; padding: 0 var(--esp-gutter); width: 100%; }
/* hero genérico de página interna (sobre/contato/…). -1px cobre o fio sub-pixel do <img> SVG da wave */
.page-hero { min-height: var(--esp-hero-min); }
.page-hero .esp-hero__wave { z-index: 2; bottom: -1px; }
/* mobile: 1ª seção branca (após .page-hero) sobe sob a curva da wave — senão sobra muito branco entre a wave e o título */
@media (max-width: 768px) { section.page-intro { position: relative; z-index: 3; margin-top: -10vw; padding-top: 1rem; } }
.esp-hero__title { display: block; margin: 0; color: #fff; font: 700 var(--fs-display)/1 var(--esp-font); letter-spacing: -0.01em; }

.esp-footer { background: var(--esp-footer); }
.esp-footer__inner { max-width: var(--esp-container); margin: 0 auto; padding: 1.375rem var(--esp-gutter); display: flex; align-items: center; gap: 1.25rem 1.75rem; flex-wrap: wrap; }
.esp-footer__copy { font: 400 var(--fs-sm)/1.5 var(--esp-font); color: rgba(255,255,255,.85); }
.esp-footer__nav { display: flex; gap: 1.5rem; }
.esp-footer__nav a { font: 400 var(--fs-sm)/1 var(--esp-font); color: rgba(255,255,255,.85); border-bottom: 0.0625rem solid rgba(255,255,255,.4); padding-bottom: 0.0625rem; }
.esp-footer__nav a:hover { color: #fff; }
.esp-footer__top { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5625rem; font: 600 var(--fs-sm)/1 var(--esp-font); color: rgba(255,255,255,.85); }
.esp-footer__top img { width: 1.875rem; height: 1.875rem; }
.esp-footer__top:hover { color: #fff; }

@media (max-width: 1100px) {
  :root { --esp-gutter: 2.25rem; --esp-sec-y: 4.5rem; }
  .esp-header__nav { gap: 1.125rem; font-size: var(--fs-sm); }
}
@media (max-width: 980px) {
  .esp-header__nav, .esp-header__divider, .esp-lang { display: none; }
  /* mobile: a busca vira só a lupa (1 toque → modal), encostada no burger.
     texto sr-only (não display:none) → o link mantém o nome acessível "Busque por …" */
  .esp-header__search { margin-left: auto; }
  .esp-header__search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .esp-header__burger { display: block; margin-left: 0; }
  .esp-hero__title { font-size: var(--fs-h2); }
}
@media (max-width: 600px) {
  :root { --esp-gutter: 1.25rem; --esp-sec-y: 3.25rem; }
  .esp-hero { min-height: 16.25rem; }
  .esp-hero__overlay { background: linear-gradient(180deg, rgba(8,40,77,.35) 0%, rgba(8,40,77,.55) 42%, rgba(8,40,77,.82) 100%); }
  .esp-h2 { font-size: var(--fs-h3); }
  .esp-footer__inner { flex-direction: column; align-items: flex-start; }
  .esp-footer__top { margin-left: 0; }
}