/* ==========================================================================
   Carvalho Advocacia · MG Web

   Advocacia empresarial contemporânea: arquitetura, editorial e negócio.
   A identidade vem de tipografia, fotografia, composição e cor — não de
   grafismo. Serifa (Source Serif 4) em todos os títulos e frases
   institucionais; Inter só na função utilitária. Bordô como cor de marca,
   usado em superfície inteira, não como detalhe espalhado.

   A composição tem duas regras:
   · toda medida vertical sai da escala --s-1 … --s-6 (nenhuma seção inventa
     um clamp próprio);
   · quando dois elementos pertencem um ao outro, eles compartilham um eixo
     da grade de 12 colunas — nada é posicionado por transform ou offset.

   1. Tokens  2. Base  3. Grade  4. Tipografia  5. Botões e links
   6. Header/Menu  7. Hero  8. Antes do problema  9. Atuação
   10. Quando nos procurar  11. Escritório  12. Equipe  13. Localização
   14. Perguntas  15. Contato  16. CTA final  17. Rodapé  18. Motion
   19. Tablet  20. Mobile
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --paper:#F2EFE9;         /* marfim quente */
  --paper-2:#E8E3DB;       /* segunda superfície clara */
  --ink:#171513;           /* quase-preto quente */
  --wine:#651F2B;          /* cor de marca */
  --wine-deep:#48151E;
  --warm:#77716A;          /* só filete e elemento não-texto sobre claro */
  --warm-ink:#6A645C;      /* texto secundário sobre claro */
  --warm-lt:#A8A199;       /* texto secundário sobre escuro e sobre bordô */

  --line:rgba(23,21,19,.14);
  --line-2:rgba(23,21,19,.08);
  --line-d:rgba(242,239,233,.18);

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ESCALA TIPOGRÁFICA
     Seis degraus, cada um com um papel. A distância entre eles é o que cria
     hierarquia — não o tamanho absoluto do maior.                            */
  /* o teto de 68px não é estético: acima dele o titular quebra em três
     linhas, porque o contêiner para de crescer em 1440px e a coluna encolhe */
  --fs-d1:clamp(36px,4.9vw,68px);      /* titular do hero */
  --fs-d2:clamp(29px,3.3vw,50px);      /* frase institucional de faixa */
  --fs-d3:clamp(24px,2.25vw,34px);     /* título de seção */
  --fs-name:clamp(25px,2.5vw,37px);    /* nome da área de atuação */
  /* frase editorial: as situações, a fala do cliente e as perguntas — os três
     blocos em serifa que não são título de seção falam no mesmo corpo */
  --fs-say:clamp(22px,2vw,30px);
  --fs-lead:clamp(16.5px,.38vw + 15px,18.5px);  /* apoio de titular */
  --fs-body:16px;
  --fs-ui:14.5px;                      /* navegação, botão, link */
  --fs-meta:13.5px;                    /* metadado, nota de rodapé */
  --fs-eyebrow:11.5px;

  /* ESCALA DE ESPAÇO
     s-1 micro · s-2 rótulo→título · s-3 título→texto · s-4 texto→ação
     s-5 bloco→bloco · s-6 coluna→coluna · sect respiro entre seções        */
  --s-1:clamp(6px,.6vw,9px);
  --s-2:clamp(12px,1.1vw,16px);
  --s-3:clamp(18px,1.6vw,24px);
  --s-4:clamp(26px,2.4vw,36px);
  --s-5:clamp(38px,3.6vw,56px);
  --s-6:clamp(52px,5vw,80px);
  --sect:clamp(82px,6.6vw,116px);

  /* colunas dos numerais editoriais (atuação e conteúdo): largura fixa para
     que numeral, nome e descrição fiquem no mesmo eixo em todas as linhas */
  --ix-col:clamp(26px,2.2vw,34px);
  --ix-gap:clamp(14px,1.5vw,26px);

  --pad:clamp(20px,4.4vw,76px);
  --max:1440px;
  --gut:clamp(18px,1.8vw,34px);

  --e:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:clamp(76px,7vw,98px);
  background:var(--paper);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
section{position:relative}
img{display:block;max-width:100%}
p{text-wrap:pretty}   /* evita a última linha órfã nos parágrafos de apoio */

.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  transform:translateY(-200%);
  background:var(--wine);color:var(--paper);
  padding:12px 18px;font-size:14px;
  transition:transform .2s var(--e);
}
.skip:focus{transform:none}

/* ---------- 3. GRADE ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* cabeçalho de seção: rótulo colado no título, respiro só depois do par */
.sec__head{margin-bottom:var(--s-5)}
.sec__head .eyebrow{margin-bottom:var(--s-2)}
.sec__sub{margin:var(--s-3) 0 0;font-size:var(--fs-lead);line-height:1.62;color:var(--warm-ink);max-width:52ch}

/* ---------- 4. TIPOGRAFIA ----------
   Serifa nos títulos, sans no funcional. O contraste entre as duas é o que
   dá o registro editorial — não o tamanho do título.

   Nenhum max-width global nos títulos: cada seção define a própria medida,
   porque cada frase tem um comprimento diferente.                           */
.d1,.d2,.d3{
  font-family:var(--serif);
  font-weight:400;
  margin:0;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.d1{font-size:var(--fs-d1);line-height:1.04;letter-spacing:-.028em}
.d2{font-size:var(--fs-d2);line-height:1.09;letter-spacing:-.022em}
.d3{font-size:var(--fs-d3);line-height:1.16}

h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.014em}

/* rótulo curto: o único uppercase do site */
.eyebrow{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-eyebrow);font-weight:600;line-height:1.5;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--wine);
}

/* filete curto em bordô: abre a frase institucional */
.rule-w{
  display:block;width:64px;height:2px;background:var(--wine);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--e);
}
.rule-w.in{transform:scaleX(1)}

/* medida de leitura padrão do texto de apoio */
.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--warm-ink);margin:0;max-width:46ch}

/* ---------- 5. BOTÕES E LINKS ---------- */
.btn{
  --b:var(--wine);--f:var(--paper);--bd:var(--wine);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;
  background:var(--b);color:var(--f);
  font-family:var(--sans);
  font-size:var(--fs-ui);font-weight:600;letter-spacing:-.004em;
  border:1px solid var(--bd);
  transition:background .24s var(--e),color .24s var(--e),border-color .24s var(--e);
}
.btn:hover{--b:var(--wine-deep);--bd:var(--wine-deep)}
.btn--sm{min-height:40px;padding:0 16px;font-size:13.5px}
.btn--lg{min-height:54px;padding:0 32px;font-size:15px}
.btn--full{width:100%}
/* sobre o bordô do CTA final */
.btn--onwine{--b:var(--paper);--f:var(--wine-deep);--bd:var(--paper)}
.btn--onwine:hover{--b:transparent;--f:var(--paper);--bd:var(--paper)}

/* link de texto: sublinhado fino que acende no bordô. A altura de 48px é
   área de toque; o filete fica preso à linha de base do texto, não ao pé
   dessa área — senão ele flutua longe da palavra. */
.lnk{
  position:relative;
  display:inline-flex;align-items:center;
  min-height:48px;
  font-size:var(--fs-ui);font-weight:600;
  color:var(--wine);
}
.lnk::after{
  content:"";position:absolute;left:0;right:0;
  bottom:calc(50% - .62em);height:1px;
  background:rgba(101,31,43,.35);
  transition:background .22s var(--e);
}
.lnk:hover::after{background:var(--wine)}

.tx-sm{display:none}

/* ---------- 6. HEADER ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .3s var(--e),border-color .3s var(--e),color .3s var(--e);
}
.hdr__in{
  max-width:var(--max);margin:0 auto;
  padding:16px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hdr[data-tone="dark"]{color:var(--paper)}
.hdr[data-tone="light"]{color:var(--ink)}
.hdr.is-stuck[data-tone="light"]{background:rgba(242,239,233,.93);border-bottom-color:var(--line)}
.hdr.is-stuck[data-tone="dark"]{background:rgba(72,21,30,.93);border-bottom-color:var(--line-d)}
.hdr[data-tone="dark"] .btn{--b:var(--paper);--f:var(--wine-deep);--bd:var(--paper)}
.hdr[data-tone="dark"] .btn:hover{--b:transparent;--f:var(--paper);--bd:var(--paper)}

/* wordmark: nome em serifa, linha de apoio em sans — o contraste da marca
   é o mesmo contraste tipográfico do site */
.brand{display:grid;line-height:1}
.brand__a{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.02em}
.brand__b{
  font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;margin-top:4px;opacity:.72;
}
.brand--lg .brand__a{font-size:clamp(28px,2.3vw,36px)}
.brand--lg .brand__b{font-size:11px;margin-top:6px}

.nav{display:flex;gap:clamp(18px,2vw,32px);font-size:var(--fs-ui);font-weight:500}
.nav a{position:relative;padding:6px 0;opacity:.8;transition:opacity .2s var(--e)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--e);
}
.nav a:hover{opacity:1}
.nav a:hover::after{transform:scaleX(1)}

.hdr__act{display:flex;align-items:center;gap:14px}

.burger{display:none;width:40px;height:40px;position:relative;margin-right:-8px}
.burger span{
  position:absolute;left:9px;width:22px;height:1px;background:currentColor;
  transition:transform .3s var(--e);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
body.menu-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:99;
  background:var(--wine-deep);color:var(--paper);
  display:flex;align-items:flex-end;
  opacity:0;transition:opacity .3s var(--e);
}
.menu[hidden]{display:none}   /* explícito: a classe venceria o [hidden] do UA */
.menu.is-open{opacity:1}
.menu__in{width:100%;padding:96px var(--pad) max(30px,env(safe-area-inset-bottom))}
.menu__nav{display:grid;border-top:1px solid var(--line-d)}
.menu__nav a{
  padding:18px 0;border-bottom:1px solid var(--line-d);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,7vw,36px);line-height:1.1;letter-spacing:-.02em;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s var(--e),transform .35s var(--e);
}
.menu.is-open .menu__nav a{opacity:1;transform:none}
.menu.is-open .menu__nav a:nth-child(1){transition-delay:.05s}
.menu.is-open .menu__nav a:nth-child(2){transition-delay:.1s}
.menu.is-open .menu__nav a:nth-child(3){transition-delay:.15s}
.menu.is-open .menu__nav a:nth-child(4){transition-delay:.2s}
.menu.is-open .menu__nav a:nth-child(5){transition-delay:.25s}
.menu.is-open .menu__nav a:nth-child(6){transition-delay:.3s}
.menu__foot{margin-top:var(--s-5);display:grid;gap:var(--s-3)}
.menu__foot .btn{--b:var(--paper);--f:var(--wine-deep);--bd:var(--paper)}
.menu__foot p{margin:0;font-size:var(--fs-meta);color:var(--warm-lt)}

/* ---------- 7. HERO ----------
   Rótulo e titular formam UM bloco (hero__lede); apoio e CTA formam outro
   (hero__aside). No desktop os dois assentam pela mesma base, então a
   última linha do titular e o botão terminam no mesmo eixo horizontal.
   A fotografia entra depois, sangrando de borda a borda.                    */
.hero{padding-top:clamp(112px,12.5vw,172px)}
.hero__type{display:grid;gap:var(--s-4)}

.hero__lede{display:grid;gap:var(--s-2)}
.hero .eyebrow{margin-bottom:0}

.hero__aside{display:grid;justify-items:start;gap:var(--s-4)}
.hero__aside p{
  margin:0;font-size:var(--fs-lead);line-height:1.62;
  color:var(--warm-ink);max-width:46ch;
}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}

.hero__band{
  margin-top:var(--s-6);
  height:clamp(280px,41vw,560px);
  overflow:hidden;background:var(--paper-2);
}
.hero__band img{width:100%;height:100%;object-fit:cover}

@media (min-width:900px){
  /* titular nas sete primeiras colunas, apoio nas quatro últimas: a
     assimetria vem da grade, não de deslocamento.
     O par rótulo+titular se dissolve na grade externa (display:contents) para
     que o rótulo fique numa linha só dele e o apoio comece exatamente na
     mesma linha do titular — mesmo eixo horizontal, sem offset. */
  .hero__type{
    grid-template-columns:repeat(12,1fr);
    column-gap:var(--gut);row-gap:var(--s-2);
    align-items:start;
  }
  .hero__lede{display:contents}
  .hero .eyebrow{grid-column:1/8;grid-row:1}
  .hero .d1{grid-column:1/8;grid-row:2}
  .hero__aside{grid-column:9/13;grid-row:2}
}

/* ---------- 8. ANTES DO PROBLEMA ----------
   filete → frase → situações → fecho, tudo num eixo só. As cinco situações
   são uma estrofe: filete curto em bordô, serifa, sem moldura e sem cartão.
   A fotografia vertical não tem altura escolhida a dedo — ela cobre as duas
   primeiras linhas da grade, então mede exatamente o bloco de texto.        */
.entry{padding:var(--sect) 0}
.entry__grid{display:grid;gap:var(--s-5)}
.entry__t{display:grid;align-content:start}
.entry__t .rule-w{margin-bottom:var(--s-3)}

.entry__list{display:grid;gap:var(--s-2)}
.entry__list li{
  position:relative;
  padding-left:calc(var(--ix-col) + var(--ix-gap));
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-say);line-height:1.3;letter-spacing:-.018em;
}
.entry__list li::before{
  content:"";position:absolute;left:0;top:.63em;
  width:var(--ix-col);height:1px;background:var(--wine);
}

.entry__close{
  margin:0;font-size:var(--fs-lead);line-height:1.62;
  color:var(--warm-ink);max-width:50ch;
}

.entry__fig{overflow:hidden;background:var(--paper-2);height:clamp(280px,52vw,400px)}
.entry__fig img{width:100%;height:100%;object-fit:cover}

@media (min-width:900px){
  .entry__grid{
    grid-template-columns:repeat(12,1fr);
    column-gap:var(--gut);row-gap:var(--s-5);
    align-items:start;
  }
  .entry__t{grid-column:1/8;grid-row:1}
  .entry__list{grid-column:1/8;grid-row:2}
  .entry__close{grid-column:1/7;grid-row:3}
  /* a coluna 9 é a mesma em que entram o apoio do hero, a moldura da atuação
     e a foto do CTA final */
  .entry__fig{grid-column:9/13;grid-row:1/3;align-self:stretch;height:auto}
}

/* ---------- 9. ATUAÇÃO ----------
   Lista editorial de seis linhas com o mesmo desenho vertical:
   numeral · nome · descrição, os três no mesmo eixo em todas as linhas.
   No desktop a descrição fica aberta — a lista não salta sob o cursor — e
   o hover só reenquadra a fotografia da moldura fixa.                       */
.areas{background:var(--paper-2);padding:var(--sect) 0}
.areas .sec__head .d3{max-width:none}   /* título curto: uma linha */
.areas__grid{display:grid;gap:var(--s-6)}
.areas__list{border-top:1px solid var(--line)}

.area{
  border-bottom:1px solid var(--line);
  padding:var(--s-3) 0;
  transition:padding-left .3s var(--e);
}
.area__hit{
  width:100%;display:grid;
  grid-template-columns:var(--ix-col) 1fr;
  column-gap:var(--ix-gap);
  align-items:start;text-align:left;
}
.area__ix{
  font-family:var(--sans);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;line-height:1.9;
  color:var(--warm-ink);font-variant-numeric:tabular-nums;
  transition:color .26s var(--e);
}
.area__name{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-name);line-height:1.1;letter-spacing:-.022em;
  transition:color .26s var(--e);
}
/* a descrição continua o eixo do nome, não o do numeral */
.area__wrap{
  display:grid;grid-template-rows:0fr;
  padding-left:calc(var(--ix-col) + var(--ix-gap));
  transition:grid-template-rows .38s var(--e);
}
.area__desc{
  overflow:hidden;margin:0;
  /* medida calibrada para as seis frases: todas caem em duas linhas, e a
     lista ganha uma altura de linha constante */
  font-size:15.5px;line-height:1.6;color:var(--warm-ink);max-width:50ch;
}
.area.is-open .area__wrap{grid-template-rows:1fr}
.area.is-open .area__desc{padding-top:var(--s-2)}

.area.is-active .area__ix,
.area.is-active .area__name{color:var(--wine)}

.areas__fig{display:none}

.areas__foot{margin:var(--s-5) 0 0;font-size:15px;line-height:1.6;color:var(--warm-ink);max-width:56ch}
.areas__foot a{
  color:var(--wine);font-weight:600;
  box-shadow:inset 0 -1px 0 rgba(101,31,43,.35);
  transition:box-shadow .2s var(--e);
}
.areas__foot a:hover{box-shadow:inset 0 -1px 0 var(--wine)}

/* abaixo do desktop a linha é um disclosure e o realce pode empurrá-la; no
   desktop a descrição já está aberta, então o hover não desloca nada */
@media (max-width:999px) and (hover:hover){
  .area:hover{padding-left:6px}
}

@media (min-width:1000px){
  .areas__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
  .areas__list{grid-column:1/8}
  /* descrição sempre visível: seis linhas de mesma altura, ritmo estável */
  .area__wrap{grid-template-rows:1fr}
  .area__desc{padding-top:var(--s-2)}

  .areas__fig{
    display:block;grid-column:9/13;
    position:sticky;top:clamp(96px,9vw,124px);
    height:clamp(380px,34vw,470px);overflow:hidden;background:var(--paper);
  }
  /* o reenquadramento é a interação: a foto não troca, o olhar dela troca */
  .areas__fig img{
    width:100%;height:100%;object-fit:cover;
    object-position:var(--ox,50%) var(--oy,50%);
    transition:object-position .7s var(--e),transform .7s var(--e);
    transform:scale(1.04);
  }
}

/* ---------- 10. QUANDO NOS PROCURAR ----------
   Duas vozes na mesma linha: a frase do cliente em serifa itálica no eixo 1,
   a resposta do escritório em sans no eixo 8 — o mesmo eixo do apoio do
   escritório e do metadado de contato. O contraste entre as duas famílias é
   o desenho; não há cartão, ícone nem moldura.                              */
.when{padding:var(--sect) 0}
.when .sec__head .d3{max-width:30ch}
.when__list{border-top:1px solid var(--line)}
.when__row{
  display:grid;gap:var(--s-2);
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--line);
}
.when__say{
  margin:0;
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:var(--fs-say);line-height:1.28;letter-spacing:-.014em;
}
.when__ans{margin:0;font-size:var(--fs-lead);line-height:1.62;color:var(--warm-ink);max-width:52ch}

@media (min-width:820px){
  .when__row{
    grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
    row-gap:0;align-items:start;
    padding:var(--s-4) 0;
  }
  .when__say{grid-column:1/7}
  .when__ans{grid-column:8/13;max-width:none}
}

/* ---------- 11. ESCRITÓRIO ----------
   Fotografia de borda a borda e, logo abaixo, a faixa bordô. Frase e coluna
   de apoio partem da mesma linha do alto; o metadado fecha a coluna com o
   mesmo ritmo das duas entradas.                                            */
.off__band{height:clamp(300px,46vw,600px);overflow:hidden;background:var(--paper-2)}
.off__band img{width:100%;height:100%;object-fit:cover}

.off__say{background:var(--wine);color:var(--paper);padding:var(--sect) 0}
.off__grid{display:grid;gap:var(--s-5)}
.off__say .d2{max-width:22ch}
.off__side{display:grid;align-content:start;gap:var(--s-5)}
.off__txt{display:grid;gap:var(--s-3)}
.off__side p{margin:0;font-size:var(--fs-lead);line-height:1.62;color:var(--warm-lt);max-width:46ch}
.off__meta{margin:0;display:grid;gap:var(--s-4)}
.off__meta dt{
  font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:1.6;
  letter-spacing:.16em;text-transform:uppercase;color:var(--warm-lt);
}
.off__meta dd{margin:var(--s-1) 0 0;font-size:15.5px;line-height:1.4;font-weight:500}

@media (min-width:900px){
  .off__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
  .off__say .d2{grid-column:1/7}
  .off__side{grid-column:8/13}
  .off__meta{grid-template-columns:repeat(2,1fr);column-gap:var(--gut)}
}


/* ---------- 12. EQUIPE ----------
   A referência da PoliMed inspira a relação foto + nome + função + bio, mas
   aqui a equipe é tratada como conteúdo editorial: sem card, sem sombra e
   sem borda arredondada envolvendo o conjunto. */
.team{padding:var(--sect) 0}
.team__grid{
  display:grid;
  gap:var(--s-6);
}
.team__item{
  min-width:0;
  border-top:1px solid var(--line);
  padding-top:var(--s-3);
  transition:transform .28s var(--e);
}
.team__item:hover{transform:translateY(-3px)}
.team__fig{
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--paper-2);
}
.team__fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 28%;
  filter:saturate(.82);
  transition:transform .55s var(--e),filter .35s var(--e);
}
.team__item:hover .team__fig img{
  transform:scale(1.018);
  filter:saturate(.94);
}
.team__body{
  display:grid;
  gap:var(--s-1);
  padding-top:var(--s-3);
}
.team__ix{
  margin:0 0 var(--s-1);
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.14em;
  color:var(--warm-ink);
  font-variant-numeric:tabular-nums;
}
.team__name{
  font-size:clamp(24px,2vw,30px);
  line-height:1.1;
}
.team__role{
  margin:2px 0 0;
  font-size:11.5px;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--wine);
}
.team__bio{
  margin:var(--s-2) 0 0;
  font-size:15px;
  line-height:1.62;
  color:var(--warm-ink);
  max-width:38ch;
}
.team__note{
  margin:var(--s-5) 0 0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--warm-ink);
}

@media (min-width:760px){
  .team__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:var(--gut);
    row-gap:var(--s-6);
  }
}

/* ---------- 13. LOCALIZAÇÃO ----------
   A lógica de duas colunas vem da PoliMed, mas o tratamento visual segue a
   Carvalho: fundo secundário, filetes finos, serifas e bordô como estrutura. */
.loc{
  background:var(--paper-2);
  padding:var(--sect) 0;
}
.loc__grid{
  display:grid;
  gap:var(--s-6);
}
.loc__panel{
  display:grid;
  align-content:center;
  justify-items:start;
}
.loc__rule{
  display:block;
  width:64px;
  height:2px;
  background:var(--wine);
  margin-bottom:var(--s-4);
}
.loc__info{
  width:100%;
  margin:0;
  display:grid;
  border-top:1px solid var(--line);
}
.loc__info>div{
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--line);
}
.loc__info dt{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--warm-ink);
}
.loc__info dd{
  margin:var(--s-1) 0 0;
  font-size:16px;
  line-height:1.52;
  color:var(--ink);
}
.loc__info dd strong{font-weight:600}
.loc__note{
  margin:var(--s-3) 0 0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--warm-ink);
  max-width:44ch;
}
.loc__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 22px;
  margin-top:var(--s-4);
}
.loc__map{
  position:relative;
  min-height:360px;
  overflow:hidden;
  background:var(--paper);
}
.loc__map svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.loc__map::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(242,239,233,.08),rgba(101,31,43,.04));
}
.loc__pin{
  position:absolute;
  left:52%;
  top:44%;
  transform:translate(-50%,-180%);
  padding:7px 12px;
  background:var(--wine);
  color:var(--paper);
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.loc__caption{
  position:absolute;
  left:var(--s-4);
  bottom:var(--s-4);
  max-width:calc(100% - 2 * var(--s-4));
  padding:8px 10px;
  background:rgba(242,239,233,.88);
  color:var(--warm-ink);
  font-size:11.5px;
  line-height:1.4;
  letter-spacing:.02em;
}

@media (min-width:900px){
  .loc__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gut);
    align-items:stretch;
  }
  .loc__panel{grid-column:1/6}
  .loc__map{
    grid-column:7/13;
    min-height:420px;
  }
}

/* ---------- 14. PERGUNTAS ----------
   Quatro perguntas em duas colunas. É a única lista da página que não corre
   de margem a margem: a mudança de ritmo é proposital, depois de três listas
   em linha cheia. Cada pergunta abre com um filete e cai em duas linhas.    */
.q{background:var(--paper-2);padding:var(--sect) 0}
.q .sec__head .d3{max-width:26ch}
.q__grid{display:grid;gap:var(--s-5)}
.q__item{
  border-top:1px solid var(--line);
  padding-top:var(--s-3);
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-say);line-height:1.26;letter-spacing:-.018em;
}
.q__note{margin:var(--s-6) 0 0;font-size:15px;line-height:1.65;color:var(--warm-ink);max-width:62ch}
.q__note a{
  color:var(--wine);font-weight:600;
  box-shadow:inset 0 -1px 0 rgba(101,31,43,.35);
  transition:box-shadow .2s var(--e);
}
.q__note a:hover{box-shadow:inset 0 -1px 0 var(--wine)}

@media (min-width:820px){
  .q__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6);row-gap:var(--s-6)}
}

/* ---------- 15. CONTATO ----------
   As duas colunas começam na mesma linha: o filete que abre o metadado nasce
   no topo do rótulo à esquerda.                                             */
.ct{padding:var(--sect) 0}
.ct__grid{display:grid;gap:var(--s-6)}
.ct__t{align-content:start}
.ct__t .eyebrow{margin-bottom:var(--s-2)}
.ct .d3{max-width:28ch}   /* duas linhas equilibradas, sem linha final curta */
.ct__txt{margin:var(--s-3) 0 0;font-size:var(--fs-lead);line-height:1.62;color:var(--warm-ink);max-width:46ch}
.ct__cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:var(--s-4)}

.ct__meta{margin:0;display:grid;border-top:1px solid var(--line)}
.ct__meta>div{padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.ct__meta dt{
  font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:1.6;
  letter-spacing:.16em;text-transform:uppercase;color:var(--warm-ink);
}
.ct__meta dd{margin:var(--s-1) 0 0;font-size:15.5px;line-height:1.45;font-weight:500;overflow-wrap:anywhere}
.ct__meta dd a{transition:color .2s var(--e)}
.ct__meta dd a:hover{color:var(--wine)}

@media (min-width:900px){
  .ct__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
  .ct__t{grid-column:1/7}
  .ct__meta{grid-column:8/13}
}

/* ---------- 16. CTA FINAL ----------
   Bordô profundo de borda a borda. A fotografia começa exatamente na coluna
   9 da mesma grade do resto da página — o corte não é uma proporção
   arbitrária da tela.                                                       */
.fcta{background:var(--wine-deep);color:var(--paper)}
.fcta__grid{display:grid}
.fcta__t{
  padding:var(--sect) var(--pad);
  display:grid;gap:var(--s-3);justify-items:start;align-content:center;
}
.fcta .d2{max-width:24ch}
.fcta__t p{margin:0;font-size:var(--fs-lead);line-height:1.62;color:var(--warm-lt);max-width:46ch}
.fcta__t .btn{margin-top:var(--s-2)}
.fcta__fig{display:none}

@media (min-width:900px){
  .fcta__grid{
    /* margem externa da página + oito colunas + oito medianizes = eixo da
       coluna 9, o mesmo eixo em que a coluna direita começa nas outras seções */
    --side:max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
    --colw:calc((min(100%, var(--max)) - 2 * var(--pad) - 11 * var(--gut)) / 12);
    grid-template-columns:
      var(--side)
      calc(8 * var(--colw) + 8 * var(--gut))
      minmax(0,1fr);
  }
  .fcta__t{grid-column:2;padding:var(--sect) var(--gut) var(--sect) 0}
  .fcta__fig{display:block;grid-column:3;overflow:hidden;background:var(--wine)}
  .fcta__fig img{width:100%;height:100%;object-fit:cover}
}

/* ---------- 17. RODAPÉ ---------- */
.ftr{background:var(--ink);color:var(--paper);padding:var(--sect) 0 clamp(26px,2.6vw,36px)}
.ftr__grid{display:grid;gap:var(--s-5)}
.ftr__brand p{margin:var(--s-3) 0 0;font-size:var(--fs-meta);color:var(--warm-lt);line-height:1.65}
.ftr__nav{display:grid;gap:2px;font-size:var(--fs-ui);align-content:start}
.ftr__nav a{padding:5px 0;color:var(--warm-lt);width:max-content;transition:color .2s var(--e)}
.ftr__nav a:hover{color:var(--paper)}
.ftr__fine{
  margin:var(--s-5) 0 0;padding-top:var(--s-3);
  border-top:1px solid var(--line-d);
  font-size:12.5px;line-height:1.6;color:var(--warm-lt);
}

@media (min-width:760px){
  .ftr__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);column-gap:var(--gut)}
}

/* ---------- 18. MOTION ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--e),transform .6s var(--e)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.rule-w.reveal{opacity:1;transform:scaleX(0)}
.rule-w.reveal.in{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .rule-w.reveal{transform:scaleX(1)}
}

/* ==========================================================================
   19. TABLET — recompõe, não empilha
   ========================================================================== */
@media (min-width:620px) and (max-width:899px){
  .team__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut)}
  .loc__map{min-height:360px}

  .hero__type{grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:var(--s-5)}
  .hero__lede{grid-column:1/11}
  .hero__aside{grid-column:1/9}

  /* frase e situações à esquerda, fotografia à direita cobrindo as duas */
  .entry__grid{
    grid-template-columns:repeat(12,1fr);
    column-gap:var(--gut);row-gap:var(--s-5);
    align-items:start;
  }
  .entry__t{grid-column:1/8;grid-row:1}
  .entry__list{grid-column:1/8;grid-row:2}
  .entry__close{grid-column:1/10;grid-row:3}
  .entry__fig{grid-column:8/13;grid-row:1/3;align-self:stretch;height:auto;min-height:300px}

  .ct__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
  .ct__t{grid-column:1/8}
  .ct__meta{grid-column:8/13}

  .off__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
  .off__say .d2{grid-column:1/10}
  .off__side{grid-column:1/10}
  .off__meta{grid-template-columns:repeat(2,1fr);column-gap:var(--gut)}
}

/* ==========================================================================
   20. MOBILE — recompõe a tipografia, não reduz a do desktop
   ========================================================================== */
@media (max-width:899px){
  .nav{display:none}
  .burger{display:block}
  .tx-lg{display:none}
  .tx-sm{display:inline}
  .hdr__act{gap:10px}
  .btn--sm{min-height:40px;padding:0 15px;font-size:13px}
  .ftr__nav a{padding:9px 0}
}

@media (max-width:619px){
  .hero{padding-top:clamp(100px,24vw,132px)}
  .hero__type{gap:var(--s-5)}
  .hero__cta{gap:2px 18px}
  .hero__cta .btn{flex:1 1 100%}
  .ct__cta .btn{flex:1 1 100%}

  /* nenhum título carrega medida de desktop no celular */
  .d1{line-height:1.06;letter-spacing:-.024em}
  .when .sec__head .d3,
  .q .sec__head .d3,
  .ct .d3{max-width:none}
  .off__say .d2,.fcta .d2{max-width:none}
  .sec__sub,.entry__close,.when__ans,.hero__aside p,
  .off__side p,.fcta__t p,.ct__txt{max-width:none}

  /* a foto vertical vira uma faixa mais baixa para não empurrar a leitura */
  .entry__fig{height:clamp(240px,58vw,320px)}

  /* listas: linha compacta, o respiro fica entre as linhas e não dentro delas */
  .area{padding:var(--s-3) 0}
  .when__row{padding:var(--s-4) 0}
  .q__grid{gap:var(--s-4)}
  .q__note{margin-top:var(--s-5)}
}

@media (max-width:359px){
  .hdr__act .btn--sm{display:none}
}

/* Links de contato sem destino mantêm o cursor de link. */
a:not([href]) { cursor: pointer; }