@charset "UTF-8";
/* ==========================================================================
   Memorial do Alto Tietê
   Tokens extraídos do site original (Elementor + JupiterX).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Brandon";
  src: url("../fonts/Brandon_light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brandon";
  src: url("../fonts/Brandon_reg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brandon";
  src: url("../fonts/Brandon_bld.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LearningCurve";
  src: url("../fonts/LearningCurve.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cores da marca */
  --azul-escuro:  #003C71;
  --azul-medio:   #0B5394;
  --azul-claro:   #7BAFD4;
  --azul-palido:  #C6DAE7;
  --azul-fundo:   #F2F7FB;
  --azul-fundo-2: #F6FBFF;
  --azul-noite:   #00395E;
  --verde:        #5BB744;
  --verde-escuro: #50A13B;

  /* Neutros */
  --preto:      #020101;
  --texto:      #333333;
  --texto-suave:#555555;
  --cinza:      #7A7A7A;
  --cinza-claro:#E6ECF2;
  --branco:     #FFFFFF;

  /* Tipografia */
  --fonte-titulo:  "Brandon", "Segoe UI", system-ui, sans-serif;
  --fonte-script:  "LearningCurve", "Brush Script MT", cursive;
  --fonte-corpo:   "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.625rem;
  --t-3xl: 2rem;
  --t-4xl: 2.5rem;
  --t-5xl: 3rem;

  /* Espaçamento */
  --e-1: 0.25rem;  --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;

  --largura: 1180px;
  --raio: 10px;
  --raio-lg: 24px;
  --sombra: 0 2px 12px rgba(0, 60, 113, 0.08);
  --sombra-md: 0 6px 28px rgba(0, 60, 113, 0.12);
  --transicao: 200ms ease;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* `display` em classe vence o atributo hidden do navegador; sem isto o menu
   lateral continuaria no fluxo (e visível para leitores de tela) quando fechado */
[hidden] { display: none !important; }

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

body {
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

/* O <picture> passou a envolver as imagens que têm WebP + srcset.
   Fica como bloco para virar ele próprio o item de grid/flex.
   `display: contents` NÃO serve aqui: promoveria também os <source> a itens do
   grid, e cada galeria ganhava uma célula vazia por imagem. */
picture { display: block; }
.hero__slide picture { width: 100%; height: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul-medio); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--azul-escuro); }

:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.2;
  color: var(--azul-escuro);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4vw, var(--t-5xl)); }
h2 { font-size: clamp(1.5rem, 3vw, var(--t-3xl)); }
h3 { font-size: var(--t-2xl); font-weight: 600; }
h4 { font-size: var(--t-xl); font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: var(--e-4); }

/* Título decorativo manuscrito — o "Quem somos" do site original */
.titulo-script {
  font-family: var(--fonte-script);
  font-size: clamp(2.25rem, 5vw, var(--t-5xl));
  font-weight: 400;
  color: var(--azul-claro);
  line-height: 1;
  margin-bottom: var(--e-2);
}

/* No original as chamadas longas das internas ("Sabemos que o último adeus…")
   vêm em ~27px, não nos 48px dos títulos curtos. */
.titulo-longo { font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.35; }

.secao-titulo { margin-bottom: var(--e-6); }
.secao-titulo.centro { text-align: center; }
/* bloco de abertura das páginas internas — alinhado à esquerda, como no original */
.intro-pagina { max-width: 46rem; margin-bottom: var(--e-7); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}

.secao { padding-block: clamp(var(--e-7), 7vw, var(--e-9)); }
.secao--claro { background: var(--azul-fundo); }
.secao--palido { background: var(--azul-fundo-2); }
.secao--escuro { background: var(--azul-escuro); color: var(--branco); }
.secao--escuro h1, .secao--escuro h2, .secao--escuro h3 { color: var(--branco); }

.grade { display: grid; gap: var(--e-5); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.flex { display: flex; gap: var(--e-4); }
.flex--centro { align-items: center; }
.flex--entre { justify-content: space-between; }
.flex--quebra { flex-wrap: wrap; }

.pular-para-conteudo {
  position: absolute; left: -9999px;
  background: var(--azul-escuro); color: #fff;
  padding: var(--e-3) var(--e-4); z-index: 200;
}
.pular-para-conteudo:focus { left: var(--e-4); top: var(--e-4); color: #fff; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  padding: 0.85rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn:hover { transform: translateY(-1px); }
.btn--primario { background: var(--azul-escuro); color: var(--branco); }
.btn--primario:hover { background: var(--azul-medio); color: var(--branco); }
.btn--contorno { border-color: var(--azul-escuro); color: var(--azul-escuro); }
.btn--contorno:hover { background: var(--azul-escuro); color: var(--branco); }
.btn--claro { background: var(--branco); color: var(--azul-escuro); }
.btn--claro:hover { background: var(--azul-palido); color: var(--azul-escuro); }
/* pílula azul-claro do site original ("Veja quem somos") */
.btn--suave { background: var(--azul-claro); color: var(--branco); }
.btn--suave:hover { background: var(--azul-medio); color: var(--branco); }
.btn--whatsapp { background: var(--verde); color: var(--branco); }
.btn--whatsapp:hover { background: var(--verde-escuro); color: var(--branco); }

/* --------------------------------------------------------------------------
   Cabeçalho
   Espelha o site original: logo à esquerda; à direita o contato empilhado,
   uma régua, e o menu abaixo.
   -------------------------------------------------------------------------- */
/* No desktop o cabeçalho rola junto, como no site original — são 154px de
   altura, altos demais para ficarem grudados no topo. No celular ele encolhe
   para ~70px e aí vale a pena mantê-lo fixo por causa do botão do menu. */
.cabecalho {
  position: relative; z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cinza-claro);
}

.cabecalho__grade {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-6);
  padding-block: var(--e-4);
}

.logo img { width: 142px; height: auto; }

.cabecalho__direita { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-2); }

/* --- contato (e-mail e telefone empilhados, alinhados à direita) --- */
.contato-topo { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; justify-items: end; }
.contato-topo a {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: 1rem;
  color: #474747;
}
.contato-topo a:hover { color: var(--azul-escuro); }
.contato-topo__icone { width: 20px; height: 20px; flex: none; fill: var(--azul-escuro); }
.contato-topo__icone--zap { fill: var(--verde); }

/* --- menu (desktop) --- */
.menu-desktop { width: 100%; border-top: 1px solid var(--cinza-claro); padding-top: var(--e-3); margin-top: var(--e-1); }
.menu-desktop ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: flex-end; gap: var(--e-5); flex-wrap: wrap; }
.menu-desktop a {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--azul-escuro);
  padding-block: 0.15rem;
  position: relative;
}
.menu-desktop a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--azul-claro);
  transition: width var(--transicao);
}
.menu-desktop a:hover::after,
.menu-desktop a[aria-current="page"]::after { width: 100%; }

/* --------------------------------------------------------------------------
   Botão do menu (hambúrguer que vira X)
   -------------------------------------------------------------------------- */
.menu-botao {
  display: none;
  background: none; border: 0; padding: var(--e-2);
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: var(--raio);
  color: var(--azul-escuro);
}
.menu-botao:hover { background: var(--azul-fundo); }
.menu-botao__barras { display: block; width: 26px; height: 18px; position: relative; }
.menu-botao__barras span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 250ms ease, opacity 200ms ease, top 250ms ease;
}
.menu-botao__barras span:nth-child(1) { top: 0; }
.menu-botao__barras span:nth-child(2) { top: 8px; }
.menu-botao__barras span:nth-child(3) { top: 16px; }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Menu lateral (celular)
   -------------------------------------------------------------------------- */
.menu-fundo {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0, 30, 58, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 260ms ease;
}
.menu-fundo[data-visivel="true"] { opacity: 1; }

.menu-lateral {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 160;
  width: min(86vw, 340px);
  background: var(--branco);
  box-shadow: -8px 0 32px rgba(0, 30, 58, 0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.menu-lateral[data-aberto="true"] { transform: translateX(0); }

.menu-lateral__topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--cinza-claro);
}
.menu-lateral__topo img { width: 96px; }
.menu-lateral__fechar {
  background: none; border: 0; padding: var(--e-2);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--azul-escuro);
}
.menu-lateral__fechar:hover { background: var(--azul-fundo); }
.menu-lateral__fechar svg { width: 22px; height: 22px; fill: currentColor; }

.menu-lateral__nav { padding: var(--e-3) 0; flex: 1; }
.menu-lateral__nav ul { list-style: none; padding: 0; margin: 0; }
.menu-lateral__nav a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--azul-escuro);
  /* alvo de toque confortável */
  padding: var(--e-4) var(--e-5);
  border-left: 3px solid transparent;
  transition: background var(--transicao), border-color var(--transicao);
}
.menu-lateral__nav a:hover,
.menu-lateral__nav a:focus-visible { background: var(--azul-fundo); }
.menu-lateral__nav a[aria-current="page"] {
  border-left-color: var(--azul-claro);
  background: var(--azul-fundo);
  font-weight: 700;
}
.menu-lateral__nav a::after {
  content: "›"; color: var(--azul-claro); font-size: 1.4rem; line-height: 1;
}

/* entrada escalonada dos itens */
.menu-lateral[data-aberto="true"] .menu-lateral__nav li {
  animation: menu-item-entra 320ms both cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-lateral[data-aberto="true"] .menu-lateral__nav li:nth-child(1) { animation-delay: 40ms; }
.menu-lateral[data-aberto="true"] .menu-lateral__nav li:nth-child(2) { animation-delay: 75ms; }
.menu-lateral[data-aberto="true"] .menu-lateral__nav li:nth-child(3) { animation-delay: 110ms; }
.menu-lateral[data-aberto="true"] .menu-lateral__nav li:nth-child(4) { animation-delay: 145ms; }
.menu-lateral[data-aberto="true"] .menu-lateral__nav li:nth-child(5) { animation-delay: 180ms; }
.menu-lateral[data-aberto="true"] .menu-lateral__nav li:nth-child(6) { animation-delay: 215ms; }
.menu-lateral[data-aberto="true"] .menu-lateral__nav li:nth-child(7) { animation-delay: 250ms; }
@keyframes menu-item-entra {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

.menu-lateral__contato {
  border-top: 1px solid var(--cinza-claro);
  padding: var(--e-5);
  display: grid; gap: var(--e-4);
}
.menu-lateral__contato .btn { width: 100%; }
.menu-lateral__contato ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.menu-lateral__contato a {
  display: flex; align-items: center; gap: var(--e-3);
  font-size: var(--t-sm); color: var(--texto-suave);
  word-break: break-word;
}
.menu-lateral__contato a:hover { color: var(--azul-escuro); }
.menu-lateral__contato svg { width: 18px; height: 18px; flex: none; fill: var(--azul-escuro); }

/* trava a rolagem do fundo enquanto o menu está aberto */
body[data-menu-aberto="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   Cabeçalho — telas menores
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .menu-desktop a { font-size: 1.1rem; }
  .menu-desktop ul { gap: var(--e-4); }
}

@media (max-width: 900px) {
  .cabecalho { position: sticky; top: 0; }
  .menu-botao { display: flex; }
  .menu-desktop { display: none; }

  .cabecalho__grade { padding-block: var(--e-3); gap: var(--e-4); }
  .logo img { width: 112px; }

  .cabecalho__direita { flex: 0 1 auto; align-items: flex-end; }
  /* no celular o e-mail ocuparia a largura toda: fica só o telefone */
  .contato-topo li:first-child { display: none; }
  .contato-topo a { font-size: var(--t-sm); }
}

@media (max-width: 480px) {
  .logo img { width: 96px; }
  .contato-topo a span { display: none; }   /* só o ícone do WhatsApp */
  .contato-topo__icone { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-lateral { transition: none; }
  .menu-lateral[data-aberto="true"] .menu-lateral__nav li { animation: none; }
}

/* --------------------------------------------------------------------------
   Faixa de título das páginas internas
   Reproduz a tarja do site original: fundo #003C71, ~108px de altura,
   título em Brandon regular 48px branco alinhado à esquerda do container.
   -------------------------------------------------------------------------- */
.faixa-pagina { background: var(--azul-escuro); padding-block: var(--e-5); }
.faixa-pagina__titulo {
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, var(--t-5xl));
  line-height: 1.35;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Hero / banner
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--azul-escuro); }
/* proporção real dos banners originais (1920x645) para não cortar o texto da arte */
.hero__slides { position: relative; aspect-ratio: 1920 / 645; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 700ms ease;
}
.hero__slide[data-ativo="true"] { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }

/* no celular a faixa fica baixa demais: aumenta a altura e centraliza a arte */
@media (max-width: 700px) {
  .hero__slides { aspect-ratio: 4 / 3; }
  .hero__slide img { object-position: 30% center; }
}
.hero__controles {
  position: absolute; left: 50%; bottom: var(--e-5); transform: translateX(-50%);
  display: flex; gap: var(--e-2); z-index: 2;
}
.hero__ponto {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--branco); background: transparent;
  padding: 0;
}
.hero__ponto[aria-selected="true"] { background: var(--branco); }

/* setas ‹ › do carrossel original */
.hero__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; padding: 0;
  background: rgba(0, 30, 58, 0.55);
  color: var(--branco);
  display: grid; place-items: center;
  transition: background var(--transicao);
}
.hero__seta:hover { background: rgba(0, 30, 58, 0.8); }
.hero__seta svg { width: 20px; height: 20px; fill: currentColor; }
.hero__seta--antes  { left: var(--e-4); }
.hero__seta--depois { right: var(--e-4); }

@media (max-width: 700px) {
  .hero__seta { width: 38px; height: 38px; }
  .hero__seta svg { width: 16px; height: 16px; }
}

/* --------------------------------------------------------------------------
   Home — "Quem somos"
   Imagem à esquerda sobre o painel decorativo do site original
   (Imagem-Quem-somos.png), que sangra até a borda da tela.
   -------------------------------------------------------------------------- */
.quem-somos { overflow: hidden; }
.quem-somos__grade {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--e-7); align-items: center;
}

.quem-somos__midia { position: relative; }
/* o painel decorativo sai do container e encosta na borda esquerda da janela */
.quem-somos__midia::before {
  content: "";
  position: absolute; z-index: 0;
  top: var(--e-6); bottom: calc(var(--e-6) * -1);
  right: -6%;
  left: calc(50% - 50vw);
  /* image-set serve o WebP a quem suporta; a linha anterior é o fallback dos
     navegadores que ignoram a regra inteira por não conhecerem image-set. */
  background: url("/uploads/2023/04/Imagem-Quem-somos.png") left center / cover no-repeat;
  background-image: image-set(
    url("/uploads/2023/04/Imagem-Quem-somos.webp") type("image/webp"),
    url("/uploads/2023/04/Imagem-Quem-somos.png")  type("image/png")
  );
}
.quem-somos__foto {
  position: relative; z-index: 1;
  width: 100%; border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
}

.quem-somos__texto .titulo-script { margin-bottom: 0; }
/* a régua curta que fica sob o título no original */
.regua::after {
  content: ""; display: block;
  width: 96px; height: 2px; margin-top: var(--e-3);
  background: var(--azul-claro);
}
.secao-titulo.centro .regua::after { margin-inline: auto; }

@media (max-width: 900px) {
  .quem-somos__grade { grid-template-columns: 1fr; }
  .quem-somos__midia::before { display: none; }
}

/* --------------------------------------------------------------------------
   Home — "Onde estamos"
   Cartão azul-marinho + mapa colados num único bloco arredondado.
   -------------------------------------------------------------------------- */
.onde-estamos {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: var(--sombra-md);
}
.onde-estamos__info {
  background: var(--azul-escuro); color: var(--branco);
  padding: clamp(var(--e-6), 5vw, var(--e-8));
  display: flex; flex-direction: column; justify-content: center;
}
.onde-estamos__info h2 { color: var(--branco); }
.onde-estamos__info address { font-style: normal; font-size: var(--t-lg); margin-top: var(--e-4); }
.onde-estamos__mapa { border: 0; width: 100%; height: 100%; min-height: 370px; display: block; }

@media (max-width: 900px) {
  .onde-estamos { grid-template-columns: 1fr; border-radius: var(--raio-lg); }
  .onde-estamos__mapa { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Home — Depoimentos
   -------------------------------------------------------------------------- */
.depoimentos { background: var(--azul-palido); }
.depoimentos__palco { position: relative; max-width: 76ch; margin-inline: auto; }
.depoimento {
  display: none;
  text-align: center;
}
.depoimento[data-ativo="true"] { display: block; }
.depoimento__texto {
  font-style: italic; color: var(--cinza);
  font-size: clamp(var(--t-base), 2vw, 1.3rem);
  line-height: 1.7;
}
.depoimento__autor {
  display: block; margin-top: var(--e-4);
  font-family: var(--fonte-titulo); font-weight: 700;
  color: var(--preto); font-size: var(--t-sm);
}
.depoimentos__pontos {
  display: flex; gap: var(--e-3); justify-content: center;
  margin-top: var(--e-6);
}
.depoimentos__ponto {
  width: 14px; height: 14px; border-radius: 50%;
  border: 0; padding: 0;
  background: rgba(0, 60, 113, 0.28);
  transition: background var(--transicao);
}
.depoimentos__ponto[aria-selected="true"] { background: var(--azul-escuro); }

/* --------------------------------------------------------------------------
   Cartões
   -------------------------------------------------------------------------- */
.cartao {
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: var(--raio);
  overflow: hidden;
  transition: box-shadow var(--transicao), transform var(--transicao);
  display: flex; flex-direction: column;
}
.cartao:hover { box-shadow: var(--sombra-md); transform: translateY(-3px); }
.cartao__imagem { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--azul-fundo); }
.cartao__corpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.cartao__titulo { font-size: var(--t-lg); font-weight: 600; }
.cartao__meta { font-size: var(--t-xs); color: var(--cinza); text-transform: uppercase; letter-spacing: 0.06em; }
.cartao__texto { color: var(--texto-suave); font-size: var(--t-sm); flex: 1; }

/* --------------------------------------------------------------------------
   Galeria
   -------------------------------------------------------------------------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-3); }
.galeria img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--raio); }

/* --------------------------------------------------------------------------
   Acordeão (dúvidas frequentes)
   -------------------------------------------------------------------------- */
.acordeao { border-top: 1px solid var(--cinza-claro); }
.acordeao__item { border-bottom: 1px solid var(--cinza-claro); }
.acordeao__botao {
  width: 100%; text-align: left; background: none; border: 0;
  padding: var(--e-5) var(--e-6) var(--e-5) 0;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-lg);
  color: var(--azul-escuro);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
}

/* Variante do site original: duas colunas de caixas brancas arredondadas.
   As colunas são dois contêineres independentes (ver partials/faq.php) — num
   grid único as duas células de uma linha dividem a altura, e abrir uma
   resposta abriria um buraco do lado oposto. */
.acordeao--caixas {
  border-top: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
  align-items: start;
}
.acordeao__coluna { display: grid; gap: var(--e-4); align-content: start; }
.acordeao--caixas .acordeao__item {
  background: var(--branco);
  border: 0; border-radius: 15px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.acordeao--caixas .acordeao__botao { padding: var(--e-4) var(--e-5); font-weight: 400; color: var(--azul-medio); }
.acordeao--caixas .acordeao__painel { padding: 0 var(--e-5) var(--e-5); }

@media (max-width: 760px) {
  .acordeao--caixas { grid-template-columns: 1fr; }
}
.acordeao__botao::after {
  content: "+"; font-size: var(--t-2xl); font-weight: 400; color: var(--azul-claro);
  transition: transform var(--transicao);
  flex: none;
}
.acordeao__botao[aria-expanded="true"]::after { transform: rotate(45deg); }
.acordeao__painel { display: none; padding-bottom: var(--e-5); color: var(--texto-suave); }
.acordeao__painel[data-aberto="true"] { display: block; }

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-4); }
.campo label { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-sm); color: var(--azul-escuro); }
.campo input, .campo textarea, .campo select {
  border: 1px solid var(--cinza-claro);
  border-radius: var(--raio);
  padding: 0.75rem 1rem;
  background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(123, 175, 212, 0.25);
  outline: none;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo--erro input, .campo--erro textarea { border-color: #C0392B; }
.campo__erro { color: #C0392B; font-size: var(--t-xs); }
.campo__ajuda { color: var(--cinza); font-size: var(--t-xs); }

.alerta { padding: var(--e-4) var(--e-5); border-radius: var(--raio); margin-bottom: var(--e-5); }
.alerta--ok { background: #E8F6E4; color: #2F6B22; border: 1px solid #BFE3B5; }
.alerta--erro { background: #FDECEA; color: #A33025; border: 1px solid #F3C4BF; }

/* --------------------------------------------------------------------------
   Obituário
   -------------------------------------------------------------------------- */
.obituario-busca { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-6); }
.obituario-busca input { flex: 1 1 280px; }

.obituario-cartao { text-align: center; padding: var(--e-5); }
/* preto-e-branco como no site original — é uma escolha de tom, não decoração */
.obituario-cartao__foto {
  width: 148px; height: 148px; border-radius: 50%; object-fit: cover;
  margin: 0 auto var(--e-4); border: 4px solid var(--azul-palido);
  background: var(--azul-fundo);
  filter: grayscale(1);
}
.obituario-cartao__nome { font-size: var(--t-lg); font-weight: 600; color: var(--azul-escuro); }
.obituario-cartao__datas { font-size: var(--t-sm); color: var(--cinza); margin-top: var(--e-1); }

.obituario-perfil { text-align: center; }
.obituario-perfil__foto {
  width: 220px; height: 220px; border-radius: 50%; object-fit: cover;
  margin: 0 auto var(--e-5); border: 6px solid var(--azul-palido);
  background: var(--azul-fundo);
  filter: grayscale(1);
}

/* compartilhar a homenagem — o site original tinha isto na ficha */
.obituario-perfil__compartilhar {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-top: var(--e-6);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-sm);
  color: var(--verde-escuro);
}
.obituario-perfil__compartilhar:hover { color: var(--verde); }
.obituario-perfil__compartilhar svg { width: 20px; height: 20px; fill: currentColor; }
.obituario-perfil__frase {
  font-family: var(--fonte-script);
  font-size: clamp(1.5rem, 3vw, var(--t-3xl));
  color: var(--azul-claro);
  margin-block: var(--e-5);
}
.info-blocos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); text-align: left; }
.info-bloco { background: var(--azul-fundo); border-radius: var(--raio); padding: var(--e-5); }
.info-bloco h3 { font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--e-3); color: var(--azul-medio); }
.info-bloco dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: 0; }
.info-bloco dt { font-weight: 600; color: var(--texto-suave); font-size: var(--t-sm); }
.info-bloco dd { margin: 0; font-size: var(--t-sm); }

.mensagem-item { border-left: 3px solid var(--azul-palido); padding: var(--e-3) var(--e-5); margin-bottom: var(--e-4); text-align: left; }
.mensagem-item__autor { font-family: var(--fonte-titulo); font-weight: 600; color: var(--azul-escuro); }
.mensagem-item__data { font-size: var(--t-xs); color: var(--cinza); }

/* --------------------------------------------------------------------------
   Artigo (blog)
   -------------------------------------------------------------------------- */
.artigo { max-width: 760px; margin-inline: auto; }
.artigo__capa { width: 100%; border-radius: var(--raio); margin-bottom: var(--e-6); }
.artigo__meta { color: var(--cinza); font-size: var(--t-sm); margin-bottom: var(--e-5); }
.artigo__conteudo > * + * { margin-top: var(--e-4); }
.artigo__conteudo h2 { margin-top: var(--e-7); font-size: var(--t-2xl); }
.artigo__conteudo h3 { margin-top: var(--e-6); font-size: var(--t-xl); }
.artigo__conteudo img { border-radius: var(--raio); margin-block: var(--e-5); }
.artigo__conteudo ul, .artigo__conteudo ol { padding-left: var(--e-5); }
.artigo__conteudo li + li { margin-top: var(--e-2); }
.artigo__conteudo blockquote {
  border-left: 4px solid var(--azul-claro);
  padding-left: var(--e-5); color: var(--texto-suave); font-style: italic;
}

/* --------------------------------------------------------------------------
   Paginação
   -------------------------------------------------------------------------- */
.paginacao { display: flex; gap: var(--e-2); justify-content: center; flex-wrap: wrap; margin-top: var(--e-7); }
.paginacao a, .paginacao span {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio); border: 1px solid var(--cinza-claro);
  font-size: var(--t-sm); padding-inline: var(--e-3);
}
.paginacao a:hover { border-color: var(--azul-claro); background: var(--azul-fundo); }
.paginacao [aria-current="page"] { background: var(--azul-escuro); color: var(--branco); border-color: var(--azul-escuro); }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape { background: var(--azul-escuro); color: rgba(255, 255, 255, 0.85); padding-block: var(--e-8) var(--e-5); }
/* caixa normal, como no original ("Mapa do site", não "MAPA DO SITE").
   São h2 e não h3 para não abrir um salto de nível nas páginas que só têm h1
   antes do rodapé (mural e conheça o memorial). */
.rodape h2 { color: var(--branco); font-size: var(--t-xl); font-weight: 700; margin-bottom: var(--e-4); }
.rodape a { color: rgba(255, 255, 255, 0.85); }
.rodape a:hover { color: var(--branco); }
.rodape ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.rodape__logo { width: 150px; margin-bottom: var(--e-4); filter: brightness(0) invert(1); }

/* redes sociais: círculos claros centralizados abaixo de uma régua */
.rodape__redes {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: var(--e-7); padding-top: var(--e-6);
  display: flex; gap: var(--e-4); justify-content: center;
}
.rodape__rede {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--azul-claro); color: var(--azul-escuro);
  display: grid; place-items: center;
  transition: background var(--transicao), transform var(--transicao);
}
.rodape__rede:hover { background: var(--branco); color: var(--azul-escuro); transform: translateY(-2px); }
.rodape__rede svg { width: 24px; height: 24px; fill: currentColor; }
/* a régua do rodapé já vem das redes; não repete no bloco de baixo */
.rodape__redes + .rodape__base { border-top: 0; margin-top: var(--e-6); padding-top: 0; }
.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: var(--e-7); padding-top: var(--e-5);
  font-size: var(--t-xs); display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--verde); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--sombra-md);
  transition: transform var(--transicao);
}
.whatsapp-flutuante:hover { transform: scale(1.08); color: #fff; }
.whatsapp-flutuante svg { width: 30px; height: 30px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */
.centro { text-align: center; }
.vazio { text-align: center; padding: var(--e-8) var(--e-4); color: var(--cinza); }
.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;
}

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

@media print {
  .cabecalho, .rodape, .whatsapp-flutuante, .topo-contato { display: none; }
}