/* ══════════════════════════════════════════════════════════════
   PRIME HARDWOOD FLOORS — seções
   Uma depois da outra, na ordem da página. Só var() de tokens.css.
   Estrutura e medidas: referência bitrig.com/remote (material/
   referencias/bitrig.md). Números: P = Padrão Samuel Freire,
   G = guia "Sites sem cara de IA", A = arquitetura.

   Efeitos e origem:
   - entrada (subir e aparecer, cascata): naocodei free-code-css,
     adaptado ao [data-entra] de base.css
   - texto que rola no link: guia G02, opção 1
   - ícone que desliza no botão: guia G05, opção 2
   - tábuas que descem e encaixam + brilho final: guia G07/G10
   - galeria e avaliações arrastáveis com setas: P62
   Revisão final (Etapa 10, 24/10):
   - palavras reveladas nos títulos: naocodei free-code nº 16
     ("Revelar palavra por palavra"), 70ms entre palavras
   - marca-texto amarelo que se pinta depois das palavras: detalhe
     próprio, sobre o .destaque de base.css
   - cortina que revela as fotos: naocodei free-code-css nº 21
     ("Cortina que revela"), faixa na cor da tinta do logo
   - trilho do processo que se desenha com a rolagem e acende os
     números: naocodei free-code nº 07 ("Linha do tempo que se
     desenha"), ligado ao laço único do main.js (efeito raro)
   ══════════════════════════════════════════════════════════════ */

.pular { position: absolute; left: var(--e-4); top: calc(var(--e-8) * -1); z-index: 100; padding: var(--e-3) var(--e-4); border-radius: var(--raio-campo); background: var(--tinta); color: var(--branco); }
.pular:focus { top: var(--e-4); }
.icone--esq { transform: scaleX(-1); }
.g-logo { width: var(--g-logo); height: var(--g-logo); flex: none; }

/* cabeçalho de seção: à esquerda por padrão, centralizado onde serve (P34) */
.cabeca { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); max-width: var(--largura-texto); }
.section > .container > .cabeca:first-child, .section > .container > header.cabeca { padding-top: var(--e-5); border-top: 1px solid var(--linha-forte); max-width: none; }
.section--escura .cabeca, .faixa .cabeca { border-top-color: var(--linha-escura); }
.cabeca--centro { margin-inline: auto; text-align: center; justify-items: center; }

/* ── 0 · Barra do topo: reta e de ponta a ponta (31/10: a pílula ficou "fofa").
   Transparente sobre o vídeo; ao rolar ganha fundo Ébano e um fio embaixo. ── */
.barra-topo { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color var(--d-media) var(--curva), border-color var(--d-media) var(--curva); border-bottom: 1px solid var(--linha-escura); }
.barra-topo.rolou { background: var(--tinta); }
.barra {
  position: relative;
  display: flex; align-items: center; gap: var(--e-6);
  width: 100%; min-height: var(--nav-h);
  padding-inline: var(--gutter);
  color: var(--texto-claro);
}
.barra__marca { display: flex; align-items: center; flex: none; }
.barra__marca img { display: block; height: var(--logo-barra); width: auto; }
.barra__links { display: flex; align-items: center; gap: var(--e-6); margin-left: auto; font-size: var(--t-mini); font-weight: var(--peso-ui-forte); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--texto-claro-2); }
.barra__links a { white-space: nowrap; }
.barra__links a:hover { color: var(--amarelo); }
.barra__tel { display: none; }
.barra__menu { display: none; place-items: center; width: var(--toque); height: var(--toque); border: 0; border-radius: var(--raio-btn); background: none; color: var(--texto-claro); cursor: pointer; }

/* abaixo de 900px os links vão para o menu (G28: barra fixa só com menu de verdade) */
@media (max-width: 900px) {
  .barra__cta { margin-left: auto; }
  .barra__menu { display: grid; }
  .barra__links {
    position: absolute; inset: 100% 0 auto;
    display: grid; gap: 0; margin: 0; padding: var(--e-3) var(--gutter) var(--e-5);
    border-radius: 0; background: var(--tinta); border-top: 1px solid var(--linha-escura); box-shadow: var(--sombra-barra);
    font-size: var(--t-corpo); color: var(--texto-claro);
    opacity: 0; visibility: hidden; transform: translateY(calc(var(--e-2) * -1));
    transition: opacity var(--d-rapida) var(--curva), transform var(--d-rapida) var(--curva), visibility 0s linear var(--d-rapida);
  }
  .barra__links > a { padding-block: var(--e-3); border-bottom: 1px solid var(--linha-escura); }
  .barra__links > a:last-child { border-bottom: 0; }
  .barra__tel { display: flex; align-items: center; gap: var(--e-2); font-weight: var(--peso-ui-forte); }
  .barra.aberta .barra__links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (max-width: 640px) { .barra__cta { display: none; } .barra__menu { margin-left: auto; } }

/* ── 1 · Hero: vídeo de fundo em tela cheia, véu Ébano. Composição das referências
   (details-agencement.com, designtank.co): título enorme embaixo à esquerda, coluna
   curta à direita, rodapé de duas informações. Sem enfeite e sem cascata (31/10). ── */
.hero { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; min-height: var(--hero-altura); padding-top: calc(var(--nav-h) + var(--e-7)); background: var(--tinta); color: var(--texto-claro); overflow: hidden; }
.hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero__veu { position: absolute; inset: 0; z-index: -1; background: var(--veu-hero); }
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-lado); gap: var(--e-7); align-items: end; align-self: end; width: calc(100% - var(--gutter) * 2); max-width: none; padding-bottom: var(--e-7); }
/* sempre 3 linhas: "Hardwood floors," / "installed and" / "refinished right" (nbsp no HTML).
   9em cabe a linha mais longa (8,4em) e não deixa duas juntarem; a letra encolhe com a tela */
.hero__titulo { max-width: 9em; font-family: var(--fonte-display); font-weight: var(--peso-hero); font-size: min(var(--t-hero-video), calc((100vw - var(--gutter) * 2) / 8.7)); line-height: .98; letter-spacing: var(--tracking-hero); }
.hero__titulo em { font-style: normal; color: var(--amarelo); }
.hero__lado { display: grid; gap: var(--e-5); padding-bottom: .4em; }
.hero__texto { font-size: var(--t-corpo); line-height: var(--entrelinha-corpo); color: var(--texto-claro-2); }
.hero__acoes { display: grid; gap: var(--e-3); }
.hero__acoes .btn { justify-content: space-between; }
.hero .btn--vazado { color: var(--texto-claro); justify-content: flex-start; }
.hero__prova { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-peq); color: var(--texto-claro-2); }
.hero__prova strong { color: var(--texto-claro); font-weight: var(--peso-ui-forte); }
.hero__prova:hover span:last-child { text-decoration: underline; text-underline-offset: .2em; }
.hero__pe { display: flex; justify-content: space-between; gap: var(--e-5); width: calc(100% - var(--gutter) * 2); max-width: none; padding-block: var(--e-4); border-top: 1px solid var(--linha-escura); font-size: var(--t-mini); font-weight: var(--peso-ui-forte); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--texto-claro-2); }
.estrelas { display: inline-flex; color: var(--estrela); }
.estrelas .icone { width: .9rem; height: .9rem; }
@media (max-width: 960px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .hero__lado { max-width: var(--hero-lado); }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--nav-h) + var(--e-6)); }
  .hero__grade { gap: var(--e-4); padding-bottom: var(--e-6); }   /* título e texto mais próximos no celular */
  .hero__lado { max-width: none; }
  .hero__pe { display: none; }   /* no celular quebrava em duas linhas; a mesma informação está no texto da capa */
}

/* ── 2 · Serviços: bento (Bitrig) + faixa dos outros pisos ── */
.bento { display: grid; gap: 1px; background: var(--linha-forte); border: 1px solid var(--linha-forte); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(var(--bento-linha), auto); }
.bento .card { display: flex; flex-direction: column; background: var(--papel); box-shadow: none; }
.bento .card--amarelo { background: var(--amarelo); }
.bento .card__foto { flex: 1; min-height: 0; }
.bento .card__corpo { padding: var(--e-5) var(--e-5) var(--e-6); }  /* respiro embaixo (31/10) */
.bento .card__foto { margin: var(--e-3) var(--e-3) 0; overflow: hidden; }
/* cartões pequenos sem foto (31/10): ícone de traço fino em cima, texto embaixo */
.card__icone { width: var(--card-icone); height: var(--card-icone); margin: var(--e-5) var(--e-5) auto; color: var(--madeira-escura); stroke-width: 1.25; }
.bento__alto { grid-row: span 2; }
.card--amarelo { background: var(--amarelo); }
.card--amarelo { justify-content: flex-end; }
.card--amarelo .card__corpo p { color: var(--tinta); }
.card--amarelo .btn { margin-top: var(--e-4); }
/* sobre o amarelo, botão Ébano com ícone amarelo (igual ao padrão da marca nova) */
.card--amarelo .btn { --btn-fundo: var(--tinta); --btn-texto: var(--texto-claro); }
.card--amarelo .btn .btn__icone { background: var(--amarelo); color: var(--tinta); }
.card--amarelo .btn:hover { --btn-fundo: var(--tinta-hover); }
.card__foto--vazio { background: var(--papel-2); }
.padrao { stroke-width: 14; --traco-1: color-mix(in srgb, var(--tinta) 12%, transparent); --traco-2: color-mix(in srgb, var(--tinta) 6%, transparent); }
.padrao--card { width: 100%; height: 100%; --traco-1: color-mix(in srgb, var(--madeira) 22%, transparent); --traco-2: color-mix(in srgb, var(--madeira) 12%, transparent); }

.outros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: -1px; background: var(--linha-forte); border: 1px solid var(--linha-forte); }
.outro { padding: var(--e-5); background: var(--papel); }
.outro .espinha { margin-top: var(--e-1); }
.outro .t-h3 { font-size: var(--t-corpo); }
.outro p { font-size: var(--t-peq); color: var(--texto-2); }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(var(--bento-linha), auto); }
  .bento .card__foto { min-height: calc(var(--bento-linha) * .7); }
  .outros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .bento__alto { grid-row: auto; }
  .bento .card__foto { aspect-ratio: 4 / 3; min-height: 0; flex: none; }
  .bento__alto .card__foto { aspect-ratio: 4 / 4; }
  .card--amarelo .padrao { height: var(--e-8); flex: none; }
  .outros { grid-template-columns: minmax(0, 1fr); }
}

/* ── 3 · Nossas obras: galeria arrastável, sem fresta (P53, P62) ── */
.obras__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-5); margin-bottom: var(--e-6); }
.obras__cabeca .cabeca { margin-bottom: 0; }
.setas { display: flex; gap: var(--e-2); flex: none; }
.seta { display: grid; place-items: center; width: var(--seta); height: var(--seta); border: 1px solid var(--linha-forte); border-radius: var(--raio-btn); background: var(--cartao); color: var(--tinta); cursor: pointer; transition: background-color var(--d-rapida) var(--curva), border-color var(--d-rapida) var(--curva); }
.seta:hover { background: var(--amarelo); border-color: var(--tinta); }
.seta:disabled { opacity: .35; cursor: default; background: var(--cartao); border-color: var(--linha-forte); }
.setas--escuro .seta { background: transparent; border-color: var(--linha-escura); color: var(--texto-claro); }
.setas--escuro .seta:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--tinta); }
.setas--escuro .seta:disabled { background: transparent; border-color: var(--linha-escura); }

.rolo { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; }
.rolo::-webkit-scrollbar { display: none; }
.rolo.arrastando { cursor: grabbing; scroll-snap-type: none; }
.rolo.arrastando * { pointer-events: none; }
.galeria { scroll-padding-inline: max(var(--gutter), (100% - var(--largura)) / 2); padding-inline: max(var(--gutter), (100% - var(--largura)) / 2); }
/* 27/10: espaço entre as fotos e cada uma com o raio dos cards (pedido do Matheus; vale sobre a P53) */
.galeria { gap: var(--e-4); }
.galeria__item { flex: none; height: var(--galeria-h); scroll-snap-align: start; overflow: hidden; border-radius: var(--raio-foto); }
.galeria__item img { width: auto; height: 100%; max-width: none; object-fit: cover; user-select: none; transition: transform var(--d-lenta) var(--curva); }
.galeria__item:hover img { transform: scale(1.03); }
.obras__area { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-5); color: var(--texto-2); }
@media (max-width: 640px) { .obras__cabeca { flex-direction: column; align-items: flex-start; } }

/* ── 3b · Vídeos do Instagram (29/10): player oficial em iframe; altura pela
   mensagem MEASURE que o próprio embed manda (main.js), sem cortar vídeo ── */
.videos__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-5); margin-bottom: var(--e-6); }
.videos__cabeca .cabeca { margin-bottom: 0; }
.reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); align-items: start; cursor: auto; scroll-snap-type: none; }
/* reel (31/10): a moldura corta embaixo de propósito o link, as curtidas e o comentário
   do Instagram (não dá para tirar de dentro do iframe); fica cabeçalho + vídeo */
.reel { container-type: inline-size; height: calc(var(--reel-altura) - var(--reel-corte)); overflow: hidden; background: var(--papel); border: 1px solid var(--linha-forte); }
.reel__player { display: block; width: calc(100% + 2px); height: var(--reel-altura); margin: -1px -1px 0; border: 0; background: var(--papel); }
@media (max-width: 860px) {
  .reels { display: flex; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .reel { flex: 0 0 var(--reel-largura); scroll-snap-align: start; }
}

/* ── 4 · Como funciona: número grande + ilustração em sequência (P38, G10, G22) ── */
/* processo (31/10): sem ilustração; quatro colunas separadas por fio fino,
   número grande e leve em Nogueira, como num índice editorial */
.etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha-forte); }
.etapa { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-6) var(--e-5) var(--e-7); border-left: 1px solid var(--linha-forte); }
.etapa:first-child { border-left: 0; padding-left: 0; }
.etapa__num { margin-bottom: var(--e-6); font-family: var(--fonte-display); font-weight: 300; font-size: var(--t-numero-etapa); line-height: .9; letter-spacing: -.04em; color: var(--madeira-escura); }
.etapa p { color: var(--texto-2); }
@media (max-width: 960px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .etapa:nth-child(3) { border-left: 0; padding-left: 0; } .etapa:nth-child(n+3) { border-top: 1px solid var(--linha-forte); } }
@media (max-width: 560px) { .etapas { grid-template-columns: minmax(0, 1fr); } .etapa { border-left: 0; padding: var(--e-5) 0 var(--e-6); } .etapa + .etapa { border-top: 1px solid var(--linha-forte); } .etapa__num { margin-bottom: var(--e-3); } }

/* ── Ilustrações do processo (refeitas em 27/10): cenário, camadas e movimento
   contínuo depois da entrada (G07, G10, G22). Estado inicial escondido só com
   .anim-pronta; com movimento reduzido, tudo aparece pronto (base.css). ── */
.ilu { stroke-linecap: round; stroke-linejoin: round; }
.ilu * { transform-box: fill-box; }
.ilu-parede { fill: var(--branco); stroke: var(--tinta); stroke-width: 2; }
.ilu-janela { fill: var(--papel-2); stroke: var(--tinta); stroke-width: 2; }
.ilu-janela-cruz { fill: none; stroke: var(--tinta); stroke-width: 1.5; }
.ilu-rodape { fill: var(--madeira-escura); }
.ilu-piso-base, .ilu-contrapiso { fill: var(--madeira-clara); stroke: var(--madeira-escura); stroke-width: 1.5; }
.ilu-piso-junta, .ilu-contrapiso-linha { fill: none; stroke: var(--madeira-escura); stroke-width: 1.2; }
.ilu-chao { fill: var(--tinta); }

/* 01 · trena que abre, medida e anotação na prancheta */
.ilu-trena-fita, .ilu-trena-caixa, .ilu-nivel-corpo, .ilu-lapis-corpo { fill: var(--amarelo); stroke: var(--tinta); }
.ilu-trena-fita { stroke-width: 1.5; }
.ilu-trena-caixa, .ilu-nivel-corpo { stroke-width: 2; }
.ilu-trena-marcas { fill: none; stroke: var(--tinta); stroke-width: 1.3; }
.ilu-trena-ponta, .ilu-trena-botao, .ilu-lapis-ponta, .ilu-prancheta-clipe { fill: var(--tinta); }
.ilu-medida { font-family: var(--fonte-ui); font-weight: 700; font-size: 13px; fill: var(--tinta); }
.ilu-prancheta-base { fill: var(--madeira); stroke: var(--madeira-escura); stroke-width: 1.5; }
.ilu-prancheta-papel { fill: var(--branco); stroke: var(--tinta); stroke-width: 1.2; }
.ilu-escrita { fill: none; stroke: var(--madeira-escura); stroke-width: 2.5; stroke-dasharray: 32; }
.ilu-lapis-corpo { stroke-width: 1.2; }
.anim-pronta .etapa .ilu-trena-fita, .anim-pronta .etapa .ilu-trena-marcas { transform: scaleX(0); transform-origin: left center; }
.anim-pronta .etapa .ilu-trena-ponta { transform: translateX(-142px); }
.anim-pronta .etapa .ilu-medida, .anim-pronta .etapa .ilu-lapis { opacity: 0; }
.anim-pronta .etapa .ilu-escrita { stroke-dashoffset: 32; }
.etapa.entrou .ilu-trena-fita, .etapa.entrou .ilu-trena-marcas { animation: trena-abre var(--d-lenta) var(--curva) .3s forwards; }
.etapa.entrou .ilu-trena-ponta { animation: trena-ponta var(--d-lenta) var(--curva) .3s forwards, ponta-treme 2.4s ease-in-out 2.6s infinite; }
.etapa.entrou .ilu-medida { animation: aparece var(--d-media) var(--curva) 1.1s both; }
.etapa.entrou .ilu-lapis { animation: lapis-escreve 1.2s var(--curva) 1.4s both, lapis-anda 1.6s ease-in-out 2.8s infinite; }
.etapa.entrou .e1 { animation: traco .4s linear 1.5s forwards; }
.etapa.entrou .e2 { animation: traco .4s linear 1.9s forwards; }
.etapa.entrou .e3 { animation: traco .4s linear 2.3s forwards; }

/* 02 · o sofá sai, o nível desce e a bolha centraliza */
.ilu-sofa-encosto, .ilu-sofa-assento, .ilu-sofa-braco { fill: var(--texto-claro-2); stroke: var(--tinta); stroke-width: 2; }
.ilu-sofa-pe { stroke: var(--tinta); stroke-width: 3; }
.ilu-parafusos circle { fill: var(--madeira-escura); }
.ilu-nivel-vidro { fill: var(--branco); stroke: var(--tinta); stroke-width: 1.5; }
.ilu-nivel-marca { stroke: var(--tinta); stroke-width: 1.2; }
.ilu-bolha { fill: var(--ok); }
.anim-pronta .etapa .ilu-nivel { transform: translateY(-46px); opacity: 0; }
.anim-pronta .etapa .ilu-bolha { transform: translateX(-28px); }
.anim-pronta .etapa .ilu-parafusos circle { transform: scale(0); transform-origin: center; }
.etapa.entrou .ilu-sofa { animation: sofa-sai .9s var(--curva-cortina) .3s forwards; }
.etapa.entrou .ilu-nivel { animation: nivel-desce var(--d-media) var(--curva-encaixe) 1.1s forwards; }
.etapa.entrou .ilu-bolha { animation: bolha-centra 1.2s var(--curva-encaixe) 1.6s forwards, bolha-respira 3s ease-in-out 3s infinite; }
.etapa.entrou .ilu-parafusos circle { animation: parafuso .3s var(--curva-encaixe) forwards; }
.etapa.entrou .ilu-parafusos circle:nth-child(1) { animation-delay: 2.2s; }
.etapa.entrou .ilu-parafusos circle:nth-child(2) { animation-delay: 2.35s; }
.etapa.entrou .ilu-parafusos circle:nth-child(3) { animation-delay: 2.5s; }
.etapa.entrou .ilu-parafusos circle:nth-child(4) { animation-delay: 2.65s; }

/* 03 · tábuas que encaixam, veio da madeira e martelo de borracha batendo */
.tabua { fill: var(--madeira-clara); stroke: var(--madeira-escura); stroke-width: 1.5; }
.tabua:nth-child(even) { fill: var(--madeira); }
.ilu-veio { fill: none; stroke: var(--madeira-escura); stroke-width: 1; opacity: .35; }
.ilu-brilho { fill: var(--branco); opacity: 0; }
.ilu-marreta-cabo { fill: var(--madeira-escura); }
.ilu-marreta-cabeca { fill: var(--tinta); }
.ilu-impacto { fill: none; stroke: var(--tinta); stroke-width: 2; opacity: 0; }
.anim-pronta .etapa .tabua { transform: translateY(-60px); opacity: 0; }
.anim-pronta .etapa .ilu-veio, .anim-pronta .etapa .ilu-marreta { opacity: 0; }
.etapa.entrou .tabua { animation: tabua-desce var(--d-media) var(--curva-encaixe) forwards; animation-delay: calc(.3s + var(--n) * 180ms); }
.etapa.entrou .ilu-veio { animation: veio-aparece var(--d-media) var(--curva) 1.3s forwards; }
.etapa.entrou .ilu-brilho { animation: brilho-passa 1.4s var(--curva) 1.5s forwards; }
.etapa.entrou .ilu-marreta { animation: aparece .3s var(--curva) 1.4s forwards; }
.ilu-marreta { transform-origin: 50% 100%; }
.etapa.entrou .ilu-marreta-cabo, .etapa.entrou .ilu-marreta-cabeca { animation: none; }
.etapa.entrou .ilu-marreta { animation: aparece .3s var(--curva) 1.4s forwards, martelo 1.4s ease-in-out 1.7s infinite; }
.etapa.entrou .ilu-impacto { animation: impacto 1.4s ease-out 1.7s infinite; }
.etapa.entrou .tabua--ultima { animation: tabua-desce var(--d-media) var(--curva-encaixe) calc(.3s + 4 * 180ms) forwards, tabua-ajusta 1.4s ease-out 1.7s infinite; }

/* 04 · porta abre, luz da janela no piso pronto e brilho que passa de tempos em tempos */
.ilu-sala { fill: var(--branco); stroke: var(--tinta); stroke-width: 2; }
.ilu-luz { fill: var(--amarelo); opacity: .22; }
.ilu-porta-vao { fill: var(--texto-2); }
.ilu-porta { fill: var(--madeira); stroke: var(--madeira-escura); stroke-width: 1.5; transform-origin: left center; }
.ilu-macaneta { fill: var(--amarelo); }
.ilu-piso-pronto { fill: var(--madeira-clara); stroke: var(--tinta); stroke-width: 2; }
.ilu-piso-linha { fill: none; stroke: var(--madeira-escura); stroke-width: 1.5; stroke-dasharray: 40; }
.ilu-planta-vaso { fill: var(--madeira-escura); }
.ilu-planta-folha { fill: var(--ok); transform-origin: 50% 100%; }
.anim-pronta .etapa .ilu-piso-linha { stroke-dashoffset: 40; }
.anim-pronta .etapa .ilu-luz { opacity: 0; }
.etapa.entrou .ilu-porta { animation: porta-abre var(--d-lenta) var(--curva) .4s forwards; }
.etapa.entrou .ilu-macaneta { animation: some .3s linear .5s forwards; }
.etapa.entrou .ilu-piso-linha { animation: traco .9s var(--curva) .8s forwards; }
.etapa.entrou .ilu-luz { animation: luz-entra 1s var(--curva) 1.2s forwards, luz-respira 4s ease-in-out 2.2s infinite; }
.etapa.entrou .ilu-brilho--loop { animation: brilho-passa 1.4s var(--curva) 1.8s, brilho-passa 1.4s var(--curva) 5s infinite; }
.etapa.entrou .ilu-planta-folha { animation: folha-balanca 3.2s ease-in-out 1.5s infinite; }

@keyframes trena-abre { to { transform: scaleX(1); } }
@keyframes trena-ponta { to { transform: translateX(0); } }
@keyframes ponta-treme { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes traco { to { stroke-dashoffset: 0; } }
@keyframes lapis-escreve { 0% { opacity: 0; transform: translate(6px, -14px); } 30% { opacity: 1; transform: translate(-30px, -24px); } 60% { transform: translate(-6px, -14px); } 100% { opacity: 1; transform: translate(0, 0); } }
@keyframes lapis-anda { 0%, 100% { opacity: 1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(-6px, 1px); } }
@keyframes sofa-sai { to { transform: translateX(120px); opacity: 0; } }
@keyframes nivel-desce { to { transform: none; opacity: 1; } }
@keyframes bolha-centra { 0% { transform: translateX(-28px); } 60% { transform: translateX(6px); } 100% { transform: translateX(0); } }
@keyframes bolha-respira { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes parafuso { to { transform: scale(1); } }
@keyframes tabua-desce { to { transform: none; opacity: 1; } }
@keyframes veio-aparece { to { opacity: .35; } }
@keyframes brilho-passa { 0% { opacity: 0; transform: translateX(-120px) skewX(-20deg); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateX(220px) skewX(-20deg); } }
@keyframes martelo { 0%, 35%, 100% { opacity: 1; transform: rotate(18deg); } 55% { opacity: 1; transform: rotate(-14deg); } 70% { opacity: 1; transform: rotate(4deg); } }
@keyframes impacto { 0%, 52% { opacity: 0; } 56% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes tabua-ajusta { 0%, 52% { opacity: 1; transform: translateX(3px); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes porta-abre { to { transform: scaleX(.22); } }
@keyframes some { to { opacity: 0; } }
@keyframes luz-entra { to { opacity: .22; } }
@keyframes luz-respira { 0%, 100% { opacity: .22; } 50% { opacity: .34; } }
@keyframes folha-balanca { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ── 5 · Avaliações: faixa preta (Bitrig "Made by"), estilo Google (P27) ── */
.faixa { border-radius: var(--raio-card); background: var(--tinta); color: var(--texto-claro); padding: clamp(var(--e-6), 5vw, var(--e-8)); box-shadow: var(--sombra-1); overflow: hidden; }
.faixa .t-lead { margin-top: var(--e-2); color: var(--texto-claro-2); }
.faixa__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-5); }
.google-nota { display: flex; align-items: center; gap: var(--e-3); }
.g-logo--grande { width: var(--avatar); height: var(--avatar); }
.google-nota .estrelas .icone { width: 1.5rem; height: 1.5rem; }
.avaliacoes { gap: var(--e-4); margin: var(--e-6) calc(clamp(var(--e-6), 5vw, var(--e-8)) * -1) 0; padding-inline: clamp(var(--e-6), 5vw, var(--e-8)); scroll-padding-inline: clamp(var(--e-6), 5vw, var(--e-8)); }
.avaliacao { flex: 0 0 var(--cartao-avaliacao); display: flex; flex-direction: column; padding: var(--e-5); border-radius: var(--raio-card); background: var(--tinta-2); border: 1px solid var(--linha-escura); scroll-snap-align: start; }
.avaliacao__autor { display: flex; align-items: center; gap: var(--e-3); }
.avaliacao__avatar { display: grid; place-items: center; flex: none; width: var(--avatar); height: var(--avatar); border-radius: var(--raio-pilula); background: var(--av); color: var(--branco); font-size: var(--avatar-letra); font-weight: 700; }   /* texto grande em negrito: AA pede 3:1 (cores do Google dão 3,1 a 3,9) */
.avaliacao__nome { font-weight: var(--peso-ui-forte); }
.avaliacao__meta { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-mini); color: var(--texto-claro-2); }
.avaliacao__meta .icone { width: .875rem; height: .875rem; }
.avaliacao__texto { margin-top: var(--e-4); color: var(--texto-claro-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.avaliacao.aberta .avaliacao__texto { -webkit-line-clamp: unset; display: block; }
.avaliacao__mais { align-self: flex-start; margin-top: var(--e-2); padding: 0; border: 0; background: none; color: var(--branco); font-size: var(--t-peq); font-weight: var(--peso-ui-forte); cursor: pointer; }
.avaliacao__fonte { display: flex; align-items: center; gap: var(--e-2); margin-top: auto; padding-top: var(--e-4); font-size: var(--t-mini); color: var(--texto-claro-2); }
.avaliacao__fonte .g-logo { width: .875rem; height: .875rem; }
.faixa__pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-6); }

/* ── 6 · Sobre: tela dividida ── */
/* sobre (31/10, v2): compacto. Texto à esquerda em tamanho normal; à direita a
   foto na moldura de fio (a mesma do vídeo) e os três diferenciais em colunas */
.sobre__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); align-items: start; }
.sobre__texto { display: grid; gap: var(--e-4); justify-items: start; padding-top: var(--e-5); border-top: 1px solid var(--linha-forte); }
.sobre__texto > p { color: var(--texto-2); max-width: 46ch; }
.sobre__texto .btn { margin-top: var(--e-2); }
.sobre__foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 65%; }
.destaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linha-forte); }
.destaques li { display: grid; gap: var(--e-1); padding: var(--e-5) var(--e-4) var(--e-5); border-left: 1px solid var(--linha-forte); }
.destaques li:first-child { border-left: 0; padding-left: 0; }
.destaques div { display: grid; gap: var(--e-1); }
.destaques strong { font-weight: var(--peso-ui-forte); }
.destaques span { color: var(--texto-2); font-size: var(--t-peq); }
@media (max-width: 860px) { .sobre__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); } }
@media (max-width: 560px) {
  .destaques { grid-template-columns: minmax(0, 1fr); }
  .destaques li { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha-forte); }
}

/* ── 7 · FAQ: título à esquerda, sanfona à direita (G25) ── */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--e-7); }
.faq .t-lead { margin-top: var(--e-3); }
.faq__tel { color: var(--texto); font-weight: var(--peso-ui-forte); white-space: nowrap; }
.faq details { border-bottom: 1px solid var(--linha-forte); }
.faq details:first-child { border-top: 1px solid var(--linha-forte); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: var(--linha-faq); padding-block: var(--e-3); cursor: pointer; list-style: none; font-weight: var(--peso-ui-forte); font-size: var(--t-lead); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icone { flex: none; transition: transform var(--d-media) var(--curva); }
.faq details[open] summary .icone { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--e-5); color: var(--texto-2); max-width: 60ch; }
@media (max-width: 760px) { .faq { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); } }

/* ── 8 · Orçamento: formulário + contatos (G12, G13) ── */
.orcamento-secao { background: var(--luz-final), var(--papel); }
/* marca PRIME igual à do cabeçalho (caixa amarela, nome preto, borda preta), na altura
   do antigo selo e esticada para o lado: pedido do Matheus em 24/10 */
.marca-prime { display: block; justify-self: start; height: var(--selo-peq); width: auto; }
.orcamento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "cab form" "cont form"; gap: var(--e-5) var(--e-7); align-items: start; }
.orcamento__cabeca { grid-area: cab; margin-bottom: 0; gap: var(--e-3); }
/* coluna esquerda compacta (31/10): na altura do formulário, sem ocupar a tela */
.orcamento__cabeca .t-h2 { font-size: var(--t-orcamento); }
.orcamento__cabeca .t-lead { font-size: var(--t-corpo); color: var(--texto-2); }
.orcamento .marca-prime { height: var(--selo-orc); }
.orcamento .form { grid-area: form; }
.orcamento .contatos { grid-area: cont; }
.form { display: grid; gap: var(--e-5); padding: clamp(var(--e-5), 4vw, var(--e-7)); border: 1px solid var(--linha-forte); background: var(--papel); }
.form__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.form textarea.campo__entrada { min-height: calc(var(--campo-h) * 1.5); }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campo .escolha { margin-top: var(--e-2); }
.campo__dica { font-weight: var(--peso-ui); color: var(--texto-2); }
.form__pe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.form__nota { font-size: var(--t-peq); color: var(--texto-2); }
.form__ok, .form__falha { display: flex; gap: var(--e-3); padding: var(--e-4); border-radius: var(--raio-campo); }
.form__ok { background: color-mix(in srgb, var(--ok) 10%, var(--campo)); color: var(--ok); }
.form__falha { background: color-mix(in srgb, var(--erro) 8%, var(--campo)); color: var(--erro); }
.form__falha a { font-weight: var(--peso-ui-forte); text-decoration: underline; }
.form__ok[hidden], .form__falha[hidden], .campo__erro[hidden] { display: none; }
.contatos { display: grid; }
.contato { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--e-4); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); transition: padding-left var(--d-media) var(--curva); }
.contato:first-child { border-top: 1px solid var(--linha); }
.contato .icone { grid-row: span 2; width: 1.25rem; height: 1.25rem; color: var(--madeira-escura); }
.contato small { color: var(--texto-2); font-size: var(--t-mini); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }
.contato strong { font-size: var(--t-corpo); font-weight: var(--peso-ui-forte); }
a.contato:hover { padding-left: var(--e-3); }
@media (max-width: 1080px) { .form__trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form__trio .campo:last-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { .orcamento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "form" "cont"; } }
@media (max-width: 560px) { .form__trio { grid-template-columns: minmax(0, 1fr); } }

/* ── 9 · Transição em espinha + rodapé memorável (G06, G15, G27) ── */
.transicao { position: relative; height: var(--borda-h); background: var(--papel); }
.transicao svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rodape { padding-block: var(--e-6) var(--e-7); background: var(--tinta); color: var(--texto-claro); }
.rodape__marca { display: flex; align-items: center; gap: .14em; font-family: var(--fonte-display); font-weight: var(--peso-display); font-size: var(--marca-rodape); line-height: .85; letter-spacing: var(--tracking-display); color: var(--amarelo); }
.rodape__marca img { height: .9em; width: auto; flex: none; }
.rodape__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-5); margin-top: var(--e-6); }
.rodape__frase { font-family: var(--fonte-display); font-weight: var(--peso-display); font-size: var(--t-h3); }
.rodape__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.rodape .btn--vazado { color: var(--texto-claro); }
.rodape__linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-5); margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--linha-escura); color: var(--texto-claro-2); font-size: var(--t-peq); }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--e-5); }

/* ── Barra fixa do celular: aparece depois da 2ª seção (G16) ── */
.barra-fixa { display: none; }
@media (max-width: 760px) {
  .barra-fixa {
    position: fixed; z-index: 40; left: var(--gutter); right: var(--gutter); bottom: calc(var(--e-3) + env(safe-area-inset-bottom));
    display: flex; gap: var(--e-2); padding: var(--e-2);
    border-radius: var(--raio-btn); background: var(--tinta); box-shadow: 0 0 0 1px var(--linha-escura);
    transform: translateY(calc(100% + var(--e-6))); transition: transform var(--d-media) var(--curva);
  }
  .barra-fixa.visivel { transform: none; }
  .barra-fixa .btn { flex: 1 1 auto; min-width: 0; padding-left: var(--e-5); }
  .barra-fixa .btn--vazado { flex: none; padding-inline: var(--e-4); color: var(--texto-claro); justify-content: center; }
  .rodape { padding-bottom: calc(var(--e-7) + var(--btn-h) + var(--e-5)); }
}

/* ══ Revisão final: movimento (Etapa 10) ══════════════════════ */

/* movimento sóbrio (31/10, pedido do Matheus): o título aparece inteiro num fade
   curto, as fotos só esmaecem, nada de cortina nem palavra por palavra */
.anim-pronta [data-palavras] { opacity: 0; transition: opacity var(--d-media) var(--curva); }
.anim-pronta [data-palavras].entrou { opacity: 1; }
.anim-pronta .cortina img { opacity: 0; transition: opacity var(--d-lenta) var(--curva); }
.cortina.entrou img, .entrou .cortina img { opacity: 1; }
/* ilustrações do processo: tocam uma vez e param */
.etapa.entrou * { animation-iteration-count: 1 !important; }
.anim-pronta .etapa .etapa__num { opacity: .3; transition: opacity var(--d-media) var(--curva); }
.anim-pronta .etapa.aceso .etapa__num { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .anim-pronta [data-palavras], .anim-pronta .cortina img, .anim-pronta .etapa .etapa__num { opacity: 1; }
}

@keyframes esteira-pisos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pisos { animation: none; flex-wrap: wrap; justify-content: center; row-gap: var(--e-3); width: auto; }
  .pisos li.pisos__copia { display: none; }
  .pisos-janela { mask-image: none; }
}

/* ── 1b · Números: faixa Ébano colada na capa, quatro colunas com fio ── */
.numeros { background: var(--tinta); color: var(--texto-claro); border-top: 1px solid var(--linha-escura); }
.numeros__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numero { display: grid; gap: var(--e-2); padding: var(--e-6) var(--e-5); border-left: 1px solid var(--linha-escura); }
.numero:first-child { border-left: 0; padding-left: 0; }
.numero strong { font-family: var(--fonte-display); font-weight: 300; font-size: var(--t-numero-faixa); line-height: 1; letter-spacing: -.03em; color: var(--amarelo); }
.numero span { font-size: var(--t-peq); color: var(--texto-claro-2); }
@media (max-width: 760px) {
  .numeros__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero { padding: var(--e-5) var(--e-4); }
  .numero:nth-child(odd) { border-left: 0; padding-left: 0; }
  .numero:nth-child(n+3) { border-top: 1px solid var(--linha-escura); }
}

/* ── 2b · Madeiras: duas amostras grandes e a coluna de acabamentos, com fios ── */
.madeiras__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); border: 1px solid var(--linha-forte); }
.madeira { display: grid; align-content: start; border-right: 1px solid var(--linha-forte); }
.madeira img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.madeira figcaption { display: grid; gap: var(--e-1); padding: var(--e-5) var(--e-5) var(--e-6); }
.madeira strong { font-family: var(--fonte-display); font-size: var(--t-h3); font-weight: var(--peso-ui-forte); }
.madeira span, .acabamentos dd { color: var(--texto-2); font-size: var(--t-peq); }
.acabamentos { padding: var(--e-5); }
.acabamentos dl { margin-top: var(--e-4); }
.acabamentos dl > div { padding: var(--e-4) 0; border-top: 1px solid var(--linha-forte); }
.acabamentos dt { font-weight: var(--peso-ui-forte); }
@media (max-width: 860px) {
  .madeiras__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acabamentos { grid-column: 1 / -1; border-top: 1px solid var(--linha-forte); }
  .madeira:nth-child(2) { border-right: 0; }
}
@media (max-width: 560px) {
  .madeiras__grade { grid-template-columns: minmax(0, 1fr); }
  .madeira { border-right: 0; }
  .madeira + .madeira { border-top: 1px solid var(--linha-forte); }
}

/* ── 3b · Antes, durante e depois em formato VSL (31/10): tudo centralizado,
   título curto, vídeo grande na moldura de fio, botão embaixo ── */
.antes-depois__in { display: grid; justify-items: center; text-align: center; }
.antes-depois .t-rotulo { color: var(--madeira-escura); }
.antes-depois .t-h2 { margin-top: var(--e-3); max-width: 18ch; }
.antes-depois__sub { margin-top: var(--e-3); max-width: 52ch; font-size: var(--t-corpo); color: var(--texto-2); }
.antes-depois__video { width: min(100%, var(--vsl-largura)); margin-top: var(--e-6); }
.antes-depois .btn { margin-top: var(--e-6); }
.moldura, .antes-depois__video { border: 1px solid var(--linha-forte); padding: var(--e-3); background: var(--papel); }
.antes-depois__video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tinta); }
@media (max-width: 560px) { .moldura, .antes-depois__video { padding: var(--e-2); } }

/* ── 7b · Área atendida: lista de cidades com fio e mapa quadrado em tons de cinza ── */
.area__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); align-items: stretch; }
.cidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linha-forte); }
.cidades li { padding: var(--e-3) 0; border-bottom: 1px solid var(--linha-forte); font-weight: var(--peso-ui-forte); }
.area__nota { margin-top: var(--e-5); color: var(--texto-2); font-size: var(--t-peq); }
.area__nota a { color: var(--texto); text-decoration: underline; text-underline-offset: .2em; }
.area__mapa { min-height: var(--mapa-h); border: 1px solid var(--linha-forte); }
.area__mapa iframe { display: block; width: 100%; height: 100%; min-height: var(--mapa-h); border: 0; filter: grayscale(1) contrast(1.05); }
@media (max-width: 860px) { .area__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); } }

/* ── Páginas de serviço (31/10): capa Ébano com foto na moldura, "o que inclui"
   em colunas de fio, processo da home e links para os outros serviços ── */
.servico-hero { padding: calc(var(--nav-h) + var(--e-8)) 0 var(--e-8); background: var(--tinta); color: var(--texto-claro); }
.servico-hero__grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-8); align-items: center; }
.servico-hero__texto { display: grid; gap: var(--e-5); justify-items: start; }
.trilha { display: flex; flex-wrap: wrap; gap: var(--e-2); color: var(--texto-claro-2); }
.trilha a:hover { color: var(--amarelo); }
.trilha [aria-current] { color: var(--amarelo); }
.servico-hero__titulo { font-family: var(--fonte-display); font-weight: var(--peso-hero); font-size: var(--t-sobre); line-height: 1.02; letter-spacing: var(--tracking-hero); }
.servico-hero__lead { max-width: 44ch; color: var(--texto-claro-2); }
.servico-hero .btn--vazado { color: var(--texto-claro); }
.moldura--escura { border-color: var(--linha-escura); background: transparent; }
.servico-hero__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.servico-inclui__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-5) var(--e-8); }
.servico-inclui .cabeca { grid-column: 1 / -1; margin-bottom: 0; }
.servico-inclui__texto { color: var(--texto-2); max-width: 46ch; }
.inclui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linha-forte); }
.inclui li { display: grid; gap: var(--e-1); padding: var(--e-5) var(--e-5) var(--e-5) 0; border-bottom: 1px solid var(--linha-forte); }
.inclui li:nth-child(even) { padding-left: var(--e-5); border-left: 1px solid var(--linha-forte); }
.inclui strong { font-weight: var(--peso-ui-forte); }
.inclui span { color: var(--texto-2); font-size: var(--t-peq); }
.outros-servicos__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha-forte); }
.outro-servico { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); padding: var(--e-6) var(--e-5); border-left: 1px solid var(--linha-forte); font-family: var(--fonte-display); font-size: var(--t-h3); font-weight: var(--peso-ui-forte); transition: background-color var(--d-rapida) var(--curva); }
.outro-servico:first-child { border-left: 0; }
.outro-servico:hover { background: var(--papel-2); }
.outro-servico .icone { color: var(--madeira-escura); }
@media (max-width: 860px) {
  .servico-hero__grade, .servico-inclui__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .outros-servicos__lista { grid-template-columns: minmax(0, 1fr); }
  .outro-servico { border-left: 0; padding-inline: 0; }
  .outro-servico + .outro-servico { border-top: 1px solid var(--linha-forte); }
}
@media (max-width: 560px) {
  .servico-hero { padding-top: calc(var(--nav-h) + var(--e-6)); }
  .inclui { grid-template-columns: minmax(0, 1fr); }
  .inclui li:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* home: cartão de serviço inteiro clicável (link esticado), com "Learn more" */
.card--link { position: relative; }
.card__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
/* rodapé do cartão (31/10): fio fino, frase própria de cada serviço e seta num
   quadrado de fio que escurece no hover, em vez do "Learn more" de template */
.card--link .card__corpo { display: flex; flex-direction: column; }
.card__pe { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--linha-forte); font-size: var(--t-mini); font-weight: var(--peso-ui-forte); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--texto); }
.card__seta { display: grid; place-items: center; width: var(--btn-icone-peq); height: var(--btn-icone-peq); border: 1px solid var(--linha-forte); color: var(--tinta); transition: background-color var(--d-rapida) var(--curva), color var(--d-rapida) var(--curva), border-color var(--d-rapida) var(--curva); }
.card__seta .icone { width: .95rem; height: .95rem; }
.card--link:hover .card__seta { background: var(--tinta); border-color: var(--tinta); color: var(--amarelo); }
.card__link:focus-visible { outline: none; }
.card--link:has(.card__link:focus-visible) { box-shadow: var(--anel-foco); }