Nossa Equipe

/* =====================================================================
 * Raízes em Movimento · Overrides editoriais
 * ---------------------------------------------------------------------
 * Camada de refinamento aplicada SOBRE o build compilado original.
 * Objetivos:
 *   1. Tipografia editorial premium (Playfair display + Inter rica em
 *      features OpenType: liga, kern, ss01, smcp, tnum).
 *   2. Tonificação e profundidade — sombras quentes, focus rings dourados,
 *      transições suaves, scrollbar discreta.
 *   3. Responsividade fina (mobile-first) com refinos para tablet,
 *      desktop e ultra-wide; mídia adaptativa, paddings escalonados.
 *   4. Microinterações tasteful (lift, scale, underline editorial) sem
 *      animação cansativa; respeita prefers-reduced-motion.
 *   5. Componentes-chave shadcn/Radix ganham polish (cards, buttons,
 *      links, badges, dialogs, tabelas, formulários).
 *
 * Importado por `index.html` APÓS o CSS principal do bundle. Tudo aqui
 * é intencionalmente !important onde precisa vencer especificidade do
 * bundle, mas usado com parcimônia.
 *
 * Spec refs: design.md (princípios editoriais Raízes), tokens originais
 * preservados (paleta neutra HSL), tipografia Playfair + Inter já
 * carregada por `<link>` no `<head>`.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1 · Tokens editoriais sobrepostos
 * ------------------------------------------------------------------- */
:root {
  /* Quebra editorial — acentos mais quentes, sem mudar o esqueleto neutro */
  --rzm-ink: 24 12% 9%;             /* solo escuro                     */
  --rzm-ink-2: 28 8% 18%;
  --rzm-paper: 36 30% 98%;          /* off-white quente                */
  --rzm-paper-2: 36 18% 96%;
  --rzm-warm: 30 10% 92%;
  --rzm-warm-2: 30 8% 80%;
  --rzm-gold: 36 60% 52%;           /* dourado terra                   */
  --rzm-gold-soft: 38 80% 86%;
  --rzm-vinho: 0 60% 36%;           /* acento editorial                */
  --rzm-shadow-rgb: 28 22 18;       /* sombra terra                    */

  /* Tipografia */
  --rzm-font-display: "Playfair Display", "GFS Didot", Georgia, serif;
  --rzm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Easings emil-kowalski / sonner */
  --rzm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rzm-ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --rzm-dur-fast: 180ms;
  --rzm-dur-base: 320ms;
  --rzm-dur-slow: 600ms;
}

/* ---------------------------------------------------------------------
 * 2 · Reset editorial mínimo
 * ------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--rzm-font-sans);
  font-feature-settings: "kern", "liga", "calt", "ss01";
  font-variation-settings: normal;
  letter-spacing: -0.005em;
}

/* Selection · tom dourado quente */
::selection {
  background-color: hsl(var(--rzm-gold) / 0.30);
  color: hsl(var(--rzm-ink));
  text-shadow: none;
}

/* Scrollbar · discreta, terra */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--rzm-warm-2)) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: hsl(var(--rzm-warm-2));
  border-radius: 9999px;
  border: 2px solid hsl(var(--rzm-paper));
}
*::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--rzm-gold) / 0.6);
}

/* Focus visible · ring dourado warm */
*:focus-visible {
  outline: 2px solid hsl(var(--rzm-gold) / 0.7) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
  transition: outline-offset var(--rzm-dur-fast) var(--rzm-ease-out);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
 * 3 · Tipografia editorial · Playfair para display
 * ------------------------------------------------------------------- */
h1, h2, h3,
.text-4xl, .text-5xl, .text-6xl, .text-7xl,
[class*="text-"] h1, [class*="text-"] h2, [class*="text-"] h3 {
  font-family: var(--rzm-font-display);
  font-feature-settings: "liga", "smcp", "ss01", "kern";
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1, .text-5xl, .text-6xl, .text-7xl {
  letter-spacing: -0.025em;
  line-height: 1.05;
}

h2, .text-4xl {
  letter-spacing: -0.022em;
  line-height: 1.1;
}

h3, .text-3xl, .text-2xl {
  letter-spacing: -0.018em;
  line-height: 1.18;
}

p {
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Numerais tabulares em listas/dados */
table, .nums-tabular, [data-tabular] {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
}

/* Quote / blockquote · estilo editorial */
blockquote {
  font-family: var(--rzm-font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: hsl(var(--rzm-ink-2));
  border-left: 2px solid hsl(var(--rzm-gold));
  padding-left: 1.25rem;
}

/* ---------------------------------------------------------------------
 * 4 · Imagens · transições suaves, sem distorção
 * ------------------------------------------------------------------- */
img,
[class*="image"] img,
[class*="Image"] img {
  transition: transform var(--rzm-dur-base) var(--rzm-ease-emphasis),
              filter var(--rzm-dur-base) var(--rzm-ease-out);
}

/* Hover lift sutil em cards de noticias/galeria */
article:hover img,
[class*="card"]:hover img,
[class*="Card"]:hover img,
a[href*="/noticias/"]:hover img,
a[href*="/eventos/"]:hover img,
a[href*="/programas/"]:hover img,
a[href*="/projetos/"]:hover img,
a[href*="/biblioteca/"]:hover img {
  transform: scale(1.03);
}

/* Imagens institucionais · saturação leve para coesão */
img:not([src*="data:"]):not([src*=".svg"]) {
  filter: contrast(1.02) saturate(1.04);
}

/* ---------------------------------------------------------------------
 * 5 · Cards · sombra quente + lift on hover
 * ------------------------------------------------------------------- */
[class*="card"],
[class*="Card"],
.rounded-lg.border,
.rounded-xl.border,
.rounded-2xl.border {
  transition: transform var(--rzm-dur-base) var(--rzm-ease-out),
              box-shadow var(--rzm-dur-base) var(--rzm-ease-out),
              border-color var(--rzm-dur-fast) var(--rzm-ease-out);
}

/* Hover state — cards com link interno */
a:hover > [class*="card"],
a:hover > [class*="Card"],
a:hover > .rounded-lg.border,
a:hover > .rounded-xl.border,
a:hover > .rounded-2xl.border,
[class*="card"]:has(> a:hover),
[class*="Card"]:has(> a:hover) {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -16px rgba(var(--rzm-shadow-rgb) / 0.18),
              0 4px 16px -4px rgba(var(--rzm-shadow-rgb) / 0.10) !important;
  border-color: hsl(var(--rzm-gold) / 0.5) !important;
}

/* ---------------------------------------------------------------------
 * 6 · Links editoriais · underline animado
 * ------------------------------------------------------------------- */
main a:not([class*="button"]):not([class*="Button"]):not([role="button"]):not(.no-underline):not([class*="card"]):not([class*="Card"]) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--rzm-dur-base) var(--rzm-ease-out),
              color var(--rzm-dur-fast) var(--rzm-ease-out);
}

main a:not([class*="button"]):not([class*="Button"]):not([role="button"]):not(.no-underline):not([class*="card"]):not([class*="Card"]):hover {
  background-size: 100% 1px;
}

/* ---------------------------------------------------------------------
 * 7 · Botões · refinamento sutil
 * ------------------------------------------------------------------- */
button, [role="button"], a[class*="button"], a[class*="Button"] {
  transition: transform var(--rzm-dur-fast) var(--rzm-ease-out),
              background-color var(--rzm-dur-fast) var(--rzm-ease-out),
              box-shadow var(--rzm-dur-fast) var(--rzm-ease-out),
              color var(--rzm-dur-fast) var(--rzm-ease-out) !important;
}

button:active, [role="button"]:active {
  transform: scale(0.97);
}

/* Botões "primary" — destaque dourado warm */
.bg-primary {
  box-shadow: 0 1px 2px rgba(var(--rzm-shadow-rgb) / 0.10),
              0 4px 12px -2px rgba(var(--rzm-shadow-rgb) / 0.10);
}
.bg-primary:hover {
  box-shadow: 0 2px 6px rgba(var(--rzm-shadow-rgb) / 0.16),
              0 12px 32px -8px rgba(var(--rzm-shadow-rgb) / 0.18);
}

/* ---------------------------------------------------------------------
 * 8 · Header sticky · backdrop blur, separador delicado
 * ------------------------------------------------------------------- */
header,
nav[class*="navigation"],
[class*="header"]:first-of-type,
.sticky.top-0 {
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* ---------------------------------------------------------------------
 * 9 · Seções editoriais · padding generoso
 * ------------------------------------------------------------------- */
section {
  padding-block: clamp(3rem, 6vw, 6rem);
}

main > section:first-child {
  padding-block-start: clamp(4rem, 8vw, 8rem);
}

/* ---------------------------------------------------------------------
 * 10 · Container · respiração lateral consistente
 * ------------------------------------------------------------------- */
.container,
[class*="container"] {
  padding-inline: clamp(1rem, 4vw, 2rem) !important;
}

@media (min-width: 1280px) {
  .container,
  [class*="container"] {
    padding-inline: 4rem !important;
    max-width: 1440px !important;
  }
}

/* ---------------------------------------------------------------------
 * 11 · Tabelas · numerais tabulares, divisores sutis
 * ------------------------------------------------------------------- */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  font-family: var(--rzm-font-sans);
  font-weight: 600;
  text-align: start;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--rzm-ink-2));
  border-bottom: 1px solid hsl(var(--rzm-warm-2));
  padding: 0.75rem 1rem;
}
td {
  border-bottom: 1px solid hsl(var(--rzm-warm));
  padding: 0.75rem 1rem;
  color: hsl(var(--rzm-ink-2));
}
tr:hover td {
  background-color: hsl(var(--rzm-paper-2));
}

/* ---------------------------------------------------------------------
 * 12 · Forms · refinamento de inputs/textareas
 * ------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
  transition: border-color var(--rzm-dur-fast) var(--rzm-ease-out),
              box-shadow var(--rzm-dur-fast) var(--rzm-ease-out) !important;
  font-family: var(--rzm-font-sans);
  font-feature-settings: "kern", "liga";
}
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px hsl(var(--rzm-gold) / 0.18) !important;
}

/* ---------------------------------------------------------------------
 * 13 · Dialog/Sheet/Popover overlays · backdrop quente
 * ------------------------------------------------------------------- */
[role="dialog"],
[data-state="open"][class*="overlay"],
.fixed.inset-0[class*="bg-"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------------
 * 14 · Animações de entrada · respeitam prefers-reduced-motion
 * ------------------------------------------------------------------- */
@keyframes rzm-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  main h1,
  main > section > h2,
  main > section > div > h2 {
    animation: rzm-fade-up var(--rzm-dur-slow) var(--rzm-ease-emphasis) both;
  }
}

/* ---------------------------------------------------------------------
 * 15 · Footer · contraste suave + tipografia editorial
 * ------------------------------------------------------------------- */
footer {
  font-family: var(--rzm-font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
}

footer h3, footer h4 {
  font-family: var(--rzm-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * 16 · Responsividade · refinos por breakpoint
 * ------------------------------------------------------------------- */

/* Mobile (≤640px) — tipografia mais concisa, espaçamento mais apertado */
@media (max-width: 640px) {
  h1, .text-5xl, .text-6xl, .text-7xl {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    line-height: 1.1 !important;
  }
  h2, .text-4xl {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  section {
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
  }
  /* Grids viram coluna única em mobile sem precisar de classe extra */
  .grid.grid-cols-2:not(.gap-2):not(.gap-1) {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet (641-1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  h1, .text-5xl, .text-6xl, .text-7xl {
    font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
  }
}

/* Desktop wide (≥1440px) — respiração extra */
@media (min-width: 1440px) {
  section {
    padding-block: clamp(5rem, 7vw, 8rem);
  }
}

/* ---------------------------------------------------------------------
 * 17 · Micro-detalhes editoriais
 * ------------------------------------------------------------------- */

/* Eyebrow / kicker — labels uppercase comuns (Tailwind .uppercase) */
.text-xs.uppercase,
.text-sm.uppercase,
[class*="eyebrow"],
[class*="Eyebrow"] {
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  color: hsl(var(--rzm-gold)) !important;
}

/* Datas e meta — italic Playfair */
time, .text-muted-foreground time {
  font-feature-settings: "tnum", "lnum";
}

/* Badges */
[class*="badge"], [class*="Badge"] {
  font-family: var(--rzm-font-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.7rem;
  text-transform: uppercase;
}

/* Skip link · acessibilidade visível */
[href="#main"], [href="#content"], .skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: hsl(var(--rzm-ink));
  color: hsl(var(--rzm-paper));
  padding: 0.5rem 1rem;
  border-radius: 6px;
  z-index: 9999;
  transition: top var(--rzm-dur-fast) var(--rzm-ease-out);
}
[href="#main"]:focus, [href="#content"]:focus, .skip-link:focus {
  top: 1rem;
}

/* ---------------------------------------------------------------------
 * 18 · Dark mode opt-in (caso o site tenha toggle dark)
 * ------------------------------------------------------------------- */
:root.dark,
[data-theme="dark"] {
  --rzm-ink: 36 30% 96%;
  --rzm-ink-2: 36 18% 84%;
  --rzm-paper: 24 12% 9%;
  --rzm-paper-2: 28 8% 14%;
  --rzm-warm: 28 8% 22%;
  --rzm-warm-2: 28 6% 32%;
  --rzm-shadow-rgb: 0 0 0;
}

/* ---------------------------------------------------------------------
 * 19 · Print · neutralizar para impressão limpa
 * ------------------------------------------------------------------- */
@media print {
  body {
    background: white;
    color: black;
    font-family: Georgia, serif;
  }
  header, footer, nav, button, [role="button"] {
    display: none !important;
  }
  a {
    color: black;
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}


/* =====================================================================
 * 20 · FOOTER do bundle — estilização premium (Opção B)
 * =====================================================================
 * Não escondemos o footer original. Estilizamos in-place:
 *  - Logo branca via filter
 *  - Paddings reduzidos
 *  - Linha de copyright apertada
 *  - Crédito Vexto injetado via JS dentro da bottom-bar
 * Isso preserva o sticky-footer correto do bundle (flex column do wrapper),
 * eliminando o void cinza que aparecia ao esconder o footer.
 * =====================================================================*/

/* Logo do footer — vermelha por padrão, transformada em branca */
footer.bg-stone-900 .mb-10 img,
footer.bg-stone-900 img[alt*="Raízes"],
footer.bg-stone-900 img[alt*="Raizes"] {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95;
}

/* Padding interno menor — antes era py-12 md:py-16 (3-4rem) */
footer.bg-stone-900 > div.max-w-7xl {
  padding-top: 3rem !important;
  padding-bottom: 1.5rem !important;
}

/* Linha de copyright — apertar */
footer.bg-stone-900 .border-t.border-stone-800 {
  padding-top: 1.25rem !important;
  margin-top: 0 !important;
}

/* Mobile mais compacto */
@media (max-width: 640px) {
  footer.bg-stone-900 > div.max-w-7xl {
    padding-top: 2.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}

/* Crédito Vexto — adicionado via JS dentro do .border-t */
.rzm-vexto-credit {
  font-size: 11.5px;
  color: #6e6a5d;
  text-align: center;
  letter-spacing: 0.01em;
  margin: 0;
  padding-top: 0.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .rzm-vexto-credit {
    width: auto;
    padding-top: 0;
  }
}

.rzm-vexto-credit a {
  color: #a8a195;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.rzm-vexto-credit a:hover {
  color: #d4af37;
  border-bottom-color: #d4af37;
}

.rzm-vexto-heart {
  display: inline-block;
  color: #c9c2b3;
  margin: 0 2px;
  font-size: 12px;
  vertical-align: -1px;
}

/* =====================================================================
 * 21 · Esconder ruídos: Sonner toaster overlay e extensões de browser
 * =====================================================================*/
body > section[aria-label*="Notification"],
body > section[aria-live="polite"] {
  position: fixed !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 9999;
}
body > section[aria-label*="Notification"] > *,
body > section[aria-live="polite"] > * {
  pointer-events: auto;
}

/* Extensões de browser que injetam wrappers no body (wa-leads, etc.) */
body > div.wa-leads-root,
body > [data-v-40948fb2] {
  display: none !important;
}

/* =====================================================================
 * 22 · Body — sem fundo escuro (deixa o bg-white do bundle valer)
 * =====================================================================*/
html, body {
  margin: 0;
}


/* =====================================================================
 * 23 · Body — sem min-height extra (bundle wrapper já garante 100vh)
 * =====================================================================
 * O wrapper interno <div className="min-h-screen flex flex-col"> já
 * garante 100vh por página. NÃO precisamos forçar nada no body.
 * Sobrescreve qualquer min-height/flex que tenha vindo de seções
 * anteriores (caso ainda esteja em cache).
 */
html, body {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  background: #fff;
}

#root {
  min-height: 0 !important;
  display: block !important;
}


/* =====================================================================
 * 24 · Cobertura final — body match com footer + extras zerados
 * =====================================================================*/

/* Body com fundo igual ao footer — qualquer overflow fica invisível */
html, body {
  background: rgb(28 25 23) !important;
}

/* Toaster wrapper do bundle — fixar fora do fluxo */
body > div.fixed,
body > div[class*="fixed"][class*="top-0"][class*="z-"] {
  position: fixed !important;
  inset: auto !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: visible !important;
}
body > div.fixed > *,
body > div[class*="fixed"][class*="top-0"][class*="z-"] > * {
  pointer-events: auto;
  position: fixed;
}

/* Qualquer outro div direto do body que não seja root nem footer original */
body > div:not(#root):not([id="rzm-custom-footer"]) {
  display: none !important;
}

/* Section de notificação do toaster */
body > section {
  position: fixed !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
body > section > * {
  pointer-events: auto;
}


/* =====================================================================
 * 25 · CORTE FINAL — wrapper interno não estica além do conteúdo
 * =====================================================================
 * O <div class="min-h-screen flex flex-col bg-white"> dentro do #root
 * força 100vh. Com <main flex-1>, esse main cresce e empurra o footer
 * pra baixo, criando vão entre o conteúdo real e o footer.
 *
 * Solução: zerar min-h-screen do wrapper, deixar main em flex-shrink
 * para não esticar, e #root sem altura forçada.
 */

#root > div.min-h-screen,
#root > div[class*="min-h-screen"] {
  min-height: 0 !important;
}

#root > div.min-h-screen > main.flex-1,
#root > div > main.flex-1,
#root main.flex-1 {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

#root,
body {
  min-height: 0 !important;
  height: auto !important;
}


/* =====================================================================
 * 26 · MATA DEFINITIVO o <section> Sonner DENTRO do #root
 * =====================================================================
 * Devtools confirmou: <section aria-label="Notifications alt+T"> está
 * DENTRO de #root (não no body), com altura ~101px. É o causador final
 * do espaço escuro no fim. Cobertura total: qualquer escopo.
 */

section[aria-label*="Notification"],
section[aria-live="polite"],
section[aria-relevant="additions text"] {
  position: fixed !important;
  inset: auto !important;
  bottom: 1rem !important;
  right: 1rem !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 9999;
}

section[aria-label*="Notification"] > *,
section[aria-live="polite"] > *,
section[aria-relevant="additions text"] > * {
  pointer-events: auto;
}


/* =====================================================================
 * 27 · HERO responsivo — ocupar toda a tela em mobile, escalar bem
 * =====================================================================
 * Em telas pequenas (≤768px) o hero deve preencher quase 100% da viewport
 * para sensação imersiva. Em desktop, mantém proporção controlada.
 * Cobertura ampla via padrões de classe Tailwind usados pelo bundle.
 */

/* Base — qualquer container que tenha aspect-ratio fixo do hero/banner */
main > section:first-child,
main > div:first-child > section:first-child,
main > div:first-child > div:first-child[class*="relative"][class*="overflow-hidden"],
main > div:first-child[class*="relative"][class*="overflow-hidden"][class*="bg"] {
  /* default desktop */
}

/* Mobile (≤640px) — hero ocupa 100vh menos a altura da nav (~72px) */
@media (max-width: 640px) {
  /* Carousel/Slider de banners da home */
  main > div:first-child > section:first-child,
  main section.relative:first-child,
  main > section:first-child[class*="relative"],
  main > div:first-child[class*="relative"]:has(img),
  main [class*="hero"],
  main [class*="Hero"],
  main [class*="banner"]:first-child,
  main [class*="Banner"]:first-child,
  main > div > div.relative.w-full:first-child,
  /* Padrões comuns Tailwind do bundle */
  main > div > div[class*="aspect-["],
  main > div > div[class*="h-["][class*="vh"],
  main > div > div[class*="h-["][class*="px"]:first-child {
    height: calc(100vh - 72px) !important;
    min-height: calc(100vh - 72px) !important;
    max-height: none !important;
  }

  /* Imagem do hero — preencher container */
  main > div:first-child img.w-full,
  main > div:first-child > div:first-child img,
  main > div:first-child img[class*="object-cover"],
  main section:first-child img.absolute,
  main [class*="hero"] img,
  main [class*="banner"]:first-child img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Conteúdo (título + botão) centralizado verticalmente */
  main > div:first-child .absolute,
  main section:first-child .absolute {
    /* deixa o bundle controlar */
  }
}

/* Telas muito pequenas (≤380px iPhone SE) — diminuir título do hero */
@media (max-width: 380px) {
  main h1.text-3xl,
  main h1.text-4xl,
  main h1[class*="text-"]:first-child,
  main section:first-child h1,
  main section:first-child h2 {
    font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important;
    line-height: 1.12 !important;
  }
}

/* Tablet (641-1024px) — hero entre 60-72vh */
@media (min-width: 641px) and (max-width: 1024px) {
  main > div:first-child > section:first-child,
  main section.relative:first-child,
  main > div:first-child[class*="relative"]:has(img),
  main > div > div.relative.w-full:first-child {
    min-height: 60vh !important;
    max-height: 72vh !important;
  }
}

/* Desktop (≥1025px) — hero entre 540-720px */
@media (min-width: 1025px) {
  main > div:first-child > section:first-child,
  main section.relative:first-child,
  main > div:first-child[class*="relative"]:has(img),
  main > div > div.relative.w-full:first-child {
    min-height: 540px !important;
    max-height: 720px !important;
  }
}

/* Imagens e videos do hero — sempre object-cover responsivo */
main > section:first-child img,
main > div:first-child img:first-of-type,
main > div:first-child > div:first-child img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* Garante que carrossel/slider preserve altura total em qualquer breakpoint */
main [role="region"][aria-roledescription*="carousel"],
main [class*="embla"],
main [class*="swiper"],
main [class*="slick"] {
  width: 100%;
  height: 100%;
}

/* Conteúdo overlaid no hero — padding seguro pra notch e barra do browser mobile */
@media (max-width: 640px) {
  main > section:first-child > div.absolute,
  main > div:first-child .absolute.inset-0 > div,
  main > div:first-child .relative > div.relative {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 1rem);
    padding-inline: 1.25rem;
  }
}


/* =====================================================================
 * 28 · Hero/Capa de páginas internas — preto degrade + vermelho da identidade
 * =====================================================================
 * Aplicar APENAS em páginas internas que têm hero pequeno com breadcrumb +
 * título (Equipe, Sobre, Quem Somos, Transparência, Galeria, etc).
 * NÃO MEXE no hero da home (que usa carousel grande com bg image full).
 *
 * Detecção: hero secundário do bundle costuma ter bg-stone-900 ou bg-black
 * + breadcrumb de navegação + título grande. Identificamos pelo padrão
 * "main > div:first-child[class*='bg-stone-9']" ou similar.
 *
 * Identidade Raízes: vermelho institucional (#b91c1c / red-700).
 */

/* Capas internas (não home) — gradient preto → vermelho escuro institucional */
main > div:first-child:not([class*="min-h-screen"]) > div[class*="bg-stone-900"]:first-child,
main > div:first-child[class*="bg-stone-900"][class*="text-white"],
main > section:first-child[class*="bg-stone-900"],
main > div[class*="bg-stone-9"]:has(> nav[aria-label*="readcrumb"]),
main > div:first-child:has(> div > nav[aria-label*="readcrumb"]),
main > section:first-child:has(nav[aria-label*="readcrumb"]),
main > div:first-child:has(.breadcrumb),
main > div:first-child:has(> div > .breadcrumb),
/* Padrão concreto que vimos no bundle: "min-h-screen bg-stone-50" wrapper
   com banner topo bg-white border-b → vamos pegar wrappers escuros */
main > div:first-child > div:first-child[class*="bg-stone-9"],
main > div:first-child > div:first-child[class*="bg-black"],
main > div:first-child > section:first-child[class*="relative"]:has(img[src*="developer"]),
main > div:first-child > div[class*="relative"]:has(.breadcrumb),
/* Bg image escuro da capa Equipe */
main > div:first-child > div.relative[style*="background"]:has(h1) {
  background: linear-gradient(135deg, #0c0a09 0%, #1c1917 35%, #4a0e0e 75%, #7a1414 100%) !important;
  position: relative;
  isolation: isolate;
}

/* Camada escura sobre imagem de fundo se houver */
main > div:first-child > div.relative:has(img):has(h1)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12,10,9,0.85) 0%, rgba(28,25,23,0.78) 35%, rgba(74,14,14,0.78) 75%, rgba(122,20,20,0.85) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Diminuir opacidade da imagem de fundo da capa para o texto sair */
main > div:first-child > div.relative:has(h1) > img[class*="absolute"],
main > div:first-child > div.relative:has(h1) > img[class*="object-cover"] {
  opacity: 0.55 !important;
  filter: saturate(0.9) brightness(0.85);
}

/* Texto sempre branco e visível sobre o fundo */
main > div:first-child > div[class*="bg-stone-9"] h1,
main > div:first-child > div[class*="bg-stone-9"] h2,
main > div:first-child > div[class*="bg-stone-9"] p,
main > div:first-child > div.relative:has(h1) h1,
main > div:first-child > div.relative:has(h1) h2,
main > div:first-child > div.relative:has(h1) p,
main > div:first-child > div.relative:has(h1) nav a,
main > div:first-child > div.relative:has(h1) nav {
  color: #fff !important;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

main > div:first-child > div.relative:has(h1) nav a:hover {
  color: #f5d59a !important;
}

main > div:first-child > div.relative:has(h1) nav svg {
  color: rgba(255, 255, 255, 0.7);
}

/* =====================================================================
 * 29 · Mobile — botão de play do TV Doca (Sonner artifacts on mobile)
 * =====================================================================
 * No mobile, o botão de play do hero da TV Doca aparecia só como uma
 * bolinha branca pq o ícone (svg) ficou sem cor por classe específica.
 * Forçamos cor preta + tamanho consistente.
 */

@media (max-width: 768px) {
  /* Play button no hero TV Doca / videos */
  [class*="rounded-full"][class*="bg-white"] svg,
  [class*="rounded-full"][class*="bg-white\\/"] svg,
  button[class*="rounded-full"]:has(svg.lucide-play) svg,
  div[class*="rounded-full"]:has(svg.lucide-play) svg,
  /* Bundle pattern: <div class="w-16 h-16 rounded-full bg-white/20 ..."> */
  [class*="rounded-full"][class*="bg-white"][class*="backdrop-blur"] svg {
    color: #1c1917 !important;
    fill: #1c1917 !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
  }

  /* Garante o círculo do botão fique mais visível em mobile */
  [class*="rounded-full"][class*="bg-white"][class*="backdrop-blur"],
  div.absolute.inset-0[class*="flex"][class*="items-center"] > div[class*="rounded-full"] {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    width: 56px !important;
    height: 56px !important;
  }

  /* Cards de vídeo na grid abaixo do hero — botão de play visível */
  .grid div[class*="rounded-full"][class*="bg-white"] svg,
  .grid [class*="rounded-lg"] div[class*="rounded-full"] svg {
    color: #1c1917 !important;
    fill: #1c1917 !important;
    width: 18px !important;
    height: 18px !important;
  }

  .grid div[class*="rounded-full"][class*="bg-white"],
  .grid [class*="rounded-lg"] div[class*="rounded-full"][class*="bg-white"] {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }
}


/* =====================================================================
 * 30 · DEFINITIVO — PageHeader Sn em capas internas
 * =====================================================================
 * Estrutura real (component Sn):
 *   <section class="relative py-20 md:py-28 overflow-hidden">
 *     <div class="absolute inset-0 bg-cover bg-center" style="backgroundImage: url(unsplash...)" />
 *     <div class="absolute inset-0 bg-gradient-to-r from-stone-900/95 via-stone-900/85 to-stone-900/70" />
 *     <div class="relative max-w-7xl mx-auto px-4">
 *       <nav>...breadcrumb...</nav>
 *       <h1>Nossa Equipe</h1>
 *       <p>Conheça as pessoas...</p>
 *     </div>
 *   </section>
 *
 * Substituir o background image por gradient preto + vermelho institucional.
 * Esconder a div de overlay. Texto fica branco com text-shadow.
 */

/* O <section> que é o PageHeader */
section.relative.overflow-hidden:has(> .absolute.bg-cover):has(h1) {
  background: linear-gradient(135deg, #0c0a09 0%, #1c1917 30%, #2a0808 60%, #4a0e0e 85%, #7a1414 100%) !important;
}

/* A imagem de fundo (Unsplash de developers) — escondemos */
section.relative.overflow-hidden:has(h1) > div.absolute.inset-0.bg-cover,
section.relative.overflow-hidden:has(h1) > div[style*="backgroundImage"] {
  display: none !important;
}

/* Overlay gradient stone-900 — escondemos para o nosso bg dominar */
section.relative.overflow-hidden:has(h1) > div.absolute.inset-0[class*="bg-gradient-to-r"][class*="from-stone-9"] {
  background: linear-gradient(135deg, rgba(12,10,9,0.4) 0%, rgba(74,14,14,0.3) 50%, rgba(122,20,20,0.4) 100%) !important;
}

/* Texto: branco + shadow para sair sobre qualquer bg */
section.relative.overflow-hidden:has(h1) h1,
section.relative.overflow-hidden:has(h1) h2,
section.relative.overflow-hidden:has(h1) p,
section.relative.overflow-hidden:has(h1) nav,
section.relative.overflow-hidden:has(h1) nav a,
section.relative.overflow-hidden:has(h1) nav span {
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

section.relative.overflow-hidden:has(h1) nav a:hover {
  color: #f5d59a !important;
}

section.relative.overflow-hidden:has(h1) nav svg {
  color: rgba(255, 255, 255, 0.85);
}

/* Subtítulo com cor levemente atenuada */
section.relative.overflow-hidden:has(h1) p {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* =====================================================================
 * 31 · Botão Play TV Doca mobile — cobertura final
 * =====================================================================
 * Bundle exato para hero TV Doca:
 *   <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-white/20 backdrop-blur-sm
 *               border-2 border-white/60 flex items-center justify-center ...">
 *     <Play class="w-7 h-7 md:w-9 md:h-9 text-white fill-white ml-1" />
 *   </div>
 *
 * Cards (mais videos):
 *   <div class="w-9 h-9 rounded-full bg-white/90 ...">
 *     <Play class="w-4 h-4 text-stone-950 fill-stone-950 ml-0.5" />
 *   </div>
 */

@media (max-width: 768px) {
  /* HERO TV Doca: torna o wrapper do play 100% opaco com ícone preto */
  div[class*="bg-white\\/20"][class*="rounded-full"][class*="border-white"],
  div[class*="bg-white\\/20"][class*="rounded-full"][class*="backdrop-blur"] {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
  }

  /* Ícone Play dentro do hero — escuro */
  div[class*="bg-white\\/20"] > svg.lucide,
  div[class*="bg-white\\/20"] > svg.lucide-play,
  div[class*="bg-white\\/20"][class*="rounded-full"] > svg {
    color: #1c1917 !important;
    fill: #1c1917 !important;
    stroke: #1c1917 !important;
  }

  /* Já que o bundle tem text-white fill-white nas classes inline, sobrepor: */
  svg.lucide-play.fill-white,
  svg.fill-white[class*="lucide"] {
    fill: #1c1917 !important;
    color: #1c1917 !important;
  }

  /* Cards de vídeo - bolinha branca com play vermelho */
  div[class*="bg-white\\/90"] svg.lucide-play,
  div[class*="bg-white\\/90"] > svg {
    color: #b91c1c !important;
    fill: #b91c1c !important;
  }
}