/* =================================================================
   Carvalho // Trois Advogados — one-pager institucional
   Design system: identidade-visual/design-system.json (v1.1)
   Tema escuro (contexto premium natural da marca)
   ================================================================= */

:root{
  /* cores */
  --navy:#344052; --navy-bg:#222C3A; --surface:#28323F; --surface-2:#2C3746;
  --raised:#3C4B5F; --border:#46566B; --border-subtle:#38465A;
  --text:#EDEFE1; --text-2:#B7BFB4; --muted:#8593A0;
  --steel:#89B4C4; --steel-hover:#A3C6D2; --steel-deep:#2F5D6E;
  --sage:#D3D8C3; --creme:#EDEFE1; --on-accent:#1E2733;

  /* fontes */
  --font-display:"Darker Grotesque","Arial Narrow",sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,sans-serif;

  /* tipografia fluida */
  --fs-hero:clamp(3rem,6.7vw,6rem);
  --fs-h2:clamp(2.1rem,4vw,3.2rem);
  --fs-h3:clamp(1.5rem,2.4vw,1.85rem);
  --fs-lead:clamp(1.08rem,1.5vw,1.3rem);

  /* ritmo */
  --container:1180px;
  --pad-section:clamp(4.5rem,9vw,8rem);
  --radius:4px; --radius-lg:10px;
  --ease:cubic-bezier(0.2,0,0,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);

  /* textura // estática (aço sobre escuro) */
  --tx-steel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30'%3E%3Cg stroke='%2389B4C4' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='6' y1='23' x2='12.5' y2='8'/%3E%3Cline x1='11' y1='23' x2='17.5' y2='8'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  background:var(--navy-bg);color:var(--text);
  font-family:var(--font-body);font-size:1rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
strong{font-weight:700;color:var(--text)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:2px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--steel);color:var(--on-accent);
  padding:.7em 1.2em;border-radius:0 0 var(--radius) 0;font-weight:600}
.skip:focus{left:0}

/* ---------- elementos de marca ---------- */
.eyebrow{
  font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--steel);
}
.eyebrow .sep{margin-right:.15em}
.sep{color:var(--steel);font-weight:800;font-style:normal;display:inline-block;
  transform:skewX(-12deg);letter-spacing:-.06em}

.section{padding:var(--pad-section) 0;position:relative}
.section__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);
  line-height:1.03;letter-spacing:-.01em;margin-top:.5rem}
.section__intro{color:var(--text-2);font-size:var(--fs-lead);margin-top:1rem;max-width:42rem}
.lead{font-size:var(--fs-lead);color:var(--text);line-height:1.55}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;letter-spacing:.02em;
  padding:.9em 1.6em;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s;white-space:nowrap}
.btn--accent{background:var(--steel);color:var(--on-accent);border-color:var(--steel)}
.btn--accent:hover{background:var(--steel-hover);border-color:var(--steel-hover);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--steel);color:var(--steel)}

/* =================================================================
   NAV
   ================================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(27,35,48,.55);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.scrolled{background:rgba(27,35,48,.92);border-bottom-color:var(--border-subtle)}
.nav__inner{display:flex;align-items:center;gap:1.5rem;height:76px}
.nav__brand{display:flex;align-items:center;flex-shrink:0}
.nav__brand img{height:38px;width:auto}
.nav__menu{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav__menu>a:not(.btn){font-size:.92rem;font-weight:500;color:var(--text-2);
  position:relative;padding:.3em 0;transition:color .2s}
.nav__menu>a:not(.btn):hover{color:var(--text)}
.nav__menu>a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;
  background:var(--steel);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__menu>a:not(.btn):hover::after{transform:scaleX(1)}
.nav__cta{margin-left:.5rem;padding:.65em 1.25em}
.nav__toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;
  align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);
  border-radius:var(--radius);cursor:pointer;margin-left:auto}
.nav__toggle span{display:block;width:20px;height:2px;background:var(--text);transition:.25s var(--ease)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- seletor de idioma ----------
   Fora de .nav__menu de propósito: no celular o menu colapsa e o seletor
   precisa continuar na barra, senão some justamente pra quem procura por ele. */
.lang{display:flex;align-items:center;gap:.1rem;flex-shrink:0;
  border:1px solid var(--border-subtle);border-radius:var(--radius);padding:.2rem}
/* min-height 28px, não o que o texto pedir: com padding só, o alvo saía com
   19px de altura e as três opções ficam encostadas, abaixo do mínimo de
   24x24 do WCAG 2.5.8. No celular isso é um alvo de toque ruim. */
.lang__opt{display:inline-flex;align-items:center;justify-content:center;gap:.42em;
  min-height:28px;padding:.3em .55em;border-radius:2px;
  font-size:.76rem;font-weight:700;letter-spacing:.07em;color:var(--muted);
  transition:color .2s,background .2s}
.lang__opt:hover{color:var(--text);background:rgba(137,180,196,.1)}
.lang__opt.is-active{color:var(--text);background:rgba(137,180,196,.16)}
.lang__flag{width:18px;height:12px;display:block;flex-shrink:0;border-radius:1px;
  box-shadow:0 0 0 1px rgba(237,239,225,.18);transition:filter .2s}
/* a bandeira do idioma atual fica cheia, as outras recuam: é o que faz o
   "você está aqui" ser lido de relance, sem depender só do fundo */
.lang__opt:not(.is-active) .lang__flag{filter:saturate(.5) opacity(.75)}
.lang__opt:hover .lang__flag{filter:none}
.lang__code{line-height:1}

/* =================================================================
   HERO
   ================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--navy-bg);overflow:hidden}
.hero__texture{position:absolute;left:0;top:0;bottom:0;width:62%;height:100%;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 16%,transparent 58%);
  mask-image:linear-gradient(to right,#000 0%,#000 16%,transparent 58%)}
.hero__media{position:absolute;top:0;right:0;bottom:0;width:52%;overflow:hidden;background:#1b1712}
.hero__media>img:first-child{width:100%;height:100%;object-fit:cover;object-position:43% 16%}
.hero__media-veil{position:absolute;inset:0;pointer-events:none;
  /* Faixa de mistura da borda esquerda em PIXELS, não em %. Em porcentagem ela
     cresce junto com a tela e volta a cair sobre o rosto de quem está na ponta
     esquerda do grupo, que é justamente onde a foto começa. */
  --faixa:215px;
  background:
    linear-gradient(to right,var(--navy-bg) 0,
      rgba(34,44,58,.85) calc(var(--faixa) * .11),
      rgba(34,44,58,.45) calc(var(--faixa) * .36),
      rgba(34,44,58,.12) calc(var(--faixa) * .7),
      rgba(34,44,58,0) var(--faixa)),
    radial-gradient(120% 105% at 78% 38%,transparent 56%,rgba(18,25,35,.34) 100%),
    linear-gradient(to top,rgba(18,25,35,.42),rgba(34,44,58,0) 38%),
    linear-gradient(rgba(40,52,68,.14),rgba(40,52,68,.14))}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__content{max-width:clamp(20rem,40vw,33rem);
  padding:clamp(7rem,13vh,9rem) 0 clamp(3rem,7vh,4.5rem)}
.hero__claim{font-family:var(--font-display);font-weight:600;font-size:var(--fs-hero);
  line-height:.96;letter-spacing:-.015em;margin:1.4rem 0 1.6rem}
.hero__claim em{font-style:normal;color:var(--steel)}
.hero__lead{color:var(--text-2);font-size:var(--fs-lead);max-width:30rem;line-height:1.55}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

/* entrada do hero (orquestrada, roda uma vez no load) */
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroMediaIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
html.js .hero__content>*{animation:heroRise .85s var(--ease-out) both}
html.js .hero__eyebrow{animation-delay:.15s}
html.js .hero__claim{animation-delay:.28s}
html.js .hero__lead{animation-delay:.46s}
html.js .hero__actions{animation-delay:.6s}
html.js .hero__media>img:first-child{animation:heroMediaIn 1.1s var(--ease-out) both}

/* =================================================================
   QUEM SOMOS
   ================================================================= */
.about{background:var(--surface)}
.about__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.about__body p+p{margin-top:1.2rem;color:var(--text-2)}
.about__body .lead{color:var(--text)}
.about__values{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin-top:2rem;
  padding-top:1.8rem;border-top:1px solid var(--border-subtle)}
.about__values li{font-weight:600;font-size:.95rem;color:var(--text);display:flex;align-items:center;gap:.6em}

/* =================================================================
   PARCERIA MARINONI
   ================================================================= */
.partner{position:relative;overflow:hidden;background:var(--navy-bg);
  padding-top:clamp(5rem,10vw,9rem);padding-bottom:clamp(5rem,10vw,9rem)}
.partner__bg{position:absolute;inset:-1px 0;z-index:0;
  background-image:linear-gradient(rgba(30,39,51,.82),rgba(30,39,51,.94)),url("../img/background.webp");
  background-size:cover;background-position:center}
/* duas colunas: retrato à esquerda, conteúdo à direita. As áreas deixam o retrato
   entre título e texto quando empilha no celular, que é a ordem de leitura certa. */
.partner__inner{position:relative;z-index:1;max-width:72rem;
  display:grid;grid-template-columns:.78fr 1.22fr;gap:0 clamp(2.25rem,4.5vw,4.5rem);
  grid-template-areas:"retrato cabeca" "retrato corpo";align-content:center}
.partner__head{grid-area:cabeca;align-self:end}
.partner__body{grid-area:corpo}
.partner__media{grid-area:retrato;align-self:center;margin:0}
.partner__media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 14%;
  border-radius:var(--radius-lg);border:1px solid var(--border-subtle);
  box-shadow:0 24px 50px rgba(10,15,22,.45)}
.partner__media figcaption{margin-top:1rem;padding-left:.1rem}
.partner__nome{display:block;font-weight:600;color:var(--text);font-size:.98rem;line-height:1.35}
.partner__papel{display:block;color:var(--muted);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;margin-top:.3rem}
.partner__title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);
  line-height:1.02;letter-spacing:-.01em;margin-top:.6rem}
.partner__lockup{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.4rem);
  margin:clamp(1.8rem,3.4vw,2.6rem) 0;flex-wrap:wrap}
.partner__logo{height:clamp(40px,5.2vw,62px);width:auto}
.partner__logo--marinoni{height:clamp(30px,4vw,48px)}
.partner__rule{width:1px;height:clamp(42px,5.5vw,62px);background:linear-gradient(to bottom,transparent,var(--steel),transparent)}
.partner__text{max-width:42rem;margin:0}
.partner__text p{color:var(--text-2);font-size:1.05rem;line-height:1.6}
.partner__text p+p{margin-top:1.1rem}
.partner__quote{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.2rem);
  color:var(--steel);margin-top:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.01em}

/* =================================================================
   ÁREAS DE ATUAÇÃO
   ================================================================= */
.areas{background:var(--navy-bg);overflow:hidden}
.areas::before{content:"";position:absolute;top:0;right:0;bottom:0;width:44%;z-index:0;
  background-image:var(--tx-steel);background-size:26px 30px;opacity:.09;
  -webkit-mask-image:linear-gradient(to left,#000,transparent 92%);mask-image:linear-gradient(to left,#000,transparent 92%);
  pointer-events:none}
.areas>.container{position:relative;z-index:1}
.areas__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.4vw,1.8rem)}
.area-card{position:relative;background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s var(--ease),background .3s}
.area-card:hover{border-color:var(--raised);transform:translateY(-3px);background:var(--surface-2)}
.area-card__media{position:relative;aspect-ratio:16/6;overflow:hidden;background:var(--navy-bg)}
.area-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.area-card:hover .area-card__media img{transform:scale(1.05)}
.area-card__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(40,50,63,0) 74%,var(--surface));pointer-events:none}
.area-card__body{padding:clamp(1.6rem,2.8vw,2.4rem)}
.area-card__k{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel);display:flex;align-items:center;gap:.5em}
.area-card__title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);
  margin:.4rem 0 1rem;letter-spacing:-.01em}
.area-card p{color:var(--text-2);font-size:.97rem;line-height:1.62}

/* =================================================================
   EQUIPE
   ================================================================= */
.team{background:var(--surface)}
.team__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,2vw,1.6rem)}
.member{position:relative;width:clamp(148px,16vw,188px)}
.member__photo{position:relative;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--navy-bg);border:1px solid var(--border-subtle)}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  filter:grayscale(1) contrast(1.02);transition:filter .5s var(--ease),transform .6s var(--ease)}
.member:hover .member__photo img{filter:grayscale(0);transform:scale(1.03)}
.member__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(27,35,48,.6),transparent 45%);pointer-events:none}
.member figcaption{margin-top:.9rem;display:flex;align-items:baseline;gap:.5em}
.member figcaption::before{content:"//";color:var(--steel);font-weight:800;transform:skewX(-12deg);
  display:inline-block;font-size:.85em}
.member__name{font-family:var(--font-display);font-weight:600;font-size:1.22rem;line-height:1.1;letter-spacing:-.01em}

/* =================================================================
   CONTATO
   ================================================================= */
.contact{background:var(--navy-bg)}
.contact__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.contact__intro{color:var(--text-2);font-size:var(--fs-lead);margin:1rem 0 2rem;max-width:30rem}
.contact__address{font-style:normal;font-size:1.05rem;color:var(--text);line-height:1.6;margin-bottom:1.8rem}
.contact__channels{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.6rem}
.contact__channel{display:inline-flex;align-items:center;gap:.85rem;width:fit-content;
  color:var(--text);font-size:1.05rem;font-weight:500;transition:color .2s}
.contact__channel:hover{color:var(--steel)}
.contact__channel .ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--border);color:var(--steel);flex-shrink:0;
  transition:background .2s,color .2s,border-color .2s}
.contact__channel:hover .ico{background:var(--steel);color:var(--on-accent);border-color:var(--steel)}
.contact__channel .ico svg{width:19px;height:19px;display:block}
.contact__socials{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem}
.contact__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--border);color:var(--text-2);
  transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease)}
.contact__icon svg{width:20px;height:20px;display:block}
.contact__icon:hover{color:var(--on-accent);background:var(--steel);border-color:var(--steel);transform:translateY(-2px)}
.contact__map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);min-height:340px}
.contact__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.3) contrast(1.05)}

/* =================================================================
   RODAPÉ
   ================================================================= */
.footer{background:#1B2330;border-top:1px solid var(--border-subtle);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem}
.footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:2.5rem;align-items:start}
.footer__brand img{height:34px;width:auto;margin-bottom:1rem}
.footer__slogan{color:var(--text-2);font-family:var(--font-display);font-weight:500;font-size:1.4rem;
  letter-spacing:-.01em;max-width:18rem;line-height:1.1}
.footer__nav{display:flex;flex-direction:column;gap:.7rem}
.footer__nav a{color:var(--text-2);font-size:.95rem;transition:color .2s}
.footer__nav a:hover{color:var(--steel)}
.footer__meta{color:var(--muted);font-size:.85rem;line-height:1.7}
.footer__meta p+p{margin-top:.6rem}
.footer__credit{margin-top:1.1rem;font-size:.8rem;color:var(--muted)}
.footer__credit a{color:var(--text-2);font-weight:600;transition:color .2s}
.footer__credit a:hover{color:var(--steel)}

/* =================================================================
   WHATSAPP FLUTUANTE
   ================================================================= */
.wa-float{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--steel);border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(15,21,30,.45);transition:transform .2s var(--ease),background .2s,color .2s;
  animation:wa-in .4s var(--ease-out) both}
.wa-float:hover{background:var(--steel);color:var(--on-accent);transform:translateY(-2px) scale(1.05)}
@keyframes wa-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* =================================================================
   POPUP DA PARCERIA (dialog nativo, aparece 1x por sessão)
   ================================================================= */
.promo{
  --promo-h:min(88svh,660px);
  /* a largura do card trava em 940px; a tipografia abaixo acompanha ESSA medida,
     não o viewport, senão a fonte cresce enquanto a coluna de texto encolhe */
  --promo-w:min(940px,92vw);
  width:var(--promo-w);max-width:none;max-height:var(--promo-h);
  /* margin:auto centraliza o dialog; o reset *{margin:0} do topo apaga o padrão do navegador */
  margin:auto;padding:0;border:0;background:transparent;color:var(--navy);overflow:visible;
  filter:drop-shadow(0 30px 70px rgba(10,15,22,.55))}
/* navegador sem <dialog> ignora o display:none padrão e mostraria o card solto na página */
.promo:not([open]){display:none}
.promo::backdrop{background:rgba(14,19,27,.74);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.promo__card{display:grid;grid-template-columns:1.06fr .94fr;
  background:var(--creme);border-radius:var(--radius-lg);
  max-height:var(--promo-h);overflow:hidden auto;overscroll-behavior:contain}

.promo__body{padding:clamp(1.75rem,calc(.032 * var(--promo-w)),3rem);
  display:flex;flex-direction:column;justify-content:center}
.promo__eyebrow,.promo__eyebrow .sep{color:var(--steel-deep)}
.promo__title{font-family:var(--font-display);font-weight:600;color:var(--steel-deep);
  font-size:clamp(1.85rem,calc(.044 * var(--promo-w)),2.6rem);line-height:1.02;letter-spacing:-.01em;
  margin:.55rem 0 1.1rem}
.promo__text{color:var(--navy);font-size:1rem;line-height:1.62}
.promo__kicker{font-family:var(--font-display);font-weight:700;color:var(--steel-deep);
  font-size:clamp(1.2rem,calc(.026 * var(--promo-w)),1.5rem);line-height:1.1;margin-top:1.1rem}
.promo__cta{align-self:flex-start;margin-top:1.7rem;
  background:var(--steel-deep);color:var(--creme);border-color:var(--steel-deep)}
.promo__cta:hover{background:#26505F;border-color:#26505F;transform:translateY(-1px)}

.promo__media{position:relative;background:var(--navy)}
.promo__media>img:first-child{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.promo__brand{position:absolute;right:clamp(.9rem,1.8vw,1.5rem);bottom:clamp(.9rem,1.8vw,1.5rem);
  width:min(52%,180px);height:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}

.promo__close{position:absolute;top:.7rem;right:.7rem;z-index:2;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;background:rgba(20,27,36,.55);color:var(--creme);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .2s,transform .2s var(--ease)}
.promo__close:hover{background:rgba(20,27,36,.85);transform:scale(1.06)}
.promo__close svg{width:20px;height:20px}
/* o anel de foco global é aço, calibrado pro tema escuro: sobre o creme dá 1,9:1.
   Dentro do card (só o CTA; o X é irmão do card) usa o teal escuro, 6,2:1. */
.promo__card :focus-visible{outline-color:var(--steel-deep)}
html.promo-open{overflow:hidden}

@keyframes promoIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes promoOut{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes promoVeilIn{from{opacity:0}to{opacity:1}}
@keyframes promoVeilOut{to{opacity:0}}
.promo[open]{animation:promoIn .45s var(--ease-out) both}
.promo[open]::backdrop{animation:promoVeilIn .45s var(--ease) both}
.promo.is-closing{animation:promoOut .22s var(--ease) both}
.promo.is-closing::backdrop{animation:promoVeilOut .22s var(--ease) both}

/* =================================================================
   REVEAL (scroll)
   ================================================================= */
/* esconde só quando há JS (html.js). Sem JS / headless, o conteúdo já é visível. */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js .reveal.in{opacity:1;transform:none}
.areas__grid .area-card:nth-child(2){transition-delay:.06s}
.areas__grid .area-card:nth-child(3){transition-delay:.12s}
.areas__grid .area-card:nth-child(4){transition-delay:.18s}
.team__grid .member:nth-child(3n+2){transition-delay:.06s}
.team__grid .member:nth-child(3n+3){transition-delay:.12s}
.partner__text{transition-delay:.06s}
.partner__quote{transition-delay:.12s}

/* =================================================================
   RESPONSIVO
   ================================================================= */
@media (max-width:980px){
  .hero{display:block;min-height:auto;padding-top:76px}
  .nav{background:rgba(27,35,48,.97);border-bottom-color:var(--border-subtle)}
  /* O menu colapsa aqui, não em 760px. Com o seletor de idioma na barra, a linha
     brand + menu + seletor precisa de ~880px nos rótulos em inglês, que são mais
     largos que os em português. Abaixo disso o seletor estourava o container e,
     com overflow-x:hidden no body, a opção ES ficava cortada fora da tela.
     980px também é onde o hero já empilha, então a barra muda de uma vez só. */
  .nav__toggle{display:flex;margin-left:0}
  /* .nav__menu vira position:fixed e sai do fluxo, então quem empurra o bloco
     da direita passa a ser o seletor */
  .lang{margin-left:auto}
  .nav__menu{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(27,35,48,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);
    padding:1rem clamp(1.25rem,4vw,2.5rem) 1.5rem;
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.25s var(--ease)}
  .nav__menu.open{transform:none;opacity:1;visibility:visible}
  .nav__menu>a:not(.btn){padding:.9em 0;border-bottom:1px solid var(--border-subtle)}
  .nav__cta{margin:1rem 0 0;width:100%}
  .hero__texture{display:none}
  .hero__media{position:relative;width:100%;height:46vh;min-height:300px}
  .hero__media>img:first-child{object-position:50% 16%}
  /* empilhado a foto ocupa a largura toda: a faixa da borda vira só um respiro */
  .hero__media-veil{--faixa:90px}
  .hero__content{max-width:none;padding:clamp(2.25rem,7vw,3rem) 0 clamp(2.75rem,8vw,4rem)}
  .about__grid,.contact__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr}
  /* empilha na ordem do DOM: título, retrato, texto. Centralizado: com uma coluna
     só, o alinhamento à esquerda deixa o bloco torto. */
  .partner__inner{grid-template-columns:1fr;grid-template-areas:"cabeca" "retrato" "corpo";
    gap:0;text-align:center}
  .partner__media{margin:clamp(1.8rem,4vw,2.4rem) 0}
  .partner__media img{aspect-ratio:1/1;max-width:min(340px,72%);object-position:50% 12%;
    margin-inline:auto}
  .partner__media figcaption{padding-left:0}
  .partner__lockup{justify-content:center;margin:0 0 clamp(1.5rem,3vw,2rem)}
  .partner__text{margin-inline:auto}
}
@media (max-width:760px){
  .areas__grid{grid-template-columns:1fr}
  .team__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .footer__inner{grid-template-columns:1fr;gap:2rem}
  /* empilhado: sem o teto de 660px, o conteúdo cabe sem rolagem interna */
  .promo{--promo-h:92svh}
  .promo__card{grid-template-columns:1fr}
  .promo__body{justify-content:flex-start;padding:1.5rem 1.4rem 1.7rem}
  .promo__title{font-size:clamp(1.55rem,6.4vw,2rem);margin:.45rem 0 .9rem}
  .promo__text{font-size:.95rem}
  .promo__kicker{font-size:1.25rem;margin-top:.9rem}
  .promo__cta{align-self:stretch;margin-top:1.3rem}
  .promo__media{order:-1;height:clamp(150px,23svh,200px)}
  .promo__media>img:first-child{object-position:50% 4%}
  .promo__brand{width:min(42%,150px)}
}
@media (max-width:430px){
  .team__grid{grid-template-columns:1fr 1fr}
  .hero__actions .btn{flex:1}
  /* tela estreita: só as bandeiras. O nome acessível vem do aria-label,
     então esconder a sigla não deixa o botão sem nome. */
  .lang{gap:0;padding:.15rem}
  .lang__code{display:none}
  .lang__opt{padding:.35em .42em}
}
/* celular de tela curta: o popup inteiro precisa caber sem rolagem interna */
@media (max-width:760px) and (max-height:700px){
  .promo__media{height:110px}
  .promo__body{padding:1.2rem 1.2rem 1.4rem}
  .promo__title{font-size:1.45rem;margin:.35rem 0 .8rem}
  .promo__text{font-size:.9rem;line-height:1.55}
  .promo__kicker{font-size:1.1rem;margin-top:.8rem}
  .promo__cta{margin-top:1.1rem}
}
/* celular deitado (844x390 e afins): largo demais pra empilhar, baixo demais pro
   tamanho normal. Sem esta regra o CTA fica abaixo da dobra do card. */
@media (min-width:761px) and (max-height:540px){
  .promo{--promo-h:94svh}
  .promo__body{padding:1rem 1.25rem}
  .promo__title{font-size:1.5rem;margin:.3rem 0 .6rem}
  .promo__text{font-size:.9rem;line-height:1.5}
  .promo__kicker{font-size:1.05rem;margin-top:.6rem}
  .promo__cta{margin-top:.9rem;padding:.7em 1.3em}
  .promo__brand{width:min(42%,140px)}
}

/* =================================================================
   MOVIMENTO REDUZIDO
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js .hero__content>*,html.js .hero__media>img:first-child{animation:none}
  .wa-float{animation:none}
  .member:hover .member__photo img{transform:none}
  .promo[open],.promo[open]::backdrop,.promo.is-closing,.promo.is-closing::backdrop{animation:none}
}