/* proof.: estrutura copiada da referência (vídeo de 05/11), em cinza, prata e preto. */
/* As fontes da marca. Archivo (variável) no texto; Proof Custom nos títulos e na marca: é a Archivo 700 com o p, o r,
   o o, o f e o ponto redesenhados, então "proof." escrito nela já é o logotipo. */
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo.woff2") format("woff2-variations"), url("/fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Proof Custom"; src: url("/fonts/ProofCustom-Bold.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
:root {
  --preto: #0A0A0B;
  --painel: #19191B;
  --bloco: #232326;
  --bloco-2: #34343A;
  --branco: #F5F4F7;
  --apagado: #8C8A93;
  --linha: #2C2C30;
  --tinta: #0B0B0C;
  --g: clamp(16px, 2.8vw, 40px);
  --col: 34.8%;
  --sans: "Archivo", system-ui, "Helvetica Neue", Arial, sans-serif;
  --marca: "Proof Custom", "Archivo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--preto); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--preto); color: var(--branco); font-family: var(--sans); font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--marca); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--branco); color: var(--preto); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* a cruzinha fina que a referência espalha pelos cantos */
.cruz { display: inline-block; width: 13px; height: 13px; position: relative; flex: none; }
.cruz::before, .cruz::after { content: ""; position: absolute; background: currentColor; }
.cruz::before { left: 6px; top: 0; width: 1.4px; height: 13px; }
.cruz::after { top: 6px; left: 0; height: 1.4px; width: 13px; }
.cantos { position: absolute; inset: 22px; pointer-events: none; opacity: .7; background:
  linear-gradient(currentColor, currentColor) 0 6px / 13px 1.4px no-repeat, linear-gradient(currentColor, currentColor) 6px 0 / 1.4px 13px no-repeat,
  linear-gradient(currentColor, currentColor) 100% 6px / 13px 1.4px no-repeat, linear-gradient(currentColor, currentColor) calc(100% - 6px) 0 / 1.4px 13px no-repeat,
  linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 13px 1.4px no-repeat, linear-gradient(currentColor, currentColor) 6px 100% / 1.4px 13px no-repeat,
  linear-gradient(currentColor, currentColor) 100% calc(100% - 6px) / 13px 1.4px no-repeat, linear-gradient(currentColor, currentColor) calc(100% - 6px) 100% / 1.4px 13px no-repeat; }

/* topo: marca, duas informações, menu */
.topo { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: grid; grid-template-columns: var(--col) 1fr auto; align-items: start; padding: 28px var(--g); color: var(--tinta); font-size: 17px; }
.logo { font-weight: 800; font-size: 26px; letter-spacing: -0.05em; line-height: 1; }
.topo-info { display: flex; flex-direction: column; line-height: 1.35; }
.topo-info span { opacity: .6; }
.topo-info b, .topo-info a { font-weight: 500; }
.menu-botao { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; }
.menu-botao i { position: relative; width: 54px; height: 9px; }
.menu-botao i::before, .menu-botao i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s cubic-bezier(.7,0,.2,1), top .45s cubic-bezier(.7,0,.2,1); }
.menu-botao i::before { top: 0; }
.menu-botao i::after { top: 7.5px; }
.menu-botao[aria-expanded="true"] i::before { top: 3.75px; transform: rotate(45deg) scaleX(.42); }
.menu-botao[aria-expanded="true"] i::after { top: 3.75px; transform: rotate(-45deg) scaleX(.42); }
.menu.abre { animation: menu-desce .7s cubic-bezier(.7,0,.2,1) both; }
.menu.fecha { animation: menu-sobe .55s cubic-bezier(.7,0,.2,1) both; }
@keyframes menu-desce { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes menu-sobe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
.menu nav a { display: block; overflow: hidden; padding-bottom: .1em; }
@media (max-width: 760px) { .topo { grid-template-columns: 1fr auto; } .topo-info { display: none; } }

.menu { position: fixed; z-index: 30; inset: 0; background: var(--preto); display: flex; align-items: center; padding: var(--g); padding-left: var(--col); }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu a { font-size: clamp(44px, 6vw, 96px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.05; color: var(--apagado); transition: color .2s; }
.menu a:hover { color: var(--branco); }
.menu-aberto .topo { position: fixed; z-index: 31; color: var(--branco);  }
.menu-aberto .topo .topo-info { visibility: hidden; }
@media (max-width: 760px) { .menu { padding-left: var(--g); } }

/* hero: fundo de ponta a ponta, título a partir de um terço, faixa de cartões embaixo */
.hero { position: relative; isolation: isolate; height: 100svh; min-height: 680px; color: var(--tinta); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--g) var(--g); }
.hero-fundo { position: absolute; inset: 0; z-index: -1; will-change: transform; }
.hero-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-fundo .hero-foto { left: auto; right: -19vw; width: auto; max-width: none; height: 86%; top: 0; object-fit: contain; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.pb { filter: grayscale(1) contrast(1.05); }
.hero-meio { position: relative; flex: 1; display: flex; align-items: center; padding-top: 80px; }
.hero-marca { position: absolute; left: 0; top: 50%; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.hero-marca i { width: 26px; border-top: 1px solid currentColor; opacity: .7; }
.hero-titulo { margin-left: calc(var(--col) - var(--g)); position: relative; }
.hero h1 { font-size: clamp(40px, 4.6vw, 78px); font-weight: 700; letter-spacing: -0.05em; line-height: .98; }
.verso { display: block; overflow: hidden; padding-bottom: .06em; }
.verso > span { display: block; }
.hero-titulo p { margin-top: 28px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -0.01em; }
.faixa { position: relative; display: flex; gap: 5px; height: clamp(170px, 27vh, 240px); margin-top: 40px; }
.cartao { position: relative; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; cursor: pointer; transition: flex-grow .8s cubic-bezier(.65, 0, .25, 1), background .4s; background: rgba(255, 255, 255, 0); }
.cartao > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: inset .8s cubic-bezier(.65, 0, .25, 1), width .8s cubic-bezier(.65, 0, .25, 1), border-radius .8s; }
.cartao-info { position: absolute; left: calc(50% + 10px); top: 18px; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 17px; font-weight: 500; opacity: 0; transform: translateX(14px); transition: opacity .3s, transform .5s; pointer-events: none; }
.cartao-info b { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; margin-bottom: auto; }
.cartao-info::after { content: ""; position: absolute; right: 0; top: 4px; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) 6px 0 / 1.4px 13px no-repeat, linear-gradient(currentColor, currentColor) 0 6px / 13px 1.4px no-repeat; }
.cartao.aberto { flex-grow: 2.05; background: rgba(245, 244, 247, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); }
.cartao.aberto > img { inset: 8px; width: calc(50% - 8px); height: calc(100% - 16px); border-radius: 8px; }
.cartao.aberto .cartao-info { opacity: 1; transform: none; transition-delay: .35s; }
@media (max-width: 760px) {
  .hero-titulo { margin-left: 0; }
  .hero-marca { top: 96px; }
  .faixa { height: 130px; }
  .cartao:nth-child(n+4) { display: none; }
  .cartao-info b { font-size: 17px; }
  .cartao-info { font-size: 13px; left: calc(50% + 6px); top: 12px; bottom: 12px; right: 12px; }
}

/* seções escuras: rótulo S - 0n e título a partir de um terço */
.secao { padding: clamp(80px, 9vw, 130px) var(--g); position: relative; }
.cabeca { position: relative; border-top: 1px solid var(--linha); padding-top: 28px; margin-bottom: clamp(50px, 6vw, 90px); }
.cabeca small, .rotulo small { display: block; font-size: 15px; font-weight: 500; }
.cabeca h2 { margin-left: calc(var(--col) - var(--g)); margin-top: 6px; font-size: clamp(64px, 9.4vw, 156px); }
.cabeca.esquerda h2 { margin-left: 0; }
@media (max-width: 760px) { .cabeca h2 { margin-left: 0; margin-top: 18px; } }

/* S-01 */
.sobre-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.rotulo { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.rotulo small { margin-bottom: 14px; }
.acende { font-size: clamp(28px, 3.1vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.16; }
.acende .p { color: #47464D; transition: color .35s; }
.acende .p.on { color: var(--branco); }
.sobre-baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(60px, 7vw, 100px); }
.sobre-foto { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 4.2; }
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre-lado { display: flex; flex-direction: column; gap: 40px; border-top: 1px solid var(--linha); padding-top: 34px; }
.confia { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.confia span { display: block; color: var(--apagado); }
.numeros { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 5px; }
.numero { background: var(--painel); border-radius: 10px; padding: 26px 28px 22px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; }
.numero p { display: flex; align-items: flex-end; gap: 10px; }
.numero i { font-style: normal; font-size: 28px; color: var(--apagado); align-self: flex-start; margin-top: 8px; }
.numero b { font-size: clamp(64px, 7vw, 110px); font-weight: 600; letter-spacing: -0.05em; line-height: .85; font-variant-numeric: tabular-nums; }
.numero p > span { color: var(--apagado); font-size: 21px; line-height: 1.25; padding-bottom: 4px; white-space: nowrap; }
@media (max-width: 860px) { .sobre-topo, .sobre-baixo { grid-template-columns: 1fr; } .numero { min-height: 170px; } }

/* S-02 */
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.logos img[src*="sigmacx"], .logos img[src*="nuveto"] { height: clamp(30px, 2.8vw, 42px); }
.logos li { background: var(--painel); border-radius: 10px; height: clamp(130px, 14vw, 200px); display: grid; place-content: center; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.04em; text-align: center; }
.logos img { height: clamp(40px, 4vw, 62px); width: auto; filter: brightness(0) invert(1); }
.logos .marca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.logos .marca img { height: clamp(38px, 3.6vw, 54px); }
.logos .marca span { white-space: nowrap; font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; letter-spacing: -0.04em; }
.logos small { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--apagado); }
@media (max-width: 760px) { .logos { grid-template-columns: 1fr 1fr; } .logos li:last-child { grid-column: 1 / -1; } }

/* reel */
.reel { height: 220vh; position: relative; }
.reel-palco { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.reel-caixa { position: absolute; inset: 0; overflow: hidden; clip-path: inset(9% var(--g) 0 var(--g) round 14px); }
.reel-caixa img { width: 100%; height: 100%; object-fit: cover; }
.reel-texto { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .28em; padding: 0 var(--g); text-align: center; font-size: clamp(48px, 7.4vw, 124px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.reel-play { width: clamp(64px, 7vw, 100px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.reel-play svg { width: 30%; fill: var(--branco); }


/* S-03 */
.cabeca.direita h2 { white-space: nowrap; }
.obras { display: flex; flex-direction: column; gap: clamp(60px, 8vw, 120px); }
.obra { display: grid; grid-template-columns: calc(var(--col) - var(--g)) 1fr; position: relative; }
.obra-info { position: sticky; top: 14vh; align-self: start; display: flex; flex-direction: column; gap: 26px; padding-right: 30px; }
.obra-info h3 { font-size: clamp(32px, 3.2vw, 50px); font-weight: 700; letter-spacing: -0.05em; }
.obra-info ul { display: flex; flex-direction: column; gap: 6px; }
.obra-info li { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 500; }
.obra-info li::before { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) 6px 0 / 1.4px 13px no-repeat, linear-gradient(currentColor, currentColor) 0 6px / 13px 1.4px no-repeat; }
.obra-ano { color: var(--apagado); font-size: 18px; max-width: 30ch; }
.obra-link { font-size: 18px; font-weight: 600; }
.obra-link:hover { opacity: .65; }
.obra figure { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--painel); }
.obra figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .cabeca.direita h2 { white-space: normal; }
  .obra { grid-template-columns: 1fr; }
  .obra-info { position: static; height: auto; padding: 0 0 18px; gap: 14px; }
  .obra figure { position: static; height: 60vw; margin-bottom: 40px; }
}

/* S-04 */
.linhas { display: flex; flex-direction: column; }
.linha { display: grid; grid-template-columns: calc(var(--col) - var(--g)) 23% 1fr; align-items: start; padding: 34px 0; position: relative; }
.linha::after { content: ""; position: absolute; left: calc(var(--col) - var(--g)); right: 0; bottom: 0; border-bottom: 1px solid var(--linha); transform-origin: left; }
.linha h3 { display: flex; align-items: center; gap: 22px; font-size: clamp(28px, 3.2vw, 48px); font-weight: 700; letter-spacing: -0.045em; transition: padding-left .4s; }
.linha figure { width: 240px; aspect-ratio: 2 / 1; border-radius: 4px; overflow: hidden; }
.linha figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.linha p { font-size: 19px; font-weight: 500; max-width: 44ch; }
.linha p b { display: block; margin-top: 10px; color: var(--apagado); font-weight: 500; }
.linha:hover h3 { padding-left: 8px; }
.linha:hover figure img { transform: scale(1.08); }
@media (max-width: 860px) {
  .linha { grid-template-columns: 1fr; gap: 16px; }
  .linha::after { left: 0; }
}

/* S-05: painel um tom acima com a grade */
.porque { padding: 0 0 clamp(60px, 7vw, 100px); }
.porque-painel { background: var(--painel); margin: 0 var(--g); padding: 30px clamp(20px, 2.8vw, 40px) clamp(20px, 2.8vw, 40px); border-radius: 4px; }
.porque .cabeca { border-top: 0; padding-top: 0; margin-bottom: 50px; }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 290px 290px 290px; gap: 5px; }
.g { position: relative; border-radius: 12px; overflow: hidden; background: var(--bloco-2); padding: 26px; }
.g > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g .cruz { position: absolute; top: 24px; left: 24px; }
.selo { position: absolute; left: 24px; bottom: 24px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 9px 20px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; background: rgba(10, 10, 11, .25); }
.g-a { grid-column: 1; grid-row: 1; }
.g-b { grid-column: 2; grid-row: 1; }
.g-c { grid-column: 3; grid-row: 1 / 3; }
.g-d { grid-column: 1; grid-row: 2 / 4; display: flex; flex-direction: column; justify-content: space-between; padding-top: 110px; }
.g-e { grid-column: 2; grid-row: 2; background: var(--preto); display: grid; place-items: center; }
.g-f { grid-column: 2; grid-row: 3; width: calc(50% - 2.5px); }
.g-g { grid-column: 2; grid-row: 3; width: calc(50% - 2.5px); justify-self: end; }
.g-h { grid-column: 3; grid-row: 3; display: grid; place-items: center; font-size: clamp(26px, 2.5vw, 38px); font-weight: 700; letter-spacing: -0.045em; transition: background .3s; }
.g-h:hover { background: #45454C; }
.g-h .cantos { inset: 24px; color: var(--apagado); }
.g-f .selo, .g-g .selo { left: 50%; bottom: 50%; transform: translate(-50%, 50%); text-align: center; white-space: nowrap; font-size: 16px; padding: 8px 14px; }
.g-num { display: flex; align-items: flex-end; gap: 10px; position: absolute; left: 26px; bottom: 22px; right: 26px; }
.g-num b { font-size: clamp(60px, 6vw, 92px); font-weight: 600; letter-spacing: -0.05em; line-height: .85; }
.g-num i { font-style: normal; font-size: clamp(32px, 3.2vw, 52px); font-weight: 400; color: #8C8A93; line-height: .9; }
.g-num span { color: #A9A7AF; font-size: 19px; line-height: 1.25; }
.g-frase { font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.12; max-width: 13ch; }
.g-d .g-num { position: static; }
.g-logo { font-size: clamp(40px, 4vw, 64px); font-weight: 800; letter-spacing: -0.06em; }
@media (max-width: 860px) {
  .grade { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 200px; }
  .g { grid-column: auto !important; grid-row: auto !important; width: auto !important; }
  .g-d, .g-c { grid-row: span 2 !important; }
  .g-d { padding-top: 70px; }
}

/* S-06: frase no formato de depoimento */
.frase { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding-top: 0; }
.frase-foto { border-radius: 12px; overflow: hidden; min-height: 640px; }
.frase-foto img { width: 100%; height: 100%; object-fit: cover; }
.frase-cartao { position: relative; background: var(--painel); border-radius: 12px; padding: clamp(40px, 4vw, 60px) clamp(30px, 3vw, 50px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.frase-cartao .cantos { inset: 26px; }
.frase-marca { font-size: 26px; font-weight: 800; letter-spacing: -0.06em; margin-top: 30px; }
.frase blockquote { font-size: clamp(28px, 3.1vw, 48px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.24; }
.frase-quem { display: flex; flex-direction: column; margin-bottom: 30px; }
.frase-quem b { font-weight: 700; }
.frase-quem span { color: var(--apagado); }
@media (max-width: 860px) { .frase { grid-template-columns: 1fr; } .frase-foto { min-height: 320px; } }

/* formulário do contrato, no escuro */
.comecar { padding: clamp(80px, 9vw, 130px) var(--g); }
.comecar .bloco-cabeca { border-top: 1px solid var(--linha); padding-top: 28px; display: grid; grid-template-columns: calc(var(--col) - var(--g)) 1fr; gap: 20px 0; margin-bottom: clamp(50px, 6vw, 80px); }
.comecar .bloco-cabeca small { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; }
.comecar .bloco-cabeca h2 { grid-column: 2; grid-row: 1; font-size: clamp(48px, 6.4vw, 104px); }
.comecar .bloco-cabeca p { grid-column: 2; max-width: 46ch; color: var(--apagado); font-size: 21px; }
@media (max-width: 760px) { .comecar .bloco-cabeca { grid-template-columns: 1fr; } .comecar .bloco-cabeca h2, .comecar .bloco-cabeca p { grid-column: 1; } }
.contato { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; margin-left: calc(var(--col) - var(--g)); }
.contato .largo { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo > span { font-size: 16px; color: var(--apagado); }
.campo input, .campo textarea { font: 400 24px/1.3 var(--sans); letter-spacing: -0.02em; color: var(--branco); background: transparent; border: 0; border-bottom: 1px solid #4A4950; border-radius: 0; padding: 10px 0 14px; width: 100%; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #55545B; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--branco); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.envio { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 10px; }
.erro { flex-basis: 100%; color: #FF8A80; font-weight: 500; }
.nota { color: var(--apagado); font-size: 16px; }
.nota a { color: var(--branco); }
.botao { display: inline-flex; align-items: center; gap: 12px; font: 600 18px/1 var(--sans); padding: 20px 30px; border-radius: 12px; background: var(--branco); color: var(--preto); border: 0; cursor: pointer; transition: background .2s; }
.botao:hover { background: #fff; }
.botao:disabled { opacity: .6; cursor: default; }
.botao span { transition: transform .2s; }
.botao:hover span { transform: translateX(4px); }
.pronto { margin-left: calc(var(--col) - var(--g)); display: flex; flex-direction: column; gap: 12px; font-size: 21px; }
.pronto h3 { font-size: clamp(36px, 4vw, 60px); }
@media (max-width: 760px) { .contato { grid-template-columns: 1fr; margin-left: 0; } .pronto { margin-left: 0; } }

/* S-07: rodapé */
.rodape { padding: clamp(50px, 6vw, 80px) var(--g) 0; overflow: hidden; border-top: 1px solid var(--linha); margin: 0 var(--g); padding-left: 0; padding-right: 0; }
.rodape-topo { display: grid; grid-template-columns: 8% calc(var(--col) - var(--g) - 8%) 1fr; align-items: baseline; }
.rodape-topo small { font-size: 13px; font-weight: 500; }
.rodape-logo { font-weight: 800; font-size: 24px; letter-spacing: -0.05em; }
.rodape-topo nav { display: flex; justify-content: space-between; font-size: 18px; font-weight: 500; }
.rodape-topo nav a:hover, .rodape-meio a:hover, .seta:hover { opacity: .65; }
.rodape-meio { display: grid; grid-template-columns: 1fr; margin: 0 0 0 calc(var(--col) - var(--g)); font-size: 24px; line-height: 1.35; }
.rodape-meio div { display: flex; flex-direction: column; }
.rodape-meio span { font-size: 16px; color: var(--apagado); margin-bottom: 14px; }
.rodape-chamada { display: grid; grid-template-columns: 8% calc(var(--col) - var(--g) - 8%) 1fr; margin-top: 130px; padding-bottom: 80px; border-bottom: 1px solid var(--linha); }
.rodape-marca { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; align-self: start; padding-top: 14px; }
.rodape-marca i { width: 26px; border-top: 1px solid currentColor; opacity: .7; }
.rodape-chamada > div { grid-column: 3; }
.rodape-chamada h2 { font-size: clamp(48px, 7vw, 116px); font-weight: 500; letter-spacing: -0.055em; }
.letras .l { display: inline-block; white-space: pre; }
.rodape-chamada p { margin-top: 26px; color: var(--apagado); font-size: 24px; letter-spacing: -0.02em; }
.seta { display: inline-flex; gap: 12px; margin-top: 18px; font-size: 19px; font-weight: 600; }
.rodape-linha { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 16px; color: var(--apagado); }
.rodape-gigante { font-size: 31.5vw; font-weight: 800; letter-spacing: -0.075em; line-height: .72; margin: 4vw 0 0 -1.6vw; white-space: nowrap; }
@media (max-width: 760px) {
  .rodape-topo, .rodape-chamada { grid-template-columns: 1fr; gap: 14px; }
  .rodape-topo nav { flex-wrap: wrap; gap: 14px 22px; justify-content: flex-start; }
  .rodape-meio { grid-template-columns: 1fr; gap: 30px; margin: 0; }
  .rodape-marca, .rodape-chamada > div { grid-column: 1; }
  .rodape-chamada { margin-top: 70px; }
}

@media (prefers-reduced-motion: reduce) { .menu.abre, .menu.fecha { animation: none; } .cartao, .cartao > img, .cartao-info { transition: none; } }

/* Beauty: o final do vídeo de pitch, em que o logo se monta */
.be-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.be-figura { position: relative; background: #F1EEEA; }
.cartao-be { position: absolute; inset: 0; overflow: hidden; background: #F1EEEA; transition: inset .8s cubic-bezier(.65, 0, .25, 1), border-radius .8s; }
.cartao.aberto .cartao-be { inset: 8px calc(50% + 0px) 8px 8px; border-radius: 8px; }

/* S-04 em branco: a parte de venda se destaca no meio do preto */
.servicos { background: var(--branco); color: var(--tinta); }
.servicos .cabeca { border-top-color: #D6D3DB; }
.servicos .linha::after { border-bottom-color: #D6D3DB; }
.servicos .linha p b { color: #6C6974; }

/* ===== celular: ajustes feitos olhando o site inteiro em 390px ===== */
@media (max-width: 760px) {
  /* topo: o braço maior, saindo pela direita, com as bordas da foto se dissolvendo em vez de cortar seco */
  .hero { min-height: 100svh; height: auto; padding-bottom: 20px; }
  .hero-meio { align-items: flex-start; padding-top: 120px; flex: none; }
  .hero h1 { font-size: 40px; }
  .hero-titulo p { font-size: 18px; max-width: 26ch; }
  .hero-fundo .hero-foto { top: auto; bottom: 0; height: 66%; right: -66vw; opacity: 1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
  .faixa { margin-top: auto; height: 150px; }
  .hero { justify-content: space-between; }
  .cartao.aberto { flex-grow: 3.4; }
  .cartao-info { font-size: 13px; }
  .cartao-info b { font-size: 18px; }

  /* about: números cabem em duas colunas */
  .numeros { grid-auto-rows: auto; }
  .numero { min-height: 150px; padding: 18px; }
  .numero p { flex-direction: column; align-items: flex-start; gap: 6px; }
  .numero b { font-size: 56px; }
  .numero p > span { white-space: normal; font-size: 15px; }
  .confia { font-size: 22px; }

  /* clientes: logo em cima do nome quando o nome é longo */
  .logos .marca { flex-direction: column; gap: 8px; }
  .logos .marca span { font-size: 15px; white-space: normal; text-align: center; }
  .logos img { height: 30px; }
  .logos .marca img { height: 30px; }
  .logos img[src*="beauty"] { height: 40px; }
  .logos li { height: 120px; padding: 10px; }

  /* trabalhos: imagem do tamanho da tela, no formato do print */
  .obra figure { position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: 0; }
  .obras { gap: 70px; }
  .obra-info h3 { font-size: 30px; }

  /* pacotes: uma coisa embaixo da outra */
  .linha { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 0; }
  .linha h3 { font-size: 28px; gap: 14px; }
  .linha figure { width: 100%; aspect-ratio: 16 / 9; }

  /* por que nós: uma coluna, cada peça com espaço */
  .porque-painel { padding: 24px 16px 16px; }
  .grade { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .g { min-height: 200px; }
  .g-c { min-height: 320px; }
  .g-d { min-height: 0; padding: 70px 22px 22px; gap: 30px; }
  .g-d .g-num, .g-b .g-num { flex-wrap: wrap; }
  .g-b { min-height: 170px; }
  .g-num span { font-size: 16px; }
  .g-frase { font-size: 30px; max-width: none; }
  .g-e { min-height: 140px; }
  .g-f, .g-g { min-height: 180px; justify-self: stretch; }
  .g-h { min-height: 140px; }
  .selo { font-size: 15px; }

  /* contato: rótulo, título e texto em linhas separadas */
  .comecar .bloco-cabeca small { grid-row: 1; }
  .comecar .bloco-cabeca h2 { grid-row: auto; font-size: 48px; }
  .comecar .bloco-cabeca p { grid-row: auto; font-size: 18px; }
  .campo input, .campo textarea { font-size: 20px; }

  .cabeca h2 { font-size: 56px; }
  .rodape-linha { flex-direction: column; gap: 6px; }
  .secao, .comecar { padding-top: 70px; padding-bottom: 70px; }
}
.servicos .linha figure { padding: 6px; background: #fff; border: 2px solid #C4C0CB; border-radius: 12px; box-shadow: 0 18px 36px -20px rgba(20, 18, 26, .45); }
.servicos .linha figure img { border-radius: 6px; }

/* topo: WhatsApp e Instagram ao lado do e-mail */
.topo-contato { display: flex; align-items: center; gap: 10px; }
.topo-contato > a:first-child { margin-right: 8px; }
.rede { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tinta); color: #fff; transition: transform .2s, background .2s; }
.rede:hover { transform: translateY(-2px); background: #2A2A2E; }
.rede svg { width: 20px; height: 20px; fill: currentColor; }

/* rodapé: as mesmas redes, à direita, em círculos claros sobre o preto */
.rodape-redes { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 0 30px; border-bottom: 1px solid var(--linha); }
.rodape-mail { font-size: clamp(22px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.04em; }
.rodape-mail:hover { opacity: .65; }
.rodape-icones { display: flex; gap: 10px; }
.rodape-redes .rede { width: 48px; height: 48px; background: var(--painel); color: var(--branco); }
.rodape-redes .rede:hover { background: var(--bloco-2); }
.rodape-redes .rede svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .rodape-redes { flex-direction: column; align-items: flex-start; } }

/* S-06 em branco: o formulário fica mais leve e amigável */
.comecar { background: var(--branco); color: var(--tinta); }
.comecar .bloco-cabeca { border-top-color: #D6D3DB; }
.comecar .bloco-cabeca p, .comecar .campo > span, .comecar .nota { color: #6C6974; }
.comecar .nota a { color: var(--tinta); }
.comecar .campo input, .comecar .campo textarea { color: var(--tinta); border-bottom-color: #BDB9C4; }
.comecar .campo input::placeholder, .comecar .campo textarea::placeholder { color: #A9A6B0; }
.comecar .campo input:focus, .comecar .campo textarea:focus { border-bottom-color: var(--tinta); }
.comecar .botao { background: var(--tinta); color: var(--branco); }
.comecar .botao:hover { background: #2A2A2E; }
.comecar .erro { color: #B3261E; }
.rodape { border-top: 0; }

/* chat: bolinha prata no canto e conversa sobre prata claro translúcido */
.chat { position: fixed; z-index: 40; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); font-family: var(--sans); color: var(--tinta); }
.chat-bola { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 22%, #FFFFFF 0%, #F1F0F3 28%, #D3D2D8 62%, #B4B3BA 100%); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 -4px 8px rgba(11,11,12,.14), inset 0 2px 2px rgba(255,255,255,.9), 0 14px 26px -12px rgba(10,10,11,.55); cursor: pointer; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.chat-bola:hover { transform: translateY(-2px) scale(1.04); }
.chat-p { height: 27px; width: auto; fill: var(--tinta); display: block; overflow: visible; }
.chat-janela { position: absolute; right: 0; bottom: 76px; width: min(370px, calc(100vw - 32px)); height: min(600px, calc(100svh - 130px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; transform-origin: 100% 100%;
  background: linear-gradient(160deg, rgba(255,255,255,.99) 0%, rgba(234,232,239,.985) 34%, rgba(214,212,220,.98) 50%, rgba(244,243,247,.985) 66%, rgba(222,220,228,.98) 100%);
  box-shadow: 0 30px 60px -24px rgba(10,10,11,.55), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55); }
.chat-janela[hidden] { display: none !important; }
.chat-janela.abre { animation: chat-cresce .45s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes chat-cresce { from { opacity: 0; transform: scale(.5) translateY(40px); } }
.chat-janela.fecha { animation: chat-encolhe .3s cubic-bezier(.6,0,.8,.4) both; pointer-events: none; }
@keyframes chat-encolhe { to { opacity: 0; transform: scale(.5) translateY(40px); } }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(11,11,12,.08); }
.chat-marca { width: 38px; height: 38px; border-radius: 50%; background: var(--tinta); display: grid; place-items: center; flex: none; }
.chat-marca .chat-p { height: 18px; fill: #fff; }
.chat-nome { flex: 1; display: grid; line-height: 1.25; }
.chat-nome b { font-size: 16px; }
.chat-nome small { font-size: 13px; color: #55535B; }
.chat-x { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.75); border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--tinta); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.chat-m { max-width: 84%; padding: 10px 13px; font-size: 15px; line-height: 1.45; animation: chat-aparece .35s ease both; }
.chat-m.eu { align-self: flex-end; background: var(--tinta); color: #fff; border-radius: 16px 16px 4px 16px; }
.chat-m.ela { align-self: flex-start; background: rgba(255,255,255,.9); border-radius: 16px 16px 16px 4px; box-shadow: 0 6px 14px -10px rgba(10,10,11,.3); }
@keyframes chat-aparece { from { opacity: 0; transform: translateY(6px); } }
.chat-digitando { align-self: flex-start; display: flex; gap: 4px; padding: 14px; background: rgba(255,255,255,.9); border-radius: 16px 16px 16px 4px; }
.chat-digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); opacity: .4; animation: chat-pula 1s ease-in-out infinite; }
.chat-digitando i:nth-child(2) { animation-delay: .15s; } .chat-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-pula { 50% { transform: translateY(-4px); opacity: 1; } }
.chat-atalhos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; }
.chat-atalhos button { font: 600 14px var(--sans); padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); color: var(--tinta); cursor: pointer; }
.chat-atalhos button:hover { background: rgba(255,255,255,.95); }
.chat-campo { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid rgba(11,11,12,.06); }
.chat-campo input { flex: 1; min-width: 0; font: 400 16px var(--sans); color: var(--tinta); background: rgba(255,255,255,.88); border: 1px solid transparent; border-radius: 12px; padding: 12px 13px; outline: none; }
.chat-campo input:focus { border-color: rgba(11,11,12,.25); }
.chat-campo button { width: 46px; border-radius: 12px; border: 0; background: var(--tinta); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-campo svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 600px) {
  .chat { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .chat-bola { width: 56px; height: 56px; }
  .chat-janela { bottom: 70px; width: calc(100vw - 32px); height: calc(100svh - 110px); }
}
@media (prefers-reduced-motion: reduce) { .chat-janela.abre, .chat-janela.fecha, .chat-m, .chat-ico-balao .ponto { animation: none; } }

/* S-06: o "p." da proof. grande e bem leve à esquerda */
.comecar { position: relative; overflow: hidden; }
.comecar-p { position: absolute; z-index: 0; left: var(--g); top: 50%; translate: 0 -50%; height: min(72%, 760px); width: auto; max-width: calc(var(--col) - var(--g) * 2); fill: var(--tinta); opacity: .05; pointer-events: none; }
.comecar > *:not(.comecar-p) { position: relative; z-index: 1; }
@media (max-width: 760px) { .comecar-p { height: 40%; max-width: none; left: auto; right: -10vw; top: auto; bottom: 2%; translate: none; } }

/* o mesmo prata translúcido do chat, onde o site já tinha caixas claras por cima de imagem */
:root { --prata-vidro: linear-gradient(160deg, rgba(255,255,255,.86) 0%, rgba(232,230,237,.78) 34%, rgba(208,206,214,.72) 50%, rgba(243,242,246,.82) 66%, rgba(218,216,224,.76) 100%); --prata-brilho: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.6); }
.cartao.aberto { background: var(--prata-vidro); box-shadow: var(--prata-brilho), 0 24px 40px -26px rgba(10,10,11,.45); }
.selo { background: var(--prata-vidro); color: var(--tinta); border: 0; box-shadow: var(--prata-brilho), 0 10px 22px -14px rgba(0,0,0,.6); }
.servicos .linha figure { background: var(--prata-vidro); border: 0; box-shadow: var(--prata-brilho), 0 18px 36px -20px rgba(20,18,26,.45); }

/* a bolinha mostra um balão de conversa; aberta, vira um × */
.chat-ico { width: 30px; height: 30px; grid-area: 1 / 1; transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.chat-ico-balao { fill: none; }
.chat-ico-balao .contorno { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linejoin: round; }
.chat-ico-balao .ponto { fill: var(--tinta); transform-box: fill-box; transform-origin: center; animation: chat-digita 2.4s ease-in-out infinite; }
.chat-ico-balao .ponto:nth-of-type(2) { animation-delay: .18s; }
.chat-ico-balao .ponto:nth-of-type(3) { animation-delay: .36s; }
@keyframes chat-digita { 0%, 55%, 100% { transform: translateY(0); opacity: 1; } 18% { transform: translateY(-1.4px); opacity: .45; } }
.chat-ico-x { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transform: rotate(-90deg) scale(.6); }
.chat-bola[aria-expanded="true"] .chat-ico-balao { opacity: 0; transform: rotate(90deg) scale(.6); }
.chat-bola[aria-expanded="true"] .chat-ico-x { opacity: 1; transform: none; }

/* ===== versão para os Estados Unidos (nov/2026): venda primeiro, o resto em páginas próprias ===== */

/* botões: o claro já existia; o escuro vai sobre fundo claro */
a.botao { text-decoration: none; }
.botao.escuro { background: var(--tinta); color: var(--branco); }
.botao.escuro:hover { background: #2A2A2E; }

/* topo: o botão de venda logo abaixo do título */
.hero-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.hero-link { font-size: 18px; font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.hero-link:hover { opacity: .65; }
.hero-titulo .hero-nota { margin-top: 16px; font-size: 16px; font-weight: 500; opacity: .72; letter-spacing: 0; }
@media (max-width: 760px) {
  .hero-acao { margin-top: 22px; gap: 14px 20px; }
  .hero-acao .botao { padding: 17px 24px; font-size: 17px; }
  .hero-titulo .hero-nota { font-size: 15px; max-width: none; }
  .hero-fundo .hero-foto { height: 58%; right: -58vw; }
}

/* pacotes: três colunas com o preço, o que vem e o botão; o do meio fica escuro */
.pacotes-abre { margin: calc(clamp(50px, 6vw, 90px) * -0.45) 0 clamp(34px, 4vw, 54px) calc(var(--col) - var(--g)); max-width: 46ch; font-size: 21px; font-weight: 500; color: #4E4B55; }
.pacotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: stretch; }
.pacote { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #DAD7DF; }
.pacote-dentro { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100%; padding: clamp(24px, 2.4vw, 36px); }
.pacote.destaque { background: var(--preto); color: var(--branco); box-shadow: 0 30px 50px -30px rgba(10, 10, 11, .6); }
.pacote-dias { font-size: 16px; font-weight: 600; color: #6C6974; }
.pacote.destaque .pacote-dias { color: var(--apagado); }
.pacote h3 { font-size: clamp(24px, 2.1vw, 32px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; min-height: 2.16em; }
.pacote-preco { font-size: clamp(48px, 4.6vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.pacote-frase { font-size: 18px; font-weight: 500; min-height: 4.35em; }
/* as linhas da lista são peças próprias (e não bordas) para poderem encolher junto com o cartão: --lx é a escala
   (registrada como número que não se herda, para que mudá-la a cada quadro não refaça o estilo das palavras) */
@property --lx { syntax: "<number>"; inherits: false; initial-value: 1; }
.pacote-lista { position: relative; display: flex; flex-direction: column; padding-top: 1px; }
.pacote-lista li { position: relative; padding: 11px 0 12px; font-size: 16.5px; line-height: 1.35; }
.pacote-lista::before, .pacote-lista li::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #DAD7DF; transform-origin: 0 50%; transform: scaleX(var(--lx, 1)); }
.pacote-lista::before { top: 0; }
.pacote-lista li::after { bottom: 0; }
.pacote.destaque .pacote-lista::before, .pacote.destaque .pacote-lista li::after { background: var(--linha); }
.pacote-acao { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pacote-acao .botao { width: 100%; justify-content: space-between; padding: 18px 22px; font-size: 17px; }
.pacote-mais { font-size: 16px; font-weight: 600; }
.pacote-mais span { display: inline-block; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.pacote-mais:hover, .avulso:hover span { opacity: .65; }
.avulsos { margin: clamp(40px, 5vw, 70px) 0 0 calc(var(--col) - var(--g)); }
.avulsos h3 { font-size: clamp(24px, 2.1vw, 32px); font-weight: 700; letter-spacing: -0.04em; margin-bottom: 14px; }
.avulso { display: grid; grid-template-columns: 1fr 90px 100px; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid #D6D3DB; font-size: 19px; font-weight: 500; }
.avulso:last-child { border-bottom: 1px solid #D6D3DB; }
.avulso b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.avulso b:first-of-type { font-weight: 500; color: #6C6974; }
.garantias { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin: clamp(40px, 5vw, 70px) 0 0 calc(var(--col) - var(--g)); }
.garantias h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 10px; }
.garantias p { font-size: 16.5px; color: #4E4B55; }
@media (max-width: 1100px) { .pacote-frase { min-height: 0; } }
@media (max-width: 860px) {
  .pacotes { grid-template-columns: 1fr; }
  .pacote h3, .pacote-frase { min-height: 0; }
  .pacotes-abre, .avulsos, .garantias { margin-left: 0; }
  .garantias { grid-template-columns: 1fr; }
  .avulso { grid-template-columns: 1fr auto; font-size: 17px; }
  .avulso b:first-of-type { display: none; }
}

/* o time: três nomes grandes, o que cada um faz e uma frase */
.pessoas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pessoa { background: var(--painel); border-radius: 12px; padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 12px; min-height: 300px; }
.pessoa-faz { font-size: 16px; font-weight: 600; color: var(--apagado); }
.pessoa h3 { font-size: clamp(44px, 5vw, 80px); font-weight: 700; letter-spacing: -0.05em; margin-bottom: auto; padding-bottom: 30px; }
.pessoa p:last-child { font-size: 18px; color: #C9C7CF; }
.time-fecho { margin: clamp(30px, 3.4vw, 50px) 0 0 calc(var(--col) - var(--g)); max-width: 48ch; font-size: 21px; font-weight: 500; }
.time-fecho a, .prosa a, .pagina-topo .lede a, .duas a { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
@media (max-width: 860px) { .pessoas { grid-template-columns: 1fr; } .pessoa { min-height: 0; } .pessoa h3 { padding-bottom: 14px; } .time-fecho { margin-left: 0; font-size: 18px; } }

/* como corre: os dias em linha, cada um com o que acontece; o último é a entrega */
.dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 5px; }
.dias li { background: var(--painel); border-radius: 12px; padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 10px; min-height: 250px; }
.dias li:last-child { background: var(--branco); color: var(--tinta); }
.dias b { font-size: 16px; font-weight: 600; color: var(--apagado); }
.dias li:last-child b { color: #6C6974; }
.dias h3 { font-size: clamp(24px, 2.3vw, 36px); font-weight: 700; letter-spacing: -0.045em; margin-bottom: auto; padding-bottom: 20px; }
.dias p { font-size: 17px; color: #C9C7CF; }
.dias li:last-child p { color: #4E4B55; }
@media (max-width: 1000px) { .dias { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dias { grid-template-columns: 1fr; } .dias li { min-height: 0; } }
.claro .dias li { background: #fff; box-shadow: inset 0 0 0 1px #DAD7DF; }
.claro .dias li:last-child { background: var(--preto); color: var(--branco); box-shadow: none; }
.claro .dias b { color: #6C6974; } .claro .dias p { color: #4E4B55; }
.claro .dias li:last-child b { color: var(--apagado); } .claro .dias li:last-child p { color: #C9C7CF; }

.ver-mais { margin: clamp(50px, 6vw, 90px) 0 0 calc(var(--col) - var(--g)); }
@media (max-width: 760px) { .ver-mais { margin-left: 0; } }

/* perguntas: abre e fecha, uma linha por pergunta */
.faq { margin-left: calc(var(--col) - var(--g)); border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: clamp(21px, 2vw, 28px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s; margin-right: 6px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.faq details p { padding: 0 0 26px; max-width: 62ch; font-size: 18px; color: #C9C7CF; }
.claro .faq, .claro .faq details { border-color: #D6D3DB; } .claro .faq details p { color: #4E4B55; }
@media (max-width: 760px) { .faq { margin-left: 0; } }

/* rodapé: os caminhos do site */
.rodape-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 40px 0; border-bottom: 1px solid var(--linha); margin-left: calc(var(--col) - var(--g)); }
.rodape-nav div { display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.rodape-nav b { font-size: 15px; font-weight: 600; color: var(--apagado); margin-bottom: 6px; }
.rodape-nav a:hover { opacity: .65; }
@media (max-width: 760px) { .rodape-nav { grid-template-columns: 1fr; margin-left: 0; } }

/* ===== páginas internas: faixa clara com o título, depois o corpo ===== */
.pagina-topo { background: #E9E8EC; color: var(--tinta); padding: clamp(150px, 15vw, 210px) var(--g) clamp(50px, 6vw, 90px); position: relative; overflow: hidden; }
.pagina-topo .trilha { font-size: 16px; font-weight: 500; color: #5B5862; margin-bottom: 22px; }
.pagina-topo .trilha a:hover { opacity: .65; }
.pagina-topo h1 { font-size: clamp(42px, 6vw, 100px); font-weight: 700; letter-spacing: -0.05em; line-height: .98; max-width: 16ch; text-wrap: balance; }
.pagina-topo .lede { margin-top: 26px; max-width: 54ch; font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; color: #33313A; }
.pagina-topo .hero-acao { margin-top: 34px; }
.pagina-topo > * { position: relative; z-index: 1; }
.pagina-topo .pagina-mao { position: absolute; z-index: 0; right: -250px; top: 0; height: min(100%, 640px); width: auto; max-width: none; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.pagina-topo.com-mao h1 { max-width: 13ch; }
.pagina-topo.com-mao .lede { max-width: 42ch; }
@media (max-width: 1240px) { .pagina-topo .pagina-mao { display: none; } .pagina-topo.com-mao h1 { max-width: 16ch; } .pagina-topo.com-mao .lede { max-width: 54ch; } }
@media (max-width: 760px) { .pagina-topo h1 { font-size: 42px; } }
.claro { background: var(--branco); color: var(--tinta); }
.claro .cabeca { border-top-color: #D6D3DB; }
.titulo-2 { font-size: clamp(34px, 4vw, 64px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; margin: 0 0 clamp(26px, 3vw, 44px) calc(var(--col) - var(--g)); max-width: 18ch; text-wrap: balance; }
@media (max-width: 760px) { .titulo-2 { margin-left: 0; } }

/* os fatos de um pacote: preço, prazo e promessa, antes de qualquer leitura */
.fatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: clamp(34px, 4vw, 54px); max-width: 1040px; }
.fato { background: var(--preto); color: var(--branco); border-radius: 12px; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.fato:last-child { background: #fff; color: var(--tinta); box-shadow: 0 24px 40px -28px rgba(10, 10, 11, .5); }
.fato small { font-size: 15px; font-weight: 600; color: var(--apagado); }
.fato:last-child small { color: #6C6974; }
.fato b { font-size: clamp(34px, 3.6vw, 56px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.fato span { font-size: 16.5px; line-height: 1.35; color: #C9C7CF; }
.fato:last-child span { color: #4E4B55; }
@media (max-width: 760px) { .fatos { grid-template-columns: 1fr; } }

/* tabela simples: o que vem no pacote */
.itens { margin-left: calc(var(--col) - var(--g)); display: grid; grid-template-columns: minmax(180px, 30%) 1fr; }
.itens > * { padding: 16px 0; border-top: 1px solid var(--linha); font-size: 18px; }
.itens b { font-weight: 700; padding-right: 20px; }
.itens span { color: #C9C7CF; }
.claro .itens > * { border-top-color: #D6D3DB; } .claro .itens span { color: #4E4B55; }
.itens-nota { margin: 22px 0 0 calc(var(--col) - var(--g)); max-width: 60ch; font-size: 17px; color: var(--apagado); }
.claro .itens-nota { color: #5B5862; }
@media (max-width: 760px) { .itens, .itens-nota { margin-left: 0; } .itens { grid-template-columns: 1fr; } .itens b { padding-bottom: 0; } .itens span { border-top: 0; padding-top: 0; } }

.duas { margin-left: calc(var(--col) - var(--g)); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); }
.duas h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 12px; }
.duas p { font-size: 18px; color: #C9C7CF; max-width: 46ch; } .duas p + p { margin-top: 12px; }
.claro .duas p { color: #4E4B55; }
@media (max-width: 760px) { .duas { margin-left: 0; grid-template-columns: 1fr; } }

/* chamada no fim das páginas internas */
.chamada { background: var(--branco); color: var(--tinta); padding: clamp(70px, 8vw, 120px) var(--g); }
.chamada h2 { font-size: clamp(44px, 6.4vw, 104px); margin-left: calc(var(--col) - var(--g)); max-width: 14ch; text-wrap: balance; }
.chamada p { margin: 22px 0 0 calc(var(--col) - var(--g)); max-width: 46ch; font-size: 21px; color: #5B5862; }
.chamada .hero-acao { margin-left: calc(var(--col) - var(--g)); }
@media (max-width: 760px) { .chamada h2, .chamada p, .chamada .hero-acao { margin-left: 0; } .chamada h2 { font-size: 44px; } }

/* journal: a lista e o texto de leitura */
.posts { margin-left: calc(var(--col) - var(--g)); border-top: 1px solid var(--linha); }
.post { display: grid; grid-template-columns: 150px 1fr; gap: 10px 30px; padding: 30px 0; border-bottom: 1px solid var(--linha); }
.post time { font-size: 16px; color: var(--apagado); padding-top: 8px; }
.post h2, .post h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.post p { grid-column: 2; font-size: 18px; color: #C9C7CF; max-width: 58ch; }
.post:hover h2, .post:hover h3 { opacity: .7; }
@media (max-width: 760px) { .posts { margin-left: 0; } .post { grid-template-columns: 1fr; } .post p { grid-column: 1; } .post time { padding-top: 0; } }
.prosa { margin-left: calc(var(--col) - var(--g)); max-width: 68ch; font-size: 20px; line-height: 1.6; color: #DDDCE2; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: var(--branco); margin-top: 1.9em; text-wrap: balance; }
.prosa h3 { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--branco); margin-top: 1.6em; }
.prosa ul, .prosa ol { padding-left: 1.2em; list-style: disc; } .prosa ol { list-style: decimal; }
.prosa li + li { margin-top: .45em; }
.prosa strong { color: var(--branco); font-weight: 700; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.4; }
.prosa th, .prosa td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--linha); }
.prosa th { color: var(--apagado); font-weight: 600; font-size: 15px; }
.prosa .resumo { font-size: 22px; line-height: 1.45; font-weight: 500; color: var(--branco); padding-bottom: 1.1em; border-bottom: 1px solid var(--linha); }
.prosa .assina { font-size: 16px; color: var(--apagado); }
@media (max-width: 760px) { .prosa { margin-left: 0; font-size: 18px; } .prosa .resumo { font-size: 20px; } }
.nao-achou { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }

/* ===== peça 1: a fonte da proof =====
   Proof Custom em tudo que é vitrine (títulos, números, a marca) e Archivo no que se lê. A Manrope pedia mais aperto
   entre as letras do que a Archivo; os valores abaixo foram acertados olhando cada tamanho. */
.logo, .menu a, .cartao-info b, .numero b, .reel-texto, .g-h, .g-num b, .g-frase, .g-logo,
.frase-marca, .rodape-logo, .rodape-gigante, .rodape-mail, .pacote-preco, .fato b, .faq summary, .logos li, .logos .marca span,
.avulso b:last-child { font-family: var(--marca); font-weight: 700; }
.logo { font-size: 28px; letter-spacing: -0.02em; }
.hero h1 { letter-spacing: -0.04em; }
.cabeca h2 { letter-spacing: -0.045em; }
.menu a { letter-spacing: -0.035em; }
.acende { letter-spacing: -0.028em; line-height: 1.14; }
.rotulo, .confia { letter-spacing: -0.02em; }
.numero b, .g-num b, .pacote-preco, .fato b { letter-spacing: -0.04em; }
.obra-info h3, .linha h3, .pessoa h3, .dias h3, .pagina-topo h1, .titulo-2 { letter-spacing: -0.035em; }
.pacote h3, .avulsos h3, .garantias h3, .duas h3, .post h2, .post h3, .prosa h2, .prosa h3, .faq summary, .cartao-info b { letter-spacing: -0.025em; }
.rodape-gigante { letter-spacing: -0.05em; }
.g-logo, .frase-marca, .rodape-logo { letter-spacing: -0.02em; }
.hero-titulo p { font-weight: 500; letter-spacing: -0.005em; }
.botao, .hero-link, .pacote-mais, .obra-link { letter-spacing: -0.005em; }

/* ===== peças 3 e 4: os pacotes abrem no lugar =====
   O mesmo fluxo dos serviços do proofbrasil.com: a grade de três colunas vira 2,4 / 0,8 / 0,8, o cartão escolhido troca
   a lista curta pelas abas com cada entrega, e os outros dois continuam ali, estreitos, a um clique de distância.
   As peças avulsas usam os mesmos cartões, numa segunda fileira alinhada com a primeira. */
.rotulo, .acende, .confia { font-weight: 600; }
/* O CSS só descreve os dois desenhos (fechado e aberto). O caminho de um ao outro é do "morfar", em app.js: o
   próprio cartão cresce, os vizinhos são empurrados, e fechar volta pelo mesmo caminho. */
.pacotes[data-sel="0"] { grid-template-columns: 2.4fr .8fr .8fr; }
.pacotes[data-sel="1"] { grid-template-columns: .8fr 2.4fr .8fr; }
.pacotes[data-sel="2"] { grid-template-columns: .8fr .8fr 2.4fr; }
.pacote { position: relative; min-width: 0; overflow: clip; height: 742px; }
.pacote-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pacote-lista { flex: none; }
.pacote-det { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 16px; padding-top: 4px; }
.pacote.sel .pacote-lista { display: none; }
.pacote.sel .pacote-det { display: flex; }
/* peças que o "morfar" move: cada uma anda e cresce a partir do seu canto; cada palavra é uma peça. No caminho, os
   cartões são postos um a um dentro do grupo, que por isso é a referência deles. */
.pacotes, .casos { position: relative; }
[data-m] { transform-origin: 0 0; }
.tx { display: block; }
.pl { display: inline-block; }
.pacote-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.pacote-abas button { font: 600 15px var(--sans); padding: 9px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px #C9C6CF; transition: background .25s, color .25s, box-shadow .25s; }
.pacote-abas button:hover { box-shadow: inset 0 0 0 1px currentColor; }
.pacote-abas button[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: none; }
.pacote.destaque .pacote-abas button { box-shadow: inset 0 0 0 1px #3A3A40; }
.pacote.destaque .pacote-abas button[aria-pressed="true"] { background: var(--branco); color: var(--tinta); }
.pacote-painel { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 34px; align-content: start; padding: 14px 6px 0 0; border-top: 1px solid #DAD7DF; }
.pacote-painel[hidden] { display: none; }
.pacote.destaque .pacote-painel { border-top-color: var(--linha); }
.pacote-painel h4 { margin: 0 0 4px; font: 700 16.5px/1.25 var(--sans); }
.pacote-painel p { font-size: 15.5px; line-height: 1.4; color: #4E4B55; }
.pacote.destaque .pacote-painel p { color: #C9C7CF; }
.pacote-painel a { font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.pacote.sel .pacote-acao { flex-direction: row; align-items: center; gap: 22px; }
.pacote.sel .pacote-acao .botao { width: auto; flex: 1; }
button.pacote-mais { font: 600 16px var(--sans); border-radius: 0; flex: none; }
.pacote-mais .fecha, .pacote.sel .pacote-mais .abre { display: none; }
.pacote.sel .pacote-mais .fecha { display: inline-block; }
/* os estreitos: o mesmo cartão, com a letra contida; o cartão inteiro escolhe */
.pacotes:not([data-sel=""]) .pacote:not(.sel) { cursor: pointer; }
.pacotes:not([data-sel=""]) .pacote:not(.sel) h3 { font-size: min(1.6vw, 23px); }
.pacotes:not([data-sel=""]) .pacote:not(.sel) .pacote-preco { font-size: min(3vw, 42px); }
.pacotes:not([data-sel=""]) .pacote:not(.sel) .pacote-frase { font-size: 15px; min-height: 0; }
/* a letra menor da lista é uma classe da própria lista (posta pelo app.js), e não do cartão: assim a lista não muda
   de letra enquanto está saindo de cena */
.pacote-lista.mini li { font-size: 14px; padding: 9px 0 10px; }
.pacotes:not([data-sel=""]) .pacote:not(.sel) .pacote-acao .botao { display: none; }
.pacotes:not([data-sel=""]) .pacote:not(.sel):hover { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.pacotes:not([data-sel=""]) .pacote.destaque:not(.sel):hover { box-shadow: inset 0 0 0 1.5px #55545B; }
/* a segunda fileira: uma peça só */
.pacotes.menores { margin-top: 6px; }
.pacotes.menores .pacote { height: 330px; }
.pacotes.menores .pacote-lista { display: none; }
.pacotes.menores:not([data-sel=""]) .pacote { height: 600px; }
.pacotes.menores .pacote h3, .pacotes.menores .pacote-frase { min-height: 0; }
.pacotes.menores .pacote-preco { font-size: clamp(36px, 3.4vw, 52px); }
.pacote.sob-medida { background: transparent; box-shadow: inset 0 0 0 1px #C9C6CF; }
@media (max-width: 860px) {
  .pacotes, .pacotes[data-sel] { grid-template-columns: 1fr; }
  .pacote, .pacotes.menores .pacote, .pacotes.menores:not([data-sel=""]) .pacote { height: auto; }
  .pacote-painel { grid-template-columns: 1fr; overflow: visible; }
  .pacotes:not([data-sel=""]) .pacote:not(.sel) h3 { font-size: 24px; }
  .pacotes:not([data-sel=""]) .pacote:not(.sel) .pacote-preco { font-size: 48px; }
  .pacotes:not([data-sel=""]) .pacote:not(.sel) .pacote-acao .botao { display: inline-flex; }
  .pacote-lista.mini li { font-size: 16.5px; padding: 11px 0 12px; }
}

/* ===== peça 5: o time =====
   Os três retratos são as fotos de verdade, redesenhadas em pontos com profundidade (public/avatares.js). O retrato
   ocupa o alto do cartão e se desfaz para baixo; o papel, o nome e o texto vêm embaixo. Arthur no meio. */
.pessoa { padding: 0; gap: 0; min-height: 0; overflow: hidden; }
.pessoa canvas { display: block; width: 100%; aspect-ratio: 1; opacity: 0; transition: opacity 1.2s; }
.pessoa canvas.pronta { opacity: 1; }
.pessoa-txt { display: flex; flex-direction: column; gap: 10px; padding: 0 clamp(20px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px); margin-top: -19%; position: relative; }
.pessoa .pessoa-txt h3 { font-size: clamp(40px, 4.4vw, 70px); margin: 0; padding: 0 0 6px; }
.pessoa .pessoa-txt p { font-size: 17px; line-height: 1.45; color: #C9C7CF; }
.pessoa .pessoa-txt .pessoa-faz { font-size: 16px; line-height: 1.2; color: var(--apagado); }
.pessoa .pessoa-txt .pessoa-voce { color: var(--branco); }
@media (max-width: 860px) {
  /* no celular os três ficam lado a lado, de arrastar, começando pelo do meio */
  .pessoas { display: flex; gap: 5px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); }
  .pessoas::-webkit-scrollbar { display: none; }
  .pessoa { flex: 0 0 84%; scroll-snap-align: center; }
  .pessoa .pessoa-txt h3 { font-size: 40px; }
}

/* ===== peças 8 e 9: rodapé, barra de rolagem e um site mais curto =====
   Rodapé: a marca gigante quase apagada (branco a 5,5%), que acende debaixo do cursor e é cortada por uma linha de
   chão com uma luz embaixo. Barra: a nativa some no computador e entra um trilho fino, o mesmo do proofbrasil.com.
   Medidas: as seções perdem cerca de um quarto do respiro e os títulos um quinto do tamanho; no celular as fileiras
   de cartões passam a ser de arrastar, em vez de empilhar. */
.rodape { position: relative; margin: 0; padding: clamp(50px, 6vw, 80px) var(--g) 0; overflow: hidden; }
.rodape-marca { position: relative; aspect-ratio: 2660 / 952; margin-top: clamp(16px, 2.6vw, 40px); margin-bottom: -8.6%; }
.rodape-marca-base, .rodape-marca-luz { position: absolute; inset: 0; -webkit-mask: url("/img/proof-wordmark.svg") center / 100% 100% no-repeat; mask: url("/img/proof-wordmark.svg") center / 100% 100% no-repeat; }
.rodape-marca-base { background: rgba(255, 255, 255, .055); }
.rodape-marca-luz { opacity: 0; transition: opacity .5s ease-out; background: radial-gradient(circle 20vw at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .45) 12%, rgba(255, 255, 255, .06) 60%, transparent 100%); }
.rodape-marca.acesa .rodape-marca-luz { opacity: 1; }
.rodape-chao { position: relative; z-index: 1; height: clamp(70px, 9vw, 150px); margin: 0 calc(var(--g) * -1); border-top: 1px solid #2E2E33; background: var(--preto); overflow: hidden; }
.rodape-chao::before { content: ""; position: absolute; left: 15%; right: 15%; top: 0; height: 300px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(200, 200, 200, .13), transparent); }

@media (min-width: 1024px) and (pointer: fine) and (forced-colors: none) {
  html.tem-barra { scrollbar-width: none; }
  html.tem-barra::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.barra { position: fixed; top: 50%; right: 8px; z-index: 60; height: min(38vh, 360px); padding: 0 11px; transform: translateY(-50%); color: #fff; mix-blend-mode: difference; opacity: 0; cursor: pointer; touch-action: none; user-select: none; transition: opacity .5s cubic-bezier(.19, 1, .22, 1); }
.barra.ativa, .barra:hover, .barra.arrasta { opacity: .9; }
.barra i { display: block; position: relative; width: 2px; height: 100%; background: rgb(255 255 255 / 16%); }
.barra b { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: currentColor; transition: width .2s, margin .2s; }
.barra:hover b, .barra.arrasta b { width: 4px; margin-left: -2px; }
@media (max-width: 1023px), (pointer: coarse) { .barra { display: none; } }

.secao { padding: clamp(60px, 6.8vw, 100px) var(--g); }
.cabeca { padding-top: 24px; margin-bottom: clamp(32px, 4vw, 60px); }
.cabeca h2 { font-size: clamp(52px, 7.6vw, 124px); }
.sobre-baixo { margin-top: clamp(40px, 5vw, 72px); }
.sobre-foto { aspect-ratio: 4 / 3.3; }
.numero { min-height: 188px; }
.dias li { min-height: 196px; }
.pacotes-abre { margin-top: calc(clamp(32px, 4vw, 60px) * -0.4); }
.garantias, .avulsos { margin-top: clamp(32px, 4vw, 56px); }
.time-fecho { margin-top: clamp(26px, 3vw, 44px); }
.faq summary { padding: 20px 0; }
.comecar { padding: clamp(60px, 6.8vw, 100px) var(--g); }
.comecar .bloco-cabeca { margin-bottom: clamp(36px, 4.4vw, 60px); }
.comecar .bloco-cabeca h2 { font-size: clamp(44px, 5.8vw, 94px); }
.contato { gap: 28px 40px; }

@media (max-width: 860px) {
  .secao, .comecar { padding-top: 52px; padding-bottom: 52px; }
  .cabeca { margin-bottom: 26px; padding-top: 18px; }
  .cabeca h2 { font-size: 44px; margin-top: 10px; }
  /* fileiras de arrastar: cada uma mostra um cartão e a ponta do próximo */
  .pacotes, .pacotes[data-sel], .dias { display: flex; align-items: stretch; gap: 5px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(var(--g) * -1); margin-right: calc(var(--g) * -1); padding: 0 var(--g) 4px; }
  .pacotes::-webkit-scrollbar, .dias::-webkit-scrollbar { display: none; }
  .pacotes > .pacote { flex: 0 0 86%; scroll-snap-align: center; }
  .pacotes > .pacote.sel { flex-basis: 92%; }
  .dias > li { flex: 0 0 70%; scroll-snap-align: center; min-height: 170px; }
  .pacotes.menores { margin-top: 5px; }
  .pacotes-abre { margin: 0 0 22px; font-size: 18px; }
  .sobre-foto { display: none; }
  .sobre-baixo { margin-top: 30px; }
  .acende { font-size: 26px; }
  .garantias { gap: 20px; }
  .rodape-nav { padding: 28px 0; gap: 22px; grid-template-columns: 1fr 1fr; }
  .faq summary { padding: 17px 0; font-size: 20px; }
}

/* ===== peça 7: Featured Works =====
   Nove cases, três por linha. Cada cartão mostra a capa do filme e toca o filme quando o cursor passa. Aberto, cresce
   na própria linha e mostra o filme grande, o texto e as telas; os dois vizinhos viram tiras estreitas, a um clique:
   a mesma lógica dos pacotes e da faixa do topo. O CSS só descreve os desenhos parados; o caminho entre eles é do
   "morfar", em app.js. */
.casos { display: flex; flex-direction: column; gap: 5px; }
.casos-linha { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.caso { position: relative; min-width: 0; border-radius: 14px; overflow: clip; background: var(--painel); }
.caso-dentro { position: relative; height: 100%; }
.caso-b { display: block; width: 100%; text-align: left; padding: 6px 6px 0; }
.caso-v { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #000; }
.caso-v img, .caso-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caso-v video { opacity: 0; transition: opacity .3s; }
.caso-v video.toca { opacity: 1; }
.caso-n { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 14px 17px; }
.caso-n b { font-family: var(--marca); font-size: clamp(20px, 1.75vw, 27px); letter-spacing: -0.025em; white-space: nowrap; transition: opacity .2s; }
.caso-n i { font-style: normal; font-size: 15.5px; color: var(--apagado); text-align: right; line-height: 1.25; }
.caso:not(.aberto) .caso-b:hover .caso-n b { opacity: .65; }
/* o miolo do texto não depende do cartão estar aberto, para não se rearrumar enquanto sai de cena */
.caso-d { display: none; flex-direction: column; gap: 18px; padding: 30px clamp(22px, 2.6vw, 40px) 30px clamp(14px, 1.6vw, 26px); }
.caso.aberto .caso-dentro { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; }
/* o nome grande de um case aberto é uma classe do próprio nome (posta pelo app.js), pelo mesmo motivo */
.caso-n.grande { flex-direction: column; gap: 4px; padding: 18px 16px 20px; }
.caso-n.grande b { font-size: clamp(30px, 3vw, 46px); }
.caso-n.grande i { text-align: left; font-size: 17px; }
.caso.aberto .caso-d { display: flex; }
.caso-d ul { display: flex; flex-direction: column; gap: 6px; }
.caso-d li { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; }
.caso-d li::before { content: ""; flex: none; width: 9px; height: 9px; background: currentColor; clip-path: polygon(0 0, 84% 0, 100% 16%, 100% 100%, 0 100%); }
.caso-d p { font-size: 18px; line-height: 1.48; color: #C9C7CF; max-width: 46ch; }
.caso-f { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.caso-f img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 7px; background: #000; }
@media (min-width: 861px) {
  .casos-linha[data-sel="0"] { grid-template-columns: minmax(0, 2.6fr) minmax(0, .2fr) minmax(0, .2fr); }
  .casos-linha[data-sel="1"] { grid-template-columns: minmax(0, .2fr) minmax(0, 2.6fr) minmax(0, .2fr); }
  .casos-linha[data-sel="2"] { grid-template-columns: minmax(0, .2fr) minmax(0, .2fr) minmax(0, 2.6fr); }
  /* a tira: só a capa, da altura da linha, cortada pelos lados e mais escura (como os cartões fechados da faixa do
     topo); o nome sai de cena e volta quando a linha fecha */
  .casos-linha:not([data-sel=""]) .caso:not(.aberto) .caso-b { display: flex; flex-direction: column; height: 100%; padding-bottom: 6px; }
  .casos-linha:not([data-sel=""]) .caso:not(.aberto) .caso-v { flex: 1; min-height: 0; aspect-ratio: auto; }
  .casos-linha:not([data-sel=""]) .caso:not(.aberto) .caso-n { display: none; }
  .caso-v img, .caso-v video { transition: opacity .3s, filter .45s; }
  .casos-linha:not([data-sel=""]) .caso:not(.aberto) .caso-v img, .casos-linha:not([data-sel=""]) .caso:not(.aberto) .caso-v video { filter: brightness(.5); }
  .casos-linha:not([data-sel=""]) .caso:not(.aberto):hover .caso-v img, .casos-linha:not([data-sel=""]) .caso:not(.aberto):hover .caso-v video { filter: none; }
}
@media (max-width: 860px) {
  .casos { flex-direction: row; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); }
  .casos::-webkit-scrollbar { display: none; }
  .casos-linha { display: contents; }
  .caso { flex: 0 0 84%; scroll-snap-align: center; }
  .caso.aberto { flex-basis: 92%; }
  .caso.aberto .caso-dentro { display: block; }
  .caso-d { padding: 4px 16px 20px; gap: 14px; }
  .caso-n { flex-direction: column; gap: 3px; } .caso-n i { text-align: left; }
  .ver-mais { margin-top: 26px; }
}

/* a linha que corre de um dia ao outro, e a frase que abre os cases */
.dias li { position: relative; }
.dia-fio { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: currentColor; opacity: .5; transform-origin: 0 50%; border-radius: 2px; }
.casos-abre { margin: calc(clamp(32px, 4vw, 60px) * -0.4) 0 clamp(26px, 3vw, 44px) calc(var(--col) - var(--g)); max-width: 46ch; font-size: 21px; font-weight: 500; color: var(--apagado); }
@media (max-width: 860px) { .casos-abre { margin: 0 0 22px; font-size: 18px; } }

/* ===== peça 2: o topo =====
   O desenho é o da versão da tarde. O trabalho está no que vai dentro: seis cases reais na faixa, cada cartão leva ao
   seu case; uma linha fina no cartão aberto mostra quando o próximo abre; a frase quebra antes da mão. */
.hero-titulo > p:first-of-type { max-width: 23em; text-wrap: balance; }
@media (min-width: 761px) and (max-width: 1500px) { .hero-titulo > p:first-of-type { max-width: 17.5em; } }
.hero-fundo .hero-foto { will-change: transform; }
.cartao { cursor: pointer; }
.cartao-info { pointer-events: none; text-decoration: none; color: inherit; }
.cartao.aberto .cartao-info { pointer-events: auto; }
.cartao-info b { font-size: clamp(22px, 2.05vw, 30px); }
.cartao-info span { font-size: clamp(14px, 1.15vw, 17px); }
.cartao-tempo { position: absolute; left: calc(50% + 10px); right: 18px; bottom: 10px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0; transform: scaleX(0); transform-origin: 0 50%; }
.cartao.aberto .cartao-tempo { opacity: .55; animation: cartao-tempo 3.2s linear both; }
.faixa:hover .cartao-tempo { animation: none; opacity: 0; }
@keyframes cartao-tempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cartao > img { object-position: 50% 50%; }
@media (max-width: 760px) { .cartao-tempo { left: calc(50% + 6px); right: 12px; bottom: 7px; } .hero-titulo > p:first-of-type { max-width: 20em; } }
@media (prefers-reduced-motion: reduce) { .cartao.aberto .cartao-tempo { animation: none; opacity: 0; } }

/* o filme dentro de um artigo, e os dois caminhos de um case aberto */
.prosa-filme { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px var(--linha); }
.caso-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.caso-links .obra-link { border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

/* pacote aberto: tudo cabe sem rolar. A fileira inteira cresce junto, e o cartão aberto solta as alturas mínimas
   que só servem para alinhar os três fechados. */
.pacotes:not(.menores):not([data-sel=""]) .pacote { height: 812px; }
.pacotes.menores:not([data-sel=""]) .pacote { height: 706px; }
.pacote.sel h3, .pacote.sel .pacote-frase { min-height: 0; }
@media (max-width: 860px) { .pacotes:not(.menores):not([data-sel=""]) .pacote, .pacotes.menores:not([data-sel=""]) .pacote { height: auto; } }

/* a imagem de cada pacote: a garra segurando o produto. O fundo da foto é o mesmo cinza da faixa, e as bordas se
   desfazem nela. */
.pagina-topo .pagina-produto { position: absolute; z-index: 0; right: max(3vw, calc(50vw - 860px)); top: clamp(64px, 5.4vw, 92px); width: min(33vw, 468px); height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
@media (max-width: 1100px) { .pagina-topo .pagina-produto { display: none; } }

/* a foto do topo com profundidade: a caixa tem a proporção da foto; a imagem e a tela de WebGL a preenchem */
.hero-fundo .hero-foto { position: absolute; aspect-ratio: 3 / 2; }
.hero-fundo .hero-foto img, .hero-fundo .hero-foto canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ===== peça 9b: no celular, as três garantias viram mais uma fileira de arrastar (300 px a menos de rolagem) ===== */
@media (max-width: 860px) {
  .garantias { display: flex; align-items: stretch; gap: 5px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(var(--g) * -1); margin-right: calc(var(--g) * -1); padding: 0 var(--g) 4px; }
  .garantias::-webkit-scrollbar { display: none; }
  .garantias > div { flex: 0 0 78%; scroll-snap-align: center; background: #fff; box-shadow: inset 0 0 0 1px #DAD7DF; border-radius: 12px; padding: 20px 20px 22px; }
}

/* ===== peça 2b: o topo em qualquer proporção de tela =====
   Três composições, escolhidas pela forma da tela:
   – deitada: o braço entra pelo canto de cima e a mão fica à direita do texto. A foto é medida pela altura nas telas
     largas e pela largura nas mais quadradas, para a mão nunca chegar ao texto; o texto fica preso logo abaixo do
     cabeçalho, na altura do braço; nas telas baixas o título, os espaços e a faixa encolhem para tudo caber.
   – em pé (tablet, meia tela): o texto em cima, a mão subindo de baixo, à direita, como no celular.
   – celular: a de antes.
   --fh é a altura da foto e --tx é onde o texto começa; o resto sai dessas duas medidas.
   Conferido medindo a distância entre cada linha de texto e a silhueta da foto em 29 tamanhos de tela
   (arte/hero/medir.py). */
@media (min-width: 761px) {
  .hero { --hh: max(100svh, 680px); --fh: min(calc(var(--hh) * .86), 46vw); --tx: calc(34.8vw - var(--g) * .696); }
  .hero-fundo .hero-foto { height: var(--fh); right: calc(var(--fh) * -.39); }
  .hero h1 { font-size: clamp(40px, min(4.6vw, 7.4svh), 78px); }
  .hero-meio { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(clamp(26px, 4svh, 34px), calc(var(--fh) * .2 - 86px)) auto minmax(26px, 1fr); align-items: start; padding-top: 86px; }
  .hero-titulo { grid-row: 2; }
  /* o botão e o link ficam lado a lado só onde cabem antes do antebraço */
  .hero-acao { max-width: calc(100vw - var(--fh) * .66 - var(--tx) - 30px); }
}
@media (min-width: 761px) and (max-width: 1320px) {
  .hero-acao { column-gap: 18px; }
  .hero-link { font-size: 17px; }
}
@media (min-width: 1700px) {
  .hero-meio { grid-template-rows: minmax(34px, 1fr) auto minmax(26px, 1fr); }
}
/* telas baixas: os espaços e a faixa encolhem */
@media (min-width: 761px) and (max-height: 860px) {
  .hero-titulo p { margin-top: 20px; }
  .hero-acao { margin-top: 24px; }
  .hero-acao .botao { padding: 17px 26px; }
  .hero-titulo .hero-nota { margin-top: 12px; }
  .faixa { height: clamp(150px, 24svh, 240px); margin-top: 28px; }
}
@media (min-width: 761px) and (max-height: 740px) {
  .hero h1 { font-size: clamp(40px, min(4.6vw, 7svh), 78px); }
  .hero-titulo p { margin-top: 16px; }
  .hero-acao { margin-top: 20px; }
  .hero-titulo .hero-nota { margin-top: 10px; }
  .faixa { height: clamp(140px, 23svh, 240px); }
}
/* deitada e estreita (tablet deitado, janela pequena): o texto encosta na margem e a mão cresce */
@media (min-width: 761px) and (max-width: 1239px) and (min-aspect-ratio: 5/4) {
  .hero { --fh: min(calc(var(--hh) * .86), 50vw); --tx: var(--g); }
  .hero-meio { padding-top: 90px; }
  .hero h1 { font-size: clamp(42px, min(5.4vw, 7.2svh), 60px); }
  .hero-titulo { margin-left: 0; }
}
/* em pé */
@media (min-width: 761px) and (max-aspect-ratio: 5/4) {
  .hero { --fh: min(62vw, calc(var(--hh) * .5)); --tx: var(--g); }
  .hero h1 { font-size: clamp(48px, 7.6vw, 78px); }
  .hero-titulo { margin-left: 0; }
  .hero-titulo > p:first-of-type { max-width: 22em; font-size: clamp(20px, 2.6vw, 24px); }
  .hero-meio { grid-template-rows: minmax(26px, 60px) auto minmax(26px, 1fr); }
  .hero-acao { max-width: none; }
  .hero-fundo .hero-foto { top: auto; bottom: calc(clamp(170px, 27vh, 240px) + var(--g) - var(--fh) * .1); right: calc(var(--fh) * -.36);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 80%, transparent 100%); }
}
/* a faixa nas telas de tablet: cinco cartões, nomes menores, sem o sinal no canto (não há lugar para ele) */
@media (min-width: 761px) and (max-width: 1099px) {
  .cartao:nth-child(n+6) { display: none; }
  .cartao-info { left: calc(50% + 8px); right: 12px; top: 14px; bottom: 14px; font-size: 14px; }
  .cartao-info b { font-size: 17px; }
  .cartao-info span { font-size: 14px; }
  .cartao-tempo { left: calc(50% + 8px); right: 12px; }
}
@media (max-width: 1099px) { .cartao-info::after { display: none; } }
@media (min-width: 1100px) and (max-width: 1399px) { .cartao-info b { font-size: clamp(20px, 1.9vw, 30px); } }
/* o botão do chat espera a primeira rolagem no topo da home: ali ele cobria o último cartão da faixa */
.chat-bola { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .35s, visibility 0s; }
.chat-espera .chat-bola { opacity: 0; transform: translateY(14px) scale(.7); pointer-events: none; visibility: hidden; transition: transform .3s, opacity .25s, visibility 0s linear .3s; }
/* ===== fim da peça 2b ===== */

/* ===== a entrada do topo =====
   Até o script deixar cada coisa no seu ponto de partida, o que vai entrar fica invisível. Sem isso a página aparecia
   pronta, sumia quando os scripts chegavam e só então entrava. O cabeçalho não entra: está lá desde o primeiro
   instante, para a página nunca parecer vazia. A classe sai sozinha em 4 s se o script não vier. */
.entra .hero-foto, .entra .hero-titulo, .entra .faixa { visibility: hidden; }
.entra .hero-fundo > img { transform: scale(1.18); }