/* ==========================================================================
   Fase 1 — interações da proposta aplicadas ao site aprovado
   (acessibilidade, revelação ao rolar, contadores, cards empilhados,
   vídeo com trecho em destaque e microinterações). Nada aqui muda textos.
   ========================================================================== */

/* ---------- painel de acessibilidade ---------- */
.acess__abrir {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 14px;
  min-height: 42px; padding: 0 14px 0 10px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; color: #fff;
  font-size: .9375rem; font-weight: 700; cursor: pointer; transition: background-color .2s, border-color .2s;
}
.acess__abrir svg { width: 22px; height: 22px; }
.acess__abrir:hover, .acess__abrir[aria-expanded="true"] { background: rgba(255, 255, 255, .14); border-color: #fff; }
.acess {
  position: absolute; right: max(var(--lateral), calc((100vw - var(--largura)) / 2)); top: calc(100% + 10px);
  width: min(340px, calc(100vw - 2 * var(--lateral))); z-index: 120;
  background: var(--branco); color: var(--texto); border-radius: var(--raio); padding: 8px 20px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45);
}
.acess[hidden] { display: none; }
.acess__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--creme-2); }
.acess__linha:last-child { border-bottom: 0; }
.acess__titulo { display: block; font-weight: 700; font-size: 1rem; color: var(--verde); }
.acess small { display: block; font-size: .875rem; color: var(--texto-suave); line-height: 1.35; }
.acess__grupo { display: flex; gap: 6px; }
.acess__grupo button {
  width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--verde-suave); background: #fff; color: var(--verde);
  font-weight: 700; font-size: .9375rem; cursor: pointer;
}
.acess__grupo .g1 { font-size: 1.125rem; }
.acess__grupo .g2 { font-size: 1.375rem; }
.acess__grupo button[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.acess__chave { cursor: pointer; }
.acess__chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acess__chave i { flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; background: var(--taupe); position: relative; transition: background-color .2s; }
.acess__chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.acess__chave input:checked + i { background: var(--verde); }
.acess__chave input:checked + i::after { transform: translateX(20px); }
.acess__chave input:focus-visible + i { outline: 3px solid var(--terracota); outline-offset: 2px; }
@media (max-width: 1240px) { .acess__rot { display: none; } .acess__abrir { padding: 0; width: 42px; justify-content: center; } }
@media (max-width: 1080px) {
  .acess__abrir { margin: 20px 0 0; width: auto; padding: 0 16px 0 12px; justify-content: flex-start; }
  .acess__rot { display: inline; }
  .acess { position: fixed; top: 76px; right: var(--lateral); }
}

/* tamanho do texto: a página inteira escala junto */
html[data-fs="1"] { font-size: 112.5%; }
html[data-fs="2"] { font-size: 125%; }

/* alto contraste */
html[data-contraste="alto"] {
  --texto: #111; --texto-suave: #222; --verde: #3f4128; --verde-escuro: #2b2c1b; --verde-claro: #4d5233;
  --creme: #fff; --creme-2: #f1efe9; --branco: #fff; --taupe: #444; --verde-suave: #6b6b5a;
}
html[data-contraste="alto"] .banner::after { background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .9) 100%); }
html[data-contraste="alto"] .textura { background: #7c3f2a; }
html[data-contraste="alto"] .textura::before, html[data-contraste="alto"] .textura::after { display: none; }
html[data-contraste="alto"] a:not(.botao) { text-decoration: underline; }
html[data-contraste="alto"] .rodape__legal, html[data-contraste="alto"] .rodape__legal > a { color: #fff; }

/* reduzir movimento: desliga tudo o que se move */
html[data-motion="reduzido"] { scroll-behavior: auto; }
html[data-motion="reduzido"] *, html[data-motion="reduzido"] *::before, html[data-motion="reduzido"] *::after {
  animation: none !important; transition: none !important;
}
html[data-motion="reduzido"] .banner--contato { clip-path: none; }
html[data-motion="reduzido"] .banner--contato .banner__img { position: absolute; inset: 0; top: 0; height: 100%; }

/* ---------- revelação suave ao rolar ---------- */
html.js:not([data-motion="reduzido"]) .revelar { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .25, 1), transform .8s cubic-bezier(.2, .7, .25, 1); transition-delay: var(--atraso, 0s); }
html.js:not([data-motion="reduzido"]) .revelar.visivel { opacity: 1; transform: none; }

/* banner: a foto dá um leve "zoom-out" ao abrir a página */
@keyframes av-banner { from { transform: scale(1.08); } to { transform: none; } }
html:not([data-motion="reduzido"]) .banner:not(.banner--contato) .banner__img { animation: av-banner 1.6s cubic-bezier(.2, .7, .25, 1) both; }
@keyframes av-subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html:not([data-motion="reduzido"]) .banner__texto > * { animation: av-subir .9s .25s cubic-bezier(.2, .7, .25, 1) both; }
html:not([data-motion="reduzido"]) .banner__texto > p { animation-delay: .45s; }

/* ---------- contadores ---------- */
.impacto__numero { font-variant-numeric: tabular-nums; }

/* ---------- cards empilhados ao rolar ---------- */
/* Perfetti — diferenciais */
.diferenciais--pilha { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; gap: 18px; }
.diferenciais--pilha li { padding: 28px 32px; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); box-shadow: 0 -10px 30px -18px rgba(40, 40, 20, .35); border: 1px solid var(--creme-2); }
.diferenciais--pilha li::before { width: 56px; height: 56px; font-size: 1.5rem; }
@media (min-width: 761px) and (min-height: 640px) {
  .diferenciais--pilha li { position: sticky; top: calc(110px + var(--n, 0) * 22px); min-height: 190px; padding: 40px 48px; font-size: 1.5rem; gap: 28px; }
  .diferenciais--pilha li::before { width: 72px; height: 72px; font-size: 1.875rem; }
}
/* Atuação — especialidades */
@media (min-width: 901px) and (min-height: 780px) {
  .pilha-especialidades { padding-bottom: 24px; }
  .pilha-especialidades .especialidade {
    position: sticky; top: calc(96px + var(--n, 0) * 24px);
    background: var(--branco); border-radius: var(--raio); border-top: 0; padding: 40px; margin-top: 32px;
    box-shadow: 0 -16px 40px -24px rgba(40, 40, 20, .4);
  }
  .pilha-especialidades .especialidade--primeira { margin-top: 24px; padding-top: 40px; }
}

/* ---------- vídeo com trecho em destaque ---------- */
.video[data-teaser] .video__rotulo {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  padding: 8px 16px; border-radius: 999px; background: rgba(20, 20, 12, .55); color: #fff; font-size: .9375rem; font-weight: 700;
  pointer-events: none; white-space: nowrap; backdrop-filter: blur(6px);
}
.video.previa > img { opacity: 0; transition: opacity .6s; }
.video.previa .video__play { background: rgba(20, 20, 12, .18); }
.video.tocando .video__rotulo { display: none; }

/* ---------- microinterações ---------- */
.foto img, .membro__foto img, .produto .foto img, .galeria-linha img, .cartao-verde__foto img { transition: transform .7s cubic-bezier(.2, .7, .25, 1); }
.foto:hover img, .membro:hover .membro__foto img, .produto:hover .foto img, .cartao-verde:hover .cartao-verde__foto img { transform: scale(1.04); }
.cota, .membro, .depoimento, .mvv article, .conselho article, .colaborar article { transition: transform .35s cubic-bezier(.2, .7, .25, 1), box-shadow .35s; }
.cota:hover, .membro:hover, .depoimento:hover, .mvv article:hover, .conselho article:hover, .colaborar article:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(40, 40, 20, .5); }
.botao { transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(1px); }
.menu__lista a { position: relative; }