/* Alliance Tecnologia: cores, letras e laço vêm do kit de marca (logo/kit). */

@font-face { font-family: "Outfit"; src: url("../fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

:root {
  --violeta: #5B3CF6;
  --violeta-forte: #4A2BE0;
  --violeta-claro: #8C78FF;
  --tinta: #0E0E1A;
  --tinta-2: #1C1A30;
  --tinta-3: #2B2848;
  --nevoa: #F3F1FE;
  --branco: #FFFFFF;
  --cinza: #6B6B7B;
  --lilas: #C9C4EA;
  --ambar: #FFB21E;
  --ambar-claro: #FFC24D;

  --f-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --f-texto: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --t-display: clamp(44px, 7.4vw, 120px);
  --t-h2: clamp(36px, 5vw, 76px);
  --t-h3: clamp(22px, 2.2vw, 32px);
  --t-corpo: clamp(17px, 1.3vw, 19px);
  --t-peq: 15px;

  --m: clamp(16px, 4.4vw, 64px);
  --col: 24px;
  --r: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-laco: cubic-bezier(0.65, 0, 0.35, 1);
  --foco: var(--violeta);

  color-scheme: light;
  scrollbar-color: var(--violeta) var(--nevoa);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--nevoa);
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.55 var(--f-texto);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--violeta);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 5px; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
p { text-wrap: pretty; }
address { font-style: normal; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--ambar); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--m); top: -80px; z-index: 10; background: var(--tinta); color: var(--branco); padding: 12px 20px; border-radius: 999px; }
.pular:focus { top: 12px; }

/* Botões: sempre pílula, uma cor chapada. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px;
  font: 700 var(--t-corpo)/1 var(--f-texto); text-decoration: none; cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-violeta { background: var(--violeta); color: var(--branco); }
.btn-violeta:hover { background: var(--violeta-forte); }
.btn-ambar { background: var(--ambar); color: var(--tinta); }
.btn-ambar:hover { background: var(--ambar-claro); }
.ic { width: 24px; height: 24px; flex: none; }

/* Capítulos: cada seção é um campo de cor inteiro. */
.cap { position: relative; padding: clamp(72px, 10vw, 160px) var(--m); }
.cap-nevoa { background: var(--nevoa); color: var(--tinta); }
.cap-branco { background: var(--branco); color: var(--tinta); }
.cap-violeta { background: var(--violeta); color: var(--branco); --foco: var(--ambar); }
.cap-tinta { background: var(--tinta); color: var(--nevoa); --foco: var(--ambar); scrollbar-color: var(--violeta-claro) var(--tinta); }

/* Topo */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--m); background: var(--nevoa); }
.marca img { width: clamp(128px, 11vw, 160px); height: auto; }
.topo ul { display: flex; gap: clamp(20px, 3vw, 44px); }
.topo nav a, .btn { white-space: nowrap; }
.topo nav a { font-weight: 500; padding: 8px 0; text-decoration: underline 2px transparent; text-underline-offset: 8px; transition: text-decoration-color 200ms var(--ease), text-underline-offset 200ms var(--ease); }
.topo nav a:hover { text-decoration-color: var(--violeta); text-underline-offset: 5px; }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); row-gap: 32px; align-items: end; padding-top: clamp(40px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero-titulo { grid-column: 1 / span 8; font-size: var(--t-display); letter-spacing: -0.045em; line-height: 0.93; }
.hero-lado { grid-column: 9 / -1; display: grid; gap: 28px; padding-bottom: 6px; }
.hero-lado p { max-width: 34ch; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.link-tel { font-weight: 500; text-decoration-color: var(--violeta); }

/* Painel: o laço liga os sistemas que o visitante marca. */
.painel { border-radius: var(--r) var(--r) 0 0; padding-top: clamp(48px, 6vw, 88px); }
.painel-form { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); }
.painel-cab { grid-column: 1 / span 5; display: grid; gap: 14px; align-content: start; }
.painel-cab h2 { font-size: var(--t-h3); letter-spacing: -0.02em; }
.painel-cab p { color: var(--lilas); max-width: 36ch; }
.chips { grid-column: 6 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: start; gap: 10px; border: 0; padding: 0; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 14px; border-radius: 999px;
  background: var(--tinta-2); color: var(--nevoa); font-weight: 500; cursor: pointer; user-select: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
.chip:hover { background: var(--tinta-3); }
.chip:active { transform: scale(0.96); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip .ic { width: 20px; height: 20px; }
.chip:has(input:checked) { background: var(--ambar); color: var(--tinta); }
.chip:has(input:focus-visible) { outline: 3px solid var(--ambar); outline-offset: 3px; }

.laco { grid-column: 1 / -1; position: relative; margin: clamp(40px, 6vw, 80px) 0; }
.nos { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; padding: 0 clamp(0px, 2vw, 32px); }
.no { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 168px; }
.no-bola { display: grid; place-items: center; width: clamp(72px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--violeta); color: var(--branco); }
.no-bola .ic { width: clamp(26px, 2.6vw, 38px); height: clamp(26px, 2.6vw, 38px); }
.no-texto { display: grid; gap: 4px; text-align: center; }
.no-nome { font: 600 var(--t-corpo)/1.2 var(--f-display); }
.no-evento { font-size: var(--t-peq); color: var(--lilas); text-wrap: balance; }
.no.novo .no-bola { animation: chega 700ms var(--ease) both; }
@keyframes chega { from { transform: scale(0.55); background: var(--ambar); color: var(--tinta); } }
.laco-fio { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.laco-baixo { z-index: 1; }
.laco-cima { z-index: 3; }
.laco-fio path { fill: none; stroke: var(--violeta-claro); stroke-width: 12; stroke-dasharray: 1; stroke-dashoffset: 0; }
.laco-fio .laco-fenda { stroke: var(--tinta); stroke-width: 28; }
.laco-miolo { fill: var(--violeta); }
.laco-miolos use { color: var(--branco); }
.laco.espera .laco-fio path { stroke-dashoffset: 1; }
.laco.desenha .laco-fio path { animation: desenha 1100ms var(--ease-laco) both; }
@keyframes desenha { from { stroke-dashoffset: 1; } }

.painel-pe { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; row-gap: 28px; }
.painel-frase { grid-column: 1 / span 8; font: 500 var(--t-h3)/1.25 var(--f-display); letter-spacing: -0.01em; max-width: 46ch; }
.painel-pe .btn { grid-column: 10 / -1; justify-self: end; }

/* Serviços: folhas de cor que sobem uma sobre a outra. */
.servicos { background: var(--tinta); }
.servicos-cab { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: end; padding: clamp(72px, 9vw, 140px) var(--m) 56px; }
.servicos-cab h2 { grid-column: 1 / span 7; font-size: var(--t-h2); }
.servicos-cab p { grid-column: 9 / -1; color: var(--lilas); max-width: 60ch; }
.folha {
  position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: center;
  padding: clamp(48px, 5vw, 80px) var(--m) calc(clamp(56px, 6vw, 96px) + var(--r));
  margin-bottom: calc(-1 * var(--r));
  border-radius: var(--r) var(--r) 0 0;
}
.folha:last-child { margin-bottom: 0; padding-bottom: clamp(56px, 6vw, 96px); }
.folha-software { background: var(--violeta); color: var(--branco); --foco: var(--ambar); }
.folha-integracao { background: var(--nevoa); color: var(--tinta); }
.folha-infra { background: var(--violeta-claro); color: var(--tinta); }
.folha-dados { background: var(--ambar); color: var(--tinta); }
.folha-nome { font-size: var(--t-h2); letter-spacing: -0.04em; }
.folha-texto { grid-column: 1 / span 7; display: grid; gap: 22px; }
.folha-titulo { font: 500 var(--t-h3)/1.15 var(--f-display); letter-spacing: -0.02em; }
.folha-texto > p:not(.folha-titulo) { max-width: 44ch; }
.folha-itens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-weight: 500; max-width: 560px; }
.folha-itens li { display: flex; gap: 12px; align-items: baseline; }
.folha-itens li::before { content: ""; flex: none; width: 11px; height: 11px; border: 3px solid currentColor; border-radius: 50%; transform: translateY(1px); }

/* Fragmentos de interface: exemplos de tela, com as convenções de tela. */
.ui { grid-column: 8 / -1; background: var(--branco); color: var(--tinta); border-radius: var(--r); padding: 24px; display: grid; gap: 16px; font-size: var(--t-peq); margin-top: 32px; }
.ui-escuro { background: var(--tinta); color: var(--nevoa); }
.ui figcaption { order: 3; font-size: var(--t-peq); color: var(--cinza); }
.ui-escuro figcaption { color: var(--lilas); }
.ui-cab { display: flex; align-items: center; gap: 10px; font: 700 var(--t-corpo) var(--f-display); }
.ui-cab .ic { color: var(--violeta); }
.ui-escuro .ui-cab .ic { color: var(--violeta-claro); }
.ui-cont { margin-left: auto; font: 500 var(--t-peq) var(--f-texto); color: var(--cinza); }
.ui-escuro .ui-cont { color: var(--lilas); }
.ui table { width: 100%; border-collapse: collapse; }
.ui td { padding: 12px 8px; border-top: 1px solid #E6E3F7; } /* taste-skill-ignore: linhas de tabela real */
.ui td:first-child { padding-left: 0; color: var(--cinza); }
.ui td:last-child { text-align: right; padding-right: 0; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--nevoa); font-size: var(--t-peq); font-weight: 500; white-space: nowrap; }
.pill-vio { background: var(--violeta); color: var(--branco); }
.pill-ok { background: #E3F5EA; color: #135C33; }
.pill-amb { background: #FFF1D6; color: #7A4A00; }
.ui-log li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #E6E3F7; } /* taste-skill-ignore: linhas de registro em tela */
.ui-log .num { color: var(--cinza); }
.ui-log .ic-ok { margin-left: auto; color: #1E8A4C; width: 20px; height: 20px; }
.ui-estado li { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--tinta-3); } /* taste-skill-ignore: linhas de painel em tela */
.ui-estado .ic { color: var(--violeta-claro); }
.ui-estado b { font-weight: 500; color: #9BE3B7; }
.ui-barras { display: grid; gap: 14px; }
.ui-barras li { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; }
.ui-barras li::after { content: ""; grid-column: 2; grid-row: 1; height: 14px; width: var(--v); border-radius: 999px; background: var(--violeta); }
.ui-barras b { grid-column: 3; font-weight: 700; }

/* Para quem: um público por linha, em tamanho de cartaz. */
.publicos { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.cartaz { display: grid; grid-template-columns: max-content minmax(0, 34ch); column-gap: clamp(32px, 4vw, 64px); align-items: baseline; }
.cartaz li { display: contents; }
.cartaz-palavra { font: 800 var(--t-display)/0.92 var(--f-display); letter-spacing: -0.05em; transition: color 220ms var(--ease); }
.cartaz-detalhe { font-weight: 500; }
.cartaz li:hover .cartaz-palavra { color: var(--ambar); }

/* Como trabalhamos: sanfona horizontal, do escuro para o claro. */
.etapas-cab { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: end; }
.etapas-cab h2 { grid-column: 1 / span 6; font-size: var(--t-h2); }
.etapas-cab p { grid-column: 8 / -1; max-width: 60ch; }
.sanfona { display: flex; height: clamp(440px, 40vw, 540px); margin-top: 64px; border-radius: var(--r); overflow: hidden; }
.etapa { position: relative; flex: 0 0 clamp(72px, 7vw, 104px); overflow: hidden; transition: flex-grow 500ms var(--ease); }
.etapa[open] { flex-grow: 1; }
.etapa-0 { background: var(--tinta); color: var(--nevoa); --foco: var(--ambar); }
.etapa-1 { background: var(--violeta); color: var(--branco); --foco: var(--ambar); }
.etapa-2 { background: var(--violeta-claro); color: var(--tinta); }
.etapa-3 { background: var(--nevoa); color: var(--tinta); }
.etapa summary { list-style: none; cursor: pointer; height: 100%; padding: 28px 0; display: flex; align-items: flex-start; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 var(--t-h3) var(--f-display); letter-spacing: -0.02em; transition: background-color 200ms; }
.etapa summary::-webkit-details-marker { display: none; }
.etapa:not([open]) summary:hover { background: rgb(255 255 255 / 0.08); }
.etapa[open] summary { position: absolute; inset: 0 0 auto 0; height: auto; writing-mode: horizontal-tb; transform: none; justify-content: flex-start; padding: 36px 40px; font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.04em; cursor: default; }
.etapa-corpo { position: absolute; left: 0; bottom: 0; width: min(100%, 720px); padding: 40px; font: 500 var(--t-h3)/1.25 var(--f-display); letter-spacing: -0.01em; }
.etapa:not([open]) .etapa-corpo { display: none; }
.etapa[open] .etapa-corpo { animation: sobe 600ms var(--ease) 120ms both; }
@keyframes sobe { from { opacity: 0; transform: translateY(16px); } }

/* Sobre: painel escuro com Manaus recortada no laço. */
.sobre { padding: 20px; }
.sobre-painel { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); min-height: clamp(640px, 100svh, 920px); padding: clamp(32px, 4vw, 64px); border-radius: var(--r); background: var(--tinta); color: var(--nevoa); --foco: var(--ambar); }
.sobre-painel h2 { grid-column: 1 / span 6; font-size: var(--t-h2); align-self: start; }
.sobre-foto { position: absolute; left: clamp(8px, 3vw, 48px); bottom: -9%; width: min(46vw, 640px); }
.sobre-foto svg { width: 100%; height: auto; }
.sobre-blocos { grid-column: 8 / span 5; display: grid; gap: 40px; align-content: start; justify-items: start; padding-top: 12px; }
.sobre-blocos h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.sobre-blocos p, .sobre-blocos address { max-width: 40ch; color: var(--lilas); }

/* Perguntas */
.perguntas { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: start; }
.perguntas h2 { grid-column: 1 / span 4; position: sticky; top: 40px; font-size: var(--t-h2); }
.perguntas-lista { grid-column: 5 / -1; display: grid; gap: 8px; }
.pergunta { background: var(--branco); border-radius: var(--r); transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.pergunta summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 14px 28px; font: 500 var(--t-corpo)/1.3 var(--f-texto); cursor: pointer; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta:not([open]):hover { background: #E8E4FD; }
.pergunta p { padding: 0 28px 28px; max-width: 56ch; }
.pergunta[open] { background: var(--violeta); color: var(--branco); --foco: var(--ambar); }
.pergunta[open] p { animation: sobe 500ms var(--ease) both; }
.mais { position: relative; flex: none; width: 18px; height: 18px; }
.mais::before, .mais::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 18px; height: 3px; background: currentColor; transition: transform 260ms var(--ease); }
.mais::after { transform: rotate(90deg); }
.pergunta[open] .mais::after { transform: rotate(0deg); }

/* Contato */
.contato { padding-top: 48px; }
.faixa { margin: 0 calc(-1 * var(--m)) clamp(56px, 7vw, 96px); overflow: hidden; }
.faixa-trilho { display: flex; gap: 8px; width: max-content; animation: desliza 70s linear infinite; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
.faixa img { height: 150px; width: auto; border-radius: 12px; }
@keyframes desliza { to { transform: translateX(calc(-50% - 4px)); } }
.contato h2 { font-size: var(--t-h2); }
.contato-grade { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); row-gap: 48px; margin-top: 48px; }
.form { grid-column: 1 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; }
.celula { display: flex; flex-direction: column; gap: 6px; padding: 16px 22px; border-radius: var(--r); background: var(--tinta-2); transition: background-color 180ms var(--ease); }
.celula:hover { background: #24223C; }
.celula:focus-within { background: var(--tinta-3); outline: 3px solid var(--ambar); outline-offset: 2px; }
.celula label { font-size: var(--t-peq); color: var(--lilas); }
.celula label span { opacity: 0.8; }
.celula input, .celula textarea { width: 100%; border: 0; background: transparent; color: var(--branco); font-size: var(--t-corpo); caret-color: var(--ambar); }
.celula input:focus, .celula textarea:focus { outline: none; }
.celula textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.celula:has([aria-invalid="true"]) { outline: 2px solid var(--ambar); outline-offset: -2px; }
.celula-larga { grid-column: 1 / -1; }
.celula-enviar { grid-column: 1 / -1; min-height: 76px; justify-content: center; align-items: center; border: 0; background: var(--ambar); color: var(--tinta); font: 700 var(--t-h3) var(--f-display); letter-spacing: -0.02em; cursor: pointer; transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.celula-enviar:hover { background: var(--ambar-claro); }
.celula-enviar:active { transform: scale(0.99); }
.campo-erro { color: var(--ambar); font-size: var(--t-peq); }
.aviso { grid-column: 1 / -1; padding: 18px 22px; border-radius: var(--r); font-weight: 500; }
.aviso-ok { background: var(--violeta); color: var(--branco); }
.aviso-erro { background: var(--ambar); color: var(--tinta); }
.form-nota { grid-column: 1 / -1; max-width: 60ch; padding: 6px 4px 0; font-size: var(--t-peq); color: var(--lilas); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: campo isca escondido */
.contato-direto { grid-column: 10 / -1; display: grid; gap: 14px; align-content: start; color: var(--lilas); }
.contato-grande { font: 800 var(--t-h3)/1.1 var(--f-display); color: var(--branco); text-decoration: none; letter-spacing: -0.02em; }
.contato-grande:hover { color: var(--ambar); }
.contato-email { color: var(--branco); overflow-wrap: anywhere; }

/* Rodapé de blocos */
.rodape { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 8px 10px 10px; background: var(--tinta); color: var(--nevoa); --foco: var(--ambar); }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 220px; padding: 26px; border-radius: var(--r); background: var(--tinta-2); }
.tile-frase { grid-column: 1 / span 4; }
.rodape-frase { font: 700 var(--t-h3)/1.15 var(--f-display); letter-spacing: -0.02em; }
.rodape-legal { font-size: var(--t-peq); color: var(--lilas); }
.tile-nav { grid-column: 5 / span 3; justify-content: flex-start; }
.tile-nav ul { display: grid; gap: 6px; }
.tile-nav a { text-decoration: none; }
.tile-nav a:hover { text-decoration: underline; }
.tile-hora { grid-column: 8 / span 2; }
.rodape-hora { color: var(--lilas); }
.tile-email { grid-column: 10 / -1; justify-content: flex-end; }
.tile-email a { overflow-wrap: anywhere; }
.tile-marca { grid-column: 1 / span 8; min-height: 320px; justify-content: center; align-items: center; background: var(--violeta); }
.tile-marca img { width: min(76%, 720px); height: auto; }
.tile-convite { grid-column: 9 / -1; min-height: 320px; background: var(--ambar); color: var(--tinta); text-decoration: none; font: 800 var(--t-h3)/1 var(--f-display); letter-spacing: -0.03em; transition: background-color 200ms var(--ease); }
.tile-convite svg { width: 64px; height: 64px; align-self: flex-end; transition: transform 260ms var(--ease); }
.tile-convite:hover { background: var(--ambar-claro); }
.tile-convite:hover svg { transform: translate(6px, -6px); }
.creditos { grid-column: 1 / -1; max-width: 75ch; padding: 14px 16px 6px; font-size: var(--t-peq); line-height: 1.6; color: #A9A4C9; }

/* Página interna (privacidade, 404) */
.pagina { min-height: 70svh; }
.pagina h1 { font-size: var(--t-display); max-width: 14ch; }
.pagina .texto { max-width: 68ch; margin-top: 48px; display: grid; gap: 18px; }
.pagina .texto h2 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; margin-top: 24px; }
.pagina .texto ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 6px; }
.pagina .btn { margin-top: 40px; }

/* Movimento: entra uma vez, a partir de um estado já visível sem JS. */
html.revela [data-reveal]:not(.visto) { opacity: 0; transform: translateY(26px); }
[data-reveal] { transition: opacity 800ms var(--ease) var(--d, 0ms), transform 800ms var(--ease) var(--d, 0ms); }
html.revela [data-obturador]:not(.visto) { clip-path: inset(100% 0 0 0); }
html.revela [data-obturador]:not(.visto) svg { transform: scale(1.12); }
[data-obturador] { transition: clip-path 1100ms var(--ease-laco); }
[data-obturador] svg { transition: transform 1400ms var(--ease); }

@media (max-width: 1080px) {
  .hero-titulo { grid-column: 1 / -1; }
  .hero-lado { grid-column: 1 / span 8; }
  .painel-cab, .chips { grid-column: 1 / -1; }
  .chips { justify-content: flex-start; margin-top: 28px; }
  .painel-frase { grid-column: 1 / -1; }
  .painel-pe .btn { grid-column: 1 / -1; justify-self: start; }
  .folha-texto { grid-column: 1 / -1; }
  .ui { grid-column: 1 / -1; }
  .servicos-cab h2, .servicos-cab p, .etapas-cab h2, .etapas-cab p { grid-column: 1 / -1; }
  .servicos-cab p, .etapas-cab p { margin-top: 20px; }
  .sobre-painel h2 { grid-column: 1 / -1; }
  .sobre-blocos { grid-column: 6 / -1; padding-top: 40px; }
  .form, .contato-direto { grid-column: 1 / -1; }
  .cartaz { display: block; }
  .cartaz li { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
}

@media (max-width: 900px) {
  .topo nav { display: none; }
}

@media (max-width: 760px) {
  :root { --col: 12px; --r: 20px; }
  .topo .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .hero { padding-top: 32px; }
  .hero-titulo { font-size: 12.4vw; }
  .hero-lado { grid-column: 1 / -1; }
  .nos { flex-direction: column; align-items: flex-start; gap: 20px; padding: 0; }
  .no { flex-direction: row; width: auto; gap: 20px; }
  .no-bola { width: 76px; }
  .no-texto { text-align: left; }
  .painel-pe .btn { width: 100%; }
  .folha-itens { grid-template-columns: 1fr; }
  .ui { padding: 18px; }
  .ui-barras li { grid-template-columns: 92px 1fr auto; }
  .cartaz-palavra { font-size: 15vw; }
  .sanfona { flex-direction: column; height: auto; }
  .etapa { flex: none; }
  .etapa summary, .etapa[open] summary { position: static; writing-mode: horizontal-tb; transform: none; justify-content: flex-start; height: auto; min-height: 64px; padding: 18px 20px; font-size: var(--t-h3); font-weight: 700; }
  .etapa-corpo { position: static; padding: 0 20px 24px; font: inherit; }
  .sobre { padding: 10px; }
  .sobre-painel { display: flex; flex-direction: column; gap: 32px; min-height: 0; padding: 28px 22px 0; }
  .sobre-blocos { padding-top: 0; }
  .sobre-foto { order: 3; position: relative; left: auto; bottom: auto; width: 86vw; align-self: center; margin-bottom: -22vw; }
  .perguntas h2 { position: static; grid-column: 1 / -1; margin-bottom: 28px; }
  .perguntas-lista { grid-column: 1 / -1; gap: 6px; }
  .pergunta summary { min-height: 64px; padding: 14px 20px; }
  .pergunta p { padding: 0 20px 20px; }
  .faixa img { height: 110px; }
  .form { grid-template-columns: 1fr; }
  .rodape { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .tile { min-height: 0; padding: 20px; }
  .tile-marca { grid-column: 1 / -1; order: -2; min-height: 160px; }
  .tile-convite { grid-column: 1 / -1; order: -1; min-height: 160px; }
  .tile-nav, .tile-email { grid-column: span 1; }
  .tile-hora, .tile-frase { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .faixa-trilho { animation: none; }
  html.revela [data-reveal]:not(.visto), html.revela [data-obturador]:not(.visto) { opacity: 1; transform: none; clip-path: none; }
  html.revela [data-obturador]:not(.visto) svg { transform: none; }
}