/*
  Estilo do site da A Casa Alsace-Lorraine Brasil.

  CORES: use sempre os tokens abaixo (var(--vermelho), var(--cartao)...), nunca cores fixas.
  Existem dois temas, escolhidos pelo atributo data-tema do <html>:
    - claro (padrão): valores do :root
    - noturno: valores do bloco [data-tema="noturno"]
  Paleta da logo "A Casa Alsace-Lorraine Brasil" (img/logo-original.jpg):
    marinho #051431 (texto), vermelho #c41b1d (destaque), verde #127434 (Brasil), laranja #f49c11 (bico do tucano).
  Os arcos da logo vão do vermelho ao verde: os degradês do site seguem a mesma ideia.
  As casas em enxaimel da abertura usam cores próprias (paredes coloridas e madeira).

  Índice: 1. Tokens  2. Base  3. Botões  4. Cabeçalho  5. Abertura  6. Seções  7. Associação
          8. UIA  9. Linha do tempo  10. Regiões  11. Cultura  12. Agenda  13. Formulário
          14. Dúvidas  15. Contato e rodapé  16. Extras  17. Movimento reduzido
*/

/* ========== 0. Fontes (no próprio site, em css/fontes/) ==========
   Fraunces (títulos) e Inter (texto), os mesmos arquivos do Google Fonts, só os alfabetos latino e latino
   estendido (acentos do português, francês e espanhol, "œ"). Ficam aqui para a visita não passar pelo Google
   (privacidade, LGPD) e carregar sem depender de outro servidor */
/* Fraunces (latin-ext) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces (latin) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces (latin-ext) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces (latin) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces (latin-ext) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fontes/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces (latin) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fontes/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter (latin-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter (latin) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter (latin-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter (latin) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter (latin-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter (latin) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========== 1. Tokens ========== */
:root {
  --fundo: #fbfaf7;          /* fundo do site */
  --fundo-2: #eef1f6;        /* seções em destaque */
  --cartao: #ffffff;         /* cartões e caixas */
  --borda: #dde2ec;          /* bordas sutis */
  --texto: #051431;          /* texto principal (marinho da logo) */
  --suave: #4f5a74;          /* texto secundário */
  --vermelho: #c41b1d;       /* destaque principal */
  --vermelho-hover: #9f1416;
  --sobre-vermelho: #ffffff; /* texto em cima do vermelho */
  --verde: #127434;          /* destaque secundário (Brasil) */
  --laranja: #f49c11;        /* detalhes (bico do tucano) */
  --marinho: #051431;        /* fundos em marinho (aba e cartões da Lorena) */
  --madeira: #4f3526;        /* vigas das casas */
  --telhado: #a3372b;
  --silhueta: #d3dae6;       /* casas do fundo */
  --janela: #d6e6f0;
  --ceu-topo: #cfe6f6;
  --ceu-baixo: #fdf5e8;
  --sombra: 0 10px 30px -12px rgb(5 20 49 / .22);
  --raio: 18px;
  --fonte-titulo: "Fraunces", Georgia, serif;
  --fonte-texto: "Inter", system-ui, sans-serif;
  color-scheme: light;
}

:root[data-tema="noturno"] {
  --fundo: #060d24;
  --fundo-2: #0a1430;
  --cartao: #101c3c;
  --borda: #22305a;
  --texto: #eef1f8;
  --suave: #a3adc6;
  --vermelho: #ee4c4e;
  --vermelho-hover: #ff6c6e;
  --sobre-vermelho: #ffffff;
  --verde: #3dbb6c;
  --laranja: #f7aa3c;
  --marinho: #2a3f86;
  --madeira: #1a1512;
  --telhado: #3f1d1c;
  --silhueta: #141d44;
  --janela: #ffcf70;
  --ceu-topo: #030817;
  --ceu-baixo: #1a2352;
  --sombra: 0 10px 30px -12px rgb(0 0 0 / .6);
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
/* Voltando ao ponto em que a pessoa estava (F5, voltar, troca de idioma): escondida por um instante (js: restaurarPosicao) */
html.restaurando { scroll-behavior: auto; }
html.restaurando body { visibility: hidden; }
/* Seção que recebe o foco ao clicar no menu (js: iniciarLinksInternos): sem contorno em volta da seção inteira */
section[tabindex="-1"]:focus { outline: none; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s, color .4s;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  line-height: 1.1;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.01em;
}
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--vermelho); color: var(--sobre-vermelho);
  padding: 10px 16px; border-radius: 10px; text-decoration: none;
}
.pular:focus { top: 16px; }

.conteudo { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .conteudo { padding: 0 24px; } }
.estreito { max-width: 780px; }
.centro { text-align: center; margin-left: auto; margin-right: auto; }
.introducao { max-width: 620px; color: var(--suave); margin-bottom: 48px; }

.sobretitulo {
  font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--vermelho); margin-bottom: .8em;
  display: flex; align-items: center; gap: 10px;
}
.sobretitulo::before { content: ""; width: 28px; height: 2px; background: linear-gradient(90deg, var(--vermelho), var(--verde)); }
.sobretitulo.centro { justify-content: center; }

/* Entrada ao rolar: o js/principal.js coloca a classe "visivel". --atraso escalona os itens */
.js .revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--atraso, 0s);
}
.js .revelar.visivel { opacity: 1; transform: none; }

/* ========== 3. Botões ========== */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; border: 2px solid var(--vermelho);
  background: var(--vermelho); color: var(--sobre-vermelho);
  font-weight: 600; text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
/* Brilho que passa pelo botão no hover */
.botao::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s;
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--vermelho); }
.botao:hover::after { transform: translateX(100%); }
.botao:active { transform: translateY(0); }
.botao-contorno { background: transparent; color: var(--texto); border-color: currentColor; }
.botao-contorno:hover { background: var(--texto); color: var(--fundo); box-shadow: none; }
/* Na abertura o fundo é o céu e as casas: o botão ganha fundo sólido para não sumir */
.abertura .botao-contorno { background: var(--cartao); border-color: var(--texto); box-shadow: var(--sombra); }
.abertura .botao-contorno:hover { background: var(--texto); color: var(--fundo); }
.botao-pequeno { padding: 9px 18px; font-size: .95rem; }
.botao-largo { width: 100%; }

.botao-icone {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--borda); cursor: pointer;
  transition: background-color .2s, transform .3s;
}
.botao-icone:hover { background: var(--cartao); }
.botao-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

#botao-tema .icone-lua { display: none; }
[data-tema="noturno"] #botao-tema .icone-lua { display: block; }
[data-tema="noturno"] #botao-tema .icone-sol { display: none; }
#botao-tema:active { transform: rotate(40deg); }

.link-seta { font-weight: 600; color: var(--vermelho); text-decoration: none; display: inline-flex; gap: 6px; }
.link-seta span { transition: transform .25s; }
.link-seta:hover span { transform: translateX(5px); }

/* ========== 4. Cabeçalho ========== */
.progresso-leitura {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--vermelho), var(--verde));
  transform-origin: left; transform: scaleX(var(--progresso, 0));
}

.cabecalho {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .3s, box-shadow .3s, transform .35s;
}
.cabecalho.rolou {
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 1px 0 var(--borda);
}
/* Some ao rolar para baixo e volta ao rolar para cima */
.cabecalho.escondido { transform: translateY(-100%); }
.cabecalho.escondido:focus-within { transform: none; } /* navegando pelo teclado (Tab): o menu aparece */

.cabecalho-dentro {
  max-width: 1200px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 16px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
/* Símbolo da logo (vetor, fundo transparente). Uma versão para cada tema: .so-claro e .so-noturno */
.marca-simbolo { width: 54px; height: 54px; transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
:root:not([data-tema="noturno"]) .so-noturno, [data-tema="noturno"] .so-claro { display: none; }
.marca:hover .marca-simbolo { transform: rotate(-8deg) scale(1.08); }
/* Nome escrito como na logo: maiúsculas espaçadas, LORRAINE em vermelho e BRASIL em verde entre traços */
.marca-nome {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--fonte-texto); text-transform: uppercase; line-height: 1; color: var(--texto);
}
.marca-casa { font-size: .62rem; font-weight: 500; letter-spacing: .28em; margin-bottom: 3px; }
.marca-principal { font-size: .98rem; font-weight: 500; letter-spacing: .12em; white-space: nowrap; }
.marca-lorraine { color: var(--vermelho); }
.marca-traco { opacity: .7; }
.marca-brasil {
  display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px;
  font-size: .58rem; font-weight: 600; letter-spacing: .32em; color: var(--verde);
}
.marca-brasil::before, .marca-brasil::after { content: ""; flex: 1; height: 1px; background: currentColor; }

.menu { display: flex; align-items: center; gap: 4px; }
.menu a:not(.botao) {
  position: relative; text-decoration: none; padding: 8px 12px; font-size: .95rem; font-weight: 500;
  color: var(--texto); border-radius: 8px;
}
.menu a:not(.botao)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--vermelho); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.menu a:not(.botao):hover::after, .menu a.atual::after { transform: scaleX(1); }
.menu .botao { margin-left: 8px; }

.cabecalho-acoes { display: flex; gap: 8px; }
/* Seletor de idioma */
.idioma { position: relative; }
.idioma-botao { width: auto; padding: 0 12px 0 10px; gap: 6px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 700; font-size: .78rem; letter-spacing: .06em; }
.idioma-lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 170px; padding: 6px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right; pointer-events: none;
  visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; /* fechada: fora do Tab */
}
.idioma.aberto .idioma-lista { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.idioma-lista button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; font-size: .95rem; text-align: left;
}
.idioma-lista button:hover { background: var(--fundo-2); }
.idioma-lista button b { width: 26px; font-size: .75rem; color: var(--suave); }
.idioma-lista button[aria-checked="true"] { color: var(--vermelho); font-weight: 600; }
.idioma-lista button[aria-checked="true"] b { color: var(--vermelho); }
/* Celular estreito: botões um pouco menores para caber a logo, o idioma, o tema e o menu */
@media (max-width: 420px) {
  .cabecalho-dentro { gap: 8px; }
  .cabecalho-acoes { gap: 4px; }
  .botao-icone { width: 38px; height: 38px; }
  .idioma-botao { width: auto; padding: 0 9px; }
  .idioma-botao svg { display: none; }
  .marca { gap: 6px; }
  .marca-simbolo { width: 44px; height: 44px; }
  .marca-principal { font-size: .86rem; }
}
.botao-menu { display: none; }
.botao-menu span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .3s; }
.botao-menu { gap: 4px; grid-auto-flow: row; align-content: center; justify-items: center; }
.botao-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.botao-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.botao-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .botao-menu { display: grid; }
  .menu {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 8px;
    background: var(--fundo);
    clip-path: circle(0 at calc(100% - 37px) 33px);
    transition: clip-path .6s cubic-bezier(.7,0,.2,1);
    visibility: hidden;
  }
  .menu.aberto { clip-path: circle(150% at calc(100% - 37px) 33px); visibility: visible; }
  .menu a:not(.botao) { font-family: var(--fonte-titulo); font-size: 1.7rem; }
  .menu .botao { margin: 16px 0 0; font-size: 1.1rem; padding: 14px 32px; }
  .menu.aberto a { animation: surgir .5s both; }
  .menu.aberto a:nth-child(2) { animation-delay: .05s; }
  .menu.aberto a:nth-child(3) { animation-delay: .1s; }
  .menu.aberto a:nth-child(4) { animation-delay: .15s; }
  .menu.aberto a:nth-child(5) { animation-delay: .2s; }
  .menu.aberto a:nth-child(6) { animation-delay: .25s; }
  .menu.aberto a:nth-child(7) { animation-delay: .3s; }
}

/* ========== 5. Abertura (hero) ========== */
/*
  A abertura tem a altura da tela. Embaixo fica a faixa das casas (--altura-cidade, que acompanha a altura da tela);
  acima dela, uma folga para as pontas dos telhados, a torre da catedral e o tucano (--folga-telhados), que passam do
  topo da faixa. O texto fica centralizado no espaço que sobra, entre o cabeçalho (--topo) e essa folga.
  Nas épocas com enfeites pendurados, o js/epocas.js mede onde eles terminam e aumenta o --topo.
*/
.abertura {
  --altura-cidade: clamp(120px, 26svh, 330px);
  /* O desenho nunca fica mais baixo que 12,5% da largura da tela (2400 x 300): em telas largas ele cresce acima da faixa */
  --altura-desenho: max(var(--altura-cidade), 12.5vw);
  --folga-telhados: calc(var(--altura-desenho) - var(--altura-cidade) + var(--altura-desenho) * .21);
  --topo: 84px;
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; isolation: isolate;
  padding: var(--topo) 0 calc(var(--altura-cidade) + var(--folga-telhados) + 12px);
}
/* Telas largas (computador): casas maiores. A catedral fica ao lado do texto, com a torre subindo no céu */
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) {
  .abertura { --altura-cidade: clamp(120px, 35svh, 440px); }
}

.ceu {
  position: absolute; inset: 0; z-index: -3;
  background: linear-gradient(180deg, var(--ceu-topo), var(--ceu-baixo));
  transition: background .6s;
}
.estrelas { position: absolute; inset: 0 0 40%; opacity: 0; transition: opacity 1s; }
[data-tema="noturno"] .estrelas { opacity: 1; }
.estrela {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  animation: piscar var(--duracao, 3s) ease-in-out infinite; animation-delay: var(--atraso, 0s);
}
/* No tema claro as estrelas estão invisíveis: não precisam piscar */
:root:not([data-tema="noturno"]) .estrela { animation-play-state: paused; }
/* Seção longe da tela (js: pausarForaDaTela): animações paradas até ela voltar */
[data-fora], [data-fora] *, [data-fora] *::before, [data-fora] *::after { animation-play-state: paused !important; }

/* Sol no tema claro, lua no noturno */
.astro {
  position: absolute; top: 16%; right: 12%; width: clamp(70px, 10vw, 120px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff4c4, #ffc94a 60%, #f49c11);
  box-shadow: 0 0 60px 20px rgb(255 205 80 / .45);
  transition: background .8s, box-shadow .8s, transform .8s;
  animation: flutuar 8s ease-in-out infinite;
}
[data-tema="noturno"] .astro {
  background: radial-gradient(circle at 35% 35%, #fbf8ee, #d9d4c4 70%, #b9b3a0);
  box-shadow: 0 0 50px 10px rgb(230 225 200 / .25), inset -12px -8px 0 rgb(0 0 0 / .08);
}

.nuvem {
  position: absolute; height: 36px; border-radius: 999px; background: #fff; opacity: .8;
  filter: blur(1px);
  animation: deslizar linear infinite;
  transition: opacity .8s;
}
.nuvem::before, .nuvem::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.nuvem::before { width: 50%; aspect-ratio: 1; left: 15%; bottom: 40%; }
.nuvem::after { width: 35%; aspect-ratio: 1; left: 50%; bottom: 30%; }
.nuvem-1 { width: 160px; top: 18%; animation-duration: 70s; animation-delay: -20s; }
.nuvem-2 { width: 110px; top: 30%; animation-duration: 90s; animation-delay: -60s; opacity: .6; }
.nuvem-3 { width: 200px; top: 10%; animation-duration: 110s; animation-delay: -5s; opacity: .5; }
[data-tema="noturno"] .nuvem { opacity: .07; }

/* Cegonhas */
.cegonhas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cegonha { position: absolute; left: 0; width: 120px; animation: voar 26s linear infinite; }
.cegonha svg { width: 100%; height: auto; overflow: visible; animation: planar 3s ease-in-out infinite; }
.cegonha-1 { top: 22%; }
.cegonha-2 { top: 34%; width: 80px; animation-duration: 34s; animation-delay: -12s; opacity: .85; }
.cegonha-corpo { fill: #ffffff; stroke: #051431; stroke-width: 1.2; }
.cegonha-ponta { fill: #051431; }
.cegonha-pescoco { fill: none; stroke: #ffffff; stroke-width: 7; stroke-linecap: round; }
.cegonha-bico, .cegonha-pernas { fill: #c41b1d; stroke: #c41b1d; stroke-width: 2.4; stroke-linecap: round; }
.cegonha-asa {
  transform-box: view-box; transform-origin: 52px 28px;
  animation: bater .8s ease-in-out infinite alternate;
}
.cegonha-asa-tras { opacity: .55; animation-delay: -.1s; }
[data-tema="noturno"] .cegonha { filter: brightness(.7); }

/* Texto */
.abertura-texto { position: relative; max-width: 1120px; width: 100%; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .abertura-texto { padding: 0 24px; } }
/* O título e o texto diminuem em telas baixas (svh = % da altura da tela), para caber acima das casas */
.abertura h1 {
  font-size: calc(clamp(1.75rem, min(7.2vw, 6.3svh), 5.4rem) * var(--escala-texto, 1)); font-weight: 800; max-width: 12ch; margin-bottom: .3em;
  letter-spacing: -.025em;
}
.abertura h1 em { font-style: italic; font-weight: 600; color: var(--vermelho); }
.abertura-sub { max-width: 520px; font-size: max(.86rem, calc(clamp(.92rem, 2.15svh, 1.15rem) * var(--escala-texto, 1))); /* nunca menor que .86rem */ line-height: 1.5; color: var(--suave); margin-bottom: 0; }
.abertura-botoes { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: calc(clamp(14px, 3svh, 28px) * var(--escala-texto, 1)); }
.abertura .sobretitulo { margin-bottom: clamp(.4em, 1.2svh, .8em); }
@media (max-width: 560px) {
  .abertura .sobretitulo { font-size: .68rem; letter-spacing: .07em; }
  .abertura .botao { padding: 11px 20px; font-size: .95rem; }
}

/* Palavras do título entram uma a uma (o JS separa as palavras em <span class="palavra">) */
.palavra { display: inline-block; white-space: pre; }
.js .palavra { opacity: 0; transform: translateY(.5em) rotate(4deg); animation: entrar-palavra .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--atraso); }

/* Cidade em enxaimel no pé da abertura */
.cidade {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--altura-cidade); z-index: -2;
  pointer-events: none;
}
/* overflow visível: as pontas dos telhados mais altos (e o tucano) passam do topo do desenho sem serem cortadas */
.cidade-camada { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; overflow: visible; }
.cidade-fundo { top: auto; bottom: 0; }

.silhueta { fill: var(--silhueta); transition: fill .6s; }
.catedral { fill: color-mix(in srgb, var(--silhueta) 78%, var(--madeira)); }
.parede { fill: var(--cor); transition: fill .6s; }
[data-tema="noturno"] .parede { fill: color-mix(in srgb, var(--cor) 30%, #0a1024); }
.telhado { fill: var(--telhado); transition: fill .6s; }
.viga { stroke: var(--madeira); stroke-width: 4; stroke-linecap: square; fill: none; transition: stroke .6s; }
.janela { fill: var(--janela); stroke: var(--madeira); stroke-width: 2; transition: fill .6s; }
.janela-apagada { fill: var(--janela); }
[data-tema="noturno"] .janela-apagada { fill: #1c2340; }
[data-tema="noturno"] .janela:not(.janela-apagada) { filter: drop-shadow(0 0 6px rgb(255 200 90 / .8)); }
[data-tema="noturno"] .janela-pisca { animation: piscar-janela 7s steps(1) infinite; }
.persiana { fill: var(--persiana); transition: fill .6s; }
[data-tema="noturno"] .persiana { fill: color-mix(in srgb, var(--persiana) 40%, #0a1024); }
.porta { fill: var(--madeira); }
.janela-silhueta { fill: var(--ceu-baixo); opacity: .5; }
[data-tema="noturno"] .janela-silhueta { fill: #ffcf70; opacity: .6; }

/* Tucano no telhado: pulinho a cada 6 segundos. Voa sozinho de tempos em tempos e quando o mouse chega perto (js: iniciarTucano) */
.tucano-parado { transform-box: fill-box; transform-origin: 50% 100%; animation: pulinho 6s ease-in-out infinite; }
.tucano-voo { transform-box: fill-box; transform-origin: 50% 100%; }
.tucano.voando .tucano-parado { animation: none; }
/* Voo (js: iniciarTucano): sobe até sumir, fica fora um tempo e volta */
.tucano.indo .tucano-voo { animation: tucano-ida 1.6s cubic-bezier(.5,0,.8,.6) forwards; }
.tucano.fora .tucano-voo { opacity: 0; }
.tucano.voltando .tucano-voo { animation: tucano-volta 1.8s cubic-bezier(.2,.6,.3,1) forwards; }
.tucano-asa { transform-box: fill-box; transform-origin: 0% 70%; opacity: 0; }
.tucano.voando .tucano-asa { opacity: 1; animation: bater-asa .16s ease-in-out infinite alternate; }
.tucano-bandeira { opacity: 0; transition: opacity .3s; }
.tucano-pretzel, .cegonha-pretzel { opacity: 0; transition: opacity .3s; }
.tucano.com-pretzel .tucano-pretzel, .cegonha.com-pretzel .cegonha-pretzel { opacity: 1; }
.tucano.com-bandeira .tucano-bandeira { opacity: 1; }
.tucano-pano { transform-box: fill-box; transform-origin: 100% 50%; animation: tremular-pano 1.4s ease-in-out infinite; }

/* Catedral da abertura (js: desenharCatedral): arenito rosa, como a de Estrasburgo */
.catedral-pedra { fill: #c98b7c; }
.catedral-pedra-escura { fill: #b0715f; }
.catedral-traco { fill: none; stroke: #9c5f50; stroke-width: 1.4; }
.catedral-vitral, .catedral-porta { fill: #5a3328; }
.catedral-rosa { fill: #8fb3cf; stroke: #9c5f50; stroke-width: 1; }
.catedral-traco-rosa { stroke-width: .8; }
.catedral-frente .catedral-traco { stroke-width: .6; }
.catedral-frente .catedral-fino { stroke-width: .4; }
.catedral-harpa { fill: none; stroke: #a8685a; stroke-width: .45; opacity: .9; }
.catedral-contorno { stroke: #9c5f50; stroke-width: .5; }
/* 14 de julho: bandeira tricolor na ponta da flecha (js: desenharCatedral) */
.catedral-mastro { fill: none; stroke: #6b4a2a; stroke-width: .9; stroke-linecap: round; }
.catedral-bandeira { transform-box: fill-box; transform-origin: 0% 50%; animation: tremular-pano 1.6s ease-in-out infinite; }
[data-tema="noturno"] .catedral-harpa { stroke: #3d2830; }
[data-tema="noturno"] .catedral-pedra { fill: #5b3d44; }
[data-tema="noturno"] .catedral-pedra-escura { fill: #4a2f37; }
[data-tema="noturno"] .catedral-traco { stroke: #3d2830; }
[data-tema="noturno"] .catedral-vitral, [data-tema="noturno"] .catedral-rosa { fill: #ffcf70; filter: drop-shadow(0 0 6px rgb(255 200 90 / .7)); }
[data-tema="noturno"] .catedral-porta { fill: #2a1a1f; }
/* Cruz de Lorraine em cima de uma casa */
.cruz-lorraine { fill: #c41b1d; }
[data-tema="noturno"] .cruz-lorraine { fill: #e5484d; filter: drop-shadow(0 0 5px rgb(229 72 77 / .55)); }

/* Feira de Natal (abertura no Natal, js: desenharFeiraDeNatal) */
.chale-parede { fill: #9a6a42; }
.chale-tabuas { stroke: #7d5232; stroke-width: 1.5; }
.chale-balcao { fill: #3b2416; }
.chale-tampo { fill: #6b4428; }
.chale-telhado { fill: #6b3b22; }
.neve { fill: #fff; }
.guirlanda { fill: none; stroke: #1f6b3a; stroke-width: 6; stroke-linejoin: round; }
.pinheiro-galhos { fill: #1f6b3a; }
.lampada-feira { fill: var(--cor); animation: piscar-lampada 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.36s); }
[data-tema="noturno"] .chale-parede { fill: #4a3222; }
[data-tema="noturno"] .chale-tabuas { stroke: #3a261a; }
[data-tema="noturno"] .chale-balcao { fill: #ffcf70; filter: drop-shadow(0 0 8px rgb(255 190 90 / .7)); }
[data-tema="noturno"] .chale-telhado { fill: #3f2215; }
[data-tema="noturno"] .neve { fill: #dfe7f5; }
[data-tema="noturno"] .pinheiro-galhos { fill: #12402a; }
[data-tema="noturno"] .lampada-feira, [data-tema="noturno"] .pinheiro-estrela { filter: drop-shadow(0 0 5px var(--cor, #ffd23f)); }

.seta-rolar {
  position: absolute; left: 50%; bottom: 28px; z-index: 2; translate: -50% 0;
  width: 28px; height: 46px; border: 2px solid var(--texto); border-radius: 16px; opacity: .7;
  background: color-mix(in srgb, var(--fundo) 60%, transparent);
}
.seta-rolar span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  background: var(--texto); border-radius: 2px; animation: rolar 1.8s ease-in-out infinite;
}

/* ========== 6. Seções ========== */
.secao { padding: clamp(72px, 10vw, 120px) 0; position: relative; }
.secao-destaque { background: var(--fundo-2); transition: background-color .4s; }
/* Faixa decorativa de enxaimel (losangos) no topo das seções em destaque */
.secao-destaque::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background:
    linear-gradient(135deg, var(--madeira) 25%, transparent 25%) 0 0 / 20px 10px,
    linear-gradient(225deg, var(--madeira) 25%, transparent 25%) 0 0 / 20px 10px;
  opacity: .25;
}

.duas-colunas { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .duas-colunas { grid-template-columns: 1fr 1fr; gap: 72px; } }

.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 24px; box-shadow: var(--sombra);
  transition: background-color .4s, border-color .4s;
}

/* Luz que segue o mouse (o JS atualiza --x e --y) */
.cartao-luz { position: relative; overflow: hidden; transition: transform .3s, background-color .4s; }
.cartao-luz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--laranja) 18%, transparent), transparent 70%);
}
.cartao-luz:hover { transform: translateY(-4px); }
.cartao-luz:hover::before { opacity: 1; }

/* ========== 7. A associação ========== */
.pilares { display: grid; gap: 16px; }
.pilares h3 { margin: 12px 0 6px; }
.pilares li:nth-child(2) .pilar-icone { background: color-mix(in srgb, var(--texto) 9%, transparent); color: var(--texto); }
.pilares li:nth-child(3) .pilar-icone { background: color-mix(in srgb, var(--verde) 12%, transparent); color: var(--verde); }
.pilares p { margin: 0; color: var(--suave); font-size: .98rem; }
.pilar-icone {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--vermelho) 12%, transparent); color: var(--vermelho);
}
.pilar-icone svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.numeros {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; margin-top: 80px; text-align: center;
}
@media (min-width: 760px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numero strong {
  display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1; color: var(--vermelho); font-variant-numeric: tabular-nums;
}
.numero:nth-child(even) strong { color: var(--verde); }
.numero span { display: block; margin-top: 8px; color: var(--suave); font-size: .95rem; }

/* ========== 8. UIA ========== */
/* A órbita girando passa um pouco das laterais no celular: corta a sobra (senão a página toda fica mais larga) */
#uia { overflow-x: clip; }
.uia { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .uia { grid-template-columns: 1fr 1.2fr; gap: 72px; } }
.uia-marca { position: relative; width: min(100%, 330px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.uia-orbita { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: girar 40s linear infinite; }
.globo-contorno { fill: color-mix(in srgb, var(--verde) 7%, transparent); stroke: var(--texto); stroke-width: 1.2; stroke-dasharray: 3 7; opacity: .5; }
.ponto { fill: var(--verde); animation: pulsar 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ponto-centro { fill: var(--vermelho); }
.ponto:nth-child(3), .ponto:nth-child(5) { fill: var(--laranja); }
.ponto:nth-child(2) { animation-delay: .4s; } .ponto:nth-child(3) { animation-delay: .8s; }
.ponto:nth-child(4) { animation-delay: 1.2s; } .ponto:nth-child(5) { animation-delay: 1.6s; }
/* A logo da UIA é JPG com fundo branco: fica num círculo branco (nos dois temas), no centro da órbita, com um anel
   claro em volta. Ao passar o mouse (ou com o foco), o círculo cresce um pouco, a órbita se abre e os pontos brilham */
.globo-trilho { fill: none; stroke: var(--texto); stroke-width: .6; opacity: .12; }
/* O círculo branco e o anel são o ::before (é ele que cresce ao passar o mouse): a imagem da logo fica sempre no
   tamanho natural, sem ser ampliada (ampliada, ela borra) */
.uia-logo {
  --anel: rgb(255 255 255 / .45); --anel-fraco: rgb(255 255 255 / .25);
  position: relative; display: grid; place-items: center; width: 68%; aspect-ratio: 1; border-radius: 50%;
}
.uia-logo::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 8px var(--anel), 0 0 0 9px color-mix(in srgb, var(--texto) 10%, transparent), var(--sombra);
  animation: respirar 5s ease-in-out infinite; transition: scale .5s cubic-bezier(.2,.7,.2,1);
}
.uia-logo img { position: relative; }
[data-tema="noturno"] .uia-logo { --anel: rgb(255 255 255 / .1); --anel-fraco: rgb(255 255 255 / .05); }
.uia-orbita, .ponto { transition: scale .6s cubic-bezier(.2,.7,.2,1), filter .4s; }
.uia-marca:has(.uia-logo:hover, .uia-logo:focus-visible) .uia-logo::before { scale: 1.07; }
.uia-marca:has(.uia-logo:hover, .uia-logo:focus-visible) .uia-orbita { scale: 1.07; }
.uia-marca:has(.uia-logo:hover, .uia-logo:focus-visible) .ponto { filter: brightness(1.15) drop-shadow(0 0 5px color-mix(in srgb, var(--laranja) 75%, transparent)); }
.uia-marca:has(.uia-logo:hover, .uia-logo:focus-visible) .globo-contorno { opacity: .8; }
@keyframes respirar {
  0%, 100% { box-shadow: 0 0 0 8px var(--anel), 0 0 0 9px color-mix(in srgb, var(--texto) 10%, transparent), var(--sombra); }
  50% { box-shadow: 0 0 0 14px var(--anel-fraco), 0 0 0 15px color-mix(in srgb, var(--texto) 6%, transparent), var(--sombra); }
}
.uia-logo img { display: block; width: 163px; max-width: 74%; height: auto; } /* tamanho natural da imagem (não borra) */

/* ========== 9. Linha do tempo ========== */
.linha-tempo { position: relative; padding-left: 44px; }
.marcos { display: grid; gap: 28px; }
.linha-tempo-trilho { position: absolute; left: 14px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--borda); }
.linha-tempo-cheio {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(var(--vermelho), var(--verde));
  transform-origin: top; transform: scaleY(var(--progresso, 0));
}
.marco { position: relative; }
.marco-ponto {
  position: absolute; left: -38px; top: 22px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--fundo); border: 3px solid var(--borda); transition: border-color .4s, background-color .4s, transform .4s;
}
.marco.visivel .marco-ponto { border-color: var(--vermelho); background: var(--laranja); transform: scale(1.15); }
.marco .cartao { padding: 20px 22px; }
.marco-ano {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.6rem; color: var(--vermelho); line-height: 1;
  display: block; margin-bottom: 6px;
}
.marco h3 { font-size: 1.15rem; margin-bottom: 6px; }
.marco p { margin: 0; color: var(--suave); font-size: .98rem; }
/* Os cartões da linha do tempo entram mais devagar que o resto do site */
.js .marco.revelar { transition-duration: 1.3s; }

/* Foto do período: abre de cima para baixo (cortina) e vai "assentando" devagar */
.marco-foto { margin: 14px 0 0; border-radius: 14px; overflow: hidden; background: var(--cartao); box-shadow: var(--sombra); }
.marco-foto img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 25%; }
.marco-foto figcaption { padding: 8px 14px; font-size: .8rem; color: var(--suave); line-height: 1.4; }
.js .marco-foto { clip-path: inset(0 0 100% 0 round 14px); transition: clip-path 1.8s cubic-bezier(.65,0,.25,1) .5s; }
.js .marco.visivel .marco-foto { clip-path: inset(0 0 0 0 round 14px); }
.js .marco-foto img { transform: scale(1.15); transition: transform 3s cubic-bezier(.2,.7,.2,1) .5s; }
.js .marco.visivel .marco-foto img { transform: none; }

/* "Você sabia?" no meio da linha do tempo */
.marco-curiosidade .cartao { background: color-mix(in srgb, var(--laranja) 11%, var(--cartao)); border-color: color-mix(in srgb, var(--laranja) 45%, transparent); }
.marco-curiosidade .marco-ano { color: var(--laranja); }
.marco-sabia { display: flex; align-items: center; gap: 10px; }
.marco:nth-of-type(odd) .marco-sabia { justify-content: flex-end; }
#historia[data-estilo="fundo"] .marco-curiosidade .cartao { background: color-mix(in srgb, var(--laranja) 14%, var(--cartao) 90%); }

/* Desktop: cada ano é uma linha. Cartão de um lado da linha central, foto do outro (alternando) */
@media (min-width: 860px) {
  .linha-tempo { padding-left: 0; }
  .marcos { gap: 0; }
  .linha-tempo-trilho { left: 50%; margin-left: -1.5px; }
  .marco { display: grid; grid-template-columns: 1fr 1fr; column-gap: 88px; align-items: center; padding-bottom: 64px; }
  .marco .cartao { grid-column: 1; grid-row: 1; }
  .marco-foto { grid-column: 2; grid-row: 1; margin: 0; }
  .marco:nth-of-type(even) .cartao { grid-column: 2; }
  .marco:nth-of-type(even) .marco-foto { grid-column: 1; }
  .marco-ponto { left: 50%; margin-left: -8.5px; top: calc((100% - 64px) / 2 - 8.5px); }
  .marco:nth-of-type(odd) .cartao { text-align: right; }
  .js .marco.revelar { transform: translateY(50px); }
  .js .marco.revelar.visivel { transform: none; }
}

/* ---------- 9b. História no estilo "fundo" (data-estilo="fundo" na seção) ----------
   A foto do ano no meio da tela ocupa o fundo da seção inteira (camada "grudada" no topo com position: sticky)
   e troca com um esmaecimento. Os cartões passam por cima. Para voltar ao estilo anterior: data-estilo="cartoes" */
.historia-fundos { display: none; }
#historia[data-estilo="fundo"] { padding: 0; background: #051431; isolation: isolate; }
#historia[data-estilo="fundo"] .historia-fundos {
  display: block; position: sticky; top: 0; z-index: 0; overflow: hidden;
  height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
}
.historia-fundo {
  position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.12); transition: opacity 1.4s ease, transform 9s ease-out;
}
.historia-fundo.ativo { opacity: 1; transform: scale(1.01); }
/* Véu marinho por cima das fotos, para o texto ser sempre legível */
.historia-fundos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(5 20 49 / .85), rgb(5 20 49 / .5) 35%, rgb(5 20 49 / .55) 70%, rgb(5 20 49 / .9));
}
.historia-ano {
  position: absolute; left: clamp(12px, 3vw, 40px); bottom: 4px; z-index: 1; line-height: .9;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(4.5rem, 15vw, 12rem);
  color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .38); pointer-events: none;
}
.historia-legenda {
  position: absolute; right: 80px; bottom: 16px; z-index: 1; margin: 0; max-width: min(420px, 55%); /* 80px: fora do botão "voltar ao topo" */
  padding: 6px 12px; border-radius: 10px; background: rgb(0 0 0 / .5); color: #fff; font-size: .8rem; line-height: 1.4;
}
.historia-legenda.trocando, .historia-ano.trocando { animation: trocar .8s cubic-bezier(.2,.7,.2,1) both; }

#historia[data-estilo="fundo"] > .conteudo { position: relative; z-index: 1; padding-top: clamp(72px, 10vw, 120px); padding-bottom: 35vh; }
#historia[data-estilo="fundo"] h2 { color: #fff; }
#historia[data-estilo="fundo"] .introducao { color: rgb(255 255 255 / .82); }
#historia[data-estilo="fundo"] .sobretitulo { color: #ff7b7d; }
#historia[data-estilo="fundo"] .linha-tempo-trilho { background: rgb(255 255 255 / .25); }
#historia[data-estilo="fundo"] .marco-foto { display: none; }
/* Cada ano ocupa quase uma tela: a foto dele fica no fundo enquanto o cartão passa */
#historia[data-estilo="fundo"] .marcos { gap: 0; }
#historia[data-estilo="fundo"] .marco { display: flex; align-items: center; min-height: 70vh; padding: 0; }
#historia[data-estilo="fundo"] .marco-ponto { top: calc(50% - 8.5px); }
#historia[data-estilo="fundo"] .marco .cartao {
  width: 100%; background: color-mix(in srgb, var(--cartao) 90%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .6s, transform .6s, border-color .6s, box-shadow .6s;
}
#historia[data-estilo="fundo"] .marco:not(.atual) .cartao { opacity: .55; transform: scale(.97); }
#historia[data-estilo="fundo"] .marco.atual .cartao { border-color: var(--laranja); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .7); }
@media (min-width: 860px) {
  #historia[data-estilo="fundo"] .marco { display: grid; grid-template-columns: 1fr 1fr; column-gap: 88px; min-height: 80vh; }
  #historia[data-estilo="fundo"] .marco-ponto { top: calc(50% - 8.5px); }
}
@media (max-width: 640px) {
  .historia-legenda { left: 16px; right: 80px; max-width: none; }
  .historia-ano { bottom: 52px; }
}

/* ========== 10. Regiões (abas) ========== */
.abas {
  position: relative; display: flex; width: max-content; margin: 0 auto 32px; padding: 5px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px;
}
.aba {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 10px 28px; border-radius: 999px; font-weight: 600; transition: color .3s;
}
.aba.ativa { color: var(--sobre-vermelho); }
.aba-marcador {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--vermelho);
  transition: transform .45s cubic-bezier(.6,0,.2,1.2), width .45s, background-color .45s;
}
.abas[data-regiao="lorena"] .aba-marcador { background: var(--marinho); }
.abas[data-regiao="lorena"] .aba.ativa { color: #ffffff; }

.painel-regiao { display: grid; gap: 32px; padding: clamp(24px, 4vw, 44px); align-items: center; }
@media (min-width: 820px) { .painel-regiao { grid-template-columns: 260px 1fr; gap: 48px; } }
.painel-regiao.trocando > * { animation: trocar .55s cubic-bezier(.2,.7,.2,1) both; }
.painel-regiao.trocando > *:nth-child(2) { animation-delay: .08s; }

.bandeira-caixa { perspective: 600px; }
.bandeira {
  display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 5 / 3; object-fit: cover; margin: 0 auto;
  border-radius: 10px; box-shadow: var(--sombra);
  animation: tremular 5s ease-in-out infinite; transform-origin: left center; /* a bandeira "tremula" ao vento */
}
.regiao-nome { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 0; }
.regiao-frances { font-family: var(--fonte-titulo); font-style: italic; color: var(--suave); margin-bottom: 20px; }
.fatos { display: grid; gap: 0; margin: 0 0 20px; }
.fato { display: grid; grid-template-columns: 1fr; padding: 10px 0; border-bottom: 1px dashed var(--borda); }
@media (min-width: 560px) { .fato { grid-template-columns: 180px 1fr; gap: 16px; } }
.fato dt { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 600; padding-top: 3px; }
.fato dd { margin: 0; font-weight: 500; }
/* "Você sabia?": cartão com título, contador, texto e controles */
.curiosidades {
  display: grid; gap: 12px; padding: 18px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--laranja) 11%, var(--cartao)); border: 1px solid color-mix(in srgb, var(--laranja) 35%, transparent);
}
.curiosidade-topo { display: flex; align-items: center; gap: 10px; }
.curiosidade-icone { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--laranja); color: #fff; }
.curiosidade-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.curiosidade-titulo { font-family: var(--fonte-titulo); font-size: 1.1rem; color: var(--texto); }
.curiosidade-numero { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }
/* Todas as curiosidades no mesmo lugar (mesma célula da grade): a altura é a da mais longa, então nada pula */
.curiosidade-textos { display: grid; }
.curiosidade-texto {
  grid-area: 1 / 1; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--texto);
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity .5s, transform .5s, visibility 0s .5s;
}
.curiosidade-texto.ativa { opacity: 1; transform: none; visibility: visible; transition: opacity .5s .1s, transform .5s .1s, visibility 0s; }
.curiosidade-controles { display: flex; align-items: center; gap: 6px; }
.curiosidade-pontos { display: flex; gap: 6px; margin-right: auto; }
.curiosidade-seta {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--borda); background: var(--cartao);
  cursor: pointer; font-size: 1.15rem; line-height: 1; display: grid; place-items: center; transition: border-color .2s;
}
.curiosidade-seta:hover { border-color: var(--laranja); }
/* Setas desenhadas (js: SETA_ANTERIOR, SETA_PROXIMA): sempre no centro do círculo */
.curiosidade-seta, .agenda-seta, .carrossel-seta { color: var(--texto); padding: 0; }
.curiosidade-seta svg, .agenda-seta svg, .carrossel-seta svg {
  width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* Pontinhos: o ativo enche em 7 segundos (o tempo até a próxima curiosidade) */
.curiosidade-ponto { position: relative; width: 28px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--laranja) 25%, var(--borda)); cursor: pointer; overflow: hidden; }
.curiosidade-ponto.ativo::after { content: ""; position: absolute; inset: 0; background: var(--laranja); transform-origin: left; animation: encher 7s linear forwards; }
.curiosidades.pausado .curiosidade-ponto.ativo::after { animation-play-state: paused; }

/* ========== 11. Cultura ========== */
.sabores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; margin-bottom: 96px; }
/* No celular, 2 cartões por linha (menores) para a lista não ficar comprida */
/* (prefixo .sabores: estas regras vêm antes das gerais no arquivo e precisam vencer) */
@media (max-width: 560px) {
  .sabores { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sabores .sabor { height: 190px; }
  .sabores .sabor-face { padding: 14px; }
  .sabores .sabor-nome { font-size: 1.05rem; }
  .sabores .sabor-dica { top: 12px; right: 12px; }
  .sabores .sabor-verso-titulo { font-size: 1rem; }
  .sabores .sabor-verso-texto { font-size: .82rem; line-height: 1.4; }
}
.sabor {
  display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; text-align: left;
  height: 230px; perspective: 1000px;
}
.sabor-dentro {
  display: block; position: relative; height: 100%; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3,1.3,.5,1);
}
.sabor:hover .sabor-dentro { transform: rotateY(8deg) rotateX(4deg); }
.sabor.virado .sabor-dentro { transform: rotateY(180deg); }
.sabor-face {
  position: absolute; inset: 0; border-radius: var(--raio); padding: 22px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; box-shadow: var(--sombra);
}
.sabor-frente { color: #fff; justify-content: flex-end; overflow: hidden; }
.sabor-foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.sabor:hover .sabor-foto { transform: scale(1.08); }
.sabor-frente::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--veu); }
.sabor-frente > span { z-index: 2; }
.sabor-frente[data-regiao="alsacia"] { background: #9a1214; --veu: linear-gradient(to top, rgb(154 18 20 / .95), rgb(154 18 20 / .35) 55%, rgb(154 18 20 / 0) 80%); }
.sabor-frente[data-regiao="lorena"] { background: #051431; --veu: linear-gradient(to top, rgb(5 20 49 / .95), rgb(5 20 49 / .35) 55%, rgb(5 20 49 / 0) 80%); }
.sabor-dica { background: rgb(0 0 0 / .35); padding: 3px 8px; border-radius: 99px; }
[data-tema="noturno"] .sabor-frente { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.sabor-nome, .sabor-regiao, .sabor-verso-titulo, .sabor-verso-texto { display: block; }
.sabor-nome { position: relative; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.6rem; line-height: 1.05; }
.sabor-regiao { position: relative; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; opacity: .85; margin-bottom: 6px; }
.sabor-dica { position: absolute; top: 18px; right: 18px; font-size: .78rem; opacity: .8; display: flex; gap: 6px; align-items: center; }
.sabor-dica svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sabor-verso {
  transform: rotateY(180deg); background: var(--cartao); border: 1px solid var(--borda);
  justify-content: center; gap: 8px;
}
.sabor-verso-titulo { font-family: var(--fonte-titulo); font-size: 1.25rem; color: var(--vermelho); }
.sabor-verso-texto { color: var(--suave); font-size: .96rem; line-height: 1.5; }

.tradicoes-titulo { margin-bottom: 28px; }
.carrossel { position: relative; }
.carrossel-trilho {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 8px 4px 24px; scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.tradicao {
  flex: 0 0 min(300px, 82%); scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 10px; padding: 0 0 22px; overflow: hidden;
}
.tradicao > :not(.tradicao-foto) { margin-left: 22px; margin-right: 22px; }
.tradicao-foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; transition: transform .8s cubic-bezier(.2,.7,.2,1); user-select: none; }
.tradicao:hover .tradicao-foto { transform: scale(1.06); }
/* O número fica "pendurado" na borda da foto */
.tradicao-numero {
  position: relative; align-self: flex-start; margin-top: -30px; padding: 0 10px; border-radius: 12px; background: var(--cartao);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1.1; color: transparent; -webkit-text-stroke: 1.5px var(--vermelho);
}
.tradicao h3 { margin: 0; }
.tradicao p { margin: 0; color: var(--suave); font-size: .98rem; }
.carrossel-seta {
  position: absolute; top: 50%; translate: 0 -60%; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--borda);
  background: var(--cartao); box-shadow: var(--sombra); cursor: pointer; font-size: 1.6rem; line-height: 1;
  display: none; transition: transform .2s, opacity .2s;
}
.carrossel-seta:hover { transform: scale(1.08); }
.carrossel-seta:disabled { opacity: 0; pointer-events: none; }
.carrossel-seta[data-direcao="-1"] { left: -10px; }
.carrossel-seta[data-direcao="1"] { right: -10px; }
@media (min-width: 760px) { .carrossel-seta { display: grid; place-items: center; } }

/* ========== 12. Agenda ========== */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; }
.filtro {
  border: 1px solid var(--borda); background: var(--cartao); padding: 8px 18px; border-radius: 999px;
  cursor: pointer; font-weight: 500; font-size: .95rem; transition: background-color .25s, color .25s, border-color .25s;
}
.filtro:hover { border-color: var(--vermelho); }
.filtro.ativo { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

/* Cores das categorias, como no calendário: marinho, vermelho, verde e amarelo */
.cor-institucional { --c: var(--marinho); }
.cor-cultura { --c: var(--vermelho); }
.cor-uia { --c: var(--verde); }
.cor-comemorativa { --c: #e5a51c; }
.filtro i, .agenda-pontos i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.filtro i { margin-right: 8px; vertical-align: 0; }

.agenda-ano { color: var(--vermelho); }
.agenda-proximo {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px;
  max-width: 760px; margin: -6px auto 26px; text-align: center; color: var(--suave);
}
.agenda-proximo strong { color: var(--texto); }
.agenda-proximo-rotulo { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--vermelho); }

.agenda { display: grid; gap: 14px; }
.agenda-meses { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.agenda-mes-botao {
  display: grid; gap: 5px; justify-items: center; padding: 9px 4px 7px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--cartao); font-weight: 600; font-size: .9rem; text-transform: capitalize;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s;
}
.agenda-mes-botao:hover { border-color: var(--vermelho); transform: translateY(-2px); }
.agenda-mes-botao.vazio { color: var(--suave); }
.agenda-mes-botao.ativo { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.agenda-pontos { display: flex; gap: 3px; min-height: 7px; }
.agenda-pontos i { width: 7px; height: 7px; }
/* Celular: os meses viram uma fila que rola para o lado */
@media (max-width: 860px) {
  .agenda-meses { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .agenda-meses::-webkit-scrollbar { display: none; }
  .agenda-mes-botao { flex: 0 0 62px; scroll-snap-align: center; }
}

.agenda-mes { display: grid; gap: 28px; padding: clamp(20px, 3vw, 34px); }
@media (min-width: 860px) { .agenda-mes { grid-template-columns: 290px 1fr; gap: 40px; } .agenda-lista { padding-left: 34px; border-left: 1px solid var(--borda); } }
.agenda-mes.trocando > * { animation: trocar .45s cubic-bezier(.2,.7,.2,1) both; }
.agenda-mes.trocando > *:nth-child(2) { animation-delay: .07s; }
.agenda-mes-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.agenda-mes-titulo > div { text-align: center; }
.agenda-mes-numero { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--vermelho); }
.agenda-mes-nome { font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; }
.agenda-seta {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--borda); background: var(--fundo);
  cursor: pointer; font-size: 1.4rem; line-height: 1; display: grid; place-items: center; transition: border-color .2s;
}
.agenda-seta:hover:not(:disabled) { border-color: var(--vermelho); }
.agenda-seta:disabled { opacity: .3; cursor: default; }

/* Mini calendário: os dias com evento ficam na cor da categoria */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; }
.cal-cabeca { padding-bottom: 4px; font-size: .72rem; font-weight: 700; color: var(--suave); }
.cal-dia { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; }
button.cal-dia { border: 0; background: var(--c); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: transform .2s; }
button.cal-dia:hover { transform: scale(1.14); }
.cal-dia.cor-comemorativa, .agenda-data.cor-comemorativa { color: #2a1a00; }
.cal-dia.hoje { outline: 2px solid var(--laranja); outline-offset: -2px; }

.agenda-lista { display: grid; gap: 12px; align-content: start; }
.agenda-evento { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--borda); background: var(--fundo); }
.agenda-evento.destaque { border: 2px solid var(--verde); background: color-mix(in srgb, var(--verde) 8%, var(--fundo)); }
.agenda-evento.passou { opacity: .55; }
.agenda-evento.piscando { animation: piscar-evento 1.2s ease-out; }
.agenda-destaque {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 99px;
  background: var(--verde); color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.agenda-evento-linha { display: flex; gap: 14px; align-items: flex-start; }
.agenda-data { flex: 0 0 auto; min-width: 64px; padding: 3px 10px; border-radius: 8px; background: var(--c); color: #fff; font-weight: 700; font-size: .85rem; text-align: center; white-space: nowrap; }
.agenda-evento h3 { margin: 0 0 3px; font-family: var(--fonte-texto); font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.agenda-evento p { margin: 0; font-size: .93rem; color: var(--suave); }
.agenda-evento .agenda-tipo { margin-top: 6px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.agenda-vazio { margin: 0; color: var(--suave); }
.agenda-nota { margin: 18px 0 0; text-align: center; font-size: .85rem; color: var(--suave); }

.etiqueta {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--verde) 13%, transparent); color: var(--verde);
}
.etiqueta-destaque { background: color-mix(in srgb, var(--laranja) 22%, transparent); color: var(--texto); }

/* ========== 13. Formulário ========== */
.vantagens { display: grid; gap: 12px; margin-top: 24px; }
.vantagens li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.vantagens li::before {
  content: "✓"; flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde); color: #ffffff; font-size: .8rem; font-weight: 800;
}

.formulario { display: grid; gap: 16px; padding: clamp(22px, 4vw, 36px); }
.campo { position: relative; }
.campo input, .campo textarea {
  width: 100%; padding: 22px 16px 8px; border-radius: 12px; border: 1.5px solid var(--borda);
  background: var(--fundo); color: var(--texto); font: inherit; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--vermelho); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vermelho) 15%, transparent); }
/* Rótulo que "sobe" quando o campo tem foco ou texto */
.campo label {
  position: absolute; left: 17px; top: 16px; color: var(--suave); pointer-events: none;
  transform-origin: left top; transition: transform .2s, color .2s;
}
.campo input:focus + label, .campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label, .campo textarea:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(.76); color: var(--vermelho);
}
.campo .erro { display: block; color: var(--vermelho); font-size: .85rem; min-height: 0; margin-top: 4px; }
.campo.com-erro input { border-color: var(--vermelho); animation: tremer .4s; }
.caixa { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: .96rem; }
.caixa input { width: 20px; height: 20px; accent-color: var(--vermelho); }

/* ========== 14. Dúvidas ========== */
.perguntas { display: grid; gap: 12px; }
.pergunta { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; transition: border-color .3s; }
.pergunta[open] { border-color: var(--vermelho); }
.pergunta summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; font-size: 1.05rem;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta-icone {
  flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo-2); color: var(--vermelho); transition: background-color .3s, color .3s;
}
.pergunta-icone svg { width: 18px; height: 18px; fill: currentColor; }
.pergunta summary:hover .pergunta-icone { background: color-mix(in srgb, var(--vermelho) 14%, var(--fundo-2)); }
.pergunta[open] .pergunta-icone { background: var(--vermelho); color: var(--sobre-vermelho); }
.resposta { padding: 0 22px 4px; color: var(--suave); }
.pergunta[open] .resposta { animation: abrir .4s ease-out; }

/* ========== 15. Contato e rodapé ========== */
.contato-cartoes { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 760px) { .contato-cartoes { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; } }
.contato-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; text-decoration: none; padding: 32px 20px; }
.contato-item svg { width: 34px; height: 34px; fill: none; stroke: var(--vermelho); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; transition: transform .4s; }
.contato-item:hover svg { transform: scale(1.15) rotate(-6deg); }
.contato-item span { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); font-weight: 600; }
.contato-item strong { font-size: 1.15rem; word-break: break-word; }
/* Botões com o que fazer escrito ("Escrever um e-mail", "Ver no mapa", "Copiar"): deixam claro que dá para clicar */
.contato-item { cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s; }
.contato-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--vermelho) 45%, var(--borda)); }
/* um embaixo do outro, da mesma largura, no pé do cartão (os dois cartões ficam alinhados) */
.contato-acoes { display: grid; gap: 8px; width: min(100%, 250px); margin-top: auto; padding-top: 18px; }
.contato-acoes .botao svg { width: 18px; height: 18px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contato-item:hover .contato-acoes .botao svg { transform: none; }

.rodape { background: #051431; color: #dfe5f1; }
.rodape-faixa { height: 8px; background: linear-gradient(90deg, #c41b1d 0 33.3%, #fff 33.3% 66.6%, #127434 66.6%); }
.rodape-dentro { display: grid; gap: 12px; justify-items: center; text-align: center; padding-top: 48px; padding-bottom: 48px; }
.rodape-logo { width: 260px; height: auto; transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.rodape-logo:hover { transform: rotate(-2deg) scale(1.03); }
.rodape-lema { font-family: var(--fonte-titulo); font-style: italic; margin: 8px 0 0; opacity: .85; }
.rodape-pequeno { font-size: .85rem; opacity: .6; margin: 0; }
.creditos { max-width: 760px; margin-top: 10px; font-size: .78rem; }
.creditos summary { cursor: pointer; opacity: .65; list-style: none; }
.creditos summary::-webkit-details-marker { display: none; }
.creditos summary:hover { opacity: 1; }
.creditos ul { display: grid; gap: 4px; margin-top: 12px; text-align: left; opacity: .75; }
.creditos a { color: #fff; }

/* ========== 15b. Página "A história da Casa" (historia-da-casa.html) ========== */
/* Cartão de 2026 na linha do tempo: leva para a página. Seta e leve elevação ao passar o mouse ou com o foco */
.marco-link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform .3s, border-color .3s, box-shadow .3s; }
.marco-link:hover, .marco-link:focus-visible { transform: translateY(-4px); border-color: var(--vermelho); box-shadow: 0 18px 40px -18px rgb(5 20 49 / .45); }
.marco-chamada { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: .95rem; color: var(--vermelho); }
.marco-seta { display: inline-block; transition: transform .25s; }
.marco-link:hover .marco-seta, .marco-link:focus-visible .marco-seta { transform: translateX(5px); }
#historia[data-estilo="fundo"] .marco-com-link .cartao { opacity: 1; }

.pagina-topo { padding: 112px 0 56px; background: var(--fundo-2); position: relative; }
.pagina-topo::after { /* faixa vermelho | branco | verde, como no rodapé */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, #c41b1d 0 33.3%, #fff 33.3% 66.6%, #127434 66.6%);
}
.pagina-topo-dentro { display: grid; justify-items: center; text-align: center; }
.pagina-topo h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); margin: 0 0 18px; }
.pagina-logo { width: clamp(130px, 22vw, 180px); height: auto; margin: 6px 0 10px; }
:root:not([data-tema="noturno"]) .pagina-logo.so-noturno, [data-tema="noturno"] .pagina-logo.so-claro { display: none; }
.link-voltar {
  justify-self: start; display: inline-flex; gap: 8px; align-items: center; margin-bottom: 18px;
  font-weight: 600; color: var(--texto); text-decoration: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--cartao); transition: border-color .2s, transform .2s;
}
.link-voltar:hover { border-color: var(--vermelho); transform: translateX(-3px); }
.pagina-datas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pagina-datas li { padding: 8px 16px; border-radius: 999px; background: var(--cartao); border: 1px solid var(--borda); font-size: .95rem; }
.pagina-datas span { color: var(--suave); margin-right: 4px; }

.casa-texto .conteudo { display: grid; gap: clamp(36px, 6vw, 56px); }
.casa-bloco { position: relative; padding-left: 64px; }
.casa-bloco h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.casa-bloco p { font-size: 1.08rem; color: var(--texto); }
.casa-bloco p:last-child { margin-bottom: 0; }
.casa-numero {
  position: absolute; left: 0; top: -2px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--vermelho);
}
.casa-convite { padding: 32px 32px 32px 96px; border-radius: var(--raio); background: color-mix(in srgb, var(--vermelho) 8%, var(--cartao)); border: 1px solid color-mix(in srgb, var(--vermelho) 30%, transparent); }
.casa-convite .casa-numero { left: 32px; top: 30px; }
.casa-convite .botao { margin-top: 18px; }
@media (max-width: 560px) {
  .casa-bloco { padding-left: 0; padding-top: 44px; }
  .casa-numero { top: 0; }
  .casa-convite { padding: 64px 22px 24px; }
  .casa-convite .casa-numero { left: 22px; top: 22px; }
}

.casa-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.casa-foto { margin: 0; border-radius: 14px; overflow: hidden; background: var(--cartao); box-shadow: var(--sombra); }
.casa-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s; }
.casa-foto:hover img { transform: scale(1.04); }
.casa-foto figcaption { padding: 10px 14px; font-size: .88rem; color: var(--suave); }
.casa-vazio { grid-column: 1 / -1; display: grid; justify-items: center; gap: 14px; text-align: center; color: var(--suave); padding: 12px; list-style: none; }
.casa-vazio p { margin: 0; }
.casa-vazio-molduras { display: flex; gap: 12px; }
.casa-vazio-molduras i { width: clamp(70px, 18vw, 120px); aspect-ratio: 4 / 3; border-radius: 12px; border: 2px dashed var(--borda); background: var(--cartao); }
.casa-documentos { display: grid; gap: 12px; margin-bottom: 36px; }
.casa-documento { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 16px 18px; }
.casa-documento strong { display: block; }
.casa-documento small { color: var(--suave); }
.casa-documento-icone { flex: 0 0 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--vermelho) 12%, transparent); color: var(--vermelho); }
.casa-documento-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Árvore genealógica: ilustração parada (SVG desenhado pelo js: desenharIlustracaoArvore, num quadro de
   1000 x 1150) com as molduras dos nomes por cima, nas mesmas proporções. Os tamanhos de letra usam cqw
   (porcentagem da largura do quadro), para tudo crescer junto com o desenho. No celular, o quadro rola para os lados */
.arvore-rolagem {
  overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; box-shadow: var(--sombra);
  scrollbar-width: thin; max-width: 980px; margin: 0 auto;
}
.arvore-quadro { position: relative; container-type: inline-size; min-width: 760px; aspect-ratio: 1000 / 1150; color: #3d2a16; }
.arvore-ilustracao { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* O título fica entre o brasão e o mastro (29% a 70% da largura); palavras longas diminuem (js: montarArvore) */
.arvore-titulo { position: absolute; left: 29%; width: 41%; top: 8.4%; display: grid; justify-items: center; }
.arvore-titulo h2 {
  width: min-content; margin: 0; text-align: center; text-transform: uppercase; font-family: var(--fonte-titulo);
  font-size: calc(6.1cqw * var(--escala-titulo, 1)); font-weight: 700; line-height: 1.04; letter-spacing: .01em; color: #8f1d1a;
  text-shadow: 0 1px 0 rgb(255 255 255 / .5);
}
.arvore-titulo h2::first-line { color: #1f5a2e; } /* "Árvore" em verde e "genealógica" em vermelho, como na logo */
.arvore-cartela {
  position: absolute; left: 34%; width: 32%; top: 20.6%; height: 4.8%; margin: 0; display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-style: italic; font-size: 1.9cqw; color: #4a321b; text-align: center;
}
.arvore-pessoas { list-style: none; margin: 0; padding: 0; }
.arvore-pessoa {
  position: absolute; display: grid; align-content: center; justify-items: center; gap: .2cqw; padding: .6cqw;
  text-align: center; font-family: var(--fonte-titulo); line-height: 1.15; color: #3d2a16;
  background: #f9f2df; border: .22cqw solid #6b4a2a; border-radius: .3cqw;
  box-shadow: inset 0 0 0 .42cqw #f9f2df, inset 0 0 0 .54cqw #8a6a3a, 0 .5cqw 1cqw -.5cqw rgb(61 42 22 / .7);
}
.arvore-pessoa strong { font-size: 1.55cqw; font-weight: 600; overflow-wrap: anywhere; }
.arvore-pessoa span { font-size: 1.35cqw; }
.arvore-vaga strong { font-weight: 400; font-style: italic; opacity: .5; }
.arvore-dica, .arvore-nota { text-align: center; font-style: italic; color: var(--suave); margin: 14px 0 0; }
.arvore-dica { display: none; }
@media (max-width: 820px) { .arvore-dica { display: block; } }

/* Desenho: o mesmo nos dois temas (é um quadro). As casas e a catedral da abertura mudam à noite: aqui, não */
.arvore-ilustracao { --madeira: #4f3526; --telhado: #a3372b; --janela: #d6e6f0; }
[data-tema="noturno"] .arvore-ilustracao .parede { fill: var(--cor); }
[data-tema="noturno"] .arvore-ilustracao .persiana { fill: var(--persiana); }
[data-tema="noturno"] .arvore-ilustracao .janela, [data-tema="noturno"] .arvore-ilustracao .janela-apagada { fill: var(--janela); filter: none; animation: none; }
[data-tema="noturno"] .arvore-ilustracao .catedral-pedra { fill: #c98b7c; }
[data-tema="noturno"] .arvore-ilustracao .catedral-pedra-escura { fill: #b0715f; }
[data-tema="noturno"] .arvore-ilustracao .catedral-traco { stroke: #9c5f50; }
[data-tema="noturno"] .arvore-ilustracao .catedral-harpa { stroke: #a8685a; }
[data-tema="noturno"] .arvore-ilustracao .catedral-vitral { fill: #5a3328; filter: none; }
[data-tema="noturno"] .arvore-ilustracao .catedral-rosa { fill: #8fb3cf; filter: none; }
[data-tema="noturno"] .arvore-ilustracao .catedral-porta { fill: #5a3328; }
[data-tema="noturno"] .arvore-ilustracao .cegonha-corpo { fill: #fff; }
.arvore-madeira-contorno path { fill: #3e2914; stroke: #3e2914; stroke-width: 2.4; stroke-linejoin: round; }
.arvore-madeira path { fill: #6b4a2a; }
.arvore-casca { fill: none; stroke: #3e2914; stroke-width: 1.3; opacity: .45; }
.arvore-nervura { stroke: #e9f0c8; stroke-width: .5; opacity: .6; }
.arvore-ouro-traco { fill: none; stroke: #a7843b; stroke-width: 2.2; stroke-linecap: round; }
.arvore-moldura-ouro { fill: none; stroke: url(#arvore-ouro-grad); stroke-width: 3; }
.arvore-ouro { fill: #e9c35a; stroke: #8a6a2c; stroke-width: .5; }
.arvore-medalhao { fill: #f8f0dc; stroke: url(#arvore-ouro-grad); stroke-width: 4; }
.arvore-cruz { fill: #c41b1d; }
.arvore-louro-galho { fill: #5a4a22; }
.arvore-fita { fill: #c41b1d; stroke: #7d1412; stroke-width: 1; }
.arvore-fita-ponta { fill: #9c1616; stroke: #6a0f0e; stroke-width: 1; }
.arvore-reflexo { stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: .7; }
.arvore-parreiras { fill: none; stroke: #4f6e2c; stroke-width: 4; stroke-linecap: round; stroke-dasharray: .1 8; }
.arvore-castelo { fill: #b0715f; stroke: #6e3f33; stroke-width: .8; }
.arvore-telhadinho { fill: #7d2a22; }
.arvore-janelinhas { fill: #4a2a22; }
.arvore-arabesco { fill: none; stroke: #6b4a2a; stroke-width: 1.2; stroke-linecap: round; }
.arvore-ninho { fill: #7a5634; stroke: #5a3d22; stroke-width: 1.5; }

/* ========== 16. Extras ========== */
.voltar-topo {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 50px; height: 50px; border-radius: 50%;
  background: var(--cartao); box-shadow: var(--sombra);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.voltar-topo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.voltar-topo svg { width: 100%; height: 100%; }
.anel-fundo { fill: none; stroke: var(--borda); stroke-width: 3; }
.anel {
  fill: none; stroke: var(--vermelho); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 125.7; stroke-dashoffset: calc(125.7 * (1 - var(--progresso, 0)));
  transform: rotate(-90deg); transform-origin: center;
}
.voltar-topo .seta { fill: none; stroke: var(--texto); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.voltar-topo:hover .seta { transform: translateY(-2px); }

.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 70; translate: -50% 0;
  max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 14px;
  background: var(--texto); color: var(--fundo); font-weight: 500; box-shadow: var(--sombra);
  opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s;
}
.aviso.visivel { opacity: 1; transform: none; }

/* Troca de tema com círculo que se expande a partir do botão (navegadores com View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ========== Épocas do ano (js/epocas.js) ========== */
.epoca-particulas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.epoca-enfeites { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.epoca-selo {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 clamp(6px, 1.1svh, 14px); padding: 3px 13px 3px 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--cartao) 88%, transparent); border: 1px solid var(--borda); box-shadow: var(--sombra);
  font-weight: 600; font-size: .82rem; animation: selo-entrar .8s cubic-bezier(.2,.7,.2,1) .2s both;
}
.epoca-selo[hidden] { display: none; }
/* Nas épocas, as casas e o título têm o mesmo tamanho de sempre. O selo da época fica no lugar da linha
   "Membro da Union Internationale des Alsaciens" (não ocupa uma linha a mais) e, se ainda não couber,
   encaixarAbertura (js) diminui só as letras */
:root[data-epoca] .abertura .sobretitulo { display: none; }
/* Com enfeites pendurados no topo (bandeirinhas, luzes, serpentinas, ovos), o texto da abertura desce um pouco */

.epoca-selo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); animation: pulsar-selo 1.8s ease-out infinite; }

.enfeite-bandeirinhas, .enfeite-luzes, .enfeite-serpentinas { position: absolute; left: 0; top: 62px; }
.varal { fill: none; stroke: var(--texto); stroke-opacity: .35; stroke-width: 1.5; }
.bandeirinha { transform-box: fill-box; transform-origin: 50% 0; animation: balancar 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.lampada { fill: var(--cor); animation: piscar-lampada 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.36s); }
[data-tema="noturno"] .lampada { filter: drop-shadow(0 0 6px var(--cor)); }
.enfeite-serpentinas path { fill: none; stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; animation: balancar 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
.ovo { position: absolute; top: 62px; width: clamp(24px, 3vw, 36px); padding-top: var(--fio); transform-origin: 50% 0; animation: balancar-ovo 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.ovo::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.5px; height: var(--fio); background: var(--texto); opacity: .4; }
.ovo svg { width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .2)); }
.estrela-guia { position: absolute; top: 12%; left: -240px; width: 220px; animation: cruzar 28s linear infinite; filter: drop-shadow(0 0 10px rgb(255 210 63 / .8)); }

/* Animações */
@keyframes entrar-palavra { to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes piscar { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes deslizar { from { transform: translateX(-250px); } to { transform: translateX(110vw); } }
@keyframes voar { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes planar { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
@keyframes bater { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }
@keyframes rolar { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }
@keyframes pulsar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes trocar { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tremer { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pulinho { 0%, 84%, 100% { transform: none; } 88% { transform: translateY(-7px) rotate(-6deg); } 92% { transform: none; } 95% { transform: translateY(-3px); } }
@keyframes tremular { 0%, 100% { transform: rotateY(0) skewY(0); } 50% { transform: rotateY(-12deg) skewY(-1.5deg); } }
@keyframes girar { to { transform: rotate(360deg); } }
/* --voo-x e --voo-y: até fora da tela, pela borda direita (calculado no js: iniciarTucano) */
@keyframes tucano-ida {
  0% { transform: translate(0, 0) scale(1, 1) rotate(0); }
  20% { transform: translate(0, -8px) scale(-1, 1) rotate(0); }
  100% { transform: translate(var(--voo-x, 600px), var(--voo-y, -300px)) scale(-1, 1) rotate(10deg); }
}
@keyframes tucano-volta {
  0% { transform: translate(var(--voo-x, 600px), var(--voo-y, -300px)) rotate(-8deg); }
  85% { transform: translate(0, -16px) rotate(0); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes bater-asa { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }
@keyframes tremular-pano { 0%, 100% { transform: skewY(-5deg) scaleX(.96); } 50% { transform: skewY(5deg) scaleX(1); } }
@keyframes encher { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes piscar-evento { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--laranja) 70%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
@keyframes selo-entrar { from { opacity: 0; transform: translateY(-10px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes pulsar-selo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vermelho) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes balancar { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes balancar-ovo { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes piscar-lampada { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes cruzar { from { transform: translate(0, 40px); } to { transform: translate(calc(100vw + 480px), -30px); } }
@keyframes piscar-janela { 0%, 60% { fill: var(--janela); } 61%, 100% { fill: #1c2340; } }

/* ========== 17. Movimento reduzido ========== */
/* Quem pede "reduzir movimento" no sistema vê o site parado, sem perder nada de conteúdo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cegonhas, .nuvem { display: none; }
  .js .revelar, .js .palavra { opacity: 1; transform: none; }
  .js .marco-foto { clip-path: none; }
  .js .marco-foto img { transform: none; }
  .curiosidade-ponto.ativo::after { animation: none; transform: none; }
}