/* ══════════════════════════════════════════════════════════════
   PRIME HARDWOOD FLOORS — base
   Reset, tipografia, botões, etiquetas, chips, campos, .section.
   Só var() de tokens.css. Números entre parênteses: P = Padrão
   Samuel Freire, G = guia "Sites sem cara de IA", A = arquitetura.
   ══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--nav-topo) * 2); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
  font-weight: var(--peso-ui);
  line-height: var(--entrelinha-corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                       /* zero rolagem horizontal (P64) */
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--e-1); }

/* ── Quebras por dispositivo (A §3: corte em 640px) ── */
@media (max-width: 640px) { .so-pc { display: none; } }
@media (min-width: 641px) { .so-celular { display: none; } }

/* ── Tipografia: fonte principal só em títulos grandes (P8, G25) ── */
.t-hero, .t-h2, .t-numero {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-stretch: var(--largura-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.t-hero { font-size: var(--t-hero); line-height: var(--entrelinha-display); }
.t-h2 { font-size: var(--t-h2); line-height: var(--entrelinha-titulo); }
.t-numero { font-size: var(--t-numero); line-height: 1; }
.t-h3 {
  font-family: var(--fonte-ui);
  font-size: var(--t-h3);
  font-weight: var(--peso-ui-forte);
  line-height: var(--entrelinha-titulo);
  letter-spacing: var(--tracking-titulo);
}
.t-lead { font-size: var(--t-lead); color: var(--texto-2); text-wrap: pretty; }
.t-peq { font-size: var(--t-peq); }
.t-apoio { color: var(--texto-2); }
.t-rotulo {
  font-size: var(--t-mini);
  font-weight: var(--peso-ui-forte);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
/* palavra de destaque: marca-texto amarelo atrás da palavra, como o PRIME do logo */
.destaque {
  background: linear-gradient(transparent 58%, var(--amarelo) 58%, var(--amarelo) 92%, transparent 92%);
  padding-inline: .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── Seção e contêiner ── */
.section { position: relative; padding-block: var(--e-secao); background: var(--papel); }
/* faixa creme entra e sai em degradê curto: nenhuma troca seca de fundo (P42, G06) */
.section--clara-2 { background: linear-gradient(var(--papel) 0, var(--papel-2) var(--e-8), var(--papel-2) calc(100% - var(--e-8)), var(--papel) 100%); }
.section--escura { background: var(--tinta); color: var(--texto-claro); }
.section--escura .t-lead, .section--escura .t-apoio { color: var(--texto-claro-2); }
.container { width: min(100% - var(--gutter) * 2, var(--largura)); margin-inline: auto; }
.container--texto { width: min(100% - var(--gutter) * 2, var(--largura-texto)); margin-inline: auto; }

/* ── Ícones: uma família, traço 1.75, sem caixinha (G03, G11) ── */
.icone { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icone--cheio { fill: currentColor; stroke: none; }

/* ── Elemento da marca: espinha de peixe do selo (P1, G04, G08) ── */
.espinha { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke-width: 3.2; stroke-linecap: butt; }
.espinha { --traco-1: var(--madeira-escura); --traco-2: var(--madeira-clara); }
.section--escura .espinha { --traco-1: var(--madeira); }

/* ── Botões (P14 a P21, G05, G24, G30, G32) ──
   Pílula; ícone da família encaixado à direita que desliza e é trocado
   por um igual no hover. O botão não sai do lugar. */
.btn {
  --btn-fundo: var(--btn-claro);
  --btn-texto: var(--texto-claro);
  --btn-circulo: var(--amarelo);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-height: var(--btn-h);
  padding: 0 var(--e-3) 0 var(--e-5);
  border: 0; border-radius: var(--raio-btn);
  background: var(--btn-fundo); color: var(--btn-texto);
  font-family: var(--fonte-ui); font-size: var(--t-corpo); font-weight: var(--peso-ui-forte);
  line-height: 1; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-rapida) var(--curva), color var(--d-rapida) var(--curva);
}
.btn__icone {
  position: relative; overflow: hidden;
  flex: none;                               /* no celular o botão divide a barra: o círculo não pode encolher */
  display: grid; place-items: center;
  width: var(--btn-icone); height: var(--btn-icone); border-radius: var(--raio-btn);
  background: var(--btn-circulo, var(--btn-texto)); color: var(--btn-fundo);
}
.btn__icone .icone { width: 1.125rem; height: 1.125rem; transition: transform var(--d-media) var(--curva); }
.btn__icone .icone + .icone { position: absolute; transform: translateX(-160%); }
.btn:hover .btn__icone .icone:first-child { transform: translateX(160%); }
.btn:hover .btn__icone .icone + .icone { transform: translateX(0); }

/* Ébano com texto Serragem e círculo amarelo; no escuro, amarelo com texto e círculo Ébano */
.btn:hover { --btn-fundo: var(--tinta-hover); }
:is(.section--escura, .faixa, .rodape, .barra-fixa, .hero, .barra) .btn:not(.btn--vazado) { --btn-fundo: var(--btn-escuro); --btn-texto: var(--tinta); --btn-circulo: var(--tinta); }
:is(.section--escura, .faixa, .rodape, .barra-fixa, .hero, .barra) .btn:not(.btn--vazado):hover { --btn-fundo: var(--amarelo-hover); }
.btn:is(:not(.btn--vazado)) .btn__icone { color: var(--btn-circulo-icone, var(--tinta)); }
:is(.section--escura, .faixa, .rodape, .barra-fixa, .hero, .barra) .btn .btn__icone { --btn-circulo-icone: var(--amarelo); }

/* secundário vazado: borda 1px leve, hover preenche (G30) */
.btn--vazado, .btn--vazado:hover {
  --btn-fundo: transparent; --btn-texto: currentColor;
  padding: 0 var(--e-5);
  border: 1px solid var(--borda-vazada);
}
.btn--vazado:hover { background: color-mix(in srgb, currentColor 7%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.btn--vazado .icone { width: 1.125rem; height: 1.125rem; }
.btn--peq { min-height: var(--btn-h-peq); padding-left: var(--e-4); font-size: var(--t-peq); }
.btn--peq .btn__icone { width: var(--btn-icone-peq); height: var(--btn-icone-peq); }

/* ── Link com texto que rola (G02, opção 1): sem linha embaixo ── */
.link-rola { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.link-rola > span { display: block; transition: transform var(--d-media) var(--curva); }
.link-rola > span::after { content: attr(data-texto); position: absolute; left: 0; top: 100%; }
.link-rola:hover > span, .link-rola:focus-visible > span { transform: translateY(-100%); }

/* ── Etiqueta: no máximo 3 no site, com a espinha (P2, G04, G09) ── */
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-mini); font-weight: var(--peso-ui-forte);
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  color: var(--texto-2);
}
.section--escura .etiqueta { color: var(--texto-claro-2); }

/* ── Chips (Bitrig: 37px, pílula, fundo 5%) ── */
.chip {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: var(--chip-h); padding: 0 var(--e-4);
  border-radius: var(--raio-pilula);
  background: var(--chip-fundo);
  color: var(--texto-2); font-size: var(--t-peq); white-space: nowrap;
}
.section--escura .chip { background: var(--chip-fundo-escuro); color: var(--texto-claro-2); }

/* ── Card ── */
.card {
  position: relative; overflow: hidden;
  background: var(--cartao);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-1);
}
.card__foto { overflow: hidden; }
.card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-lenta) var(--curva); }
.card:hover .card__foto img { transform: scale(1.04); }       /* zoom leve dentro da moldura (A §3.2) */
.card__corpo { padding: var(--e-5); }
.card__corpo .t-h3 + p { margin-top: var(--e-2); color: var(--texto-2); }

/* ── Campos (G12, P68) ── */
.campo { display: grid; gap: var(--e-2); align-content: start; }
.campo__rotulo { font-size: var(--t-peq); font-weight: var(--peso-ui-forte); }
.campo__rotulo .obrig { color: var(--erro); }
.campo__entrada {
  width: 100%; min-height: var(--campo-h);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borda-campo); border-radius: var(--raio-campo);
  background: var(--campo);
  transition: border-color var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva);
}
.campo__entrada::placeholder { color: var(--texto-2); opacity: .7; }
.campo__entrada:hover { border-color: var(--tinta); }
.campo__entrada:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px var(--amarelo); }
textarea.campo__entrada { min-height: calc(var(--campo-h) * 2); resize: vertical; }
.campo--erro .campo__entrada { border-color: var(--erro); }
.campo__erro { display: flex; align-items: center; gap: var(--e-2); color: var(--erro); font-size: var(--t-peq); }

/* escolha de serviço: chip que marca (várias opções) */
.escolha { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha label {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-4);
  border: 1px solid var(--borda-campo); border-radius: var(--raio-btn);
  background: var(--campo); font-size: var(--t-peq); cursor: pointer;
  transition: background-color var(--d-rapida) var(--curva), border-color var(--d-rapida) var(--curva);
}
.escolha label .espinha { display: none; }
/* caixinha de marcar antes do texto (31/10): deixa claro que dá para escolher várias */
.escolha label::before { content: ''; flex: none; width: var(--caixa-marcar); height: var(--caixa-marcar); border: 1.5px solid var(--borda-campo); background: var(--campo) center / 80% no-repeat; transition: background-color var(--d-rapida) var(--curva), border-color var(--d-rapida) var(--curva); }
.escolha label:hover { border-color: var(--tinta); }
.escolha input:checked + label { background: var(--amarelo); border-color: var(--tinta); font-weight: var(--peso-ui-forte); }
.escolha input:checked + label::before { border-color: var(--tinta); background-color: var(--tinta); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8D21C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
@media (max-width: 560px) {
  .escolha { gap: var(--e-2) var(--e-2); }
  .escolha label { min-height: 38px; padding: 0 var(--e-3); font-size: var(--t-mini); }
}
.escolha input:focus-visible + label { box-shadow: var(--anel-foco); }

/* ── Movimento: entrada (A §3 JS aditivo) ── */
.anim-pronta [data-entra] { opacity: 0; transform: translateY(var(--e-3)); transition: opacity var(--d-media) var(--curva), transform var(--d-media) var(--curva); transition-delay: calc(var(--i, 0) * var(--atraso-cascata)); }
.anim-pronta [data-entra].entrou { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .anim-pronta [data-entra] { opacity: 1; transform: none; }
}

/* quebra de linha (31/10, Matheus): títulos equilibrados e texto sem palavra sozinha na última linha */
h1, h2, h3, .t-hero, .t-h2, .t-h3 { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }