/* ==========================================================================
   COOPADAP · styles.css (UNIFICADO)
   Arquivo único gerado a partir de: tokens, base, components,
   page-transition, scroll-smoother, home, page.
   ========================================================================== */


/* ===== css/tokens.css ===== */

/* ==========================================================================
   COOPADAP · tokens.css
   Fonte única de verdade do design system. Nada de valores "mágicos" no resto
   do CSS — tudo sai daqui. Para rebranding/ajustes, edite apenas este arquivo.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     CORES
     ---------------------------------------------------------------------- */
  --color-brand:         #035925;  /* verde da marca (primário) */
  --color-brand-dark:    #002c11;  /* verde escuro: fundos/footer/wordmark */
  --color-brand-hover:   #024a1f;  /* hover do verde primário */
  --color-text:          #585858;  /* texto de corpo */
  --color-heading:       #0d0d0d;  /* títulos sobre fundo claro */
  --color-black:         #000000;
  --color-white:         #ffffff;
  --color-bg:            #fafafa;  /* fundo off-white */
  --color-surface:       #ebebeb;  /* superfícies / bordas claras */
  --color-line:          #e2e2e2;  /* divisórias finas */

  /* Acentos (logo + faixas) */
  --color-accent-gold:   #f5e197;  /* dourado pálido */
  --color-accent-tan:    #eecbaa;  /* bege quente */
  --color-accent-yellow: #ffff7e;  /* amarelo vivo */
  --color-mark-red:      #e11d29;  /* ponto vermelho do símbolo */
  --color-mark-orange:   #f6a01e;  /* laranja do símbolo */
  --color-mark-green:    #4caf2f;  /* verde-claro do símbolo */

  /* Overlays */
  --overlay-black-04: rgba(0,0,0,.04);
  --overlay-black-18: rgba(0,0,0,.18);
  --overlay-black-25: rgba(0,0,0,.25);
  --overlay-black-30: rgba(0,0,0,.30);
  --overlay-black-45: rgba(0,0,0,.45);
  --overlay-white-10: rgba(255,255,255,.10);
  --overlay-white-20: rgba(255,255,255,.20);

  /* Faixa CTA amarela (gradiente do print) */
  --grad-cta: radial-gradient(120% 140% at 60% 55%,
                var(--color-accent-yellow) 0%,
                #fdf07a 38%,
                var(--color-accent-gold) 70%,
                var(--color-accent-tan) 100%);

  /* Faixa CTA verde (degradê nos verdes da marca) */
  --grad-green: linear-gradient(120deg,
                var(--color-brand-dark) 0%,
                var(--color-brand) 55%,
                #0a7a33 100%);

  /* ----------------------------------------------------------------------
     TIPOGRAFIA
     ---------------------------------------------------------------------- */
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Escala fluida (clamp: mobile → desktop) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.1vw, 4.375rem); /* ~44 → 70 */
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.8vw, 3.25rem);  /* ~36 → 52 */
  --fs-h2:      clamp(2rem,   1.4rem + 2.7vw, 2.625rem);  /* ~32 → 42 */
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);   /* ~24 → 36 */
  --fs-sub-lg:  clamp(1.375rem,1.1rem + 1.2vw,1.75rem);   /* ~22 → 28 */
  --fs-sub:     1.25rem;  /* 20 */
  --fs-lead:    1.125rem; /* 18 */
  --fs-body:    1rem;     /* 16 */
  --fs-sm:      0.875rem; /* 14 */
  --fs-xs:      0.75rem;  /* 12 */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;

  --ls-display: -0.018em; /* títulos grandes */
  --ls-heading: -0.012em;
  --ls-tight:   -0.006em;
  --ls-normal:  0;

  /* ----------------------------------------------------------------------
     ESPAÇAMENTO (escala real: 4,10,15,20,30,40,50,60,70,120,140,150)
     ---------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  10px;
  --space-3:  15px;
  --space-4:  20px;
  --space-5:  30px;
  --space-6:  40px;
  --space-7:  50px;
  --space-8:  60px;
  --space-9:  70px;
  --space-10: 120px;
  --space-11: 140px;
  --space-12: 150px;

  /* Ritmo vertical das seções */
  --section-y: clamp(56px, 7vw, 120px);

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-max: 1570px;
  --gutter:       80px;   /* desktop */
  --gutter-mobile:15px;

  /* ----------------------------------------------------------------------
     FORMA
     ---------------------------------------------------------------------- */
  --radius-input: 4px;
  --radius:       10px;   /* botões/cards */
  --radius-lg:    16px;
  --radius-pill:  999px;

  --shadow-sm:  0 1px 2px var(--overlay-black-04);
  --shadow-md:  0 10px 30px rgba(0,0,0,.06);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.12);
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px rgba(0,0,0,.045);

  /* ----------------------------------------------------------------------
     MOVIMENTO
     ---------------------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .35s;

  /* Header */
  --header-h: 84px;
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--gutter-mobile);
    --header-h: 68px;
  }
}


/* ===== css/base.css ===== */

/* ==========================================================================
   COOPADAP · base.css
   Reset moderno + tipografia base + helpers de layout (container / grid).
   Depende de tokens.css.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* desativado quando .has-scroll-smoother (scroll-smoother.css) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

img,
picture,
video,
svg { display: block; max-width: 100%; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; }

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

ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ---- Tipografia ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-sub); line-height: var(--lh-snug); }

p { text-wrap: pretty; }

strong { font-weight: var(--fw-semibold); color: var(--color-heading); }

/* ---- Utilitários de tipografia ------------------------------------------ */
.display { font-size: var(--fs-display); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.eyebrow-text { font-size: var(--fs-sm); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-normal); }
.text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--color-text); }
.text-brand { color: var(--color-brand); }

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

.container--narrow { max-width: 1180px; }

/* ---- Seções -------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 70px); }
.section--bg     { background: var(--color-bg); }
.section--surface{ background: var(--color-surface); }
.section--dark   { background: var(--color-brand-dark); color: var(--color-white); }
/* Home: vão vertical mais generoso entre as seções (ritmo respirado). */
body[data-page="home"] { --section-y: clamp(80px, 9vw, 160px); }
/* Home: todas as seções (exceto o hero) ficam com fundo branco. */
body[data-page="home"] .section--bg { background: var(--color-white); }
body[data-page="home"] .section--tight.section--bg {
  padding-top: 0;
  padding-bottom: var(--section-y);
}
/* A intro "Sobre" funde-se com a seção acima (Parceiros), mantendo um único
   vão de section-y entre todas as seções do trecho — rítmo vertical uniforme. */
body[data-page="home"] #sobre { padding-top: 0; }
/* Parceiros (home): o vão subtítulo→logos iguala o vão logos→seção de baixo
   (ambos = section-y). O gap fica a cargo só do margin-top do marquee. */
body[data-page="home"] .section-head { margin-bottom: 0; }
body[data-page="home"] .cert-marquee { margin-top: var(--section-y); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--color-white); }

/* ---- Grid helpers -------------------------------------------------------- */
.grid { display: grid; gap: var(--space-6); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid-3,
  .grid-2,
  .grid-4 { grid-template-columns: 1fr; }
}

/* ---- Flow (espaçamento vertical interno) -------------------------------- */
.flow > * + * { margin-top: var(--space-4); }
.flow-sm > * + * { margin-top: var(--space-2); }
.flow-lg > * + * { margin-top: var(--space-6); }

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

/* ---- Reveal on scroll (GSAP-driven) -------------------------------------
   Anti-FOUC: só escondemos quando há JS (html.js). Sem JS ou se o GSAP
   falhar, o conteúdo aparece normalmente. O transform inicial é aplicado
   pelo GSAP (gsap.set), por isso aqui mexemos só na opacidade.
   ------------------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Imagens fluidas com proporção */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--color-surface); }
.media img,
.media video { width: 100%; height: 100%; object-fit: cover; }

/* ---- Placeholder de imagem (até chegarem as fotos reais) ---------------- */
.ph {
  --ph-fg: #9aa39a;
  position: relative;
  background-color: #eef0ec;
  background-image: repeating-linear-gradient(135deg,
      rgba(3,89,37,.05) 0 10px, rgba(3,89,37,0) 10px 20px);
  display: grid;
  place-items: center;
  color: var(--ph-fg);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  padding: 10px;
}
.ph[data-label]::after { content: attr(data-label); }
.ph--dark { --ph-fg: rgba(255,255,255,.7); background-color: #20402c;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, rgba(255,255,255,0) 10px 20px); }


/* ===== css/components.css ===== */

/* ==========================================================================
   COOPADAP · components.css
   Componentes reutilizáveis: header, footer, botões, badges, eyebrow,
   cards, stats, faixas CTA, formulários. Depende de tokens.css + base.css.
   ========================================================================== */

/* ==========================================================================
   BOTÕES  (.btn)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn .icon { width: 16px; height: 16px; flex: none; }

.btn--primary {
  background: var(--color-brand);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-brand-hover); }

.btn--light {
  background: var(--color-white);
  color: var(--color-heading);
  box-shadow: var(--shadow-sm);
}
.btn--light:hover { background: var(--color-bg); }

.btn--ghost {
  background: var(--overlay-white-10);
  color: var(--color-white);
  border: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: var(--overlay-white-20); }

/* Botão secundário para fundos claros (borda) */
.btn--outline {
  background: transparent;
  color: var(--color-heading);
  border: 1px solid var(--color-line);
}
.btn--outline:hover { background: var(--color-surface); }

.btn--outline {
  background: transparent;
  color: var(--color-heading);
  border: 1px solid var(--color-line);
}
.btn--outline:hover { border-color: var(--color-brand); color: var(--color-brand); }

.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--lg { padding: 17px 30px; font-size: var(--fs-body); }
.btn--sm { padding: 8px 14px; font-size: var(--fs-xs); }
.btn--danger {
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fecdca;
}
.btn--danger:hover:not(:disabled) { background: #fee4e2; border-color: #fda29b; }

/* ==========================================================================
   PRELOADER  (dot-elastic + mensagem)
   Baseado em three-dots · dot-elastic (template/)
   ========================================================================== */
.preloader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
}

.preloader--inline {
  padding: var(--space-8) var(--space-4);
  min-height: 120px;
}

.preloader--overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  border-radius: inherit;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Scrim fixo de tela cheia (upload/salvamento do admin): fundo escuro com o
   preloader sempre centralizado na viewport, para sinalizar que está
   processando e não travou. Anexado ao <body> para não ser afetado pelo
   transform do ScrollSmoother. */
.preloader--fixed {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(13, 13, 13, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.preloader--fixed .dot-elastic,
.preloader--fixed .dot-elastic::before,
.preloader--fixed .dot-elastic::after {
  background-color: #fff;
  color: #fff;
}
.preloader--fixed .preloader__text { color: rgba(255, 255, 255, 0.92); }

/* Gate de carregamento da home: cobre a tela até a notícia da hero ser
   resolvida. Só atua com JS (sem JS o conteúdo aparece normalmente). É
   dispensado via [data-gate-done], que faz o fade de saída. */
.page-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  transition: opacity .5s ease, visibility 0s linear .5s;
}
html.js .page-gate { display: flex; }
.page-gate .dot-elastic,
.page-gate .dot-elastic::before,
.page-gate .dot-elastic::after {
  background-color: var(--color-brand);
  color: var(--color-brand);
}
.page-gate[data-gate-done] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-gate { transition: none; }
}

/* Dot Elastic (three-dots) */
.dot-elastic {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--color-brand);
  color: var(--color-brand);
  animation: dot-elastic 1s infinite linear;
  flex: none;
}

.dot-elastic::before,
.dot-elastic::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--color-brand);
  color: var(--color-brand);
}

.dot-elastic::before {
  left: -12px;
  animation: dot-elastic-before 1s infinite linear;
}

.dot-elastic::after {
  left: 12px;
  animation: dot-elastic-after 1s infinite linear;
}

@keyframes dot-elastic-before {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1, 1.5); }
  50% { transform: scale(1, 0.67); }
  75% { transform: scale(1, 1); }
  100% { transform: scale(1, 1); }
}

@keyframes dot-elastic {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1, 1); }
  50% { transform: scale(1, 1.5); }
  75% { transform: scale(1, 1); }
  100% { transform: scale(1, 1); }
}

@keyframes dot-elastic-after {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1, 1); }
  50% { transform: scale(1, 0.67); }
  75% { transform: scale(1, 1.5); }
  100% { transform: scale(1, 1); }
}

.preloader__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  max-width: 28ch;
}

.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: btn-loading-spin 0.6s linear infinite;
}

.btn.btn--outline.is-loading::after {
  border-top-color: var(--color-brand);
}

@keyframes btn-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dot-elastic,
  .dot-elastic::before,
  .dot-elastic::after {
    animation: none;
  }

  .btn.is-loading::after {
    animation: none;
    border-color: var(--color-white);
    border-top-color: var(--color-white);
  }

  .btn.btn--outline.is-loading::after {
    border-color: var(--color-brand);
    border-top-color: var(--color-brand);
  }
}

/* ==========================================================================
   BADGES / PÍLULAS DE VALOR  (Comprometidos · Enraizados · Impactantes)
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
}
.pill .icon { width: 14px; height: 14px; flex: none; }
.pill--light { background: var(--color-white); color: var(--color-heading); box-shadow: var(--shadow-sm); }
/* Glassmorphism idêntico ao botão da navbar (.site-header__cta-btn): para pílulas sobre imagens. */
.pill--glass { background: var(--overlay-white-10); color: var(--color-white); border: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pill--glass:hover { background: var(--overlay-white-20); }
.pill--soft  { background: var(--color-surface); color: var(--color-heading); }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ==========================================================================
   EYEBROW  (rótulo de seção com folhinha)
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  letter-spacing: var(--ls-tight);
}
.eyebrow .icon { width: 15px; height: 15px; color: var(--color-brand); }
.eyebrow--light { color: var(--color-white); }
.eyebrow--light .icon { color: var(--color-white); }
.eyebrow--muted { color: var(--color-text); }

/* ==========================================================================
   HEADER  (sticky, reutilizável)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}
.site-header__logo img { height: 24px; width: auto; }

/* navegação */
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  padding: 6px 0;
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--color-brand); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--color-brand); border-radius: 2px;
}

/* dropdown "Mais" */
.nav__item--has-menu { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-heading);
}
.nav__toggle .chev { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.nav__item--has-menu[data-open="true"] .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 150px;
  width: max-content;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item--has-menu[data-open="true"] .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a {
  font-size: var(--fs-sm); color: var(--color-text);
  padding: 6px 4px; border-radius: 6px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dropdown a:hover { color: var(--color-brand); background: var(--color-bg); }

.site-header__cta { display: flex; align-items: center; gap: var(--space-3); }

.site-header__admin-user {
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CTA do header — base = glass (sobre imagem); vira verde nos estados claros */
.site-header__cta-btn {
  background: var(--overlay-white-10);
  color: #fff;
  border: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header__cta-btn:hover { background: var(--overlay-white-20); }

/* Logo: símbolo SEMPRE colorido. Wordmark branca em fundo escuro/transparente-sobre-escuro
   (.logo--oncolor) e verde-escura em fundo claro/branco (.logo--color).
   Mobile (≤991px): símbolo compacto (.logo--symbol). */
.site-header__logo { display: inline-flex; }
.site-header__logo img { display: none; }
.logo--symbol { display: none; }
/* over-hero (home): wordmark branca no topo e no verde ao rolar */
.site-header--over-hero .logo--oncolor { display: block; }
/* banner: branca no topo (sobre imagem), escura ao rolar (barra branca) */
.site-header--banner .logo--oncolor { display: block; }
.site-header--banner.is-scrolled .logo--oncolor { display: none; }
.site-header--banner.is-scrolled .logo--color { display: block; }
/* split (fundo claro) e solid (barra branca): wordmark verde-escura */
.site-header--split .logo--color { display: block; }
.site-header--solid .logo--color { display: block; }

/* botão hambúrguer */
.nav-toggle-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle-btn .bars { position: relative; width: 22px; height: 14px; }
.nav-toggle-btn .bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle-btn .bars span:nth-child(1) { top: 0; }
.nav-toggle-btn .bars span:nth-child(2) { top: 6px; }
.nav-toggle-btn .bars span:nth-child(3) { top: 12px; }

/* ==========================================================================
   HEADER — MODOS
   over-hero : HOME (texto branco; fica VERDE e gruda ao rolar)
   banner    : hero imagem full-width (texto branco; fica BRANCO ao rolar)
   split     : texto escuro + imagem no canto sup. direito (BRANCO ao rolar)
   solid     : barra branca padrão (texto escuro)
   ========================================================================== */

/* ---- MODO over-hero (HOME) ---- */
.site-header--over-hero {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
}
.site-header--over-hero .nav__link,
.site-header--over-hero .nav__toggle,
.site-header--over-hero .nav-toggle-btn { color: var(--color-white); }
.site-header--over-hero .nav__link:hover,
.site-header--over-hero .nav__toggle:hover { color: rgba(255,255,255,.7); }
.site-header--over-hero.is-scrolled {
  background: var(--color-brand);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.site-header--over-hero.is-scrolled .site-header__cta-btn { background: var(--overlay-white-20); }

/* ---- MODO banner (imagem full-width) ---- */
.site-header--banner {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
}
.site-header--banner .nav__link,
.site-header--banner .nav__toggle,
.site-header--banner .nav-toggle-btn { color: var(--color-white); }
.site-header--banner .nav__link:hover,
.site-header--banner .nav__toggle:hover { color: rgba(255,255,255,.7); }
.site-header--banner.is-scrolled {
  background: var(--color-white);
  box-shadow: 0 1px 0 var(--color-line), 0 8px 24px rgba(0,0,0,.05);
}
.site-header--banner.is-scrolled .nav__link,
.site-header--banner.is-scrolled .nav__toggle,
.site-header--banner.is-scrolled .nav-toggle-btn { color: var(--color-heading); }
.site-header--banner.is-scrolled .nav__link:hover,
.site-header--banner.is-scrolled .nav__toggle:hover { color: var(--color-brand); }
.site-header--banner.is-scrolled .site-header__cta-btn {
  background: var(--color-brand); color: #fff; backdrop-filter: none;
}

/* ---- Estado do header sobre a faixa split da home (data-image-split) ------
   Enquanto a faixa passa sob o header, ele fica sólido (branco, combinando com
   o lado claro da faixa) e a navegação desliza para a esquerda, como o modo
   "split". Só no desktop; no mobile a faixa empilha e o header segue normal. */
.site-header__nav { transition: transform .55s var(--ease); }
@media (min-width: 992px) {
  .site-header.is-image-split {
    background: var(--color-white) !important;
    box-shadow: 0 1px 0 var(--color-line), 0 8px 24px rgba(0,0,0,.05) !important;
  }
  .site-header.is-image-split .site-header__nav { transform: translateX(var(--nav-shift, 0)); }
  .site-header.is-image-split .nav__link,
  .site-header.is-image-split .nav__toggle { color: var(--color-heading); }
  .site-header.is-image-split .nav__link:hover,
  .site-header.is-image-split .nav__toggle:hover { color: var(--color-brand); }
  .site-header.is-image-split .logo--oncolor { display: none; }
  .site-header.is-image-split .logo--color { display: block; }
  .site-header.is-image-split .site-header__cta-btn {
    background: var(--color-brand); color: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
  }
}

/* ---- FAIXA SPLIT: texto à esquerda (fundo claro) + imagem full-bleed ------ */
.image-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 100svh;
  background: var(--color-white);
}
.image-split__text {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--section-y);
  padding-right: clamp(var(--space-7), 7vw, 110px);
  padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
}
.image-split__title { font-size: var(--fs-h2); max-width: 20ch; }
.image-split__lead { margin-top: var(--space-5); max-width: 44ch; }
.image-split__cta {
  margin-top: var(--space-7); width: max-content;
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-weight: var(--fw-medium); color: var(--color-heading);
  border-bottom: 1px solid var(--color-line); padding-bottom: 6px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.image-split__cta:hover { color: var(--color-brand); border-color: var(--color-brand); }
.image-split__cta .icon { width: 18px; height: 18px; }
.image-split__media { position: relative; overflow: hidden; }
.image-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .image-split { grid-template-columns: 1fr; min-height: 0; }
  .image-split__media { min-height: clamp(280px, 60vw, 420px); order: -1; }
  .image-split__text { padding: var(--section-y) var(--space-5); }
}

/* ---- MODO split (texto escuro + imagem no canto) ---- */
.site-header--split {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
}
/* nav agrupada à esquerda: links param antes da imagem, não passam por cima */
.site-header--split .site-header__nav { margin-right: auto; margin-left: var(--space-6); }
.site-header--split.is-scrolled {
  background: var(--color-white);
  box-shadow: 0 1px 0 var(--color-line), 0 8px 24px rgba(0,0,0,.05);
}
.site-header--split.is-scrolled .site-header__cta-btn {
  background: var(--color-brand); color: #fff; backdrop-filter: none;
}

/* ---- MODO solid (barra branca) ---- */
.site-header--solid {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}
.site-header--solid .site-header__cta-btn {
  background: var(--color-brand); color: #fff; backdrop-filter: none;
}
.site-header--solid .site-header__cta-btn:hover { background: var(--color-brand-hover); }

/* ==========================================================================
   STATS  (número grande + rótulo)
   ========================================================================== */
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.8rem + 4vw, 4rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--color-heading);
}
.stat__label { font-weight: var(--fw-medium); color: var(--color-heading); margin-top: var(--space-3); }
.stat__desc { font-size: var(--fs-sm); margin-top: var(--space-2); }

/* ==========================================================================
   CARDS
   ========================================================================== */
/* Card de superfície simples */
.card {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  padding: var(--space-6);
}

/* Card de solução com imagem + ícone + overlay */
.solution-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  color: var(--color-white);
  isolation: isolate;
}
.solution-card__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.solution-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 25%, var(--overlay-black-45) 75%, var(--overlay-black-45));
}
.solution-card__plus {
  position: absolute; top: var(--space-4); left: var(--space-4);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-white); color: var(--color-heading);
  display: grid; place-items: center;
}
.solution-card__plus .icon { width: 16px; height: 16px; }
.solution-card__title { color: var(--color-white); font-size: var(--fs-sub); margin-bottom: var(--space-2); }
.solution-card__text { font-size: var(--fs-sm); color: rgba(255,255,255,.86); }

/* Lista de solução (item com thumb + texto) — usada na listagem Soluções */
.solution-row {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4) 0;
}
.solution-row__thumb { width: 86px; height: 64px; border-radius: 8px; flex: none; object-fit: cover; background: var(--color-surface); }
.solution-row__title { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub); }
.solution-row__text { font-size: var(--fs-sm); margin-top: 4px; }

/* Card de membro da equipe */
.member__photo { aspect-ratio: 1 / 1; border-radius: var(--radius); object-fit: cover; width: 100%; background: var(--color-surface); }
.member__name { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub); margin-top: var(--space-3); }
.member__role { font-size: var(--fs-sm); margin-top: 2px; }

/* Card de depoimento */
.quote-card {
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--space-5);
  min-height: 230px;
}
.quote-card--dark { background: var(--color-brand-dark); box-shadow: none; color: #fff; }
.quote-card--brand { background: var(--color-brand); box-shadow: none; color: #fff; }
.quote-card__text { font-size: var(--fs-lead); color: inherit; line-height: var(--lh-snug); }
.quote-card__person { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.quote-card__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--color-surface); }
.quote-card__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* Card de post do blog */
.post-card {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-soft, #eef0ee); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Skeleton/shimmer individual por capa: fica enquanto a imagem carrega e some
   suavemente quando ela termina (ou já está em cache). */
.post-card__img { opacity: 0; transition: opacity .45s ease; }
.post-card__media.is-loaded .post-card__img { opacity: 1; }
.post-card__media.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,0) 20%, rgba(255,255,255,.55) 50%, rgba(0,0,0,0) 80%);
  background-size: 200% 100%;
  animation: cover-shimmer 1.2s ease-in-out infinite;
}
@keyframes cover-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .post-card__img { opacity: 1; transition: none; }
  .post-card__media.is-loading::after { animation: none; }
}
.post-card__cat {
  position: absolute; top: var(--space-3); left: var(--space-3);
  background: var(--overlay-white-20); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 5px 10px; border-radius: var(--radius-pill);
}
.post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post-card__title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.post-card__title h3 { font-size: var(--fs-sub); }
.post-card:hover .post-card__title h3 { color: var(--color-brand); }
.post-card__plus { flex: none; color: var(--color-text); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-card {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.price-card--featured {
  background: var(--grad-cta);
  box-shadow: var(--shadow-md);
}
.price-card__name { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub); }
.price-card__desc { font-size: var(--fs-sm); }
.price-card__price { display: flex; align-items: flex-start; gap: 4px; color: var(--color-heading); }
.price-card__currency { font-family: var(--font-display); font-size: var(--fs-sub); margin-top: 6px; }
.price-card__amount { font-family: var(--font-display); font-size: clamp(2.5rem, 1.8rem + 3vw, 3.25rem); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-display); }
.price-card__period { align-self: flex-end; font-size: var(--fs-sm); color: var(--color-text); margin-bottom: 8px; }
.price-card__features { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-sm); }
.price-card__features li { display: flex; gap: 10px; align-items: flex-start; }
.price-card__features .icon { width: 15px; height: 15px; color: var(--color-brand); flex: none; margin-top: 2px; }

/* ==========================================================================
   FAIXAS CTA
   ========================================================================== */
.cta-band {
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 70px);
  position: relative;
  overflow: hidden;
}
.cta-band--yellow { background: var(--grad-cta); color: var(--color-heading); }
.cta-band--yellow h2 { color: var(--color-heading); }
.cta-band--dark { background: var(--color-brand-dark); color: #fff; }
.cta-band--dark h2 { color: #fff; }
.cta-band--green { background: var(--grad-green); color: #fff; }
.cta-band--green h2 { color: #fff; }
.cta-band--green .cta-band__text { color: rgba(255,255,255,.85); }
/* Faixa CTA com imagem de fundo + overlay (mesmo padrão do .image-cta) */
.cta-band--image { color: #fff; isolation: isolate; }
.cta-band--image .cta-band__title,
.cta-band--image h2 { color: #fff; }
.cta-band--image .cta-band__text { color: rgba(255,255,255,.88); }
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg .ph,
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-black-45); }
.cta-band__title { font-size: var(--fs-h2); max-width: 16ch; }
.cta-band__text { max-width: 46ch; margin-top: var(--space-4); }

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-heading); }
.input, .textarea, select.input {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-input);
  padding: 13px 15px;
  font-size: var(--fs-sm);
  color: var(--color-heading);
  transition: border-color var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #9a9a9a; }
.input:focus, .textarea:focus, select.input:focus { outline: none; border-color: var(--color-brand); }
.textarea { resize: vertical; min-height: 120px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .form-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-white);
  padding-block: var(--space-9) var(--space-7);
  border-top: 1px solid var(--color-line);
}
.site-footer__top {
  display: grid;
  /* Igual ao layout de referência: a marca ocupa o espaço livre à esquerda
     (1fr) e as 4 colunas (largura de conteúdo) ficam agrupadas à direita, com
     gaps uniformes; a última encosta na borda direita, sobre o crédito do
     rodapé. Nos breakpoints menores o grid é redefinido abaixo. */
  grid-template-columns: 1fr repeat(4, auto);
  gap: clamp(var(--space-7), 5vw, 90px);
  align-items: start;
}
.site-footer__brand { max-width: 360px; }
.site-footer__brand-logo { display: inline-block; }
.site-footer__brand-logo img { height: 40px; width: auto; }
.site-footer__tagline {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-heading);
  margin-top: var(--space-4);
  line-height: var(--lh-normal);
  max-width: 28ch;
}
.site-footer__social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.site-footer__social-link:hover {
  color: var(--color-brand);
}
.site-footer__social-link .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: currentColor;
}
.footer-col__head {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}
.footer-col a {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text);
  padding: 4px 0;
  line-height: var(--lh-normal);
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--color-brand); }
/* Desktop: alinha a última coluna (1ª da direita p/ esquerda) ao início do
   crédito do rodapé inferior. Ambos terminam na borda direita
   do container; dando à coluna a largura do crédito, suas bordas ESQUERDAS
   coincidem. Ao alargar a última, as demais colunas acompanham para a esquerda. */
@media (min-width: 1200px) {
  .site-footer__top .footer-col:last-child { min-width: 160px; }
}
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.site-footer__copy,
.site-footer__credit {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-normal);
}
.site-footer__credit a {
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
}
.site-footer__credit a:hover { color: var(--color-brand-hover); }

@media (max-width: 1199px) {
  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 991px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .site-footer { padding-block: var(--space-8) var(--space-6); }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ==========================================================================
   MENU MOBILE (off-canvas)
   ========================================================================== */
@media (max-width: 991px) {
  .site-header__logo .logo--oncolor,
  .site-header__logo .logo--color { display: none !important; }
  .site-header__logo .logo--symbol { display: block; height: 32px; width: auto; }
  .nav-toggle-btn { display: inline-flex; }
  .site-header__nav {
    position: fixed; inset: 0;
    background: var(--color-white);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + 20px) var(--gutter-mobile) var(--space-6);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    z-index: 90;
  }
  body[data-nav-open="true"] .site-header__nav { transform: translateX(0); }
  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link, .nav__toggle {
    color: var(--color-heading) !important;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--fs-sub);
    justify-content: space-between;
    width: 100%;
  }
  .dropdown {
    position: static; transform: none; min-width: 0; width: 100%;
    box-shadow: none; border: 0; opacity: 1; visibility: visible;
    grid-template-columns: 1fr; padding: var(--space-3) 0 var(--space-4);
    display: none;
  }
  .nav__item--has-menu[data-open="true"] .dropdown { display: grid; }
  .site-header__cta .btn--primary { display: none; }
  .site-header__admin-user { display: none; }
  body[data-nav-open="true"] { overflow: hidden; }
  /* hambúrguer animado */
  body[data-nav-open="true"] .nav-toggle-btn .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body[data-nav-open="true"] .nav-toggle-btn .bars span:nth-child(2) { opacity: 0; }
  body[data-nav-open="true"] .nav-toggle-btn .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  body[data-nav-open="true"] .nav-toggle-btn { color: var(--color-heading) !important; position: relative; z-index: 95; }
}


/* ===== css/page-transition.css ===== */

/* ==========================================================================
   COOPADAP · page-transition.css
   Viewport fixo durante troca de páginas (fade, tela cheia).
   ========================================================================== */

html.is-transitioning {
  overflow: hidden;
  scroll-behavior: auto;
}

#page-transition {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

html.is-transitioning #page-transition {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}


/* ===== css/scroll-smoother.css ===== */

/* ==========================================================================
   COOPADAP · scroll-smoother.css
   Layout para GSAP ScrollSmoother (wrapper + content).
   ========================================================================== */

#smooth-wrapper {
  overflow: hidden;
  width: 100%;
}

html.has-scroll-smoother,
html.has-scroll-smoother body {
  overflow: hidden;
  height: 100%;
}

html.has-scroll-smoother {
  scroll-behavior: auto;
}

/* Header fora do smooth-content: garante camada acima do conteúdo que rola */
html.has-scroll-smoother .site-header {
  z-index: 200;
}
/* Sticky não funciona com ScrollSmoother (o scroll é no #smooth-wrapper, não no
   documento). Modo solid usa sticky por padrão — fixa no topo como banner/split. */
html.has-scroll-smoother .site-header--solid {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}


/* ===== css/home.css ===== */

/* ==========================================================================
   COOPADAP · home.css
   Estilos específicos da Home (index.html). Depende de tokens/base/components.
   ========================================================================== */

/* ---- HERO ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-white);
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero__bg img,
.hero__bg video { width: 100%; height: 100%; object-fit: cover; }
.hero__video-stack { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--color-brand-dark); }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--hero-video-fade, 1.2s) ease-in-out;
  pointer-events: none;
}
.hero__video.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video-stack { display: none; }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--overlay-black-30) 0%, rgba(0,0,0,0) 28%),
    linear-gradient(0deg, var(--overlay-black-45) 0%, rgba(0,0,0,0) 55%);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: end;
  gap: var(--space-8);
  width: 100%;
  padding-bottom: var(--space-6);
}
.hero__aside { max-width: 40ch; }
.hero__traits { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.hero__trait { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: #fff; }
.hero__trait .icon { width: 13px; height: 13px; color: #fff; flex: none; }
.hero__aside p {
  color: #fff;
  font-size: var(--fs-sub-lg);
  line-height: var(--lh-snug);
}
/* Texto de apoio dinâmico (notícias): fica oculto até o módulo decidir o
   conteúdo (notícia mais recente ou fallback), evitando o flash do texto
   antigo antes das notícias carregarem. A opacidade preserva o espaço, sem
   "pulo" de layout. Sem JS, o conteúdo estático aparece normalmente. */
html.js [data-hero-news]:not([data-hero-news-ready]) [data-hero-news-text],
html.js [data-hero-news]:not([data-hero-news-ready]) [data-hero-news-link] {
  opacity: 0;
}
[data-hero-news] [data-hero-news-text],
[data-hero-news] [data-hero-news-link] {
  transition: opacity .45s ease;
}
.hero__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--space-5); color: #fff; font-weight: var(--fw-medium); font-size: var(--fs-sm);
  padding-bottom: 8px;
}
.hero__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255,255,255,.55);
  transform-origin: left center; transform: scaleX(1);
  transition: transform .4s cubic-bezier(.44,0,.56,1);
}
.hero__link:hover::after { transform: scaleX(0); }
.hero__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.hero__link:hover svg { transform: translateX(4px); }
.hero__link--down:hover svg { transform: translateY(3px); }
.hero__title {
  font-size: var(--fs-display);
  color: #fff;
  text-align: right;
  letter-spacing: var(--ls-display);
  line-height: 1.04;
  justify-self: end;
  max-width: 14ch;
}
.hero__bottom {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: var(--space-4);
  border-top: 1px solid var(--overlay-white-20);
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.hero__bottom .hero__link {
  margin-top: 0;
}
.hero__coords {
  font-weight: var(--fw-regular);
  color: #fff;
  transition: opacity var(--dur) var(--ease);
}
.hero__coords:hover { opacity: 0.85; }

@media (max-width: 991px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; gap: var(--space-6); }
  .hero__title { text-align: left; justify-self: start; max-width: 18ch; order: -1; }
  .hero__aside { max-width: 42ch; }
}
@media (max-width: 767px) {
  .hero { min-height: 92svh; }
  .hero__bottom { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
}

/* ---- ABOUT / INTRO ------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.about__text h2 { margin-block: var(--space-4) 0; max-width: 16ch; }
.about__body { margin-top: var(--space-5); }
.about__tags { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border-radius: 4px;
  background: #f0f0f0;
  border: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #4a4a4a;
  line-height: 1;
}
.about__aside { font-size: var(--fs-lead); color: var(--color-text); line-height: var(--lh-normal); }
.about__aside .btn { margin-top: var(--space-6); }
@media (max-width: 991px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---- SOLUTIONS ----------------------------------------------------------- */
.solutions__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 2.3fr;
  gap: var(--space-8);
  align-items: end;
}
.solutions__intro h2 { margin-block: var(--space-4); max-width: 12ch; }
.solutions__intro p { margin-bottom: var(--space-6); max-width: 36ch; }
.solutions__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) {
  .solutions__grid { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
}
@media (max-width: 767px) {
  .solutions__cards { grid-template-columns: 1fr; }
}

/* ---- SUSTENTABILIDADE ---------------------------------------------------- */
.products { position: relative; background: var(--color-brand-dark); }
.products__pin {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Pilha de imagens em tela cheia que se intercalam ----------------------- */
.products__media { position: absolute; inset: 0; z-index: 0; }
.products__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s var(--ease), transform 7s var(--ease);
  will-change: opacity, transform;
}
.products__img.is-active { opacity: 1; transform: scale(1); }

.products__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, .45) 0%,
              rgba(0, 0, 0, .25) 45%,
              rgba(0, 0, 0, .6) 100%);
}

/* Textos centrais sobre as imagens -------------------------------------- */
.products__content {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: var(--space-6);
  width: min(100%, 60ch);
  margin-inline: auto;
}
.products__titles {
  position: relative;
  margin-top: var(--space-5);
  min-height: 1.2em;
}
.products__title {
  position: absolute; left: 0; right: 0; top: 0;
  margin: 0;
  color: var(--color-white);
  font-size: var(--fs-h2);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.products__title.is-active { opacity: 1; transform: translateY(0); }
.products__sub {
  position: relative;
  margin-top: var(--space-6);
  min-height: 6.5em;
}
.products__sub-item {
  position: absolute; left: 0; right: 0; top: 0;
  margin-inline: auto;
  max-width: 46ch;
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, .88);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.products__sub-item.is-active { opacity: 1; transform: translateY(0); }

.products__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--space-5);
  z-index: 2;
  display: flex; justify-content: center; gap: var(--space-3);
}
.products__dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .4);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.products__dot.is-active { background: var(--color-white); transform: scale(1.35); }

@media (max-width: 991px) {
  .products__sub { min-height: 9em; }
}

/* ---- VALUE STATEMENT ----------------------------------------------------- */
.value { text-align: center; }
.value__title { font-size: var(--fs-h2); max-width: 24ch; margin-inline: auto; }
.value__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  margin-top: var(--space-9);
}
.value-card {
  border-radius: var(--radius); padding: var(--space-6);
  text-align: left; min-height: 260px;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.value-card__icon { display: inline-flex; }
.value-card__icon .icon { width: 40px; height: 40px; }
/* cor do ícone por variação de card */
.value-card--dark  .value-card__icon { color: var(--color-white); }
.value-card--brand .value-card__icon { color: var(--color-white); }
.value-card--light .value-card__icon { color: var(--color-brand); }
.value-card h3 { font-size: var(--fs-sub); }
.value-card p { font-size: var(--fs-sm); }
.value-card--dark { background: var(--color-brand-dark); color: #fff; }
.value-card--dark h3 { color: #fff; }
.value-card--dark p { color: rgba(255,255,255,.78); }
.value-card--light { background: var(--color-white); box-shadow: var(--shadow-card); }
.value-card--brand { background: var(--color-brand); color: #fff; }
.value-card--brand h3 { color: #fff; }
.value-card--brand p { color: rgba(255,255,255,.82); }
@media (max-width: 767px) {
  .value__cards { grid-template-columns: 1fr; }
}

/* ---- QUOTE SPLIT (depoimento do fundador) -------------------------------- */
/* Foto à esquerda; fundo verde sangra à direita via .qsplit__panel-bg.
   Conteúdo e botão ficam só na coluna visível — o bleed não empurra o CTA
   para fora da viewport. */
.qsplit-section { overflow-x: clip; }
.qsplit {
  --qsplit-bleed: max(0px, 50vw - 50%);
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 0; align-items: stretch;
}
.qsplit__photo { border-radius: var(--radius) 0 0 var(--radius); overflow: hidden; min-height: 540px; position: relative; }
.qsplit__photo .ph,
.qsplit__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
}
.qsplit__name {
  position: absolute; left: var(--space-5); bottom: var(--space-5); z-index: 2;
  color: rgba(255,255,255,.92); font-size: var(--fs-sm); font-weight: var(--fw-regular);
}
.qsplit__panel {
  position: relative;
  color: #fff; border-radius: 0;
  padding: clamp(36px, 4.5vw, 76px) 0 clamp(36px, 4.5vw, 76px) clamp(36px, 4.5vw, 76px);
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: var(--space-6);
  min-width: 0;
}
.qsplit__panel-bg {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;
  width: calc(100% + var(--qsplit-bleed));
  background: var(--color-brand);
}
.qsplit__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; flex: 1; min-width: 0;
}
.qsplit__mark { display: block; margin-bottom: var(--space-4); color: rgba(255,255,255,.85); }
.qsplit__mark .icon { width: 30px; height: 30px; }
.qsplit__quote { font-size: var(--fs-sub); line-height: var(--lh-normal); color: rgba(255,255,255,.92); }
.qsplit__author {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--fs-display); line-height: 1.04;
  letter-spacing: var(--ls-display); color: #fff;
  margin-top: auto; padding-top: var(--space-9);
}
.qsplit__cta {
  position: relative; z-index: 1;
  flex: none; flex-shrink: 0; align-self: flex-end;
  white-space: nowrap;
}
/* glassmorphism idêntico ao botão da navbar (.btn--ghost) + seta animada */
.qsplit__cta .icon { transition: transform var(--dur) var(--ease); }
.qsplit__cta:hover .icon { transform: translateX(3px); }
@media (max-width: 767px) {
  .qsplit { grid-template-columns: 1fr; --qsplit-bleed: 0px; }
  .qsplit__photo { min-height: 340px; border-radius: var(--radius); }
  .qsplit__panel {
    padding: clamp(36px, 4.5vw, 76px);
    border-radius: var(--radius);
    flex-direction: column; align-items: flex-start;
  }
  .qsplit__panel-bg { width: 100%; }
  .qsplit__cta { align-self: flex-start; }
}

/* ---- TESTIMONIALS -------------------------------------------------------- */
/* overflow-x: clip evita barra de rolagem horizontal causada pela sangria
   (100vw) do trilho quando há scrollbar vertical nativa. */
.testi-section { overflow-x: clip; padding-bottom: 0; }
.testi__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-7); }
.testi__head h2 { max-width: 16ch; }
.testi__nav { display: flex; gap: var(--space-3); }
.testi__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line);
  display: grid; place-items: center; color: var(--color-heading);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.testi__btn:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.testi__btn svg { width: 18px; height: 18px; }
.testi__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 1fr);
  gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3); scrollbar-width: none;
  /* Sangra até as bordas laterais da tela; o padding recoloca o 1º/último
     card alinhados ao conteúdo do container. */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.testi__track::-webkit-scrollbar { display: none; }
.testi__track > * { scroll-snap-align: start; }
@media (max-width: 767px) {
  .testi__head { flex-direction: column; align-items: flex-start; }
  .testi__track { grid-auto-columns: 86%; }
}

/* ---- Reveal helper para faixa CTA --------------------------------------- */
.cta-band__inner { position: relative; z-index: 1; }


/* ===== css/page.css ===== */

/* ==========================================================================
   COOPADAP · page.css
   Componentes NOVOS compartilhados pelas páginas internas (Sobre, Soluções,
   Planos, Equipe, Detalhe, Blog, Post, Contato). Usa apenas tokens existentes.
   ========================================================================== */

/* ==========================================================================
   HERO SPLIT — texto à esquerda (fundo claro) + imagem sangrando no canto
   superior direito. Usado em: Sobre, Planos, Detalhe, Blog, Post.
   ========================================================================== */
.hero-split {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(36px, 5vw, 72px));
  padding-bottom: var(--section-y);
  overflow: hidden;
}
.hero-split__media {
  position: absolute; top: 0; right: 0; z-index: 0;
  /* +1/4 (×1.25) na largura e +1/16 (×1.0625) na altura */
  width: clamp(400px, 50vw, 813px);
  height: clamp(398px, 50.47vw, 572px);
  overflow: hidden;
}
.hero-split__media .ph,
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-split__traits {
  position: absolute; left: 0; right: 0; bottom: var(--space-4);
  display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap;
  z-index: 2;
}
.hero-split__text { position: relative; z-index: 1; max-width: 600px; }
.hero-split__text h1 { font-size: var(--fs-display); margin-block: var(--space-4) var(--space-4); }
.hero-split__sub { max-width: 44ch; }
.hero-split__cat { margin-bottom: var(--space-4); }

/* Detalhe de produto — imagem centralizada no topo da página. */
.product-showcase {
  padding-top: calc(var(--header-h) + clamp(6px, 1vw, 12px));
  padding-bottom: var(--space-2);
}
.product-showcase__head { align-items: center; margin-bottom: var(--space-3); }
.product-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-heading);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.product-back:hover { background: var(--color-surface); }
.product-back__icon { width: 20px; height: 20px; }
.product-showcase__figure {
  max-width: min(720px, 88vw);
  margin-inline: auto;
}
.product-showcase__figure img {
  width: 100%;
  height: auto;
  display: block;
}
.product-showcase + .section {
  padding-top: clamp(var(--space-3), 2.5vw, var(--space-5));
}
.product-detail { padding-bottom: clamp(var(--space-5), 4vw, var(--space-7)); }
.product-gallery { padding-top: clamp(var(--space-4), 3vw, var(--space-6)); }
.product-gallery .section-head { margin-bottom: var(--space-6); }

@media (max-width: 991px) {
  .hero-split { padding-top: calc(var(--header-h) + var(--space-6)); }
  .hero-split__media {
    position: relative; width: 100%; height: clamp(220px, 50vw, 320px);
    border-radius: var(--radius); margin-bottom: var(--space-6); order: -1;
  }
  .hero-split__inner { display: flex; flex-direction: column; }
  .hero-split__text { max-width: none; }
}

/* ==========================================================================
   HERO BANNER — imagem full-width, conteúdo centralizado, texto branco.
   Usado em: Soluções, Equipe, Contato.
   ========================================================================== */
.hero-banner {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--color-white);
  padding: calc(var(--header-h) + var(--space-7)) var(--gutter) var(--space-8);
  isolation: isolate; overflow: hidden;
}
.hero-banner__bg { position: absolute; inset: 0; z-index: -2; }
.hero-banner__bg .ph,
.hero-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
[data-hero-images] img:not([src]) { opacity: 0; }
.hero-banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--overlay-black-25), var(--overlay-black-30));
}
.hero-banner__title { color: #fff; font-size: var(--fs-display); max-width: 17ch; }
.hero-banner__sub { color: rgba(255,255,255,.9); max-width: 52ch; margin-top: var(--space-4); }
.hero-banner .pill { margin-bottom: var(--space-5); }

.hero, .hero-banner__bg, .hero-split__media { overflow: hidden; }

/* ==========================================================================
   SPLIT HEADING — eyebrow/título à esquerda, parágrafo grande à direita.
   Usado em: Soluções (intro), Equipe (intro de soluções), etc.
   ========================================================================== */
.split-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);
  align-items: start;
}
.split-head__lead { font-size: var(--fs-h3); color: var(--color-heading); font-family: var(--font-display); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
@media (max-width: 991px) { .split-head { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Lista de soluções em 2 colunas (linhas com thumb) */
.solutions-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-8);
}
@media (max-width: 767px) { .solutions-list { grid-template-columns: 1fr; } }

/* Grade de cards de produto — imagem grande no topo + título e texto.
   Usada na página Produtos (produtos.html). */
.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-5);
}
.product-card {
  display: flex; flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.product-card:hover { transform: translateY(-4px); }
.product-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); }
.product-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.product-card:hover .product-card__img { transform: scale(1.05); }
.product-card__body {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
}
.product-card__title {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  color: var(--color-heading); font-size: var(--fs-sub);
  transition: color var(--dur) var(--ease);
}
.product-card:hover .product-card__title { color: var(--color-brand); }
.product-card__text { font-size: var(--fs-sm); color: var(--color-text); }
@media (max-width: 991px) { .product-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .product-cards { grid-template-columns: 1fr; } }

/* Barra de filtro de categorias (página Produtos) */
.product-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.product-filter__btn {
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-heading);
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.product-filter__btn:hover { color: var(--color-brand); }
.product-filter__btn.is-active {
  background: var(--color-brand); color: var(--color-white);
}
/* Categorias com respiro vertical uniforme e enxuto (igual ao da Hortifrúti),
   sem o espaçamento duplicado das seções. */
section[data-category] { padding-top: var(--space-7); padding-bottom: 0; }
.hero-banner + .section { padding-bottom: 0; }
.hero-banner + .section.careers-jobs,
.hero-banner + .section.contact-main,
.hero-banner + .section.gallery-main { padding-bottom: var(--section-y); }

/* ==========================================================================
   WIDE IMAGE CTA — faixa larga com imagem de fundo + overlay + conteúdo
   central (ex.: "Somos um time de agrônomos…" no Sobre).
   ========================================================================== */
.image-cta {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: clamp(280px, 32vw, 380px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: var(--space-8) var(--space-6);
  isolation: isolate;
}
.image-cta__bg { position: absolute; inset: 0; z-index: -2; }
.image-cta__bg .ph, .image-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.image-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-black-45); }
.image-cta__title { color: #fff; font-size: var(--fs-h2); max-width: 20ch; }
.image-cta__text { color: rgba(255,255,255,.88); max-width: 50ch; margin-top: var(--space-4); }
.image-cta .pill { margin-bottom: var(--space-5); }
.image-cta .btn { margin-top: var(--space-6); }

/* ==========================================================================
   PROSE — tipografia de artigo (Detalhe de solução, Post do blog).
   ========================================================================== */
.prose { max-width: 70ch; }
.prose > .eyebrow { margin-bottom: var(--space-4); }
.prose h1 { font-size: var(--fs-display); margin-bottom: var(--space-4); }
.prose > .lead { max-width: 46ch; margin-bottom: var(--space-6); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-8); margin-bottom: var(--space-4); }
.prose h3 { font-size: var(--fs-sub-lg); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose p { margin-bottom: var(--space-4); }
.prose ul { list-style: none; padding: 0; margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.prose ul li { position: relative; padding-left: var(--space-4); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); }
.prose .lead-block { font-size: var(--fs-lead); color: var(--color-heading); }

/* layout detalhe: prose + aside "o que mais oferecemos" */
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-10); align-items: start; }
@media (max-width: 991px) { .detail-grid { grid-template-columns: 1fr; gap: var(--space-7); } }
.offer-item { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.offer-item:first-child { padding-top: 0; }
.offer-item__thumb { width: 64px; height: 64px; border-radius: 10px; flex: none; object-fit: cover; }
.offer-item__title { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub); margin-bottom: 4px; }
.offer-item__text { font-size: var(--fs-sm); }

/* ==========================================================================
   VENDEDORES — lista de contatos comerciais na página de produto
   ========================================================================== */
.seller-list { display: flex; flex-direction: column; }
.seller { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.seller:first-child { padding-top: 0; }
.seller__name { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub); }
.seller__role { font-size: var(--fs-sm); color: var(--color-brand); margin-top: 2px; }
.seller__contact { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-3); }
.seller__contact a { font-size: var(--fs-sm); color: var(--color-text); text-decoration: none; word-break: break-word; display: inline-flex; align-items: center; gap: var(--space-2); }
.seller__contact a:hover { color: var(--color-heading); text-decoration: underline; }

/* ==========================================================================
   TEAM GRID — grade de 4 colunas de membros (reusa .member__*)
   ========================================================================== */
/* Flex (em vez de grid) p/ centralizar horizontalmente linhas incompletas
   — ex.: grupos com 3 membros numa faixa de 4 colunas. */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.team-grid > * { flex: 0 1 calc((100% - 3 * var(--space-5)) / 4); }
@media (max-width: 991px) { .team-grid > * { flex-basis: calc((100% - var(--space-5)) / 2); } }
@media (max-width: 480px) { .team-grid > * { flex-basis: calc((100% - var(--space-5)) / 2); } }

/* Citação do fundador (split foto + texto) */
.founder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.founder__quote-mark { width: 34px; height: 34px; color: var(--color-brand); margin-bottom: var(--space-4); }
.founder__quote { font-size: var(--fs-h3); font-family: var(--font-display); color: var(--color-heading); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); font-weight: var(--fw-medium); }
.founder__name { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--color-heading); margin-top: var(--space-5); }
.founder__role { font-size: var(--fs-sm); margin-top: 4px; }
.founder__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.4; }
.founder__photo .ph, .founder__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .founder { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ==========================================================================
   BLOG GRID
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 991px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.blog-pagination__info {
  font-size: var(--fs-sm);
  color: var(--color-text);
  min-width: 7rem;
  text-align: center;
}
.blog-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   CONTATO — info + formulário lado a lado
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 991px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.contact-info__list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.contact-info__item { display: flex; align-items: center; gap: var(--space-3); color: var(--color-brand); font-size: var(--fs-sm); }
.contact-info__item .icon { width: 18px; height: 18px; flex: none; }
.contact-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
}
.contact-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-4);
  min-height: 0;
  height: 100%;
}
.contact-form__message {
  flex: 1 1 auto;
  min-height: 0;
}
.contact-form__message .textarea {
  flex: 1 1 auto;
  min-height: 140px;
  resize: none;
}
@media (max-width: 991px) {
  .contact-form__message { flex: none; }
  .contact-form__message .textarea {
    flex: none;
    min-height: 160px;
    resize: vertical;
  }
}
.contact-main .contact-grid { align-items: stretch; }
.contact-main .contact-info { display: flex; flex-direction: column; }
.contact-map { margin-top: var(--space-6); flex: 1 1 auto; min-height: 280px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-surface); }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; }
.form-status {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: center;
}
.form-status--ok { color: var(--color-brand); }

/* ==========================================================================
   PRICING — cabeçalho centralizado
   ========================================================================== */
.pricing-head { text-align: center; max-width: 22ch; margin-inline: auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 991px) { .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* CTA amarela com traits na lateral (variação usada nas internas) */
.cta-band__traits { display: flex; flex-direction: column; gap: var(--space-3); }
.cta-band__traits .hero__trait { color: var(--color-heading); }
.cta-band__traits .hero__trait .icon { color: var(--color-brand); }

/* ==========================================================================
   TABS — linha do tempo / histórico (Sobre)
   ========================================================================== */
.tabs__nav { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-7); }
.tabs__btn {
  padding: 9px 18px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text); background: var(--color-surface);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs__btn[aria-selected="true"] { background: var(--color-brand); color: #fff; }
.tabs__panel { display: none; }
.tabs__panel[data-active="true"] { display: block; }
.tabs__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.tabs__split h3 { font-size: var(--fs-h3); margin-bottom: var(--space-4); max-width: 18ch; }
.tabs__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11; }
.tabs__media .ph, .tabs__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .tabs__split { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ==========================================================================
   POR QUE ESCOLHER (Sobre) — cabeçalho 2 col + imagem alta + grade 2×2
   ========================================================================== */
.why-head { margin-bottom: var(--space-8); }
.why-head__title { font-size: var(--fs-h2); max-width: 20ch; }
.why-head__text { margin-top: var(--space-4); max-width: 60ch; }

.why-body { display: grid; grid-template-columns: 1fr 1.9fr; gap: var(--space-5); align-items: stretch; }
.why-body__media { border-radius: var(--radius); overflow: hidden; min-height: 100%; }
.why-body__media .ph, .why-body__media img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }

.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.why-card {
  border-radius: var(--radius); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 230px;
}
.why-card__icon { display: inline-flex; }
.why-card__icon .icon { width: 40px; height: 40px; }
.why-card--light .why-card__icon,
.why-card--muted .why-card__icon { color: var(--color-brand); }
.why-card--brand .why-card__icon { color: var(--color-white); }
.why-card h3 { font-size: var(--fs-sub); }
.why-card p { font-size: var(--fs-sm); }
.why-card--light { background: var(--color-bg); box-shadow: var(--shadow-card); }
.why-card--muted { background: var(--color-surface); }
.why-card--brand { background: var(--color-brand); color: #fff; }
.why-card--brand h3 { color: #fff; }
.why-card--brand p { color: rgba(255,255,255,.82); }

@media (max-width: 991px) {
  .why-body { grid-template-columns: 1fr; }
  .why-body__media .ph, .why-body__media img { min-height: 280px; }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card { min-height: 0; }
}

/* ==========================================================================
   POST — cabeçalho de artigo + corpo centralizado
   ========================================================================== */
.post-hero { padding-top: calc(var(--header-h) + clamp(36px, 5vw, 64px)); }
.post-hero__meta { display: flex; align-items: center; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-text); }
.post-hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-text); opacity: .5; }
.post-hero h1 { font-size: var(--fs-display); max-width: 18ch; margin-inline: auto; text-align: center; }
.post-hero__head { text-align: center; }
.post-cover { aspect-ratio: 16 / 8; border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-7); }
.post-cover .ph, .post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-body { max-width: 760px; margin-inline: auto; margin-top: var(--space-8); }
.post-share { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.post-share__label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-heading); letter-spacing: .01em; }
.post-share__list { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.post-share__btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: auto; height: auto;
  border: 0;
  background: none;
  color: var(--color-heading);
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, color .2s ease;
}
.post-share__btn .icon { width: 22px; height: 22px; }
.post-share__btn:hover { transform: translateY(-2px); }
.post-share__btn--whatsapp:hover { color: #25d366; }
.post-share__btn--facebook:hover { color: #1877f2; }
.post-share__btn--x:hover        { color: #000; }
.post-share__btn--linkedin:hover { color: #0a66c2; }
.post-share__btn--telegram:hover { color: #229ed9; }
.post-share__btn--email:hover    { color: var(--color-heading); }
.post-share__btn--copy:hover     { color: var(--color-brand); }
.post-share__btn--copy.is-copied { color: var(--color-brand); }
/* Tooltip "Link copiado!" */
.post-share__btn--copy.is-copied::after {
  content: "Link copiado!";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--color-heading);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .post-share__btn:hover { transform: none; }
}

/* ==========================================================================
   GALERIA — grade uniforme (evita buracos do masonry manual)
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-item .ph,
.gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item--tall { grid-row: span 2; aspect-ratio: auto; }
.gallery-item--wide { grid-column: span 2; aspect-ratio: 8 / 3; }
@media (max-width: 767px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
  .gallery-item--tall { grid-row: span 1; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   GALERIA IMERSIVA — canvas infinito arrastável (mecânica do template).
   Versão CLARA: fundo branco do site, itens como cards (raio + sombra), grão
   bem discreto e vinheta desativada. Arraste com inércia + clique p/ ampliar.
   O efeito é montado por JS (gallery-infinite.js).
   ========================================================================== */
.gallery-immersive {
  position: relative;
  background: var(--color-white);
}
/* Com ScrollSmoother o header é fixo (overlay) e o conteúdo começa no topo da
   viewport — empurramos o canvas para baixo dele. Sem smoother o header é sticky
   (ocupa o fluxo), então não precisa do recuo. */
html.has-scroll-smoother .gallery-immersive { padding-top: var(--header-h); }
/* Fonte das imagens (lida pelo JS) e fallback sem-JS: fica fora de fluxo. */
.gallery-immersive__source { display: none; }

.gallery-immersive__viewport {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  background: var(--color-white);
  cursor: grab;
  touch-action: none;                    /* o arraste do canvas não rola a página */
  user-select: none;
  -webkit-user-select: none;
}
.gallery-immersive__viewport.is-grabbing { cursor: grabbing; }

.gallery-immersive__canvas {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.gallery-immersive .item {
  position: absolute;
  overflow: hidden;
  background: var(--color-surface);   /* placeholder claro enquanto a imagem carrega */
  cursor: pointer;
  contain: layout paint;              /* isola a pintura: reciclar 1 tile não repinta os vizinhos */
}
.gallery-immersive .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .3s ease;     /* sem will-change: evita centenas de camadas */
}
.gallery-immersive .item:hover img { transform: scale(1.05); }

/* Scrim sutil no rodapé p/ a legenda ficar legível sobre qualquer foto. */
.gallery-immersive .item::after,
.gallery-lightbox-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

/* Legenda (nome do arquivo) no canto inferior direito. */
.gallery-immersive .item-caption,
.gallery-lightbox-item .item-caption {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  max-width: calc(100% - 20px);
  text-align: right;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
  pointer-events: none;
}
.gallery-lightbox-item .item-caption { right: 14px; bottom: 12px; font-size: var(--fs-sm); }

/* Grão de filme animado (SVG inline — sem dependência externa nem mixed-content
   do PNG http original; mesmo efeito de ruído translúcido do template). */
.gallery-immersive__noise {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2;
  opacity: .05;                        /* grão discreto sobre o branco */
  background-repeat: repeat;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: gallery-noise .4s steps(4) infinite;
  will-change: transform;
}
@keyframes gallery-noise {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(-4%, 2%); }
  30%  { transform: translate(2%, -4%); }
  40%  { transform: translate(-2%, 5%); }
  50%  { transform: translate(-4%, 2%); }
  60%  { transform: translate(3%, 0); }
  70%  { transform: translate(0, 3%); }
  80%  { transform: translate(-3%, 0); }
  90%  { transform: translate(2%, 2%); }
  100% { transform: translate(1%, 0); }
}

/* Vinheta desativada na versão clara: sombras inset escuras virariam "borda
   suja" sobre o branco. (Mantida no markup; reative aqui se voltar ao fundo
   escuro.) */
.gallery-immersive__vignette { display: none; }

/* Lightbox (criado no <body>, fora do #smooth-content transladado, p/ que
   position:fixed seja relativo à viewport — mesmo motivo do scrim do site). */
.gallery-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-black);
  opacity: 0;
  z-index: 9998;
  pointer-events: none;
}
.gallery-lightbox-overlay.is-active { pointer-events: auto; cursor: zoom-out; }

.gallery-lightbox-item {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  cursor: zoom-out;
}
.gallery-lightbox-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .gallery-immersive__noise { animation: none; }
  .gallery-immersive .item img { transition: none; }
}

/* ==========================================================================
   FAQ — acordeão centralizado (reusa .accordion da home.css? não: define aqui leve)
   ========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%; padding: var(--space-5) 0; text-align: left;
  font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub);
}
.faq__icon { width: 22px; height: 22px; flex: none; color: var(--color-brand); transition: transform var(--dur) var(--ease); }
.faq__item[data-open="true"] .faq__icon { transform: rotate(45deg); }
.faq__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.faq__item[data-open="true"] .faq__panel { max-height: 420px; }
.faq__panel p { padding-bottom: var(--space-5); font-size: var(--fs-body); max-width: 64ch; }

/* ==========================================================================
   CARREIRAS — lista de vagas
   ========================================================================== */
.jobs { width: 100%; display: flex; flex-direction: column; }
.job {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: var(--space-4); align-items: center;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
}
.job:last-child { border-bottom: 1px solid var(--color-line); }
.job__title { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub); }
.job__meta { font-size: var(--fs-sm); }
.job__phone { color: inherit; transition: color var(--dur) var(--ease); }
.job__phone:hover { color: var(--color-brand); }
.job__cta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-brand); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap; justify-self: end;
}
.jobs-loading,
.jobs-fallback__text {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin: 0;
}
.jobs-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius);
}
.jobs__items { display: flex; flex-direction: column; }
.jobs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.jobs-pagination__info {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  min-width: 7rem;
  text-align: center;
}
.jobs-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 767px) {
  .job { grid-template-columns: 1fr; gap: var(--space-2); }
  .job__cta { margin-top: var(--space-2); }
}

/* ==========================================================================
   SOBRE · NOSSOS PIONEIROS — cabeçalho editorial + mural de famílias + marquee
   ========================================================================== */
.section-head { max-width: 60ch; margin-inline: auto; text-align: center; margin-bottom: var(--space-8); }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { font-size: var(--fs-h2); margin-top: var(--space-3); }
.section-head p { margin-top: var(--space-4); }

.family-wall {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4);
}
.family-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-4) 0;
}
.family-card__icon { color: var(--color-brand); }
.family-card__icon .material-symbols-outlined { font-size: 30px; line-height: 1; }
.family-card__name { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub); }
.family-card__tag { font-size: var(--fs-xs); color: var(--color-text); }

/* Marquee cinético com os nomes dos pioneiros */
.names-marquee {
  margin-top: var(--space-8); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.names-marquee__track {
  display: flex; gap: var(--space-6); width: max-content;
  animation: names-scroll 42s linear infinite;
}
.names-marquee:hover .names-marquee__track { animation-play-state: paused; }
.names-marquee__item {
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-family: var(--font-display); font-weight: var(--fw-medium);
  color: var(--color-heading); font-size: var(--fs-sub-lg); white-space: nowrap;
}
.names-marquee__item::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand); opacity: .55;
}
@keyframes names-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .names-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---- Carrossel de certificações (marquee infinito de logos) ------------- */
.cert-marquee {
  margin-top: var(--space-8); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cert-marquee__track {
  display: flex; align-items: center; width: max-content;
  animation: cert-scroll 52s linear infinite;
}
.cert-marquee:hover .cert-marquee__track { animation-play-state: paused; }
.cert-marquee__img {
  /* Altura uniforme (cert-15 como referência) e largura natural: todos os logos
     ficam na mesma linha de base, sem variar de altura. O max-width só evita que
     os logos muito largos (16, 17) dominem. Em cinza p/ contrastar com o branco. */
  flex-shrink: 0;
  width: auto;
  max-width: clamp(96px, 11vw, 130px);
  height: clamp(28px, 3.5vw, 42px);
  /* Espaçamento à direita em cada item (inclusive o último/duplicado) garante
     um loop sem emenda com translateX(-50%) — o gap do flex deixaria faltar o
     espaço final, criando o "salto" visível ao fim do ciclo. */
  margin-right: clamp(var(--space-8), 8vw, var(--space-11));
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
/* Hover: os logos coloridos voltam à cor original; os brancos (invertidos)
   vão para o preto, pois a cor original (branco) sumiria no fundo claro. */
.cert-marquee__img:hover { filter: grayscale(0); opacity: 1; }
/* Logos que vêm em versão branca (feitas p/ fundo escuro): invertidas para
   aparecerem como cinza escuro no repouso e pretas no hover. */
.cert-marquee__img--invert { filter: invert(1) grayscale(1); }
.cert-marquee__img--invert:hover { filter: invert(1) grayscale(1); opacity: 1; }

/* Parceiros (home): logos um pouco maiores + cursor em pill */
#parceiros .cert-marquee--partners .cert-marquee__img {
  max-width: clamp(110px, 12.5vw, 148px);
  height: clamp(32px, 4vw, 48px);
}

/* Certificações (sobre): logos maiores + cursor em pill (mesmo padrão dos parceiros) */
#certificacoes .cert-marquee--certifications .cert-marquee__img {
  max-width: clamp(140px, 16vw, 200px);
  height: clamp(44px, 5.5vw, 68px);
}

/* Sobre: bordas quadradas em todos os elementos de imagem desta página */
body[data-page="about"] .hero-split__media,
body[data-page="about"] .why-body__media,
body[data-page="about"] .tabs__media,
body[data-page="about"] .profile__media {
  border-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
  #parceiros .cert-marquee--partners,
  #parceiros .cert-marquee--partners .cert-marquee__img,
  #certificacoes .cert-marquee--certifications,
  #certificacoes .cert-marquee--certifications .cert-marquee__img {
    cursor: none;
  }
}

.partner-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-heading);
  border: 0;
  box-shadow: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-align: center;
  white-space: normal;
  max-width: min(92vw, 36rem);
  width: max-content;
}

.partner-cursor.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Certificações (sobre): pill com o mesmo fundo da seção (--color-bg) */
body[data-page="about"] .partner-cursor {
  background: var(--color-bg);
}

@keyframes cert-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cert-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: var(--space-6); }
  .cert-marquee__img { margin-right: 0; }
}

/* ==========================================================================
   SOBRE · PERFIL ALYSSON PAOLINELLI — feature editorial com mídia sticky
   ========================================================================== */
.profile { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-10); align-items: start; }
.profile__media {
  position: relative; align-self: start;
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5;
}
/* Fallback sem GSAP/ScrollSmoother (scroll nativo): sticky nativo do CSS. */
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
  .profile__media { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
.profile__media .ph, .profile__media img { width: 100%; height: 100%; object-fit: cover; }
.profile__badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 var(--space-7); }
.profile__lead { font-size: var(--fs-lead); color: var(--color-heading); max-width: 52ch; }
.milestones { margin-top: var(--space-7); display: flex; flex-direction: column; }
.milestone {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--space-5);
  padding: var(--space-5) 0; border-top: 1px solid var(--color-line);
}
.milestone:last-child { border-bottom: 1px solid var(--color-line); }
.milestone__year { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--color-heading); font-size: var(--fs-sub); }
.milestone__title { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-heading); font-size: var(--fs-sub); margin-bottom: 6px; }
.milestone__text { font-size: var(--fs-sm); }

/* ==========================================================================
   SOBRE · COOPERATIVISMO — número-destaque + timeline horizontal (fundo escuro)
   ========================================================================== */
.coop-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; margin-bottom: var(--space-10); }
.bignum { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--color-white); font-size: clamp(4rem, 2.2rem + 7vw, 7rem); line-height: 1; letter-spacing: var(--ls-display); }
.bignum span { color: var(--color-white); }
.coop-feature__label { color: rgba(255,255,255,.85); font-size: var(--fs-lead); margin-top: var(--space-3); max-width: 30ch; }
.coop-feature__text { color: rgba(255,255,255,.82); }
.coop-feature__text p + p { margin-top: var(--space-4); }

.origins { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); position: relative; }
.origins::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25) 8%, rgba(255,255,255,.25) 92%, transparent);
}
.origin { position: relative; padding-top: var(--space-6); }
.origin::before {
  content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-white); box-shadow: 0 0 0 5px rgba(255,255,255,.18);
}
.origin__year { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--color-white); font-size: var(--fs-sub-lg); }
.origin__text { color: rgba(255,255,255,.78); font-size: var(--fs-sm); margin-top: var(--space-2); }

@media (max-width: 980px) {
  .family-wall { grid-template-columns: repeat(3, 1fr); }
  .profile { grid-template-columns: 1fr; gap: var(--space-7); }
  .profile__media { position: relative; top: 0; max-width: 420px; }
  .coop-feature { grid-template-columns: 1fr; gap: var(--space-6); }
  .origins { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .origins::before { display: none; }
}
@media (max-width: 560px) {
  .family-wall { grid-template-columns: 1fr 1fr; }
  .milestone { grid-template-columns: 64px 1fr; gap: var(--space-4); }
  .origins { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SOBRE · A MARCA — logo + simbolismo (origem oriental)
   ========================================================================== */
.brand { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-8), 5vw, var(--space-10)); align-items: center; min-height: 560px; }
.brand__figure { margin: 0; }
.brand__art { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; margin-inline: auto; }

.brand__title { font-size: var(--fs-h2); margin-top: var(--space-3); }
.brand__lead { font-size: var(--fs-lead); color: var(--color-heading); margin-top: var(--space-4); max-width: 52ch; }

.brand-values__list {
  list-style: none; padding: 0; margin: var(--space-6) 0 0;
  display: grid; gap: var(--space-4);
}
.brand-values__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.brand-values__list p { font-size: var(--fs-sm); }
.brand-values__check { flex: none; color: var(--color-brand); margin-top: 2px; }
.brand-values__check .icon { width: 20px; height: 20px; }
.brand-values__list strong { color: var(--color-heading); font-weight: var(--fw-semibold); }

@media (max-width: 860px) {
  .brand { grid-template-columns: 1fr; gap: var(--space-6); min-height: 0; }
  .brand__art { max-width: 100%; }
}

/* ===== Blog / Informativos (dinâmico) ===== */
.blog-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text);
  font-size: var(--fs-sub);
}
.blog-state--error { color: #b42318; }

.post-gallery-wrap,
.post-attachments-wrap { padding-bottom: var(--space-6); }

.post-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (max-width: 767px) {
  .post-gallery { grid-template-columns: 1fr; }
}

.post-gallery__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.post-gallery__item--youtube { grid-column: 1 / -1; }

.post-gallery__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.post-gallery__thumb img,
.post-gallery__item video {
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.post-gallery__item video { aspect-ratio: 16 / 10; object-fit: cover; }

.post-gallery__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}
.post-gallery__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.post-gallery__caption {
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.post-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  max-width: 52ch;
}

.post-attachment {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-heading);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.post-attachment:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.post-attachment__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-surface-2);
  flex: none;
  position: relative;
}
.post-attachment__icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--color-brand);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.post-attachment__icon--pdf::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z'/%3E%3C/svg%3E");
}
.post-attachment__name { flex: 1; font-weight: var(--fw-medium); }
.post-attachment__action {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
}

.post-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.post-lightbox[hidden] { display: none !important; }

.post-lightbox__img {
  max-width: min(1100px, 100%);
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.post-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ==========================================================================
   COOPADAP · admin (painel de informativos) — admin.html
   ========================================================================== */

.admin-loading,
.admin-muted {
  color: var(--color-text);
  font-size: var(--fs-sm);
}

.admin-app { min-height: 0; }

/* A área de conteúdo do admin tem, no mínimo, a altura da tela — assim o
   formulário respira em vez de ficar espremido num espaço curto. O conteúdo
   é centralizado verticalmente quando cabe na tela; quando é maior, a seção
   cresce e o conteúdo flui normalmente (sem corte). O footer vem após. */
body[data-page="admin"] #admin-app > .section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.admin-login .container {
  display: flex;
  justify-content: center;
}

.admin-login__inner {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
}

.admin-login__form {
  margin-top: var(--space-5);
  text-align: left;
}

.admin-login__inner .eyebrow {
  display: flex;
  justify-content: center;
}

.admin-login__inner h1 {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-heading);
  letter-spacing: var(--ls-heading);
}

.admin-login__sub {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.admin-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-page__head h1 {
  margin: var(--space-2) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-heading);
  letter-spacing: var(--ls-heading);
}

.admin-page__head p {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-sm);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-form--editor {
  gap: var(--space-6);
  position: relative;
}

.admin-form--editor .admin-grid {
  margin-bottom: var(--space-2);
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.admin-field--full { grid-column: 1 / -1; }

.admin-file-label { cursor: pointer; }

.admin-form__error {
  margin: 0;
  color: #b42318;
  font-size: var(--fs-sm);
}

.admin-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.admin-form__actions-right {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.admin-pagination__info {
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}

.admin-table th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.admin-table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  white-space: nowrap;
}

.admin-link {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.admin-link:hover { text-decoration: underline; }

.admin-status--published {
  background: rgba(3, 89, 37, 0.1);
  color: var(--color-brand);
}

.admin-status--draft {
  background: var(--color-surface);
  color: var(--color-text);
}

.admin-section {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.admin-section__desc {
  margin: var(--space-2) 0 0;
  max-width: 60ch;
}

.admin-section__actions {
  margin-top: var(--space-5);
}

.admin-section h2 {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  color: var(--color-heading);
  letter-spacing: var(--ls-heading);
}

.admin-cover {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.admin-cover__actions {
  margin-top: 0;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  padding-block: var(--space-1);
}

.admin-cover__preview {
  width: 220px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line);
}

.admin-cover__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-media-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.admin-media-actions__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.admin-youtube-add {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
  max-width: 640px;
}

.admin-youtube-add .input {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-form--editor .admin-media-actions__group .btn,
.admin-form--editor .admin-youtube-add .btn,
.admin-form--editor .admin-youtube-add .input,
.admin-form--editor .admin-section__actions .btn {
  min-height: 46px;
}

.admin-media-list,
.admin-attachment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.admin-media-list > .admin-muted,
.admin-attachment-list > .admin-muted {
  margin: 0;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  text-align: center;
}

.admin-media-item,
.admin-attachment-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.admin-media-item__thumb {
  width: 120px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-input);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  color: var(--color-text);
  flex: none;
}

.admin-media-item__thumb--yt,
.admin-media-item__thumb--video {
  padding: var(--space-2);
  text-align: center;
}

.admin-media-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.admin-media-item__actions,
.admin-attachment-item__actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.admin-attachment-item {
  align-items: center;
  justify-content: space-between;
}

.admin-attachment-item__name {
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  word-break: break-word;
  font-size: var(--fs-sm);
}

@media (max-width: 767px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-page__head { flex-direction: column; }
  .admin-media-item { flex-direction: column; }
  .admin-cover { flex-direction: column; }
  .admin-cover__actions { align-self: flex-start; padding-block: 0; }
  .admin-youtube-add { max-width: none; }
  .admin-youtube-add .btn { width: 100%; justify-content: center; }
  .admin-form__actions { flex-direction: column; align-items: stretch; }
  .admin-form__actions-right { justify-content: flex-end; }
  .admin-table { display: block; overflow-x: auto; }
}