/* Página na linguagem da capa de plumagem. Três pranchas de foto (promessa, prova, fecho) e, entre elas, papel:
   letra grande, fio fino e conversa transcrita no lugar de tela desenhada. A capa fica presa e a página sobe por cima dela. */
:root {
  color-scheme: light;
  --noite: #050a0b;
  --ink: #0a0f10;
  --ink-2: #465659;
  --ink-3: #5f7175;
  --paper: #fbfcfc;
  --paper-2: #f1f5f5;
  --line: rgba(10, 15, 16, .1);
  --line-2: rgba(10, 15, 16, .2);
  --line-3: rgba(10, 15, 16, .45);
  --erro: #a4322a;
  --teal: #1c99a7;
  --teal-ink: #136f7a;
  --mint: #9be8ea;
  --gold: #f3b64b;
  --gold-ink: #8a5a06;
  --plate: #0f343d;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --m: clamp(20px, 4.4vw, 64px);
  --plumagem: url("img/plumagem.webp");
  --plumagem-2: url("img/plumagem-2.webp");
  --i-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E");
  --i-certo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.7-5.4 5.6a1 1 0 0 1-1.4 0l-2.6-2.6 1.4-1.4 1.9 1.9 4.7-4.9 1.4 1.4Z'/%3E%3C/svg%3E");
  --i-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--noite); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
button { font: inherit; color: inherit; }
::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 6px; }
.escura :focus-visible, .nav:not(.papel) :focus-visible { outline-color: var(--mint); }
.nav .idioma-menu :focus-visible, .nav .menu-painel :focus-visible { outline-color: var(--teal-ink); }
.pular { position: fixed; z-index: 60; left: var(--m); top: 14px; padding: 11px 16px; border-radius: 10px; background: #fff; color: var(--ink); font-size: .9375rem; font-weight: 500; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -14px rgba(10, 15, 16, .5); transform: translateY(-220%); }
.pular:focus-visible { transform: none; outline-color: var(--teal-ink); outline-offset: -5px; }
main:focus { outline: none; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Barra: branca sobre a capa, de papel depois dela */
.nav {
  position: fixed; z-index: 40; inset: 0 0 auto 0; display: flex; align-items: center; gap: 30px; height: 68px; padding: 0 var(--m);
  font-size: .9375rem; color: #fff; transition: background-color .25s, color .25s, box-shadow .25s;
}
.nav .logo { position: relative; display: block; height: 30px; }
.nav .logo::after { content: ""; position: absolute; inset: -8px -6px; }
.nav .logo svg { height: 30px; width: auto; transition: opacity .25s; }
.nav .logo .l-claro { position: absolute; left: -4px; top: -3px; opacity: 0; }
.nav .logo .l-claro svg { height: 35.6px; }
.nav .links { display: flex; gap: 26px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.nav a:not(.pill) { opacity: .82; transition: opacity .15s; }
.nav a:not(.pill):hover { opacity: 1; }
.nav .dir { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav .entrar { margin: -9px -4px; padding: 9px 4px; white-space: nowrap; }
/* na home, Começar agora vira texto ao lado de Entrar; some na faixa em que os atalhos já ocupam a barra inteira */
@media (min-width: 1180px) and (max-width: 1319px) { .nav .entrar.comecar { display: none; } }
.idioma { position: relative; font-size: .9375rem; font-weight: 500; }
.idioma summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 9px; border-radius: 999px; cursor: pointer; list-style: none; opacity: .82; user-select: none; -webkit-user-select: none; transition: opacity .15s, background-color .15s; }
.idioma summary::-webkit-details-marker { display: none; }
.idioma summary:hover, .idioma[open] summary { opacity: 1; background: rgba(255, 255, 255, .12); }
.idioma summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idioma summary .seta { width: 12px; height: 12px; margin-left: -2px; stroke-width: 2; transition: transform .2s var(--ease); }
.idioma[open] summary .seta { transform: rotate(180deg); }
.idioma-menu { position: absolute; z-index: 5; top: calc(100% + 8px); right: 0; min-width: 184px; padding: 6px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(10, 15, 16, .4); transform-origin: 100% 0; }
.idioma[open] .idioma-menu { animation: desce .18s var(--ease); }
@keyframes desce { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.nav .idioma-menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; padding: 0 12px; border-radius: 9px; opacity: 1; color: var(--ink-2); }
.nav .idioma-menu a:hover { background: var(--paper-2); color: var(--ink); }
.nav .idioma-menu a[aria-current="true"] { color: var(--ink); }
.idioma-menu svg { width: 16px; height: 16px; fill: none; stroke: var(--teal-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav.papel .idioma summary:hover, .nav.papel .idioma[open] summary { background: rgba(10, 15, 16, .06); }
.linguas { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 12px; font-size: .875rem; }
.linguas a { display: inline-flex; align-items: center; min-height: 44px; transition: color .15s; }
.linguas a:hover { color: #fff; }
.linguas a[aria-current="true"] { color: #fff; font-weight: 500; }
.pill { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s, transform .15s var(--ease); }
.pill:active, .btn:active { transform: scale(.96); }
.nav .pill { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.nav .pill::after { content: ""; position: absolute; inset: -2px 0; }
.nav .pill:hover { background: rgba(255, 255, 255, .12); }
.nav.papel { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.nav.papel .logo .l-branco { opacity: 0; }
.nav.papel .logo .l-claro { opacity: 1; }
.nav.papel .links, .nav.sempre .links { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav.papel .pill { background: var(--plate); color: #fff; box-shadow: none; }
.nav.papel .pill:hover { background: #17505b; }
/* Capa que rola junto com a página (demonstração): a barra ganha fundo assim que algo passa por baixo dela */
.nav.rolou:not(.papel) { background: rgba(5, 10, 11, .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
/* Menu das larguras em que os atalhos da barra somem */
.menu { position: relative; display: none; }
.menu summary { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; transition: background-color .15s; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; position: absolute; inset: -2px; }
.menu summary:hover, .menu[open] summary { background: rgba(255, 255, 255, .12); }
.nav.papel .menu summary:hover, .nav.papel .menu[open] summary { background: rgba(10, 15, 16, .06); }
.menu summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.menu summary path { transform-origin: 12px 12px; transition: transform .2s var(--ease); }
.menu[open] summary path:first-child { transform: rotate(45deg) translateY(4px); }
.menu[open] summary path:last-child { transform: rotate(-45deg) translateY(-4px); }
.menu-painel { position: absolute; z-index: 5; top: calc(100% + 8px); right: 0; width: min(300px, calc(100vw - var(--m) * 2)); padding: 6px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(10, 15, 16, .4); transform-origin: 100% 0; }
.menu[open] .menu-painel { animation: desce .18s var(--ease); }
.nav .menu-painel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; opacity: 1; font-size: 1rem; font-weight: 500; color: var(--ink); }
.nav .menu-painel a:hover { background: var(--paper-2); }
.menu-extra { display: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.nav .menu-extra a { font-weight: 400; color: var(--ink-2); }
.menu-linguas { display: none; }
.nav .menu-linguas a { flex: 1; justify-content: center; padding: 0 6px; font-size: .9375rem; }
.nav .menu-linguas a[aria-current="true"] { font-weight: 500; color: var(--ink); }

/* Ações */
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: 999px;
  border: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
  font-weight: 500; font-size: 1.0625rem; white-space: nowrap; transition: background-color .15s, color .15s, transform .15s var(--ease);
}
.btn svg, .elo svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn:hover svg, .elo:hover svg { transform: translateX(3px); }
.escura .btn { background: #fff; color: var(--ink); }
.escura .btn:hover { background: #e4f6f6; }
.clara .btn { background: var(--plate); color: #fff; }
.clara .btn:hover { background: #17505b; }
.clara .btn.leve { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.clara .btn.leve:hover { background: var(--paper-2); }
.sub-elo { padding-block: 12px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color .15s, text-decoration-color .15s; }
.escura .sub-elo { color: rgba(255, 255, 255, .88); text-decoration-color: rgba(255, 255, 255, .4); }
.escura .sub-elo:hover { color: #fff; text-decoration-color: #fff; }
.clara .sub-elo { color: var(--ink); text-decoration-color: rgba(10, 15, 16, .3); }
.clara .sub-elo:hover { text-decoration-color: var(--ink); }
.elo { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.clara .elo { color: var(--teal-ink); }
.escura .elo { color: var(--mint); }
.nota { margin-top: 14px; font-size: .8125rem; }
.escura .nota { color: rgba(255, 255, 255, .6); }
.clara .nota { color: var(--ink-3); }

/* Pranchas de foto: capa, prova, fecho */
.foto { position: absolute; inset: -6% 0; z-index: 0; will-change: transform; transform: translate3d(calc(var(--bx, 0) * 1px), calc((var(--by, 0) + var(--y, 0)) * 1px), 0); }
.foto .zoom, .foto .img { width: 100%; height: 100%; }
.foto .img { background: var(--img, var(--plumagem)) 40% 46% / cover no-repeat; filter: brightness(1.28) contrast(1.04); }
.veu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 9, 10, .58) 0%, rgba(4, 9, 10, .04) 24%, rgba(4, 9, 10, .06) 54%, rgba(4, 9, 10, .9) 100%), linear-gradient(90deg, rgba(4, 9, 10, .2), rgba(4, 9, 10, 0) 50%); }
.grao { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--grao); background-size: 256px 256px; opacity: .6; }
.prancha { position: relative; overflow: hidden; overflow: clip; isolation: isolate; background: var(--noite); color: #fff; }
.prancha > .w { position: relative; z-index: 3; }

/* Capa: presa no topo, a página sobe por cima */
.capa { position: sticky; top: 0; z-index: 0; --p: 0; height: 100svh; min-height: 560px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 68px minmax(0, 1fr) auto; overflow: hidden; overflow: clip; isolation: isolate; background: var(--noite); color: #fff; }
.capa.fora { visibility: hidden; }
.capa.fora .foto .img { animation-play-state: paused; }
.capa .foto { inset: -5%; }
.js .capa.entrou .foto .zoom { animation: chega 7s var(--ease) both; }
.js .capa.entrou .foto .img { animation: respira 28s ease-in-out 7s infinite alternate; }
@keyframes chega { from { transform: scale(1.16); } to { transform: none; } }
@keyframes respira { from { transform: none; } to { transform: scale(1.045) translate3d(-.6%, .5%, 0); } }
.capa .veu::after { content: ""; position: absolute; inset: 0; background: var(--noite); opacity: calc(var(--p) * .72); }
.capa-meio {
  position: relative; z-index: 3; grid-row: 2; align-self: center; padding: 0 var(--m); will-change: transform; transform-origin: 0 50%;
  transform: translate3d(calc(var(--fx, 0) * 1px), calc(var(--fy, 0) * 1px + var(--p) * -7vh), 0) scale(calc(1 - var(--p) * .05));
}
.titulo { margin-left: -.04em; font-weight: 600; font-size: 12vw; line-height: .86; letter-spacing: -.055em; white-space: nowrap; }
.titulo .ln { display: inline-block; vertical-align: top; overflow: hidden; padding: .1em .06em .17em; margin: -.1em -.06em -.17em; }
.titulo.duas .ln { display: block; width: max-content; }
.titulo .ln > span { display: block; }
.js .capa:not(.entrou) .titulo .ln > span { transform: translateY(135%); }
.js .capa.entrou .titulo .ln > span { transition: transform 1.15s var(--ease) calc(var(--i, 0) * 110ms + 200ms); }
/* Linha de IA acima do título: os ícones de verdade de cada ferramenta, nas cores de cada marca, lado a lado, e o convite */
.selo-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: fit-content; min-height: 44px; margin-bottom: clamp(10px, 2.2vh, 24px); font-size: .9375rem; color: #fff; }
.marcas-ia { display: flex; gap: 6px; }
.marcas-ia i { width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: #071a1e; }
.marcas-ia img { display: block; width: 100%; height: 100%; }
.selo-ia b { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.selo-ia svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.selo-ia:hover svg { transform: translateX(3px); }
.quem-capa { margin-top: clamp(12px, 2.2vh, 26px); font-weight: 500; font-size: clamp(1.3rem, 2.9vw, 2.75rem); line-height: 1.12; letter-spacing: -.035em; color: rgba(255, 255, 255, .62); }
.quem-capa span { display: inline-block; color: #fff; }
.capa-base {
  position: relative; z-index: 3; grid-row: 3; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; padding: 0 var(--m) 28px;
  transform: translate3d(0, calc(var(--p) * -3vh), 0); opacity: calc(1 - var(--p) * 1.7);
}
.capa-base > :first-child { flex: 1 1 300px; }
.capa-base .sub { max-width: 42ch; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); color: rgba(255, 255, 255, .86); text-wrap: pretty; }
.js .capa:not(.entrou) .sobe { opacity: 0; transform: translateY(14px); }
.js .capa.entrou .sobe { transition: opacity .8s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.js .capa.pronta .sobe { transition: none; }

/* A folha de papel que cobre a capa */
.folha { position: relative; z-index: 1; background: var(--paper); box-shadow: 0 -28px 60px -30px rgba(0, 0, 0, .55); }
.w { max-width: 1360px; margin-inline: auto; padding-inline: var(--m); }
.secao { padding-block: clamp(84px, 11vw, 168px); }
.fundo-2 { background: var(--paper-2); }
.h2 { font-weight: 600; font-size: clamp(2.2rem, 5.6vw, 5.25rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* Os quatro lugares onde a venda para */
.como .cap:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
/* cada frase de uma afirmação fica na sua linha, em vez de quebrar no meio */
.fr { display: block; }
.cap { margin-top: clamp(72px, 10vw, 150px); padding-top: clamp(26px, 3.6vw, 44px); border-top: 1px solid var(--ink); }
.quem { margin-left: -.035em; font-weight: 600; font-size: clamp(2.3rem, 7vw, 6.5rem); line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.quem .m { color: var(--ink-3); }
.cap-corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 7vw, 112px); align-items: start; margin-top: clamp(28px, 4.5vw, 64px); }
.vira { font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.cap-texto .vira + p { margin-top: 14px; max-width: 42ch; color: var(--ink-2); text-wrap: pretty; }
.cap-texto .elo { min-height: 44px; margin-top: 8px; }
.cena figcaption { margin-bottom: 10px; font-size: .8125rem; color: var(--ink-3); }
.js .cap:not(.dentro) .cena figcaption { opacity: 0; }
.js .cap.dentro .cena figcaption { transition: opacity .5s var(--ease) .3s; }
.fita { border-top: 1px solid var(--line-2); }
.fala { display: grid; grid-template-columns: 5.4ch 6.4ch minmax(0, 1fr); gap: 0 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fala time, .fala b { font-size: .8125rem; color: var(--ink-3); }
.fala time { font-variant-numeric: tabular-nums; }
.fala b { font-weight: 500; }
.fala b.arara { color: var(--teal-ink); }
.fala p { max-width: 54ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.38; letter-spacing: -.012em; text-wrap: pretty; }
.fala.fato p { font-size: 1rem; color: var(--ink-3); }
.fala.volta { padding-top: 18px; border-bottom: 0; }
.fala.volta p { font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -.03em; }
.fala.volta strong { font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
/* as opções de resposta descem para a linha de baixo quando faltar largura; o texto de cada uma fica sempre numa linha só */
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; max-width: 26rem; margin-top: 10px; }
.opcoes span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; white-space: nowrap; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .8125rem; font-weight: 500; color: var(--ink-2); transition: background-color .3s, color .3s, box-shadow .3s; }
.demo { margin-top: clamp(40px, 5vw, 64px); font-size: .8125rem; color: var(--ink-3); }
.escura .fita { border-top-color: rgba(255, 255, 255, .3); }
.escura .fala { border-bottom-color: rgba(255, 255, 255, .16); }
.escura .fala b { color: rgba(255, 255, 255, .76); }
.escura .fala b.arara { color: var(--mint); }
.escura .fala.fato p { color: rgba(255, 255, 255, .82); }
.escura .opcoes span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: #fff; }
.fita.curta .fala { grid-template-columns: 6.4ch minmax(0, 1fr); }
.fita.curta .fala p { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }
.fita.curta .fala.fato p { font-size: .9375rem; }
/* a conversa toca quando o capítulo chega: a pergunta sobe, depois cada fala na sua vez */
.js .cap:not(.dentro) .quem { clip-path: inset(0 0 100% 0); transform: translateY(.3em); }
.js .cap.dentro .quem { clip-path: inset(-12% -4% -18% -4%); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); }
.js .cap:not(.dentro) .cap-texto { opacity: 0; transform: translateY(12px); }
.js .cap.dentro .cap-texto { transition: opacity .8s var(--ease) .3s, transform .9s var(--ease) .3s; }
.js :is(.cap, .previa):not(.dentro) .fala { opacity: 0; transform: translateY(10px); filter: blur(4px); }
.js :is(.cap, .previa).dentro .fala { --t: calc(.3s + var(--r, 0) * .22s); transition: opacity .5s var(--ease) var(--t), transform .55s var(--ease) var(--t), filter .55s var(--ease) var(--t); }
.cap.dentro .opcoes .toque { background: var(--ink); color: #fff; box-shadow: none; transition-delay: calc(.65s + var(--tq, 1) * .22s); }

/* Prova: o número ocupa a largura */
.prova { padding-block: clamp(100px, 13vw, 200px) clamp(64px, 8vw, 110px); }
.prova .foto .img { background-position: 50% 40%; }
.prova .veu { background: linear-gradient(180deg, rgba(4, 9, 10, .5), rgba(4, 9, 10, .12) 38%, rgba(4, 9, 10, .8)); }
.numero { margin-left: -.045em; font-weight: 600; font-size: 16vw; line-height: .84; letter-spacing: -.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numero span { display: inline-block; }
.p-base { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(32px, 7vw, 112px); align-items: start; margin-top: clamp(26px, 4vw, 60px); }
.oque { font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.oque small { display: block; margin-top: 12px; font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .62); }
.oque.outro { margin-top: clamp(20px, 2.6vw, 30px); padding-top: clamp(20px, 2.6vw, 30px); border-top: 1px solid rgba(255, 255, 255, .22); }
.prova blockquote { font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.prova figcaption { margin-top: 12px; font-size: .875rem; color: rgba(255, 255, 255, .66); }
.prova .elo { min-height: 44px; margin-top: 8px; }

/* Vozes */
.aspas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px); }
.aspas li { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding-top: 22px; border-top: 1px solid var(--ink); }
.aspas blockquote { max-width: 54ch; font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.28; letter-spacing: -.022em; text-wrap: pretty; }
.aspas p { font-size: .875rem; color: var(--ink-2); }
.aspas p b { display: block; font-weight: 600; color: var(--ink); }
.apoio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; margin-top: clamp(56px, 7vw, 96px); font-size: .9375rem; color: var(--ink-3); }
.apoio ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.apoio li { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-weight: 500; color: var(--ink); }
.apoio a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.apoio a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.apoio li { min-height: 44px; }
.apoio i { display: block; height: calc(15px * var(--a)); aspect-ratio: var(--r); background: currentColor; -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat; }


/* O resto que a Arara resolve */
.pontos { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--ink); }
.pontos > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px clamp(32px, 7vw, 112px); padding-block: clamp(20px, 2.6vw, 34px); border-bottom: 1px solid var(--line-2); }
.pontos dt { font-weight: 600; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.pontos dd { max-width: 52ch; color: var(--ink-2); text-wrap: pretty; }
/* o comando de verdade, embaixo da explicação de cada porta */
.pontos code { display: block; margin-top: 12px; font: 400 .8125rem/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* Planos */
.planos .lead { margin-top: 20px; }
.tabela { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 72px); }
.plano { display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.plano h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.plano h3 span { height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; white-space: nowrap; background: var(--mint); color: var(--plate); font-size: .75rem; font-weight: 500; letter-spacing: 0; }
.preco { margin-top: 20px; font-weight: 600; font-size: clamp(2.3rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.preco small { font-size: .9375rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.para { min-height: 4.5em; margin-top: 12px; font-size: .9375rem; color: var(--ink-2); text-wrap: pretty; }
.plano .btn { width: 100%; justify-content: center; margin-top: 18px; }
.plano dl { margin-top: 24px; border-top: 1px solid var(--line-2); }
.plano dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.plano dt { color: var(--ink-2); }
.plano dd { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.plano .mais { margin-top: 24px; font-size: .875rem; font-weight: 500; color: var(--ink-3); }
.plano ul { margin-top: 4px; font-size: .9375rem; }
.plano li { padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.42; color: var(--ink-2); text-wrap: pretty; }
.plano li:last-child { border-bottom: 0; padding-bottom: 0; }
.plano li b { font-weight: 600; color: var(--ink); }
.plano.destaque .mais { color: rgba(255, 255, 255, .62); }
.plano.destaque li { color: rgba(255, 255, 255, .74); border-bottom-color: rgba(255, 255, 255, .12); }
.plano.destaque li b { color: #fff; }
.plano.destaque { background: var(--plate); color: #fff; box-shadow: 0 30px 60px -34px rgba(15, 52, 61, .75); }
.plano.destaque .preco small, .plano.destaque .para, .plano.destaque dt { color: rgba(255, 255, 255, .7); }
.plano.destaque dl { border-top-color: rgba(255, 255, 255, .22); }
.plano.destaque dl div { border-bottom-color: rgba(255, 255, 255, .12); }
.plano.destaque .btn { background: #fff; color: var(--ink); }
.plano.destaque .btn:hover { background: #e4f6f6; }
.plano .taxa { margin-top: 10px; font-size: .875rem; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.plano.destaque :focus-visible { outline-color: var(--mint); }
.planos .pe-planos + .elo { min-height: 44px; margin-top: 6px; color: var(--teal-ink); }
.plano.destaque .taxa { color: rgba(255, 255, 255, .78); }
.pe-planos { max-width: 56ch; margin-top: 28px; font-size: .875rem; color: var(--ink-2); }
.pe-planos a { font-weight: 500; color: var(--teal-ink); }

/* Perguntas */
.perguntas .w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 7vw, 112px); }
.perguntas .elo { min-height: 44px; margin-top: 14px; }
.perguntas details { position: relative; border-bottom: 1px solid var(--line-2); --perto: 0; --ativa: 0; }
/* o fio de baixo escurece quando o ponteiro chega perto, e fica em tinta na pergunta aberta ou em foco */
.perguntas details::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); pointer-events: none; opacity: max(var(--perto), var(--ativa)); transition: opacity .3s ease-out; }
.perguntas details.aberta, .perguntas details:has(summary:focus-visible), html:not(.js) .perguntas details[open] { --ativa: 1; }
.perguntas details:first-child { border-top: 1px solid var(--ink); }
.perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: -.015em; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary .txt { transform: translateX(calc(var(--perto) * 6px)); transition: transform .35s var(--ease); }
.perguntas summary svg { flex: none; width: 18px; height: 18px; fill: none; stroke: color-mix(in srgb, var(--ink) calc(max(var(--perto), var(--ativa)) * 100%), var(--ink-3)); stroke-width: 1.5; stroke-linecap: round; transform: rotate(calc(var(--ativa) * 45deg)) scale(calc(1 + var(--perto) * .3)); transition: transform .35s var(--ease), stroke .2s; }
.perguntas details p { max-width: 54ch; padding: 0 40px 24px 0; color: var(--ink-2); text-wrap: pretty; }
/* resposta: abre devagar e fecha mais rápido; a altura vai de 0 ao tamanho do texto pela linha da grade */
.perguntas .resposta { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s var(--ease), opacity .2s ease-out; }
.perguntas .resposta > div { min-height: 0; overflow: hidden; }
.perguntas details.aberta .resposta { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .5s var(--ease), opacity .45s ease-out .08s; }

/* Fecho */
.fecho { padding-block: clamp(110px, 15vw, 220px) clamp(88px, 11vw, 160px); }
.fecho .foto .img { transform: scaleX(-1); background-position: 64% 58%; }
.fecho h2 { max-width: 13ch; margin-left: -.04em; font-weight: 600; font-size: clamp(2.6rem, 8vw, 8rem); line-height: .92; letter-spacing: -.052em; text-wrap: balance; }
.fecho .lead { margin-top: 24px; color: rgba(255, 255, 255, .84); }
.fecho .acoes { margin-top: 30px; }

/* Rodapé */
.rodape { background: var(--noite); color: rgba(255, 255, 255, .66); font-size: .9375rem; }
.colunas { display: grid; grid-template-columns: minmax(0, 4.6fr) repeat(4, minmax(0, 2.1fr)); gap: 32px; padding-block: clamp(56px, 7vw, 88px) clamp(40px, 5vw, 64px); }
.colunas .marca svg { height: 30px; width: auto; }
.colunas .marca p { max-width: 30ch; margin-top: 16px; }
.colunas .marca .selo-meta { margin-top: 10px; font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .9); }
.colunas h3 { font-size: .875rem; font-weight: 600; color: #fff; }
.colunas ul { display: grid; gap: 0; margin-top: 8px; }
.colunas li a { display: inline-flex; align-items: center; min-width: 44px; min-height: 40px; transition: color .15s; }
.colunas li a:hover, .legal a:hover { color: #fff; }
.legal { display: flex; font-size: .8125rem; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 32px; padding-block: 9px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; color: rgba(255, 255, 255, .5); }
.legal > span { flex: 1 1 0; min-width: 16ch; padding-block: 11px; }
.legal ul { flex: none; }
.legal ul { display: flex; flex-wrap: wrap; gap: 0; margin-inline: -12px; }
.legal a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding-inline: 12px; transition: color .15s; }

/* Larguras menores */
@media (max-width: 1279px) {
  .colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .colunas .marca { grid-column: 1 / -1; }
  .colunas .marca p { max-width: 44ch; }
}
@media (max-width: 1179px) { .nav .links { display: none; } .menu { display: block; } }
@media (max-width: 900px) {
  .cap-corpo, .p-base, .pontos > div, .perguntas .w { grid-template-columns: minmax(0, 1fr); }
  .tabela { gap: 12px; }
  .plano { padding: 22px 18px 20px; }
  .plano.destaque { position: relative; }
  .plano .btn { padding-inline: 12px; }
  .plano h3 span { position: absolute; top: -12px; right: 18px; box-shadow: 0 0 0 3px var(--paper-2); }
  .plano dl div { flex-wrap: wrap; row-gap: 2px; }
  .preco { font-size: clamp(2rem, 3.4vw, 2.6rem); }
  .para { min-height: 0; }
  .aspas { grid-template-columns: minmax(0, 1fr); }
  .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colunas .marca { grid-column: 1 / -1; }
  .legal > span { flex-basis: 100%; }
  .colunas li a { min-height: 44px; }
}
@media (max-width: 720px) {
  .nav .entrar { display: none; }
  .menu-extra { display: block; }
}
@media (max-width: 819px) {
  .tabela { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; }
  .plano { padding: 28px 26px 26px; }
}
@media (max-width: 620px) {
  body { font-size: 1rem; }
  .acoes { gap: 6px 18px; }
  .btn { height: 50px; padding: 0 20px; font-size: 1rem; }
  .fala { grid-template-columns: auto minmax(0, 1fr); }
  .fala > :nth-child(3) { grid-column: 1 / -1; margin-top: 4px; }
  .frase { font-size: clamp(2.2rem, 10.8vw, 3.4rem); }
  .frase .ln { white-space: normal; text-wrap: balance; }
  .frase .valor, .frase .prazo { white-space: nowrap; }
  .perguntas details p { padding-right: 0; }
  .so-largo { display: none; }
  .nav { gap: 10px; }
  .nav .logo, .nav .logo svg { height: 26px; }
  .nav .logo::after { inset: -9px -6px; }
  .nav .logo .l-claro { left: -3.5px; top: -2.6px; }
  .nav .logo .l-claro svg { height: 30.9px; }
  .nav .pill { padding: 0 13px; font-size: .875rem; }
  .nav .dir { gap: 6px; }
  .nav .idioma { display: none; }
  .menu-linguas { display: flex; }
  .capa-base .sub { font-size: 1rem; }
  /* na home, a ordem no celular segue a importância: texto, ação principal, preço, atalho da demonstração */
  .capa:not(.curta) .capa-base { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0; }
  .capa:not(.curta) .capa-base > div { display: contents; }
  .capa:not(.curta) .capa-base .sub { order: 1; }
  .capa:not(.curta) .capa-base .acoes { order: 2; margin-top: 16px; }
  .capa:not(.curta) .capa-base .nota { order: 3; margin-top: 10px; }
}
@media (max-width: 350px) {
  .nav { gap: 6px; padding-inline: 14px; }
  .nav .pill { padding: 0 9px; font-size: .8125rem; }
  .segmentos span { padding: 0 2px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Telas internas */
.rola { overflow-x: auto; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); }
.avisos { display: grid; gap: 10px; max-width: 78ch; margin-top: clamp(28px, 4vw, 44px); font-size: .9375rem; color: var(--ink-2); }
.lado { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 7vw, 112px); align-items: start; }
.lado .pontos { margin-top: clamp(28px, 4vw, 44px); }
.lado .pontos > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.lado .depois { max-width: 40ch; margin-top: clamp(24px, 3vw, 36px); color: var(--ink-2); text-wrap: pretty; }
.lado .depois + .elo { margin-top: 10px; min-height: 44px; }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: clamp(22px, 3vw, 34px); border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(10, 15, 16, .35); }
.form h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.campo label { display: block; margin-bottom: 7px; font-size: .9375rem; font-weight: 500; }
.campo input, .campo select, .campo textarea { display: block; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-3); font: inherit; font-size: 1rem; color: var(--ink); }
.campo input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--erro); }
.erro { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; font-size: .8125rem; font-weight: 500; line-height: 1.35; color: var(--erro); }
.erro::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; background: currentColor; -webkit-mask: var(--i-alerta) center / contain no-repeat; mask: var(--i-alerta) center / contain no-repeat; }
.campo textarea { height: 104px; padding: 12px 14px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 1px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-3); }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .btn { width: 100%; justify-content: center; }
@media (max-width: 352px) { .form { padding: 16px; } .form .btn { padding-inline: 12px; } }
.form .nota { margin-top: 0; text-align: center; }
.aviso-form { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border-radius: 12px; background: #e3f3f3; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--plate); }
.aviso-form:empty { display: none; }
.aviso-form::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: var(--teal-ink); -webkit-mask: var(--i-certo) center / contain no-repeat; mask: var(--i-certo) center / contain no-repeat; }
.rotas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 7vw, 112px); margin-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--ink); }
.rotas a { display: block; padding: clamp(20px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line-2); }
.rotas b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: clamp(1.25rem, 2.1vw, 1.75rem); letter-spacing: -.03em; }
.rotas b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.rotas a:hover b svg { transform: translateX(4px); }
.rotas span { display: block; margin-top: 6px; color: var(--ink-2); }
.caso-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(32px, 7vw, 112px); padding-block: clamp(36px, 5vw, 68px); border-top: 1px solid var(--ink); }
.caso-item h2 { font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.caso-item .de { margin-top: 16px; font-size: .9375rem; color: var(--ink-2); }
.caso-item .de b { font-weight: 600; color: var(--ink); }
.caso-item blockquote, .caso-item .fato-caso { font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.28; letter-spacing: -.022em; text-wrap: pretty; }
.caso-item .resumo { margin-top: 14px; max-width: 48ch; color: var(--ink-2); text-wrap: pretty; }
.caso-item .elo { min-height: 44px; margin-top: 8px; }
.citacao { max-width: 24ch; font-weight: 600; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.citacao + p { margin-top: 20px; color: var(--ink-2); }
.longa { max-width: 62ch; margin-top: clamp(28px, 4vw, 48px); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.situacoes { columns: 2; column-gap: clamp(32px, 7vw, 112px); margin-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--ink); }
.situacoes li { break-inside: avoid; padding: 16px 0; border-bottom: 1px solid var(--line-2); font-weight: 500; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: -.015em; }
.so-leitor-form { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 900px) {
  .lado, .caso-item { grid-template-columns: minmax(0, 1fr); }
  .rotas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .situacoes { columns: 1; }
  .capa.curta { height: auto; min-height: 78svh; }
}
.campo label > input, .campo label > select, .campo label > textarea { margin-top: 7px; }
.campo label { margin-bottom: 0; }
.aspa::before { content: "\201C"; }
.aspa::after { content: "\201D"; }
.caso-item .de span::before, .assina span::before { content: " · "; white-space: pre; }


/* ===================== AraraHQ para empresas ===================== */

/* Barra: o logo da AraraHQ com o nome desta página ao lado */
.marca-nav { display: flex; align-items: center; gap: 14px; }
.nav .logo img { display: block; height: 30px; width: auto; transition: opacity .25s; }
.nav .logo .l-claro img { height: 35.6px; }
.sub-marca { display: flex; align-items: center; height: 20px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .35); font-weight: 500; font-size: .9375rem; letter-spacing: -.01em; white-space: nowrap; transition: border-color .25s; }
.nav.papel .sub-marca { border-left-color: var(--line-2); }
.colunas .marca img { display: block; height: 30px; width: auto; }

/* Segunda, 8h: a mesma manhã, hoje e com o time de bots */
.segunda .lead { margin-top: 18px; max-width: 46ch; }
.dia { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--ink); }
.dia-topo, .dia-linha { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 4.3fr) minmax(0, 4.3fr); gap: 8px clamp(24px, 4vw, 64px); }
.dia-topo { padding-block: 14px; border-bottom: 1px solid var(--line-2); font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.dia-topo .com { color: var(--teal-ink); }
.dia-linha { align-items: baseline; padding-block: clamp(22px, 3vw, 38px); border-bottom: 1px solid var(--line-2); }
.dia-linha h3 { font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.15; letter-spacing: -.03em; }
.dia-linha .hoje { max-width: 40ch; color: var(--ink-3); text-wrap: pretty; }
.dia-linha .com { max-width: 44ch; font-weight: 500; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.4; letter-spacing: -.012em; text-wrap: pretty; }
.dia .rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dia-fim { margin-top: clamp(26px, 3.4vw, 40px); font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.js .dia-linha:not(.dentro) .hoje, .js .dia-linha:not(.dentro) .com { opacity: 0; transform: translateY(10px); }
.js .dia-linha.dentro .hoje { transition: opacity .6s var(--ease) .1s, transform .7s var(--ease) .1s; }
.js .dia-linha.dentro .com { transition: opacity .6s var(--ease) .5s, transform .7s var(--ease) .5s; }

/* Como funciona: depois da manhã de segunda, o primeiro capítulo abre com o fio */
.segunda { padding-bottom: clamp(64px, 8vw, 120px); }
.segunda + .como { padding-top: 0; }
.segunda + .como .cap:first-of-type { margin-top: 0; padding-top: clamp(26px, 3.6vw, 44px); border-top: 1px solid var(--ink); }
.tambem { max-width: 52ch; margin-top: clamp(56px, 7vw, 100px); font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.acoes.meio { margin-top: 26px; }

/* Quem decide: a prancha que responde ao medo de quem assina */
.decide { padding-block: clamp(110px, 14vw, 210px) clamp(80px, 10vw, 150px); }
.decide .foto .img { background-position: 50% 40%; }
.decide .veu { background: linear-gradient(180deg, rgba(4, 9, 10, .55), rgba(4, 9, 10, .14) 40%, rgba(4, 9, 10, .86)); }
.decide h2 { margin-left: -.04em; font-weight: 600; font-size: clamp(2.6rem, 7.6vw, 7.5rem); line-height: .92; letter-spacing: -.052em; }
.decide-base { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(32px, 7vw, 112px); align-items: start; margin-top: clamp(28px, 4vw, 60px); }
.decide .lead { max-width: 44ch; color: rgba(255, 255, 255, .86); }
.regras { border-top: 1px solid rgba(255, 255, 255, .3); }
.regras li { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .76); text-wrap: pretty; }
.regras b { display: block; margin-bottom: 2px; font-weight: 600; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: -.015em; color: #fff; }

/* Áreas: o que cada time faz na rotina */
.areas .lead { margin-top: 20px; max-width: 54ch; }
.lista-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 7vw, 112px); margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--ink); }
.lista-areas li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 20px; align-items: baseline; padding-block: clamp(16px, 2vw, 22px); border-bottom: 1px solid var(--line-2); }
.lista-areas b { font-weight: 600; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: -.015em; }
.lista-areas span { color: var(--ink-2); text-wrap: pretty; }

/* O canal, a preço de custo, com a escala ao lado */
.canal { padding-top: 0; }
.canal-corpo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 7vw, 112px); align-items: end; padding-top: clamp(26px, 3.6vw, 44px); border-top: 1px solid var(--ink); }
.h2-m { font-weight: 600; font-size: clamp(2rem, 4.4vw, 4.25rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.canal .lead { margin-top: 20px; max-width: 50ch; }
.escala-num { font-weight: 600; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: var(--teal-ink); }
.escala-o { max-width: 26ch; margin-top: 14px; font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.025em; }
.escala-nota { margin-top: 10px; font-size: .8125rem; color: var(--ink-3); }

/* Implantação: quatro passos, depois a operação junto, e o que entra */
.implantacao .lead { margin-top: 20px; max-width: 52ch; }
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 44px); margin-top: clamp(40px, 6vw, 72px); counter-reset: passo; }
.passos li { padding-top: 20px; border-top: 1px solid var(--ink); counter-increment: passo; }
.passos li::before { content: counter(passo); display: block; font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--teal-ink); }
.passos h3 { margin-top: 18px; font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.375rem); line-height: 1.2; letter-spacing: -.025em; }
.passos p { margin-top: 8px; color: var(--ink-2); text-wrap: pretty; }
.depois-impl { margin-top: clamp(32px, 4.4vw, 52px); padding-block: clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-2); text-wrap: pretty; }
.depois-impl b { font-weight: 600; color: var(--ink); }
.implantacao .pontos { margin-top: clamp(56px, 7vw, 96px); }
.entrega { max-width: 64ch; margin-top: 24px; font-size: .9375rem; color: var(--ink-3); text-wrap: pretty; }

/* Prova: a AraraHQ com os bots dela, as vozes e quem aprova */
.prova-bots .lead { margin-top: 20px; max-width: 54ch; }
.time-arara { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); margin-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--ink); }
.time-arara li { padding-block: 16px; border-bottom: 1px solid var(--line-2); }
.time-arara b { display: block; font-weight: 600; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: -.015em; }
.time-arara span { font-size: .875rem; color: var(--ink-3); }
.prova-bots .aspas { margin-top: clamp(64px, 8vw, 112px); }
.apoiadores { margin-top: 6px; font-size: .875rem; color: var(--ink-3); }

/* Pra quem é */
.publicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 7vw, 112px); margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--ink); }
.publicos > div { padding-block: clamp(22px, 3vw, 36px); border-bottom: 1px solid var(--line-2); }
.publicos h3 { font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.publicos p { max-width: 46ch; margin-top: 12px; color: var(--ink-2); text-wrap: pretty; }
.nao-e { margin-top: 24px; font-size: .9375rem; color: var(--ink-3); }
.publico .acoes { margin-top: clamp(28px, 4vw, 44px); }

/* Fecho com o pedido de proposta: a frase à esquerda, o cartão branco à direita */
.fecho.com-form { padding-block: clamp(96px, 12vw, 180px) clamp(72px, 9vw, 140px); }
.fecho.com-form .w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.fecho.com-form h2 { max-width: 9ch; font-size: clamp(2.6rem, 6.4vw, 6.75rem); }
.fecho-texto .lead { max-width: 36ch; }
.fecho-texto .nota { max-width: 40ch; margin-top: 20px; }
.form-caixa { justify-self: end; width: 100%; max-width: 560px; }
.form { color: var(--ink); }
.form .btn { background: var(--plate); }
.form .btn, .form .btn:hover { color: #fff; }
.form .btn:hover { background: #17505b; }
.form .btn:disabled { opacity: .5; cursor: not-allowed; }
.form .btn[aria-busy="true"] { opacity: .72; cursor: progress; }
.form .nota { color: var(--ink-3); }
.form .elo { color: var(--teal-ink); min-height: 44px; }
.form :focus-visible { outline-color: var(--teal-ink); }
.campo select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer; background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465659' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.campo select:invalid { color: var(--ink-3); }
.campo select option { color: var(--ink); }
.campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--erro); }
.ajuda { margin-top: 6px; font-size: .8125rem; color: var(--ink-3); }
.opcional { font-weight: 400; color: var(--ink-3); }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso-erro { padding: 12px 14px; border-radius: 12px; background: #fbeceb; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--erro); }
.aviso-erro a { text-decoration: underline; text-underline-offset: 3px; }
.aviso-previa { padding: 10px 14px; border-radius: 12px; background: #e3f3f3; font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--plate); }
.etapa { gap: 16px; }
.etapa:focus { outline: none; }
.etapa-sub { color: var(--ink-2); text-wrap: pretty; }
.etapa-quando { font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; letter-spacing: -.025em; }
.horarios { display: grid; gap: 16px; }
.dia-h { margin-bottom: 8px; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-3); font: inherit; font-weight: 500; font-size: .9375rem; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; transition: background-color .15s, box-shadow .15s, color .15s; }
.slot:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.slot[aria-pressed="true"] { background: var(--plate); color: #fff; box-shadow: none; }
.slot:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* Larguras menores */
@media (max-width: 1000px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-arara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dia-topo { display: none; }
  .dia-linha { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dia .rot { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; margin-bottom: 4px; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
  .dia .com .rot { color: var(--teal-ink); }
  .decide-base, .canal-corpo, .fecho.com-form .w { grid-template-columns: minmax(0, 1fr); }
  .canal-corpo { align-items: start; }
  .lista-areas, .publicos { grid-template-columns: minmax(0, 1fr); }
  .form-caixa { justify-self: stretch; max-width: none; }
}
@media (max-width: 620px) {
  .nav .logo img { height: 26px; }
  .nav .logo .l-claro img { height: 30.9px; }
  .marca-nav { gap: 10px; }
  .sub-marca { padding-left: 10px; height: 18px; font-size: .875rem; }
  .lista-areas li { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .passos li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 12px; padding-block: 18px; border-top-color: var(--line-2); }
  .passos li:first-child { border-top-color: var(--ink); }
  .passos li::before { grid-row: span 2; font-size: 2rem; }
  .passos h3 { margin-top: 2px; }
  .time-arara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fecho.com-form h2 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
}
@media (max-width: 480px) { .sub-marca { display: none; } }
/* antes do script medir, o título já entra em duas linhas num corpo próximo do final */
.titulo.duas { font-size: min(12.4vw, 20vh); }

/* palavra com hífen que não pode quebrar no meio */
.inteiro { white-space: nowrap; }