/* LE Viagens — cores medidas nas peças dela (branding/medir-tokens.mjs). Texto nunca branco sobre água. */
:root {
  --agua: #05A6B4;
  --agua-clara: #37C7D0;
  --ceu: #8ED3DA;
  --gelo: #C8F5F7;
  --petroleo: #004151;
  --petroleo-2: #0B5466;
  --letreiro: #67A9B7;
  --papel: #F4FBFC;
  --branco: #FFFFFF;
  --agua-texto: #007F8B;
  --sombra: 0 24px 60px -24px rgba(0, 65, 81, .45);
  --raio: 22px;
  --display: 'Outfit', 'Trebuchet MS', sans-serif;
  --corpo: 'Manrope', 'Segoe UI', sans-serif;
  --larg: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.6 var(--corpo); color: var(--petroleo); background: var(--papel); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; margin: 0; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.fino { font-weight: 200; }
.sobretitulo { font: 600 .78rem/1 var(--corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--agua-texto); margin: 0 0 1.1rem; }
.secao { max-width: var(--larg); margin: 0 auto; padding: clamp(4.5rem, 9vw, 8rem) 1.4rem; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--branco); padding: .6rem 1rem; }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Botões */
.botao { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border-radius: 999px; font: 600 1rem/1 var(--corpo); text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; }
.botao:hover { transform: translateY(-2px); }
.botao-escuro { background: var(--petroleo); color: var(--branco); box-shadow: 0 14px 30px -14px rgba(0, 65, 81, .8); }
.botao-escuro:hover { background: var(--petroleo-2); }
.botao-linha { border: 1.5px solid var(--petroleo); color: var(--petroleo); }
.botao-grande { padding: 1.15rem 1.9rem; font-size: 1.08rem; }
.link-seta { display: inline-flex; gap: .5rem; align-items: center; color: var(--agua-texto); font-weight: 600; text-decoration: none; margin-top: 1.2rem; }
.link-seta:hover { text-decoration: underline; }

/* Topo */
.topo { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 2rem; max-width: var(--larg); margin: 0 auto; padding: 1.1rem 1.4rem; }
.topo-logo img { width: 112px; }
.topo-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.topo-nav a { text-decoration: none; font-weight: 600; font-size: .95rem; }
.topo-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.topo-cta { padding: .7rem 1.1rem; }


/* Entrada do hero (trava em app.js: .entrou) */
.entra { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d) * 140ms); }
.entrando .entra { opacity: 0; transform: translateY(24px); }
.entrou .entra { opacity: 1 !important; transform: none !important; }

/* Números */
.numeros { background: var(--petroleo); color: var(--gelo); }
.numeros { position: relative; overflow: hidden; }
.numeros::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 140% at 50% 120%, rgba(55,199,208,.16), transparent 70%); pointer-events: none; }
.numeros ul { position: relative; list-style: none; margin: 0 auto; padding: 2.8rem 1.4rem; max-width: var(--larg); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.numeros li { display: flex; align-items: flex-start; gap: 1rem; }
.numeros li > div { padding-top: .35rem; }
.numeros strong { display: block; font: 800 clamp(2.6rem, 5vw, 3.8rem)/1 var(--display); color: var(--agua-clara); font-variant-numeric: tabular-nums; }
.numeros li span:not(.carimbo) { display: block; font-size: .95rem; line-height: 1.3; margin-top: .25rem; }

/* Carimbo de passaporte: círculo tracejado com anel duplo, levemente girado; "carimba" ao entrar na tela */
.carimbo { flex: none; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; color: var(--agua-clara);
  border: 2px dashed rgba(55,199,208,.6); box-shadow: inset 0 0 0 5px var(--petroleo), inset 0 0 0 6.5px rgba(55,199,208,.35); background: rgba(55,199,208,.07); rotate: -9deg; }
.numeros li:nth-child(even) .carimbo { rotate: 7deg; }
.carimbou .carimbo { animation: carimba .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 140ms); }
@keyframes carimba { 0% { scale: 1.6; opacity: 0; } 60% { scale: .92; opacity: 1; } 100% { scale: 1; } }
.ic { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic * { animation-play-state: paused; }
.viva .ic * { animation-play-state: running; }
/* globo: meridianos girando (elipse que estreita e alarga parece a esfera virando) */
.ic-globo .lat { opacity: .5; }
.ic-globo .mer { transform-box: fill-box; transform-origin: center; animation: gira 7s linear infinite; }
.ic-globo .m2 { animation-delay: -2.33s; } .ic-globo .m3 { animation-delay: -4.66s; }
@keyframes gira { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
/* Brasil: contorno se desenha ao entrar, enche de leve; pino pulsando em São Sebastião */
.ic-brasil { width: 46px; height: 46px; stroke-width: 3.2; }
.ic-brasil .br { fill: rgba(55,199,208,0); stroke-dasharray: 100; stroke-dashoffset: 0; }
.carimbou .ic-brasil .br { animation: desenha 1.8s .3s ease-out both, enche .8s 2s ease-out forwards; }
@keyframes desenha { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes enche { to { fill: rgba(55,199,208,.22); } }
.ic-brasil .pino { fill: var(--gelo); stroke: none; }
.ic-brasil .pino-onda { fill: none; stroke: var(--gelo); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onda 2.2s ease-out infinite; }
@keyframes onda { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
/* bolo: velinhas tremulando */
.ic-bolo .chama { fill: #FFD27A; stroke: none; transform-box: fill-box; transform-origin: 50% 100%; animation: chama 1.1s ease-in-out infinite alternate; }
.ic-bolo .c2 { animation-delay: -.4s; } .ic-bolo .c3 { animation-delay: -.75s; }
@keyframes chama { 0% { transform: scale(1, 1) rotate(-4deg); opacity: .85; } 100% { transform: scale(.82, 1.18) rotate(5deg); opacity: 1; } }
.carimbado .carimbo { animation: none; }
.carimbado .ic-brasil .br { animation: none; stroke-dashoffset: 0; fill: rgba(55,199,208,.22); }
/* crachá: balança no cordão */
.ic-cracha .balanca { transform-box: view-box; transform-origin: 12px 1px; animation: balanca 3.2s ease-in-out infinite alternate; }
@keyframes balanca { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

/* A Letícia */
.leticia { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.leticia-foto { margin: 0; position: relative; }
.leticia-foto img, .leticia-foto video { display: block; border-radius: var(--raio); box-shadow: var(--sombra); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; background: var(--gelo); }
.leticia-etiqueta { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--petroleo); font-size: .82rem; font-weight: 600; box-shadow: 0 8px 20px -10px rgba(0,65,81,.5); }
.leticia-etiqueta span { width: 8px; height: 8px; border-radius: 50%; background: var(--agua); box-shadow: 0 0 0 0 rgba(5,166,180,.6); animation: pulso 2s ease-out infinite; }
@keyframes pulso { to { box-shadow: 0 0 0 9px rgba(5,166,180,0); } }
.leticia-foto::before { content: ''; position: absolute; inset: -18px 18px 18px -18px; border: 2px dashed var(--letreiro); border-radius: calc(var(--raio) + 8px); z-index: -1; }
.citacao { margin: 0 0 1.8rem; }
.citacao p { font: 200 clamp(1.9rem, 3.6vw, 2.9rem)/1.12 var(--display); margin: 0; letter-spacing: -.01em; }
.citacao footer { margin-top: .9rem; font-size: .92rem; color: var(--agua-texto); font-weight: 600; }
#apresentacao p { margin: 0 0 1rem; max-width: 36rem; }

/* Serviços */
.servicos { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); }
.servicos-cabeca { position: sticky; top: 2rem; align-self: start; }
.servicos-quadro { position: relative; margin: 2rem 0 0; }
.servicos-foto { display: block; border-radius: var(--raio); aspect-ratio: 6 / 5; object-fit: cover; object-position: 55% 40%; width: 100%; height: auto; box-shadow: var(--sombra); }
.servicos-quadro .leticia-etiqueta .i { width: 1rem; height: 1rem; color: var(--agua-texto); }
.servicos-lista { list-style: none; margin: 0; padding: 0; }
.servicos-lista li { display: grid; grid-template-columns: 2.6rem 100px 1fr; gap: 1.2rem; align-items: start; padding: 1.6rem 0; border-top: 1px solid rgba(0,65,81,.16); }
/* Carimbo com ilustração animada (desenhos em ilustras.js) */
.selo-ic { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #E6F7F9; rotate: -6deg;
  border: 2px dashed rgba(0,127,139,.55); box-shadow: inset 0 0 0 5px var(--papel), inset 0 0 0 6.5px rgba(0,127,139,.25); }
.servicos-lista li:nth-child(even) .selo-ic { rotate: 5deg; }
.carimbou .selo-ic { animation: carimba .55s cubic-bezier(.3,1.6,.5,1) both; }
.carimbado .selo-ic { animation: none; }
.il { width: 74px; height: 74px; overflow: visible; }
.il * { animation-play-state: paused; }
.viva .il * { animation-play-state: running; }
.il-pacotes .continentes { animation: il-gira 9s linear infinite; }
@keyframes il-gira { to { transform: translateX(-26px); } }
.il-pacotes .orbita { transform-origin: 24px 24px; animation: il-orbita 6s linear infinite; }
@keyframes il-orbita { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.il-cruzeiro .navio { transform-origin: 24px 30px; animation: il-balanco 3.2s ease-in-out infinite alternate; }
@keyframes il-balanco { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(1.2px); } }
.il-cruzeiro .o1 { animation: il-onda 2.4s linear infinite; } .il-cruzeiro .o2 { animation: il-onda 3.4s linear infinite reverse; }
@keyframes il-onda { to { transform: translateX(16px); } }
.il-cruzeiro .fumaca circle { transform-box: fill-box; transform-origin: center; animation: il-fumaca 2.6s ease-out infinite; }
.il-cruzeiro .f2 { animation-delay: -.9s; } .il-cruzeiro .f3 { animation-delay: -1.8s; }
@keyframes il-fumaca { 0% { transform: translate(-4px, 6px) scale(.4); opacity: 0; } 30% { opacity: .95; } 100% { transform: translate(3px, -3px) scale(1.15); opacity: 0; } }
.il-grupos .p { animation: il-pulo 2.4s ease-in-out infinite; }
.il-grupos .p2 { animation-delay: .25s; } .il-grupos .p3 { animation-delay: .5s; }
@keyframes il-pulo { 0%, 40%, 100% { transform: translateY(0); } 15% { transform: translateY(-4.5px); } 25% { transform: translateY(0); } }
.il-visto .carimbo-ok { transform-box: fill-box; transform-origin: center; animation: il-carimbo 4.5s ease-in-out infinite; }
@keyframes il-carimbo { 0%, 12% { transform: scale(1.8) rotate(-25deg); opacity: 0; } 20% { transform: scale(.9) rotate(-10deg); opacity: 1; } 24%, 86% { transform: scale(1) rotate(-12deg); opacity: 1; } 96%, 100% { opacity: 0; transform: scale(1) rotate(-12deg); } }
.il-visto .ok { stroke-dasharray: 10; animation: il-ok 4.5s ease-out infinite; }
@keyframes il-ok { 0%, 24% { stroke-dashoffset: 10; } 40%, 100% { stroke-dashoffset: 0; } }
.il-castelo .fogo { transform-box: fill-box; transform-origin: center; animation: il-fogo 2.2s ease-out infinite; }
.il-castelo .fogo2 { animation-delay: -1.1s; }
@keyframes il-fogo { 0% { transform: scale(.1); opacity: 0; } 20% { opacity: 1; } 60% { transform: scale(1.15); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.il-castelo .bandeira { transform-box: fill-box; transform-origin: 0 0; animation: il-bandeira 1.4s ease-in-out infinite alternate; }
@keyframes il-bandeira { from { transform: skewY(-8deg) scaleX(.9); } to { transform: skewY(6deg) scaleX(1.05); } }
.il-hotel .j { fill: #E6F7F9; animation: il-luz 4.8s steps(1) infinite; }
.il-hotel .j2 { animation-delay: .6s; } .il-hotel .j3 { animation-delay: 1.2s; } .il-hotel .j4 { animation-delay: 1.8s; } .il-hotel .j5 { animation-delay: 2.4s; } .il-hotel .j6 { animation-delay: 3s; } .il-hotel .j7 { animation-delay: 3.6s; } .il-hotel .j8 { animation-delay: 4.2s; }
@keyframes il-luz { 0% { fill: #FFD27A; } 45% { fill: #E6F7F9; } }
.il-hotel .estrelas path { transform-box: fill-box; transform-origin: center; animation: il-brilho 1.8s ease-in-out infinite alternate; }
.il-hotel .e2 { animation-delay: .3s; } .il-hotel .e3 { animation-delay: .6s; }
@keyframes il-brilho { from { transform: scale(.82); opacity: .7; } to { transform: scale(1.12); opacity: 1; } }
.il-hotel .palmeira { transform-origin: 41px 41px; animation: il-vento 3s ease-in-out infinite alternate; }
@keyframes il-vento { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.servicos-lista li:last-child { border-bottom: 1px solid rgba(0,65,81,.16); }
.servico-num { font: 200 1.5rem/1 var(--display); color: var(--agua-texto); padding-top: .2rem; }
.servicos-lista h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.servicos-lista p { margin: 0; }
.fonte { color: var(--agua-texto); text-decoration: none; font-weight: 600; }

/* Diário de bordo (elemento-assinatura: destinos correndo pela rota do avião) */
.diario { background: linear-gradient(180deg, var(--papel), #E3F5F7 30%, #E3F5F7 80%, var(--papel)); padding: clamp(4rem, 8vw, 7rem) 0; overflow: hidden; }
.diario-cabeca { position: relative; max-width: var(--larg); margin: 0 auto; padding: clamp(9rem, 17vw, 15rem) 1.4rem 2rem; }
.carimbos { position: absolute; left: 50%; top: -3rem; width: max(1200px, 100vw); transform: translateX(-50%); height: auto; pointer-events: none; }
.carimbos path { fill: none; stroke: var(--letreiro); stroke-width: 1.5; stroke-dasharray: 7 8; }
.carimbos text { font: 600 17px var(--corpo); fill: var(--agua-texto); letter-spacing: .06em; text-transform: uppercase; }
.diario-cabeca h2 { position: relative; }
.diario-intro { max-width: 36rem; margin: 1.2rem 0 2rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .55rem; }
.filtros button { font: 600 .92rem var(--corpo); color: var(--petroleo); background: var(--branco); border: 1.5px solid rgba(0,65,81,.2); border-radius: 999px; padding: .55rem 1rem; cursor: pointer; transition: background .2s, border-color .2s; }
.filtros button small { font-weight: 400; opacity: .7; margin-left: .2rem; }
.filtros button[aria-pressed="true"] { background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }
.postais { max-width: var(--larg); margin: 0 auto; padding: 1rem 1.4rem; columns: 3 330px; column-gap: 1.6rem; }
.postal { break-inside: avoid; margin: 0 0 1.8rem; background: var(--branco); border-radius: 18px; padding: 12px 12px 18px; box-shadow: 0 18px 40px -26px rgba(0,65,81,.55); transform: rotate(var(--giro)); transition: transform .35s; }
.postal:hover { transform: rotate(0) translateY(-4px); }
.postal[hidden] { display: none; }
.postal-foto { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; }
.postal-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.selo { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: .35rem; padding: .4rem .65rem; background: rgba(255,255,255,.92); border: 1.5px dashed var(--agua-texto); border-radius: 8px; transform: rotate(4deg); font-size: .74rem; color: var(--petroleo); letter-spacing: .06em; text-transform: uppercase; }
.selo .i { width: .95rem; height: .95rem; color: var(--agua-texto); }
.postal-corpo { padding: 1rem .5rem 0; }
.postal h3 { font-size: 1.5rem; }
.postal-frase { font-size: 1rem; margin: .5rem 0 0; }
.dica { margin-top: .9rem; background: var(--papel); border-left: 3px solid var(--agua); border-radius: 0 10px 10px 0; padding: .7rem .85rem; }
.dica span { display: flex; align-items: center; gap: .35rem; font: 800 .78rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--agua-texto); }
.dica p { margin: .3rem 0 0; font-size: .93rem; line-height: 1.5; }
.dica a { display: inline-block; margin-top: .35rem; font-size: .85rem; font-weight: 600; color: var(--agua-texto); text-decoration: none; }
.postal-acoes { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.postal-quero { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: 999px; background: var(--petroleo); color: var(--branco); font-weight: 600; font-size: .9rem; text-decoration: none; }
.postal-quero:hover { background: var(--petroleo-2); }
.servico-quero { display: inline-block; margin-top: .5rem; font-weight: 600; font-size: .92rem; color: var(--agua-texto); text-decoration: none; }
.servico-quero:hover { text-decoration: underline; }
.postal-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; color: var(--agua-texto); text-decoration: none; }
.postal-link:hover, .dica a:hover { text-decoration: underline; }

/* Passos: a rota tracejada liga os marcos */
.passos-lista { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; position: relative; }
.passos-lista::before { content: ''; position: absolute; left: 2rem; right: 2rem; top: 1.9rem; border-top: 2px dashed var(--letreiro); }
.passos-lista li { position: relative; }
.passo-marco { display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border-radius: 50%; background: var(--petroleo); color: var(--gelo); margin-bottom: 1.2rem; box-shadow: 0 0 0 8px var(--papel); }
.passo-marco .i { width: 1.5rem; height: 1.5rem; }
.passos-lista h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.passos-lista p { margin: 0; font-size: .98rem; }

/* Agência */
.agencia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.agencia-foto { margin: 0; }
.agencia-foto img { border-radius: var(--raio); box-shadow: var(--sombra); width: 100%; }
.agencia-endereco { display: flex; gap: .6rem; margin: 1.6rem 0 1rem; font-weight: 600; }
.agencia-endereco .i { margin-top: .25rem; color: var(--agua-texto); }
.horario { margin: 0 0 1.8rem; display: grid; gap: .3rem; max-width: 22rem; }
.horario div { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(0,65,81,.25); padding: .25rem 0; }
.horario dt, .horario dd { margin: 0; }
.agencia-acoes { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Final */
.final { position: relative; overflow: hidden; background: linear-gradient(180deg, #37C7D0, #05A6B4); text-align: center; padding: clamp(4.5rem, 9vw, 7rem) 1.4rem 0; }
.final-texto { position: relative; z-index: 2; max-width: 40rem; margin: 0 auto; }
.final h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.final p { font-size: 1.12rem; margin: 1.1rem 0 2rem; }
.final-skyline { position: relative; left: auto; transform: none; margin: 3rem auto 0; width: min(760px, 94vw); }

/* Rodapé */
.rodape { background: var(--petroleo); color: var(--gelo); font-size: .95rem; }
.rodape-grade { max-width: var(--larg); margin: 0 auto; padding: 2.6rem 1.4rem; display: flex; gap: 2.4rem; align-items: center; }
.rodape-grade img { width: 96px; }
.rodape p { margin: .25rem 0; }
.rodape a { color: var(--gelo); }
.assinatura-studio { max-width: var(--larg); margin: 0 auto; padding: 1rem 1.4rem 1.4rem; border-top: 1px solid rgba(200,245,247,.18); font: 400 .75rem/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .04em; }
.assinatura-studio a { color: rgba(200,245,247,.7); text-decoration: none; }
.assinatura-studio a:hover { color: var(--agua-clara); }

.whats-flutuante { display: none; }

/* Revelação ao rolar (enfeite) */
.revelar { opacity: 0; translate: 0 26px; transition: opacity .8s ease, translate .8s cubic-bezier(.2,.8,.2,1); }
.revelar.visto { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .revelar { transition: none; opacity: 1; transform: none; translate: none; }
  .postal { transform: none; transition: none; }
  .carimbou .carimbo, .ic *, .carimbou .ic-brasil .br { animation: none !important; }
  .ic-brasil .br { fill: rgba(55,199,208,.22); }
  .ic-brasil .pino-onda { display: none; }
  .leticia-etiqueta span { animation: none; }
  .il *, .carimbou .selo-ic { animation: none !important; }
}

/* Tablet e celular */
@media (max-width: 960px) {
  .topo-nav { display: none; }
  .numeros ul { grid-template-columns: repeat(2, 1fr); }
  .leticia, .servicos, .agencia { grid-template-columns: 1fr; }
  .servicos-cabeca { position: static; }
  .passos-lista { grid-template-columns: 1fr 1fr; }
  .passos-lista::before { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topo { padding: .9rem 1.1rem; }
  .topo-logo img { width: 92px; }
  .topo-cta span { display: none; }
  .secao { padding-left: 1.1rem; padding-right: 1.1rem; }
  .numeros ul { gap: 2rem 1rem; padding-top: 2.4rem; padding-bottom: 2.4rem; }
  .numeros li { flex-direction: column; align-items: center; text-align: center; gap: .7rem; }
  .carimbo { width: 70px; height: 70px; }
  .servicos-lista li { grid-template-columns: 72px 1fr; gap: .9rem; }
  .selo-ic { width: 72px; height: 72px; }
  .il { width: 50px; height: 50px; }
  .servico-num { display: none; }
  .passos-lista { grid-template-columns: 1fr; }
  /* Diário: trilho horizontal com encaixe */
  .postais { columns: auto; display: flex; align-items: flex-start; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem 1.1rem 1.6rem; scrollbar-width: none; }
  .postal { flex: 0 0 82%; scroll-snap-align: center; margin: 0; transform: none; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1.1rem; padding: 0 1.1rem .3rem; scrollbar-width: none; }
  .filtros button { flex: none; }
  .diario-cabeca { padding-left: 1.1rem; padding-right: 1.1rem; }
  .rodape-grade { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .whats-flutuante { display: grid; place-items: center; position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 58px; height: 58px; border-radius: 50%; background: var(--petroleo); color: var(--branco); box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }
  .whats-flutuante .i { width: 1.6rem; height: 1.6rem; }
  .rodape { padding-bottom: 80px; }
}