/* =========================================================================
   A&F 3.0 — Camada 11: REFINO PREMIUM da Home.
   Importada por último. Não altera 01–10; apenas refina por cima.
   Inclui: pattern de marca, raios mais arquitetônicos, footer enxuto,
   Representadas (pin horizontal) e Inaugurações redesenhadas.
   ========================================================================= */

/* =========================================================================
   1) PATTERN DE MARCA (SVG mascarado e tingível)
   O SVG entra como máscara: a cor vem do background-color (tinge em laranja
   no claro, branco no escuro). Opacidade baixa = textura sutil, nunca ruidosa.
   ========================================================================= */
/* Tom: fundo claro -> grafite suave; fundo escuro -> laranja quente. Sempre baixo. */
.aef-pattern{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:var(--color-graphite);
  -webkit-mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat;
          mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat;
  opacity:.045;
}
.aef-pattern--orange{background-color:var(--color-orange);opacity:.06}
.aef-pattern--ink{background-color:var(--color-graphite);opacity:.045}
.aef-pattern--soft{opacity:.03}

/* Seções claras que JÁ tinham ::before de grade: troca a grade pela textura A&F em grafite. */
.manifesto__panel::before,
.about-aef::before,
.method::before,
.solutions::before{
  background-image:none!important;
  background-color:var(--color-graphite);
  -webkit-mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat!important;
          mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat!important;
  opacity:.045!important;
}
/* Seção escura (CTA final): textura em laranja quente. */
.home-final::before{
  background-image:none!important;
  background-color:var(--color-orange);
  -webkit-mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat!important;
          mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat!important;
  opacity:.06!important;
}

/* Seções claras que NÃO tinham ::before: ganham a textura de marca (grafite). */
.arch::before,
.openings::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:var(--color-graphite);
  -webkit-mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat;
          mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat;
  opacity:.04;
}
.arch>.container,.openings>.container{position:relative;z-index:1}

/* Garante conteúdo acima do pattern. */
.reps>.container,.reps__cta,.reps-stage{position:relative;z-index:1}

/* Utilitários reutilizáveis de pattern (via ::before, pointer-events:none). */
.aef-pattern-light,.aef-pattern-dark,.aef-pattern-orange{position:relative}
.aef-pattern-light::before,.aef-pattern-dark::before,.aef-pattern-orange::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat;
          mask:url(../img/patterns/bg-pattern.svg) center/600px auto repeat;
}
.aef-pattern-light::before{background-color:var(--color-graphite);opacity:.045}
.aef-pattern-dark::before{background-color:#fff;opacity:.05}
.aef-pattern-orange::before{background-color:var(--color-orange);opacity:.06}

/* =========================================================================
   1b) PATTERN DE MARCA GLOBAL — em TODAS as seções de conteúdo (todas as páginas).
   Aplicado no componente-base .section, então vale para Home, Sobre, Serviços e
   páginas internas, Imobiliária, Imóvel, Representadas, Inaugurações, Contato, Galeria
   e o fallback de rota (404 -> Home). O conteúdo permanece ACIMA do pattern via
   .section>.container{z-index:1} (regra já existente no projeto).
   Heroes (.home-hero / .page-hero) NÃO são .section -> a imagem/vídeo do hero não é suja.
   Claro -> grafite sutil; escuro -> branco sutil. Opacidade baixa = textura premium, legível.
   Seletores específicos da Home (com !important) continuam prevalecendo sem mudança. */
:root{ --aef-pattern-url:url("../img/patterns/bg-pattern.svg"); }
.section{position:relative}
.section:not(.home-final)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:var(--color-graphite);
  -webkit-mask:var(--aef-pattern-url) center/600px auto repeat;
          mask:var(--aef-pattern-url) center/600px auto repeat;
  opacity:.04;
}
/* Seções escuras: pattern em branco (mais visível sobre fundo escuro).
   Exclui .home-final (CTA da Home), que mantém seu pattern laranja já definido. */
.section--dark:not(.home-final)::before,.section--kinetic:not(.home-final)::before{background-color:#fff;opacity:.05}
/* Reforço: conteúdo direto da seção sempre acima do pattern (cobre casos sem .container). */
.section>.container,.section>.container-wide{position:relative;z-index:1}

/* Classes utilitárias de fundo com o pattern de marca (para wrappers fora de .section, se preciso). */
.aef-pattern-bg{position:relative}
.aef-pattern-bg::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-color:var(--color-graphite);-webkit-mask:var(--aef-pattern-url) center/600px auto repeat;mask:var(--aef-pattern-url) center/600px auto repeat;opacity:.04}
.aef-pattern-bg--dark::before{background-color:#fff;opacity:.05}
.aef-pattern-bg--light::before{background-color:var(--color-graphite);opacity:.04}
.aef-pattern-bg>*{position:relative;z-index:1}

/* Header auto-hide: suaviza o transform (transição/timing premium já vêm dos layers 04/10). */
.site-header{will-change:transform}

/* Modal e lightbox SEMPRE acima do header (header é z-index:200). Evita o header fixo
   se sobrepor ao modal "Falar com a A&F" e ao lightbox da galeria. */
:root{ --z-modal:300; }

/* =========================================================================
   2) RAIOS GLOBAIS — mais arquitetônicos, menos "bolha".
   ========================================================================= */
.card{border-radius:var(--radius-md)!important}
.glass-card{border-radius:var(--radius-lg)}
.btn{border-radius:12px}
.icon-button{border-radius:12px}
.site-nav__dropdown{border-radius:16px}
.nav-mega__item{border-radius:9px}
.manifesto{border-radius:26px 26px 0 0}
.hero-segments__icon{border-radius:10px}
.manifesto-card__icon,.about-card__icon,.solution-card__icon{border-radius:11px}
.about-aef__visual,.arch__media{border-radius:var(--radius-xl)}
.opening-card__tag,.arch__media-tag{border-radius:8px}

@media (max-width:620px){
  .manifesto{border-radius:18px 18px 0 0}
}

/* =========================================================================
   3) BOTÕES — mais elegantes e definidos.
   ========================================================================= */
.btn{letter-spacing:.005em}
.btn--secondary,.btn--ghost{
  background:rgba(255,255,255,.7);
  border-color:rgba(16,17,20,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn--secondary:hover,.btn--ghost:hover{
  background:#fff;border-color:rgba(245,154,35,.55);
  box-shadow:0 16px 38px rgba(5,6,7,.12);
}
.home-hero .actions .btn,.home-final .actions .btn{border-radius:12px}

/* Brilho metálico em varredura no hover (premium, sutil). Streak diagonal acima
   do fundo, translúcido — não atrapalha o texto. Reduced-motion desliga abaixo. */
.btn{overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-135%) skewX(-14deg);
  transition:transform .8s var(--aef-ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(135%) skewX(-14deg)}
/* Botões claros: brilho âmbar (o branco não apareceria sobre fundo claro). */
.btn--secondary::after,.btn--ghost::after{background:linear-gradient(115deg,transparent 40%,rgba(245,154,35,.30) 50%,transparent 60%)}

/* =========================================================================
   4) FOOTER — mais enxuto, denso e premium.
   ========================================================================= */
.site-footer{padding:54px 0 24px}
.site-footer::before{opacity:.18}
.site-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:26px 30px}
.site-footer__brand{max-width:300px}
.site-footer__brand .brand-logo__mark{height:40px}
.site-footer__lead{margin:14px 0 18px;font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.66)}
.site-footer__brand .btn{min-height:44px}
.site-footer__col strong{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aef-orange-soft);margin-bottom:11px}
.site-footer__col a,.site-footer__col span{font-size:.9rem;line-height:1.4}
.site-footer a{margin:.16rem 0}
.site-footer__col span{margin:.16rem 0;color:rgba(255,255,255,.66)}
.site-footer__bottom{margin-top:34px;padding-top:18px;font-size:.82rem;color:rgba(255,255,255,.5)}

@media (max-width:980px){
  .site-footer{padding:46px 0 22px}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:24px 26px}
  .site-footer__brand{grid-column:1 / -1;max-width:none}
}
@media (max-width:620px){
  .site-footer__grid{grid-template-columns:1fr 1fr}
}

/* =========================================================================
   5) REPRESENTADAS — pin horizontal + cards premium (Home e página /representadas).
   Card: imagem desfocada + degradê + logo SVG branca (sem placa) + chip + nome
   + descrição curta + CTAs (Falar com a A&F / Site oficial).
   ========================================================================= */
.reps{padding-bottom:clamp(48px,6vw,90px)}
/* Grade premium de 2 colunas na Home — seção vertical normal (sem pin/sticky/horizontal). */
.reps-grid--home{list-style:none;margin:clamp(26px,3.2vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.reps-grid--home .reps-grid__item{margin:0;display:flex}
.reps-grid--home .rep-card{width:100%;aspect-ratio:2 / 1}
/* Mural de logos (Home, compact): imagem desfocada + escurecimento UNIFORME + chip + logo.
   Overlay liso (sem degradê) -> não cria faixa escura na base do card. */
.rep-card--compact{display:block}
.rep-card--compact .rep-card__overlay{background:rgba(8,9,12,.40)}
.rep-card--compact:hover .rep-card__overlay{background:rgba(8,9,12,.30)}
.rep-card--compact .rep-card__logo{inset:0;padding:6% 4%}
.rep-card--compact .rep-card__logo img{max-width:98%;max-height:92%}
@media (max-width:980px){.reps-grid--home{grid-template-columns:repeat(2,1fr)}}

/* =========================================================================
   CARROSSEL DE REPRESENTADAS (Home) — 2 cards/desktop com setas; 1/mobile com swipe.
   ========================================================================= */
.reps-carousel{position:relative;z-index:1;margin:clamp(26px,3vw,42px) 0 0}
.reps-carousel__viewport{overflow:hidden}
.reps-carousel__track{display:flex;gap:clamp(18px,2vw,28px);list-style:none;margin:0;padding:0;transition:transform .62s var(--aef-ease);will-change:transform}
.reps-carousel__slide{flex:0 0 calc(50% - clamp(9px,1vw,14px));margin:0;display:flex}
.reps-carousel__slide .rep-card{width:100%}
.reps-carousel__controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(18px,2.2vw,28px)}
.reps-carousel__arrow{display:inline-grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:background .3s var(--aef-ease),border-color .3s var(--aef-ease),transform .3s var(--aef-ease),opacity .3s var(--aef-ease)}
.reps-carousel__arrow .icon{transition:transform .3s var(--aef-ease)}
.reps-carousel__arrow--prev .icon{transform:rotate(180deg)}
.reps-carousel__arrow:hover:not(:disabled){background:rgba(245,154,35,.18);border-color:rgba(245,154,35,.55);transform:translateY(-2px)}
.reps-carousel__arrow:disabled{opacity:.3;cursor:default}
.reps-carousel__arrow:focus-visible{outline:3px solid var(--color-orange);outline-offset:3px}
.reps-carousel__status{min-width:52px;text-align:center;font-family:var(--font-title);font-weight:800;font-size:.78rem;letter-spacing:.12em;color:rgba(255,255,255,.82)}

/* Card premium DENTRO do carrossel (Home) — ESCOPADO em .reps-carousel: NÃO afeta /representadas.
   Regressão corrigida: a logo renderizava minúscula (~25% do card) porque os SVGs não
   escalavam para cima e a caixa do grid colapsava em altura.
   Aqui a caixa da logo ganha ALTURA DEFINIDA via inset e o <img> é posicionado absoluto
   (inset:0) preenchendo a caixa; object-fit:contain respeita o viewBox do SVG (sem distorcer)
   -> logo branca GRANDE e uniforme na área superior. Descrição resumida em 2 linhas. */
.reps-carousel .rep-card__logo{inset:10% 12% 42%;padding:0}
.reps-carousel .rep-card__logo img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
.reps-carousel .rep-card__desc{-webkit-line-clamp:2}

/* ---- Card da Home (carrossel): IMAGEM cobrindo 100% + logo branca + botões no hover ----
   Sem nome/descrição/chip e SEM faixa/bloco preto: o contraste vem de um overlay sobre a
   IMAGEM INTEIRA. Escopado em .rep-card--home-visual -> não afeta /representadas. */
.reps-carousel .rep-card--home-visual{margin:0}
/* Imagem ocupa o card inteiro. Corrige a altura fixa (170px) herdada do layer 10,
   que deixava a metade inferior preta (fundo do card aparecendo). */
.reps-carousel .rep-card--home-visual .rep-card__media{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.reps-carousel .rep-card--home-visual .rep-card__media img{width:100%;height:100%;object-fit:cover}
/* Overlay ÚNICO sobre a imagem inteira (gradiente sutil, sem barra preta separada). */
.reps-carousel .rep-card--home-visual .rep-card__overlay{background:linear-gradient(180deg,rgba(8,9,12,.20) 0%,rgba(8,9,12,.34) 55%,rgba(8,9,12,.50) 100%)}
.reps-carousel .rep-card--home-visual:hover .rep-card__overlay{background:linear-gradient(180deg,rgba(245,154,35,.10) 0%,rgba(8,9,12,.34) 55%,rgba(8,9,12,.52) 100%)}
/* Logo branca centralizada (deixa espaço para os botões embaixo), sem placa/fundo. */
.reps-carousel .rep-card--home-visual .rep-card__logo{inset:12% 14% 30%}
.reps-carousel .rep-card--home-visual .rep-card__logo img{background:transparent}
/* Botões: absolutos no rodapé, aparecem no HOVER (desktop) ou no foco por teclado. */
.reps-carousel .rep-card--home-visual .rep-card__actions{position:absolute;z-index:4;left:clamp(16px,1.8vw,22px);right:clamp(16px,1.8vw,22px);bottom:clamp(16px,1.8vw,22px);display:grid;grid-template-columns:1fr 1fr;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .3s var(--aef-ease),transform .3s var(--aef-ease)}
.reps-carousel .rep-card--home-visual:hover .rep-card__actions,
.reps-carousel .rep-card--home-visual:focus-within .rep-card__actions{opacity:1;transform:none}
.reps-carousel .rep-card--home-visual .rep-card__actions .btn{min-height:42px;padding:0 10px;font-size:.78rem;border-radius:10px;font-weight:800}
.reps-carousel .rep-card--home-visual .rep-card__actions .btn--ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.30);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reps-carousel .rep-card--home-visual .rep-card__actions .btn--ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(245,154,35,.6)}
/* Mobile: botões sempre visíveis e empilhados (largura total), logo um pouco mais alta. */
@media (max-width:760px){
  .reps-carousel .rep-card--home-visual .rep-card__logo{inset:10% 14% 40%}
  .reps-carousel .rep-card--home-visual .rep-card__actions{opacity:1;transform:none;grid-template-columns:1fr;gap:8px;left:16px;right:16px;bottom:16px}
}

@media (max-width:759px){
  .reps-carousel.is-scroll .reps-carousel__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .reps-carousel.is-scroll .reps-carousel__viewport::-webkit-scrollbar{display:none}
  .reps-carousel.is-scroll .reps-carousel__track{transform:none!important;transition:none}
  .reps-carousel__slide{flex:0 0 86%;scroll-snap-align:center}
  .reps-carousel__arrow{width:42px;height:42px}

  /* ------------------------------------------------------------------
     REFINO MOBILE-ONLY do card do carrossel (Home). ESCOPADO em .reps-carousel
     -> NÃO afeta desktop (>=760px) nem a página /representadas.
     Motivo: no card baixo (3/2) o rodapé ocupava ~74% e a logo invadia o texto.
     ------------------------------------------------------------------ */
  /* 1. remove o chip de categoria no mobile (menos poluição) */
  .reps-carousel .rep-card__chip{display:none}
  /* card mais alto (retrato) = mais respiro para logo + texto, sem sobreposição */
  .reps-carousel .rep-card{aspect-ratio:4 / 5}
  /* 2. logo um pouco mais acima e com mais ar (reserva o rodapé embaixo) */
  .reps-carousel .rep-card__logo{inset:8% 13% 46%}
  /* 3. rodapé compacto e legível, sem brigar com a logo */
  .reps-carousel .rep-card__foot{padding:14px 16px 16px;gap:5px}
  .reps-carousel .rep-card__name{font-size:1.02rem}
}
@media (prefers-reduced-motion:reduce){
  .reps-carousel__track{transition:none}
}

/* ---- Card (compartilhado Home + grid da página) ---- */
.rep-card{
  position:relative;display:block;width:100%;aspect-ratio:3 / 2;
  border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  background:#0b0c0f;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 60px rgba(5,6,7,.28);
  transition:transform .4s var(--aef-ease),box-shadow .4s var(--aef-ease);
}
.rep-card__media{position:absolute;inset:0;display:block;background:#0b0c0f}
.rep-card__media img{width:100%;height:100%;object-fit:cover;background:#0b0c0f;filter:blur(3px) saturate(.96) brightness(.66) contrast(1.04);transform:scale(1.12);transition:transform 1s var(--aef-ease),filter 1s var(--aef-ease)}
/* Overlay ÚNICO e uniforme (escurece o conjunto para leitura) — SEM tarja/bloco preto
   embaixo. A imagem permanece presente em todo o card; logo/texto leem por cima. */
.rep-card__overlay{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 82% at 50% 30%,rgba(8,9,12,.08),rgba(8,9,12,.40) 72%,rgba(8,9,12,.58)),linear-gradient(180deg,rgba(8,9,12,.20) 0%,rgba(8,9,12,.14) 42%,rgba(8,9,12,.34) 72%,rgba(8,9,12,.56) 100%);transition:background .55s var(--aef-ease)}
/* chip de categoria (glass leve) */
.rep-card__chip{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;padding:7px 12px;border-radius:8px;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(10,12,16,.40);border:1px solid rgba(255,255,255,.20);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
/* logo branca GRANDE (~60% da área visual), sem placa */
.rep-card__logo{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:13% 12% 27%}
.rep-card__logo img{max-width:64%;max-height:48%;width:auto;height:auto;object-fit:contain;background:transparent;filter:drop-shadow(0 10px 30px rgba(0,0,0,.62));transition:transform .6s var(--aef-ease)}
.rep-card__logo-fallback{font-family:var(--font-title);font-weight:800;font-size:1.7rem;color:#fff;text-align:center;text-shadow:0 6px 22px rgba(0,0,0,.55)}
/* rodapé integrado à imagem (sobre o degradê, sem painel/bloco preto) */
/* IMPORTANTE: reseta o background herdado de 10 (.rep-card__foot tinha gradiente
   #101114→#0a0b0e). Sem este reset, a "tarja preta" voltava a ser pintada aqui. */
.rep-card__foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;gap:5px;padding:16px 18px 18px;background:transparent!important;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.rep-card__name{margin:0;font-family:var(--font-title);font-weight:700;font-size:1.06rem;color:#fff;line-height:1.12}
.rep-card__desc{margin:0;color:#fff;font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rep-card__ctas{display:flex;gap:8px;margin-top:8px}
.rep-card__cta.btn{flex:1;min-height:40px;padding:0 12px;font-size:.8rem;border-radius:10px;font-weight:800}
.rep-card__cta.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rep-card__cta.btn--ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(245,154,35,.6);color:#fff}
/* moldura de hover */
.rep-card::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;border:1px solid transparent;transition:border-color .4s var(--aef-ease);pointer-events:none}
.rep-card:hover,.rep-card:focus-within{translate:none;transform:translateY(-6px);box-shadow:0 44px 90px rgba(5,6,7,.40)}
.rep-card:hover::after,.rep-card:focus-within::after{border-color:rgba(245,154,35,.6)}
.rep-card:hover .rep-card__overlay,.rep-card:focus-within .rep-card__overlay{background:radial-gradient(120% 82% at 50% 28%,rgba(245,154,35,.12),rgba(8,9,12,.34) 72%,rgba(8,9,12,.52)),linear-gradient(180deg,rgba(8,9,12,.16) 0%,rgba(8,9,12,.10) 44%,rgba(8,9,12,.36) 100%)}
.rep-card:hover .rep-card__media img,.rep-card:focus-within .rep-card__media img{transform:scale(1.17);filter:blur(1.5px) saturate(1.04) brightness(.74) contrast(1.05)}
.rep-card:hover .rep-card__logo img,.rep-card:focus-within .rep-card__logo img{transform:translateY(-4px) scale(1.05)}

/* CTAs: revelados no hover/foco no desktop; sempre visíveis no toque/mobile. */
@media (hover:hover) and (min-width:981px){
  .rep-card__ctas{opacity:0;transform:translateY(8px);transition:opacity .4s var(--aef-ease),transform .4s var(--aef-ease)}
  .rep-card:hover .rep-card__ctas,.rep-card:focus-within .rep-card__ctas{opacity:1;transform:none}
}

/* (indicador de progresso / pin removidos: a seção é uma grade vertical normal) */

/* ---- Grid premium da página /representadas (mesmo card, sem pin) ---- */
.page-representadas .reps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:clamp(16px,1.8vw,24px)}
.page-representadas .rep-card{aspect-ratio:3 / 2}

/* ---- Responsivo da grade: tablet mantém 2 colunas; mobile vira 1 coluna ---- */
@media (max-width:620px){
  .page-representadas .reps-grid{grid-template-columns:1fr}
}

/* =========================================================================
   6) INAUGURAÇÕES — cartões editoriais mais limpos.
   ========================================================================= */
.opening-card{border:1px solid var(--color-line);box-shadow:0 14px 36px rgba(5,6,7,.07)}
.opening-card__media{height:264px}
.opening-card__tag{
  background:rgba(8,10,14,.62);color:#fff;border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 22px rgba(5,6,7,.28);font-weight:700;letter-spacing:.05em;
}
.opening-card__body{padding:20px 22px 22px;gap:10px}
.opening-card__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.opening-card__place{font-weight:700;font-size:.84rem;color:var(--color-orange-dark);display:inline-flex;align-items:center}
.opening-card__go{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(245,154,35,.12);border:1px solid rgba(245,154,35,.3);color:var(--color-orange-dark);transition:transform .35s var(--aef-ease),background .35s var(--aef-ease)}
.opening-card:hover .opening-card__go{transform:translateX(4px);background:rgba(245,154,35,.22)}
.opening-card--cta{border-radius:var(--radius-lg)}
.opening-cta__arrow{border-radius:12px}

@media (max-width:620px){
  .opening-card__media{height:230px}
}

/* =========================================================================
   7) POLISH GERAL — superfícies e microinterações premium.
   ========================================================================= */
/* Cabeçalho: hairline laranja sutil quando rolado. */
.site-header.is-scrolled{box-shadow:0 14px 40px rgba(5,6,7,.30),0 1px 0 rgba(245,154,35,.22)}

/* Cards de método/solução/about/manifesto: borda e profundidade um pouco mais
   definidas (menos "soft"), mantendo o claro premium. */
.method-step,.solution-card,.about-card,.manifesto-card{border-color:rgba(16,17,20,.10)}

/* Eixo técnico do Método: leve realce no scroll-active. */
.method.is-scroll-active .method-step::before{opacity:1}

/* Imagens editoriais: realce sutil de entrada (combina com o reveal reversível). */
.about-aef__visual,.arch__media{transition:box-shadow .6s var(--aef-ease)}
.about-aef__visual:hover,.arch__media:hover{box-shadow:0 40px 100px rgba(5,6,7,.22)}

/* ---- Variedade de reveal (direções curadas, timing premium 0.95–1.05s) ---- */
.has-js [data-reveal="fade-left"]{opacity:0;transform:translateX(-34px);filter:blur(6px);transition:opacity .95s var(--aef-ease),transform .95s var(--aef-ease),filter .95s var(--aef-ease)}
.has-js [data-reveal="fade-right"]{opacity:0;transform:translateX(34px);filter:blur(6px);transition:opacity .95s var(--aef-ease),transform .95s var(--aef-ease),filter .95s var(--aef-ease)}
.has-js [data-reveal="fade-scale"]{opacity:0;transform:scale(.93);filter:blur(10px);transition:opacity 1.05s var(--aef-ease),transform 1.05s var(--aef-ease),filter 1.05s var(--aef-ease)}
.has-js [data-reveal="fade-left"].is-visible,.has-js [data-reveal="fade-right"].is-visible,.has-js [data-reveal="fade-scale"].is-visible{opacity:1;transform:none;filter:blur(0)}

/* ---- Hover global um pouco mais lento/premium (menos "nervoso") ---- */
.btn{transition:transform .34s var(--aef-ease),box-shadow .34s var(--aef-ease),background .34s var(--aef-ease),color .34s var(--aef-ease),border-color .34s var(--aef-ease)}

/* ---- Reps: pattern com motivo menor (mais tight, menos vazio) ---- */
.reps .aef-pattern{-webkit-mask-size:360px auto;mask-size:360px auto;opacity:.05}

/* ---- Mais presença nos cards do Método (toque de profundidade) ---- */
.method-step{box-shadow:0 16px 40px rgba(5,6,7,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.method-step:hover{box-shadow:0 30px 64px rgba(5,6,7,.15),inset 0 1px 0 #fff}

/* =========================================================================
   10) FLIP CARDS (opt-in [data-flip]) — mini-cards do Manifesto.
   Frente: ícone + título + texto (info completa, funciona sem JS).
   Verso: CTA "Falar com a A&F" por frente. Reduced-motion: crossfade, sem rotação 3D.
   ========================================================================= */
.flip-card{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;perspective:1400px;min-height:252px}
.flip-card__inner{position:relative;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.flip-card.is-flipped .flip-card__inner{transform:rotateY(180deg)}
.flip-card__face{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--radius-md);background:linear-gradient(180deg,#fff,#fbf6ee);border:1px solid var(--color-line);box-shadow:0 12px 30px rgba(5,6,7,.06),inset 0 1px 0 #fff;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-card__back{transform:rotateY(180deg);justify-content:center;background:linear-gradient(180deg,#fff,#f6efe5)}
.flip-card__toggle{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0 0;color:var(--color-orange-dark);font-family:var(--font-title);font-weight:800;font-size:.78rem;letter-spacing:.03em;cursor:pointer}
.flip-card__toggle .icon{transition:transform .3s var(--aef-ease)}
.flip-card__toggle:hover .icon{transform:translateX(3px)}
.flip-card__toggle--back{margin-top:6px;color:var(--color-muted);font-size:.72rem}
.flip-card__cta{min-height:42px;align-self:start}
@media (prefers-reduced-motion:reduce){
  .flip-card__inner{transition:none}
  .flip-card.is-flipped .flip-card__inner{transform:none}
  .flip-card__back{transform:none;opacity:0;transition:opacity .4s var(--aef-ease);pointer-events:none}
  .flip-card.is-flipped .flip-card__back{opacity:1;pointer-events:auto}
  .flip-card.is-flipped .flip-card__front{opacity:0;pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  .btn::after{display:none}
}

/* =========================================================================
   8) MOVIMENTO GUIADO PELO SCROLL sob prefers-reduced-motion.
   Animações de AUTOPLAY/loop continuam desligadas (respeito ao usuário); as guiadas
   pelo SCROLL do usuário (reveal + pin) permanecem, porém mais suaves (sem blur,
   distâncias menores). Vence os blocos reduce de 07/09/10 (camada mais tardia + especificidade).
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .has-js [data-reveal]{transition:opacity .9s var(--aef-ease),transform .9s var(--aef-ease)!important;filter:none!important}
  .has-js [data-reveal]:not(.is-visible){opacity:0!important}
  .has-js [data-reveal="fade-up"]:not(.is-visible){transform:translateY(22px)!important}
  .has-js [data-reveal="card"]:not(.is-visible){transform:translateY(24px) scale(.975)!important}
  .has-js [data-reveal="image"]:not(.is-visible){transform:translateY(24px)!important}
  .has-js [data-reveal="fade-left"]:not(.is-visible){transform:translateX(-24px)!important}
  .has-js [data-reveal="fade-right"]:not(.is-visible){transform:translateX(24px)!important}
  .has-js [data-reveal="fade-scale"]:not(.is-visible){transform:scale(.965)!important}
  .has-js [data-reveal].is-visible{opacity:1!important;transform:none!important}

  .has-js .animated-headline .word>span{transition:opacity .85s var(--aef-ease),transform .85s var(--aef-ease)!important;filter:none!important}
  .has-js .animated-headline:not(.is-visible) .word>span{opacity:0!important;transform:translateY(60%)!important}
  .has-js .animated-headline.is-visible .word>span{opacity:1!important;transform:none!important}

  .reps-rail__item{transition:transform .45s var(--aef-ease),opacity .45s var(--aef-ease)}
}

/* =========================================================================
   9) VIEW TRANSITIONS — navegação entre páginas (0.8s, progressive enhancement).
   Suportado (Chrome/Edge): fade + slide suave do root. Não suportado: navegação
   normal, sem quebra (a regra é simplesmente ignorada).
   ========================================================================= */
@view-transition{ navigation: auto; }
::view-transition-group(root){ animation-duration:.8s; animation-timing-function:cubic-bezier(.16,1,.3,1) }
::view-transition-old(root){ animation:aefVtOut .8s cubic-bezier(.16,1,.3,1) both }
::view-transition-new(root){ animation:aefVtIn .8s cubic-bezier(.16,1,.3,1) both }
@keyframes aefVtOut{ from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-14px)} }
@keyframes aefVtIn{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root){ animation:aefVtFadeOut .4s ease both }
  ::view-transition-new(root){ animation:aefVtFadeIn .4s ease both }
}
@keyframes aefVtFadeOut{ to{opacity:0} }
@keyframes aefVtFadeIn{ from{opacity:0} }

/* =========================================================================
   11) RITMO DE FUNDOS — alternância claro/escuro premium.
   Escuras: 02 Quem é a A&F, 04 Soluções, 06 Representadas (08 CTA já é escura).
   Claras: 01 Manifesto, 03 Método, 05 Arquitetura, 07 Inaugurações.
   Sequência: Hero(D) 01(L) 02(D) 03(L) 04(D) 05(L) 06(D) 07(L) 08(D).
   Escuras seguem premium (não pesadas); pattern de marca em tom quente; leitura preservada.
   ========================================================================= */
.about-aef,.solutions,.reps{
  background:radial-gradient(circle at 84% 6%,rgba(245,154,35,.12),transparent 30%),linear-gradient(180deg,#121317,#0a0b0e)!important;
  color:#fff;
}
.about-aef .eyebrow,.solutions .eyebrow,.reps .eyebrow{color:var(--aef-orange-soft)}
.about-aef__title,.solutions__title,.reps__title{color:#fff!important}
.about-aef__text p,.solutions__lead,.reps__lead{color:rgba(255,255,255,.74)!important}

/* pattern de marca nessas seções escuras -> laranja quente, baixa opacidade */
.about-aef::before,.solutions::before{background-color:var(--color-orange)!important;opacity:.05!important}

/* cards explicativos (Quem é a A&F) -> vidro escuro premium */
.about-card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.about-card__title{color:#fff}
.about-card__text{color:rgba(255,255,255,.66)}
.about-card__icon{background:rgba(245,154,35,.16);border-color:rgba(245,154,35,.34);color:var(--aef-orange-soft)}
.about-card__icon .icon{color:var(--aef-orange-soft)}
.about-card:hover{border-color:rgba(245,154,35,.5)!important}

/* cards de Soluções -> vidro escuro premium */
.solution-card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important}
.solution-card__num{color:rgba(245,154,35,.34)}
.solution-card__title{color:#fff}
.solution-card__text{color:rgba(255,255,255,.66)}
.solution-card__icon{background:rgba(245,154,35,.16);border-color:rgba(245,154,35,.34);color:var(--aef-orange-soft)}
.solution-card__icon .icon{color:var(--aef-orange-soft)}
.solution-card__arrow{color:var(--aef-orange-soft)}
.solution-card:hover{border-color:rgba(245,154,35,.5)!important}

/* Representadas: cards-imagem ganham contorno um pouco mais visível sobre o fundo escuro. */
.reps .rep-card{border-color:rgba(255,255,255,.14);box-shadow:0 22px 54px rgba(0,0,0,.45)}

/* =========================================================================
   12) MEGA MENU SERVIÇOS — mais compacto, premium e alinhado ao header.
   Mantém 4 colunas, reduz largura/padding/gap, refina tipografia e painel.
   Mesma especificidade do bloco da camada 10 e carregado depois -> vence.
   ========================================================================= */
.site-header .site-nav__item.nav-item--mega .site-nav__dropdown.nav-mega{
  width:min(640px,calc(100vw - 48px));
  grid-template-columns:repeat(4,minmax(138px,1fr));
  gap:2px 6px;
  padding:14px 14px 16px;
  border:1px solid rgba(245,154,35,.16);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-mega__group{gap:1px;align-content:start}
.nav-mega__title{margin:2px 0 6px;padding:0 10px;font-size:.6rem;letter-spacing:.14em;font-weight:700;color:var(--aef-orange-soft)}
/* especificidade > .site-nav__dropdown a (04-layout.css), que fixa padding/peso/tamanho. */
.site-nav__dropdown a.nav-mega__item{padding:7px 10px;font-size:.8rem;line-height:1.22;font-weight:600;border-radius:8px;color:rgba(255,255,255,.8)}
.site-nav__dropdown a.nav-mega__item:hover{transform:translateX(2px);color:#fff}

@media (max-width:1180px){
  .site-header .site-nav__item.nav-item--mega .site-nav__dropdown.nav-mega{
    width:min(460px,calc(100vw - 40px));
    grid-template-columns:repeat(2,minmax(140px,1fr));
    gap:2px 6px;
    padding:13px;
  }
}

/* =========================================================================
   13) LISTA DE EQUIPE SEM FOTOS (Sobre / Contato) — briefing §1/§13.
   ========================================================================= */
.team-list{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--color-line);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft)}
.team-list__item{display:flex;flex-direction:column;gap:3px;padding:15px 20px;background:#fff;transition:background .3s var(--aef-ease)}
.team-list__item:hover{background:var(--color-cream)}
.team-list__name{font-family:var(--font-title);font-weight:700;font-size:1rem;color:var(--color-graphite)}
.team-list__role{font-size:.85rem;line-height:1.4;color:var(--color-muted)}
@media (max-width:720px){.team-list{grid-template-columns:1fr}}

/* =========================================================================
   14) BOTÕES FLUTUANTES GLOBAIS — WhatsApp + Instagram (identidade A&F).
   Grafite + ícone branco + borda fina + hover laranja + sombra premium.
   z-index 48: acima do conteúdo (<=5) e ABAIXO de menu mobile (49)/modal (90),
   para nunca cobrir menu/modal. Posição: canto inferior direito, empilhados.
   ========================================================================= */
.floating-social{
  position:fixed;z-index:48;
  right:clamp(16px,2vw,28px);
  bottom:calc(clamp(18px,2.4vw,28px) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:12px;
  /* entrada suave no container (fade+slide) -> não conflita com o hover dos botões */
  opacity:0;transform:translateY(16px);
  animation:aefFloatIn .6s var(--aef-ease) .45s forwards;
}
.floating-social__btn{
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:#16181d;color:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 34px rgba(5,6,7,.42),0 2px 8px rgba(0,0,0,.30);
  transition:transform .35s var(--aef-ease),background .35s var(--aef-ease),
             border-color .35s var(--aef-ease),box-shadow .35s var(--aef-ease);
}
.floating-social__btn svg{display:block;width:26px;height:26px}
.floating-social__btn:hover,
.floating-social__btn:focus-visible{
  transform:translateY(-4px);
  background:#1c1f25;
  border-color:rgba(245,154,35,.7);
  box-shadow:0 22px 46px rgba(5,6,7,.50),0 0 0 4px rgba(245,154,35,.16);
  color:#fff;
}
.floating-social__btn:focus-visible{outline:3px solid var(--color-orange);outline-offset:3px}
.floating-social__btn:active{transform:translateY(-1px) scale(.97)}

@keyframes aefFloatIn{to{opacity:1;transform:none}}

/* Mobile: botões menores, ainda confortáveis (>=44px), acima da safe-area inferior. */
@media (max-width:600px){
  .floating-social{right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:10px}
  .floating-social__btn{width:48px;height:48px}
  .floating-social__btn svg{width:23px;height:23px}
}

/* Acessibilidade: respeita prefers-reduced-motion (sem entrada/lift, hover só de cor). */
@media (prefers-reduced-motion:reduce){
  .floating-social{animation:none;opacity:1;transform:none}
  .floating-social__btn{transition:background .2s,border-color .2s,box-shadow .2s}
  .floating-social__btn:hover,.floating-social__btn:focus-visible{transform:none}
}

/* =========================================================================
   15) PÁGINA /representadas — APRESENTAÇÃO INSTITUCIONAL (cards horizontais grandes).
   ESCOPADO em .page-representadas -> NÃO afeta a Home nem o carrossel (card-partner).
   Sem filtros, sem grid de 3 colunas, sem line-clamp, sem tarja preta grosseira.
   ========================================================================= */
.page-representadas .reps-feature-list{display:grid;gap:clamp(26px,3.4vw,52px);margin-top:clamp(28px,3.4vw,48px)}

.rep-feature{
  display:flex;align-items:stretch;width:100%;
  background:var(--color-offwhite,#fbfaf7);
  border:1px solid rgba(16,17,20,.12);
  border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(5,6,7,.10);
  transition:box-shadow .55s var(--aef-ease),border-color .55s var(--aef-ease),transform .55s var(--aef-ease);
}
.rep-feature:hover{box-shadow:0 32px 72px rgba(5,6,7,.16);border-color:rgba(245,154,35,.45)}
.rep-feature--reverse{flex-direction:row-reverse}

/* ---- Bloco visual: imagem forte + logo branca em destaque (sem desfoque exagerado) ---- */
.rep-feature__visual{position:relative;flex:0 0 40%;min-height:340px;background:#0c0d11;overflow:hidden;isolation:isolate}
.rep-feature__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;transform:scale(1.04);transition:transform 1s var(--aef-ease)}
.rep-feature:hover .rep-feature__img{transform:scale(1.09)}
.rep-feature__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,12,.30),rgba(8,9,12,.60))}
.rep-feature__logo{position:absolute;inset:15% 13%;z-index:2}
/* IMPORTANTE: a logo deve ficar DIRETA sobre a imagem do card — sem placa/bloco.
   Reseta o background herdado de 03-base.css (img{background:var(--color-sand)}),
   que aparecia como quadrado claro na moldura do object-fit:contain. */
.rep-feature__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent;filter:drop-shadow(0 12px 30px rgba(0,0,0,.62))}
.rep-feature__logo-fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-title);font-weight:800;font-size:1.7rem;color:#fff;text-align:center;text-shadow:0 6px 20px rgba(0,0,0,.5)}
/* detalhe laranja A&F na divisa do bloco visual */
.rep-feature__visual::after{content:"";position:absolute;inset:0;z-index:3;border-right:3px solid rgba(245,154,35,.85);pointer-events:none}
.rep-feature--reverse .rep-feature__visual::after{border-right:0;border-left:3px solid rgba(245,154,35,.85)}

/* ---- Corpo: texto COMPLETO (sem clamp), espaçamento generoso ---- */
.rep-feature__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:13px;padding:clamp(26px,3vw,46px)}
.rep-feature__cat{align-self:flex-start;font-family:var(--font-title);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-orange-dark,#b5651d);padding:5px 11px;border:1px solid rgba(245,154,35,.40);border-radius:6px;background:rgba(245,154,35,.07)}
.rep-feature__name{margin:0;font-family:var(--font-title);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.08;color:var(--color-graphite,#15171a)}
.rep-feature__text{display:flex;flex-direction:column;gap:11px}
.rep-feature__text p{margin:0;color:var(--color-muted,#4a4f55);font-size:.98rem;line-height:1.62}
.rep-feature__tagline{margin:4px 0 0;font-family:var(--font-title);font-weight:700;font-size:.92rem;color:var(--color-graphite,#15171a);padding:8px 0 8px 14px;border-left:3px solid var(--color-orange,#f59a23)}
.rep-feature__meta{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(16,17,20,.10)}
.rep-feature__atuacao{display:inline-flex;align-items:center;gap:10px}
.rep-feature__atuacao-label{font-family:var(--font-title);font-weight:800;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted,#6b7177)}
.rep-flag{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid rgba(16,17,20,.16);border-radius:7px;background:#fff;font-family:var(--font-title);font-weight:800;font-size:.74rem;letter-spacing:.04em;color:var(--color-graphite,#15171a)}
.rep-flag img{display:block;width:20px;height:14px;border-radius:2px}
.rep-feature__ctas{display:flex;flex-wrap:wrap;gap:10px}
.rep-feature__ctas .btn{min-height:44px}

/* ---- Mobile: empilhado (imagem em cima, conteúdo embaixo) ---- */
@media (max-width:859px){
  .rep-feature,.rep-feature--reverse{flex-direction:column}
  .rep-feature__visual{flex:none;width:100%;min-height:210px}
  .rep-feature__visual::after,.rep-feature--reverse .rep-feature__visual::after{border-right:0;border-left:0;border-bottom:3px solid rgba(245,154,35,.85)}
  .rep-feature__logo{inset:18% 16%}
  .rep-feature__meta{flex-direction:column;align-items:flex-start}
  .rep-feature__ctas{width:100%}
  .rep-feature__ctas .btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .rep-feature,.rep-feature__img{transition:none}
  .rep-feature:hover .rep-feature__img{transform:scale(1.04)}
}

/* Em telas estreitas, os CTAs do card de Representadas empilham (largura total),
   evitando aperto/corte do texto dos botões (vale para PT e ES). */
@media (max-width:520px){
  .rep-feature__ctas{flex-direction:column}
  .rep-feature__ctas .btn{flex:1 0 auto;width:100%}
}

/* =========================================================================
   16) SELETOR DE IDIOMA (PT / ES) — discreto, no header e no menu mobile.
   ========================================================================= */
.lang-switch{display:inline-flex;align-items:center;gap:6px;margin-right:14px;font-family:var(--font-title);font-weight:800;font-size:.72rem;letter-spacing:.06em;white-space:nowrap}
.lang-switch__opt{color:rgba(255,255,255,.62);text-decoration:none;padding:4px 6px;border-radius:6px;transition:color .25s var(--aef-ease),background .25s var(--aef-ease)}
.lang-switch__opt:hover{color:#fff}
.lang-switch__opt.is-active{color:var(--color-orange,#f59a23)}
.lang-switch__sep{color:rgba(255,255,255,.28)}
.lang-switch__opt:focus-visible{outline:2px solid var(--color-orange,#f59a23);outline-offset:2px}
/* No header em telas pequenas, o seletor do header some — usa-se o do menu mobile. */
@media (max-width:980px){ .site-header .lang-switch{display:none} }
/* Variante dentro do menu mobile (rótulos completos). */
.lang-switch--mobile{display:flex;margin:6px 0 2px;font-size:.92rem;gap:10px}
.lang-switch--mobile .lang-switch__opt{color:rgba(255,255,255,.78);padding:6px 4px}
.lang-switch--mobile .lang-switch__opt.is-active{color:var(--color-orange,#f59a23)}

/* =========================================================================
   17) HERO PADRÃO DAS PÁGINAS INTERNAS — imagem de fundo FULL-BLEED.
   Mesmo modelo visual em todas as páginas internas (Sobre, Serviços e
   serviços internos, Imobiliária, Imóvel, Representadas, Representada,
   Inaugurações, Inauguração, Contato, Galeria e os estados "não encontrado").
   A imagem cobre 100% da hero (cover/center) e um gradient preto da ESQUERDA
   p/ a DIREITA dá leitura ao título/copy (esquerda mais escura; direita deixa
   a foto aparecer). Substitui o formato antigo (fundo borrado + card lateral).
   A imagem vem de --hero-image (definida em app/components/page-hero.php).
   A Home (.home-hero, vídeo) e o conteúdo abaixo da hero NÃO são afetados.
   ========================================================================= */
.page-hero{
  min-height:82vh;                                   /* altura forte (~70–90vh no desktop) */
  padding:clamp(112px,15vh,168px) 0 clamp(56px,9vh,92px)!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.72) 38%,
      rgba(0,0,0,.36) 68%,
      rgba(0,0,0,.58) 100%),
    var(--hero-image,linear-gradient(120deg,#0c0d0f,#15171a))
    center/cover no-repeat!important;
}
/* Remove a imagem borrada (::before) e o overlay antigo (::after) do layer 09. */
.page-hero::before,.page-hero::after{display:none!important}
/* Grade técnica sutil só na faixa esquerda (sob o texto); some à direita p/ não sujar a foto. */
.page-hero .page-hero__ambient{opacity:.22;-webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 58%);mask-image:linear-gradient(90deg,#000 0%,transparent 58%)}
/* Texto em coluna única, alinhado à esquerda (sem card de imagem ao lado). */
.page-hero .page-hero__inner{grid-template-columns:1fr!important;gap:0}
.page-hero .page-hero__copy{max-width:760px}
/* Headline da hero interna um pouco mais contida que a da Home (que segue gigante),
   para o conteúdo caber na faixa de altura forte (~70–90vh) e manter leitura premium. */
.page-hero h1{font-size:clamp(2.4rem,5vw,4.4rem)}
/* Segurança: caso algum markup antigo ainda traga o card lateral, ele fica oculto. */
.page-hero .page-hero__media{display:none!important}

@media (max-width:760px){
  .page-hero{min-height:64vh;padding:clamp(104px,16vh,138px) 0 56px!important}
  .page-hero .page-hero__copy{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .page-hero .page-hero__ambient{animation:none}
}

/* =========================================================================
   18) FOOTER GLOBAL — layout REBALANCEADO (3 colunas conectadas, premium).
   Container central (~1200px) compartilhado pelo grid e pela barra inferior,
   garantindo alinhamento. Grid 1.2fr/1fr/1fr (marca levemente mais larga),
   gap contido p/ as colunas parecerem conectadas, todas alinhadas pelo topo.
   Estas regras vêm por último na cascata → substituem o layout antigo de 5
   colunas (.site-footer__grid/.site-footer__col, fora do markup atual).
   Fundo grafite (layer 04) + pattern A&F sutil + detalhes laranja.
   ========================================================================= */
.site-footer{padding:clamp(44px,5vw,60px) 0 24px;border-top:1px solid rgba(245,154,35,.22)}
/* Pattern A&F sutil (substitui a grade quadrada antiga do ::before). */
.site-footer::before{
  background:none;background-color:rgba(255,255,255,.04);
  -webkit-mask:var(--aef-pattern-url) center/440px auto repeat;
          mask:var(--aef-pattern-url) center/440px auto repeat;
  opacity:1
}
/* Container central — mesma largura/centralização p/ o grid e a barra inferior. */
.site-footer__container{position:relative;width:min(1200px,calc(100% - 48px));margin-inline:auto}
/* Grid de 3 colunas: marca levemente mais larga; gap contido (colunas conectadas). */
.site-footer__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:clamp(40px,4.5vw,60px);
  align-items:start
}
/* Coluna 1 — Marca (empilha logo / frase / CTA, alinhados à esquerda).
   max-width:none anula uma regra legada (.site-footer__brand{max-width:300px}) para
   a coluna preencher a sua faixa do grid → gaps uniformes entre colunas. O comprimento
   da linha do texto é controlado pelo tagline (max-width em ch). */
.site-footer__brand{display:flex;flex-direction:column;align-items:flex-start;max-width:none}
.site-footer__brand .brand-logo__mark{height:42px}
/* Mantém o subtítulo "Enlaces Comerciais" visível no footer também no mobile
   (o header continua escondendo o seu por questão de espaço — não é alterado). */
.site-footer .brand-logo__subtitle,.site-footer .brand-logo__divider{display:inline-block}
.site-footer__tagline{margin:16px 0 22px;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.62);max-width:34ch}
.site-footer__cta{min-height:44px;width:auto}
/* Colunas 2 e 3 — rótulo + listas, alinhadas pelo topo com a marca */
.site-footer__heading{font-family:var(--font-title);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--aef-orange-soft,#ffbd63);margin:0 0 18px}
.site-footer__nav ul,.site-footer__contact ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.site-footer__nav a,.site-footer__contact a,.site-footer__contact span{display:inline-block;margin:0;color:rgba(255,255,255,.74);font-size:.92rem;line-height:1.4;text-decoration:none;transition:color .2s var(--aef-ease)}
.site-footer__nav a:hover,.site-footer__contact a:hover{color:#fff}
.site-footer__nav a:focus-visible,.site-footer__contact a:focus-visible{outline:2px solid var(--color-orange,#f59a23);outline-offset:3px;border-radius:3px}
.site-footer__contact{font-style:normal}
.site-footer__contact span{color:rgba(255,255,255,.58)}
/* Barra inferior — alinhada ao container; copyright à esquerda, crédito à direita. */
.site-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,3.4vw,44px);padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:rgba(255,255,255,.5)}

/* ---- Tablet: marca ocupa a 1ª linha inteira; navegação + contato lado a lado ---- */
@media (max-width:900px){
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:34px 48px}
  .site-footer__brand{grid-column:1 / -1;max-width:560px}
}
/* ---- Mobile: pilha vertical limpa (marca, navegação, contato) ---- */
@media (max-width:600px){
  .site-footer__container{width:min(1200px,calc(100% - 36px))}
  .site-footer__grid{grid-template-columns:1fr;gap:30px}
  .site-footer__brand{max-width:none}
  .site-footer__cta{width:100%}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;gap:6px}
}