/* ==========================================================================
   PRÉVIA · MODELO
   Estrutura de conversão inspirada no modelo de referência (bloco de
   autoridade, cards com ícone em círculo e filete na base, CTA repetido),
   aplicada sobre a paleta e os componentes de styles.css.
   Carrega depois de styles.css; nenhum token novo de cor.
   --------------------------------------------------------------------------
   1. Componentes    2. Autoridade    3. Por que escolher
   4. Para quem é    5. O que eu avalio    6. Revelação escalonada
   7. Responsivo
   ========================================================================== */

/* ============ 1. COMPONENTES ============ */

/* Ícone em anel dourado — a assinatura dos cards do modelo, na nossa paleta. */
.mdl-icon{
  display:grid;
  place-items:center;
  flex:none;
  width:56px;
  height:56px;
  border:1px solid var(--line-gold);
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.03) 70%);
  color:var(--blue-bright);
}
.mdl-icon svg{ width:24px; height:24px; }

.mdl-num{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1.5px solid var(--blue-bright);
  border-radius:50%;
  font-family:var(--font-head);
  font-size:18px;
  font-weight:700;
  color:var(--blue-bright);
  font-variant-numeric:tabular-nums;
}

/* Card: grafite, borda sutil e filete dourado na base. */
.mdl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:32px 28px 30px;
  border:1px solid var(--line);
  border-bottom:2px solid rgba(var(--accent-rgb),.55);
  border-radius:16px;
  background:var(--surface);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.mdl-card:hover{
  transform:translateY(-4px);
  border-color:rgba(var(--accent-rgb),.3);
  border-bottom-color:var(--blue-bright);
  box-shadow:0 22px 44px -26px var(--glow);
}
.mdl-card h3{
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--white);
}
.mdl-card p{
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
}

.mdl-cards{ display:grid; gap:22px; }
.mdl-cards--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.mdl-cards--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

/* ============ 2. AUTORIDADE ============ */
.mdl-authority{ padding-block:var(--s-120); }

.mdl-authority__grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:72px;
  align-items:start;
}

/* Composição do modelo: retrato em arco com uma forma geométrica atrás.
   O arco tem sempre 4:5, a proporção do retrato original (900x1125), então a
   foto aparece inteira, sem corte nas laterais. A coluna da foto é um
   container: --arch-w é a largura do maior 4:5 que cabe nela, e o arco, o
   losango e as estrelas se posicionam a partir do centro dela. */
.mdl-authority__visual{
  --arch-w:min(88cqw, 70.4cqh);
  position:relative;
  aspect-ratio:4 / 5;
  container-type:size;
}
.mdl-diamond{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--arch-w);
  aspect-ratio:1;
  border:1.5px solid rgba(var(--accent-rgb),.5);
  border-radius:12px;
  transform:translate(-50%, -50%) rotate(45deg) scale(.8);
  box-shadow:0 0 70px -12px var(--glow), inset 0 0 44px -20px var(--glow);
}
.mdl-authority__photo{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--arch-w);
  aspect-ratio:4 / 5;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line-2);
  border-radius:240px 240px 18px 18px;
  background:var(--surface);
  transform:translate(-50%, -50%);
}
.mdl-authority__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.03) saturate(1.04) sepia(.05);
}

/* a estrela maior fica fora da curva do arco, no alto à esquerda; a menor,
   ao lado da borda direita, perto da base */
.mdl-spark{ position:absolute; width:18px; height:18px; color:var(--cyan); }
.mdl-spark--a{ top:calc(50% - var(--arch-w) * .46); left:calc(50% - var(--arch-w) * .5); }
.mdl-spark--b{ top:calc(50% + var(--arch-w) * .5); left:calc(50% + var(--arch-w) * .5 + 8px); width:12px; height:12px; opacity:.8; }

.mdl-authority__copy .section-title{ margin-bottom:28px; text-align:left; }
.mdl-authority__copy p{ margin-bottom:16px; font-size:15px; line-height:1.8; }

/* Desktop: foto e texto dividem a largura ao meio e a coluna da foto estica até
   a altura do texto. Com essa altura o arco 4:5 começa na linha do título e
   termina no último parágrafo; onde a coluna não comporta essa largura (telas
   até ~1200px, em que o texto quebra mais linhas), o arco ocupa a coluna
   inteira e fica centralizado na altura do texto. */
@media (min-width:1024px){
  .mdl-authority__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch;
  }
  .mdl-authority__visual{
    --arch-w:min(100cqw, 80cqh);
    aspect-ratio:auto;
    min-height:520px;
  }
  .mdl-authority__copy > :last-child{ margin-bottom:0; }
}
@media (min-width:1024px) and (max-width:1199px){
  .mdl-authority__grid{ gap:48px; }
}

/* ============ 3. POR QUE ESCOLHER ============ */
.mdl-why{ background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.mdl-why .mdl-card{ align-items:center; text-align:center; }

/* ============ 4. PARA QUEM É ============
   Só o fundo da seção; os cards ficam em para-quem.css. */
.mdl-audience{
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(var(--accent-rgb),.09), transparent 62%),
    radial-gradient(50% 70% at 100% 100%, rgba(var(--accent2-rgb),.05), transparent 60%),
    var(--bg-3);
  border-block:1px solid var(--line);
}

/* ============ 5. O QUE EU AVALIO ============ */
.mdl-check .section-sub{ max-width:560px; margin-inline:auto; }
.mdl-check .mdl-card{ align-items:center; text-align:center; }

/* ============ 5b. ABAS DA AVALIAÇÃO ============
   Sem JS as abas somem e as duas listas aparecem empilhadas; com JS só o
   painel ativo aparece desde o primeiro paint (.js é aplicado no <head>). */
.js .mdl-check .section-head{ margin-bottom:var(--s-32); }

.mdl-tabs{
  display:none;
  width:max-content;
  max-width:100%;
  margin:0 auto var(--s-48);
  padding:5px;
  gap:5px;
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
  background:var(--surface);
}
.js .mdl-tabs{ display:flex; }

/* Mesma escala tipográfica e canto dos .btn do site. */
.mdl-tab{
  min-width:160px;
  height:46px;
  padding-inline:28px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--muted-2);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .28s var(--ease), background-color .28s var(--ease), box-shadow .28s var(--ease);
}
.mdl-tab:hover{ color:var(--white); background:rgba(255,255,255,.04); }
.mdl-tab[aria-selected="true"]{
  background:var(--grad-btn);
  color:var(--on-accent);
  box-shadow:0 8px 22px -12px var(--glow);
}

.js .mdl-tabpanel:not(.is-active){ display:none; }
.mdl-tabpanel:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:8px; border-radius:18px; }
/* Só sem JS as duas listas convivem na tela; com JS o espaço deslocaria a aba 2. */
html:not(.js) .mdl-tabpanel + .mdl-tabpanel{ margin-top:var(--s-48); }

@media (max-width:767px){
  .mdl-tabs{ width:100%; }
  .mdl-tab{ flex:1; min-width:0; padding:0 16px; }
}

/* ============ 5c. PRÓXIMO CAPÍTULO · FOTO NO PALCO ============
   Mesmo efeito do hero: a foto ocupa o lado direito da seção de ponta a
   ponta e a borda esquerda se dissolve no fundo, então o texto avança sobre
   ela. O telão da foto (com letreiro próprio) fica fora do recorte ou sob o
   degradê, para não competir com o título. O mosaico de styles.css continua
   servindo o index.html.
   --stage-rgb repete --bg-2 (#08080A) em canais para os degradês. */
.mdl-chapter--stage{
  --stage-rgb:8,8,10;
  overflow:hidden;
  isolation:isolate;
}
/* Teto de 900px: numa caixa mais larga a foto (escalada pela altura) mostra o
   telão inteiro e o letreiro "Viva o extraordinário" disputa com os
   parágrafos. Com o teto, o recorte fica igual ao de 1280px em qualquer tela. */
.mdl-chapter__bg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(64%, 900px);
  z-index:-2;
}
.mdl-chapter__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* 75%: o final do letreiro do telão ("…RIO") fica fora do recorte e não
     aparece colado ao título */
  object-position:75% 30%;
  filter:contrast(1.03) saturate(1.04) sepia(.05);
}
/* Borda esquerda dissolvida dentro da própria caixa da foto: acompanha a
   largura da caixa em qualquer tela. Passa 2px da borda para cobrir a coluna
   serrilhada da foto quando a posição da caixa é fracionária. */
.mdl-chapter__bg::before{
  content:'';
  position:absolute;
  inset:0 0 0 -2px;
  z-index:1;
  /* 0–9% sólido: em telas largas o recorte começa um pouco antes e o fim do
     letreiro ("…RIO") cai nessa faixa */
  background:
    linear-gradient(90deg,
      var(--bg-2) 0%,
      var(--bg-2) 9%,
      rgba(var(--stage-rgb),.62) 21%,
      rgba(var(--stage-rgb),.16) 37%,
      rgba(var(--stage-rgb),0) 50%);
}
/* Topo e base fundem com as seções vizinhas; a borda direita escurece de leve. */
.mdl-chapter__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(var(--stage-rgb),0) 86%,
      rgba(var(--stage-rgb),.2) 100%),
    linear-gradient(180deg,
      rgba(var(--stage-rgb),.55) 0%,
      rgba(var(--stage-rgb),0) 22%,
      rgba(var(--stage-rgb),0) 62%,
      var(--bg-2) 100%);
}

/* Tablet e mobile: como no hero, a foto vira um bloco no topo e o texto
   começa sobre a plateia escurecida. O escurecimento fica dentro da caixa da
   foto e passa 2px da base para não deixar filete na altura fracionária. */
@media (max-width:1023px){
  .mdl-chapter--stage{ padding-top:0; }
  .mdl-chapter__bg{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:16 / 10;
  }
  .mdl-chapter__bg::after{
    content:'';
    position:absolute;
    inset:0 0 -2px;
    background:
      linear-gradient(180deg,
        rgba(var(--stage-rgb),.35) 0%,
        rgba(var(--stage-rgb),0) 18%,
        rgba(var(--stage-rgb),0) 50%,
        rgba(var(--stage-rgb),.72) 74%,
        var(--bg-2) 97%);
  }
  .mdl-chapter__bg::before,
  .mdl-chapter__scrim{ display:none; }
  .mdl-chapter--stage .chapter{ position:relative; margin-top:-120px; }
}
@media (max-width:767px){
  .mdl-chapter__bg{ aspect-ratio:4 / 5; }
  .mdl-chapter__bg img{ object-position:68% 30%; }
  .mdl-chapter--stage .chapter{ margin-top:-110px; }
}

/* ============ 5d. HERO · RETRATO NO ESCRITÓRIO ============
   No panorâmico do carro o Yvan ficava à direita; neste retrato ele está no
   centro e o rosto ocupa o terço superior. Em tela cheia o título cobriria o
   rosto, então:
   · desktop: a foto ocupa só os 64% da direita e a borda esquerda se dissolve
     no fundo pelo próprio scrim (gradiente alinhado à caixa da foto, sem
     mask-image — sobre fundo liso o resultado é o mesmo);
   · tablet e mobile: a foto vira um bloco no topo e o texto começa abaixo das
     mãos, avançando só sobre a mesa escurecida. */
@media (min-width:1024px){
  .hero--office .hero__bg{ left:auto; width:64%; }
  .hero--office .hero__bg img{ object-position:40% 30%; }
  /* A foto começa em 36% da largura: até ali, fundo sólido; de 36% a ~68%,
     a borda esquerda da foto se dissolve. */
  .hero--office .hero__scrim{
    background:
      linear-gradient(90deg,
        var(--bg) 0%,
        var(--bg) 36%,
        rgba(var(--bg-rgb),.62) 46%,
        rgba(var(--bg-rgb),.16) 58%,
        rgba(var(--bg-rgb),0) 68%,
        rgba(var(--bg-rgb),0) 84%,
        rgba(var(--bg-rgb),.18) 100%),
      linear-gradient(180deg,
        rgba(var(--bg-rgb),.4) 0%,
        rgba(var(--bg-rgb),0) 18%,
        rgba(var(--bg-rgb),0) 64%,
        var(--bg) 100%);
  }
}

@media (max-width:1023px){
  .hero--office{
    flex-direction:column;
    align-items:stretch;
    min-height:0;
  }
  .hero--office .hero__bg{
    position:relative;
    inset:auto;
    aspect-ratio:16 / 10;
  }
  /* O escurecimento vai dentro da caixa da foto e passa 2px da base: a altura
     sai fracionária (ex.: 468,75px) e a borda serrilhada da foto viraria um
     filete sobre o fundo. */
  .hero--office .hero__scrim{ display:none; }
  .hero--office .hero__bg::after{
    content:'';
    position:absolute;
    inset:0 0 -2px;
    background:
      linear-gradient(180deg,
        rgba(var(--bg-rgb),.35) 0%,
        rgba(var(--bg-rgb),0) 18%,
        rgba(var(--bg-rgb),0) 48%,
        rgba(var(--bg-rgb),.72) 72%,
        var(--bg) 97%);
  }
  .hero--office .hero__bg img{ object-position:47% 30%; }
  .hero--office .hero__inner{
    min-height:0;
    margin-top:-160px;
    padding-block:0 var(--s-64);
  }
}

@media (max-width:767px){
  /* origem retrato 753x941 = 4:5, sem corte */
  .hero--office .hero__bg{ aspect-ratio:4 / 5; }
  .hero--office .hero__inner{
    margin-top:-140px;
    padding-bottom:var(--s-48);
  }
}

/* ============ 5d·2. HERO · TEXTO E HIERARQUIA ============
   Composição editorial de consultoria high-ticket: headline → subheadline →
   apoio → CTA. A headline domina; cada grupo tem respiro próprio. O luxo vem de tipografia, espaço e contraste: sem glow,
   sem ícones, sem animação além da entrada que o hero já tinha. */
.hero--office .hero__copy{ max-width:620px; }

.hero--office .hero__title{
  font-size:clamp(34px, 3.9vw, 58px);
  line-height:1.04;
  font-weight:700;
  letter-spacing:-.012em;
  text-transform:uppercase;
  color:var(--ivory);
  text-shadow:0 2px 18px rgba(var(--bg-rgb),.35);
}
.hero__line{ display:block; }
.hero__line--accent{ color:var(--blue-bright); }

.hero__sub{
  margin-top:var(--s-32);
  font-family:var(--font-head);
  font-size:clamp(20px, 1.75vw, 25px);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--ivory);
}

.hero--office .hero__lead{
  margin-top:var(--s-24);
  max-width:510px;
  font-size:15px;
  line-height:1.85;
  color:var(--muted-2);
}

.hero--office .hero__copy .hero__cta{ margin-top:40px; }

/* CTA único: champanhe sólido, sem brilho; no hover só sobe 2px e clareia. */
.hero__cta{
  --btn-h:56px;
  padding-inline:40px;
  border-radius:var(--radius-sm);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  box-shadow:0 12px 28px -18px rgba(0,0,0,.7);
  transition:transform .26s var(--ease), filter .26s var(--ease), box-shadow .26s var(--ease);
}
.hero__cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 18px 32px -18px rgba(0,0,0,.75);
}
.hero__cta:active{
  transform:translateY(0);
  filter:brightness(.98);
}

@media (min-width:1024px){
  .hero--office .hero__inner{ padding-block:var(--s-80); }
}
@media (max-width:1023px){
  .hero--office .hero__title{ font-size:clamp(34px, 5.2vw, 48px); }
}
@media (max-width:767px){
  /* dimensionada para a linha mais larga ("NEGÓCIOS NÃO SÃO") caber inteira
     com folga: ~9,6px de largura por px de fonte */
  .hero--office .hero__title{ font-size:clamp(26px, 8.8vw, 36px); line-height:1.06; }
  .hero__sub{ margin-top:var(--s-24); font-size:20px; }
  .hero--office .hero__lead{ margin-top:var(--s-16); font-size:14.5px; line-height:1.8; }
  .hero--office .hero__copy .hero__cta{ margin-top:var(--s-32); }
}

/* ============ 5e. FAIXA DOURADA · MARCAS ============
   As duas marcas do Yvan ladeiam o título. No HTML o título vem primeiro
   (ordem de leitura) e o grid leva as logos para as laterais; abaixo de
   1024px elas descem para uma linha sob o título. */
.cta-band--logos .cta-band__inner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:"carro title imoveis";
  align-items:center;
  column-gap:var(--s-48);
}
.cta-band--logos h2{ grid-area:title; }
.cta-band__logo{
  width:min(100%, 250px);
  height:auto;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.25));
}
.cta-band__logo--carro{ grid-area:carro; justify-self:start; }
.cta-band__logo--imoveis{ grid-area:imoveis; justify-self:end; }

@media (max-width:1023px){
  .cta-band--logos .cta-band__inner{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-areas:"title title" "carro imoveis";
    column-gap:var(--s-32);
    row-gap:var(--s-32);
  }
  .cta-band__logo{ width:min(100%, 200px); }
  .cta-band__logo--carro{ justify-self:end; }
  .cta-band__logo--imoveis{ justify-self:start; }
}
@media (max-width:767px){
  .cta-band--logos .cta-band__inner{ column-gap:var(--s-16); row-gap:var(--s-24); }
  .cta-band__logo{ width:min(100%, 150px); }
}

/* ============ 5f. RODAPÉ ============
   Estrutura do componente de rodapé em 4 colunas (marca, links, redes,
   inscrição) traduzida para os tokens do site: fundo grafite, títulos em
   Manrope, links cinza que acendem em dourado. A inscrição não tem backend:
   abre o WhatsApp com o nome preenchido (ver modelo.js). A faixa legal de
   styles.css continua embaixo. */
.mdl-footer{ padding-top:0; }

.mdl-footer__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.35fr);
  gap:var(--s-48);
  padding-block:var(--s-64);
  border-bottom:1px solid var(--line);
}

.mdl-footer__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-16);
}
.mdl-footer__logo{ display:inline-block; border-radius:8px; }
.mdl-footer__logo img{ width:min(100%, 260px); height:auto; }
.mdl-footer__brand p{
  max-width:320px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--muted);
}

.mdl-footer__col h3{
  margin-bottom:var(--s-16);
  font-family:var(--font-head);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--white);
}
.mdl-footer__list{ display:grid; gap:6px; }
.mdl-footer__list a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:32px;
  font-size:13.5px;
  color:var(--muted);
  transition:color .25s var(--ease);
}
.mdl-footer__list a:hover{ color:var(--blue-bright); }
.mdl-footer__list svg{ flex:none; width:18px; height:18px; }

/* Campo com o botão encaixado à direita, como no componente. */
.mdl-footer__form{ position:relative; max-width:360px; }
.mdl-footer__field{ position:relative; }
.mdl-footer__field input{
  width:100%;
  height:46px;
  padding:0 150px 0 14px;
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:13.5px;
  transition:border-color .25s var(--ease);
}
.mdl-footer__field input::placeholder{ color:var(--muted); }
.mdl-footer__field input:hover{ border-color:rgba(var(--accent-rgb),.4); }
.mdl-footer__field button{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  padding-inline:16px;
  border:0;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--grad-btn);
  color:var(--on-accent);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:filter .25s var(--ease);
}
.mdl-footer__field button:hover{ filter:brightness(1.08); }
.mdl-footer__field :disabled{ cursor:not-allowed; opacity:.5; }

/* Aviso sobre o campo durante os 3 s de confirmação. */
.mdl-footer__status{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  background:rgba(var(--bg-rgb),.82);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  font-size:13px;
  font-weight:600;
  color:var(--blue-bright);
  opacity:0;
  visibility:hidden;
  /* ao sair, a visibilidade só muda depois do fade; ao entrar, na hora */
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.mdl-footer__form.is-sent .mdl-footer__status{
  opacity:1;
  visibility:visible;
  transition:opacity .3s var(--ease), visibility 0s;
}

.mdl-footer__hint{
  margin-top:12px;
  max-width:360px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted);
}

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

@media (min-width:768px){
  .mdl-footer__col--center{ justify-self:center; }
}
@media (max-width:1023px){
  .mdl-footer__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:767px){
  .mdl-footer__grid{ grid-template-columns:1fr; gap:var(--s-32); padding-block:var(--s-48); }
  .mdl-footer__form,
  .mdl-footer__hint{ max-width:none; }
}

/* ============ 5g. FAQ · FOTO + PERGUNTAS ============
   A coluna da esquerda vira uma foto e o título (com o "FAQ" fantasma) sobe
   para cima das perguntas. Os cartões de contato saíram: WhatsApp e
   Instagram seguem na última resposta e no rodapé. No desktop a foto estica
   até a altura da coluna das perguntas; a imagem cobre a caixa. */
.mdl-faq .faq{ align-items:stretch; }

.mdl-faq__photo{
  position:relative;
  min-height:420px;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line-2);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 44px 90px -48px rgba(0,0,0,.9);
}
.mdl-faq__photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 32%;
  filter:contrast(1.03) saturate(1.04) sepia(.05);
}

.mdl-faq .qa__body a{
  color:var(--blue-bright);
  text-decoration:underline;
  text-underline-offset:3px;
}
.mdl-faq .qa__body a:hover{ color:var(--cyan); }

@media (max-width:1023px){
  .mdl-faq__photo{ min-height:0; aspect-ratio:16 / 10; }
  .mdl-faq__photo img{ object-position:50% 26%; }
}
@media (max-width:767px){
  .mdl-faq__photo{ aspect-ratio:4 / 3; border-radius:14px; }
}

/* ============ 5h. NAVBAR ============
   Adaptação do header do componente (21st.dev/shadcn) à marca: barra
   transparente no topo que, ao rolar, vira vidro escuro com desfoque e ganha a
   linha de base; links como "botões fantasma" com fundo arredondado no hover;
   os botões do site na altura dos links. Abaixo de 1024px: botão quadrado com
   o ícone que vira X e menu em tela cheia sob a barra, com a página travada
   atrás (.nav-open no <html>, posta por modelo.js). */
:root{ --nav-h:64px; }

/* A linha de base é sombra interna, não borda: a barra fica com exatamente
   --nav-h de altura e o menu mobile encaixa logo abaixo dela. */
.mdl-nav{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--nav-h);
  background-color:transparent;
  box-shadow:inset 0 -1px 0 transparent;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.mdl-nav.is-stuck{
  background-color:rgba(var(--bg-rgb),.95);
  box-shadow:inset 0 -1px 0 var(--line-2);
}
.nav-open .mdl-nav{
  background-color:rgba(var(--bg-rgb),.97);
  box-shadow:none;
}

.mdl-nav__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-24);
  height:100%;
}
/* o padding cria o fundo do hover; a margem negativa mantém o logo alinhado
   com a borda do conteúdo */
.mdl-nav__brand{
  margin-left:-8px;
  padding:8px;
  border-radius:8px;
  transition:background-color .2s var(--ease);
}
.mdl-nav__brand:hover{ background-color:rgba(255,255,255,.06); }

.mdl-nav__desktop{
  display:flex;
  align-items:center;
  gap:var(--s-8);
}
.mdl-nav__link{
  display:inline-flex;
  align-items:center;
  height:40px;
  padding-inline:var(--s-16);
  border-radius:8px;
  color:var(--muted-2);
  font-size:13.5px;
  font-weight:500;
  white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.mdl-nav__link:hover{
  background-color:rgba(255,255,255,.06);
  color:var(--ivory);
}
.mdl-nav__btn{ --btn-h:40px; padding-inline:18px; font-size:11.5px; letter-spacing:.08em; }
.mdl-nav__link + .mdl-nav__btn{ margin-left:var(--s-8); }

.mdl-nav__toggle{
  position:relative;
  display:none;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--line-2);
  border-radius:8px;
  background-color:var(--bg);
  color:var(--ivory);
  cursor:pointer;
  transition:background-color .2s var(--ease);
}
.mdl-nav__toggle:hover{ background-color:var(--surface); }
/* área de toque de 44px, como os outros ícones do site */
.mdl-nav__toggle::after{
  content:"";
  position:absolute;
  inset:-3px;
}
.mdl-nav__toggle svg{
  width:20px;
  height:20px;
  transition:transform .3s ease-in-out;
}
/* Ícone do componente: um único traço desenha as linhas de cima e de baixo
   (tracejado 12/63). Aberto, a janela do tracejado desliza para o trecho
   vertical e o ícone gira -45°, formando o X com a linha do meio. */
.mdl-nav__toggle-line{
  stroke-dasharray:12 63;
  transition:stroke-dasharray .3s ease-in-out, stroke-dashoffset .3s ease-in-out;
}
.mdl-nav__toggle[aria-expanded="true"] svg{ transform:rotate(-45deg); }
.mdl-nav__toggle[aria-expanded="true"] .mdl-nav__toggle-line{
  stroke-dasharray:20 300;
  stroke-dashoffset:-32.42px;
}

.mdl-nav__menu{
  position:fixed;
  top:var(--nav-h);
  right:0;
  bottom:0;
  left:0;
  z-index:59;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-top:1px solid var(--line-2);
  background-color:rgba(var(--bg-rgb),.97);
}
.mdl-nav__menu-inner{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--s-24);
  width:100%;
  height:100%;
  padding:var(--s-16) var(--gutter) max(var(--s-24), env(safe-area-inset-bottom));
  overflow-y:auto;
  animation:mdl-nav-in .15s ease-out;
}
@keyframes mdl-nav-in{ from{ transform:scale(.97); } }
.mdl-nav__menu-links{ display:grid; gap:var(--s-8); }
/* margem negativa: o texto alinha com o logo, o fundo do hover sai para fora */
.mdl-nav__menu .mdl-nav__link{
  height:48px;
  margin-inline:calc(var(--s-16) * -1);
  color:var(--ivory);
  font-size:15px;
}
.mdl-nav__menu-actions{ display:flex; flex-direction:column; gap:var(--s-8); }
.mdl-nav__menu-actions .btn{ --btn-h:48px; width:100%; }

@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mdl-nav.is-stuck{
    background-color:rgba(var(--bg-rgb),.62);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }
  .nav-open .mdl-nav,
  .mdl-nav__menu{
    background-color:rgba(var(--bg-rgb),.84);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }
}

/* A trava de rolagem, o painel e o botão flutuante escondido só existem abaixo
   de 1024px: se o menu ficar aberto quando a tela vira desktop, nada disso
   sobra. O botão flutuante do WhatsApp cobria o botão do menu. */
@media (max-width:1023px){
  :root{ --nav-h:56px; }
  .mdl-nav__desktop{ display:none; }
  .mdl-nav__toggle{ display:grid; }
  .nav-open,
  .nav-open body{ overflow:hidden; }
  .nav-open .wa-float{ visibility:hidden; }
}
@media (min-width:1024px){
  .mdl-nav__menu{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .mdl-nav__menu-inner{ animation:none; }
  .mdl-nav__toggle svg,
  .mdl-nav__toggle-line{ transition-duration:.12s; }
}

/* ============ 6. REVELAÇÃO ESCALONADA ============
   .js .reveal redefine `transition`; nos cards isso apagaria a transição de
   hover, então as duas são declaradas juntas. main.js zera o atraso depois da
   entrada para o hover não herdar o escalonamento. */
.js .mdl-card.reveal{
  transition:opacity .6s var(--ease), transform .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.js :where(.mdl-cards) > .reveal:nth-child(2){ transition-delay:.05s; }
.js :where(.mdl-cards) > .reveal:nth-child(3){ transition-delay:.1s; }
.js :where(.mdl-cards) > .reveal:nth-child(4){ transition-delay:.15s; }
.js :where(.mdl-cards) > .reveal:nth-child(5){ transition-delay:.2s; }
.js :where(.mdl-cards) > .reveal:nth-child(6){ transition-delay:.25s; }
.js :where(.mdl-cards) > .reveal:nth-child(7){ transition-delay:.3s; }
.js :where(.mdl-cards) > .reveal:nth-child(8){ transition-delay:.35s; }

/* ============ 7. RESPONSIVO ============ */
@media (max-width:1023px){
  .mdl-authority__grid{ grid-template-columns:1fr; gap:56px; }
  .mdl-authority__visual{
    width:100%;
    max-width:440px;
    margin-inline:auto;
  }

  .mdl-cards--3,
  .mdl-cards--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

}

@media (max-width:767px){
  .mdl-cards--3,
  .mdl-cards--4{ grid-template-columns:1fr; gap:14px; }
  .mdl-card{ padding:26px 22px; }

  .mdl-authority{ padding-block:var(--s-80); }
  .mdl-authority__copy p{ font-size:14.5px; }
}