/* Clínica Paraluppi — folha única, branch redesign-editorial.
   Conceito: consultório com assinatura. Foto grande no topo, selo de CRO como
   peça de autoridade, uma seção escura para o perfil, resto claro e calmo.
   Tokens no :root; provisórios até o vetor do logo chegar. */

:root {
  --cor-fundo: #FBFAF7;
  --cor-fundo-2: #F0F2EF;
  --cor-branco: #FFFFFF;
  --cor-texto: #1F2624;
  --cor-texto-2: #5E6664;
  --cor-linha: #D7DCD9;
  --cor-acento: #3A6B64;         /* verde-petróleo */
  --cor-acento-escuro: #29504B;
  --cor-acento-profundo: #1B3532; /* seção escura */
  --cor-acento-texto: #F3F7F5;
  --cor-acento-suave: rgba(243, 247, 245, 0.7);
  --cor-whatsapp: #25D366;

  --cor-todo-fundo: #FFF176;
  --cor-todo-borda: #B8860B;
  --cor-todo-texto: #3B2E00;

  --fonte-titulo: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --fonte-corpo: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --t-corpo: 1.0625rem;
  --t-pequeno: 0.9375rem;
  --t-micro: 0.8125rem;
  --t-h2: 2.25rem;
  --t-h1: clamp(2.75rem, 11vw, 3.75rem);
  --t-lead: 1.2rem;

  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;
  --esp-6: 6rem;

  --margem: 1.25rem;       /* margem lateral da página */
  --largura-texto: 40rem;
  --largura-max: 80rem;
  --raio: 3px;
  --barra-altura: 4.25rem; /* barra fixa do celular */
  --altura-cabecalho: 5.1rem; /* 1rem de padding + logo de 3.08rem + 1rem */
}

@media (min-width: 48em) {
  :root {
    --t-corpo: 1.125rem;
    --t-h2: 3rem;
    --t-h1: clamp(3.5rem, 6.2vw, 5.5rem);
    --t-lead: 1.375rem;
    --esp-5: 6rem;
    --esp-6: 9rem;
    --margem: 3rem;
  }
}
@media (min-width: 80em) {
  :root { --margem: 5rem; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--barra-altura) + env(safe-area-inset-bottom));
}
@media (min-width: 48em) {
  body { padding-bottom: 0; }
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 var(--esp-3);
  letter-spacing: -0.015em;
}
h2 { font-size: var(--t-h2); }

p { margin: 0 0 var(--esp-2); }
ul, ol { margin: 0 0 var(--esp-2); padding-left: 1.2em; }

/* Links de texto: sem sublinhado estático. Um traço fino nasce à esquerda e
   desliza até cobrir a palavra ao passar o mouse ou focar pelo teclado. */
a {
  color: var(--cor-acento-escuro);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
}
a:hover, a:focus-visible {
  color: var(--cor-texto);
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  a { transition: color 0.2s ease; }
}

/* Marcas, botões e cartões-link não usam esse traço: eles já se distinguem
   por forma, cor de fundo ou ícone, então o sublinhado só poluiria. */
.marca, .botao, .rodape__marca, .flutuante, .barra {
  background-image: none;
}

/* Links com ícone (WhatsApp, Instagram, e-mail): o traço cobre tudo, do
   ícone ao fim do texto, como um único bloco clicável. */
.link-icone, .rodape__contato a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
}
.link-icone i, .rodape__contato a i {
  width: 1em;
  text-align: center;
}

:focus-visible { outline: 3px solid var(--cor-acento); outline-offset: 3px; }

.pular {
  position: absolute; left: -999px; top: var(--esp-2);
  background: var(--cor-texto); color: var(--cor-fundo);
  padding: var(--esp-1) var(--esp-2); z-index: 100;
}
.pular:focus { left: var(--esp-2); }

/* Placeholder visível. Some do ar quando o conteúdo chegar. */
.todo {
  background: var(--cor-todo-fundo);
  color: var(--cor-todo-texto);
  outline: 2px dashed var(--cor-todo-borda);
  outline-offset: 1px;
  padding: 0 0.25em;
  font-family: var(--fonte-corpo);
  font-size: 0.9em;
  font-style: normal;
  font-weight: 400;
}
.todo--selo {
  position: absolute; top: var(--esp-1); left: var(--esp-1); z-index: 2;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
}

/* Utilidades de layout */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.secao { padding: var(--esp-5) var(--margem); }
.secao--suave { background: var(--cor-fundo-2); }
.secao--escura { background: var(--cor-acento-profundo); color: var(--cor-acento-texto); }
.secao--escura a { color: var(--cor-acento-texto); }
.secao--escura .todo { color: var(--cor-todo-texto); }

.secao__cabeca { max-width: var(--largura-max); margin-inline: auto; margin-bottom: var(--esp-4); }
.secao__intro { font-size: var(--t-lead); line-height: 1.4; max-width: 34ch; color: var(--cor-texto-2); }
.secao__acao { margin-top: var(--esp-4); max-width: var(--largura-max); margin-inline: auto; }

/* Botões */
.botao {
  display: inline-block;
  background: var(--cor-acento-escuro);
  color: var(--cor-acento-texto);
  text-decoration: none;
  font-weight: 500;
  padding: 0.95em 1.6em;
  border-radius: var(--raio);
  line-height: 1.2;
  transition: background-color 0.15s ease;
}
.botao:hover, .botao:focus-visible { background: var(--cor-texto); color: var(--cor-fundo); }
.botao--pequeno { padding: 0.55em 1em; font-size: var(--t-pequeno); }
.botao--claro { background: var(--cor-acento-texto); color: var(--cor-acento-profundo); }
.botao--claro:hover, .botao--claro:focus-visible { background: var(--cor-branco); color: var(--cor-acento-profundo); }

/* Cabeçalho */
.cabecalho { position: relative; z-index: 3; }
.cabecalho__inner {
  max-width: var(--largura-max);
  margin-inline: auto;
  padding: var(--esp-2) var(--margem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
}
.marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.marca__p { width: 2rem; height: auto; flex: none; fill: currentColor; }
.marca__nome { font-size: 0.8rem; line-height: 1.15; letter-spacing: 0.18em; text-transform: uppercase; }

.nav { display: none; gap: var(--esp-3); }
.nav a { color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.nav a:hover, .nav a:focus-visible { color: var(--cor-texto); }
.cabecalho__acao { display: none; }
@media (min-width: 60em) {
  .nav { display: flex; }
  .cabecalho__acao { display: inline-block; }
}

/* Na página inicial o cabeçalho fica por cima da foto do topo, em texto claro.
   O contraste vem do véu do topo (.hero__fundo::after). */
.cabecalho--sobre-foto { position: absolute; inset: 0 0 auto; color: var(--cor-acento-texto); }
.cabecalho--sobre-foto :focus-visible { outline-color: var(--cor-acento-texto); }
.cabecalho--sobre-foto .nav a { color: var(--cor-acento-texto); }
.cabecalho--sobre-foto .nav a:hover, .cabecalho--sobre-foto .nav a:focus-visible { color: var(--cor-branco); }
.cabecalho--sobre-foto .botao { background: var(--cor-acento-texto); color: var(--cor-acento-profundo); }
.cabecalho--sobre-foto .botao:hover, .cabecalho--sobre-foto .botao:focus-visible { background: var(--cor-branco); color: var(--cor-acento-profundo); }

/* 1. Topo: foto do consultório de fundo, véu verde, texto claro por cima.
   Contraste: ver o comentário do véu, em .hero__fundo::after. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  padding-top: var(--altura-cabecalho); /* o cabeçalho fica por cima da foto */
  background: var(--cor-acento-profundo); /* enquanto a foto não chega */
  color: var(--cor-acento-texto);
}
.hero :focus-visible { outline-color: var(--cor-acento-texto); }

.hero__fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* Enquadrada na cadeira e no equipo, que ficam embaixo à direita da foto.
   Celular: a foto entra inteira na altura; presa à direita, cadeira e equipo
   aparecem inteiros. Desktop: a foto escala pela largura e o corte vertical
   em 80% vai da janela até a base da cadeira. */
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 80%; }
/* Véu uniforme na foto inteira, cabeçalho incluído, sem parte transparente,
   em todas as larguras. Com 60%, sobre um pixel branco da foto o texto creme
   fica em 3,5:1: passa pro título (texto grande, mínimo 3:1), fica abaixo dos
   4,5:1 da WCAG pro texto corrido. Com 70% passaria (4,7:1); com 80%, 6,5:1. */
.hero__fundo::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(27, 53, 50, 0.6);
}

/* Celular: altura pelo conteúdo. Grade pra o selo ficar junto do título. */
.hero__texto {
  display: grid;
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding: var(--esp-5) var(--margem) var(--esp-4);
}

.hero__titulo {
  font-size: var(--t-h1);
  line-height: 0.95;
  max-width: 10.2ch; /* quebra em "Clínica / Paraluppi": a caixa encosta no texto e o selo fica junto */
  margin-bottom: var(--esp-3);
  color: inherit;
}

.hero__lead {
  font-size: var(--t-lead); line-height: 1.4;
  max-width: 34ch;
  margin-bottom: var(--esp-4);
}
.hero__acao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); margin: 0; }
.hero__horario { font-size: var(--t-pequeno); line-height: 1.4; }

/* Desktop: altura da tela. O véu é o mesmo do celular. */
@media (min-width: 48em) {
  .hero { min-height: min(100svh, 57rem); }
  .hero__texto { padding-block: var(--esp-6) var(--esp-5); }
}

/* O selo de CRO, ao lado do título, formando um bloco só com ele. Abaixo de
   376px "Odontologia" não cabe ao lado do selo, então ele sobe pra cima do
   título. Com a foto enquadrada na cadeira, o que fica atrás do selo depende
   da largura: conferido com as caixas da cadeira e do equipo (ver
   _docs/identidade.md). Se trocar a foto ou o enquadramento de .hero__img,
   conferir de novo. */
.selo {
  grid-row: 1;
  justify-self: start;
  display: block;
  width: 5.5rem;
  margin-bottom: var(--esp-2);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
/* Coluna 1: título. Coluna 2: selo. Coluna 3: sobra. O espaço entre título e
   selo é margem do selo, não column-gap, pra não gastar largura duas vezes:
   em 376px, com barra de rolagem, "Odontologia" cabe com 5px. */
@media (min-width: 23.5em) {
  .hero__texto { grid-template-columns: minmax(0, max-content) auto 1fr; }
  .hero__titulo { grid-column: 1; grid-row: 1; }
  .hero__lead, .hero__acao { grid-column: 1 / -1; }
  .selo { grid-column: 2; align-self: center; margin: 0 0 0 var(--esp-2); }
}
@media (min-width: 48em) {
  .selo { width: 8.5rem; margin-left: var(--esp-4); }
}
.selo img { width: 100%; height: auto; display: block; }

/* Credenciais: linha fina, quatro pares rótulo + valor */
.credenciais {
  list-style: none;
  margin: var(--esp-5) auto 0;
  padding: var(--esp-3) var(--margem);
  max-width: var(--largura-max);
  border-top: 1px solid var(--cor-linha);
  border-bottom: 1px solid var(--cor-linha);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3) var(--esp-3);
  font-size: var(--t-pequeno);
}
.credenciais li { padding: 0; line-height: 1.4; }
.credenciais span {
  display: block;
  font-size: var(--t-micro);
  color: var(--cor-texto-2);
  margin-bottom: 0.15em;
}
@media (min-width: 48em) {
  .credenciais { grid-template-columns: repeat(4, 1fr); gap: var(--esp-4); }
}

/* 2. Galeria: rolagem horizontal no celular, mosaico no desktop */
.galeria {
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  padding-inline: var(--margem);
  margin-inline: calc(-1 * var(--margem));
  padding-bottom: var(--esp-2);
  -webkit-overflow-scrolling: touch;
}
.galeria::-webkit-scrollbar, .avaliacoes::-webkit-scrollbar { height: 4px; }
.galeria::-webkit-scrollbar-thumb, .avaliacoes::-webkit-scrollbar-thumb { background: var(--cor-linha); border-radius: 2px; }

.foto {
  position: relative;
  margin: 0;
  flex: 0 0 76vw;
  max-width: 22rem;
  scroll-snap-align: start;
}
.foto img, .foto__vazio {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 80dvh;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--cor-fundo-2);
}
.foto figcaption {
  font-size: var(--t-pequeno);
  color: var(--cor-texto-2);
  margin-top: var(--esp-1);
  line-height: 1.35;
}

.foto__vazio {
  border: 1px dashed var(--cor-linha);
  background: var(--cor-branco);
  display: grid; place-items: center;
  padding: var(--esp-2); text-align: center;
  font-size: var(--t-pequeno);
}
.foto__vazio--retrato { aspect-ratio: 3 / 4; border-color: rgba(243, 247, 245, 0.3); background: rgba(255, 255, 255, 0.04); }
.foto__vazio--mapa { aspect-ratio: 4 / 3; }

@media (min-width: 48em) {
  .galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* A foto--grande ocupa 2 linhas + 1 vão. Assim ela fecha em 80dvh, nunca passa da tela. */
    grid-auto-rows: calc(40dvh - var(--esp-3));
    gap: var(--esp-3);
    overflow: visible;
    margin-inline: auto;
    padding: 0;
    max-width: var(--largura-max);
  }
  .foto { flex: none; max-width: none; display: flex; flex-direction: column; }
  .foto picture { display: block; flex: 1; min-height: 0; }
  .foto img { aspect-ratio: auto; max-height: none; height: 100%; }
  .foto--grande { grid-column: span 2; grid-row: span 2; }
}

/* Foto em tela cheia. É um <dialog>: Esc fecha sozinho. */
.foto[role="button"] { cursor: zoom-in; }
.foto[role="button"]:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 4px; border-radius: var(--raio); }
body:has(.lightbox[open]) { overflow: hidden; }
.lightbox {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(27, 53, 50, 0.6); /* mesmo véu do topo */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px); /* sem isso o texto da página compete com a foto */
  color: var(--cor-fundo);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__figura { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); }
.lightbox__img { max-width: 100vw; max-height: calc(100dvh - 7rem); object-fit: contain; }
.lightbox__legenda { font-size: var(--t-pequeno); opacity: 0.85; padding-inline: var(--margem); text-align: center; }
.lightbox__botao {
  position: absolute;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 0;
  background: var(--cor-fundo);
  color: var(--cor-acento-profundo);
  font-size: 1.25rem;
  cursor: pointer;
}
.lightbox__botao:hover { background: var(--cor-acento); color: var(--cor-fundo); }
.lightbox__botao:focus-visible { outline: 2px solid var(--cor-fundo); outline-offset: 3px; }
.lightbox__fechar { top: var(--esp-2); right: var(--esp-2); }
.lightbox__seta { top: 50%; transform: translateY(-50%); }
.lightbox__seta--prev { left: var(--esp-1); }
.lightbox__seta--next { right: var(--esp-1); }

/* 3. Perfil, na seção escura */
.perfil {
  max-width: var(--largura-max);
  margin-inline: auto;
  display: grid;
  gap: var(--esp-4);
}
.perfil__retrato { max-width: 18rem; }
.perfil__retrato img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: var(--raio);
}
.perfil__nome { font-family: var(--fonte-titulo); font-size: 1.8rem; line-height: 1.15; margin-bottom: var(--esp-2); }
.perfil__como { font-size: var(--t-lead); line-height: 1.45; max-width: 36ch; color: var(--cor-acento-suave); margin-bottom: var(--esp-4); }

.ficha { margin: 0; }
.ficha > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--esp-2);
  padding: var(--esp-2) 0;
  border-top: 1px solid rgba(243, 247, 245, 0.18);
}
.ficha > div:last-child { border-bottom: 1px solid rgba(243, 247, 245, 0.18); }
.ficha dt { font-size: var(--t-micro); color: var(--cor-acento-suave); padding-top: 0.25em; }
.ficha dd { margin: 0; }

@media (min-width: 48em) {
  .perfil { grid-template-columns: 4fr 7fr; gap: var(--esp-6); align-items: start; }
  .perfil__retrato { max-width: none; }
}

/* 4. Tratamentos: lista que abre */
.tratamentos { max-width: var(--largura-max); margin-inline: auto; }
.tratamento { border-top: 1px solid var(--cor-linha); }
.tratamento:last-child { border-bottom: 1px solid var(--cor-linha); }
.tratamento summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-3) 0;
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  line-height: 1.15;
}
.tratamento summary::-webkit-details-marker { display: none; }
.tratamento summary::after {
  content: "+";
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--cor-acento);
  transition: transform 0.2s ease;
  flex: none;
}
.tratamento[open] summary::after { transform: rotate(45deg); }
.tratamento p { margin: 0 0 var(--esp-3); max-width: 60ch; color: var(--cor-texto-2); }

@media (min-width: 48em) {
  .tratamento summary { font-size: 2.25rem; }
  .tratamento p { padding-left: 0; }
}

/* 5. Avaliações */
/* Rolagem horizontal em faixa, em todas as telas, com setas dos lados. */
.avaliacoes__faixa { display: flex; align-items: center; gap: var(--esp-1); margin-bottom: var(--esp-3); }
.avaliacoes__seta {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--cor-linha);
  background: var(--cor-fundo);
  color: var(--cor-acento);
  font-size: 1rem;
  cursor: pointer;
}
.avaliacoes__seta:hover { background: var(--cor-acento); color: var(--cor-fundo); }
.avaliacoes {
  list-style: none;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--esp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--esp-2);
  -webkit-overflow-scrolling: touch;
}
.avaliacao { flex: 0 0 80vw; max-width: 22rem; scroll-snap-align: start; }
.avaliacao blockquote {
  position: relative; margin: 0 0 var(--esp-1); padding-left: 1.5rem;
  font-family: var(--fonte-titulo); font-size: 1.45rem; line-height: 1.3;
}
.avaliacao blockquote::before {
  content: "\201C"; position: absolute; left: 0; top: -0.1em;
  font-size: 2.4em; line-height: 1; color: var(--cor-acento);
}
.avaliacao__autor { font-size: var(--t-pequeno); color: var(--cor-texto-2); padding-left: 1.5rem; }
.avaliacao__nota { color: var(--cor-acento); letter-spacing: 0.1em; margin-left: 0.4em; }
.avaliacoes__fonte { font-size: var(--t-pequeno); color: var(--cor-texto-2); max-width: var(--largura-max); margin-inline: auto; }

/* 6. Contato */
.contato { max-width: var(--largura-max); margin-inline: auto; display: grid; gap: var(--esp-4); }
@media (min-width: 48em) {
  .contato { grid-template-columns: 7fr 5fr; gap: var(--esp-6); align-items: start; }
}
.contato__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--raio);
  background: var(--cor-fundo-2);
}
.contato__endereco { font-style: normal; margin-bottom: var(--esp-2); line-height: 1.5; }
.contato__mapa-link { display: inline-block; margin-top: var(--esp-2); font-size: var(--t-pequeno); }

.horarios { border-collapse: collapse; width: 100%; max-width: 24rem; margin: var(--esp-3) 0; }
.horarios caption { text-align: left; font-family: var(--fonte-titulo); font-size: 1.4rem; padding-bottom: var(--esp-1); }
.horarios th, .horarios td { text-align: left; padding: var(--esp-1) 0; border-top: 1px solid var(--cor-linha); font-weight: 400; }
.horarios tr:last-child th, .horarios tr:last-child td { border-bottom: 1px solid var(--cor-linha); }
.horarios td { text-align: right; }
.contato__telefone { font-size: var(--t-pequeno); }
.contato__telefone i { color: var(--cor-acento); }

/* Rodapé */
.rodape {
  background: var(--cor-acento-escuro);
  color: var(--cor-acento-texto);
  padding-top: var(--esp-5);
  font-size: var(--t-pequeno);
  line-height: 1.55;
}
.rodape__inner { display: grid; gap: var(--esp-4); padding-bottom: var(--esp-4); }
@media (min-width: 48em) {
  .rodape__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--esp-5); align-items: start; }
}
.rodape__col > :last-child { margin-bottom: 0; }
.rodape__marca { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: var(--esp-1); }
.rodape__tagline { color: var(--cor-acento-suave); margin-bottom: var(--esp-3); }
.rodape__endereco { font-style: normal; }
.rodape__titulo { font-family: var(--fonte-titulo); font-size: 1.35rem; line-height: 1.2; margin-bottom: var(--esp-2); }
.rodape__lista { list-style: none; padding: 0; margin: 0; }
.rodape__lista li { padding: 0.2em 0; }
/* Alvo de toque de 24px (WCAG 2.5.8): esses links ficavam em 22 */
.rodape__lista a, .rodape__links a { display: inline-flex; min-height: 24px; }
.rodape a { color: var(--cor-acento-texto); }
.rodape a:hover, .rodape a:focus-visible { color: #fff; }
.rodape :focus-visible { outline-color: var(--cor-acento-texto); }
.rodape__base {
  border-top: 1px solid rgba(243, 247, 245, 0.18);
  padding-block: var(--esp-3) var(--esp-5);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--esp-1) var(--esp-3);
  color: var(--cor-acento-suave);
}
.rodape__base p { margin: 0; }
.rodape__links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); }
.rodape .todo { color: var(--cor-todo-texto); }

/* Contato no rodapé: ícone discreto antes do texto */
.rodape__contato i {
  color: var(--cor-acento-suave);
}

/* Barra de WhatsApp: fixa embaixo no celular, botão redondo no desktop */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: var(--barra-altura);
  padding: var(--esp-2) var(--margem);
  padding-bottom: calc(var(--esp-2) + env(safe-area-inset-bottom));
  background: var(--cor-whatsapp);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  box-shadow: 0 -4px 16px rgba(31, 38, 36, 0.12);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.barra:hover { color: #fff; }
.barra--oculta { transform: translateY(110%); opacity: 0; pointer-events: none; }

@media (min-width: 48em) {
  .barra {
    left: auto; right: var(--esp-3); bottom: var(--esp-3);
    min-height: 0;
    width: 3.5rem; height: 3.5rem; padding: 0;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(31, 38, 36, 0.25);
  }
  .barra__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .barra--oculta { transform: translateY(0.5rem); }
}

/* Um único momento de movimento: o texto do topo sobe na carga.
   A foto de fundo não anima: começar invisível atrasa o LCP. */
@media (prefers-reduced-motion: no-preference) {
  .hero__texto > * { animation: subir 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero__texto > :nth-child(2) { animation-delay: 0.08s; }
  .hero__texto > :nth-child(3) { animation-delay: 0.16s; }
  .selo { animation: subir 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.4s; }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Página de política */
.pagina-texto { padding-block: var(--esp-4) var(--esp-6); max-width: var(--largura-texto); }
.pagina-texto h1 { font-size: var(--t-h2); }
.pagina-texto h2 { font-size: 1.5rem; margin-top: var(--esp-4); }
.pagina-texto p, .pagina-texto li { max-width: 68ch; }