/* VIDU (#1375) — só o que é deste site. Tese: "vitrine acesa": a página é a placa da loja (preto, nome branco
   gordo e redondo, laranja do cabide) e cada foto ganha o halo de luz do espelho de LED do provador. */
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-var-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-VF-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --raio: 1.75rem;
  --halo: 0 0 0 2px color-mix(in srgb, var(--cor-acento) 75%, transparent), 0 0 4.5rem -.75rem color-mix(in srgb, var(--cor-acento) 60%, transparent);
  /* cabide do logo (Phosphor "coat-hanger", MIT), usado como grafismo */
  --cabide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M241.57,171.2,141.33,96l23.46-17.6A8,8,0,0,0,168,72a40,40,0,1,0-80,0,8,8,0,0,0,16,0,24,24,0,0,1,47.69-3.78L14.43,171.2A16,16,0,0,0,24,200H232a16,16,0,0,0,9.6-28.8ZM32.73,184C53.6,170.59,89.49,152,128,152s74.4,18.59,95.27,32Z'/%3E%3C/svg%3E");
}

h1, h2, h3, .topo__marca { font-weight: 800; }
h1, h2 { letter-spacing: -.025em; }

/* Marca: o cabide no balão laranja, como na placa */
.topo__marca { gap: .5rem; letter-spacing: .01em; }
.vidu-balao { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .8rem .8rem .8rem .25rem; background: var(--cor-acento); color: var(--cor-sobre-acento); }
.vidu-balao .icone { width: 1.4rem; height: 1.4rem; }

/* Halo do espelho de LED nas fotos de provador */
.hero-1__foto, .galeria-1__trilho .moldura, .chamada-2__foto { box-shadow: var(--halo); }
.hero-1__foto { border-radius: var(--raio) 0 0 var(--raio); }
.hero-1 { overflow: hidden; }
/* Primeira tela: o título e a foto se limitam pela altura da janela, para o botão do WhatsApp caber sem rolar */
.hero-1 h1 { font-size: clamp(3.5rem, min(1.6rem + 6.2vw, 13svh), 8.5rem); }
@media (min-width: 768px) { .hero-1__foto { max-height: calc(100svh - 11rem); } }
.hero-1__texto { padding-bottom: var(--e-6); }
@media (max-width: 767px) {
  .hero-1__texto { padding-bottom: 0; }
  .hero-1__foto { margin-right: 0; border-radius: var(--raio); }
}

/* Galeria: cabe inteira na tela enquanto fica fixa; o halo não é cortado em cima e embaixo */
.galeria-1__trilho { padding-block: var(--e-3) var(--e-4); }
@media (min-width: 900px) {
  .galeria-1 { padding-block: clamp(5.5rem, 12svh, 8rem) var(--e-5); }
  .galeria-1__cabeca { margin-bottom: var(--e-3); }
  .galeria-1__trilho > * { flex-basis: min(26rem, (100svh - 24rem) * .8); }
}

/* Lista da loja: nome da categoria em tipo grande */
.servicos-1__lista h3 { font-size: var(--t-lg); line-height: 1.1; }
.servicos-1__lista li:last-child { border-bottom: 1px solid var(--cor-linha); }

/* Momento tipográfico: faixa laranja com tipo preto e o cabide gigante */
.sobre-2 { background: var(--cor-acento); color: var(--cor-sobre-acento); overflow: hidden; }
.sobre-2 .texto-suave { color: inherit; }
.sobre-2__frase { font-weight: 800; }
.sobre-2__grade { position: relative; z-index: 1; }
.sobre-2::after { content: ""; position: absolute; right: 2vw; bottom: -14%; width: min(38vw, 32rem); aspect-ratio: 1; background: var(--cor-sobre-acento); opacity: .12; -webkit-mask: var(--cabide) center / contain no-repeat; mask: var(--cabide) center / contain no-repeat; pointer-events: none; }
@media (max-width: 767px) { .sobre-2::after { display: none; } }
.sobre-2__assinatura .moldura { box-shadow: 0 0 0 3px var(--cor-sobre-acento); }

/* Lista da loja: a foto do provador ocupa a coluna do título, sem área vazia ao lado da lista */
.servicos-1__foto { width: min(100%, 21rem); aspect-ratio: 4 / 5; box-shadow: var(--halo); }
@media (min-width: 768px) { .servicos-1__cabeca { position: static; } }

/* Crediário: fundo um tom acima para separar da faixa laranja e do fechamento.
   Composição própria (não repete a lista da loja): título e ação em cima, os 3 passos lado a lado numa régua laranja. */
.passos-1 { background: var(--cor-fundo-alt); }
.passos-1__lista h3 { margin-bottom: var(--e-1); }
.passos-1__lista li { padding-top: var(--e-3); border-top: 2px solid var(--cor-acento); }
.passos-1__n { font-weight: 800; }
@media (min-width: 900px) {
  .passos-1__cabeca { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: var(--e-4); }
  .passos-1__cabeca > .sobretitulo { grid-column: 1 / -1; }
  .passos-1__cabeca h2 { max-width: 16ch; }
  .passos-1__acao { margin-top: 0; }
  .passos-1__lista { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); margin-top: var(--e-3); }
}

/* Fechamento */
.chamada-2__faixa { color: var(--cor-acento); font-weight: 800; }

/* Contato sobre claro: o laranja não tem contraste aqui, então hover e foco usam o preto */
.contato-1__link:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.contato-1 :focus-visible { outline-color: var(--cor-fundo); }
.contato-1__horario { align-items: start; padding-block: .75rem; }
.contato-1__rodape { max-width: none; }
/* No celular o espaço do botão fixo fica dentro do rodapé claro, sem faixa preta sobrando embaixo */
@media (max-width: 767px) {
  body { padding-bottom: 0; }
  .contato-1 { padding-bottom: calc(var(--secao) + 5rem); }
}