/* Pablo Guterres · Grupo DNX — folha de estilo
   CSS vanilla. Sem framework, sem pré-processador. */

/* ---------- Reset mínimo ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--ocre);
  color: var(--branco);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: var(--peso-normal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

h1, h2, h3, p, blockquote, figure { margin: 0; }

a { color: var(--branco); text-decoration: none; }
a:hover { color: var(--creme); }

em { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Estrutura ---------- */
.secao { position: relative; padding: var(--secao-y) 0; overflow: hidden; }
.secao--ocre { background: var(--ocre); }
.secao--amarelo { background: #FFC847; }
.secao--marrom { background: var(--marrom); }
.secao--azul { background: var(--azul); }
.secao--verde { background: var(--verde); }
.secao--continua { padding-top: 0; }
.secao--padrao-bolinhas { background-color: var(--ocre); }
.secao--forma-trabalhar { background-color: #F4F0E2; color: var(--tinta); }
.secao--forma-trabalhar .titulo-secao,
.secao--forma-trabalhar .titulo-grupo,
.secao--forma-trabalhar h2,
.secao--forma-trabalhar h3,
.secao--forma-trabalhar h4,
.secao--forma-trabalhar .nome { color: var(--tinta); }
.secao--forma-trabalhar .rotulo,
.secao--forma-trabalhar .rotulo--claro,
.secao--forma-trabalhar .eyebrow,
.secao--forma-trabalhar .legenda,
.secao--forma-trabalhar .texto--nota { color: var(--tinta-suave); }
.secao--forma-trabalhar .texto { color: var(--tinta); }
.secao--forma-trabalhar .eyebrow__filete { background: var(--tinta-suave); }
.secao--forma-trabalhar .foto { border-color: var(--linha); background: var(--superficie-alt); }
.secao--forma-trabalhar .foto__vazio { color: var(--tinta-suave); }
.secao--forma-trabalhar .metodo-seta { color: var(--tinta); }
.secao--forma-trabalhar .metodo-fade--direita { background: linear-gradient(270deg, #F4F0E2, rgba(244, 240, 226, 0)); }
.secao--padrao-bolinhas::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23E0D2B7' fill-opacity='0.14' fill-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 18%, transparent 48%);
  mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 18%, transparent 48%);
}
.secao--forma-trabalhar.secao--padrao-bolinhas::before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23834A1F' fill-opacity='0.12' fill-rule='evenodd'/%3E%3C/svg%3E");
  inset: auto 0 0 auto;
  width: min(50%, 660px);
  height: clamp(320px, 38vw, 520px);
  background-size: 36px 36px;
  background-position: right bottom;
  -webkit-mask-image: linear-gradient(315deg, rgba(0, 0, 0, 0.82) 0%, transparent 56%);
  mask-image: linear-gradient(315deg, rgba(0, 0, 0, 0.82) 0%, transparent 56%);
  opacity: 0.62;
}
.secao--forma-trabalhar.secao--padrao-bolinhas {
  background-color: #F4F0E2;
}
.secao--parceiros {
  background-color: var(--ocre);
}
.secao--parceiros,
.secao--parceiros .titulo-secao,
.secao--parceiros .titulo-grupo,
.secao--parceiros .citacao,
.secao--parceiros .case-documento__cabecalho h3,
.secao--parceiros .case-documento__cabecalho p,
.secao--parceiros .case-documento__corpo {
  color: var(--branco);
}
.secao--parceiros .case-documento {
  border-top-color: rgba(255, 255, 255, 0.38);
}
.secao--parceiros .case-documento .foto {
  border-color: rgba(255, 255, 255, 0.38);
}
.secao--parceiros .case-documento__resultado {
  border-top-color: rgba(255, 255, 255, 0.3);
}
.secao--frentes {
  background-color: #F4F0E2;
  color: var(--preto);
}
.secao--frentes .titulo-secao,
.secao--frentes .titulo-grupo,
.secao--frentes .card__titulo,
.secao--frentes .card__texto,
.secao--frentes .rotulo,
.secao--frentes .legenda {
  color: var(--preto);
}
.secao--frentes.secao--frentes .btn {
  color: var(--ocre);
  border-color: var(--branco);
  background: var(--branco);
}
.secao--frentes.secao--adorno-circulo::before,
.secao--frentes.secao--adorno-circulo::after {
  border-color: rgba(255, 255, 255, 0.1);
}
.secao--frentes > .container > .grade {
  padding-top: clamp(40px, 4vw, 56px);
}
.secao--frentes .card {
  height: 100%;
}
.secao--frentes .card .foto {
  margin-top: auto;
}
.secao--frentes .card .foto--marca {
  margin-top: 0;
  aspect-ratio: 4 / 5;
}
.foto--marca::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.06) 72%);
  pointer-events: none;
}
.foto .foto__logo {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 24px;
  width: min(62%, 250px);
  height: 72%;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  transform: translateY(-50%);
  filter: brightness(0) invert(1);
}
.secao--hotelaria { background-color: #245E86; }
.secao--desco { background-color: #5F050A; }
.secao--desconexo { background-color: #907639; }
.secao--depoimentos {
  background-color: #F4F0E2;
  color: var(--preto);
}
.secao--depoimentos .titulo-secao,
.secao--depoimentos .titulo-grupo,
.secao--depoimentos .nome,
.secao--depoimentos .rotulo,
.secao--depoimentos .legenda {
  color: var(--preto);
}

/* ---------- Adornos de fundo (formas geométricas discretas) ---------- */
.secao--adorno-circulo::before,
.secao--adorno-circulo::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.secao--adorno-circulo::before {
  width: clamp(360px, 44vw, 720px);
  height: clamp(360px, 44vw, 720px);
  right: clamp(-220px, -14vw, -80px);
  top: clamp(-160px, -8vw, -40px);
}
.secao--adorno-circulo::after {
  width: clamp(180px, 22vw, 360px);
  height: clamp(180px, 22vw, 360px);
  left: clamp(-140px, -9vw, -60px);
  bottom: clamp(-120px, -7vw, -40px);
  border-color: rgba(255, 255, 255, 0.08);
}
.secao--amarelo.secao--adorno-circulo::before,
.secao--amarelo.secao--adorno-circulo::after { border-color: rgba(0, 0, 0, 0.1); }
.secao--adorno-sem-direita::before { display: none; }

.secao--adorno-casinhas::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("assets/Padrao_Casas_cor.svg");
  background-repeat: repeat;
  background-size: clamp(56px, 5.4vw, 80px) auto;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 18%, transparent 48%);
  mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 18%, transparent 48%);
}

.secao > .container { position: relative; z-index: 1; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--secao-x);
}

.pilha { display: flex; flex-direction: column; gap: var(--bloco-gap); }
.pilha--larga { gap: var(--bloco-gap-l); }
.pilha--media { gap: var(--gap-32); }
.pilha--curta { gap: var(--gap-24); }
.pilha--minima { gap: var(--gap-16); }

.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-32);
}
.metodo-cards { align-items: stretch; }
.metodo-cards > .pilha { height: 100%; }
.metodo-cards__rodape { display: flex; flex-direction: column; gap: var(--gap-16); margin-top: auto; }
.metodo-cards__titulo { color: var(--preto) !important; font-family: var(--fonte-titulo); font-size: var(--t-sub); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.metodo-cards .eyebrow__filete { width: 56px; height: 2px; background: var(--amarelo); }
.metodo-cards__descricao { font-size: var(--t-legenda); line-height: 1.5; color: var(--tinta-suave); }
.metodo-cards__descricao strong { color: var(--tinta); font-weight: 600; }
.grade--estreita { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade--fina { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap-16); }
.grade--documentos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }

/* ---------- Eyebrow e títulos ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--gap-16);
  flex-wrap: wrap;
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--creme);
}
.eyebrow__numero { text-transform: none; }
.eyebrow__filete { width: 40px; height: 1px; background: var(--creme); }
.eyebrow--escuro { color: var(--preto); }
.eyebrow--escuro .eyebrow__filete { background: var(--preto); }

.hero__titulo {
  max-width: 30ch;
  font-family: var(--fonte-titulo);
  font-size: var(--t-hero);
  font-weight: var(--peso-leve);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.titulo-secao {
  max-width: 24ch;
  font-family: var(--fonte-titulo);
  font-size: var(--t-secao);
  font-weight: var(--peso-medio);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.titulo-secao--curto { max-width: 20ch; }
.titulo-secao--escuro { color: var(--preto); max-width: 22ch; }

.titulo-grupo {
  max-width: 24ch;
  font-family: var(--fonte-titulo);
  font-size: var(--t-sub);
  font-weight: var(--peso-medio);
  line-height: 1.2;
}

.declaracao {
  max-width: min(60%, 32ch);
  font-size: var(--t-declaracao);
  font-weight: var(--peso-leve);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.declaracao--territorio {
  max-width: min(60%, 34ch);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
}

.texto { max-width: 62ch; line-height: 1.6; }
.texto--curto { max-width: 52ch; font-size: var(--t-corpo-s); }
.texto--nota { max-width: 70ch; font-size: var(--t-nota); color: var(--creme); }
.texto--escuro { color: var(--preto); }

.citacao {
  border-left: 3px solid var(--preto);
  padding-left: 20px;
  max-width: 46ch;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: var(--peso-leve);
  line-height: 1.3;
  color: var(--preto);
}
.citacao--parceiros { margin-bottom: clamp(40px, 5vw, 64px); }

.rotulo {
  font-size: var(--t-rotulo-s);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--creme);
}
.rotulo--claro { color: var(--branco); font-size: var(--t-rotulo); letter-spacing: var(--track-rotulo-s); }

.legenda { font-size: var(--t-legenda); line-height: 1.5; color: var(--creme); }
.nome { font-size: var(--t-corpo); font-weight: var(--peso-normal); }
.nome--grande { font-size: 18px; line-height: 1.3; }

/* ---------- Pendências (conteúdo a receber) ---------- */
.pendente {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--amarelo);
  border: 1px dashed var(--amarelo);
  padding: 6px 10px;
}
.pendente--grande { font-size: 12px; padding: 12px 16px; }

/* ---------- Foto ---------- */
.foto {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid var(--filete);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto__vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  text-align: center;
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--creme);
}
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--4x5 { aspect-ratio: 4 / 5; }
.foto--3x4 { aspect-ratio: 3 / 4; }
.foto--16x9 { aspect-ratio: 16 / 9; }
.foto--21x9 { aspect-ratio: 21 / 9; }
.foto--hero { height: 100%; border: none; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-12);
  padding: 14px 24px;
  border: 1px solid var(--branco);
  border-radius: var(--raio-pilula);
  background: var(--branco);
  font-family: inherit;
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo-s);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ocre);
  cursor: pointer;
  transition: transform var(--transicao);
}
.btn:hover { transform: scale(1.04); }
.btn:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }
.secao--ocre .btn, .btn--ocre { color: var(--ocre); }
.secao--marrom .btn { color: var(--marrom); }
.secao--verde .btn { color: var(--verde); }
.secao--amarelo .btn { color: var(--ocre); }
.secao--azul .btn { color: var(--azul); }

.btn--creme {
  border-color: var(--branco);
  background: var(--branco);
  color: var(--ocre);
}
.btn--creme:focus-visible { outline-color: var(--branco); }

.btn--pequeno { padding: 10px 18px; font-size: var(--t-rotulo-s); gap: 10px; }

.btn--bloco {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  text-align: left;
  letter-spacing: 0.14em;
}

.btn--enviar {
  border-color: var(--azul);
  background: var(--azul);
  color: var(--branco);
}
.btn--enviar:hover { background: var(--azul-escuro); color: var(--branco); }
.btn--enviar:focus-visible { outline-color: var(--tinta); }

.linha-botoes { display: flex; flex-direction: column; gap: var(--gap-12); align-items: flex-start; }
.linha-botoes--cheia { max-width: 480px; align-items: stretch; }

/* ---------- Capa ---------- */
.capa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(340px, 1.25fr);
  min-height: clamp(760px, 50vw, 900px);
  background: var(--ocre);
  overflow: hidden;
  align-items: stretch;
}
@media (max-width: 780px) {
  .capa { grid-template-columns: 1fr; min-height: auto; }
}
.capa__midia {
  position: relative;
  z-index: 1;
  align-self: stretch;
}
.capa__midia .foto--hero { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.capa__texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  padding: clamp(48px, 6vw, 80px);
}

/* ---------- Números ---------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
}
.numeros__item { padding: var(--gap-24) 20px; border-left: 1px solid var(--filete); }
.numeros__item:first-child { padding-left: 0; border-left: none; }
.numeros__valor {
  font-size: 36px;
  font-weight: var(--peso-leve);
  line-height: 1;
  letter-spacing: -0.02em;
}
.numeros__rotulo {
  margin-top: 10px;
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo-s);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--creme);
}
.numeros__fonte { margin-top: var(--gap-16); max-width: 60ch; font-size: var(--t-legenda); color: var(--creme); }
.numeros--escuro { border-color: rgba(0, 0, 0, 0.2); }
.numeros--escuro .numeros__item { border-color: rgba(0, 0, 0, 0.2); }
.numeros--escuro .numeros__valor { color: var(--preto); }
.numeros--escuro .numeros__rotulo { color: rgba(0, 0, 0, 0.65); }
.numeros--grande {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: none;
}
.numeros--grande .numeros__item {
  padding: 0 var(--gap-24);
  border-top: none;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.numeros--grande .numeros__item:first-child { padding-left: 0; border-left: none; }
.numeros--grande .numeros__valor {
  font-family: var(--fonte-destaque);
  font-size: clamp(38px, 4.9vw, 70px);
  font-weight: 400;
  letter-spacing: 0;
  color: #1a1a1a;
}
.numeros--grande .numeros__rotulo { margin-top: 14px; }
@media (max-width: 640px) {
  .numeros--grande { grid-template-columns: 1fr 1fr; row-gap: var(--gap-24); }
  .numeros--grande .numeros__item:nth-child(2n) { border-left: 1px solid rgba(0, 0, 0, 0.2); padding-left: var(--gap-24); }
  .numeros--grande .numeros__item:nth-child(2n+1) { padding-left: 0; border-left: none; }
}

/* ---------- Quem sou ---------- */
.quem-somos {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.3fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.quem-somos__intro { display: flex; flex-direction: column; gap: 20px; }
.quem-somos__titulo { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; max-width: none; }
.quem-somos__texto { max-width: 48ch; }
.secao--pablo-card {
  width: min(calc(100% - 48px), 1120px);
  margin: clamp(-176px, -12vw, -144px) auto clamp(-176px, -12vw, -144px);
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: 4px;
  z-index: 2;
}
.secao--pablo-card .container { padding: 0; }
.secao--pablo-card .quem-somos {
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(28px, 4vw, 52px);
}
.secao--pablo-card .quem-somos__intro { gap: var(--gap-12); }
.secao--pablo-card .quem-somos__titulo { font-size: clamp(24px, 2.4vw, 32px); }
.secao--pablo-card .quem-somos__texto { font-size: var(--t-corpo-s); line-height: 1.45; }
.secao--pablo-card .numeros--grande .numeros__valor { font-size: clamp(32px, 3.3vw, 48px); }
.secao--pablo-card .numeros--grande .numeros__rotulo { margin-top: var(--gap-8); }
.secao--parceiros::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(46%, 640px);
  background-image: url("assets/modulos-arcos.svg");
  background-repeat: repeat;
  background-size: clamp(140px, 12vw, 220px) auto;
  background-position: left top;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, transparent 68%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, transparent 68%);
  opacity: 0.07;
  pointer-events: none;
}
.secao--parceiros > .container { position: relative; z-index: 1; padding-top: clamp(224px, 17vw, 272px) !important; }
.citacao--parceiros span {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.case-documento {
  display: grid;
  grid-template-columns: minmax(138px, 0.58fr) minmax(0, 1fr);
  gap: var(--gap-20, 20px) var(--gap-24);
  padding-top: var(--gap-24);
  border-top: 1px solid rgba(26, 26, 26, 0.22);
}
.case-documento .foto { grid-row: span 2; align-self: stretch; aspect-ratio: auto; border-color: rgba(26, 26, 26, 0.22); border-radius: 4px; }
.case-documento__cabecalho { display: flex; flex-direction: column; gap: var(--gap-4); }
.case-documento__cabecalho .rotulo { color: var(--marrom); }
.case-documento__cabecalho h3 { font-family: var(--fonte-titulo); font-size: 22px; font-weight: var(--peso-medio); line-height: 1.15; }
.case-documento__cabecalho p { font-size: var(--t-legenda); line-height: 1.4; color: var(--tinta-suave); }
.case-documento__corpo { display: flex; flex-direction: column; gap: var(--gap-8); font-size: var(--t-corpo-s); line-height: 1.5; }
.case-documento__corpo strong { font-weight: 600; }
.case-documento__resultado { margin-top: var(--gap-8); padding-top: var(--gap-12); border-top: 1px solid rgba(26, 26, 26, 0.16); }
@media (max-width: 960px) {
  .quem-somos { grid-template-columns: 1fr; }
  .secao--pablo-card { margin: -112px auto; }
}
@media (max-width: 640px) {
  .secao--pablo-card { width: calc(100% - 32px); margin: -64px auto; }
  .secao--parceiros > .container { padding-top: 144px !important; }
  .secao--pablo-card .quem-somos { grid-template-columns: 1fr; }
  .grade--documentos { grid-template-columns: 1fr; }
}

/* ── Bloco Método: grade de entregáveis ───────────────────────── */
.metodo-chapeu{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--creme); margin-bottom:22px;
}
.metodo-entregaveis-wrap{
  position:relative;
  padding:0 56px;
}
.metodo-entregaveis{
  display:flex; gap:24px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  padding:6px 4px 20px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.metodo-entregaveis::-webkit-scrollbar{ display:none; }
.metodo-fade{
  position:absolute; top:0; bottom:16px; width:72px;
  pointer-events:none; z-index:1;
  opacity:1;
  transition:opacity var(--transicao);
}
.metodo-fade--direita{ right:56px; background:linear-gradient(270deg, var(--ocre), rgba(144,118,57,0)); }
.metodo-fade--oculto{ opacity:0; }
@media (max-width:900px){
  .metodo-fade{ display:none; }
}
.metodo-seta{
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:calc(50% - 8px); transform:translateY(-50%);
  width:40px; height:56px;
  border:none;
  background:transparent;
  color:var(--branco);
  cursor:pointer;
  z-index:2;
  opacity:0.75;
  transition:opacity var(--transicao);
}
.metodo-seta:hover{ opacity:1; }
.metodo-seta svg{ width:32px; height:32px; }
.metodo-seta--prev{ left:0; }
.metodo-seta--next{ right:0; }
@media (max-width:900px){
  .metodo-entregaveis-wrap{ padding:0; }
  .metodo-seta{ display:none; }
}
.entregavel{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  flex:0 0 260px;
  scroll-snap-align:start;
  min-height:200px; padding:28px 24px 24px;
  border:1px solid rgba(144, 118, 57, 0.58);
  border-radius:0;
  background:linear-gradient(145deg, #E9DCBE 0%, #DCC99E 100%);
  box-shadow:none;
}
.entregavel-ico{
  color:var(--ocre); height:30px; margin-bottom:14px;
  display:flex; align-items:flex-end;
  flex:0 0 auto;
}
.entregavel-ico svg{ width:30px; height:30px; }
.entregavel h4{
  font-size:14px; font-weight:600; line-height:1.32; margin:0 0 10px;
  color:var(--tinta); text-transform:uppercase; letter-spacing:.075em;
  min-height:2.6em;
}
.entregavel p{
  font-size:13px; line-height:1.55; color:var(--tinta-suave);
  margin:0; font-weight:400;
}
.metodo-paginacao{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:20px;
}
.metodo-paginacao__item{
  width:8px;
  height:8px;
  padding:0;
  border:1px solid var(--ocre);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background var(--transicao), transform var(--transicao);
}
.metodo-paginacao__item[aria-current="true"]{
  background:var(--ocre);
  transform:scale(1.15);
}
.metodo-cta{ text-align:center; }
@media (max-width:900px){
  .metodo-entregaveis{ margin-top:48px; }
  .entregavel{ flex-basis:240px; min-height:0; }
  .entregavel h4{ min-height:0; }
}

/* ---------- Etapas ---------- */
.etapas { border-top: 1px solid var(--filete-fraco); }
.etapas__linha {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 280px);
  gap: var(--gap-24);
  padding: 28px 20px;
  border-bottom: 1px solid var(--filete-fraco);
}
.etapas__linha:nth-child(odd) { background: var(--realce); }
.etapas__rotulo {
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo-s);
  text-transform: uppercase;
  color: var(--creme);
}
.etapas__texto { line-height: 1.5; }
.etapas__caso { font-size: var(--t-legenda); line-height: 1.5; color: var(--creme); }
@media (max-width: 720px) {
  .etapas__linha { grid-template-columns: 1fr; gap: var(--gap-12); padding: 24px 16px; }
}

/* ---------- Etapas: linha do tempo ---------- */
.etapas--linha-do-tempo { position: relative; border-top: none; padding-right: min(34%, 400px); }
.etapas--linha-do-tempo .etapas__linha {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--gap-24);
  padding: 0;
  margin-bottom: var(--gap-24);
  border-bottom: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--transicao);
}
.etapas--linha-do-tempo .etapas__linha:nth-child(odd) { background: transparent; }
.etapas__marco {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.etapas__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--filete);
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  color: var(--branco);
}
.etapas__fio {
  flex: 1 1 auto;
  width: 1px;
  min-height: 32px;
  margin-top: 4px;
  background: var(--filete-fraco);
}
.etapas__corpo { padding-bottom: 40px; }
.etapas__linha--ultima .etapas__corpo { padding-bottom: 0; }
.etapas--linha-do-tempo .etapas__corpo {
  padding: 0 var(--gap-16) var(--gap-24);
  border-bottom: 1px solid var(--filete-fraco);
  transition: background var(--transicao);
}
.etapas--linha-do-tempo .etapas__linha--ultima {
  margin-bottom: 0;
  border-bottom: 0;
}
.etapas--linha-do-tempo .etapas__linha--ultima .etapas__corpo { border-bottom: 0; }
.etapas--linha-do-tempo .etapas__rotulo { margin-bottom: 8px; }
.etapas--linha-do-tempo .etapas__texto { color: var(--branco); }
.etapas--linha-do-tempo .etapas__caso { margin-top: 8px; }
.etapas__ver-caso {
  margin-left: var(--gap-8);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--amarelo);
  font: inherit;
  font-size: var(--t-rotulo-s);
  letter-spacing: var(--track-rotulo-s);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.etapas__ver-caso::after { content: " ↗"; }
.etapas--linha-do-tempo .etapas__linha:hover .etapas__num,
.etapas--linha-do-tempo .etapas__linha:focus-visible .etapas__num,
.etapas--linha-do-tempo .etapas__linha[aria-expanded="true"] .etapas__num {
  border-color: var(--amarelo);
  background: rgba(255, 181, 12, 0.14);
}
.etapas--linha-do-tempo .etapas__linha:hover .etapas__corpo,
.etapas--linha-do-tempo .etapas__linha:focus-visible .etapas__corpo,
.etapas--linha-do-tempo .etapas__linha[aria-expanded="true"] .etapas__corpo {
  background: rgba(255, 255, 255, 0.06);
}
.etapas--linha-do-tempo .etapas__linha:focus-visible { outline: none; }
.etapas__preview {
  position: fixed;
  top: 0;
  left: 0;
  width: min(30vw, 360px);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  z-index: 10;
  transition: opacity var(--transicao), transform var(--transicao);
}
.etapas__preview.is-visible { opacity: 1; transform: translateY(0); }
.etapas__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 4px;
}
.etapas__modal { display: none; }
@media (max-width: 720px) {
  .etapas--linha-do-tempo { padding-right: 0; }
  .etapas--linha-do-tempo .etapas__linha { grid-template-columns: 40px minmax(0, 1fr); gap: var(--gap-16); }
  .etapas__num { width: 40px; height: 40px; }
  .etapas__preview { display: none; }
  .etapas__modal {
    width: min(calc(100% - 32px), 480px);
    padding: var(--gap-12);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 4px;
    background: var(--marrom);
    color: var(--branco);
  }
  .etapas__modal[open] { display: block; }
  .etapas__modal::backdrop { background: rgba(0, 0, 0, 0.62); }
  .etapas__modal img { display: block; width: 100%; border-radius: 2px; }
  .etapas__modal p { margin: var(--gap-12) 0 var(--gap-4); font-size: var(--t-nota); color: var(--creme); }
  .etapas__modal-fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    margin-bottom: var(--gap-8);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: transparent;
    color: var(--branco);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
}

/* ---------- Cards ---------- */
.card { display: flex; flex-direction: column; gap: var(--gap-16); }
.card__titulo { font-family: var(--fonte-titulo); font-size: var(--t-card); font-weight: var(--peso-leve); line-height: 1.2; }
.card__texto { max-width: 46ch; font-size: var(--t-corpo-s); line-height: 1.6; }
.logo-frente {
  display: block;
  align-self: flex-start;
  width: auto;
  margin-left: -24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.logo-frente--cabecalho {
  height: 176px;
  max-width: 370px;
  margin-bottom: -48px;
  transform: translateY(-32px);
}
.logo-frente--desco { margin-left: -14px; }
.card--case { gap: 14px; }
.card__divisor { height: 1px; background: var(--filete-fraco); }

.grupo-cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
  border-top: none;
  padding-top: 0;
}

/* ---------- Collabs ---------- */
.painel {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  color: var(--tinta);
}
.painel .rotulo { color: var(--azul); }
.painel p { max-width: 64ch; font-size: var(--t-corpo-s); }

.carrossel {
  display: flex;
  gap: var(--gap-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--gap-8);
}
.carrossel__item {
  flex: 0 0 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.carrossel .foto { border-color: var(--linha); background: var(--superficie-alt); }
.carrossel .foto__vazio { color: var(--tinta-suave); }
.carrossel__nome { font-size: var(--t-corpo); }
.carrossel__desc { font-size: var(--t-legenda); line-height: 1.5; color: var(--tinta-suave); }

/* ---------- Listas de formação ---------- */
.lista__titulo {
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo-s);
  text-transform: uppercase;
  padding-bottom: var(--gap-16);
}
.lista__item {
  border-top: 1px solid var(--filete-fraco);
  padding: var(--gap-16) 0;
  font-size: var(--t-corpo);
}
.lista__item:last-child { border-bottom: 1px solid var(--filete-fraco); }

/* ---------- Contato ---------- */
.contato-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--filete-fraco);
}
.contato-grade__item {
  padding: 28px var(--gap-24);
  border-left: 1px solid var(--filete-fraco);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contato-grade__item:first-child { padding-left: 0; border-left: none; }

.assinatura { font-size: var(--t-rotulo); letter-spacing: 0.08em; color: var(--creme); }

/* ---------- Modais ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  overflow-y: auto;
}
.overlay[hidden] { display: none; }
.overlay--form { align-items: flex-start; padding: clamp(16px, 5vh, 64px) 16px; }
.overlay--video { align-items: center; padding: var(--gap-24); }

.modal {
  width: 100%;
  max-width: 520px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  box-shadow: var(--sombra-form);
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  color: var(--tinta);
}
.modal__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-24);
}
.modal__origem {
  font-size: var(--t-rotulo-s);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--azul);
}
.modal__titulo {
  max-width: 24ch;
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: var(--peso-leve);
  line-height: 1.2;
  color: var(--tinta);
}
.modal__fechar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--transicao);
}
.modal__fechar:hover { background: var(--superficie-alt); }
.modal__fechar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.form { display: flex; flex-direction: column; gap: var(--gap-16); }
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  font-size: var(--t-rotulo-s);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo-s);
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.campo input,
.campo textarea {
  font-family: inherit;
  font-size: var(--t-corpo-s);
  font-weight: var(--peso-normal);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tinta);
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  background: var(--branco);
}
.campo textarea { resize: vertical; }
.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--azul); }

.form__nota { font-size: 12px; line-height: 1.5; color: var(--tinta-suave); }
.form__sucesso { display: flex; flex-direction: column; gap: var(--gap-12); }
.form__sucesso[hidden] { display: none; }
.form__sucesso-titulo { font-size: 18px; line-height: 1.4; color: var(--tinta); }
.form__sucesso-nota { font-size: var(--t-legenda); line-height: 1.5; color: var(--tinta-suave); }

.video {
  width: 100%;
  max-width: 960px;
  background: var(--preto);
  border: 1px solid rgba(224, 210, 183, 0.4);
  display: flex;
  flex-direction: column;
}
.video__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-24);
  padding: var(--gap-16) 20px;
  border-bottom: 1px solid var(--filete-fraco);
}
.video__fechar {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(224, 210, 183, 0.4);
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--creme);
  cursor: pointer;
  transition: background var(--transicao);
}
.video__fechar:hover { background: rgba(224, 210, 183, 0.15); }
.video__fechar:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }
.video__palco {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-24);
}

body.travado { overflow: hidden; }