/* ==========================================================
   LP CRUZ CARDOSO ADVOGADOS
   ----------------------------------------------------------
   Todos os valores saíram do seu Figma (frame "LP CRUZ CARDOSO",
   2324px de largura) divididos por 1,2104 — que é o quanto o seu
   frame é maior que 1920. Assim o site usa o mesmo grid da
   MEGAFONE e continua idêntico ao seu desenho.
   Ex.: no Figma a headline é 60,521 → aqui 50.
   ========================================================== */

:root{

  /* ---- CORES (todas tiradas do arquivo) ------------------- */
  --vermelho:        #BC2F2F;
  --vermelho-escuro: #8D1E1E;
  --btn-de:          #8A1D1D;   /* começo do degradê do botão  */
  --btn-para:        #BF3030;   /* fim do degradê do botão     */
  --titulo-claro:    #656565;
  --titulo-escuro:   #171717;
  --texto-corpo:     #464646;
  --texto-eyebrow:   #404040;
  --branco-suave:    #FBFBFB;
  --cinza-card:      #F0F0F0;
  --borda-card:      #EFEFEF;
  --branco:          #FFFFFF;
  --preto:           #171717;
  --texto-suave:     #6E6E6E;
  --linha-cinza:     #E4E4E4;

  /* ---- DEGRADÊS ------------------------------------------- */
  --degrade-titulo:   linear-gradient(-90deg, var(--titulo-claro) 0%, var(--titulo-escuro) 99.999%);
  --degrade-vermelho: linear-gradient(to left, var(--vermelho) 0%, var(--vermelho-escuro) 100.04%);
  --degrade-botao:    linear-gradient(to right, var(--btn-de), var(--btn-para));
  --degrade-faixa:    linear-gradient(to right, var(--btn-de), var(--btn-para));
  --degrade-numero:   linear-gradient(169deg, rgba(70,70,70,.47) 8.79%, rgba(168,168,168,.47) 82.45%);
  --degrade-cta:      linear-gradient(-77.41deg, #8D1E1E 1%, #BC2F2F 63.79%);

  /* ---- FONTES (as quatro que você usou no arquivo) -------- */
  --fonte-titulo: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fonte-corpo:  'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fonte-card:   'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fonte-nome:   'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* ==========================================================
     O GRID
     ----------------------------------------------------------
     No seu Figma: 2324 de largura, margem de 387 dos dois lados,
     miolo de 1549. Em 1920 isso é exatamente margem 320 e
     miolo 1280 — o mesmo grid da MEGAFONE.

     --util  é o miolo (entre as duas margens).
     --u     é "1 pixel de 1920" convertido para a tela atual.
     ========================================================== */

  --util: clamp(1040px, 66.7vw, 1280px);
  --u:    calc(var(--util) / 1280);
  --margem-lateral: max(24px, calc((100vw - var(--util)) / 2));
}


/* ==========================================================
   BASE
   ========================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--fonte-corpo);
  color:var(--texto-corpo);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

[hidden]{ display:none !important; }
img{ display:block; max-width:100%; }
picture{ display:contents; }
p,h1,h2,h3,h4,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ text-decoration:none; color:inherit; }

.container{
  width:100%;
  max-width:calc(var(--util) + var(--margem-lateral) * 2);
  margin-inline:auto;
  padding-inline:var(--margem-lateral);
}

/* quebra de linha que só existe no celular */
br.so-celular{ display:none; }

.so-leitor{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ==========================================================
   PEÇAS QUE SE REPETEM
   ========================================================== */

/* --- linha miúda de cima (Figma: Inter 12 / tracking 4,08 / #404040) --- */
.eyebrow{
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:calc(9.91 * var(--u));
  line-height:1.5;
  letter-spacing:calc(3.37 * var(--u));
  text-transform:uppercase;
  color:var(--texto-eyebrow);
}
.eyebrow span{ font-weight:300; }

/* --- título grande (Figma: Inter Medium 60,521 / 110% / -1,8156) --- */
.titulo{
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:calc(45 * var(--u));
  line-height:1.12;
  letter-spacing:calc(-1.5 * var(--u));
  background:var(--degrade-titulo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* o pedaço vermelho dentro do título */
.titulo strong{
  font-weight:500;
  background:var(--degrade-vermelho);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* trechos que só ganham o vermelho no celular: no computador eles
   ficam iguais ao resto do título (quem pinta é o próprio h2) */
.titulo strong.destaque-celular{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:inherit;
}

/* título sobre o vermelho: branco chapado, como no Figma */
.titulo--branco{ background:none; color:var(--branco); }

/* --- texto corrido (Figma: Manrope Regular 26,629 / 150%) --- */
.subtitulo{
  font-size:calc(19.5 * var(--u));
  line-height:1.6;
  color:var(--texto-corpo);
}

/* --- botão (Figma: 534x85, raio 90, degradê #8A1D1D→#BF3030) --- */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:calc(21 * var(--u));
  width:calc(398 * var(--u));
  height:calc(62 * var(--u));
  border-radius:calc(74.36 * var(--u));
  background:var(--degrade-botao);
  font-family:var(--fonte-corpo);
  font-weight:600;
  font-size:calc(19 * var(--u));
  line-height:1.2;
  letter-spacing:calc(-0.57 * var(--u));
  color:var(--branco);
  transition:transform .18s ease, box-shadow .18s ease;
}
.botao:hover{
  transform:translateY(-2px);
  box-shadow:0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(141,30,30,.28);
}
/* a pastilha branca com a seta (Figma: 76x32, raio 16) */
.botao__icone{
  flex:none;
  display:block;
  width:calc(55 * var(--u));
  height:calc(23 * var(--u));
}

/* versão branca, usada sobre o vermelho */
.botao--branco{ background:var(--branco); }
/* o botão branco fica parado: sem subir e sem sombra no hover */
.botao--branco:hover{ transform:none; box-shadow:none; }
.botao--branco span{
  background:var(--degrade-vermelho);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* ==========================================================
   TOPO — menu (Figma: Inter Regular 22, #404040, centralizado)
   ========================================================== */

.topo{
  position:sticky;
  top:0;
  z-index:50;
  height:calc(92 * var(--u));
  display:flex;
  align-items:center;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.topo.is-rolado{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.topo__logo{ display:none; }

.topo__menu{
  display:flex;
  justify-content:center;
  gap:calc(34 * var(--u));
  width:100%;
  font-family:var(--fonte-titulo);
  font-weight:400;
  font-size:calc(16 * var(--u));
  line-height:1.5;
  color:var(--texto-eyebrow);
}
.topo__menu a{ position:relative; padding-bottom:calc(6 * var(--u)); }
/* o risco embaixo do item ativo (Figma: 166x2, #B02B2B) */
.topo__menu a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:calc(1.65 * var(--u));
  min-height:1px;
  background:#B02B2B;
  transform:scaleX(0);
  transition:transform .2s ease;
}
.topo__menu a:hover::after,
.topo__menu a.is-ativo::after{ transform:scaleX(1); }

.topo__abrir{
  display:none;
  width:44px; height:44px;
  border:0; background:none; padding:0; cursor:pointer;
}
.topo__abrir span{
  display:block; height:2px; width:22px;
  margin:5px auto; border-radius:2px;
  background:var(--preto);
  transition:transform .2s ease, opacity .2s ease;
}


/* ==========================================================
   DOBRA 1 — hero
   ----------------------------------------------------------
   No Figma o hero vai de 228 a 968 e a foto começa lá em cima,
   em 46 — por isso ela sobe para trás do menu.
   ========================================================== */

.hero{
  position:relative;
  overflow-x:clip;
  overflow-y:visible;
  padding-top:calc(112 * var(--u));
  padding-bottom:calc(54 * var(--u));
  min-height:calc(680 * var(--u));
}

/* os dois anéis vermelhos do fundo (Figma: Group 17 e Group 18).
   O Figma dá a caixa já rotacionada; aqui o elemento tem o tamanho da
   imagem e gira em torno do próprio centro, no mesmo ponto. */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
  z-index:0;
}
.hero::before{
  width:calc(800.9 * var(--u));
  height:calc(798.3 * var(--u));
  left:calc(-428.4 * var(--u));
  top:calc(-422.7 * var(--u));
  transform:rotate(36.6deg);
  background-image:url("../img/anel-17.svg");
}
.hero::after{
  width:calc(800.9 * var(--u));
  height:calc(1053.2 * var(--u));
  left:calc(1443.4 * var(--u));
  top:calc(-617.9 * var(--u));
  transform:rotate(127.32deg);
  background-image:url("../img/anel-18.svg");
}

.hero__grid{ position:relative; z-index:1; }

.hero__texto{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(26 * var(--u));
  width:calc(580 * var(--u));
}

/* título + subtítulo andam juntos, com 36 de distância no Figma */
.hero__titulo-bloco{
  display:flex;
  flex-direction:column;
  gap:calc(25 * var(--u));
  width:100%;
}

.hero__monograma{
  width:calc(37.18 * var(--u));
  height:calc(40.48 * var(--u));
  object-fit:contain;
}

/* a foto encosta na margem direita do grid e sobe atrás do menu */
.hero__visual{
  position:absolute;
  top:calc(-134 * var(--u));
  right:var(--margem-lateral);
  width:calc(470 * var(--u));
  z-index:1;
}
.hero__foto{
  width:100%;
  /* os 2px a mais somem por baixo da barra vermelha: sem eles o
     navegador arredonda meio pixel e deixa um risco branco */
  height:calc(702 * var(--u) + 2px);
  object-fit:cover;
  object-position:top center;
  display:block;
}

/* --- as tags na frente da foto (Figma: 151:35 e 152:52) ---
   ficam em % da foto, então acompanham qualquer tamanho de tela */
.tag-foto{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:calc(9 * var(--u));
  height:calc(39 * var(--u));
  padding-inline:calc(16 * var(--u));
  border-radius:calc(58 * var(--u));
  background:rgba(0,0,0,.10);
  backdrop-filter:blur(calc(8 * var(--u)));
  -webkit-backdrop-filter:blur(calc(8 * var(--u)));
  font-family:var(--fonte-corpo);
  font-size:calc(15.9 * var(--u));
  line-height:1.2;
  letter-spacing:calc(-0.48 * var(--u));
  color:#000000;
  white-space:nowrap;
  z-index:2;
}
.tag-foto img{
  width:calc(17 * var(--u));
  height:calc(17 * var(--u));
  flex:none;
}
.tag-foto--1{ left:-20%;  top:54.5%; }
.tag-foto--2{ left:76.1%; top:67.5%; }

/* ==========================================================
   BARRA INFO — a faixa vermelha do Figma, com os números
   subindo sozinhos (pedido seu)
   ========================================================== */

.barra-info{
  position:relative;
  z-index:2;
  height:calc(136 * var(--u));
  display:flex;
  align-items:center;
  background:var(--degrade-faixa);
  color:var(--branco);
}
.barra-info__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  width:100%;
}
.barra-info__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(11 * var(--u));
  text-align:center;
  border-left:1px solid rgba(255,255,255,.22);
}
.barra-info__item:first-child{ border-left:0; }

.barra-info__numero{
  /* mesma fonte e mesmo peso da headline do site */
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:calc(33 * var(--u));
  line-height:1.1;
  letter-spacing:calc(-1 * var(--u));
  font-variant-numeric:tabular-nums;
}
/* a legenda segue a mesma regra da linha miúda (eyebrow) do site */
.barra-info__texto{
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:calc(10.4 * var(--u));
  line-height:1.5;
  letter-spacing:calc(2.9 * var(--u));
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
}


/* ==========================================================
   DOBRA 2 — "Entenda como vamos atuar no seu caso."
   ========================================================== */

.atuacao{
  position:relative;
  padding-top:calc(104 * var(--u));
  padding-bottom:calc(104 * var(--u));
  overflow:hidden;
}

/* a caderneta, inclinada -22,99° e desfocada, como no Figma */
.atuacao__caderneta{
  position:absolute;
  left:calc(-343 * var(--u));
  top:calc(-51 * var(--u));
  width:calc(480.3 * var(--u));
  height:calc(450.4 * var(--u));
  transform:rotate(-22.99deg);
  filter:blur(calc(2.69 * var(--u)))
         drop-shadow(calc(25 * var(--u)) calc(3 * var(--u)) calc(25 * var(--u)) rgba(26,26,26,.17));
  pointer-events:none;
}

.atuacao__grid{
  position:relative;
  display:grid;
  grid-template-columns:calc(492 * var(--u)) 1fr;
  gap:calc(104 * var(--u));
}

.atuacao__esquerdo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(30 * var(--u));
}
.atuacao__titulo{ margin-top:calc(20 * var(--u)); width:100%; }
.atuacao__texto{ margin-top:calc(10 * var(--u)); }

/* --- as 4 etapas --- */
.etapas{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:calc(48 * var(--u));
  padding-left:calc(104 * var(--u));   /* espaço do número grande */
}
/* o risco vertical que liga as etapas (Figma: Line 7, degradê vermelho).
   Cada etapa desenha só o pedaço que vai do seu check até o próximo —
   assim a linha para no último check em vez de sobrar para fora. */
.etapa::before{
  content:"";
  position:absolute;
  left:calc(20 * var(--u));
  top:calc(20 * var(--u));
  height:calc(100% + 48 * var(--u));
  width:1px;
  background:linear-gradient(to bottom, var(--vermelho), var(--vermelho-escuro));
}
.etapa:last-child::before{ display:none; }

.etapa{
  position:relative;
  display:flex;
  gap:calc(20 * var(--u));
  align-items:flex-start;
}
/* o número grande, meio apagado (Figma: Manrope 114,99, degradê cinza) */
.etapa__numero{
  position:absolute;
  left:calc(-104 * var(--u));
  top:calc(-11 * var(--u));
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:calc(80 * var(--u));
  line-height:1.2;
  letter-spacing:calc(-3.8 * var(--u));
  background:var(--degrade-numero);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.etapa__check{
  position:relative;
  z-index:1;
  flex:none;
  width:calc(40 * var(--u));
  height:calc(40 * var(--u));
}
.etapa__conteudo{
  display:flex;
  flex-direction:column;
  gap:calc(10 * var(--u));
}
.etapa__titulo{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:calc(21.5 * var(--u));
  line-height:1.4;
  background:var(--degrade-vermelho);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.etapa__texto{
  font-size:calc(17.5 * var(--u));
  line-height:1.6;
  color:var(--texto-corpo);
  max-width:calc(440 * var(--u));
}
/* no Figma só o primeiro é mais estreito */
.etapa:first-child .etapa__texto{ max-width:calc(424.7 * var(--u)); }


/* ==========================================================
   FAIXA DE LOGOS — os clientes, deslizando em loop
   (Figma: faixa de 183 de altura, logos de 86,383)
   ========================================================== */

.faixa-logos{
  /* o Figma tem 151 de altura; aqui ficou 210 porque com 13 logos
     passando a faixa estreita dava sensação de bagunça */
  height:calc(188 * var(--u));
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:calc(30 * var(--u));
  background:var(--degrade-faixa);
  overflow:hidden;
}
/* os logos entram e saem desaparecendo, não cortados na borda */
.faixa-logos__trilho-area{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.faixa-logos__titulo{
  text-align:center;
  font-size:calc(12.39 * var(--u));
  line-height:1.5;
  letter-spacing:calc(1.4 * var(--u));
  color:var(--branco);
}
.faixa-logos__trilho{
  display:flex;
  width:max-content;
  animation:desliza 60s linear infinite;
}
.faixa-logos:hover .faixa-logos__trilho{ animation-play-state:paused; }
.faixa-logos__grupo{
  display:flex;
  align-items:center;
  gap:calc(96 * var(--u));
  padding-right:calc(96 * var(--u));
}
.faixa-logos__item img{
  height:calc(55 * var(--u));
  width:auto;
  opacity:.95;
}
@keyframes desliza{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .faixa-logos__trilho{ animation:none; }
}


/* ==========================================================
   DOBRA 3 — áreas de atuação
   (Figma: cartões de 308,631 de altura, imagem de 394,564,
    raio 24,206, recheio 48,413 x 72,619)
   ========================================================== */

.areas{ padding-block:calc(104 * var(--u)) calc(96 * var(--u)); }

.areas__cabecalho{
  width:calc(853.4 * var(--u));
  margin-inline:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:calc(29.74 * var(--u));
}

.areas__lista{
  /* agora são 8 cartões em duas colunas (Figma: 4 linhas de 308,631
     com 48,413 de respiro entre elas) */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(24 * var(--u));
  margin-top:calc(54 * var(--u));
}

.area{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:calc(14 * var(--u));
  /* o Figma tem 255 de altura fixa; aqui vira altura mínima, então
     o cartão acompanha o texto em vez de sobrar espaço vazio */
  min-height:calc(172 * var(--u));
  padding:calc(34 * var(--u)) calc(34 * var(--u));
  border-radius:calc(20 * var(--u));
  background:var(--vermelho);
}
.area__titulo{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:calc(26.5 * var(--u));
  line-height:1.2;
  letter-spacing:calc(-0.27 * var(--u));
  color:var(--branco);
}
.area__descricao{
  font-size:calc(17.5 * var(--u));
  line-height:1.6;
  color:var(--branco-suave);
}

/* a linha final da dobra: texto à esquerda, botão à direita */
.areas__rodape{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(40 * var(--u));
  margin-top:calc(64 * var(--u));
}
.areas__rodape .subtitulo{ max-width:calc(828 * var(--u)); }


/* ==========================================================
   DOBRA 5 — depoimentos
   (Figma: Poppins Medium 50,838, cartões #F0F0F0 com o topo
    arredondado em 24,206)
   ========================================================== */

.depoimentos{
  padding-block:calc(96 * var(--u));
  text-align:center;
}
.depoimentos__titulo{
  font-family:var(--fonte-card);
  font-weight:500;
  font-size:calc(37 * var(--u));
  line-height:1.3;
  background:var(--degrade-titulo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* no Figma este pedaço ficou verde (sobra da MEGAFONE); aqui é vermelho */
.depoimentos__titulo strong{
  font-weight:500;
  background:var(--degrade-vermelho);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.depoimentos__texto{
  margin-top:calc(24 * var(--u));
  font-size:calc(19.5 * var(--u));
  line-height:1.5;
  background:var(--degrade-titulo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* --- o carrossel --- */
.carrossel{ margin-top:calc(46 * var(--u)); }

.carrossel__trilho{
  display:flex;
  gap:calc(28 * var(--u));
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* sem "scroll-behavior:smooth" de propósito: com ele ligado, o
     encaixe (scroll-snap) cancela a rolagem feita por código */
  text-align:left;
  padding-bottom:calc(6 * var(--u));
  /* a barra de rolagem some: quem manda são as bolinhas */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carrossel__trilho::-webkit-scrollbar{ display:none; }

.depoimento{
  flex:0 0 calc((100% - (28 * var(--u)) * 2) / 3);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:calc(16 * var(--u));
  padding:calc(26 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u));
  background:var(--cinza-card);
  border:1px solid var(--borda-card);
  border-radius:calc(20 * var(--u));
}
.depoimento__estrelas{
  color:#E8B23A;
  font-size:calc(15 * var(--u));
  letter-spacing:.12em;
}
.depoimento__texto{
  font-size:calc(17.5 * var(--u));
  line-height:1.65;
  letter-spacing:calc(-0.5 * var(--u));
  color:var(--texto-corpo);
  /* empurra o perfil para a base, deixando os cartões alinhados */
  flex:1 0 auto;
}
.depoimento__perfil{
  display:flex;
  align-items:center;
  gap:calc(14 * var(--u));
}
.depoimento__inicial{
  flex:none;
  display:grid;
  place-items:center;
  width:calc(44 * var(--u));
  height:calc(44 * var(--u));
  border-radius:50%;
  background:var(--degrade-vermelho);
  color:var(--branco);
  font-family:var(--fonte-nome);
  font-weight:600;
  font-size:calc(16 * var(--u));
  letter-spacing:.02em;
}
.depoimento__nome{
  display:block;
  font-family:var(--fonte-nome);
  font-weight:600;
  font-size:calc(16 * var(--u));
  color:var(--preto);
}
.depoimento__area{
  display:block;
  margin-top:calc(2 * var(--u));
  font-family:var(--fonte-nome);
  font-weight:400;
  font-size:calc(13.5 * var(--u));
  color:var(--texto-suave);
}

/* --- as bolinhas --- */
.carrossel__bolinhas{
  display:flex;
  justify-content:center;
  gap:calc(10 * var(--u));
  margin-top:calc(30 * var(--u));
}
.carrossel__bolinha{
  width:calc(9 * var(--u));
  height:calc(9 * var(--u));
  min-width:8px;
  min-height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#D8D8D8;
  cursor:pointer;
  transition:background-color .2s ease, width .2s ease;
}
.carrossel__bolinha.is-ativa{
  background:var(--vermelho);
  width:calc(26 * var(--u));
  min-width:22px;
  border-radius:999px;
}


/* ==========================================================
   NOVA — a Dra. Priscila (fundo vermelho, depois dos depoimentos)
   ========================================================== */

.doutora{
  padding-block:calc(96 * var(--u));
  background:var(--degrade-cta);
  color:var(--branco);
}
.doutora__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(64 * var(--u));
  align-items:start;
}
.doutora__coluna{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(26 * var(--u));
}
.doutora .eyebrow{ color:rgba(255,255,255,.75); }
.doutora .subtitulo{ color:var(--branco-suave); }

.doutora__foto{
  width:100%;
  height:auto;
  border-radius:calc(20 * var(--u));
  /* sem moldura: a imagem já vem recortada, encostando na borda */
  display:block;
}

/* --- os selos (feitos no próprio código, sem imagem) --- */
.selos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(12 * var(--u));
  width:100%;
}
.selo{
  display:flex;
  flex-direction:column;
  gap:calc(3 * var(--u));
  padding:calc(16 * var(--u)) calc(18 * var(--u));
  border-radius:calc(14 * var(--u));
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
}
.selo__titulo{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:calc(17 * var(--u));
  line-height:1.2;
  color:var(--dourado-claro);
}
.selo__apoio{
  font-size:calc(12 * var(--u));
  letter-spacing:calc(1.6 * var(--u));
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* --- a lista que abre e fecha --- */
.topicos{ width:100%; }
.topico{
  border-top:1px solid rgba(255,255,255,.22);
}
.topico:last-child{ border-bottom:1px solid rgba(255,255,255,.22); }

.topico__titulo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(16 * var(--u));
  padding-block:calc(18 * var(--u));
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:calc(17 * var(--u));
  line-height:1.3;
  color:var(--branco);
  cursor:pointer;
  list-style:none;
}
.topico__titulo::-webkit-details-marker{ display:none; }

/* o + que vira - quando abre */
.topico__sinal{
  position:relative;
  flex:none;
  width:calc(16 * var(--u));
  height:calc(16 * var(--u));
}
.topico__sinal::before,
.topico__sinal::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:calc(14 * var(--u));
  height:1.5px;
  background:var(--branco);
  transform:translate(-50%,-50%);
  transition:transform .2s ease, opacity .2s ease;
}
.topico__sinal::after{ transform:translate(-50%,-50%) rotate(90deg); }
.topico[open] .topico__sinal::after{ transform:translate(-50%,-50%) rotate(0); opacity:0; }

.topico__lista{
  display:flex;
  flex-direction:column;
  gap:calc(10 * var(--u));
  padding-bottom:calc(20 * var(--u));
  font-size:calc(15.5 * var(--u));
  line-height:1.6;
  color:rgba(255,255,255,.82);
}
.topico__lista li{ padding-left:calc(16 * var(--u)); position:relative; }
.topico__lista li::before{
  content:"";
  position:absolute;
  left:0; top:calc(10 * var(--u));
  width:calc(6 * var(--u));
  height:calc(6 * var(--u));
  border-radius:50%;
  background:var(--dourado-claro);
}
.topico__lista strong{
  font-weight:600;
  color:var(--branco);
}

/* ==========================================================
   NOVA — casos de grande impacto (mesmo padrão da DOBRA 3)
   ========================================================== */

.imprensa{ padding-block:calc(96 * var(--u)); background:var(--branco); }

.imprensa__cabecalho{
  display:flex;
  flex-direction:column;
  gap:calc(22 * var(--u));
  max-width:calc(880 * var(--u));
}
.imprensa__cabecalho .subtitulo{ max-width:calc(760 * var(--u)); }

.imprensa__lista{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:calc(40 * var(--u));
  margin-top:calc(60 * var(--u));
}
.caso{
  display:flex;
  flex-direction:column;
  border-radius:calc(20 * var(--u));
  overflow:hidden;
  background:var(--vermelho);
  transition:transform .2s ease;
}
.caso:hover{ transform:translateY(-4px); }
.caso__capa{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.caso__capa img{
  width:100%; height:100%;
  object-fit:cover;
}
/* o play por cima da capa */
.caso__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(23,23,23,.28);
  transition:background-color .2s ease;
}
.caso:hover .caso__play{ background:rgba(23,23,23,.12); }
.caso__play svg{
  width:calc(54 * var(--u));
  height:calc(54 * var(--u));
}
.caso__texto{
  padding:calc(22 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u));
}
.caso__titulo{
  font-family:var(--fonte-card);
  font-weight:600;
  font-size:calc(19 * var(--u));
  line-height:1.3;
  color:var(--branco);
}
.caso__veiculo{
  margin-top:calc(10 * var(--u));
  font-family:var(--fonte-card);
  font-size:calc(14.5 * var(--u));
  line-height:1.5;
  color:var(--branco-suave);
  opacity:.9;
}


/* ==========================================================
   NOVA — nossa equipe (compacta, como você pediu)
   ========================================================== */

.equipe{ padding-block:calc(96 * var(--u)); background:#FAFAFA; }

.equipe__cabecalho{
  width:calc(853.4 * var(--u));
  margin-inline:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:calc(29.74 * var(--u));
}

.equipe__lista{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:calc(24 * var(--u));
  margin-top:calc(60 * var(--u));
}
.pessoa{
  display:flex;
  align-items:center;
  gap:calc(18 * var(--u));
  padding:calc(16 * var(--u)) calc(20 * var(--u));
  background:var(--branco);
  border:1px solid var(--linha-cinza);
  border-radius:calc(20 * var(--u));
}
.pessoa__foto{
  flex:none;
  width:calc(56 * var(--u));
  height:calc(56 * var(--u));
  border-radius:50%;
  object-fit:cover;
  object-position:top center;
  background:var(--cinza-card);
}
.pessoa__nome{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:calc(17 * var(--u));
  line-height:1.3;
  color:var(--preto);
}
.pessoa__cargo{
  margin-top:calc(4 * var(--u));
  font-size:calc(14.5 * var(--u));
  line-height:1.45;
  color:var(--texto-corpo);
}
.pessoa__oab{
  margin-top:calc(2 * var(--u));
  font-size:calc(12.5 * var(--u));
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--vermelho);
}
.equipe__nota{
  margin-top:calc(40 * var(--u));
  text-align:center;
  font-size:calc(16.5 * var(--u));
  line-height:1.6;
  color:var(--texto-corpo);
}


/* ==========================================================
   NOVA — vamos conversar sobre o seu caso?
   ========================================================== */

.contato{
  position:relative;
  padding-block:calc(94 * var(--u));
  background:var(--degrade-cta);
  color:var(--branco);
  overflow:hidden;
}
.contato__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:calc(560 * var(--u)) 1fr;
  gap:calc(68 * var(--u));
  align-items:center;
}
.contato__bloco{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(30 * var(--u));
}
.contato .eyebrow{ color:rgba(255,255,255,.75); }
.contato .subtitulo{ color:var(--branco-suave); }

.contato__dados{
  display:flex;
  flex-direction:column;
  gap:calc(20 * var(--u));
}
.dado{
  display:flex;
  gap:calc(20 * var(--u));
  align-items:flex-start;
  padding:calc(22 * var(--u)) calc(26 * var(--u));
  border-radius:calc(20 * var(--u));
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
.dado__icone{
  flex:none;
  width:calc(30 * var(--u));
  height:calc(30 * var(--u));
  color:var(--branco);
}
.dado__rotulo{
  font-size:calc(12.39 * var(--u));
  letter-spacing:calc(2 * var(--u));
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.dado__valor{
  margin-top:calc(6 * var(--u));
  font-size:calc(18 * var(--u));
  line-height:1.4;
  color:var(--branco);
}
.dado__apoio{
  margin-top:calc(4 * var(--u));
  font-size:calc(14.5 * var(--u));
  color:rgba(255,255,255,.72);
}


/* ==========================================================
   RODAPÉ
   ========================================================== */

.rodape{
  /* branco, porque a seção de cima (contato) é vermelha */
  background:var(--branco);
  color:var(--texto-corpo);
  padding-block:calc(48 * var(--u)) calc(34 * var(--u));
}
.rodape__grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(40 * var(--u));
  padding-bottom:calc(30 * var(--u));
  border-bottom:1px solid var(--linha-cinza);
}
.rodape__monograma{
  width:calc(44 * var(--u));
  height:auto;
}
.rodape__menu{
  display:flex;
  gap:calc(34 * var(--u));
  font-size:calc(15.5 * var(--u));
  color:var(--texto-corpo);
}
.rodape__menu a{ transition:color .2s ease; }
.rodape__menu a:hover{ color:var(--vermelho); }
.rodape__base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(20 * var(--u));
  margin-top:calc(24 * var(--u));
  font-size:calc(13.5 * var(--u));
  line-height:1.6;
  color:var(--texto-suave);
}


/* ==========================================================
   TABLET — até 1024px
   ----------------------------------------------------------
   O grid continua o mesmo, só afrouxa onde ficaria apertado.
   ========================================================== */

@media (max-width:1024px){
  :root{
    --util: calc(100vw - 96px);
    --margem-lateral: 48px;
  }
  .topo__menu{ gap:calc(26 * var(--u)); }
  .hero__texto{ width:calc(540 * var(--u)); }
  .imprensa__lista{ gap:calc(24 * var(--u)); }
  .atuacao__grid{ grid-template-columns:calc(430 * var(--u)) 1fr; gap:calc(60 * var(--u)); }
  .etapas{ padding-left:calc(96 * var(--u)); }
  .etapa__numero{ left:calc(-96 * var(--u)); font-size:calc(76 * var(--u)); }
  .imprensa__lista,
  .equipe__lista{ grid-template-columns:repeat(2,1fr); }
  .area{ min-height:calc(180 * var(--u)); }
  .depoimento{ flex:0 0 calc((100% - (28 * var(--u))) / 2); }
  .contato__grid{ grid-template-columns:1fr; gap:calc(50 * var(--u)); }
  .doutora__grid{ grid-template-columns:1fr; gap:calc(44 * var(--u)); }
}


/* ==========================================================
   CELULAR — até 860px
   ----------------------------------------------------------
   Aqui o layout vira uma coluna só. Os tamanhos deixam de usar
   --u (que encolheria demais) e passam a ser px, para o texto
   continuar legível na mão. As margens ficam em 22px.
   ========================================================== */

@media (max-width:860px){

  :root{
    /* em px (e não em %), senão o --u vira porcentagem e quebra
       raio de canto, espaçamento e tudo mais que não esteja em px */
    --util: calc(100vw - 44px);
    --margem-lateral: 22px;
  }

  /* --- peças que se repetem --- */
  .eyebrow{ font-size:10px; letter-spacing:2.2px; line-height:1.7; }
  /* no celular a segunda parte desce para a linha de baixo */
  .eyebrow span{ display:block; }
  .titulo{ font-size:30px; letter-spacing:-.7px; line-height:1.18; }
  .subtitulo{ font-size:15.5px; line-height:1.65; }

  .botao{
    width:100%;
    max-width:360px;
    height:58px;
    border-radius:999px;
    gap:16px;
    font-size:15px;
    letter-spacing:-.3px;
  }
  .botao__icone{ width:52px; height:22px; }

  /* --- topo --- */
  .topo{ height:66px; background:rgba(255,255,255,.94); }
  .topo .container{ display:flex; align-items:center; justify-content:space-between; }
  .topo__logo{ display:block; line-height:0; }
  .topo__logo img{ height:34px; width:auto; }
  .topo__abrir{ display:block; margin-left:auto; }
  .topo__menu{
    position:absolute;
    top:66px; left:0; right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:6px 22px 16px;
    font-size:16px;
    background:var(--branco);
    border-bottom:1px solid var(--linha-cinza);
    box-shadow:0 18px 30px rgba(0,0,0,.08);
  }
  body.menu-aberto .topo__menu{ display:flex; }
  .topo__menu a{ width:100%; padding-block:14px; border-bottom:1px solid var(--linha-cinza); }
  .topo__menu a:last-child{ border-bottom:0; }
  .topo__menu a::after{ display:none; }
  body.menu-aberto .topo__abrir span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-aberto .topo__abrir span:nth-child(2){ opacity:0; }
  body.menu-aberto .topo__abrir span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* --- hero: texto em cima, foto embaixo --- */
  .hero{ min-height:0; padding-block:0 30px; overflow:clip; }
  .hero::before,.hero::after{ display:none; }
  .hero__grid{ display:flex; flex-direction:column; gap:16px; }
  .hero__texto{ width:100%; gap:20px; }
  .hero__titulo-bloco{ gap:16px; }
  /* a logo subiu para o menu, então sai daqui */
  .hero__monograma{ display:none; }
  /* no celular a foto vem primeiro, antes da linha "CRUZ CARDOSO..." */
  .hero__visual{
    order:-1;
    position:relative;
    top:auto; right:auto;
    width:100%;
    max-width:252px;
    margin-inline:auto;
    /* desce o bastante para a barra do menu não pegar a cabeça dela */
    margin-top:10px;
    margin-bottom:-10px;
  }
  .tag-foto{
    height:26px;
    gap:6px;
    padding-inline:10px;
    border-radius:999px;
    font-size:11px;
    letter-spacing:-.2px;
  }
  .tag-foto img{ width:12px; height:12px; }
  /* as duas encostam exatamente na margem da tela, em qualquer
     largura de celular: o recuo é o que sobra dos lados da foto.
     A primeira sobe um pouco para sair de cima do cabelo, onde o
     texto preto sumia. */
  .tag-foto--1{
    left:calc(-1 * max(0px, (100vw - 44px - 252px) / 2));
    /* 68% é a faixa em que o cabelo já acabou: ali o texto preto lê bem */
    top:68%;
  }
  .tag-foto--2{
    left:auto;
    right:calc(-1 * max(0px, (100vw - 44px - 252px) / 2));
    top:80%;
  }

  .hero__foto{
    order:-1;
    position:static;
    width:100%;
    max-width:252px;
    height:auto;
    margin-inline:auto;
    /* sobe um pouco, quase encostando no menu */
    margin-top:-14px;
    margin-bottom:-10px;
    /* a base da foto se dissolve no fundo, sem corte seco */
    -webkit-mask-image:linear-gradient(to bottom, #000 70%, rgba(0,0,0,.35) 88%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 70%, rgba(0,0,0,.35) 88%, transparent 100%);
  }

  /* --- barra de números: 2 em cima, 2 embaixo --- */
  .barra-info{ height:auto; padding-block:24px; }
  .barra-info__grid{ grid-template-columns:1fr 1fr; gap:22px 0; }
  .barra-info__item:nth-child(odd){ border-left:0; }
  .barra-info__item{ gap:6px; }
  .barra-info__numero{ font-size:27px; }
  .barra-info__texto{ font-size:10px; letter-spacing:1.4px; }

  /* --- como atuamos --- */
  .atuacao{ padding-block:46px; }
  .atuacao__caderneta{ display:none; }
  .atuacao__grid{ display:flex; flex-direction:column; gap:36px; }
  .atuacao__esquerdo{ gap:18px; }
  .atuacao__titulo{ margin-top:0; }
  .atuacao__texto{ margin-top:0; }

  /* as etapas sobem para antes do botão: o botão é o último passo */
  .atuacao__grid{ display:flex; flex-direction:column; gap:20px; }
  .atuacao__esquerdo{ display:contents; }
  .etapas{ order:4; gap:22px; padding-left:0; margin-top:4px; }
  .atuacao__esquerdo .botao{ order:5; }

  .etapa{
    position:relative;
    gap:12px;
    padding-left:44px;          /* espaço do número */
    align-items:flex-start;
  }
  /* o número volta a aparecer, menor */
  .etapa__numero{
    position:absolute;
    left:0;
    top:2px;
    font-size:26px;
    line-height:1.2;
    letter-spacing:-.5px;
  }
  .etapa__check{ width:34px; height:34px; }
  /* a linha passa exatamente pelo meio das bolinhas */
  .etapa::before{
    left:61px;
    top:17px;
    height:calc(100% + 22px);
    transform:translateX(-50%);
  }
  .etapa__titulo{ font-size:19px; }
  .etapa__texto{ font-size:15px; max-width:none; }
  .etapa:first-child .etapa__texto{ max-width:none; }

  /* --- faixa de logos --- */
  .faixa-logos{ height:auto; padding-block:26px; gap:20px; }
  .faixa-logos__titulo{ font-size:9px; letter-spacing:1.2px; }
  .faixa-logos__grupo{ gap:52px; padding-right:52px; }
  .faixa-logos__item img{ height:40px; }

  /* --- áreas: foto em cima, texto embaixo --- */
  .areas{ padding-block:46px; }
  .areas__cabecalho{ width:100%; gap:16px; }
  .areas__lista{ grid-template-columns:1fr; gap:12px; margin-top:28px; }

  /* os cartões entram conforme a rolagem (a classe "anima" é posta
     pelo JS; sem JS eles aparecem normalmente, sem sumir) */
  .areas__lista.anima .area{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1);
  }
  .areas__lista.anima .area.is-visivel{
    opacity:1;
    transform:none;
  }
  @media (prefers-reduced-motion:reduce){
    .areas__lista.anima .area{ opacity:1; transform:none; transition:none; }
  }
  /* mesma caixa dos cartões de contato (endereço, telefone, horário) */
  .area{
    min-height:0;
    gap:6px;
    padding:18px;
    border-radius:16px;
  }
  .area__titulo{ font-size:19px; line-height:1.25; letter-spacing:-.2px; }
  .area__descricao{ font-size:14.5px; line-height:1.55; }

  .areas__rodape{ flex-direction:column; align-items:flex-start; gap:22px; margin-top:30px; }
  /* no celular esse texto é o mesmo do topo da seção: sai, fica só o botão */
  .areas__rodape .subtitulo{ display:none; }

  /* --- depoimentos: um por vez, com as bolinhas --- */
  .depoimentos{ padding-block:52px; }
  br.so-celular{ display:inline; }
  /* aqui sim, o trecho vai para o vermelho da paleta */
  .titulo strong.destaque-celular{
    background:var(--degrade-vermelho);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .depoimentos__titulo{ font-size:26px; line-height:1.25; }
  .depoimentos__texto{ margin-top:12px; font-size:15px; }
  .depoimentos__texto br{ display:none; }

  .carrossel{ margin-top:26px; }
  .carrossel__trilho{ gap:12px; padding-bottom:2px; }
  /* um cartão inteiro por tela, dentro da margem */
  .depoimento{
    flex:0 0 100%;
    gap:12px;
    padding:22px 20px;
    border-radius:16px;
  }
  .depoimento__estrelas{ font-size:13px; }
  .depoimento__texto{ font-size:15px; line-height:1.6; }
  .depoimento__inicial{ width:42px; height:42px; font-size:14px; }
  .depoimento__nome{ font-size:14px; }
  .depoimento__area{ font-size:12px; }
  .carrossel__bolinhas{ gap:8px; margin-top:20px; }
  .carrossel__bolinha{ width:8px; height:8px; }
  .carrossel__bolinha.is-ativa{ width:22px; }


  /* --- a Dra. Priscila --- */
  .doutora{ padding-block:46px; }
  .doutora__grid{ grid-template-columns:1fr; gap:28px; }
  .doutora__coluna{ gap:18px; }
  .doutora__foto{ border-radius:16px; }
  .selos{ grid-template-columns:1fr 1fr; gap:8px; }
  .selo{ padding:12px 12px; border-radius:12px; gap:2px; }
  .selo__titulo{ font-size:14px; }
  .selo__apoio{ font-size:9.5px; letter-spacing:1.1px; }
  .topico__titulo{ font-size:15px; padding-block:15px; }
  .topico__sinal{ width:14px; height:14px; }
  .topico__sinal::before,.topico__sinal::after{ width:12px; }
  .topico__lista{ font-size:14px; gap:8px; padding-bottom:16px; }
  .topico__lista li{ padding-left:14px; }
  .topico__lista li::before{ width:5px; height:5px; top:8px; }

  /* --- casos na imprensa --- */
  .imprensa{ padding-block:46px; }
  .imprensa__cabecalho{ gap:12px; max-width:none; }
  .imprensa__cabecalho .subtitulo{ max-width:none; }
  .imprensa__lista{ grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
  .caso{ border-radius:16px; }
  .caso__play svg{ width:40px; height:40px; }
  .caso__texto{ padding:16px 16px 18px; }
  .caso__titulo{ font-size:15px; }
  .caso__veiculo{ font-size:12px; margin-top:6px; }

  /* --- equipe --- */
  .equipe{ padding-block:46px; }
  .equipe__cabecalho{ width:100%; gap:14px; }
  .equipe__lista{ grid-template-columns:1fr; gap:12px; margin-top:28px; }
  .pessoa{ padding:14px 16px; gap:14px; border-radius:16px; }
  .pessoa__foto{ width:52px; height:52px; }
  .pessoa__nome{ font-size:15px; }
  .pessoa__cargo{ font-size:13px; }
  .pessoa__oab{ font-size:11px; }
  .equipe__nota{ margin-top:24px; font-size:14px; text-align:left; }

  /* --- contato --- */
  .contato{ padding-block:48px; }
  .contato__grid{ display:flex; flex-direction:column; gap:28px; }
  .contato__bloco{ gap:18px; }
  .contato__dados{ gap:12px; }
  .dado{ padding:18px 18px; gap:14px; border-radius:16px; }
  .dado__icone{ width:22px; height:22px; }
  .dado__rotulo{ font-size:10px; letter-spacing:1.4px; }
  .dado__valor{ font-size:16px; }
  .dado__apoio{ font-size:13px; }

  /* --- rodapé --- */
  .rodape{ padding-block:34px 28px; }
  .rodape__grid{ flex-direction:column; align-items:flex-start; gap:22px; padding-bottom:22px; }
  .rodape__monograma{ width:38px; }
  .rodape__menu{ flex-wrap:wrap; gap:14px 20px; font-size:14px; }
  .rodape__base{ flex-direction:column; align-items:flex-start; gap:8px; font-size:12px; margin-top:18px; }
}


/* telas bem estreitas */
@media (max-width:420px){
  .titulo{ font-size:27px; }
  .imprensa__lista{ grid-template-columns:1fr; }
  .barra-info__numero{ font-size:24px; }
}


/* ==========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   (igual ao do site atual: canto de baixo à direita, 60px)
   ========================================================== */

.whats{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:90;
  width:60px;
  height:60px;
  display:block;
  line-height:0;
  transition:transform .18s ease;
}
.whats img{
  width:100%;
  height:100%;
  object-fit:contain;
  /* uma sombra leve, só para descolar do fundo claro */
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.22));
}
.whats:hover{ transform:scale(1.06); }

@media (max-width:860px){
  .whats{ right:16px; bottom:16px; width:54px; height:54px; }
}

/* parágrafo do rodapé que conta ao Google onde o escritório atua */
.rodape__sobre{
  margin-top:calc(24 * var(--u));
  max-width:calc(900 * var(--u));
  font-size:calc(14 * var(--u));
  line-height:1.7;
  color:var(--texto-suave);
}
.rodape__sobre strong{ font-weight:600; color:var(--texto-corpo); }

@media (max-width:860px){
  .rodape__sobre{ margin-top:18px; max-width:none; font-size:12.5px; line-height:1.65; }
}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

/* quem navega pelo teclado precisa ver onde está */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid var(--vermelho);
  outline-offset:3px;
  border-radius:4px;
}

/* quem pediu menos animação no aparelho não vê nada se mexer */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}