/* ==========================================================================
   PLAY MARCAS — folha de estilo
   --------------------------------------------------------------------------
   1.  TOKENS                 variaveis de cor, tipografia, espaco, motion
   2.  BASE                   reset, elementos, acessibilidade
   3.  PAPEIS TIPOGRAFICOS    classes de texto reutilizaveis
   4.  LAYOUT                 container, secao, grades recorrentes
   5.  COMPONENTES            um bloco por componente, na ordem da pagina
   6.  RESPONSIVO             ajustes por breakpoint
   7.  PREFERENCIAS           reduced motion
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* -- Cor: superficies ---------------------------------------------------
     --orange e superficie E texto sobre branco (4.65:1 nos dois casos).
     --orange-ink e a versao para laranja como TEXTO sobre creme/pale,
     onde o --orange sozinho ficaria em 4.40:1.                            */
  --orange: #b25c1f;
  --orange-ink: #a8531a;
  --orange-deep: #93470f;
  --orange-pale: #f7dac5;
  --cream: #fbf6f1;
  --white: #fdfdfd;
  --brown: #573220;
  --brown-mid: #6a412b;
  --brown-dark: #3c2216;
  --brown-deep: #321b10;
  --ink: #2b1911;
  --muted: #765d50;
  --line: rgba(87, 50, 32, .16);
  --line-light: rgba(253, 253, 253, .22);

  /* -- Cor: texto sobre superficie escura/laranja -------------------------
     Sobre o laranja o texto de corpo precisa ser opaco: qualquer
     transparencia derruba o contraste abaixo de 4.5:1.                    */
  --on-orange: var(--white);
  --on-orange-muted: rgba(253, 253, 253, .92);
  --on-brown: rgba(253, 253, 253, .82);
  --on-brown-soft: rgba(253, 253, 253, .68);

  /* -- Tipografia: familias ----------------------------------------------- */
  --font-display: "Antonio", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-text: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* -- Tipografia: escala de 9 papeis --------------------------------------
     Display em clamp(); texto em degraus fixos. Piso de 12px: nada
     abaixo disso em nenhum papel.                                         */
  /* Os maximos sao medidos: a maior linha de cada papel tem de caber na
     sua coluna sem estourar as quebras <br> definidas no HTML.           */
  --type-display-1: clamp(3rem, 5.9vw, 5.25rem);        /* h1 do hero      */
  --type-display-2: clamp(2.5rem, 4.6vw, 4.25rem);      /* h2 de secao     */
  --type-display-3: clamp(2rem, 3.1vw, 2.75rem);        /* h3 de card      */
  --type-display-4: clamp(1.375rem, 1.7vw, 1.6875rem);  /* h3 em linha/faq */
  --type-lead: clamp(1.0625rem, .35vw + 1rem, 1.1875rem); /* apoio         */
  --type-body: 1.0625rem;                                /* 17px           */
  --type-body-sm: .9375rem;                              /* 15px           */
  --type-label: .8125rem;                                /* 13px           */
  --type-eyebrow: .75rem;                                /* 12px — PISO    */

  /* Papeis display fora da escala de manchete. */
  --type-numeral: 2rem;                       /* o "01" grande de lista   */
  --type-marquee: clamp(1.25rem, 1.6vw, 1.5rem);

  /* Glifos ornamentais (setas, +, x, play). Nao sao papeis de texto:
     nao carregam conteudo e por isso ficam fora da escala acima.         */
  --icon-xs: .85rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.6rem;

  /* -- Tipografia: entrelinha ---------------------------------------------
     --lh-display medido nas metricas reais da Antonio: o acento agudo em
     caixa alta sobe a 1.118em e a cedilha desce 0.306em, entao qualquer
     valor abaixo de 1.175 faz o acento bater na linha de cima.            */
  --lh-display: 1.18;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  /* -- Tipografia: tracking ------------------------------------------------ */
  --ls-display: -.03em;
  --ls-eyebrow: .12em;

  /* -- Espaco -------------------------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-gap: clamp(2.5rem, 6vw, 6rem);
  --section-y: clamp(4.5rem, 7.5vw, 7.5rem);
  --container: 76rem;
  --measure: 34rem;

  /* -- Forma --------------------------------------------------------------- */
  --radius-sm: .25rem;     /* 4px  */
  --radius: .375rem;       /* 6px  */
  --shadow-card: 0 .55rem 1.1rem rgba(87, 50, 32, .13);
  --shadow-lift: 0 1.5rem 3.75rem rgba(82, 35, 11, .22);
  --shadow-header: 0 .25rem 1.3rem rgba(50, 27, 16, .09);

  /* -- Camadas ------------------------------------------------------------- */
  --z-base: 1;
  --z-header: 100;
  --z-scrim: 200;
  --z-menu: 300;

  /* -- Marca -------------------------------------------------------------- */
  --logo-h: 2.75rem;
  --logo-h-footer: 3.25rem;

  /* -- Motion -------------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .18s;
  --dur: .28s;
  --dur-slow: .45s;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--brown);
  background: var(--white);
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;

  /* text-wrap-style e herdado, entao declarar aqui alcanca todo texto da
     pagina sem precisar listar seletor por seletor.                      */
  text-wrap: balance;
}

body.menu-open { overflow: hidden; }

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

button,
input,
select { font: inherit; }

button { cursor: pointer; }

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

h1, h2, h3, p { margin-top: 0; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* ==========================================================================
   3. PAPEIS TIPOGRAFICOS
   Cada papel define tamanho + entrelinha + tracking juntos, para que o
   mesmo papel fique identico em toda a pagina.
   ========================================================================== */

.hero h1,
.section h2,
.contact-section h2 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.hero h1 { font-size: var(--type-display-1); }

.section h2,
.contact-section h2 { font-size: var(--type-display-2); }

/* Acento do titulo. Sobre o laranja usa o marrom escuro (3.42:1);
   sobre o marrom usa o pale (8.39:1); sobre claro usa o laranja.        */
.hero h1 em,
.section h2 em,
.contact-section h2 em {
  color: var(--orange);
  font-style: normal;
}

.hero h1 em { color: var(--brown-deep); }

.solution-card-body h3,
.commercial-cards h3,
.team-card h3,
.method-list h3,
.faq-list summary,
.marquee-track {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.solution-card-body h3,
.team-card h3 { font-size: var(--type-display-3); }

.commercial-cards h3,
.method-list h3,
.faq-list summary { font-size: var(--type-display-4); }

/* Rotulo em caixa alta com tracking. Piso de 12px. */
.eyebrow,
.hero-kicker,
.solution-card-head,
.visual-label,
.testimonial-name,
.team-card span,
.method-visual p,
.contact-form label,
.contact-form > p:first-child,
.dialog-header p,
.hero-portrait figcaption {
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow,
.hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--orange);
}

.eyebrow span,
.hero-kicker span {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

/* Sobre creme o laranja puro fica em 4.40:1; usa a variante de texto. */
.method-section .eyebrow,
.team-section .eyebrow { color: var(--orange-ink); }

/* Sobre laranja/marrom o rotulo precisa ser branco opaco. */
.eyebrow-light,
.hero-kicker { color: var(--white); }

/* Paragrafo de apoio ao lado de um titulo. */
.lead,
.hero-description,
.intro-copy > p:not(.eyebrow),
.method-summary,
.faq-copy > p:not(.eyebrow),
.section-heading > p,
.commercial-copy > p:not(.eyebrow),
.contact-copy > p:not(.eyebrow) {
  max-width: var(--measure);
  font-size: var(--type-lead);
  line-height: var(--lh-body);
}

/* Corpo denso dentro de cards. */
.solution-card-body p,
.commercial-cards p,
.method-list p,
.faq-list details p {
  font-size: var(--type-body-sm);
  line-height: 1.65;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
}

.section { padding: var(--section-y) 0; }

.intro-grid,
.method-grid,
.commercial-grid,
.faq-grid,
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-gap);
}

.section-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: var(--space-8);
}

.section-heading h2 { max-width: none; }

.section-heading > p {
  margin-bottom: .35rem;
  color: var(--muted);
}

.section-heading-light h2 { color: var(--white); }

.section-heading-light h2 em { color: var(--orange-pale); }

.section-heading-light > p { color: var(--on-brown); }


/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Botao
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.2;
  transition: transform var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.button:hover { transform: translateY(-.16rem); }


.button-dark { color: var(--white); background: var(--brown); }
.button-dark:hover { background: var(--brown-deep); }

.button-light { color: var(--brown); background: var(--white); }
.button-light:hover { color: var(--white); background: var(--brown); }

.button-light-outline {
  color: var(--white);
  border-color: rgba(253, 253, 253, .7);
  background: transparent;
}

.button-light-outline:hover {
  color: var(--brown);
  border-color: var(--white);
  background: var(--white);
}

/* --------------------------------------------------------------------------
   5.2 Link em linha
   -------------------------------------------------------------------------- */

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: .2rem;
  border-bottom: 1px solid currentColor;
  font-size: var(--type-label);
  font-weight: 700;
}

.inline-link span { font-size: var(--icon-sm); }

/* --------------------------------------------------------------------------
   5.3 Cabecalho + navegacao
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  z-index: var(--z-header);
  top: 0;
  right: 0;
  left: 0;
  color: var(--white);
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

.site-header.header-scrolled {
  color: var(--brown);
  background: rgba(253, 253, 253, .95);
  box-shadow: var(--shadow-header);
  backdrop-filter: blur(.7rem);
}

.header-inner {
  display: flex;
  align-items: center;
  min-height: 5.7rem;
  gap: var(--space-5);
}

.brand {
  display: inline-grid;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  grid-area: 1 / 1;
  width: auto;
  height: var(--logo-h);
}

.brand-dark { opacity: 0; }
.header-scrolled .brand-light { opacity: 0; }
.header-scrolled .brand-dark { opacity: 1; }

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.85rem, 1.55vw, 1.55rem);
  margin-left: auto;
}

.main-nav a {
  position: relative;
  padding: .35rem 0;
  font-size: var(--type-label);
  font-weight: 600;
  white-space: nowrap;
}

.main-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}

.main-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta { margin-left: var(--space-2); }

.menu-toggle,
.mobile-menu,
.menu-scrim { display: none; }

/* --------------------------------------------------------------------------
   5.4 Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 47rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--orange);
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 20%;
  content: "";
  background: linear-gradient(0deg, rgba(60, 27, 10, .26), transparent);
  pointer-events: none;
}

.hero-dots,
.contact-dots {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .54;
  background-image: radial-gradient(rgba(255, 226, 203, .42) 1px, transparent 1.35px);
  background-size: .78rem .78rem;
  mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .76) 38%, transparent 78%);
}

/* Marca d'agua atras do retrato. Fica em z-index -1, abaixo de
   .hero-portrait (--z-base), e nao intercepta ponteiro.                  */
.hero-watermark {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 5%;
  width: min(41rem, 56%);
  opacity: .2;
  transform: translateY(-52%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  min-height: 47rem;
  padding-top: 5.7rem;
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: var(--space-8) 0 4.4rem;
}

.hero h1 { color: var(--white); }

/* Cada linha do h1 e um bloco para a entrada acontecer linha a linha.
   A renderizacao e identica a dos <br> que estavam aqui antes.          */
.hero-line { display: block; }

/* Only nos dois elementos que animam continuamente durante o scroll.
   Nos que animam uma vez so, will-change seria desperdicio.             */
.hero-watermark,
.hero-portrait img { will-change: transform; }

.hero-description {
  margin: var(--space-6) 0;
  color: var(--on-orange);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-portrait {
  position: relative;
  z-index: var(--z-base);
  min-height: 100%;
  margin: 0;
}

.hero-portrait img {
  position: absolute;
  right: -5.5rem;
  bottom: 0;
  width: min(44rem, 128%);
  max-width: none;
  max-height: 41rem;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(1.2rem .85rem 1.25rem rgba(62, 29, 12, .22));
}

.hero-portrait figcaption {
  position: absolute;
  right: -2.8rem;
  bottom: 2.3rem;
  z-index: 3;
  color: var(--white);
  writing-mode: vertical-rl;
}

/* --------------------------------------------------------------------------
   5.5 Marquee
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  padding: var(--space-3) 0;
  color: var(--white);
  background: var(--brown);
}

/* Rolagem infinita: a trilha e composta por 4 grupos IDENTICOS, e a
   animacao desloca exatamente a largura de um grupo (100% / 4 = 25%).
   O respiro entre grupos vem do padding-right do proprio grupo, nunca de
   um gap na trilha: gap entre os grupos quebraria a conta dos 25% e
   produziria o salto a cada volta.                                       */
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  font-weight: 500;
  font-size: var(--type-marquee);
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-right: var(--space-5);
}

.marquee-track i {
  color: var(--orange-pale);
  font-style: normal;
  font-size: var(--icon-xs);
}

@keyframes marquee {
  to { transform: translateX(-20%); }
}

/* --------------------------------------------------------------------------
   5.6 Bloco de introducao
   -------------------------------------------------------------------------- */

.intro-section { background: var(--white); }

.intro-copy h2,
.method-copy h2,
.faq-copy h2 { max-width: none; }

.intro-copy > p:not(.eyebrow),
.method-summary,
.faq-copy > p:not(.eyebrow) {
  margin: var(--space-5) 0;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5.7 Moldura de imagem com grade
   -------------------------------------------------------------------------- */

.card-grid-bg {
  position: relative;
  overflow: hidden;
  min-height: 31rem;
  border-radius: var(--radius);
  background-color: var(--orange-pale);
  background-image:
    linear-gradient(rgba(87, 50, 32, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 50, 32, .09) 1px, transparent 1px);
  background-size: 2.6rem 2.6rem;
}

.intro-visual img {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  width: 122%;
  max-width: none;
  transform: translateX(-50%);
}

.visual-label {
  position: absolute;
  z-index: var(--z-base);
  padding: var(--space-2) var(--space-3);
  color: var(--brown);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.visual-label-top { top: 1.4rem; left: 1.4rem; transform: rotate(-4deg); }
.visual-label-bottom { right: 1.4rem; bottom: 1.5rem; transform: rotate(4deg); }

/* --------------------------------------------------------------------------
   5.8 Card de solucao
   -------------------------------------------------------------------------- */

.solutions-section {
  color: var(--white);
  background: var(--brown);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.solution-card {
  position: relative;
  display: flex;
  min-height: 35rem;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-5);
  border-radius: var(--radius);
}

.solution-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.solution-card > img {
  width: 122%;
  max-width: none;
  height: 18rem;
  margin: var(--space-3) -11% -1.2rem;
  object-fit: contain;
}

.solution-card-body {
  position: relative;
  z-index: var(--z-base);
  margin-top: auto;
  padding-top: var(--space-5);
}

.solution-card-body h3 { margin-bottom: var(--space-3); }

/* Reserva a coluna do botao circular para o texto nao correr por baixo. */
.solution-card-body p {
  max-width: 20rem;
  margin-bottom: 0;
  padding-right: 3.4rem;
}

.solution-card-body a {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--icon-md);
  transition: transform var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.solution-card-body a:hover {
  color: var(--brown);
  transform: rotate(45deg);
  background: var(--white);
}

.solution-card-brand { color: var(--brown); background: var(--orange-pale); }
.solution-card-media { color: var(--white); background: var(--brown-dark); }
.solution-card-content { color: var(--white); background: var(--orange); }

.solution-card-media > img {
  width: 132%;
  height: 18rem;
  margin: -.7rem -16% -1.3rem;
}

.solution-card-content > img {
  width: auto;
  max-width: 110%;
  height: 20rem;
  margin: -.55rem auto -2rem;
  object-position: center bottom;
}

/* --------------------------------------------------------------------------
   5.9 Metodologia
   -------------------------------------------------------------------------- */

.method-section { background: var(--cream); }

.method-visual {
  position: relative;
  display: flex;
  min-height: 33rem;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  background: #f1dfd0;
}

.method-visual::before {
  position: absolute;
  inset: 1.4rem;
  border: 1px solid rgba(87, 50, 32, .18);
  border-radius: var(--radius-sm);
  content: "";
}

.method-visual img {
  position: relative;
  z-index: var(--z-base);
  width: 125%;
  max-width: none;
  margin-left: -12.5%;
}

.method-visual p {
  position: absolute;
  z-index: 2;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  color: var(--brown);
  letter-spacing: .06em;
}

.method-visual p span { color: var(--orange-ink); }

.method-list {
  display: grid;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.method-list li {
  display: grid;
  grid-template-columns: 2.9rem 1fr;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.method-list > li > span {
  color: var(--orange-ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-numeral);
  line-height: 1;
}

/* Titulo e descricao empilhados: em linha, o salto de 25px para 11px
   fazia os dois virarem um texto corrido so.                            */
.method-list h3 {
  margin: 0 0 .3rem;
}

.method-list p {
  margin: 0;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5.10 Bloco comercial
   -------------------------------------------------------------------------- */

.commercial-section {
  overflow: hidden;
  color: var(--white);
  background: var(--brown);
}

.commercial-copy {
  position: relative;
  align-self: stretch;
  padding-bottom: var(--space-5);
}

.commercial-copy::after {
  position: absolute;
  right: -4rem;
  bottom: -8rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  content: "";
}

.commercial-copy h2 {
  color: var(--white);
  font-size: var(--type-display-1);
}
.commercial-copy h2 em { color: var(--orange-pale); }

.commercial-copy > p:not(.eyebrow) {
  position: relative;
  z-index: var(--z-base);
  margin: var(--space-5) 0;
  color: var(--on-brown);
}

.commercial-cards {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line-light);
}

.commercial-cards article {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-5);
  background: var(--brown-mid);
}

.commercial-cards span {
  grid-row: span 2;
  color: var(--orange-pale);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-numeral);
  line-height: .95;
}

.commercial-cards h3 { margin: 0 0 .35rem; color: var(--white); }

.commercial-cards p { margin: 0; color: var(--on-brown); }

/* --------------------------------------------------------------------------
   5.11 Card de depoimento
   -------------------------------------------------------------------------- */

.testimonials-section { background: var(--white); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.testimonial-card {
  position: relative;
  display: block;
  min-height: 28rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  color: var(--white);
  background: var(--brown);
  text-align: left;
}

.testimonial-card::after {
  position: absolute;
  inset: 38% 0 0;
  content: "";
  background: linear-gradient(transparent, rgba(40, 21, 12, .9));
}

.testimonial-card img {
  width: 100%;
  height: 100%;
  min-height: 28rem;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.testimonial-card:hover img { transform: scale(1.045); }

.play-control,
.testimonial-name {
  position: absolute;
  z-index: var(--z-base);
}

.play-control {
  top: 1.15rem;
  right: 1.15rem;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  padding-left: .15rem;
  border: 1px solid rgba(253, 253, 253, .85);
  border-radius: 50%;
  font-size: var(--icon-xs);
  transition: transform var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.testimonial-card:hover .play-control {
  color: var(--brown);
  transform: scale(1.08);
  background: var(--white);
}

.testimonial-name {
  right: 1.35rem;
  bottom: 1.3rem;
  left: 1.35rem;
}

/* --------------------------------------------------------------------------
   5.12 Card de equipe
   -------------------------------------------------------------------------- */

.team-section { background: var(--cream); }

.team-heading { max-width: 58rem; }

.team-heading h2 { max-width: 20ch; }

.team-heading h2 em { color: var(--orange-ink); }

.team-grid {
  display: grid;
  grid-template-columns: 1.16fr .92fr .92fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.team-card {
  position: relative;
  min-height: 32rem;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--white);
  background: var(--brown);
}

.team-card::after {
  position: absolute;
  inset: 30% 0 0;
  content: "";
  background: linear-gradient(transparent, rgba(30, 15, 9, .9));
}

.team-card img {
  width: 100%;
  height: 100%;
  min-height: 32rem;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(.9);
  transition: transform var(--dur-slow) var(--ease-out);
}

.team-card:hover img { transform: scale(1.035); }

.team-card-social img { object-position: center 62%; }
.team-card-media img { object-position: center 35%; }

.team-card > div {
  position: absolute;
  z-index: var(--z-base);
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
}

.team-card span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--orange-pale);
}

.team-card h3 { margin: 0; color: var(--white); }

/* --------------------------------------------------------------------------
   5.13 Duvidas frequentes
   -------------------------------------------------------------------------- */

.faq-section { background: var(--white); }

.faq-copy { align-self: start; }

.faq-list { border-top: 1px solid var(--line); }

.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  color: var(--brown);
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary span {
  flex: 0 0 auto;
  color: var(--orange);
  font-family: var(--font-text);
  font-size: var(--icon-md);
  font-weight: 400;
  transition: transform var(--dur) var(--ease-out);
}

.faq-list details[open] summary span { transform: rotate(45deg); }

.faq-list details p {
  max-width: var(--measure);
  margin: 0 3.4rem var(--space-5) 0;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5.14 Contato + formulario
   -------------------------------------------------------------------------- */

.contact-section {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: var(--section-y) 0;
  color: var(--white);
  background: var(--orange);
}

.contact-dots {
  opacity: .36;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .4) 50%, transparent 100%);
}

.contact-grid { align-items: stretch; }

.contact-copy {
  position: relative;
  z-index: var(--z-base);
  min-height: 38rem;
  padding-bottom: 15rem;
}

.contact-copy h2 { max-width: none; color: var(--white); }

.contact-copy h2 em { color: var(--brown-deep); }

.contact-copy > p:not(.eyebrow) {
  position: relative;
  z-index: var(--z-base);
  margin: var(--space-5) 0;
  color: var(--on-orange);
}

.contact-email {
  position: relative;
  z-index: var(--z-base);
  display: inline-flex;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid currentColor;
  font-size: var(--type-label);
  font-weight: 700;
}

/* Fica abaixo do texto, nao atras dele: sobre o laranja a arte derruba
   a legibilidade do branco.                                             */
.contact-art {
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: -6%;
  width: min(31rem, 92%);
  opacity: .95;
  transform: rotate(-4deg);
}

.contact-form {
  align-self: center;
  padding: var(--space-6);
  border: 1px solid rgba(253, 253, 253, .25);
  border-radius: var(--radius);
  background: var(--brown);
  box-shadow: var(--shadow-lift);
}

.contact-form > p:first-child {
  margin-bottom: var(--space-5);
  color: var(--orange-pale);
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--white);
}

.contact-form input,
.contact-form select {
  width: 100%;
  padding: var(--space-3) 0 var(--space-2);
  border: 0;
  border-bottom: 1px solid rgba(253, 253, 253, .42);
  border-radius: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
  font-size: var(--type-body-sm);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* 0.48 de opacidade dava 3.83:1; 0.64 sobe para 5.53:1. */
.contact-form input::placeholder { color: rgba(253, 253, 253, .64); }

.contact-form select option { color: var(--brown); }

.contact-form input:focus,
.contact-form select:focus { border-bottom-color: var(--orange-pale); }

.contact-form .button {
  width: 100%;
  margin-top: var(--space-5);
}

.form-note {
  margin: var(--space-3) 0 0;
  color: var(--on-brown-soft);
  font-size: var(--type-eyebrow);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  text-align: center;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   5.15 Rodape
   -------------------------------------------------------------------------- */

.site-footer {
  padding: var(--space-7) 0;
  color: var(--white);
  background: var(--brown-deep);
}

.footer-grid {
  display: grid;
  grid-template-columns: auto minmax(15rem, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
}

.footer-grid > img { width: auto; height: var(--logo-h-footer); }

.footer-grid > p {
  max-width: 25rem;
  margin: 0;
  color: var(--on-brown);
  font-size: var(--type-body-sm);
  line-height: 1.6;
}

.footer-grid > div {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--type-label);
  font-weight: 600;
}

.footer-grid > div span {
  color: var(--on-brown-soft);
  font-size: var(--type-eyebrow);
  letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   5.16 Modal de video
   -------------------------------------------------------------------------- */

.video-dialog {
  width: min(42rem, calc(100% - 2rem));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--white);
  background: var(--brown-deep);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .42);
}

.video-dialog::backdrop {
  background: rgba(34, 18, 10, .78);
  backdrop-filter: blur(.3rem);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.6rem;
  padding: 0 var(--space-4) 0 var(--space-5);
}

.dialog-header p { margin: 0; color: var(--orange-pale); }

.dialog-close {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  background: transparent;
  font-size: var(--icon-lg);
  line-height: 1;
}

.dialog-close:hover { color: var(--brown); background: var(--white); }

.video-dialog video {
  display: block;
  width: 100%;
  max-height: min(76vh, 42rem);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: #000;
}


/* ==========================================================================
   6. RESPONSIVO
   ========================================================================== */

@media (max-width: 64rem) {
  .main-nav { gap: var(--space-3); }
  .main-nav a { font-size: var(--type-eyebrow); }
  .header-cta { padding-inline: var(--space-4); font-size: var(--type-eyebrow); }
  .hero-portrait img { right: -7rem; width: min(41rem, 135%); }
  .solutions-grid { grid-template-columns: 1fr 1fr; }
  .solution-card-content { grid-column: span 2; min-height: 29rem; }
  .solution-card-content > img {
    position: absolute;
    right: 4%;
    bottom: -4%;
    width: 46%;
    height: auto;
  }
  .solution-card-content .solution-card-body { max-width: 50%; }
}

@media (max-width: 50rem) {
  .container { width: min(var(--container), calc(100% - 2.25rem)); }
  .header-inner { min-height: 4.8rem; }

  .main-nav,
  .header-cta { display: none; }

  .menu-toggle {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    gap: .38rem;
    place-content: center;
    margin-left: auto;
    padding: .58rem;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    color: inherit;
    background: transparent;
  }

  .menu-toggle span {
    display: block;
    width: 1.25rem;
    height: 1px;
    background: currentColor;
  }

  .mobile-menu {
    position: fixed;
    z-index: var(--z-menu);
    top: 0;
    right: 0;
    display: flex;
    width: min(24rem, 86vw);
    height: 100dvh;
    flex-direction: column;
    padding: var(--space-5);
    color: var(--white);
    background: var(--brown);
    transform: translateX(105%);
    transition: transform var(--dur) var(--ease-out);
  }

  .mobile-menu.is-open { transform: translateX(0); }

  .mobile-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-menu-top img { width: auto; height: var(--logo-h); }

  .mobile-menu-close {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(253, 253, 253, .5);
    border-radius: var(--radius);
    color: var(--white);
    background: transparent;
    font-size: var(--icon-lg);
    line-height: 1;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-8) 0 auto;
  }

  .mobile-menu-links a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-display-3);
    line-height: 1.05;
    text-transform: uppercase;
  }

  .mobile-menu-cta { width: 100%; margin-top: var(--space-5); }

  .menu-scrim {
    position: fixed;
    z-index: var(--z-scrim);
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: rgba(34, 18, 10, .62);
    transition: opacity var(--dur) var(--ease-out),
                visibility var(--dur) var(--ease-out);
  }

  .menu-scrim.is-open { visibility: visible; opacity: 1; }

  .hero,
  .hero-grid { min-height: auto; }

  .hero-grid { display: block; padding-top: 4.8rem; }
  .hero-copy { padding: 4.2rem 0 var(--space-6); }
  .hero h1 { max-width: none; }
  .hero-description { margin: var(--space-5) 0; }
  .hero-portrait { height: 29rem; min-height: 0; }
  .hero-portrait img { right: -2rem; width: min(27rem, 93vw); max-height: none; }
  .hero-portrait figcaption { right: .4rem; bottom: 1.2rem; }
  .hero-watermark {
    top: auto;
    right: -12%;
    bottom: 8rem;
    width: min(24rem, 82%);
    transform: none;
  }

  .intro-grid,
  .method-grid,
  .commercial-grid,
  .faq-grid,
  .contact-grid,
  .section-heading { grid-template-columns: 1fr; gap: var(--space-6); }

  .section-heading > p { margin: 0; }
  .intro-copy h2,
  .method-copy h2,
  .faq-copy h2,
  .section-heading h2,
  .team-heading h2 { max-width: none; }
  .intro-visual { min-height: 25rem; }

  .solutions-grid { grid-template-columns: 1fr; margin-top: var(--space-7); }
  .solution-card { min-height: 30rem; }
  .solution-card > img { height: 16.5rem; }
  .solution-card-content { grid-column: auto; min-height: 30rem; }
  .solution-card-content > img {
    position: static;
    width: auto;
    height: 17rem;
    margin: -.5rem auto -1.4rem;
  }
  .solution-card-content .solution-card-body { max-width: none; }

  .method-visual { min-height: 24rem; order: 2; }
  .method-copy { order: 1; }

  .commercial-copy { padding-bottom: 0; }

  .testimonials-grid { gap: var(--space-3); margin-top: var(--space-7); }
  .testimonial-card,
  .testimonial-card img { min-height: 20rem; }

  .team-grid { grid-template-columns: 1.15fr 1fr; margin-top: var(--space-7); }
  .team-card,
  .team-card img { min-height: 25rem; }
  .team-card-ceo { grid-row: span 2; }
  .team-card-ceo,
  .team-card-ceo img { min-height: 32rem; }

  .contact-copy { min-height: 30rem; padding-bottom: 13rem; }
  .contact-art { right: -8%; bottom: -8%; width: min(28rem, 96%); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer-grid > div { align-items: flex-start; }
}

@media (max-width: 38rem) {
  .container { width: calc(100% - 2rem); }
  .hero-copy { padding-top: 3.45rem; }
  .hero-actions .button { width: 100%; }
  .hero-portrait { height: 24rem; }
  .hero-portrait img { right: -3rem; width: 25rem; }

  .intro-visual { min-height: 20rem; }
  .visual-label-top { top: .9rem; left: .9rem; }
  .visual-label-bottom { right: .9rem; bottom: .9rem; }

  .method-visual { min-height: 18rem; }
  /* As 4 etapas nao cabem em linha aqui sem furar o piso de 12px, e a
     lista logo abaixo ja as apresenta com descricao.                     */
  .method-visual p { display: none; }
  .method-list li { grid-template-columns: 2.5rem 1fr; }

  .commercial-cards article {
    grid-template-columns: 2.8rem 1fr;
    padding: var(--space-4);
  }

  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial-card,
  .testimonial-card img { min-height: 24rem; }

  .team-grid { grid-template-columns: 1fr; }
  .team-card-ceo { grid-row: auto; }
  .team-card,
  .team-card img,
  .team-card-ceo,
  .team-card-ceo img { min-height: 29rem; }

  .faq-list details p { margin-right: 0; }

  .contact-copy { min-height: 28rem; padding-bottom: 11rem; }
  .contact-art { bottom: -3%; width: 23rem; }
  .contact-form { padding: var(--space-5); }
}


/* ==========================================================================
   7. PREFERENCIAS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}