/* Modelo KRIA — sapataria · "Um motivo só: a sola" (estilo autoral taste, movimento cinematográfico)
   Escrito para 360 px e ampliado em 560, 900 e 1100 px. Uma forma só, tirada do ofício, faz a página: a sola do
   sapato. Ela é o par gigante do início (o pé direito com a foto, o esquerdo chapado em couro), a moldura das fotos,
   o marcador de cada conserto, o topo da faixa final e a numeração do rodapé. Fundo preto de borracha, tinta de linha
   crua; o couro caramelo é a cor do botão e da forma; couro natural, linha amarela e camurça nos blocos dos títulos.
   Uma família só, Hanken Grotesk, em 400 e 500. Cantos retos.
   O recurso vivo é o tíquete do orçamento: o canhoto se preenche com o conserto, o preço e o prazo da tabela.
   As cores mudam pelo "cores" do site.json. */

/* Fonte servida pelo próprio site (Hanken Grotesk variável 400 a 600, subconjunto latino do Google Fonts, licença SIL OFL) */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/hanken-grotesk.woff2') format('woff2'); }

:root {
  --c-fundo: #0E0C0A;          /* a borracha da sola */
  --c-superficie: #1A1714;
  --c-superficie-2: #24201C;
  --c-tinta: #F0EEEB;          /* linha crua */
  --c-suave: #A69D92;          /* 7:1 no fundo, 6,5:1 na superfície */
  --c-destaque: #D99B50;       /* couro caramelo: o botão e a forma */
  --c-destaque-tinta: #0E0C0A;
  --c-campo-1: #E8C8A0;        /* couro natural */
  --c-campo-2: #EFD36B;        /* a linha amarela, a cola */
  --c-campo-3: #CDBDA9;        /* camurça */
  --c-campo-tinta: #0E0C0A;

  --f: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* cinco tamanhos: o pequeno, o do texto, o de destaque, o das seções e o do início */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.125rem, 0.95rem + 4.6vw, 5.5rem);

  --topo: 64px;
  --margem: clamp(16px, 2.2vw, 32px);
  --secao: clamp(96px, 12vw, 200px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* a sola: pé direito (100 × 260), pé esquerdo e deitada (bico à direita). Estica para qualquer caixa. */
  --sola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 260' preserveAspectRatio='none'%3E%3Cpath d='M42 0C70 0 93 18 98 62C100 78 99 96 95 117C90 143 88 172 89 198C90 234 80 260 62 260C44 260 33 239 33 208C33 187 40 172 40 151C40 130 10 114 3 86C0.5 68 0 36 10 18C18 5 30 0 42 0Z'/%3E%3C/svg%3E");
  --sola-esquerda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 260' preserveAspectRatio='none'%3E%3Cpath d='M58 0C30 0 7 18 2 62C0 78 1 96 5 117C10 143 12 172 11 198C10 234 20 260 38 260C56 260 67 239 67 208C67 187 60 172 60 151C60 130 90 114 97 86C99.5 68 100 36 90 18C82 5 70 0 58 0Z'/%3E%3C/svg%3E");
  --sola-deitada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 100' preserveAspectRatio='none'%3E%3Cpath d='M260 42C260 70 242 93 198 98C182 100 164 99 143 95C117 90 88 88 62 89C26 90 0 80 0 62C0 44 21 33 52 33C73 33 88 40 109 40C130 40 146 10 174 3C192 0.5 224 0 242 10C255 18 260 30 260 42Z'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 16px);
  /* o WhatsApp flutuante não cobre o item que recebe o foco perto da borda de baixo */
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  accent-color: var(--c-destaque);
  caret-color: var(--c-tinta);
  scrollbar-color: var(--c-suave) var(--c-fundo);
  background: var(--c-fundo);
}
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-tinta);
  font: 400 var(--step-body)/1.45 var(--f);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
a, button, summary, label, select, input { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 500; color: inherit; }
p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
strong { font-weight: 500; }
::selection { background: var(--c-destaque); color: var(--c-destaque-tinta); }

/* Foco em anel duplo: linha crua com uma volta preta, visível no fundo, nas fotos e nos campos de cor */
:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); } /* taste-skill-ignore: o anel duplo do foco é regra da casa */
[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* taste-skill-ignore */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: texto só para o leitor de tela */
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; background: var(--c-tinta); color: var(--c-fundo); font-weight: 500;
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* a forma: a sola como máscara (em pé, espelhada ou deitada) */
.forma-sola { -webkit-mask: var(--sola) center / 100% 100% no-repeat; mask: var(--sola) center / 100% 100% no-repeat; }
.forma-deitada { -webkit-mask: var(--sola-deitada) center / 100% 100% no-repeat; mask: var(--sola-deitada) center / 100% 100% no-repeat; }

/* fotos: um tratamento só, o calor da oficina */
.foto { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.04); }

/* botões: cheios em couro caramelo, cantos retos */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 0;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  font: 500 var(--step-body)/1.2 var(--f); letter-spacing: -0.01em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.98); }
.btn--pequeno { min-height: 44px; padding: 0 16px; font-size: var(--step-small); }
.btn--tinta { background: var(--c-campo-tinta); color: var(--c-tinta); }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 200ms ease;
}

/* títulos das seções: num bloco chapado de cor (couro natural, linha amarela, camurça), como a etiqueta do conserto */
.titulo { font: 500 var(--step-head)/0.95 var(--f); letter-spacing: -0.05em; text-wrap: balance; }
.bloco { justify-self: start; padding: 0.12em 0.22em 0.16em; color: var(--c-campo-tinta); }
.bloco--1 { background: var(--c-campo-1); }
.bloco--2 { background: var(--c-campo-2); }
.bloco--3 { background: var(--c-campo-3); }
.cabeca { display: grid; gap: 20px; }
.cabeca__texto { max-width: 40ch; font-size: var(--step-lead); line-height: 1.3; text-wrap: pretty; }

.secao { padding: var(--secao) var(--margem); }

/* ---------- faixa do modelo de demonstração ---------- */
body:has(> .faixa-demo) { --faixa: 52px; }
.faixa-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  padding: 4px var(--margem);
  background: var(--c-campo-1); color: var(--c-campo-tinta);
  font-size: var(--step-small); line-height: 1.4;
}
.faixa-demo span { padding-block: 8px; }
.faixa-demo a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; text-underline-offset: 4px; }

/* ---------- topo: uma barra simples ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--c-fundo); }
.topo__barra { display: flex; align-items: center; gap: 8px; height: var(--topo); padding-inline: var(--margem); }
.marca { display: flex; align-items: center; min-height: 44px; min-width: 0; margin-right: auto; text-decoration: none; }
.marca img { height: 36px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.marca__nome { font: 500 var(--step-body)/1 var(--f); letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; }
.topo__cta { flex: none; }
.menu-btn {
  flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; margin-right: -10px;
  border: 0; background: none; cursor: pointer;
  font-size: var(--step-body); font-weight: 500; line-height: 1;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.menu-btn__fechar, .menu-btn[aria-expanded="true"] .menu-btn__abrir { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__fechar { display: inline; }

/* Sem JavaScript: os links viram uma linha logo abaixo do nome, num topo que não flutua */
html:not(.js) .topo { position: relative; }
html:not(.js) .topo__barra { flex-wrap: wrap; height: auto; padding-block: 8px; }
html:not(.js) .menu { order: 3; width: 100%; }
html:not(.js) .menu ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
html:not(.js) .menu a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
html:not(.js) .menu-btn, html:not(.js) .menu__acoes { display: none; }

/* Com JavaScript, até 1099 px: menu de tela cheia, links grandes */
@media (max-width: 1099px) {
  .js .menu {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column;
    padding: calc(var(--topo-fim, var(--topo)) + 16px) var(--margem) calc(24px + env(safe-area-inset-bottom));
    background: var(--c-fundo);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity 260ms var(--ease-out), visibility 0s 260ms;
  }
  .js.menu-aberto .menu { visibility: visible; opacity: 1; transition: opacity 260ms var(--ease-out); }
  .js .menu li a { display: flex; align-items: center; min-height: 64px; font: 500 var(--step-head)/1 var(--f); letter-spacing: -0.05em; }
  .js .menu li, .js .menu__acoes { opacity: 0; transform: translateY(14px); transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out); }
  .js.menu-aberto .menu li, .js.menu-aberto .menu__acoes { opacity: 1; transform: none; }
  .js.menu-aberto .menu li:nth-child(2) { transition-delay: 40ms; }
  .js.menu-aberto .menu li:nth-child(3) { transition-delay: 80ms; }
  .js.menu-aberto .menu li:nth-child(4) { transition-delay: 120ms; }
  .js.menu-aberto .menu li:nth-child(5) { transition-delay: 160ms; }
  .js.menu-aberto .menu__acoes { transition-delay: 200ms; }
  .menu__acoes { margin-top: auto; padding-top: 40px; }
  .menu__acoes .btn { width: 100%; }
  .js .marca, .js .topo__cta, .js .menu-btn { position: relative; z-index: 46; }
  .menu-aberto, .menu-aberto body { overflow: hidden; }
  .menu-aberto .flutuante { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* ---------- início: o título e o WhatsApp; o par de solas gigante, cortado pela tela ---------- */
.inicio {
  position: relative; display: flex; flex-direction: column;
  min-height: calc(100svh - var(--topo) - var(--faixa, 0px));
  overflow: clip;
}
.inicio__texto { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: start; padding: 28px var(--margem) 0; }
.inicio__titulo { max-width: 11em; font: 500 var(--step-display)/0.92 var(--f); letter-spacing: -0.05em; text-wrap: balance; }
.inicio__sub { max-width: 36ch; text-wrap: pretty; }
.inicio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.inicio__hoje { color: var(--c-suave); font-size: var(--step-small); }
.inicio__hoje:empty { display: none; }
.inicio__hoje.e-aberto { color: var(--c-tinta); }

/* o par: as solas mais altas que a caixa, cortadas embaixo (e, no computador, pela borda direita) */
.par { position: relative; flex: 1 0 auto; min-height: clamp(230px, 66vw, 460px); margin-top: 28px; }
.sola { position: absolute; top: 0; aspect-ratio: 100 / 260; }
.sola--foto {
  left: 7%; width: 46%;
  background: var(--c-superficie);
  -webkit-mask: var(--sola-esquerda) center / 100% 100% no-repeat; mask: var(--sola-esquerda) center / 100% 100% no-repeat;
  rotate: -8deg;
}
.sola--chapada {
  left: 58%; width: 42%; top: 8%;
  background: var(--c-destaque);
  -webkit-mask: var(--sola) center / 100% 100% no-repeat; mask: var(--sola) center / 100% 100% no-repeat;
  rotate: 8deg;
}
.sola--sem-foto { background: var(--c-campo-1); }
.sola .foto { position: absolute; inset: 0; }

/* ---------- Quanto custa ---------- */
.atalhos {
  position: sticky; top: var(--topo); z-index: 5;
  margin: 40px calc(-1 * var(--margem)) 0; padding-inline: var(--margem);
  background: var(--c-fundo);
  overflow-x: auto; scrollbar-width: none;
}
.atalhos::-webkit-scrollbar { display: none; }
.atalhos ul { display: flex; gap: 0 22px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.atalhos a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 48px; font-weight: 500; text-decoration: none; }
html:not(.js) .atalhos { position: static; }

.precos__corpo { margin-top: 24px; }
.categoria { padding-top: 56px; scroll-margin-top: calc(var(--topo) + 56px); }
.categoria__foto { position: relative; aspect-ratio: 260 / 100; margin-bottom: 28px; overflow: hidden; background: var(--c-superficie); }
.categoria__foto .foto { position: absolute; inset: 0; }
.categoria__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.categoria__nome { font: 500 var(--step-head)/1 var(--f); letter-spacing: -0.05em; }
.categoria__n { flex: none; color: var(--c-suave); }
.categoria__itens { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

/* cada conserto: o marcador (uma sola na altura do texto), o nome, o preço, o texto e o prazo */
.conserto {
  display: grid; grid-template-columns: 0.75em minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: baseline;
  padding-block: 12px; color: inherit; text-decoration: none;
  transition: color 240ms ease;
}
.conserto__marca {
  grid-row: 1; align-self: center; width: 0.62em; height: 1.6em;
  background: var(--c-destaque);
  -webkit-mask: var(--sola) center / 100% 100% no-repeat; mask: var(--sola) center / 100% 100% no-repeat;
  transition: transform 240ms var(--ease-out);
}
.conserto__nome { font-weight: 500; }
.conserto__preco { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.conserto__texto { grid-column: 2 / -1; max-width: 40ch; color: var(--c-suave); line-height: 1.4; }
.conserto__prazo { color: var(--c-destaque); font-weight: 500; white-space: nowrap; }
/* a foto grande do computador (só a partir de 1100 px) */
.vitrine { display: none; }

/* ---------- Tem conserto? o tíquete de balcão ---------- */
/* os furos do picote passam um pouco da borda do tíquete: a seção corta o que sobra para o lado */
.orcamento { padding-inline: max(12px, calc(var(--margem) - 4px)); overflow-x: clip; }
.tiquete {
  --furo: 28px;
  display: grid;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
}
.tiquete__canhoto { display: grid; gap: 22px; align-content: start; padding: 28px 22px 30px; }
.tiquete__titulo { font: 500 var(--step-head)/0.95 var(--f); letter-spacing: -0.05em; }
.tiquete__resumo { display: grid; gap: 10px; }
.tiquete__resumo div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: baseline; gap: 12px; }
.tiquete__resumo dt { font-size: var(--step-small); font-weight: 500; }
.tiquete__resumo dd { font-size: var(--step-lead); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.tiquete__texto { max-width: 34ch; }
.tiquete__campos {
  position: relative; display: grid; gap: 10px; align-content: start;
  padding: 30px 22px 24px;
  border-top: 5px dotted var(--c-fundo);
}
/* os dois furos do picote, recortados na cor do fundo, nas pontas da linha de furinhos */
.tiquete__campos::before, .tiquete__campos::after {
  content: ''; position: absolute; top: -2.5px; width: var(--furo); height: var(--furo); border-radius: 50%;
  background: var(--c-fundo); translate: 0 -50%;
}
.tiquete__campos::before { left: calc(var(--furo) / -2); }
.tiquete__campos::after { right: calc(var(--furo) / -2); }
.campo { display: grid; gap: 6px; }
.campo__rotulo { font-size: var(--step-small); font-weight: 500; }
.campo select, .campo input {
  width: 100%; min-height: 52px; padding: 0 14px;
  border: 0; border-radius: 0;
  background: color-mix(in srgb, var(--c-destaque) 52%, #FFFFFF); color: var(--c-destaque-tinta);
  font-size: max(16px, var(--step-body));
}
.campo select {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E0C0A' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 22px;
}
.campo input::placeholder { color: color-mix(in srgb, var(--c-destaque-tinta) 62%, transparent); }
.campo select:focus-visible, .campo input:focus-visible { outline-offset: 0; }
.tiquete__enviar {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; margin-top: 10px; padding: 0 18px;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--c-fundo); color: var(--c-tinta);
  font: 500 var(--step-body)/1.2 var(--f); text-align: center;
}
.tiquete__nota { font-size: var(--step-small); line-height: 1.45; }
.tiquete__nota a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-underline-offset: 0.2em; }

/* ---------- Deixou, buscou: dois campos de cor que se encostam ---------- */
.prazos { display: grid; }
.campo-cor {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  min-height: 52svh; padding: 28px var(--margem) 24px;
  color: var(--c-campo-tinta);
}
.campo-cor--loja { background: var(--c-campo-1); }
.campo-cor--leva { background: var(--c-campo-2); }
.campo-cor__topo { display: grid; gap: 14px; }
.campo-cor__nome { font: 500 var(--step-head)/0.95 var(--f); letter-spacing: -0.05em; }
.campo-cor__frase { max-width: 26ch; font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.015em; }
.campo-cor__texto { max-width: 46ch; }
.campo-cor__base { display: grid; gap: 22px; }
.campo-cor__valor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.campo-cor__numero { font: 500 var(--step-display)/0.9 var(--f); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.campo-cor__nota { font-size: var(--step-body); }
.campo-cor .btn { width: 100%; }
.campo-cor :focus-visible { outline-color: var(--c-campo-tinta); box-shadow: 0 0 0 3px var(--c-tinta); } /* taste-skill-ignore: anel duplo do foco no campo claro */

/* ---------- Antes e depois ---------- */
.casos__palco { display: grid; gap: 28px; margin-top: 44px; }
.casos__placas { display: grid; gap: 28px; }
.placa { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--c-superficie); --corte: 50%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.placa__lado { position: absolute; inset: 0; }
.placa__lado--antes { background: var(--c-superficie-2); }
.placa__lado--depois { background: var(--c-campo-3); color: var(--c-campo-tinta); clip-path: inset(0 0 0 var(--corte)); }
.placa__lado .foto { position: absolute; inset: 0; }
/* os quadros reservados do modelo: a legenda no meio de cada metade */
.placa__reservado { position: absolute; top: 50%; width: 50%; padding: 0 12px; translate: 0 -50%; font-size: var(--step-lead); font-weight: 500; line-height: 1.15; text-align: center; }
.placa__lado--antes .placa__reservado { left: 0; color: var(--c-suave); }
.placa__lado--depois .placa__reservado { right: 0; }
.placa__divisa { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 4px; margin-left: -2px; background: var(--c-tinta); pointer-events: none; }
.placa__puxador {
  position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; translate: -50% -50%;
  border-radius: 50%; background: var(--c-tinta);
}
.placa__puxador::before, .placa__puxador::after {
  content: ''; position: absolute; top: 50%; width: 0; height: 0; translate: 0 -50%;
  border: 7px solid transparent;
}
.placa__puxador::before { left: 8px; border-right: 9px solid var(--c-fundo); border-left: 0; }
.placa__puxador::after { right: 8px; border-left: 9px solid var(--c-fundo); border-right: 0; }
.placa__rotulo { position: absolute; top: 12px; padding: 4px 10px; background: var(--c-fundo); color: var(--c-tinta); font-size: var(--step-small); font-weight: 500; pointer-events: none; }
.placa__rotulo--antes { left: 12px; }
.placa__rotulo--depois { right: 12px; }
.placa { cursor: ew-resize; }
.placa__controle { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; margin: 0; opacity: 0; pointer-events: none; }
.placa:has(.placa__controle:focus-visible) { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); } /* taste-skill-ignore: anel duplo do foco no comparador */
.placa__legenda { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; background: var(--c-fundo); font-weight: 500; }
/* sem JavaScript: as duas metades lado a lado, sem o controle; as legendas dizem qual é qual */
html:not(.js) .placa__controle { display: none; }
.js .placa__legenda { display: none; }
.js .placa:not(.e-ativa) { display: none; }
.casos__lado { display: grid; gap: 22px; align-content: start; }
.casos__abas { display: flex; flex-wrap: wrap; gap: 0 22px; }
.casos__aba {
  min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--c-suave); font-size: var(--step-body); font-weight: 500;
}
.casos__aba[aria-pressed="true"] { color: var(--c-tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
html:not(.js) .casos__abas { display: none; }
.caso-texto { display: grid; gap: 16px; }
.js .caso-texto:not(.e-ativo) { display: none; }
html:not(.js) .caso-texto + .caso-texto { margin-top: 28px; }
.caso-texto__titulo { font: 500 var(--step-lead)/1.1 var(--f); letter-spacing: -0.02em; }
.caso-texto__descricao { max-width: 34ch; }
.caso-texto__acoes { display: grid; gap: 6px; margin-top: 12px; }
.celula {
  display: flex; align-items: center; min-height: 60px; padding: 0 18px;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--c-superficie-2); color: var(--c-tinta);
  font: 500 var(--step-body)/1.2 var(--f); text-align: left; text-decoration: none;
}
.celula--clara { background: var(--c-campo-1); color: var(--c-campo-tinta); }
/* com uma comparação só, não há "Ver o próximo": o "Orçar" ocupa a linha toda */
.caso-texto__acoes > :only-child { grid-column: 1 / -1; }
html:not(.js) .celula:not(.celula--clara) { display: none; }

/* ---------- Perguntas de balcão: fichas de arquivo com aba ---------- */
.fichas { display: grid; margin-top: 64px; }
.ficha {
  --aba: 32px; --sobra: 16px;
  position: relative; padding: 18px 20px calc(var(--aba) + var(--sobra) + 18px);
  background: var(--ficha); color: var(--c-campo-tinta);
}
/* cada ficha encosta na de cima e a aba sobe para o pé da ficha de cima, que tem espaço para ela */
.ficha + .ficha { margin-top: calc(var(--sobra) * -1); }
.ficha--com-aba:first-child { margin-top: var(--aba); }
.ficha--1 { --ficha: var(--c-campo-1); }
.ficha--2 { --ficha: var(--c-campo-2); }
.ficha--3 { --ficha: var(--c-campo-3); }
.ficha--4 { --ficha: var(--c-destaque); }
.ficha:last-child { padding-bottom: 22px; }
.ficha__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; min-height: 48px; list-style: none; cursor: pointer; }
.ficha__cabeca::-webkit-details-marker { display: none; }
/* o + e o − desenhados com o texto */
.ficha__cabeca::after { content: '+'; font-size: var(--step-lead); line-height: 1; padding-top: 2px; }
.ficha[open] .ficha__cabeca::after { content: '\2212'; }
.ficha__cabeca:focus-visible { outline-color: var(--c-campo-tinta); outline-offset: 4px; box-shadow: 0 0 0 3px var(--c-tinta); } /* taste-skill-ignore: anel duplo do foco na ficha clara */
.ficha__aba {
  position: absolute; bottom: 100%; left: calc(20px + var(--degrau, 0) * 48px);
  display: flex; align-items: center; justify-content: center; width: 120px; height: var(--aba);
  background: var(--ficha);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  font-size: var(--step-small); font-weight: 500;
}
.ficha__pergunta { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.ficha__resposta { max-width: 50ch; padding-top: 12px; }

/* ---------- Onde fica: o endereço em linhas grandes ---------- */
.onde { padding-top: calc(var(--secao) * 0.5); }
.onde__cabeca { padding-inline: var(--margem); margin-bottom: 40px; }
.linhas { margin: 0; padding: 0; list-style: none; }
.linha {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px;
  min-height: 96px; padding: 16px var(--margem) 14px;
  font: 500 var(--step-head)/1 var(--f); letter-spacing: -0.05em;
}
.linha:nth-child(odd) { background: var(--c-superficie); }
.linha__texto { min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
a.linha__texto { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
.linha__dias { display: block; color: var(--c-suave); font-size: var(--step-body); letter-spacing: -0.005em; line-height: 1.3; }
.linha__agora { font-size: var(--step-small); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.linha__agora:empty { display: none; }
.linha.e-hoje .linha__agora { padding: 4px 10px; background: var(--c-destaque); color: var(--c-destaque-tinta); }
.linha.e-hoje.e-fechada .linha__agora { background: transparent; color: var(--c-suave); padding-inline: 0; }

.onde__base { display: grid; gap: 24px; padding: 40px var(--margem) var(--secao); }
.onde__foto { position: relative; aspect-ratio: 260 / 100; background: var(--c-superficie); -webkit-mask: var(--sola-deitada) center / 100% 100% no-repeat; mask: var(--sola-deitada) center / 100% 100% no-repeat; }
.onde__foto .foto { position: absolute; inset: 0; }
.onde__mapa-coluna { display: grid; gap: 12px; align-content: start; }
.onde__mapa { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-superficie); }
.onde__mapa iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(0.4) contrast(1.05); }
.onde__mapa--reservado { display: grid; place-items: center; padding: 24px; color: var(--c-suave); text-align: center; }
.onde__mapa--foco { outline: 3px solid var(--c-tinta); outline-offset: 3px; }
.onde__rotas { display: flex; flex-wrap: wrap; column-gap: 24px; }

/* ---------- Chamar: a faixa inteira é o botão; o topo tem a curva do bico ---------- */
.chamar {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: 46svh; padding: clamp(56px, 12vw, 120px) var(--margem) 18px;
  border-radius: 50% 50% 0 0 / clamp(48px, 11vw, 170px) clamp(48px, 11vw, 170px) 0 0;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  text-decoration: none; container-type: inline-size; overflow: hidden;
  transition: background-color 200ms ease, color 200ms ease;
}
.chamar__frase { max-width: 22ch; padding-right: 48px; font-size: var(--step-body); font-weight: 500; }
.chamar__seta { position: absolute; right: var(--margem); top: clamp(56px, 12vw, 120px); width: 32px; height: 32px; }
.chamar__palavra {
  --tam: calc((100cqw - 2 * var(--margem)) / var(--letras-fim, 3.2) * 0.97);
  font: 600 var(--tam)/0.8 var(--f); letter-spacing: -0.05em; white-space: nowrap;
  /* a caixa das letras desta fonte sobe além da linha: o respiro evita que a palavra fique por cima da frase */
  margin-top: 0.26em;
}
.chamar:focus-visible { background: var(--c-fundo); color: var(--c-tinta); outline: 3px solid var(--c-tinta); outline-offset: -10px; box-shadow: none; } /* taste-skill-ignore */

/* ---------- rodapé: a numeração em solas, o nome e os contatos ---------- */
/* embaixo, espaço para o WhatsApp flutuante não cobrir a última linha */
.rodape { padding: 48px 0 calc(88px + env(safe-area-inset-bottom)); background: var(--c-superficie); container-type: inline-size; overflow-x: clip; }
/* doze solas, do 33 ao 44: a mais alta mede o que a largura deixa, as outras crescem de 60% a 100% */
.numeracao {
  --alta: calc((100cqw - 2 * var(--margem) - 11 * 4px) * 2.6 / 9.6);
  display: flex; align-items: flex-end; gap: 4px; height: var(--alta); padding-inline: var(--margem);
}
.numeracao span {
  flex: none; height: calc(var(--alta) * (0.6 + var(--n) * 0.4 / 11)); aspect-ratio: 100 / 260;
  background: var(--c-campo-1);
  -webkit-mask: var(--sola) center / 100% 100% no-repeat; mask: var(--sola) center / 100% 100% no-repeat;
}
.numeracao span:nth-child(4n+2) { background: var(--c-campo-2); }
.numeracao span:nth-child(4n+3) { background: var(--c-campo-3); }
.numeracao span:nth-child(4n) { background: var(--c-destaque); }
.rodape__nome { margin-top: 40px; padding-inline: var(--margem); font: 500 var(--step-head)/0.95 var(--f); letter-spacing: -0.05em; overflow-wrap: anywhere; }
.rodape__meio { display: grid; gap: 36px; margin-top: 48px; padding-inline: var(--margem); }
.rodape__contatos, .rodape__links { display: grid; margin: 0; padding: 0; list-style: none; }
.rodape__contatos a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; }
.rodape__links { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.rodape__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin-top: 64px; padding-inline: var(--margem); color: var(--c-suave); font-size: var(--step-small); }
.rodape__legal > p:first-child { flex: 1 1 100%; padding-block: 8px; }
.rodape__mais[open] { flex: 1 1 100%; order: 2; }
.rodape__legal p a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape__mais summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.28em; }
.rodape__privacidade { display: grid; gap: 10px; max-width: 70ch; padding-bottom: 12px; font-size: var(--step-body); line-height: 1.5; }
.rodape__privacidade a { min-height: 0; text-underline-offset: 0.2em; }
.rodape__creditos { display: grid; gap: 0; margin: 0; padding: 0 0 8px; list-style: none; font-size: var(--step-body); }
.rodape__creditos li a { display: inline-block; padding-block: 12px; }
.rodape__creditos .credito__licenca { min-width: 44px; text-align: center; }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 300ms;
}
.flutuante svg { width: 28px; height: 28px; fill: currentColor; }
.flutuante--visivel { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
html:not(.js) .flutuante { opacity: 1; visibility: visible; transform: none; }

/* ---------- página 404 ---------- */
.perdido { display: grid; gap: 24px; justify-items: start; align-content: center; min-height: calc(100svh - var(--topo) - 92px); padding: 48px var(--margem); }
.perdido__titulo { max-width: 12em; font: 500 var(--step-display)/0.92 var(--f); letter-spacing: -0.05em; text-wrap: balance; }
.perdido__texto { max-width: 46ch; }
.perdido__sola { width: 64px; aspect-ratio: 100 / 260; background: var(--c-destaque); -webkit-mask: var(--sola) center / 100% 100% no-repeat; mask: var(--sola) center / 100% 100% no-repeat; rotate: 12deg; }
.perdido__rodape { padding: 24px var(--margem); color: var(--c-suave); font-size: var(--step-small); }
.perdido__rodape a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- celular (até 767 px) ---------- */
@media (max-width: 767.98px) {
  /* as categorias menores que o texto, para as quatro caberem numa linha em 360 px; com mais, a fila corre de lado */
  .atalhos ul { column-gap: 12px; }
  .atalhos a { font-size: var(--step-small); }
}

@media (max-width: 559.98px) {
  /* no celular o topo leva o nome e o "Menu"; a ação fica nos botões do início e no WhatsApp flutuante */
  .topo__cta { display: none; }
}

/* toque: as linhas de contato com altura de dedo */
@media (pointer: coarse) {
  a.linha__texto { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- 560 px ---------- */
@media (min-width: 560px) {
  .par { min-height: clamp(300px, 52vw, 520px); }
  .sola--foto { left: 14%; width: 34%; }
  .sola--chapada { left: 52%; width: 31%; }
  .tiquete__resumo dd { font-size: var(--step-lead); }
  .caso-texto__acoes { grid-template-columns: 1fr 1fr; }
  .celula { min-height: 72px; }
  .linha--horario { flex-wrap: nowrap; }
  .linha__agora { flex: none; align-self: flex-start; max-width: 16em; text-align: right; }
  .rodape__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 900 px: a página do computador ---------- */
@media (min-width: 900px) {
  :root { --topo: 72px; }

  /* o título à esquerda; o par à direita, mais alto que a primeira tela e cortado pela borda */
  .inicio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: center; padding-inline: var(--margem); }
  .inicio__texto { grid-column: 1 / span 7; padding: 48px 0 64px; gap: 24px; }
  .inicio__sub { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
  .par { position: absolute; top: 7%; right: 2vw; bottom: auto; width: 44vw; height: 102%; min-height: 0; margin: 0; }
  .sola { height: 100%; width: auto; top: 0; }
  .sola--foto { left: 4%; top: 0; }
  .sola--chapada { left: auto; right: 0; top: 5%; }

  .cabeca { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: end; }
  .cabeca .titulo { grid-column: 1 / span 6; }
  .cabeca__texto { grid-column: 8 / -1; }

  .categoria__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 8px; }

  /* o tíquete deitado: o canhoto à esquerda, o picote em pé com os furos em cima e embaixo */
  .orcamento { padding-inline: var(--margem); }
  .tiquete { grid-template-columns: 46% 54%; max-width: 1200px; margin-inline: auto; }
  .tiquete__campos::before, .tiquete__campos::after { left: -2.5px; right: auto; translate: -50% 0; }
  .tiquete__campos::before { top: calc(var(--furo) / -2); }
  .tiquete__campos::after { top: auto; bottom: calc(var(--furo) / -2); }
  .tiquete__canhoto { padding: 48px 44px; gap: 32px; }
  .tiquete__campos { padding: 48px 44px 40px; border-top: 0; border-left: 5px dotted var(--c-fundo); }

  .prazos { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .campo-cor { min-height: 90svh; padding: 40px; }
  .campo-cor--loja { grid-column: 1 / span 7; }
  .campo-cor--leva { grid-column: 8 / -1; }
  .prazos--um .campo-cor--loja { grid-column: 1 / -1; }
  .campo-cor__base { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; }
  .campo-cor .btn { width: auto; }
  .campo-cor__numero { font-size: clamp(3rem, 1rem + 6vw, 8.5rem); }

  /* antes e depois: a placa quadrada à esquerda, as abas, o texto e as duas ações à direita */
  .casos__palco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: stretch; margin-top: 64px; min-height: 88svh; padding: 40px; background: var(--c-superficie); }
  .casos__placas { grid-column: 1 / span 6; align-self: center; }
  .casos__lado { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 32px; }
  .casos__abas { gap: 0 28px; }
  .casos__aba { font-size: var(--step-lead); }
  .caso-texto { flex: 1; display: flex; flex-direction: column; gap: 48px; }
  .caso-texto__titulo { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.05em; }
  .caso-texto__acoes { margin-top: auto; }

  .fichas { width: min(100%, 900px); margin-inline: auto; margin-top: 88px; }
  .ficha { --aba: 40px; --sobra: 18px; padding: 24px 32px calc(var(--aba) + var(--sobra) + 24px); }
  .ficha:last-child { padding-bottom: 30px; }
  .ficha__aba { left: calc(32px + var(--degrau, 0) * 150px); width: 200px; font-size: var(--step-body); }
  .ficha__resposta { font-size: var(--step-body); }

  .linha { min-height: 150px; padding: 20px calc(var(--margem) + 4px) 18px; }
  .linha__dias { display: inline; color: var(--c-suave); font-size: inherit; letter-spacing: inherit; line-height: inherit; }
  .onde__base { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: start; padding-top: 64px; }
  .onde__foto { grid-column: 10 / -1; grid-row: 1; aspect-ratio: 100 / 260; -webkit-mask: var(--sola) center / 100% 100% no-repeat; mask: var(--sola) center / 100% 100% no-repeat; }
  .onde__mapa-coluna { grid-column: 1 / span 8; grid-row: 1; }
  .onde__mapa { aspect-ratio: 16 / 9; }

  .chamar { min-height: 60svh; padding: clamp(80px, 11vw, 170px) var(--margem) 22px; }
  .chamar__frase { font-size: var(--step-lead); }
  .chamar__seta { width: 48px; height: 48px; top: clamp(80px, 11vw, 170px); }
  .chamar__palavra { --tam: min(calc((100cqw - 2 * var(--margem)) / var(--letras-fim, 3.2) * 0.97), 30cqw); }

  .rodape { padding-top: 72px; }
  .numeracao { --alta: min(calc((100cqw - 2 * var(--margem) - 11 * 4px) * 2.6 / 9.6), 36svh); }
  .rodape__nome { margin-top: 56px; }
  .rodape__meio { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); margin-top: 56px; }
  .rodape__contatos { grid-column: 1 / span 5; }
  .rodape__links { grid-column: 7 / -1; align-content: start; }
  .rodape__legal { margin-top: 96px; }
  .rodape__legal > p:first-child { flex: 1 1 auto; }
}

/* ---------- 1100 px: menu em linha e a foto grande da tabela de preços ---------- */
@media (min-width: 1100px) {
  .menu { display: flex; align-items: center; margin-right: 20px; }
  .menu ul { display: flex; gap: 4px 28px; }
  .menu li a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    font-size: var(--step-small); font-weight: 500;
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.35em;
    transition: text-decoration-color 200ms ease;
  }
  .menu__acoes, .menu-btn { display: none; }

  .atalhos { display: none; }
  .precos__corpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: start; margin-top: 48px; }
  .precos__lista { grid-column: 1 / span 8; }
  .categoria:first-child { padding-top: 0; }
  .categoria + .categoria { padding-top: 96px; }
  .categoria__foto { display: none; }
  .vitrine {
    display: block; grid-column: 10 / -1; position: sticky; top: calc(var(--topo) + 32px);
    height: min(76svh, 760px); max-width: calc(min(76svh, 760px) * 100 / 260); justify-self: center; width: 100%;
    -webkit-mask: var(--sola) center / 100% 100% no-repeat; mask: var(--sola) center / 100% 100% no-repeat;
    background: var(--c-superficie);
  }
  .vitrine__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms ease; }
  .vitrine__foto.e-ativa { opacity: 1; }
  .vitrine__foto .foto { position: absolute; inset: 0; }
  /* com um conserto apontado, os outros vão para o cinza secundário (7:1, ainda legível) */
  .precos__lista.tem-ativo .conserto:not(.e-ativo) { color: var(--c-suave); }
  .precos__lista.tem-ativo .conserto:not(.e-ativo) .conserto__prazo { color: inherit; }
  .conserto.e-ativo .conserto__marca { transform: rotate(14deg) scale(1.15); }
}

/* ---------- interação no computador ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in srgb, var(--c-destaque) 84%, #FFFFFF); }
  .btn--tinta:hover { background: var(--c-superficie-2); }
  .link:hover, .menu li a:hover, a.linha__texto:hover { text-decoration-color: currentColor; }
  .menu-btn:hover { text-decoration-thickness: 3px; }
  .atalhos a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  .tiquete__enviar:hover { background: var(--c-superficie-2); }
  .casos__aba:hover { color: var(--c-tinta); }
  .celula:hover { background: var(--c-fundo); }
  .celula--clara:hover { background: var(--c-campo-2); }
  .ficha__cabeca:hover .ficha__pergunta { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .rodape__contatos a:hover, .rodape__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .chamar:hover { background: var(--c-fundo); color: var(--c-tinta); }
  .chamar:hover .chamar__seta { transform: translate(4px, -4px); }
  .chamar__seta { transition: transform 300ms var(--ease-out); }
}

/* ---------- movimento (só com a classe .movimento, que respeita "reduzir movimento") ----------
   O par de solas assenta (as duas aparecem já no primeiro quadro), o título e o texto só deslizam: nada do topo começa
   escondido. O resto é feito pelo GSAP no main.js, com opacidade e deslocamento (o conteúdo nunca sai da ordem do Tab). */
.movimento .sola--foto { animation: pisar 1500ms var(--ease-out) backwards; }
.movimento .sola--chapada { animation: pisar 1500ms var(--ease-out) 120ms backwards; }
.movimento .inicio__titulo { animation: deslizar 1000ms var(--ease-out) 60ms backwards; }
.movimento .inicio__sub { animation: deslizar 1000ms var(--ease-out) 160ms backwards; }
.movimento .inicio__acoes, .movimento .inicio__hoje { animation: subir 900ms var(--ease-out) 300ms backwards; }
.movimento .inicio__acoes:focus-within { animation: none; }
@keyframes pisar { from { translate: 0 7%; scale: 1.04; } }
@keyframes deslizar { from { translate: 0 14px; } }
@keyframes subir { from { opacity: 0; translate: 0 12px; } }

/* palavras divididas pelo main.js: cada uma sobe de dentro de uma máscara */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.palavra__in { display: inline-block; }
/* a folha: um papel da cor do fundo cobre a foto e sobe (só com o GSAP rodando) */
.folha { position: absolute; inset: 0; z-index: 1; background: var(--c-fundo); transform-origin: 50% 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}