/* ============================================================
   DAGV – Diretório Acadêmico Gaspar Vianna
   styles.css  |  Designed for Medicina UFTM
   ============================================================ */

/* ── 1. Tokens / Variáveis ───────────────────────────────── */
:root {
  /* Cores principais – paleta bordô #930142 */
  --clr-green:       #930142;   /* bordô principal        */
  --clr-green-dark:  #5e0029;   /* bordô escuro           */
  --clr-green-light: #fce8f0;   /* bordô suave / fundo    */
  --clr-teal:        #b8194f;   /* bordô médio / hover    */
  --clr-accent:      #e8a020;   /* dourado quente         */

  /* Neutros – derivados do bordô escuro */
  --clr-white:  #ffffff;
  --clr-off:    #fdf7f9;
  --clr-gray-1: #f0dde6;
  --clr-gray-2: #b08090;
  --clr-gray-3: #6b3d4e;
  --clr-dark:   #1a0010;

  /* Tipografia */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Espaçamento */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Bordas */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(26,0,16,.08);
  --shadow-md: 0 6px 24px rgba(26,0,16,.12);
  --shadow-lg: 0 16px 48px rgba(26,0,16,.16);

  /* Transições */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 200ms;
  --dur-med:  350ms;

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

/* ── 2. Reset & Base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;           /* previne scroll lateral global */
}

body {
  font-family: var(--font-body);
  background-color: var(--clr-white);
  color: var(--clr-dark);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Focus ring acessível */
:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 3. Layout helpers ──────────────────────────────────── */
.container {
  width: min(1200px, 92vw);
  margin-inline: auto;
}

.section { padding-block: var(--space-2xl); }
.section--alt { background-color: var(--clr-off); }

/* ── 4. Typography helpers ──────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.section-tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-green);
  background: var(--clr-green-light);
  border-radius: var(--radius-pill);
  padding: .25em .9em;
  margin-bottom: var(--space-sm);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.section-desc {
  color: var(--clr-gray-3);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ── 5. Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: .75em 1.8em;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.btn--primary {
  background: var(--clr-green);
  color: var(--clr-white);
  box-shadow: 0 4px 16px rgba(42,122,75,.35);
}
.btn--primary:hover {
  background: var(--clr-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(42,122,75,.4);
}

.btn--outline {
  background: transparent;
  color: var(--clr-white);
  border: 2px solid rgba(255,255,255,.55);
}
.btn--outline:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--clr-white);
  transform: translateY(-2px);
}

.btn--full { width: 100%; justify-content: center; }

/* ── Botões da hero: ícone dourado, mais altos ──────────────
   Aplicados via .hero-btn para não afetar outros botões do site.
   Ícone sempre na cor dourada (--clr-accent), independente
   do fundo do botão.
─────────────────────────────────────────────────────────── */
.hero-btn {
  position: relative;
  /* Altura maior: padding vertical generoso */
  padding: 1.05em 7em;
  /* Justifica o ícone à esquerda e o texto ao centro */
  justify-content: center;
  gap: .45em;
  /* Formato mais quadrado/retangular (sobrepõe o pill padrão do .btn) */
  border-radius: var(--radius-sm);
}

/* Ícone sempre dourado em todos os estados */
.hero-btn .hero-btn__icon {
  color: var(--clr-accent);
  font-size: 1.05em;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease);
}

.hero-btn:hover .hero-btn__icon {
  transform: scale(1.15);
}

/* ── 6. Header ──────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: transparent;
  transition: background var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease),
              backdrop-filter var(--dur-med) var(--ease);
}

.header.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

/* ── [AJUSTE 2] Brand/Logo – centralizada na navbar, sem textos ──
   O .header__inner usa justify-content: space-between, então colocamos
   a logo em posição absoluta centralizada enquanto sidemenu + nav
   ficam nos extremos (left / right).                                  */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;   /* permite position:absolute do brand */
}

/* Brand centralizado absolutamente */
.header__brand {
  display: flex;
  align-items: center;
  gap: 0;               /* sem gap: não há texto ao lado */
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;           /* fica acima dos shapes de fundo */
}

/* Oculta o bloco de texto (DAGV / Medicina UFTM) na navbar */
.header__title-wrap {
  display: none;
}

.header__logo-wrap { flex-shrink: 0; position: relative; }

/* Base logo styles */
.header__logo-svg {
  width: 80px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.30));
  transition: opacity var(--dur-med) var(--ease);
}

/* ─── Dynamic logo colour switching ───────────────────────
   Navbar transparent / red bg  →  show GOLD logo
   Navbar scrolled (white bg)   →  show RED  logo
   ─────────────────────────────────────────────────────── */

/* Default state: transparent/red navbar → gold logo visible, red hidden */
.logo--gold { opacity: 1; position: relative; }
.logo--red  { opacity: 0; position: absolute; top: 0; left: 0; width: 80px; pointer-events: none; }

/* Scrolled state: white navbar → red logo visible, gold hidden */
.header.scrolled .logo--gold { opacity: 0; pointer-events: none; }
.header.scrolled .logo--red  { opacity: 1; position: relative; pointer-events: auto; }
/* Reset absolute positioning when active */
.header.scrolled .logo--gold { position: absolute; top: 0; left: 0; width: 80px; }
.header.scrolled .logo--red  { position: relative; }

.header__title-wrap { display: flex; flex-direction: column; }

.header__dagv {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--clr-white);
  line-height: 1;
  transition: color var(--dur-med);
}

.header__subtitle {
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  transition: color var(--dur-med);
}

.header.scrolled .header__dagv    { color: var(--clr-dark); }
.header.scrolled .header__subtitle{ color: var(--clr-gray-3); }

/* Nav desktop */
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__link {
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  transition: color var(--dur-fast) var(--ease);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--clr-accent);
  border-radius: var(--radius-pill);
  transition: width var(--dur-fast) var(--ease);
}

.nav__link:hover::after { width: 100%; }
.nav__link:hover { color: var(--clr-white); }

.header.scrolled .nav__link       { color: var(--clr-gray-3); }
.header.scrolled .nav__link:hover { color: var(--clr-green); }

.nav__link--cta {
  background: var(--clr-green);
  color: var(--clr-white) !important;
  padding: .45em 1.2em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover {
  background: var(--clr-green-dark);
  transform: translateY(-1px);
}

/* ── Nav desktop → drawer mobile: alternância dirigida por JS ──
   .nav--compact é aplicada em .header via ResizeObserver (script.js)
   exatamente quando o espaço disponível deixa de comportar o .nav
   sem colidir com o brand central. Fallback sem JS no breakpoint
   mobile existente (≤768px), na seção 13. */
.header.nav--compact .nav        { display: none; }
.header.nav--compact .hamburger  { display: flex; }
.header.nav--compact .nav-mobile { display: block; }

/* [AJUSTE 6] Hamburguer com bordas arredondadas */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;              /* padding generoso para área de clique */
  border-radius: var(--radius-sm); /* bordas arredondadas – era sem border-radius */
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.hamburger:hover {
  background: rgba(255,255,255,.22);
  transform: scale(1.05);
}

.header.scrolled .hamburger {
  background: var(--clr-green-light);
  border-color: var(--clr-green);
}

.header.scrolled .hamburger:hover {
  background: var(--clr-green);
}

.header.scrolled .hamburger:hover span { background: var(--clr-white); }

.hamburger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--clr-white);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast);
}

.header.scrolled .hamburger span { background: var(--clr-dark); }

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav mobile drawer */
.nav-mobile {
  display: none;
  background: var(--clr-white);
  border-top: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease);
}

.nav-mobile.open { max-height: 400px; }

.nav-mobile__list { padding: var(--space-sm) 0 var(--space-md); }

.nav-mobile__link {
  display: block;
  padding: .85rem 5vw;
  font-size: 1rem;
  font-weight: 500;
  color: var(--clr-dark);
  border-bottom: 1px solid var(--clr-gray-1);
  transition: color var(--dur-fast), background var(--dur-fast);
}

.nav-mobile__link:hover {
  color: var(--clr-green);
  background: var(--clr-green-light);
}

/* ── 7. Hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* [FIX v149.1] Centralização explícita e redundante do .hero__frame
     — não depende só de margin-inline:auto absorvendo o espaço livre
     do flex (que não estava centralizando corretamente, "grudando"
     tudo à esquerda). justify-content:center garante a centralização
     do frame independentemente disso. */
  justify-content: center;
  /* [FIX responsividade v3] Única variável de escala do "conjunto"
     hero (logo + texto). Aplicada como font-size em .hero__content
     e .hero__logo-deco (ambos, mesmo valor) — tudo dentro de cada
     um usa `em`, então escalam sempre na mesma proporção, sem
     depender de reestruturação de layout (mais seguro/previsível
     que Flexbox aqui, já que a posição continua vindo de
     top/right fixos, iguais ao desktop, apenas os TAMANHOS mudam).
     Em ≥1280px vale 16px = 1rem = idêntico à versão desktop atual. */
  /* [FIX tablet] Piso subido de 9px para 12px: no tablet a Hero
     estava encolhendo demais e ficando "vazia" — parecendo uma
     versão mobile antecipada em vez de uma desktop reduzida.
     Continua contínuo e sem saltos, só o chão da escala mudou. */
  --hero-scale: clamp(9.7px, calc(0.22px + 1.2329vw), 16px);
  /* [FIX real, testado com a fonte de verdade] O recuo esquerdo do
     texto (--hero-margin-left) tem sua PRÓPRIA curva, mais agressiva
     em telas de tablet, independente de --hero-scale. Por quê:
     testei com a fonte real (Playfair Display, não a de fallback —
     ela é ~8% mais larga) e "Diretório Acadêmico" já estava
     quebrando linha em 769–1100px, e com margem de 1.9px até em
     1280px. Encolher o recuo (não o texto nem a logo, que o usuário
     quer maiores) libera espaço sem contradizer o pedido. Mesmo
     valor de desktop (200px) preservado a partir de 1280px. */
  --hero-margin-left: clamp(90px, calc(-44.06px + 17.433vw), 200px);
  /* [FIX salto da logo — causa raiz] Esta variável antes só existia
     DENTRO de uma media query (769–1439px); fora dela, o navegador
     caía no fallback do var() (15%) — duas fontes de verdade para
     o mesmo valor, calculadas em momentos diferentes da cascata.
     Mesmo batendo numericamente nos limites, isso é o padrão exato
     de "media queries conflitantes" que causa recomputação em vez
     de fluxo único. Definida aqui, incondicional, junto de
     --hero-scale: um único clamp() cobre 100% da faixa de larguras,
     sem fallback, sem segunda fonte de verdade. */
  /* [FIX real — testado em Chrome headless] A fórmula anterior
     misturava "%" (resolve contra o containing block, .hero__frame,
     travado em 1200px) com "vw" (resolve contra a viewport) no MESMO
     calc(). São referências DIFERENTES — o resultado ficava travado
     no valor mínimo (6%) sempre, nunca reagia ao redimensionamento.
     Confirmado renderizando de verdade num Chrome headless (Puppeteer)
     antes de aplicar. Agora é 100% em px (sem "%"), então não há
     ambiguidade de referência — cresce de 42px a 180px continuamente
     e trava em 180px (= 15% de 1200px, valor do desktop) a partir de
     1280px de viewport. */
  /* [FIX calibrado pela imagem de referência] O cap anterior (180px)
     deixava a logo longe demais do bloco de texto. Recalibrado com
     medição de pixels reais da referência: logo deve ficar a ~48px
     da borda direita do frame em telas largas. */
  --hero-logo-right: clamp(6px, calc(-15.07px + 2.74vw), 20px);
  /* Gradiente idêntico ao sobre-hero (consistência visual) */
  background: linear-gradient(145deg,
    var(--clr-dark)       0%,
    var(--clr-green-dark) 40%,
    var(--clr-green)      75%,
    #3d0018               100%);
  overflow: hidden;
  padding-top: var(--header-h);
}

/* Faixa dourada vertical – idêntica à sobre-hero__stripe */
.hero::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom,
    transparent,
    var(--clr-accent) 30%,
    var(--clr-accent) 70%,
    transparent);
  opacity: .5;
  pointer-events: none;
  z-index: 1;
}

/* Formas decorativas – anéis com borda dourada/branca (= sobre-hero__orb) */
.hero__bg-shapes {
  position: absolute; inset: 0; pointer-events: none;
  /* Parallax layer 0 – mais ao fundo, movimento mais amplo */
  will-change: transform;
}

.shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Anel grande – canto superior direito (dourado, como sobre-hero__orb--1) */
.shape--1 {
  width: 520px; height: 520px;
  border: 72px solid rgba(232,160,32,.08);
  top: -180px; right: -120px;
  animation: floatA 12s ease-in-out infinite;
  background: transparent;
}

/* Anel pequeno – canto inferior esquerdo (branco, como sobre-hero__orb--2) */
.shape--2 {
  width: 280px; height: 280px;
  border: 40px solid rgba(255,255,255,.05);
  bottom: -80px; left: -60px;
  animation: floatB 9s ease-in-out infinite;
  background: transparent;
}

/* Terceiro ornamento – círculo preenchido muito sutil (mantém fluidez) */
.shape--3 {
  width: 160px; height: 160px;
  background: rgba(255,255,255,.03);
  top: 55%; left: 42%;
  animation: floatA 7s ease-in-out infinite 2s;
}

@keyframes floatA {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}
@keyframes floatB {
  0%,100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-16px) rotate(8deg); }
}

/* ══════════════════════════════════════════════════════════
   HERO – CASARÃO HISTÓRICO (FMTM 1953)
   Elemento decorativo integrado · canto inferior direito

   Visual de referência: prédio emerge do próprio background
   bordô como marca-d'água arquitetônica — sem linhas brancas,
   sem contraste abrupto, totalmente fundido à paleta vinho.

   Arquitetura de camadas:
     1. .hero { gradiente bordô #1a0010 → #930142 → #3d0018 }
     2. .hero__bg-shapes { anéis animados translúcidos }
     3. .hero::before  ← CASARÃO (z-index: 1)
     4. .hero::after   { faixa dourada lateral }
     5. .hero__logo-deco { logo DAGV }          z-index: 1
     6. .hero__content { texto + botões }       z-index: 2

   Técnica de integração (replica imagem de referência):
     – A imagem PNG é branca sobre preto.
     – mix-blend-mode: overlay sobre o fundo bordô → as linhas
       brancas viram tom rosado/vinho claro, o fundo preto
       desaparece. Resultado: prédio "emergindo" do background.
     – opacity baixa → presença evocativa, não dominante.
     – Pseudo-elemento ::after do wrapper (não disponível) →
       usamos mask-image para fade suave nas bordas esquerda
       e topo, sem corte.
     – filter: brightness() + saturate() afinam o tom final
       para casar com o bordô da paleta institucional.
   ══════════════════════════════════════════════════════════ */
.hero::before {
  content: '';
  position: absolute;

  /* ── Posicionamento: canto inferior direito, extravasa levemente ── */
  bottom: -29vh;
  right:  -7%;

  /* ── Tamanho: ~42vw no desktop — mesmo peso visual da referência ── */
  width:  clamp(280px, 100vw, 1000px);
  height: auto;
  aspect-ratio: 1330 / 830;

  /* ── Camadas ────────────────────────────────────────────────────── */
  z-index: 1;
  pointer-events: none;

  /* ── Imagem ─────────────────────────────────────────────────────── */
  background-image: url('../img/Casarao.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;

  /* ── Opacidade: presença elegante sem protagonismo ──────────────── */
  opacity: .28;

  /* ── Blend mode: OVERLAY sobre o fundo bordô
     As linhas brancas da ilustração ficam com tom rosado-vinho
     (claro sobre escuro em overlay = iluminação sutil).
     O fundo preto da PNG desaparece (preto em overlay = neutro).
     Resultado: prédio emerge do background como glow arquitetônico. */
  mix-blend-mode: overlay;

  /* ── Colorização e refinamento do tom ──────────────────────────────
     brightness(1.3) → clareia as linhas para ficarem mais visíveis
     contrast(.85)   → suaviza o contraste, evita dureza das linhas
     saturate(.6)    → desatura levemente (linhas viram rosado neutro,
                        não laranja), harmoniza com a paleta bordô      */
  filter: brightness(1.3) contrast(.85) saturate(.6) blur(.4px);

  /* ── Fade nas bordas: esquerda e topo — integração orgânica ────────
     Evita que o prédio pareça "colado"; as bordas dissolvem no fundo.
     mask combina dois gradientes (intersect = AND lógico):
       horizontal: transparente na esquerda → opaco a partir de 35%
       vertical:   transparente no topo     → opaco a partir de 18%   */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.4) 30%, black 52%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 15%, black 42%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.4) 30%, black 52%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 15%, black 42%);
  mask-composite: intersect;

  /* ── Animação de surgimento ──────────────────────────────────────
     Entra 0.6s após o carregamento (depois do eyebrow e título),
     dura 2.2s com easing orgânico — o prédio emerge devagar,
     como se aflorasse das camadas mais profundas do background.
     fill-mode: both → mantém o estado inicial antes de começar
     e o estado final após terminar.                               */
  animation: casaraoReveal 2s ease-out both;

  /* will-change: otimiza compositing da animação na GPU */
  will-change: transform, opacity, filter;
}

/* [FIX v149] Frame comum: largura travada em min(1200px,92vw) via
   classe .container (reaproveitada — mesmo padrão do resto do site).
   É o CONTAINING BLOCK da logo (abaixo) — position:relative aqui,
   não em .hero. Acima de ~1300px de viewport este frame para de
   crescer, então a logo (ancorada a ele) também para de se afastar
   do conteúdo — resolve o "distanciamento progressivo" no ultrawide. */
.hero__frame {
  width: min(1200px, 92vw);
  margin-inline: auto;
  position: relative;
}

.hero__content {
  position: relative;
  z-index: 2;
  font-size: var(--hero-scale);
  /* [FIX calibrado] Reference mostra o texto recuado da borda
     esquerda do frame, não colado nela. 10.6em = 169.6px a escala
     cheia (--hero-scale=16px), escala com o resto do conjunto. */
  margin-left: var(--hero-margin-left);
  /* Largura segura: nunca deixa a caixa (título + descrição) entrar
  /* Largura segura: nunca deixa a caixa (título + descrição) entrar
     na área da logo. contêiner − o próprio recuo esquerdo (margin-left)
     − largura da logo (27.3em) − offset da logo (--hero-logo-right)
     − 32px de folga. [FIX] faltava subtrair o margin-left aqui —
     sem isso, com uma logo grande o bastante, a conta dava uma
     largura "segura" que na verdade já invadia a logo, porque não
     considerava que o conteúdo já começa deslocado para a direita. */
  max-width: min(680px, 52%, calc(100% - var(--hero-margin-left) - 24.57em - var(--hero-logo-right, 20px) - 12px));
  padding-block: var(--space-2xl);
}

/* ── Logo decorativa à direita do hero ─────────────────── */
/* [AJUSTE 1] Logo hero com tamanho aumentado significativamente,
   alinhada à direita conforme imagem de referência.
   Posição (top/right) igual à do desktop em qualquer largura —
   só o tamanho muda (--hero-scale), nunca a posição relativa.
   [FIX v149] Ancorada a .hero__frame (largura travada), não mais a
   .hero (sem limite) — right:% agora é relativo a um bloco que para
   de crescer, então a logo não se afasta mais do texto indefinidamente.
   Mobile: oculta via @media (max-width: 768px).              */
.hero__logo-deco {
  position: absolute;
  right: 10%;
  top: 40%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: var(--hero-scale);
  pointer-events: none;
  animation: heroLogoIn 1.1s var(--ease) .2s both;
  will-change: transform;
}

.hero__logo-deco-img {
  /* 26em do --hero-scale compartilhado com .hero__content acima:
     logo e texto sempre escalam na MESMA proporção, por construção
     (mesma variável), então a relação espacial nunca muda. */
  /* Reduzido de 26em para 22em: 26em (416px) ainda encostava no
     título em tela cheia (limite calculado ficava ~20px negativo). */
  width: 24.57em;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 0 60px rgba(200,150,12,.15))
    drop-shadow(0 12px 40px rgba(0,0,0,.55));
  user-select: none;
  opacity: .90;
}

@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(-50%) translateX(40px); }
  to   { opacity: .90; transform: translateY(-50%) translateX(0); }
}

/* ── Animação de surgimento do casarão histórico ────────────────
   Transição contínua de from → to, sem frames intermediários.
   O easing ease-out garante uma curva única e ininterrupta:
   começa rápido e desacelera organicamente até o repouso.
   Duração longa (3s) + delay (0.8s) = aparecimento imperceptível,
   como se o prédio sempre tivesse estado lá.
   ────────────────────────────────────────────────────────────── */
@keyframes casaraoReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: brightness(.8) contrast(.6) saturate(.2) blur(6px);
  }
  to {
    opacity: .28;
    transform: translateY(0);
    filter: brightness(1.3) contrast(.85) saturate(.6) blur(.4px);
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .2em;           /* idêntico ao sobre-hero (.2em) */
  text-transform: uppercase;
  color: var(--clr-accent);       /* dourado = sobre-hero */
  margin-bottom: var(--space-sm);
  animation: slideUp .8s var(--ease) both;
}

.hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--clr-accent);
  border-radius: var(--radius-pill);
}

.hero__title {
  font-family: var(--font-display);
  font-size: 3.6em;   /* 3.6em × font-size único = idêntico ao clamp cap anterior (3.6rem) em desktop */
  font-weight: 700;
  color: var(--clr-white);
  line-height: 1.14;
  margin-bottom: var(--space-md);
  animation: slideUp .9s var(--ease) .1s both;
}

.hero__title em {
  font-style: italic;
  color: var(--clr-accent);
  display: block;           /* garante que a linha dourada fica abaixo */
  padding-bottom: .55em;
  position: relative;
}

/* Linha dourada centralizada abaixo do nome em itálico */
.hero__title em::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.8em;
  height: 3px;
  background: var(--clr-accent);
  border-radius: 2px;
}

.hero__description {
  font-size: 1.12em;
  color: rgba(255,255,255,.82);
  /* 33.75em = 540px em desktop (--hero-scale=16px), idêntico ao valor
     anterior — mas agora encolhe na MESMA taxa do título/logo, em vez
     de ficar travado em 540px fixos (o que fazia a descrição "sobrar"
     largura e parecer grande demais quando o resto já tinha encolhido). */
  max-width: 33.75em;
  line-height: 1.72;
  margin-bottom: var(--space-lg);
  animation: slideUp 1s var(--ease) .2s both;
}

.hero__actions {
  display: flex;
  flex-wrap: nowrap;               /* sempre uma fileira só */
  gap: .35em;
  margin-top: var(--space-2xl);
  animation: slideUp 1s var(--ease) .3s both;
}

/* Botões da hero: fonte em `em` de --hero-scale (compartilhada com
   .hero__content, seção 7) — encolhem na mesma taxa que título/logo.
   Reduzidos (.95em → .74em) pra caber 4 botões numa única fileira,
   texto sempre numa linha só (sem quebrar). */
.hero__actions .btn {
  font-size: .95em;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}

.hero__scroll-hint {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.5);
  font-size: 1.1rem;
  animation: bounce 2.5s ease-in-out infinite;
  transition: color var(--dur-fast);
}
.hero__scroll-hint:hover { color: var(--clr-white); }

@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 8. Sobre ───────────────────────────────────────────── */
.about__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.about__card {
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-1);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: transform var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}

.about__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* Variante com exatamente 3 cards (usada na página do PET):
   3 colunas no desktop, 2 colunas + 3º item centralizado embaixo
   em telas médias, 1 coluna no mobile estreito. */
.about__cards--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .about__cards--3col {
    grid-template-columns: repeat(2, minmax(220px, 320px));
    justify-content: center;
  }
  .about__cards--3col > .about__card:nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 320px;
  }
}
@media (max-width: 480px) {
  .about__cards--3col { grid-template-columns: 1fr; }
  .about__cards--3col > .about__card:nth-child(3):last-child { max-width: none; }
}

.about__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--clr-green-light);
  color: var(--clr-green);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.about__card:hover .about__icon {
  background: var(--clr-green);
  color: var(--clr-white);
}

.about__card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: .5rem;
}

.about__card p {
  color: var(--clr-gray-3);
  font-size: .95rem;
  line-height: 1.65;
}

.about__quote {
  background: var(--clr-green-dark);
  color: var(--clr-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about__quote::before {
  content: '"';
  position: absolute;
  top: -1.5rem; left: 1.5rem;
  font-family: var(--font-display);
  font-size: 10rem;
  color: rgba(255,255,255,.07);
  line-height: 1;
  pointer-events: none;
}

.about__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: .75rem;
}

.about__quote cite {
  font-size: .85rem;
  font-style: normal;
  font-weight: 600;
  color: var(--clr-accent);
  letter-spacing: .06em;
}

/* ── 9. Equipe ──────────────────────────────────────────── */
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.team__card {
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-1);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  transition: transform var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}

.team__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.team__avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--space-sm);
  border: 3px solid var(--clr-green-light);
  transition: border-color var(--dur-fast);
}

.team__card:hover .team__avatar { border-color: var(--clr-green); }

.team__avatar-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-green-light);
  color: var(--clr-green);
  font-size: 2.2rem;
}

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

.team__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-dark);
  margin-bottom: .2rem;
}

.team__role {
  font-size: .8rem;
  color: var(--clr-gray-2);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.team__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--clr-green-light);
  color: var(--clr-green);
  font-size: .88rem;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}

.team__social a:hover {
  background: var(--clr-green);
  color: var(--clr-white);
  transform: scale(1.12);
}

.team__note {
  color: var(--clr-gray-2);
  font-size: .88rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
}

/* ── 10. Instituições Acadêmicas (redesign v106) ──────── */

.inst-section { background: var(--clr-off); }

.inst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.inst-card--repr { grid-column: span 2; }

/* ── Card base ────────────────────────────────────────── */
.inst-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-gray-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26,0,16,.06);
  position: relative;
  transition: transform 280ms cubic-bezier(.25,.46,.45,.94),
              box-shadow  280ms cubic-bezier(.25,.46,.45,.94);
}
/* [FIX hover] A lib AOS grava data-aos-duration/delay em cada
   elemento com [data-aos] e o aos.css usa o truque de repetir o
   atributo — [data-aos][data-aos][data-aos-duration="..."] — pra
   ganhar especificidade (0,3,0), que vence a transition de .inst-card
   (0,1,0). Resultado: nos cards com data-aos (Ligas, Cursinho, PET,
   Cachacina), o hover ficava com a duração/timing padrão do AOS (mais
   lento/​sem graça) em vez da nossa, enquanto os mini-cards novos
   (sem data-aos) não sofriam disso e pareciam "levitar" mais.
   !important garante que a nossa transição de hover sempre vença,
   com ou sem data-aos no elemento. */
.inst-card {
  transition-property: transform, box-shadow !important;
  transition-duration: 280ms !important;
  transition-timing-function: cubic-bezier(.25,.46,.45,.94) !important;
}
.inst-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 48px rgba(94,0,41,.14) !important;
}
/* Top accent bar */
.inst-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-green-dark), var(--clr-green), var(--clr-teal));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(.25,.46,.45,.94);
}
.inst-card:hover::before { transform: scaleX(1); }

/* ── Top section ──────────────────────────────────────── */
.inst-card__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem 0;
}
.inst-card__icon-wrap {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--clr-green-dark), var(--clr-green));
  color: var(--clr-accent);
  font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(147,1,66,.22);
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.inst-card:hover .inst-card__icon-wrap {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 8px 24px rgba(147,1,66,.32);
}
.inst-card__logo-wrap {
  width: 72px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inst-card__logo {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
  transition: transform 280ms ease;
}
.inst-card:hover .inst-card__logo { transform: scale(1.05); }
.inst-card__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-gray-2);
  line-height: 1.3;
}

/* ── Body ─────────────────────────────────────────────── */
.inst-card__body {
  padding: 1rem 1.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.inst-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.25;
}
.inst-card__desc {
  font-size: .88rem;
  color: var(--clr-gray-3);
  line-height: 1.68;
}

/* ── Footer ───────────────────────────────────────────── */
.inst-card__footer {
  padding: .85rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-top: 1px solid var(--clr-gray-1);
  margin-top: auto;
}
.inst-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.inst-tag {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .7rem; font-weight: 600;
  color: var(--clr-green);
  background: var(--clr-green-light);
  border-radius: var(--radius-sm);
  padding: .22em .7em;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.inst-card:hover .inst-tag { background: var(--clr-green); color: var(--clr-white); }
.inst-card__cta {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .84rem; font-weight: 700;
  color: var(--clr-green);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px;
  transition: gap var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  align-self: flex-start;
}
.inst-card__cta:hover {
  gap: .65em;
  color: var(--clr-green-dark);
  border-color: var(--clr-green-dark);
}
.inst-card__cta i { font-size: .78rem; transition: transform 200ms ease; }
.inst-card__cta:hover i { transform: translateX(3px); }

/* ── Card ④ Repr list ─────────────────────────────────── */
.inst-repr-list {
  display: flex; flex-direction: column; gap: .5rem;
  margin-top: .25rem;
}
.inst-repr-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: .65rem;
  background: var(--clr-off);
  border: 1px solid var(--clr-gray-1);
  border-left: 3px solid var(--clr-green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .6rem .85rem;
  text-decoration: none;
  transition: background var(--dur-fast), border-left-color var(--dur-fast),
              transform var(--dur-fast), box-shadow var(--dur-fast);
}
.inst-repr-item:hover {
  background: var(--clr-green-light);
  border-left-color: var(--clr-accent);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(147,1,66,.1);
}
.inst-repr-item__abbr {
  font-family: var(--font-display);
  font-size: .85rem; font-weight: 700;
  color: var(--clr-green); white-space: nowrap;
}
.inst-repr-item__name {
  font-size: .78rem;
  color: var(--clr-gray-3);
  line-height: 1.4;
}
.inst-repr-item > i {
  font-size: .7rem; color: var(--clr-gray-2); flex-shrink: 0;
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.inst-repr-item:hover > i { color: var(--clr-green); transform: translate(2px,-2px); }

/* ── Responsividade ───────────────────────────────────── */
@media (max-width: 1024px) {
  .inst-grid { grid-template-columns: repeat(2, 1fr); }
  /* .inst-card--repr (span:2 no desktop) preenchia a linha toda
     sozinho num grid de 2 colunas, deixando o 5º card (cachacina-aaads)
     também sozinho com espaço vazio ao lado. Repr vira span:1 pra
     parear 2×2 com os 3 primeiros, e cachacina-aaads ocupa a linha
     toda por ser o último e ímpar. */
  .inst-card--repr { grid-column: span 1; }
  .inst-card--cachacina-aaads { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .inst-grid { grid-template-columns: 1fr; }
  .inst-card--repr { grid-column: span 1; }
  .inst-card--cachacina-aaads { grid-column: span 1; }
  .inst-repr-item { grid-template-columns: 70px 1fr auto; }
}



/* ── 11. Contato ────────────────────────────────────────── */
.contact__wrapper {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact__info { display: flex; flex-direction: column; gap: var(--space-md); }

.contact__info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: .95rem;
}

.contact__info-item > i {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--clr-green-light);
  color: var(--clr-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.contact__info-item strong {
  display: block;
  font-weight: 600;
  color: var(--clr-dark);
  margin-bottom: .15rem;
}

.contact__info-item a,
.contact__info-item span { color: var(--clr-gray-3); }

.contact__info-item a:hover { color: var(--clr-green); text-decoration: underline; }

/* Form */
.contact__form-cta {
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-1);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-sm);
}

.contact__form-cta-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--clr-green-light);
  color: var(--clr-green);
  font-size: 1.6rem;
  margin-bottom: var(--space-xs, .4rem);
}

.contact__form-cta h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--clr-dark);
}

.contact__form-cta p {
  font-size: .92rem;
  color: var(--clr-gray-3);
  line-height: 1.6;
  max-width: 34ch;
}

.contact__form-cta .btn {
  margin-top: var(--space-xs, .4rem);
  max-width: 320px;
}

/* ── 12. Footer ─────────────────────────────────────────── */
.footer {
  background: var(--clr-dark);
  color: rgba(255,255,255,.75);
  padding-top: var(--space-xl);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer__logo { width: 64px; height: auto; }

.footer__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-white);
}

.footer__sub { font-size: .78rem; color: rgba(255,255,255,.45); }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

.footer__links a {
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  transition: color var(--dur-fast);
}
.footer__links a:hover { color: var(--clr-white); }

.footer__social {
  display: flex;
  gap: .75rem;
}

.footer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}

.footer__social a:hover {
  background: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--clr-white);
  transform: translateY(-3px);
}

.footer__bottom {
  padding-block: var(--space-md);
  text-align: center;
  font-size: .8rem;
  color: rgba(255,255,255,.35);
}
.footer__credit {
  margin-top: .35rem;
  font-size: .78rem;
  color: rgba(255,255,255,.4);
}
.footer__credit a {
  color: var(--clr-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,160,32,.35);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.footer__credit a:hover {
  color: var(--clr-white);
  border-color: var(--clr-white);
}

/* ══════════════════════════════════════════════════════════
   13. RESPONSIVIDADE COMPLETA
   Breakpoints:
     ≤ 480px  – Mobile pequeno
     ≤ 768px  – Mobile padrão
     ≤ 1024px – Tablet
     ≥ 1200px – Desktop / ultrawide
   ══════════════════════════════════════════════════════════ */

/* ── Tablet + desktop médio (769px–1439px) ───────────────
   --hero-scale e --hero-logo-right (seção 7) já escalam fonte/logo/
   posição continuamente, sem precisar de nada aqui.
   O que falta: a Hero usa min-height:100svh sempre — em telas de
   tablet, o conteúdo (agora proporcionalmente menor) sobra dentro
   de uma caixa do tamanho inteiro da viewport, parecendo "vazio".
   Aqui a altura mínima acompanha a mesma curva de escala do
   conteúdo, continuamente, chegando a 100svh exatamente em 1280px
   (mesmo ponto onde --hero-scale satura) — a versão desktop (≥1280)
   fica idêntica; só o tablet ganha uma Hero proporcionalmente menor. */
@media (min-width: 769px) and (max-width: 1439px) {
  .hero { min-height: clamp(65svh, calc(12.33svh + 6.849vw), 100svh); }
}

/* [FIX real] Os botões usavam o mesmo padding do desktop (1.05em
   2em) em qualquer largura — verificado agora com soma real de
   largura (não só detecção de quebra de linha, que não pega
   overflow sem quebra): eles extrapolavam a caixa do conteúdo,
   invisível mas real. Reduzido só no tablet, onde o espaço é mais
   apertado; desktop (≥1280) e mobile (≤768) ficam exatamente iguais. */
@media (min-width: 769px) and (max-width: 1279px) {
  .hero-btn { padding: 1.05em 7em; gap: .35em; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .contact__wrapper { gap: var(--space-lg); }
}

/* ── Tablet portrait (≤ 1024px) ───────────────────────── */
@media (max-width: 1024px) {
  .contact__wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .events__grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .about__cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* Footer horizontal → wrap confortável */
  .footer__inner {
    gap: var(--space-md);
  }
}

/* ── Mobile padrão (≤ 768px) ────────────────────────────── */
@media (max-width: 768px) {
  /* Desce a seta de scroll da Hero até o limite inferior da área bordô */
  .hero__scroll-hint { bottom: .6rem; }

  /* Fallback sem JS: garante o drawer mobile mesmo se o
     ResizeObserver de script.js não rodar. Mesmo efeito de
     .header.nav--compact, ver seção 6 (Header). */
  .nav        { display: none; }
  .hamburger  { display: flex; }
  .nav-mobile { display: block; }

  :root {
    --space-2xl: 3.5rem;
    --space-xl:  2rem;
    --space-lg:  1.75rem;
  }

  /* [FIX v149] Desliga o comportamento de "container" do
     .hero__frame (herdado da classe .container) — senão o
     max-width:92% do .hero__content abaixo calcularia em cima da
     largura do frame (já capada) em vez da .hero direto, encolhendo
     demais. Mobile continua idêntico ao que já era. */
  .hero__frame {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* Mobile: logo oculta, conteúdo centralizado. Volta a font-size
     absoluto (1rem) — os overrides abaixo (título, descrição etc.)
     já usam rem/vw própria, então isso é só clareza/segurança. */
  .hero__logo-deco { display: none; }

  .hero__content {
    font-size: 1rem;
    margin-inline: auto;
    max-width: 92%;
    padding-inline: 4vw;
    padding-block: var(--space-xl);
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  /* Casarão: reduz tamanho e opacidade no mobile */
  .hero::before {
    width:   clamp(240px, 100vw, 800px);
    opacity: .60;
    bottom:  -20%;
    right:   2%;
   
    filter:  brightness(1.2) contrast(.80) saturate(.5) blur(.5px);
  }

  /* Tipografia hero centralizada */
  .hero__title {
    font-size: clamp(1.9rem, 8vw, 3rem);
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  /* Linha dourada centralizada no mobile */
  .hero__title em::after { left: 50%; transform: translateX(-50%); }
  .hero__description {
    font-size: .95rem;
    max-width: 100%;
    text-align: center;
    margin-inline: auto;
  }

  /* Seção de cabeçalho */
  .section-header { margin-bottom: var(--space-lg); }
  .section-desc   { font-size: .97rem; }

  /* Cards sobre → coluna única em tela estreita */
  .about__cards {
    grid-template-columns: 1fr;
  }
  .about__quote { padding: var(--space-md); }

  /* Equipe → 2 colunas */
  .team__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  /* Eventos → coluna única */
  .events__grid {
    grid-template-columns: 1fr;
  }

  /* Contato → coluna única */
  .contact__wrapper { grid-template-columns: 1fr; }

  /* Footer → empilhado */
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  .footer__links { gap: .4rem 1rem; }

  /* Logo header menor */
  .header__logo-svg                { width: 60px; }
  .logo--red                       { width: 60px; }
  .header.scrolled .logo--gold     { width: 60px; }

  /* Botões hero: centralizados, full-width, quadrados */
  .hero__actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: .85rem;
  }
  .hero__actions .btn {
    width: 100%;
    max-width: 380px;        /* mais curto que a tela toda */
    justify-content: center;
    font-size: 1rem;
    /* Mais alto: padding vertical generoso */
    padding: 1.1em 1.8em;
    border-radius: 14px;
    min-height: 64px;        /* altura maior, como na imagem */
    display: flex;
    align-items: center;
    gap: .7em;
  }
  /* Ícone dourado no mobile */
  .hero__actions .hero-btn__icon {
    color: var(--clr-accent);
    font-size: 1.1em;
  }
}

/* ── Mobile pequeno (≤ 480px) ───────────────────────────── */
@media (max-width: 480px) {
  /* Casarão: mínimo em mobile pequeno */
  .hero::before {
    width:   clamp(200px, 120vw, 600px);   /* corrigido: era clamp(400px,48vw,280px) – min>max */
    opacity: .60;
    bottom:  -13.5%;
    right:   -6.4%;
    filter:  brightness(1.1) contrast(.75) saturate(.45) blur(.6px);
    
  }
  .hero__logo-deco {
    position: absolute;
    right: -8%;
    top: 55%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    animation: heroLogoIn .8s var(--ease) .2s both;
  }

  .hero__logo-deco-img {
    /* Escala proporcional via clamp – sem distorção; maior e mais baixa, como na referência */
    width: clamp(130px, 38vw, 200px);      /* reduz progressivamente em telas pequenas */
    height: auto;
    display: block;
    opacity: .40;                          /* reduzida para não competir com o texto */
    filter:
      drop-shadow(0 0 18px rgba(200,150,12,.10))
      drop-shadow(0 5px 14px rgba(0,0,0,.38));
    user-select: none;
  }
  
  .hero__content   {
    margin-inline: auto;
    max-width: 90%;
    padding-inline: 4vw;
    padding-block: var(--space-xl);
    text-align: center;
    align-items: center;
  }

  :root {
    --space-2xl: 2.5rem;
    --space-xl:  1.75rem;
    --space-lg:  1.25rem;
    --space-md:  1rem;
  }

  /* Previne overflow horizontal */
  body { overflow-x: hidden; }

  .container { width: 94vw; }

  /* [FIX] .hero__frame carrega a classe .container — sem isto, a
     regra acima (94vw) reaplica nele e desfaz a neutralização feita
     em ≤768px, voltando a encolher o conteúdo em dobro. */
  .hero__frame { width: 100%; max-width: none; margin-inline: 0; }

  /* Hero ainda mais compacto */
  .hero__title {
    font-size: clamp(1rem, 8.5vw, 3.2rem);
    line-height: 1.14;
    max-width: 96vw;
  }
  .hero__description {
    font-size: .85rem;
    max-width: 100%;
    text-align: center;
    margin-inline: auto;
    margin-bottom: var(--space-md);
  }
  .hero__eyebrow     { font-size: .75rem; }

  /* Equipe → coluna única */
  .team__grid {
    grid-template-columns: 1fr;
  }

  /* Cards de evento → padding menor */
  .event-card { padding: var(--space-sm); }

  /* Formulário de contato */
  .contact__form-cta { padding: var(--space-lg) var(--space-md); }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: .92rem; padding: .65em .85em; }

  /* Footer */
  .footer__social a { width: 36px; height: 36px; font-size: .9rem; }
  .footer__logo     { width: 48px; }

  /* Botão mínimo de toque: 44px */
  .btn { min-height: 44px; padding: .7em 1.4em; }
  .nav-mobile__link { padding: .9rem 5vw; min-height: 44px; }

  /* Botões da hero: centralizados, full-width, mais altos */
  .hero__actions {
    align-items: center;
    width: 100%;
  }
  .hero__actions .btn {
    width: 100%;
    max-width: 360px;
    font-size: .95rem;
    padding: 1em 1.5em;
    border-radius: 14px;
    min-height: 62px;        /* alto como na imagem */
    justify-content: center;
    display: flex;
    align-items: center;
    gap: .6em;
  }
}

/* ── Telas ultrawide (≥ 1440px) ─────────────────────────── */
@media (min-width: 1440px) {
  /* [FIX salto da logo] Removidas as regras que sobrescreviam a logo
     (clamp(400px,24vw,600px)) e o conteúdo aqui: elas usavam uma
     curva diferente da base, causando um salto brusco exatamente em
     1440px (a logo saltava de 480px para 400px ao alargar, ou o
     inverso ao estreitar — "aumentando" contra a direção esperada).
     Sem essa sobrescrita, --hero-scale (seção 7) satura em 480px a
     partir de 1280px e permanece constante — contínuo, sem saltos,
     e sem alterar o tamanho aprovado da versão desktop. */
}

/* ── Redução de movimento (acessibilidade) ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .shape { animation: none; }
  .hero__logo-deco { animation: none; }
}

/* ── 14. AOS customizações ──────────────────────────────── */
[data-aos] { backface-visibility: hidden; }