/* Página principal: branco e laranja. A ordem de seções e os componentes vêm da referência medida em 06/10/2026
   (página inicial da HubSpot); por cima dela entram o que é da casa: a foto real de uma recepção de hotel cobrindo a
   primeira tela (26/10/2026: no lugar do degradê laranja; véu reto de cima a baixo para o texto branco passar, a foto
   assenta ao carregar e anda mais devagar que a página), o título que risca "caderno" e "planilha", o sistema de
   verdade nascendo de dentro da cena (inclina ao rolar e troca de tela sozinho), fotos com paralaxe, números que
   contam, cartões com foco no cursor e abas que andam sozinhas. O fecho repete o molde da capa: foto real de um
   quarto de hotel com véu reto e tudo centrado (26/10/2026; a luz WebGL que havia ali saiu).
   Títulos em Wix Madefor Display forte; texto em Wix Madefor Text. Movimento só em transform, opacity e clip-path,
   e tudo para com "menos movimento". Aparelhos: geometria da Mobile Simulator (2122×1297 e 439×903). */
.pagina-inicio { overflow-x: visible; --raio: 16px; --borda: 32px; --largura: min(1080px, calc(100% - var(--borda) * 2)); }
.pagina-inicio main, .pagina-inicio section, .pagina-inicio li { min-width: 0; }
.pagina-inicio ul, .pagina-inicio ol { list-style: none; }
.pagina-inicio h2 { font-weight: 700 !important; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.028em; }
.pagina-inicio .btn { justify-content: center; min-height: 48px; padding: 0 24px; overflow: visible; font-size: 16px; }
.pagina-inicio .btn::after { content: none; }
.pagina-inicio .btn:active { transform: scale(.98); }
.pagina-inicio .btn-lg { min-height: 54px; padding: 0 30px; font-size: 17px; }
.pagina-inicio .btn-gold { background-image: linear-gradient(110deg, transparent 30%, #ffffff38 48%, transparent 66%); background-size: 240% 100%; background-position: 100% 0; transition: background-position .7s ease, background-color .2s ease, transform .15s ease; }
.h-btn-fio { background: #fff; color: var(--buriti-escuro); border: 2px solid var(--buriti); }
.h-btn-branco { background: #fff; color: var(--buriti-escuro); border: 2px solid #fff; }
.h-btn-fio-branco { background: transparent; color: #fff; border: 2px solid #fff; }
.h-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.h-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--buriti-escuro); text-decoration: underline; text-decoration-color: var(--laranja-fio); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.h-selo { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; margin-bottom: 18px; border: 1px solid var(--laranja-fio); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; color: var(--buriti-escuro); }

/* ── Topo: a cena do nicho (foto real) cobre a tela inteira; o sistema nasce de dentro dela (--sobra é quanto do
   aparelho fica sobre a foto). O véu é um degradê RETO de cima a baixo, nunca forma sobre a cena. ── */
.h-topo { position: relative; isolation: isolate; padding: 0; text-align: center; background: #fff; --sobra: clamp(120px, 24vw, 340px); }
.h-cena { position: relative; isolation: isolate; display: grid; align-content: center; min-height: 100svh; padding: 132px 0 calc(var(--sobra) + 28px); overflow: clip; background: #24110A; color: #fff; }
.h-cena-foto { position: absolute; left: 0; right: 0; top: -24svh; z-index: -2; width: 100%; height: calc(100% + 24svh); object-fit: cover; object-position: 50% 62%; transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }
/* véu medido no pixel (26/10/2026, /tmp/hg-hero/veu.mjs): a faixa do texto (0–50%) precisa de .70–.74 para o branco dar ≥ 4,5:1
   sobre as lâmpadas da cena em 1440/1024/768/390 (pior caso 5,5:1); a faixa do balcão (75%) fica mais aberta para a foto respirar. */
.h-veu { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(30, 13, 6, .74) 0%, rgba(30, 13, 6, .70) 30%, rgba(30, 13, 6, .62) 50%, rgba(30, 13, 6, .46) 75%, rgba(30, 13, 6, .62) 100%); }
/* texto sobre a foto: seletores com .h-topo na frente para vencer as regras de cor da versão clara logo abaixo */
.h-topo .h-cena .h-topo-texto { position: relative; z-index: 1; }
.h-topo .h-cena h1 { color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, .28); }
/* a ênfase sobre a foto é branca (laranja-claro sobre a lâmpada da cena dava 1,6:1 no pixel); o laranja fica no sublinhado */
.h-topo .h-cena h1 em { color: #fff; text-decoration: underline; text-decoration-color: var(--buriti-claro); text-decoration-thickness: .07em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.h-topo .h-cena .h-risco::after { background: var(--buriti-claro); }
.h-topo .h-cena .h-olho { color: #FFD3B8; }
.h-topo .h-cena .h-sub { color: rgba(255, 255, 255, .94); }
.h-topo .h-cena .h-nota { color: rgba(255, 255, 255, .84); }
.h-topo .h-cena .h-btn-fio { border-color: #fff; }
.h-topo-texto { width: var(--largura); margin: auto; }
.h-olho { font-size: 16px; font-weight: 700; color: var(--buriti-escuro); }
.h-topo h1 { max-width: 16em; margin: 14px auto 0; font-weight: 800 !important; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -0.035em; color: var(--tinta); }
.h-topo h1 em { color: var(--buriti); }
.h-risco { position: relative; white-space: nowrap; }
.h-risco::after { content: ''; position: absolute; left: -3%; right: -3%; top: 55%; height: .085em; border-radius: 99px; background: var(--buriti); transform-origin: 0 50%; }
.h-sub { max-width: 36em; margin: 20px auto 0; font-size: 18px; line-height: 1.55; color: var(--tinta); text-wrap: pretty; }
.h-topo .h-acoes { justify-content: center; margin-top: 28px; }
.h-nota { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--apoio); }

/* O sistema em uso, logo abaixo da promessa: inclina enquanto sobe e as telas reais trocam sozinhas. */
.h-palco { position: relative; z-index: 1; width: min(1040px, calc(100% - var(--borda) * 2)); margin: calc(var(--sobra) * -1) auto 0; perspective: 1800px; }
.i-aparelhos { position: relative; padding-right: 6%; transform-origin: 50% 100%; transform: rotateX(calc(var(--inclina, 0) * 1deg)); will-change: transform; }
.ap-note { position: relative; display: block; width: 100%; aspect-ratio: 2122 / 1297; filter: drop-shadow(0 30px 44px rgba(22, 9, 3, .45)); }
.ap-moldura { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ap-note-tela { position: absolute; z-index: 2; left: 9.2837%; top: 5.0116%; width: 81.4326%; height: 83.6546%; overflow: clip; border-radius: 4px; background: #FAF8F3; }
.i-cena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .65s ease; }
.i-cena.ativa { opacity: 1; }
.ap-cel { position: absolute; right: 0; bottom: 2%; z-index: 3; display: block; width: 19%; aspect-ratio: 439 / 903; }
.ap-cel-tela { position: absolute; z-index: 2; left: 4.328%; top: 1.6611%; width: 91.5718%; height: 96.7885%; overflow: clip; border-radius: 18.9% / 8.7%; background: #F7F3EA; display: grid; grid-template-rows: 6.1785% 93.8215%; }
.ap-cel-tela::before { content: ''; justify-self: center; align-self: center; width: 28.7%; height: 62%; margin-top: 4%; border-radius: 99px; background: #0C0B0A; }
.i-cena-cel { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.i-toques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.i-toques button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 2px 12px; border: 0; background: transparent; color: var(--apoio); font: inherit; font-size: 16px; text-align: left; cursor: pointer; transition: color .25s ease; }
.i-toques b { min-width: 16px; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; color: var(--apoio); transition: color .25s ease; } /* #666 dava 3,9:1 sobre a sombra do notebook (fundo medido rgb(223,221,220)); a tinta de apoio dá 5,3:1 */
.i-toques i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 99px; background: linear-gradient(var(--buriti), var(--buriti)) no-repeat 0 0 / 0% 100%, var(--laranja-fio); }
.i-toques .ativo button { color: var(--tinta); font-weight: 700; }
.i-toques .ativo b { color: #8F2D08; } /* o portão leu 4,33:1 em 768 com #A8370A sobre a sombra do notebook; este dá ≥ 6:1 */
.i-toques .ativo i { background-size: 100% 100%, auto; }
.h-legenda { max-width: 46em; margin: 14px auto 0; padding-bottom: 60px; font-size: 13.5px; line-height: 1.5; color: var(--apoio); }

/* ── Três quadros com legenda ── */
.h-trio ul { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
.h-trio li { position: relative; height: clamp(360px, 32.6vw, 470px); background: var(--fundo-900); clip-path: inset(0); }
.h-trio img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; transform: translateY(calc(var(--par, 0) * 1px)); will-change: transform; }
/* véu do trio com um degrau no meio: a frase fica na faixa 63–86% do degradê e, só com .9 no fim, caía a 4,4:1 em 768 conforme a posição do parallax (26/10/2026) */
.h-trio li::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(122, 38, 5, .6) 45%, rgba(122, 38, 5, .94)); }
.h-trio p { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 28px; max-width: 13em; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.14; letter-spacing: -0.02em; color: #fff; }

/* ── O que é, e a conta aberta ── */
.h-oque { width: var(--largura); margin: auto; padding: 72px 0 64px; }
.h-oque-linha { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.h-oque-linha p { font-size: 17px; line-height: 1.6; color: var(--tinta); }
.h-conta { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 2fr); gap: 32px; align-items: center; margin-top: 56px; padding-top: 28px; background: linear-gradient(var(--laranja-fio), var(--laranja-fio)) top / 100% 1px no-repeat; }
.h-conta-rotulo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--tinta); }
.h-conta ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.h-conta li { display: grid; gap: 4px; align-content: start; }
.h-conta b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; color: var(--buriti-escuro); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.h-conta span { font-size: 14.5px; line-height: 1.4; color: var(--apoio); }

/* ── Módulos: o texto acompanha a rolagem; os cartões acendem onde o cursor passa ── */
.h-modulos { background: var(--laranja-tinta); padding-inline: var(--borda); }
.h-modulos-dentro { width: min(1080px, 100%); margin: auto; padding: 88px 0; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 56px; align-items: start; }
.h-modulos-texto { position: sticky; top: 120px; }
.h-modulos-texto > p:not(.h-selo) { margin: 18px 0 26px; font-size: 16px; line-height: 1.6; color: var(--tinta); }
.h-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.h-cartoes > li { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 28px 28px 20px; border: 1px solid var(--laranja-fio); border-radius: var(--raio); background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -200px), #FFEADB, #fff 70%); transition: border-color .25s ease, transform .25s ease; }
.h-cartoes h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; line-height: 1.25; }
.h-cartoes h3 svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--buriti); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.h-cartoes ul { display: grid; gap: 10px; align-content: start; }
.h-cartoes ul li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: var(--tinta); }
.h-cartoes ul li::before { content: ''; position: absolute; left: 3px; top: .32em; width: 11px; height: 6px; border-left: 2px solid var(--buriti); border-bottom: 2px solid var(--buriti); transform: rotate(-45deg); }
.h-cartoes a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-top: 6px; border-top: 1px solid var(--laranja-fio); font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.h-cartoes a span { transition: transform .2s ease; }

/* ── Funciona com o que você já usa ── */
.h-liga { width: var(--largura); margin: auto; padding: 72px 0 0; }
.h-liga-cartao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px 44px; border: 1px solid var(--laranja-fio); border-radius: var(--raio); background: #fff; }
.h-liga-cartao h2 { font-family: var(--font-body); font-weight: 700 !important; font-size: 22px; line-height: 1.3; letter-spacing: -0.012em; }
.h-liga-cartao p { margin: 10px 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--tinta); }
.h-liga-cartao ul { display: flex; flex-wrap: wrap; gap: 10px; }
.h-liga-cartao li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--laranja-fio); border-radius: 8px; background: var(--laranja-tinta); font-size: 15px; font-weight: 600; color: var(--tinta); }

/* ── Tipos de hospedagem: as abas andam sozinhas até alguém tocar ── */
.h-tipos { width: var(--largura); margin: auto; padding: 96px 0 0; }
.h-tipos-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.h-tipos-cab > p { font-size: 16px; line-height: 1.6; color: var(--tinta); }
.h-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 40px; }
.h-abas button { position: relative; min-height: 44px; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--apoio); cursor: pointer; transition: color .2s ease; }
.h-abas button i { position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 99px; background: linear-gradient(var(--buriti), var(--buriti)) no-repeat 0 0 / 0% 100%; }
.h-abas button[aria-selected="true"] { color: var(--tinta); font-weight: 700; }
.h-abas button[aria-selected="true"] i { background-size: 100% 100%; }
.h-paineis { margin-top: 20px; }
.h-painel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--laranja-fio); border-radius: var(--raio); background: #fff; clip-path: inset(0 round var(--raio)); }
.h-paineis.com-abas .h-painel:not(.ativo) { display: none; }
.h-paineis:not(.com-abas) .h-painel + .h-painel { margin-top: 16px; }
.h-painel > img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.h-painel-texto { display: grid; align-content: center; gap: 12px; padding: 40px 44px; }
.h-painel-texto h3 { font-family: var(--font-display); font-weight: 700 !important; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; }
.h-painel-texto > p { font-size: 16px; line-height: 1.6; color: var(--tinta); }
.h-painel-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--laranja-fio); }
.h-painel-numeros div { display: grid; gap: 2px; }
.h-painel-numeros dt { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 30px; line-height: 1.1; color: var(--buriti-escuro); font-variant-numeric: lining-nums; }
.h-painel-numeros dd { font-size: 14px; line-height: 1.4; color: var(--apoio); }

/* ── Planos, guias e perguntas ── */
.h-planos, .h-guias, .h-faq { width: var(--largura); margin: auto; padding: 96px 0 0; }
.h-cab { max-width: 40em; margin-bottom: 36px; }
.h-cab > p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--tinta); }
.h-precos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.h-precos li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 32px 20px 22px; border: 1px solid var(--laranja-fio); border-radius: var(--raio); background: #fff; text-align: center; transition: transform .25s ease, border-color .25s ease; }
.h-precos h3 { font-size: 18px; }
.h-preco { display: grid; justify-items: center; gap: 2px; margin: 12px 0 8px; }
.h-preco b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; font-size: clamp(38px, 4vw, 56px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.h-preco span { font-size: 14.5px; color: var(--apoio); }
.h-precos li > p:not(.h-preco) { font-size: 16px; font-weight: 600; }
.h-precos a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--buriti-escuro); text-decoration: underline; text-underline-offset: 4px; }
.h-precos .h-destaque { background: var(--buriti); border-color: var(--buriti); color: #fff; }
.h-precos .h-destaque .h-preco span { color: #fff; }
.h-precos .h-destaque a { color: #fff; }
.h-selos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--tinta); }
.h-selos li { display: flex; align-items: center; gap: 10px; }
.h-selos li::before { content: ''; flex: none; width: 11px; height: 6px; margin-top: -4px; border-left: 2px solid var(--buriti); border-bottom: 2px solid var(--buriti); transform: rotate(-45deg); }
.h-atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.h-atalhos a { display: grid; gap: 6px; align-content: start; min-height: 104px; padding: 20px 0; border-top: 1px solid var(--laranja-fio); }
.h-atalhos b { font-size: 18px; font-weight: 700; line-height: 1.3; transition: color .2s ease; }
.h-atalhos span { font-size: 15px; color: var(--apoio); }
.h-fecho { display: flex; align-items: center; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.h-faq .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; max-width: none; }
.h-faq details { background: #fff; border-color: var(--laranja-fio); border-radius: 12px; }
.h-faq summary { font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.45; }
.h-faq details p { font-size: 16px; }
.h-faq details:last-child { grid-column: 1 / -1; }

/* ── Fecho: a foto do quarto cobre a faixa toda (a copy promete "cadastre os seus quartos"), fecha o par com a recepção
   do topo, e tudo fica centrado. A foto é 24% mais alta que a faixa e desliza devagar ao rolar (só transform; parada com
   "menos movimento" ou sem animation-timeline). O véu é um degradê RETO, medido no pixel (docs/medir-veu-do-fecho.mjs). ── */
.h-fim { position: relative; isolation: isolate; margin-top: 96px; overflow: clip; background: #24110A; color: #fff; padding-inline: var(--borda); text-align: center; }
.h-fim-foto { position: absolute; left: 0; right: 0; top: -12%; z-index: -2; width: 100%; height: 124%; object-fit: cover; object-position: 50% 55%; }
/* véu medido no pixel (26/10/2026, docs/medir-veu-do-fecho.mjs, 10 versões × 4 larguras × 2 posições do parallax): este é o mais
   claro que dá ≥ 5,5:1 no 5º percentil para o branco em 1440/1024/768/390 (pior caso 5,56 na nota, sobre a cama branca);
   .64 no topo já caía a 4,93 e .60 a 4,37. */
.h-fim-veu { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(30, 13, 6, .68) 0%, rgba(30, 13, 6, .60) 40%, rgba(30, 13, 6, .58) 70%, rgba(30, 13, 6, .68) 100%); }
.h-fim-dentro { position: relative; z-index: 1; width: min(1080px, 100%); margin: auto; padding: 92px 0 84px; }
.h-fim h2 { max-width: 16em; margin-inline: auto; font-weight: 800 !important; font-size: clamp(30px, 3.5vw, 50px); line-height: 1.08; letter-spacing: -0.035em; color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, .28); }
.h-fim .h-acoes { justify-content: center; margin-top: 30px; }
.h-fim .h-nota { max-width: 44em; margin-inline: auto; color: #fff; }
@keyframes h-fim-desliza { from { transform: translate3d(0, -6%, 0); } to { transform: translate3d(0, 6%, 0); } }

.pagina-inicio .footer { padding-block: 40px; }
.pagina-inicio .footer-guias { display: none; }
.pagina-inicio .footer nav { gap: 8px 22px; }
.pagina-inicio .footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
.pagina-inicio .footer-by { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; }
@media (hover: hover) and (pointer: fine) {
  .pagina-inicio .btn-gold:hover { background-position: 0 0; }
  .h-btn-fio:hover, .h-btn-branco:hover { background: var(--laranja-tinta); } .h-btn-fio-branco:hover { background: #ffffff24; }
  .h-link:hover, .h-cartoes a:hover, .h-atalhos a:hover b { color: var(--buriti); } .h-cartoes a:hover span { transform: translateX(4px); }
  .h-abas button:hover, .i-toques button:hover { color: var(--tinta); }
  .h-cartoes > li:hover { border-color: var(--buriti-claro); transform: translateY(-3px); }
  .h-precos li:hover { transform: translateY(-4px); border-color: var(--buriti-claro); }
}

/* ── Movimento: entrada do topo, riscos do título, passos, abas e a chegada de cada bloco ao rolar ── */
@keyframes h-sobe { from { opacity: 0; transform: translateY(22px); } }
@keyframes h-risca { from { transform: scaleX(0); } }
@keyframes h-enche { from { background-size: 0% 100%, auto; } to { background-size: 100% 100%, auto; } }
@keyframes h-enche-aba { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes h-troca { from { opacity: 0; transform: translateY(14px); } }
@keyframes h-aproxima { from { transform: scale(1.08); } }
@keyframes h-entra { from { opacity: 0; transform: translateY(30px); } }
@keyframes h-abre { from { clip-path: inset(26% 0 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: no-preference) {
  .h-cena-foto { animation: h-assenta 9s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes h-assenta { from { transform: translate3d(0, var(--par, 0px), 0) scale(1.09); } to { transform: translate3d(0, var(--par, 0px), 0) scale(1); } }
  .h-topo-texto > * { animation: h-sobe .75s cubic-bezier(.22, 1, .36, 1) both; }
  .h-topo-texto > :nth-child(2) { animation-delay: .07s; }
  .h-topo-texto > :nth-child(3) { animation-delay: .16s; }
  .h-topo-texto > :nth-child(4) { animation-delay: .24s; }
  .h-topo-texto > :nth-child(5) { animation-delay: .3s; }
  .h-palco { animation: h-sobe .95s .32s cubic-bezier(.22, 1, .36, 1) both; }
  .h-risco::after { animation: h-risca .5s .85s cubic-bezier(.22, 1, .36, 1) both; }
  .h-risco ~ .h-risco::after { animation-delay: 1.2s; }
  .i-toques .ativo i { animation: h-enche 5.5s linear both; }
  .h-abas.auto button[aria-selected="true"] i { animation: h-enche-aba 6s linear both; }
  .h-paineis.com-abas .h-painel.ativo { animation: h-troca .55s cubic-bezier(.22, 1, .36, 1) both; }
  .h-paineis.com-abas .h-painel.ativo > img { animation: h-aproxima 1.3s cubic-bezier(.22, 1, .36, 1) both; }
  @supports (animation-timeline: view()) {
    .h-oque-linha > *, .h-conta li, .h-modulos-texto > *, .h-cartoes > li, .h-liga-cartao, .h-tipos-cab > *, .h-paineis, .h-cab > *, .h-atalhos li, .h-faq details, .h-fim-dentro > * { animation: h-entra both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .h-trio li { animation: h-abre both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .h-fim-foto { animation: h-fim-desliza linear both; animation-timeline: view(); will-change: transform; }
  }
}

/* ── Tablet ── */
@media (max-width: 1023px) {
  .pagina-inicio { --borda: 24px; }
  .h-cena { padding-top: 124px; }
  .i-toques button { font-size: 15px; gap: 8px; } .h-legenda { padding-bottom: 44px; }
  .h-trio li { height: clamp(300px, 44vw, 380px); } .h-trio p { left: 20px; right: 20px; bottom: 20px; }
  .h-oque { padding: 56px 0 48px; } .h-oque-linha { gap: 28px; } .h-conta { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .h-modulos-dentro { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; } .h-modulos-texto { position: static; max-width: 36em; }
  .h-liga { padding-top: 56px; } .h-liga-cartao { padding: 32px; gap: 28px; }
  .h-tipos, .h-planos, .h-guias, .h-faq { padding-top: 72px; } .h-tipos-cab { gap: 28px; } .h-painel-texto { padding: 28px; } .h-painel > img { min-height: 300px; }
  .h-fim { margin-top: 72px; } .h-fim-dentro { padding: 68px 0 60px; }
}

/* ── Celular: a mesma ordem, resumida; lado a lado em 360 px ── */
@media (max-width: 599px) {
  .pagina-inicio { --borda: 16px; --raio: 12px; }
  .pagina-inicio h2 { font-size: 27px; line-height: 1.14; }
  .h-cena { padding-top: 100px; padding-bottom: calc(var(--sobra) + 22px); } .h-cena-foto { object-position: 50% 50%; }
  .h-olho { font-size: 15px; }
  .h-topo h1 { margin-top: 10px; font-size: clamp(31px, 9.2vw, 38px); line-height: 1.1; }
  .h-sub { margin-top: 14px; font-size: 16.5px; }
  .h-topo .h-acoes { margin-top: 20px; flex-wrap: nowrap; gap: 8px; } .h-topo .h-acoes .btn, .h-fim .h-acoes .btn { flex: 1; padding: 0 10px; font-size: 16px; white-space: nowrap; }
  .h-nota { font-size: 13px; }
  .h-palco { perspective: none; }
  .i-aparelhos { width: min(72%, 280px); margin: 0 auto; padding-right: 0; aspect-ratio: 439 / 470; clip-path: inset(0); transform: none; }
  .ap-note { display: none; } .ap-cel { position: relative; right: auto; bottom: auto; width: 100%; }
  .i-toques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin-top: 14px; } .i-toques button { min-height: 50px; font-size: 15px; } .i-toques b { font-size: 21px; }
  .h-legenda { padding-bottom: 36px; font-size: 13px; }
  .h-trio ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; } .h-trio li { height: auto; aspect-ratio: 1; } .h-trio li:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .h-trio p { left: 14px; right: 12px; bottom: 14px; font-size: 18px; line-height: 1.15; } .h-trio li:first-child p { font-size: 22px; }
  .h-trio li::after { inset: 28% 0 0; background: linear-gradient(transparent, rgba(122, 38, 5, .94)); }
  .h-oque { padding: 40px 0 36px; } .h-oque-linha { grid-template-columns: 1fr; gap: 14px; } .h-oque-linha p { font-size: 16px; }
  .h-conta { margin-top: 28px; padding-top: 22px; } .h-conta ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } .h-conta b { font-size: 32px; } .h-conta span { font-size: 13.5px; }
  .h-modulos-dentro { padding: 44px 0; gap: 24px; } .h-modulos-texto > p:not(.h-selo) { margin: 14px 0 20px; }
  .h-modulos .h-acoes { flex-wrap: nowrap; gap: 8px; } .h-modulos .h-acoes .btn { flex: 1; padding: 0 10px; white-space: nowrap; }
  .h-cartoes { gap: 8px; } .h-cartoes > li { gap: 10px; padding: 16px 14px 8px; }
  .h-cartoes h3 { align-items: flex-start; flex-direction: column; gap: 8px; font-size: 16px; } .h-cartoes h3 svg { width: 24px; height: 24px; }
  .h-cartoes ul li { padding-left: 0; font-size: 13.5px; } .h-cartoes ul li::before { content: none; } .h-cartoes ul li + li { display: none; }
  .h-cartoes a { font-size: 13.5px; }
  .h-liga { padding-top: 44px; } .h-liga-cartao { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; } .h-liga-cartao h2 { font-size: 20px; }
  .h-liga-cartao ul { gap: 8px; } .h-liga-cartao li { min-height: 40px; padding: 0 12px; font-size: 14px; }
  .h-tipos, .h-planos, .h-guias, .h-faq { padding-top: 52px; } .h-tipos-cab { grid-template-columns: 1fr; gap: 12px; }
  .h-abas { justify-content: flex-start; margin-top: 22px; gap: 2px 0; } .h-abas button { padding: 0 11px; font-size: 14.5px; } .h-abas button i { left: 8px; right: 8px; }
  .h-painel { grid-template-columns: 1fr; } .h-painel > img { min-height: 0; aspect-ratio: 16 / 9; } .h-painel-texto { padding: 20px 18px 22px; gap: 10px; }
  .h-painel-texto h3 { font-size: 22px; } .h-painel-texto > p { font-size: 15px; } .h-painel-numeros dt { font-size: 25px; } .h-painel-numeros dd { font-size: 13px; }
  .h-cab { margin-bottom: 24px; } .h-cab > p { font-size: 15.5px; }
  .h-precos { gap: 6px; } .h-precos li { padding: 18px 6px 10px; } .h-precos h3 { font-size: 14.5px; } .h-preco b { font-size: clamp(24px, 7.2vw, 31px); } .h-preco span { font-size: 12.5px; }
  .h-precos li > p:not(.h-preco) { font-size: 13px; } .h-precos a { font-size: 13.5px; }
  .h-selos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; font-size: 14px; }
  .h-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .h-atalhos a { min-height: 92px; padding: 14px 0; } .h-atalhos b { font-size: 16px; } .h-atalhos span { font-size: 13.5px; }
  .h-faq .faq { grid-template-columns: 1fr; gap: 8px; } .h-faq summary { font-size: 16px; }
  .h-fim { margin-top: 52px; } .h-fim-dentro { padding: 52px 0 44px; } .h-fim h2 { font-size: 29px; } .h-fim .h-acoes { flex-wrap: nowrap; gap: 8px; margin-top: 22px; }
}
@media (max-width: 359px) { .h-cena { padding-top: 92px; } .h-topo h1 { font-size: 28px; } .h-sub { font-size: 16px; } .h-topo .h-acoes .btn, .h-fim .h-acoes .btn, .h-modulos .h-acoes .btn { font-size: 15px; padding: 0 6px; } .h-preco b { font-size: 22px; } .h-precos h3 { font-size: 13px; } .h-abas button { padding: 0 9px; } .i-toques button { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .i-cena, .i-toques button, .i-toques b, .h-cartoes > li, .h-precos li, .pagina-inicio .btn-gold { transition: none; } .i-aparelhos, .h-trio img, .h-cena-foto, .h-fim-foto { transform: none; } .h-cena-foto, .h-fim-foto { animation: none; } .pagina-inicio * { scroll-behavior: auto; } }