/* MH Clima Ar, "Revista de obra". Só tema claro.
   Papel, tinta, azul royal da marca e fita amarela. Cantos retos, réguas grossas, títulos condensados enormes. */

@font-face { font-family: "Anybody"; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; src: url(assets/fonts/anybody-latin.woff2) format("woff2"); }
@font-face { font-family: "Anybody"; font-style: italic; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; src: url(assets/fonts/anybody-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(assets/fonts/onest-latin.woff2) format("woff2"); }

/* abertura da persiana nas fotos (0% fechada, 12.5% aberta) */
@property --abre { syntax: "<percentage>"; inherits: false; initial-value: 12.5%; }

:root {
  --f-titulo: "Anybody", system-ui, sans-serif;
  --f-texto: "Onest", system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-persiana: cubic-bezier(0.77, 0, 0.18, 1);

  --g: clamp(16px, 4vw, 48px);
  --secao: clamp(72px, 9vw, 140px);
  --topo: 64px;
  --regua: 3px solid var(--tinta);

  --papel: #f4f5f7;
  --papel-2: #e8ebef;
  --tinta: #0e1116;
  --tinta-2: #3a414c;
  --azul-texto: #0b4fa8;
  --azul-bloco: #0b4fa8;
  --fita: #ffd23f;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--papel); color: var(--tinta); scroll-behavior: smooth; scroll-padding-top: var(--topo); -webkit-text-size-adjust: 100%; }
body { font: 400 1.0625rem/1.55 var(--f-texto); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 3px; }
::selection { background: var(--fita); color: #0e1116; }
.pular { position: fixed; top: 8px; left: 8px; z-index: 60; padding: 12px 16px; background: var(--fita); color: #0e1116; font-weight: 700; text-decoration: none; translate: 0 -160%; }
.pular:focus { translate: 0; }

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 850; text-transform: uppercase; line-height: .86; letter-spacing: .005em; text-wrap: balance; }
.titulo { font-size: clamp(3rem, 1rem + 6.2vw, 7.4rem); font-stretch: 62%; overflow: clip; padding-top: .08em; }
.titulo > span { display: block; }

/* Bloco azul de WhatsApp: o preenchimento entra pela esquerda no hover */
.bloco-whats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 18px 22px;
  background: linear-gradient(var(--tinta), var(--tinta)) 0 0 / 0% 100% no-repeat, var(--azul-bloco);
  color: #fff;
  font: 800 clamp(1.25rem, 1rem + 1vw, 1.8rem)/1 var(--f-titulo);
  font-stretch: 78%;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-size 450ms var(--ease), color 200ms ease, transform 120ms var(--ease);
}
.bloco-whats:active { transform: translateY(2px); }
.bloco-whats__num { font: 600 1rem/1 var(--f-texto); text-transform: none; }
.bloco-whats--curto { justify-content: flex-start; gap: 14px; justify-self: start; }
.bloco-whats--claro { background: linear-gradient(#0e1116, #0e1116) 0 0 / 0% 100% no-repeat, #fff; color: #08306b; }
@media (hover: hover) and (pointer: fine) {
  .bloco-whats:hover { background-size: 100% 100%, auto; }
  .bloco-whats--claro:hover { color: #fff; }
}

/* Fita adesiva */
.fita {
  position: absolute;
  z-index: 2;
  padding: 8px 14px 9px;
  background: var(--fita);
  color: #0e1116;
  font: 800 .95rem/1.1 var(--f-titulo);
  font-stretch: 72%;
  text-transform: uppercase;
  rotate: var(--r, 0deg);
  box-shadow: 0 3px 0 rgb(0 0 0 / .14);
}
.fita--branca { background: #fff; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 40; height: var(--topo); display: flex; align-items: center; gap: 10px; padding-inline: var(--g); background: var(--papel); border-bottom: var(--regua); }
.marca { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none; }
.marca img { height: 32px; width: auto; }
.marca span { font: 900 1.3rem/1 var(--f-titulo); font-stretch: 60%; text-transform: uppercase; letter-spacing: .02em; }
.topo__nav { display: none; }
.topo__menu, .menu__fechar { min-height: 44px; padding: 0 14px; border: 2px solid var(--tinta); font-weight: 700; font-size: .95rem; }
.topo__whats { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--azul-bloco); color: #fff; font-weight: 700; text-decoration: none; }
.topo__whats span { display: none; }
@media (min-width: 420px) { .topo__whats span { display: inline; } }
@media (min-width: 1040px) {
  .topo__nav { display: flex; gap: 2px; margin-right: 10px; }
  .topo__nav a { padding: 8px 12px; font-weight: 600; text-decoration: none; background: linear-gradient(var(--fita), var(--fita)) 50% 82% / 0% 40% no-repeat; transition: background-size 300ms var(--ease); }
  .topo__nav a:hover { background-size: calc(100% - 20px) 40%; }
  .topo__menu { display: none; }
}

/* Menu do celular (popover nativo) */
.menu { inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 84px var(--g) 32px; border: 0; background: var(--papel); color: var(--tinta); flex-direction: column; gap: 28px; opacity: 0; transition: opacity 200ms var(--ease), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.menu:popover-open { display: flex; opacity: 1; }
@starting-style { .menu:popover-open { opacity: 0; } }
.menu nav { display: grid; border-top: var(--regua); }
.menu nav a { padding: 10px 0; border-bottom: 1px solid var(--tinta); font: 850 clamp(2.4rem, 12vw, 3.6rem)/1 var(--f-titulo); font-stretch: 62%; text-transform: uppercase; text-decoration: none; transition: opacity 320ms var(--ease), translate 420ms var(--ease); transition-delay: calc(var(--i) * 40ms + 40ms); }
@starting-style { .menu:popover-open nav a { opacity: 0; translate: -24px 0; } }
.menu__fechar { position: absolute; top: 10px; right: var(--g); }

/* Herói */
/* overflow-x: a fita entra 30% maior; sem o corte, o Chrome do celular alarga a página */
.heroi { display: grid; overflow-x: clip; border-bottom: var(--regua); }
.heroi__texto { display: grid; align-content: end; gap: 22px; padding: 28px var(--g) 32px; }
.heroi__titulo { font-size: clamp(3rem, 1rem + 7.6vw, 8.6rem); font-stretch: 64%; }
.heroi__titulo .p { display: inline-block; overflow: clip; padding: .1em 0 .12em; margin: -.1em 0 -.12em; vertical-align: top; }
.heroi__titulo .p > span { display: inline-block; }
.heroi__titulo .azul { color: var(--azul-texto); }
.heroi__lista { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; list-style: none; font: 750 1.05rem/1.3 var(--f-titulo); font-stretch: 75%; text-transform: uppercase; }
.heroi__lista li + li::before { content: "/"; margin-right: 14px; color: var(--azul-texto); }
.heroi__foto { position: relative; min-height: 62vh; background: var(--azul-bloco); }
.heroi__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.heroi__foto .fita { left: 14px; bottom: 20px; }
.heroi__foto .fita--branca { left: auto; right: 14px; bottom: auto; top: 16px; }
@media (min-width: 900px) {
  .heroi { grid-template-columns: 1.25fr 1fr; min-height: calc(100dvh - var(--topo)); }
  .heroi__texto { padding-block: 40px 44px; }
  .heroi__foto { min-height: 0; border-left: var(--regua); }
  .heroi__foto .fita:not(.fita--branca) { left: -30px; bottom: 64px; }
}

/* Faixa azul: duas linhas em movimento contínuo e lento, em sentidos opostos (como as fitas do site da MAO) */
.faixa { overflow: clip; padding: 18px 0; background: var(--azul-bloco); color: #fff; border-bottom: var(--regua); }
.faixa__linha { display: flex; width: max-content; font: 850 clamp(2.8rem, 1.6rem + 6vw, 7.6rem)/.92 var(--f-titulo); font-stretch: 62%; text-transform: uppercase; white-space: nowrap; }
.faixa__linha span::after { content: "/"; margin-inline: .35em; color: var(--fita); }

/* Seções */
.secao { padding: var(--secao) var(--g); }
.cabeca { display: grid; gap: 14px; padding-top: 14px; border-top: var(--regua); margin-bottom: clamp(28px, 4vw, 56px); }
.cabeca__sub { max-width: 46ch; font-size: 1.15rem; color: var(--tinta-2); }

/* Serviços: grade de revista com régua entre as colunas */
.servicos__grade { display: grid; counter-reset: servico; }
.servico { position: relative; display: grid; align-content: start; gap: 12px; padding: 22px 0 30px; border-top: 1px solid var(--tinta); counter-increment: servico; }
.servico:first-child { border-top: 0; padding-top: 0; }
/* Número de revista (01, 02…); o "/ ''" tira o número do leitor de tela */
.servico::before { content: counter(servico, decimal-leading-zero); content: counter(servico, decimal-leading-zero) / ""; font: 900 2.6rem/.8 var(--f-titulo); font-stretch: 62%; font-variant-numeric: tabular-nums; color: var(--azul-texto); }
/* No celular a régua sai do número e vai até a margem */
@media (max-width: 719px) {
  .servico { --pt: 30px; padding-top: var(--pt); border-top: 0; }
  .servico:first-child { --pt: 0px; }
  .servico::after { content: ""; position: absolute; left: 3.2rem; right: 0; top: calc(var(--pt) + .95rem); height: 2px; background: var(--tinta); transform-origin: left; }
}
.servico h3 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); font-stretch: 66%; }
.servico h3 span { background: linear-gradient(var(--fita), var(--fita)) 0 88% / 0% 34% no-repeat; transition: background-size 400ms var(--ease); }
.servico p { max-width: 42ch; color: var(--tinta-2); }
/* Rótulo em linha própria logo abaixo do texto: padding dá 44 px de toque, a margem negativa devolve o espaço */
.servico__link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding-block: 13px; margin-block: -13px; font: 800 1.05rem/1.1 var(--f-titulo); font-stretch: 72%; letter-spacing: .03em; text-transform: uppercase; color: var(--azul-texto); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; -webkit-tap-highlight-color: transparent; }
.servico__link .i { width: 18px; height: 18px; transition: translate 300ms var(--ease); }
/* Com mouse, o nome pinta ao passar no "Pedir orçamento"; no toque, pinta quando o bloco entra na tela */
@media (hover: hover) and (pointer: fine) {
  .servico:has(.servico__link:hover) h3 span { background-size: 100% 34%; }
  .servico__link:hover .i { translate: 5px 0; }
}
@media (hover: none) {
  .servico.is-in h3 span { background-size: 100% 34%; transition-duration: 700ms; transition-delay: 550ms; }
  /* ao tocar, o link ganha a mesma marca amarela do título */
  .servico__link:active { background: linear-gradient(var(--fita), var(--fita)) 0 80% / 100% 45% no-repeat; }
}
/* Em colunas, o link fica na base do bloco e alinha com os vizinhos da mesma linha */
@media (min-width: 720px) {
  .servico { grid-template-rows: auto auto 1fr auto; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .servicos__grade { grid-template-columns: 1fr 1fr; }
  .servico { padding: 24px 22px 32px 0; border-top: 1px solid var(--tinta); }
  .servico--grande { grid-column: 1 / -1; padding: 0 0 32px; border-top: 0; }
  .servico:nth-child(odd):not(.servico--grande) { padding: 24px 0 32px 22px; border-left: 1px solid var(--tinta); }
  .servico--grande h3 { font-size: clamp(2.6rem, 1rem + 4vw, 4.4rem); }
}
/* 3 colunas: Instalação (2) + PMOC / 3 serviços / Remoção + Venda (2) */
@media (min-width: 1100px) {
  .servicos__grade { grid-template-columns: repeat(3, 1fr); }
  .servico { padding: 30px 24px 34px; border-top: var(--regua); border-left: 1px solid var(--tinta); }
  .servico:nth-child(-n+2) { padding-top: 0; border-top: 0; }
  .servico:nth-child(1), .servico:nth-child(3), .servico:nth-child(6) { padding-left: 0; border-left: 0; }
  .servico:nth-child(2), .servico:nth-child(5), .servico:nth-child(7) { padding-right: 0; }
  .servico--grande, .servico--largo { grid-column: span 2; }
  .servico--grande h3 { font-size: clamp(3rem, 1rem + 3vw, 4.6rem); }
  .servico--grande p, .servico--largo p { max-width: 58ch; }
}

/* Limpeza: foto grande fixa ao lado, lupa para ver a sujeira */
.limpeza { display: grid; padding: 0; border-top: var(--regua); }
.limpeza__foto { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--papel-2); cursor: zoom-in; }
.limpeza__foto img { width: 100%; height: 100%; object-fit: cover; }
.limpeza__foto .fita { left: 14px; top: 16px; }
.lupa { position: absolute; left: 0; top: 0; z-index: 3; width: 210px; height: 210px; border: 4px solid #fff; border-radius: 50%; background-repeat: no-repeat; box-shadow: 0 16px 40px -10px rgb(0 0 0 / .5); pointer-events: none; opacity: 0; scale: .7; transition: opacity 200ms var(--ease), scale 300ms var(--ease); }
.lupa.is-on { opacity: 1; scale: 1; }
.limpeza__texto { display: grid; align-content: start; gap: 20px; padding: 32px var(--g) var(--secao); }
.limpeza__texto .titulo { font-size: clamp(2.8rem, 1rem + 5vw, 6rem); }
.limpeza__texto > p:not([class]) { max-width: 44ch; color: var(--tinta-2); font-size: 1.1rem; }
/* Antes e depois: cópia velha (amarelada, desbotada, riscada e vincada) ao lado da cópia nova, com brilho */
.limpeza__extras { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.limpeza__extras figure { position: relative; padding: 8px 8px 12px; background: #fff; box-shadow: 0 18px 30px -18px rgb(0 0 0 / .45); }
.limpeza__extras img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.limpeza__extras .fita { top: -14px; left: 10px; }
.limpeza__extras figure::after, .brilhos { content: ""; position: absolute; inset: 8px 8px 12px; pointer-events: none; transition: opacity 600ms var(--ease) 500ms; }
.js .limpeza__extras figure:not(:has(img.is-in))::after, .js .depois:not(:has(img.is-in)) .brilhos { opacity: 0; transition: none; }
.antes { rotate: -1.8deg; }
.limpeza__extras .antes { background: #e4d9bb; }
.antes img { filter: sepia(.65) saturate(.7) contrast(1.12) brightness(.88); }
.antes::after {
  background:
    linear-gradient(116deg, transparent 0 44%, rgb(0 0 0 / .22) 44.6%, rgb(255 255 255 / .55) 45.2%, transparent 46.4%),
    linear-gradient(92deg, transparent 0 23%, rgb(255 255 255 / .45) 23.2%, transparent 23.6%),
    linear-gradient(87deg, transparent 0 71%, rgb(255 255 255 / .3) 71.15%, transparent 71.5%),
    radial-gradient(circle at 78% 16%, rgb(255 255 255 / .7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 74%, rgb(255 255 255 / .6) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 88%, rgb(0 0 0 / .4) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 45%, transparent 46%, rgb(58 38 12 / .6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .05 0 0 0 .7 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.depois { rotate: 1.4deg; }
.depois img { filter: saturate(1.12) contrast(1.05) brightness(1.06); }
.depois::after { background: linear-gradient(110deg, transparent 40%, rgb(255 255 255 / .2) 44%, rgb(255 255 255 / .75) 48%, rgb(255 255 255 / .2) 52%, transparent 56%) 160% 0 / 260% 100% no-repeat; }
.brilhos { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgb(255 255 255 / .85)); }
.brilhos i { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * (12px + 6%)); aspect-ratio: 1; translate: -50% -50%; scale: .85; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.limpeza__registros { margin-top: 12px; max-width: 44ch; font-weight: 600; }
@media (min-width: 900px) {
  .limpeza { grid-template-columns: 1.1fr 1fr; }
  .limpeza__foto { position: sticky; top: var(--topo); height: calc(100dvh - var(--topo)); aspect-ratio: auto; border-right: var(--regua); }
  .limpeza__texto { padding: var(--secao) var(--g) var(--secao) clamp(28px, 4vw, 64px); }
}

/* Fotos: cópias impressas num trilho que corre de lado */
.fotos { background: var(--papel-2); border-top: var(--regua); padding: var(--secao) 0 calc(var(--secao) * .7); }
.fotos .cabeca { margin-inline: var(--g); }
.fotos__trilho { display: flex; align-items: flex-end; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 24px var(--g) 28px; scrollbar-width: thin; }
/* Setas só com mouse: a roda desce a página e as fotos passam de lado (setas, trackpad ou Shift + roda) */
.fotos__setas { display: none; gap: 8px; }
.fotos__setas button { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--tinta); transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 120ms var(--ease); }
.fotos__setas button:active { transform: translateY(1px); }
.fotos__setas button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .js .fotos .cabeca { grid-template-columns: 1fr auto; }
  .js .fotos .cabeca > * { grid-column: 1; }
  .js .fotos .fotos__setas { display: flex; grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .fotos__setas button:not(:disabled):hover { background: var(--tinta); color: var(--papel); }
}
.foto { position: relative; flex: none; display: grid; gap: 10px; padding: 10px 10px 14px; background: #fff; color: #0e1116; box-shadow: 0 18px 30px -18px rgb(0 0 0 / .45); rotate: var(--r); scroll-snap-align: center; --h: 50vh; }
.foto button { display: block; height: var(--h); overflow: hidden; cursor: zoom-in; }
.foto img { height: 100%; width: auto; aspect-ratio: 3 / 4.6; object-fit: cover; transition: scale 900ms var(--ease); }
.foto--deitada { --h: 32vh; }
.foto--deitada img { aspect-ratio: 4 / 3; }
@media (hover: hover) and (pointer: fine) { .foto button:hover img { scale: 1.05; } }

/* Quem é */
.quem { display: grid; gap: 40px; border-top: var(--regua); align-items: start; }
/* Foto impressa, como as da galeria, presa por um pedaço de fita */
.quem__foto { position: relative; justify-self: center; width: min(100%, 460px); padding: 12px 12px 16px; background: #fff; box-shadow: 0 22px 34px -20px rgb(0 0 0 / .45); rotate: -1.5deg; }
.quem__foto::before { content: ""; position: absolute; z-index: 2; top: -14px; left: 50%; width: 120px; height: 30px; translate: -50% 0; rotate: 4deg; background: rgb(255 210 63 / .92); box-shadow: 0 3px 0 rgb(0 0 0 / .14); }
.quem__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.quem__texto { display: grid; gap: 22px; }
.quem__texto .titulo { font-size: clamp(2.8rem, 1rem + 5vw, 6rem); }
.quem__texto > p { max-width: 46ch; font-size: 1.1rem; color: var(--tinta-2); }
.quem__frase { display: grid; gap: 10px; }
.quem__frase h3 { font-size: 1.05rem; font-stretch: 75%; letter-spacing: .04em; color: var(--azul-texto); }
.quem__frase p { font: italic 750 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.16 var(--f-titulo); font-stretch: 88%; max-width: 32ch; }
.ficha { border-top: var(--regua); }
.ficha div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tinta); }
.ficha dt { font: 800 .95rem/1.4 var(--f-titulo); font-stretch: 70%; text-transform: uppercase; letter-spacing: .03em; }
/* padding no link em linha: área de toque de 45 px sem mudar a altura da linha */
.ficha a { font-weight: 700; padding-block: 12px; }
@media (min-width: 900px) {
  .quem { grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 100px); }
  .quem__foto { position: sticky; top: calc(var(--topo) + 32px); }
}

/* Condições: o bloco amarelo da página */
.condicoes { padding: var(--secao) var(--g); background: var(--fita); color: #0e1116; border-block: 3px solid #0e1116; }
.condicoes__grade { display: grid; gap: 32px; }
.condicoes__oito { font-stretch: 64%; }
.condicoes__ate, .condicoes__sem { display: block; font-size: clamp(2.4rem, 1rem + 4.4vw, 5.4rem); }
.condicoes__num { display: block; font-size: clamp(10rem, 4rem + 26vw, 24rem); line-height: .76; font-weight: 900; font-stretch: 92%; letter-spacing: -.03em; color: #0b4fa8; }
.condicoes__lista { display: grid; padding: 0; list-style: none; border-top: 3px solid #0e1116; align-self: end; }
.condicoes__lista li { padding: 14px 0; border-bottom: 1px solid #0e1116; font: 800 clamp(1.4rem, 1rem + 1.3vw, 2.2rem)/1.1 var(--f-titulo); font-stretch: 68%; text-transform: uppercase; }
.condicoes__nota { font-size: .95rem; font-weight: 500; }
@media (min-width: 900px) { .condicoes__grade { grid-template-columns: 1.2fr 1fr; column-gap: clamp(40px, 6vw, 100px); } .condicoes__nota { grid-column: 2; } }

/* Contato: bloco azul */
.contato { padding: var(--secao) var(--g); background: var(--azul-bloco); color: #fff; }
.contato .titulo { max-width: 14ch; font-size: clamp(3rem, 1rem + 6.6vw, 8rem); }
.contato__grade { display: grid; gap: 32px; margin-top: 36px; padding-top: 22px; border-top: 3px solid #fff; }
.contato__texto { display: grid; gap: 14px; align-content: start; }
.contato__texto p { max-width: 38ch; font-size: 1.2rem; color: #dbe7f7; }
.contato__texto .contato__horario { color: #fff; font-weight: 700; }
.contato__acoes { display: grid; gap: 14px; justify-items: start; }
.contato__tel, .contato__insta { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 800 clamp(1.6rem, 1rem + 2vw, 2.6rem)/1 var(--f-titulo); font-stretch: 70%; text-decoration: none; }
.contato__insta { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); }
.contato__tel:hover, .contato__insta:hover { text-decoration: underline; text-underline-offset: 6px; }
.contato :focus-visible { outline-color: #fff; }
@media (min-width: 900px) { .contato__grade { grid-template-columns: 1fr 1fr; } }

/* Rodapé branco: a logo colorida fica no fundo dela, como no cartão da MH */
.rodape { display: grid; gap: 18px; padding: 40px var(--g) 28px; background: #fff; color: var(--tinta-2); border-top: var(--regua); }
.rodape img { width: 220px; }
.rodape__info { display: grid; gap: 4px; font-size: .95rem; }
.rodape__info p:first-child { color: var(--tinta); font-weight: 600; }
.rodape__mao { padding-top: 18px; border-top: 1px solid var(--tinta); font-size: .875rem; }
.rodape__mao a { padding-block: 13px; color: var(--tinta); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 720px) {
  .rodape { grid-template-columns: auto 1fr; align-items: center; column-gap: 40px; }
  .rodape__mao { grid-column: 1 / -1; }
}

/* Página 404 */
.erro { display: grid; justify-items: start; align-content: center; gap: 22px; min-height: calc(100dvh - var(--topo) - 200px); padding: var(--secao) var(--g); }
.erro__num { font: 900 clamp(7rem, 4rem + 18vw, 16rem)/.8 var(--f-titulo); font-stretch: 62%; color: var(--azul-texto); }
.erro .fita { position: static; }
.erro__texto { max-width: 46ch; font-size: 1.15rem; color: var(--tinta-2); }
.erro__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }
.erro__whats { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--azul-texto); text-underline-offset: 5px; }

/* Visor de fotos */
/* margin: auto centraliza (o reset * { margin: 0 } tirava a do navegador); a foto encolhe para a legenda e a barra caberem sempre */
html:has(.visor[open]) { overflow: hidden; }
.visor { width: min(100% - 24px, 640px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: var(--regua); background: var(--papel); color: var(--tinta); overflow: hidden; opacity: 0; transition: opacity 200ms var(--ease), translate 260ms var(--ease), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.visor[open] { display: flex; flex-direction: column; opacity: 1; }
@starting-style { .visor[open] { opacity: 0; } }
.visor::backdrop { background: rgb(8 10 14 / .85); opacity: 0; transition: opacity 200ms var(--ease), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.visor[open]::backdrop { opacity: 1; }
@starting-style { .visor[open]::backdrop { opacity: 0; } }
.visor figure { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.visor img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #0e1116; touch-action: pan-y pinch-zoom; }
.visor__barra { display: flex; align-items: center; gap: 8px; padding: 12px; }
.visor__barra button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 2px solid var(--tinta); font-weight: 700; transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--ease); }
.visor__barra button:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .visor__barra button:hover { background: var(--tinta); color: var(--papel); } }
.visor__conta { padding-inline: 6px; white-space: nowrap; font: 800 1.05rem/1 var(--f-titulo); font-stretch: 72%; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.visor__fechar { margin-left: auto; }

/* Movimento. Sem JS, tudo aparece; com menos movimento, só opacidade */
.js [data-revela] { transition: opacity 700ms var(--ease), translate 900ms var(--ease); }
.js [data-revela]:not(.is-in) { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-revela]:not(.is-in) { translate: 0 26px; }
  .js .titulo[data-revela]:not(.is-in) { opacity: 1; translate: 0; }
  .js .titulo > span { transition: translate 900ms var(--ease); }
  .js .titulo:not(.is-in) > span { translate: 0 105%; }

  /* herói: palavras sobem de trás da linha, fitas entram girando e assentam */
  .heroi__titulo .p > span { animation: sobe 900ms var(--ease) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
  .heroi__foto .fita { animation: cola 520ms var(--ease) both; animation-delay: calc(var(--i) * 150ms + 1100ms); }
  .heroi__lista { animation: aparece 700ms var(--ease) both 700ms; }
  @keyframes sobe { from { translate: 0 108%; } }
  @keyframes cola { from { opacity: 0; scale: 1.3; rotate: calc(var(--r, 0deg) * -2); } }
  @keyframes aparece { from { opacity: 0; translate: 0 14px; } }

  /* serviços no celular: o número sobe, a régua corre até a margem, o nome pinta e a seta cutuca duas vezes */
  @media (max-width: 719px) {
    .js .servico::before { transition: opacity 600ms var(--ease) 120ms, translate 700ms var(--ease) 120ms; }
    .js .servico:not(.is-in)::before { opacity: 0; translate: 0 60%; }
    .js .servico::after { transition: scale 900ms var(--ease) 220ms; }
    .js .servico:not(.is-in)::after { scale: 0 1; }
  }
  @media (hover: none) {
    .js .servico.is-in .servico__link .i { animation: cutuca 700ms var(--ease) 1300ms 2; }
    @keyframes cutuca { 50% { translate: 5px 0; } }
  }

  /* foto do Mateus: a fita cola depois que a foto aparece */
  .js .quem__foto::before { transition: opacity 300ms var(--ease) 700ms, scale 520ms var(--ease) 700ms, rotate 520ms var(--ease) 700ms; }
  .js .quem__foto:not(.is-in)::before { opacity: 0; scale: 1.3; rotate: -8deg; }

  /* depois: as estrelas piscam em tempos diferentes e um reflexo passa pela foto de tempos em tempos */
  .js .depois:has(img.is-in)::after { animation: reflexo 7s var(--ease-persiana) 1.2s infinite; }
  @keyframes reflexo { 0% { background-position: 160% 0; } 26%, 100% { background-position: -60% 0; } }
  .js .depois .brilhos i { animation: cintila 2.6s ease-in-out var(--d) infinite both; }
  @keyframes cintila { 0%, 100% { scale: .2; opacity: 0; rotate: 0deg; } 50% { scale: 1; opacity: 1; rotate: 45deg; } }

  /* visor: sobe 12 px ao abrir e desce ao fechar */
  .visor:not([open]) { translate: 0 12px; }
  @starting-style { .visor[open] { translate: 0 12px; } }

  /* persiana: as fotos abrem em faixas horizontais */
  .js .persiana:not(.aberta) {
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 var(--abre), transparent var(--abre) 12.5%);
    mask-image: repeating-linear-gradient(to bottom, #000 0 var(--abre), transparent var(--abre) 12.5%);
    transition: --abre 1100ms var(--ease-persiana);
  }
  .js .persiana:not(.is-in) { --abre: 0%; }

  /* faixa: cada linha tem os serviços duas vezes, então andar -50% fecha o laço sem emenda; pausa sob o mouse */
  .faixa__linha { animation: correr 70s linear infinite; }
  .faixa__linha--volta { animation-direction: reverse; animation-duration: 60s; }
  .faixa:hover .faixa__linha { animation-play-state: paused; }
  @keyframes correr { to { transform: translateX(-50%); } }

  @supports (animation-timeline: view()) {
    .heroi__foto img { animation: deriva linear both; animation-timeline: view(); animation-range: exit; }
    @keyframes deriva { to { translate: 0 8%; scale: 1.06; } }

    .condicoes__num { transform-origin: 0 85%; animation: cresce linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes cresce { from { scale: .5; rotate: -6deg; } }
  }
}

@media (prefers-reduced-motion: reduce) { html, .fotos__trilho { scroll-behavior: auto; } }