/* ==========================================================================
   OUVIR & INTEGRAR — folha de estilo unica
   Mesma arquitetura e os mesmos componentes do projeto Longevity:
   hero em cartao com grade de imagens, faixa marquee clara, grade de duas
   imagens, slider de etapas, cartoes com imagem embaixo, bloco de imagens
   com parallax, slider de cards com foto, mural de depoimentos e cards de
   destino. Muda a paleta (identidade-visual/ouvir-integrar-paleta.png) e o
   conteudo.
   ========================================================================== */

/* -------------------------------------------------- fonte (auto-hospedada) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --vinho: #9d1f24;
  --vinho-escuro: #7a1519;
  --vinho-marca: #9a2f2f;   /* o vermelho exato da arte da logo */
  --vinho-claro: #fdf3f3;
  --dourado: #e1b965;
  --dourado-escuro: #b98d34;
  --preto: #0b0b0b;
  --branco: #fff;

  --creme: #fbf7f2;
  --areia: #f4ece1;
  --linha: #e9e1d6;
  --texto: #57504d;
  --texto-claro: #8a817d;

  --sombra-cartao: 0 1px 2px rgba(11, 11, 11, .04), 0 8px 24px rgba(11, 11, 11, .05);
  --sombra-flutuante: 0 10px 30px rgba(11, 11, 11, .12);
  --sombra-zap: 0 8px 24px rgba(11, 11, 11, .22);

  --container: 1272px;
  --pad-container: 24px;
  --pad-moldura: 20px;
  --cartao-max: 1400px;

  --raio-cartao: 40px;
  --raio-medio: 32px;
  --raio-regular: 24px;
  --raio-padrao: 20px;

  --pad-secao: 130px;
  --pad-cartao: 112px;

  /* Corpo em 17px: boa parte do publico tem mais de 60 anos. */
  --fs-corpo: 17px;   --lh-corpo: 27px;
  --fs-d9: 58px;      --lh-d9: 66px;
  --fs-d8: 46px;      --lh-d8: 54px;
  --fs-d7: 38px;      --lh-d7: 46px;
  --fs-d5: 23px;      --lh-d5: 30px;
  --fs-d4: 20px;      --lh-d4: 28px;
  --fs-d2: 16px;      --lh-d2: 22px;
  --fs-numero: 72px;

  --btn-pad: 14px 26px;
  --btn-fs: 17px;

  --cab-altura: 104px;

  --hero-pad-topo: 118px;
  --hero-pad-base: 78px;

  --midia-larg: 392px;
  --midia-gap: 24px;
  --midia-alt: 554px;
  --midia-raio: 32px;
  --midia-pad: 20px;
  --midia-vidro-pad: 32px 30px;
  --midia-vidro-raio: 24px;

  --mural-alt: 700px;
  --mural-gap: 16px;
  --mural-espaco: 18px;
  --mural-fade: 120px;
  --mural-dur: 32s;
  --depo-pad: 30px;
  --depo-gap: 34px;
  --depo-raio: 28px;
  --depo-larg: 330px;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--vinho) var(--areia);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  letter-spacing: -.012em;
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; color: var(--preto); }

::selection { background: var(--vinho); color: #fff; }

/* barra de rolagem fininha nas cores do projeto */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--areia); }
::-webkit-scrollbar-thumb { background: var(--vinho); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--vinho-escuro); }

:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; border-radius: 6px; }

/* -------------------------------------------------------------- tipografia */
.d9 { font-size: var(--fs-d9); line-height: var(--lh-d9); letter-spacing: -.028em; font-weight: 700; color: var(--preto); }
.d8 { font-size: var(--fs-d8); line-height: var(--lh-d8); letter-spacing: -.024em; font-weight: 700; color: var(--preto); }
.d7 { font-size: var(--fs-d7); line-height: var(--lh-d7); letter-spacing: -.02em; font-weight: 700; color: var(--preto); }
.d5 { font-size: var(--fs-d5); line-height: var(--lh-d5); letter-spacing: -.016em; font-weight: 700; color: var(--preto); }
.d4 { font-size: var(--fs-d4); line-height: var(--lh-d4); letter-spacing: -.012em; font-weight: 700; color: var(--preto); }
.d2 { font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 500; }

.sobrancelha {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--vinho);
}
.sobrancelha::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--dourado); flex: none;
}
.sobrancelha--centro { justify-content: center; }

.sem-quebra { white-space: nowrap; }
.texto-centro { text-align: center; }
.destaque-dourado { color: var(--dourado-escuro); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--vinho); color: #fff; padding: 14px 22px; border-radius: 0 0 12px 0;
  font-weight: 600;
}
.pular-conteudo:focus { left: 0; }

/* ---------------------------------------------------------------- estrutura */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-container);
}

.moldura { padding-inline: var(--pad-moldura); }

.cartao {
  max-width: var(--cartao-max);
  margin-inline: auto;
  background: var(--creme);
  border-radius: var(--raio-cartao);
  overflow: clip;
  padding-block: var(--pad-cartao);
}
.cartao--escuro { background: var(--preto); color: #d8d2ce; }
.cartao--escuro .d8 { color: #fff; }

.secao { padding-block: var(--pad-secao); }
.secao--cartao { padding-block: 0; }
.secao--cartao:last-of-type { padding-bottom: 96px; }

.secao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.secao__topo--centro { flex-direction: column; align-items: center; text-align: center; }
.secao__descricao { margin-top: 14px; }
.secao__cabecalho + * { margin-top: 44px; }

.medida-55ch { max-width: 640px; margin-inline: auto; }
.medida-598 { max-width: 640px; margin-inline: auto; }
.medida-1016 { max-width: 1016px; margin-inline: auto; }
.medida-1064 { max-width: 1064px; margin-inline: auto; }
.medida-620 { max-width: 620px; }

/* ----------------------------------------------------------------- botoes */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  padding: var(--btn-pad);
  border-radius: 999px;
  font-size: var(--btn-fs);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.012em;
  text-align: center;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.botao__conteudo { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
.botao:hover { transform: translateY(-2px); }

/* O preenchimento sobe de baixo com uma leve inclinacao. */
/* O vermelho da identidade fica reservado para a interacao: sobe de baixo
   com uma leve inclinacao quando o mouse entra. */
.botao__preenchimento {
  position: absolute;
  inset: -30% 0;
  background: var(--vinho);
  transform: translateY(140%) skewY(7deg);
  transition: transform .35s cubic-bezier(.3, .8, .3, 1);
  z-index: 0;
}
.botao:hover .botao__preenchimento,
.botao:focus-visible .botao__preenchimento { transform: translateY(0) skewY(0); }

.botao--primario { background: var(--preto); color: #fff; box-shadow: 0 6px 18px rgba(11, 11, 11, .18); }
.botao--secundario { background: var(--areia); color: var(--preto); }
.botao--claro { background: var(--branco); color: var(--preto); }
.botao--dourado { background: var(--dourado); color: var(--preto); }
.botao:hover, .botao:focus-visible { color: #fff; }
.botao--grande { --btn-pad: 18px 34px; --btn-fs: 18px; }

.linha-botoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.linha-botoes--centro { justify-content: center; }

.link-seta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--vinho); font-weight: 700;
  transition: color .25s ease;
}
.link-seta svg { transition: transform .25s ease; }
.link-seta:hover { color: var(--vinho-escuro); }
.link-seta:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------- cabecalho */
/* Barra escura sempre visivel. Ao rolar ela se descola do topo e vira um
   cartao flutuante mais compacto, com desfoque e um fio dourado. */
.moldura--nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: 0;
  transition: padding .35s cubic-bezier(.3, .8, .3, 1);
}
.cabecalho {
  max-width: none;
  margin-inline: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  transition: max-width .35s cubic-bezier(.3, .8, .3, 1),
              border-radius .35s cubic-bezier(.3, .8, .3, 1),
              background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cabecalho__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--cab-altura);
  transition: height .35s cubic-bezier(.3, .8, .3, 1);
}

.moldura--nav.compacto { padding-block: 12px; }
.moldura--nav.compacto .cabecalho {
  max-width: var(--cartao-max);
  border-radius: 999px;
  background: rgba(11, 11, 11, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(225, 185, 101, .35);
  box-shadow: var(--sombra-flutuante);
}
.moldura--nav.compacto .cabecalho__linha { height: 78px; }

/* fio de progresso de leitura, so depois que o cabecalho preenche */
.cabecalho__progresso {
  position: fixed; left: 0; right: 0; top: 0;
  height: 3px; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.moldura--nav.compacto .cabecalho__progresso { opacity: 1; }
.cabecalho__progresso span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--dourado), var(--vinho));
  transition: width .1s linear;
}

/* marca: dois recortes da arte original, feitos por CSS */
.logo {
  display: flex; align-items: center; gap: 12px;
  --simbolo-h: 56px;
  --assinatura-h: 17px;   /* altura so da marca */
  --sub-fs: 10.5px;
  transition: opacity .25s ease;
}
.logo:hover { opacity: .85; }
.logo__simbolo, .logo__assinatura { display: block; overflow: hidden; position: relative; flex: none; }
.logo__simbolo img, .logo__assinatura img { position: absolute; max-width: none; height: auto; }

/* Simbolo: recorte x497 y8 w427 h620 da arte oficial (1440x1031), a
   mesma de onde sai a assinatura. Antes vinha do icone-orelha.png,
   que e dourado — ao lado da marca vermelha as duas cores brigavam. */
.logo__simbolo { width: calc(var(--simbolo-h) * 427 / 620); height: var(--simbolo-h); }
.logo__simbolo img {
  width: calc(var(--simbolo-h) * 1440 / 620);
  left: calc(var(--simbolo-h) * -497 / 620);
  top: calc(var(--simbolo-h) * -8 / 620);
}
/* A assinatura sao duas linhas de naturezas diferentes.

   Antes o recorte pegava as duas do PNG de uma vez (y791 h232). Nessa
   altura o "APARELHOS AUDITIVOS" original, que tem 50px de 232, sobrava
   com 6,5px na tela — borrado e sem contraste. Agora o recorte pega so a
   marca (x8 y791 w1424 h90) e a linha de baixo e texto de verdade, em
   Figtree: nitida em qualquer densidade de tela e com a cor sob controle. */
.logo__assinatura {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  overflow: visible;
}
.logo__marca {
  display: block; position: relative; overflow: hidden; flex: none;
  width: calc(var(--assinatura-h) * 1424 / 90);
  height: var(--assinatura-h);
}
.logo__marca img {
  position: absolute; max-width: none; height: auto;
  width: calc(var(--assinatura-h) * 1440 / 90);
  left: calc(var(--assinatura-h) * -8 / 90);
  top: calc(var(--assinatura-h) * -791 / 90);
}
.logo__sub {
  font-size: var(--sub-fs);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .22em;
  text-indent: .22em;            /* compensa o espaco depois da ultima letra */
  text-transform: uppercase;
  color: var(--vinho-marca);
  white-space: nowrap;
}
.moldura--nav.compacto .logo__sub { color: #fff; }
/* A arte da marca e vermelha. Sobre o topo claro ela vale como e — e o
   momento em que a identidade aparece inteira. Quando o cabecalho vira a
   pilula escura, vermelho sobre preto fica em 2,2:1 e some; o mesmo
   desenho passa a branco (brightness(0) zera a cor preservando o alfa,
   invert(1) leva para o branco), sem precisar de um segundo arquivo. */
.moldura--nav.compacto .logo img { filter: brightness(0) invert(1); }
.moldura--nav.compacto .logo { --simbolo-h: 44px; --assinatura-h: 14px; --sub-fs: 9px; }

.menu__lista { display: flex; align-items: center; gap: 2px; }
.menu__item--cta { display: none; }

.menu__link {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--preto);
  font-size: 16px;
  font-weight: 600;
  transition: color .25s ease, background-color .25s ease;
}
.menu__link:hover, .menu__botao-sub[aria-expanded="true"] { color: var(--vinho); background: rgba(11, 11, 11, .05); }

/* depois que o cabecalho preenche, o menu inverte para o claro */
.moldura--nav.compacto .menu__link { color: #efe9e3; }
.moldura--nav.compacto .menu__link:hover,
.moldura--nav.compacto .menu__botao-sub[aria-expanded="true"] { color: var(--dourado); background: rgba(255, 255, 255, .07); }
.menu__chevron { transition: transform .3s ease; }
.menu__item--sub:hover .menu__chevron,
.menu__botao-sub[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }

.menu__item--sub { position: relative; }

.submenu {
  width: max-content;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.menu__item--sub:hover > .submenu,
.menu__item--sub:focus-within > .submenu,
.submenu.aberto { opacity: 1; visibility: visible; transform: none; }

.submenu__card {
  display: flex;
  gap: 40px;
  background: var(--branco);
  border-radius: var(--raio-regular);
  box-shadow: var(--sombra-flutuante);
  padding: 26px 28px;
}
.submenu__titulo {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-claro); margin-bottom: 16px;
}
.submenu__lista { display: grid; gap: 12px; align-content: start; }
.submenu__lista li, .submenu__titulo { white-space: nowrap; }
.submenu a { color: var(--preto); font-weight: 500; transition: color .25s ease; }
.submenu a:hover { color: var(--vinho); }

.cabecalho__acoes { display: flex; align-items: center; gap: 16px; }
.cabecalho__fone {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--preto); font-weight: 700; font-size: 16px;
  white-space: nowrap;
  transition: color .25s ease;
}
.cabecalho__fone:hover { color: var(--vinho); }
.moldura--nav.compacto .cabecalho__fone { color: var(--dourado); }
.moldura--nav.compacto .cabecalho__fone:hover { color: #fff; }
.cabecalho__cta { --btn-pad: 12px 22px; --btn-fs: 16px; white-space: nowrap; }
@media (max-width: 1319px) { .cabecalho__fone { display: none; } }

.hamburguer {
  display: none;
  width: 48px; height: 48px;
  border-radius: 999px;
  /* Em repouso o botao e dourado, como os demais: o vermelho da
     identidade fica reservado para a interacao. */
  background: var(--dourado);
  position: relative;
  transition: background-color .25s ease;
}
.hamburguer:hover, .hamburguer:focus-visible { background: var(--vinho); }
.hamburguer__traco {
  position: absolute; left: 50%; width: 18px; height: 2px;
  background: var(--preto); border-radius: 2px;
  translate: -50% 0;
  transition: transform .3s ease, background-color .25s ease;
}
/* sobre o vinho os tracos precisam clarear para continuarem legiveis */
.hamburguer:hover .hamburguer__traco,
.hamburguer:focus-visible .hamburguer__traco { background: #fff; }
.hamburguer__traco--topo { top: 20px; }
.hamburguer__traco--base { top: 26px; }
.hamburguer[aria-expanded="true"] .hamburguer__traco--topo { transform: translateY(3px) rotate(45deg); }
.hamburguer[aria-expanded="true"] .hamburguer__traco--base { transform: translateY(-3px) rotate(-45deg); }

/* -------------------------------------------------- botao flutuante do zap */
.zap {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 62px;
  padding: 0 16px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: var(--sombra-zap);
  transition: gap .3s cubic-bezier(.3, .8, .3, 1), padding .3s cubic-bezier(.3, .8, .3, 1),
              background-color .25s ease, transform .25s ease;
}
.zap:hover, .zap:focus-visible { background: #1eb855; transform: translateY(-2px); gap: 10px; padding-right: 24px; }
.zap__icone { flex: none; position: relative; z-index: 1; }
.zap__texto {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-weight: 700; font-size: 16px;
  transition: max-width .3s cubic-bezier(.3, .8, .3, 1);
}
.zap:hover .zap__texto, .zap:focus-visible .zap__texto { max-width: 220px; }
.zap__pulso {
  position: absolute; inset: 0;
  border-radius: 999px; background: #25d366; z-index: 0;
  animation: pulsoZap 2.6s ease-out infinite;
}
@keyframes pulsoZap {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* -------------------------------------------------------------------- hero */
/* Mesmo desenho da Longevity: cartao claro com o texto centralizado e, logo
   abaixo, uma faixa de imagens em grade que transborda e e cortada pela
   borda do cartao. */
.hero { position: relative; }
.hero .moldura { padding-top: 20px; }
.hero__cartao {
  max-width: var(--cartao-max);
  margin-inline: auto;
  padding: var(--hero-pad-topo) 0 var(--hero-pad-base);
  border-radius: var(--raio-cartao);
  background:
    radial-gradient(110% 80% at 12% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 70% at 100% 96%, rgba(225, 185, 101, .38) 0%, rgba(225, 185, 101, 0) 62%),
    radial-gradient(70% 60% at 50% 100%, rgba(157, 31, 36, .07) 0%, rgba(157, 31, 36, 0) 70%),
    linear-gradient(150deg, var(--creme) 0%, var(--areia) 100%);
  overflow: clip;
}
/* O hero tem duas colunas: texto a esquerda, mosaico de tres fotos a
   direita. Na coluna de texto o titulo fica no topo e o argumento com os
   botoes desce para a base, para as duas colunas terminarem juntas. */
.hero__duplo {
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  gap: 64px;
  align-items: stretch;
}
.hero__coluna { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.hero__titulo { margin-top: 20px; }
.hero__descricao { font-size: 19px; line-height: 30px; max-width: 46ch; }
.hero__selos { display: grid; gap: 12px; margin-top: 26px; }
.hero__selo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--preto); font-size: 16px; }
.hero__selo svg { flex: none; color: var(--vinho); }
.hero__botoes { margin-top: 30px; }

/* Mosaico: coluna estreita com duas fotos empilhadas + uma foto grande.
   As proporcoes sao proprias — coluna esquerda mais larga e a foto de cima
   menos alongada do que no modelo. */
.hero__mosaico {
  display: grid;
  grid-template-columns: .72fr 1fr;
  grid-template-rows: 1.34fr 1fr;
  gap: 16px;
  /* Ocupa a altura inteira da linha, para as duas colunas terminarem
     na mesma reta. As linhas em fr dividem essa altura na proporcao
     escolhida. Nada de aspect-ratio aqui: com a altura definida pela
     grade, ele calcularia a largura de volta e estouraria a coluna. */
  height: 100%;
}
.hero__foto { position: relative; overflow: hidden; background: var(--areia); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__foto--a { grid-area: 1 / 1; border-radius: 26px; }
.hero__foto--a img { object-position: 50% 42%; }
.hero__foto--b { grid-area: 2 / 1; border-radius: 26px; }
.hero__foto--b img { object-position: 55% 45%; }
.hero__foto--c { grid-area: 1 / 2 / span 2; border-radius: 34px; }
.hero__foto--c img { object-position: 52% 32%; }

/* cartao da responsavel tecnica, flutuando sobre a foto maior */
.hero__assinatura {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px) saturate(140%);
  border-radius: 20px;
  padding: 12px 18px 12px 12px;
  box-shadow: var(--sombra-flutuante);
}
.hero__assinatura__marca {
  flex: none;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--preto);
  overflow: hidden;
}
.hero__assinatura__marca img { width: 130%; height: 130%; object-fit: cover; object-position: 49% 50%; }
.hero__assinatura__texto { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hero__assinatura__texto strong { color: var(--preto); font-size: 17px; }
.hero__assinatura__texto small { color: var(--texto-claro); font-size: 14px; }

/* ----------------------------------------------------------------- marquee */
/* Faixa clara, so texto com pontinhos — igual a da Longevity. */
.marquee-secao { padding-block: 64px; }
.marquee-secao__titulo { color: var(--texto-claro); text-align: center; }
.marquee { margin-top: 24px; display: flex; overflow: hidden; }
.marquee__trilho { display: flex; flex-shrink: 0; animation: correr 34s linear infinite; }
.marquee__lista { display: flex; flex-shrink: 0; }
.marquee__item {
  display: flex; align-items: center; gap: 18px;
  padding-right: 18px;
  color: var(--texto);
  font-weight: 600;
  white-space: nowrap;
}
.marquee__ponto { width: 6px; height: 6px; border-radius: 999px; background: var(--dourado); flex: none; }
@keyframes correr { to { transform: translateX(-33.3333%); } }

/* ------------------------------------------------- grade de duas imagens */
.dados-grade {
  display: grid;
  grid-template-columns: 1fr 1.5715fr 1.7145fr;
  grid-template-rows: auto auto;
  column-gap: 32px;
}
.dados-grade__titulo { grid-area: 1 / 1 / 2 / 3; padding-bottom: 32px; }
.dados-grade__foto-grande { grid-area: 1 / 3 / 3 / 4; }
.dados-grade__foto-pequena { grid-area: 2 / 1 / 3 / 2; max-width: 246px; align-self: end; }
.dados-grade__foto-pequena img { height: auto; }
.dados-grade__texto { grid-area: 2 / 2 / 3 / 3; max-width: 420px; }
.dados-grade__paragrafos { display: grid; gap: 20px; }
.dados-grade__texto .linha-botoes { margin-top: 20px; }

.figura { overflow: hidden; border-radius: var(--raio-medio); position: relative; }
.figura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figura--base-direita img { object-position: 100% 100%; }
.figura--topo-direita img { object-position: 100% 0; }

/* ---------------------------------------------------------- slider (etapas) */
.slider { position: relative; }
.slider__janela { overflow: hidden; border-radius: var(--raio-medio); }
.slider__janela--aberta { overflow: visible; border-radius: 0; }
.slider__trilho { display: flex; transition: transform .55s cubic-bezier(.5, .05, .25, 1); }
.slider__slide { flex: 0 0 100%; min-width: 0; }

.etapas-slide { display: grid; grid-template-columns: 375fr 625fr; gap: 16px; }
.etapa-cartao {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--branco);
  border-radius: var(--raio-medio);
  padding: 32px;
  min-height: 362px;
}
.etapa-cartao__numero {
  font-size: var(--fs-numero); line-height: 1;
  font-weight: 800; letter-spacing: -.04em;
  color: var(--areia);
}
.etapa-cartao__titulo { margin-bottom: 8px; }
.etapa-cartao__texto { max-width: 250px; }
.etapas-slide .figura { border-radius: var(--raio-medio); aspect-ratio: 625 / 362; }

.slider__rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 16px;
}
.slider__setas { display: flex; gap: 10px; }
.slider__setas--centro { justify-content: center; margin-top: 32px; }
.slider__seta {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--linha);
  color: var(--preto);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.slider__seta:hover { background: var(--vinho); border-color: var(--vinho); color: #fff; }
.slider__seta[disabled] { opacity: .4; cursor: default; }
.slider__seta[disabled]:hover { background: var(--branco); color: var(--preto); border-color: var(--linha); }

/* ------------------------------------------------- cartoes com icone */
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cartao-icone {
  display: flex; flex-direction: column; gap: 18px;
  height: 100%;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-regular);
  padding: 32px 30px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cartao-icone:hover { transform: translateY(-3px); box-shadow: var(--sombra-cartao); border-color: var(--dourado); }
.cartao-icone__icone {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--dourado) 0%, var(--dourado-escuro) 100%);
  color: var(--preto);
}
.cartao-icone__titulo { margin-bottom: 8px; }
.cartao-icone--destaque { background: var(--preto); border-color: var(--preto); color: #cfc7c1; }
.cartao-icone--destaque .cartao-icone__titulo { color: #fff; }
.cartao-icone--destaque .cartao-icone__icone { background: var(--vinho); color: #fff; }

.cartao-dor {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-regular);
  padding: 30px;
  height: 100%;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cartao-dor:hover { border-color: var(--vinho); transform: translateY(-3px); box-shadow: var(--sombra-cartao); }
.cartao-dor__icone {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--vinho-claro); color: var(--vinho);
}

/* ------------------------------ mockup da conversa no WhatsApp (passo 1) */
/* Feito em HTML/CSS em vez de imagem: fica nitido em qualquer tela, usa a
   fonte do site, pesa quase nada e o texto e lido por leitor de tela. */
.zap-mock {
  display: grid; place-items: center;
  padding: 26px;
  background:
    radial-gradient(70% 60% at 22% 18%, rgba(37, 211, 102, .16) 0%, rgba(37, 211, 102, 0) 62%),
    radial-gradient(70% 70% at 88% 92%, rgba(225, 185, 101, .34) 0%, rgba(225, 185, 101, 0) 65%),
    linear-gradient(150deg, var(--creme) 0%, var(--areia) 100%);
}
.zap-mock__fone {
  width: 268px; max-width: 100%; height: 100%; max-height: 306px;
  display: flex; flex-direction: column;
  background: #ece5dd;
  border: 7px solid var(--preto);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--sombra-flutuante);
}
.zap-mock__topo {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #075e54; color: #fff;
}
.zap-mock__avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px; background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
/* O icone da marca e um PNG largo (1440x646) com a orelha no meio.
   O cover recorta o quadrado central, que e exatamente a orelha. */
.zap-mock__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 49% 50%; }
.zap-mock__quem { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.zap-mock__quem strong { font-size: 14px; color: #fff; }
.zap-mock__quem small { font-size: 11px; color: rgba(255, 255, 255, .75); }
.zap-mock__chat {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 10px;
  overflow: hidden;
}
.zap-mock__bolha {
  position: relative;
  max-width: 88%;
  padding: 9px 11px 18px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 1px 1px rgba(11, 11, 11, .1);
}
.zap-mock__bolha span {
  position: absolute; right: 9px; bottom: 5px;
  font-size: 10px; color: #8a8a8a;
}
.zap-mock__bolha--eu { align-self: flex-end; background: #dcf8c6; }

/* -------------------------------------------- cartoes com imagem embaixo */
/* --------- titulo de bloco: separa "servico" de "produto" na mesma secao */
.bloco-titulo {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin: 56px auto 34px;
  max-width: 640px;
}
.bloco-titulo--produtos { margin-top: 96px; }
.bloco-titulo h3 { margin-top: 14px; }
.bloco-titulo__apoio { margin-top: 14px; color: var(--texto-claro); }

/* o bloco de produtos e antecedido por um fio, para a virada ficar visivel */
.bloco-titulo--produtos::before {
  content: ""; display: block;
  width: 100%; max-width: 220px; height: 1px;
  background: var(--linha);
  margin-bottom: 56px;
}

/* selo da marca parceira */
.selo-marca { margin-top: 24px; }
.selo-marca img {
  width: 158px; height: auto; display: block;
  opacity: .9;
}

/* ilustracao vetorial dentro da caixa de produto (pilhas, filtros) */
.ilustra { width: 100%; height: 100%; display: block; }

.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Servicos sao 4: em duas colunas fecham 2x2, sem cartao orfao na ultima
   linha. O cartao mantem o desenho vertical — texto em cima, imagem
   apoiada no canto inferior direito. */
.grade-3--servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3--servicos .cartao-base__conteudo { max-width: 46ch; }
.grade-3--servicos .cartao-base__figura { width: 360px; }


.cartao-base {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 26px;
  height: 100%;
  min-height: 0;
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: var(--raio-medio);
  box-shadow: var(--sombra-cartao);
  padding: 32px 32px 0;
  overflow: hidden;
}
.cartao-base__titulo { margin-bottom: 8px; }
.cartao-base__figura {
  align-self: flex-end;
  width: 326px; max-width: 100%;
  aspect-ratio: 326 / 228;              /* proporcao unica para todos os cartoes */
  border-radius: var(--raio-regular) var(--raio-regular) 4px 0;
  overflow: hidden;
  background: var(--branco);
}
.cartao-base__figura img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 40%;
}
/* packshot: mesma caixa, mas a peca aparece inteira e apoiada na base */
.cartao-base__figura--produto { padding: 14px 16px 0; }
.cartao-base__figura--produto img { object-fit: contain; object-position: 50% 100%; }

/* ------------------------------------------ bloco de imagens com parallax */
.monitor-grade {
  display: grid;
  grid-template-columns: 678fr 480fr;
  gap: 24px;
  align-items: center;
}
.monitor-figuras { position: relative; aspect-ratio: 678 / 620; }
.monitor-figuras__principal {
  position: absolute; inset: 0 auto 0 0;
  width: 67%;
  border-radius: var(--raio-medio);
  overflow: hidden;
}
.monitor-figuras__principal img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; }
.monitor-figuras__mockup {
  position: absolute;
  background: var(--branco);
  border-radius: var(--raio-regular);
  box-shadow: var(--sombra-flutuante);
  display: grid; place-items: center;
  padding: 18px;
}
.monitor-figuras__mockup img { width: 100%; height: auto; }
.monitor-figuras__mockup--1 { width: 42%; left: 33%; bottom: 8%; aspect-ratio: 1; }
.monitor-figuras__mockup--2 { width: 32%; left: 66%; bottom: 38%; aspect-ratio: 1; }

.monitor-conteudo { display: flex; flex-direction: column; justify-content: center; gap: 34px; }
.monitor-conteudo__botao { margin-top: 18px; }
.lista-recursos { display: grid; gap: 12px; }
.lista-recursos li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--preto); }
.lista-recursos svg { flex: none; color: var(--vinho); }

/* ------------------------------------------------- slider de cards de midia */
.slider--midia .slider__trilho { gap: var(--midia-gap); }
.slider--midia .slider__slide { flex: 0 0 var(--midia-larg); }

.midia-card {
  position: relative;
  height: var(--midia-alt);
  border-radius: var(--midia-raio);
  overflow: hidden;
}
.midia-card__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
}
.midia-card__conteudo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--midia-pad);
}
.midia-card__vidro {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--midia-vidro-pad);
  border-radius: var(--midia-vidro-raio);
  background: rgba(11, 11, 11, .52);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f2ede8;
}
.midia-card__vidro h3 { color: #fff; margin-bottom: 8px; }
.midia-card__vidro p { max-width: 288px; font-size: 16px; line-height: 25px; }

/* ------------------------------------------------- mural de depoimentos */
.resultados-grade {
  display: grid;
  grid-template-columns: 776fr 300fr;
  gap: 24px;
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
}
.resultados-texto__botao { margin-top: 18px; }

.mural {
  position: relative;
  max-width: 678px;
  display: flex;
  gap: var(--mural-gap);
  height: var(--mural-alt);
  overflow: hidden;
}
.mural__coluna { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mural__bloco {
  display: flex; flex-direction: column;
  gap: var(--mural-espaco);
  padding-bottom: var(--mural-espaco);
}
/* Duas copias iguais empilhadas: deslocar metade da coluna emenda o ciclo. */
.mural__coluna--sobe { animation: muralSobe var(--mural-dur) linear infinite; }
.mural__coluna--desce { animation: muralDesce var(--mural-dur) linear infinite; }
@keyframes muralSobe  { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes muralDesce { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes muralEsquerda { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes muralDireita  { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.mural__fade { position: absolute; pointer-events: none; z-index: 1; }
.mural__fade--inicio {
  inset: 0 0 auto 0; height: var(--mural-fade);
  background: linear-gradient(180deg, var(--creme), rgba(251, 247, 242, 0));
}
.mural__fade--fim {
  inset: auto 0 0 0; height: var(--mural-fade);
  background: linear-gradient(0deg, var(--creme), rgba(251, 247, 242, 0));
}

.depo-card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--depo-gap);
  margin: 0;
  padding: var(--depo-pad);
  background: var(--branco);
  border-radius: var(--depo-raio);
}
.depo-card__estrelas { display: flex; gap: 3px; color: var(--dourado); margin-bottom: 12px; }
.depo-card__texto { margin: 0; }
.depo-card__autor { display: flex; align-items: center; gap: 12px; }
.depo-card__avatar {
  position: relative; flex: none;
  width: 44px; height: 44px;
  border-radius: 999px; overflow: hidden;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--linha);
}
.depo-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.depo-card__nome { display: block; color: var(--preto); font-weight: 700; font-size: var(--fs-d2); line-height: 22px; }
.depo-card__cargo { display: block; color: var(--texto-claro); font-size: 15px; }

/* ------------------------------------------------------------- produtos */
.produtos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.produtos-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.produto {
  display: flex; flex-direction: column; height: 100%;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-regular);
  padding: 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.produto:hover { transform: translateY(-3px); box-shadow: var(--sombra-cartao); border-color: var(--dourado); }
.produto__figura {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: var(--creme);
  border-radius: var(--raio-padrao);
  overflow: hidden;
  margin-bottom: 20px;
}
.produto__figura img {
  width: auto; height: auto;
  max-width: 72%; max-height: 84%;
  object-fit: contain;
}
.produto__figura .ilustra { width: 100%; height: 100%; }
.produto__rotulo {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dourado-escuro); margin-bottom: 6px;
}
.produto__titulo { margin-bottom: 8px; transition: color .25s ease; }
.produto:hover .produto__titulo { color: var(--vinho); }
.produto__link {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--vinho); font-weight: 700; font-size: 16px;
}
.produto__link svg { transition: transform .25s ease; }
.produto:hover .produto__link svg { transform: translateX(4px); }

/* cartao de marca no lugar da foto da fonoaudiologa */
.marca-cartao {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-medio);
  background:
    radial-gradient(80% 70% at 50% 20%, rgba(225, 185, 101, .28) 0%, rgba(225, 185, 101, 0) 65%),
    linear-gradient(150deg, var(--creme) 0%, var(--areia) 100%);
  border: 1px solid var(--linha);
}
.marca-cartao img { width: 132px; height: auto; }

/* ------------------------------------------------------ cards de destino */
.posts-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.post { display: flex; flex-direction: column; gap: 24px; height: 100%; }
.post__figura { border-radius: var(--raio-padrao); overflow: hidden; aspect-ratio: 392 / 300; }
.post__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post:hover .post__figura img { transform: scale(1.05); }
.post__corpo { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; flex: 1; }
.post__titulo { transition: color .3s ease; }
.post:hover .post__titulo { color: var(--vinho); }
.post__resumo { margin-top: 8px; }
.post__detalhes { display: flex; align-items: center; gap: 16px; }
.post__etiqueta {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  color: var(--preto);
  font-size: 14px; line-height: 1.3;
}

/* ------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 14px; max-width: 860px; margin-inline: auto; }
.faq__item {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-padrao);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq__item[open] { border-color: var(--vinho); box-shadow: var(--sombra-cartao); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 26px;
  cursor: pointer;
  font-size: var(--fs-d4); line-height: var(--lh-d4);
  font-weight: 700; color: var(--preto);
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__sinal {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--vinho-claro); color: var(--vinho);
  transition: transform .3s ease, background-color .25s ease, color .25s ease;
}
.faq__item[open] .faq__sinal { transform: rotate(45deg); background: var(--vinho); color: #fff; }
.faq__resposta { padding: 0 26px 26px; }

/* ------------------------------------------------------------- CTA final */
.cta-final { text-align: center; }
.cta-final .d8 { max-width: 20ch; margin-inline: auto; }
.cta-final p { max-width: 54ch; margin: 18px auto 0; }
.cta-final .linha-botoes { margin-top: 32px; }

/* =========================================================== PAGINA DE PRODUTOS */

/* faixa de fundo areia, para separar blocos longos */
.secao--areia { background: var(--areia); }

/* trilha de navegacao (breadcrumb) */
.trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trilha li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--texto-claro); }
.trilha li + li::before { content: "/"; color: var(--linha); }
.trilha a { color: var(--texto); font-weight: 600; }
.trilha a:hover { color: var(--vinho); }

/* cartao de modelo: ficha tecnica sem foto, porque nao temos packshot de todos */
.modelo {
  display: flex; flex-direction: column; gap: 22px;
  height: 100%;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-regular);
  padding: 30px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.modelo:hover { transform: translateY(-3px); box-shadow: var(--sombra-cartao); border-color: var(--dourado); }
.modelo__topo h3 { margin: 12px 0 8px; }
.modelo__etiqueta {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--areia); color: var(--texto);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.modelo__etiqueta--recarregavel { background: #e8f1e9; color: #2f6b3d; }
.modelo__etiqueta--potencia { background: var(--vinho-claro); color: var(--vinho); }

.modelo__specs { margin-top: auto; display: grid; gap: 1px; background: var(--linha); border-radius: 14px; overflow: hidden; }
.modelo__specs > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  background: var(--creme); padding: 12px 16px;
}
.modelo__specs dt { font-size: 15px; color: var(--texto-claro); }
.modelo__specs dd { font-size: 15px; font-weight: 700; color: var(--preto); text-align: right; }

/* grade de graus de perda e de pilhas: cartoes com icone a esquerda */
.grade-2--perdas .cartao-icone,
.grade-2--pilhas .pilha { flex-direction: row; align-items: flex-start; gap: 20px; }

/* pilha: o disco colorido reproduz o codigo de cores do setor */
.pilha {
  display: flex; align-items: flex-start; gap: 20px;
  height: 100%;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-regular);
  padding: 26px 28px;
}
.pilha__disco {
  flex: none;
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--cor);
  color: var(--tinta);
  font-weight: 700; font-size: 18px;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), 0 2px 8px rgba(11, 11, 11, .12);
}
.pilha h3 { margin-bottom: 6px; }
.pilha__cor { font-weight: 500; color: var(--texto-claro); }

.nota-centro { margin-top: 28px; text-align: center; color: var(--texto-claro); font-size: 15px; }

/* aviso da manutencao vitalicia */
.aviso-manutencao {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--dourado);
  border-radius: var(--raio-padrao);
  padding: 24px 28px;
}
.aviso-manutencao p { max-width: 62ch; }

/* figura solta dentro do monitor-grade */
.figura-solo {
  border-radius: var(--raio-medio);
  overflow: hidden;
  background: var(--branco);
}
.figura-solo img { width: 100%; height: auto; display: block; }

/* ======================================================= PAGINA "A EMPRESA" */

/* faixa de numeros */
.numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.numero {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: var(--raio-regular);
  padding: 30px 28px;
}
.numero__valor {
  font-size: 46px; line-height: 1; font-weight: 700;
  letter-spacing: -.03em; color: var(--vinho);
}
.numero__rotulo { font-size: 16px; line-height: 24px; color: var(--texto); }

/* ficha da responsavel tecnica */
.ficha-pessoa {
  display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 40px;
  max-width: 880px; margin-inline: auto;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-medio);
  padding: 40px 44px;
}
.ficha-pessoa__marca {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, var(--areia));
  border: 1px solid var(--linha);
}
.ficha-pessoa__marca img { width: 56%; height: auto; opacity: .85; }
.ficha-pessoa__corpo h3 { margin-bottom: 4px; }
.ficha-pessoa__cargo { color: var(--dourado-escuro); font-weight: 700; margin-bottom: 12px; }
.ficha-pessoa__corpo .link-seta { margin-top: 16px; }

/* dados cadastrais */
.dados-empresa {
  max-width: 880px; margin-inline: auto;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-medio);
  overflow: hidden;
}
.dados-empresa dl { display: grid; gap: 1px; background: var(--linha); }
.dados-empresa dl > div {
  display: grid; grid-template-columns: 220px 1fr; gap: 20px;
  background: var(--branco); padding: 18px 32px;
}
.dados-empresa dt { color: var(--texto-claro); font-size: 16px; }
.dados-empresa dd { font-weight: 600; color: var(--preto); }
.dados-empresa dd a { color: var(--preto); text-decoration: underline; text-underline-offset: 3px; }
.dados-empresa dd a:hover { color: var(--vinho); }

/* ---------------------------------------------------- cartelas de pilha */
/* As cartelas sao altas e estreitas. Lado a lado elas preenchem melhor as
   caixas largas e ainda mostram duas numeracoes de uma vez. */
.cartelas { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cartelas img { width: auto; height: 100%; max-height: 100%; max-width: 48%; object-fit: contain; }

.cartelas--hero { height: 100%; }

.cartelas--vitrine {
  flex-direction: column; gap: 18px;
  max-width: 420px; margin: 0 auto 36px;
}
.cartelas--vitrine img { max-width: 100%; height: auto; }
.cartelas--vitrine figcaption {
  text-align: center; font-size: 15px; color: var(--texto-claro);
}
@media (min-width: 560px) {
  .cartelas--vitrine { flex-direction: row; flex-wrap: wrap; max-width: 520px; }
  .cartelas--vitrine img { max-width: calc(50% - 12px); }
  .cartelas--vitrine figcaption { flex: 1 0 100%; }
}

/* ------------------------------------------------------------- parceiros */
.secao--estreita { padding-block: calc(var(--pad-secao) * .58); }

.parceiros {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 56px;
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: var(--raio-medio);
  padding: 44px 52px;
}
.parceiros__texto { max-width: 62ch; }
.parceiros__texto h2 { margin: 14px 0 14px; }
.parceiros__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }

.marca-parceira {
  display: grid; place-items: center;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-padrao);
  padding: 30px 36px;
  min-width: 416px;
}
.marca-parceira img { width: 344px; max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------ sede */
.sede {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-medio);
  padding: 24px;
}
.sede__foto { border-radius: var(--raio-regular); overflow: hidden; aspect-ratio: 4 / 3; }
.sede__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sede__dados { padding: 8px 16px 8px 0; }
.sede__lista { display: grid; gap: 18px; }
.sede__lista dt { font-size: 15px; color: var(--texto-claro); margin-bottom: 4px; }
.sede__lista dd { font-weight: 600; color: var(--preto); line-height: 26px; }
.sede__lista dd a { color: var(--preto); }
.sede__lista dd a:hover { color: var(--vinho); }

/* lista das cidades cobertas pelo atendimento domiciliar */
.cobertura {
  margin-top: 32px;
  background: var(--creme);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--dourado);
  border-radius: var(--raio-padrao);
  padding: 30px 34px;
}
.cobertura--largo { margin-top: 0; max-width: 900px; margin-inline: auto; }
.cobertura h2, .cobertura h3 { margin-bottom: 12px; }
.cobertura p { max-width: 74ch; }
.cobertura .link-seta { margin-top: 16px; }
.cobertura__lista {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 20px;
}
.cobertura__lista li {
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--linha);
  font-size: 15px; font-weight: 600; color: var(--preto);
}

/* --------------------------------------------------- documentos legais */
/* Texto corrido longo: medida de leitura curta e hierarquia calma. */
.texto-legal { max-width: 74ch; margin-inline: auto; }
.texto-legal h2 {
  margin-top: 44px; margin-bottom: 12px;
  padding-top: 26px; border-top: 1px solid var(--linha);
}
.texto-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texto-legal p { margin-bottom: 14px; }
.texto-legal ul { display: grid; gap: 10px; margin: 4px 0 18px; padding-left: 22px; }
.texto-legal li { list-style: disc; }
.texto-legal li::marker { color: var(--dourado-escuro); }
.texto-legal a { color: var(--vinho); text-decoration: underline; text-underline-offset: 3px; }
.texto-legal a:hover { color: var(--vinho-escuro); }
.texto-legal strong { color: var(--preto); }

/* ----------------------------------------------------------------- rodape */
.rodape {
  background: var(--preto);
  color: #b9b1ac;
  padding-block: 96px 36px;
  border-radius: var(--raio-padrao) var(--raio-padrao) 0 0;
}
.rodape__grade { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; }
.rodape__logo { display: block; width: 176px; margin-bottom: 22px; }
.rodape__logo img { width: 100%; height: auto; }
.rodape__texto { font-size: 16px; line-height: 26px; max-width: 34ch; }
.rodape__social { display: flex; gap: 14px; margin-top: 24px; }
.rodape__social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.rodape__social a:hover { background: var(--dourado); border-color: var(--dourado); color: var(--preto); }

.rodape__coluna-titulo {
  font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dourado); margin-bottom: 18px;
}
.rodape__coluna-titulo--espaco { margin-top: 30px; }
.rodape__dados { display: grid; gap: 12px; font-size: 16px; line-height: 25px; }
.rodape__dados--espaco { margin-top: 24px; }
.rodape__dados a { transition: color .25s ease; }
.rodape__dados a:hover { color: var(--dourado); }

.rodape__base {
  margin-top: 56px; padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 15px; line-height: 24px;
}
.rodape__legal {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 28px;
  color: #8f8781;
}
.rodape__legal p { margin: 0; }
.rodape__legal-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.rodape__legal-links a { transition: color .25s ease; }
.rodape__legal-links a:hover { color: var(--dourado); }
.rodape__fim {
  margin-top: 22px; padding-top: 22px;
  /* espaco a direita para o botao flutuante do WhatsApp nao cobrir o credito */
  padding-right: 84px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
}
.rodape__credito a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape__credito a:hover { color: var(--dourado); }

/* ------------------------------------------------------------- animacoes */
.js [data-revelar] { opacity: 0; transform: translate3d(0, 5%, 0); }
.js [data-revelar].revelado {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .3s ease;
  transition-delay: var(--atraso, 0ms);
}

/* Entrada das imagens do bloco de parallax, presa ao scroll (0 -> 1). */
.js .monitor-figuras__principal {
  opacity: var(--p, 0);
  transform: translateX(calc((1 - var(--p, 0)) * -15%));
}
.js .monitor-figuras__mockup {
  opacity: var(--p, 0);
  transform: translateY(calc((1 - var(--p, 0)) * 30%));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-revelar] { opacity: 1; transform: none; }
  .js .monitor-figuras__principal,
  .js .monitor-figuras__mockup { opacity: 1; transform: none; }
  .marquee__trilho,
  .mural__coluna--sobe,
  .mural__coluna--desce,
  .zap__pulso { animation: none; }
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* ---------------------------------------------------------- tablet <= 991 */
@media (max-width: 991px) {
  :root {
    --pad-secao: 88px;
    --pad-cartao: 88px;
    --pad-moldura: 16px;
    --raio-cartao: 32px;
    --cab-altura: 88px;

    --fs-d9: 46px;   --lh-d9: 54px;
    --fs-d8: 38px;   --lh-d8: 46px;
    --fs-d7: 32px;   --lh-d7: 40px;
    --fs-numero: 56px;

    --hero-pad-topo: 108px;
    --hero-pad-base: 68px;

    --midia-alt: 462px;
    --midia-vidro-pad: 26px;
    --mural-alt: 420px;
    --mural-gap: 20px;
    --mural-fade: 110px;
    --depo-pad: 26px;
    --depo-gap: 26px;
  }

  .menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 0; right: 0;
    background: var(--branco);
    border-radius: var(--raio-regular);
    box-shadow: var(--sombra-flutuante);
    padding: 26px 22px;
    display: none;
  }
  .menu.aberto { display: block; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 4px; }
  .menu__link, .moldura--nav.compacto .menu__link { color: var(--preto); font-size: 18px; padding: 12px 10px; }
  .menu__link:hover, .menu__botao-sub[aria-expanded="true"],
  .moldura--nav.compacto .menu__link:hover,
  .moldura--nav.compacto .menu__botao-sub[aria-expanded="true"] { background: var(--vinho-claro); color: var(--vinho); }
  .menu__botao-sub { width: 100%; justify-content: space-between; }
  .menu__item--cta { display: block; margin-top: 16px; }
  .menu__item--cta .botao { width: 100%; }
  .cabecalho__cta { display: none; }
  .hamburguer { display: block; }

  .menu__item--sub { width: 100%; }
  .submenu {
    width: auto; position: static; translate: none;
    display: none; opacity: 1; visibility: visible; transform: none;
    margin: 6px 0 10px;
  }
  .submenu.aberto { display: block; }
  .menu__item--sub:hover > .submenu:not(.aberto) { display: none; }
  .submenu__card {
    flex-direction: column; gap: 20px; padding: 4px 10px 4px 22px;
    box-shadow: none; border-radius: 0; border-left: 2px solid var(--linha);
  }
  .submenu__lista li { white-space: normal; }

  .dados-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  .dados-grade__titulo { grid-area: 1 / 1 / 2 / 3; }
  .dados-grade__texto { grid-area: 2 / 1 / 3 / 3; max-width: none; padding-bottom: 40px; }
  .dados-grade__foto-pequena { grid-area: 3 / 1 / 4 / 2; max-width: none; }
  .dados-grade__foto-grande { grid-area: 3 / 2 / 4 / 3; }
  .dados-grade__paragrafos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero__duplo { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero__coluna { gap: 34px; }
  .hero__mosaico { height: auto; aspect-ratio: 880 / 520; }
  .hero__descricao { max-width: none; }

  .grade-3, .produtos-grade, .produtos-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aviso-manutencao { flex-direction: column; align-items: flex-start; }
  .parceiros { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 38px 40px; }
  .sede { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sede__dados { padding: 0 8px 12px; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloco-titulo { margin: 48px auto 28px; }
  .bloco-titulo--produtos { margin-top: 76px; }
  .bloco-titulo--produtos::before { margin-bottom: 44px; }
  .grade-3--servicos { grid-template-columns: minmax(0, 1fr); }
  .cartao-base { flex-direction: row; align-items: flex-end; min-height: 0; }
  .cartao-base__conteudo { padding-bottom: 32px; max-width: 340px; }
  .cartao-base__figura { width: 420px; }

  .monitor-grade { grid-template-columns: 313fr 400fr; }
  .etapas-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapas-slide .figura { aspect-ratio: auto; height: 100%; }
  .etapa-cartao { min-height: 280px; }
  .etapa-cartao__texto { max-width: none; }

  .resultados-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; text-align: center; }
  .resultados-texto { order: -1; max-width: 560px; }
  .resultados-texto .linha-botoes { justify-content: center; }
  .mural { flex-direction: column; align-items: flex-start; width: 100%; max-width: none; text-align: start; }
  .mural__coluna { flex-direction: row; flex: none; }
  .mural__bloco { flex-direction: row; padding-bottom: 0; padding-right: var(--mural-espaco); }
  .mural__coluna--sobe { animation-name: muralEsquerda; }
  .mural__coluna--desce { animation-name: muralDireita; }
  .depo-card { width: var(--depo-larg); flex: none; }
  .mural__fade--inicio {
    inset: 0 auto 0 0; width: var(--mural-fade); height: auto;
    background: linear-gradient(90deg, var(--creme), rgba(251, 247, 242, 0));
  }
  .mural__fade--fim {
    inset: 0 0 0 auto; width: var(--mural-fade); height: auto;
    background: linear-gradient(270deg, var(--creme), rgba(251, 247, 242, 0));
  }

  .rodape { padding-block: 80px 32px; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .rodape__legal { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* -------------------------------------------------- mobile paisagem <= 767 */
@media (max-width: 767px) {
  :root {
    --pad-secao: 76px;
    --pad-cartao: 72px;
    --pad-container: 20px;
    --pad-moldura: 0px;
    --raio-cartao: 24px;

    --fs-corpo: 16px;  --lh-corpo: 26px;
    --fs-d9: 36px;     --lh-d9: 44px;
    --fs-d8: 30px;     --lh-d8: 38px;
    --fs-d7: 26px;     --lh-d7: 34px;
    --fs-d5: 21px;     --lh-d5: 29px;
    --fs-d4: 18px;     --lh-d4: 26px;
    --fs-numero: 48px;

    --btn-pad: 14px 24px;
    --btn-fs: 16px;

    --hero-pad-topo: 96px;
    --hero-pad-base: 56px;

    --midia-larg: 320px;
    --midia-gap: 16px;
    --midia-alt: 420px;
    --midia-raio: 20px;
    --midia-pad: 12px;
    --midia-vidro-pad: 22px 20px;
    --midia-vidro-raio: 16px;

    --mural-alt: 380px;
    --mural-gap: 16px;
    --mural-fade: 80px;
    --depo-pad: 24px;
    --depo-gap: 20px;
    --depo-raio: 20px;
    --depo-larg: 300px;
  }

  .cartao, .hero__cartao { border-radius: 0 0 var(--raio-cartao) var(--raio-cartao); }
  .hero .moldura { padding-top: 0; }

  .secao__topo { flex-direction: column; align-items: center; text-align: center; }

  .dados-grade__paragrafos { grid-template-columns: minmax(0, 1fr); }

  .monitor-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .monitor-conteudo { order: -1; }
  .monitor-figuras { aspect-ratio: 660 / 420; }

  .etapas-slide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .etapa-cartao { min-height: 0; padding: 24px; }
  .etapas-slide .figura { aspect-ratio: 660 / 380; height: auto; }

  .cartao-base { flex-direction: column; align-items: stretch; padding: 24px 24px 0; }
  .cartao-base__conteudo { padding-bottom: 0; max-width: none; }
  .cartao-base__figura { width: 100%; }

  .hero__mosaico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.42fr 1fr;
    height: auto;
    aspect-ratio: 660 / 620;
    gap: 12px;
  }
  .hero__foto--c { grid-area: 1 / 1 / 2 / 3; border-radius: 26px; }
  .hero__foto--a { grid-area: 2 / 1; }
  .hero__foto--b { grid-area: 2 / 2; }
  .hero__botoes .botao { flex: 1 1 100%; }

  .posts-grade, .grade-3, .grade-2, .produtos-grade, .produtos-grade--4 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .modelo { padding: 24px; }
  .parceiros { padding: 30px 26px; }
  .sede { padding: 16px; }
  .sede__dados { padding: 0 6px 10px; }
  .cobertura { padding: 24px 22px; }
  .numeros { grid-template-columns: minmax(0, 1fr); }
  .numero { padding: 24px; }
  .numero__valor { font-size: 38px; }
  .ficha-pessoa { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 24px; }
  .ficha-pessoa__marca { width: 132px; }
  .dados-empresa dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 22px; }
  .marca-parceira { min-width: 0; width: 100%; padding: 22px; }
  .pilha { padding: 22px; gap: 16px; }
  .pilha__disco { width: 56px; height: 56px; font-size: 16px; }

  .rodape { padding-block: 64px 28px; border-radius: 0; }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rodape__fim { flex-direction: column; padding-right: 0; }

  .zap { right: 14px; bottom: 14px; height: 56px; }
  .secao--cartao:last-of-type { padding-bottom: 64px; }
}

/* ------------------------------------------------------------ mobile <= 479 */
@media (max-width: 479px) {
  :root {
    --pad-secao: 68px;
    --pad-cartao: 60px;
    --pad-container: 16px;
    --raio-cartao: 20px;

    --fs-d9: 30px;     --lh-d9: 38px;
    --fs-d8: 26px;     --lh-d8: 34px;

    --hero-pad-topo: 88px;
    --hero-pad-base: 44px;

    --midia-larg: min(300px, 100%);
    --raio-medio: 24px;
    --raio-regular: 20px;
  }

  .hero__mosaico { height: auto; aspect-ratio: 420 / 470; gap: 10px; }
  .hero__foto--a, .hero__foto--b { border-radius: 18px; }
  .hero__foto--c { border-radius: 20px; }
  .hero__assinatura { left: 12px; right: 12px; bottom: 12px; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px; }
  .hero__assinatura__marca { width: 42px; height: 42px; border-radius: 11px; }
  .hero__assinatura__texto strong { font-size: 15px; }
  .hero__assinatura__texto small { font-size: 12.5px; }

  .logo { --simbolo-h: 34px; --assinatura-h: 11px; --sub-fs: 7.5px; }
  .moldura--nav.compacto .logo { --simbolo-h: 30px; --assinatura-h: 10px; --sub-fs: 7px; }


  .marquee-secao { padding-block: 44px; }
  .dados-grade { column-gap: 14px; }
  .slider__seta { width: 46px; height: 46px; }
}