/* Vitrine Mundo Ghio · 25/09/2026
   Paleta e fontes do identidade/design-guide.md dela. O teal nunca carrega texto (2,8:1):
   ele vive em forma, borda e ponto. Texto é sempre grafite sobre branco, areia ou amarelo,
   ou branco sobre grafite. Nada de sombra dura, nada de preto puro, nada de dark mode.
   Os mecanismos (vídeo do topo, coração, cards que nascem) moram em mecanismos.css. */

@font-face {
  font-family: "Poppins";
  src: url("../fontes/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fontes/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fontes/montserrat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fontes/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --branco: #FFFFFF;
  --grafite: #3A3A3A;
  --areia: #EAE0D6;
  --areia-clara: #F6F1EC;
  --teal: #62A89D;
  --roxo: #8B7FA7;
  --coral: #EC6E62;
  --amarelo: #F5B434;
  --amarelo-claro: #F8C868;
  --lateral: 16px;
  --largura: 1180px;
  --titulo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* O guia: Poppins no título, Montserrat no corpo, Nunito no apoio (régua bloco 1). */
  --corpo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --apoio: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
}

img,
video {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--grafite);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--roxo);
  outline-offset: 3px;
}

.so-leitor {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 60;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--grafite);
  color: var(--branco);
  font-weight: 700;
  text-decoration: none;
}

.pular:focus {
  top: 16px;
}

/* Botões: pílula amarela com texto grafite (6,2:1), como pede o guia. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid var(--amarelo);
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--grafite);
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  border-color: var(--amarelo-claro);
  background: var(--amarelo-claro);
}

.link-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 4px;
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--teal);
}

.link-pdf svg {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ==== Topo: o vídeo real da impressora ==== */

.topo {
  position: relative;
  background: var(--branco);
}

.topo-logo {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: block;
  padding: 8px 10px;
  border-radius: 18px;
  background: var(--branco);
  line-height: 0;
}

.topo-logo img {
  width: auto;
  height: 60px;
}

.topo-palco {
  position: relative;
}

.topo-enfeite {
  display: none;
}

.topo-quadro {
  height: 540px;
  height: clamp(380px, 60vh, 540px);
  height: clamp(380px, 60svh, 540px);
  overflow: hidden;
  background: var(--areia);
}

.topo-quadro video {
  object-position: 50% 40%;
}

.topo-texto {
  position: relative;
  z-index: 2;
  margin-top: -28px;
  padding: 26px var(--lateral) 22px;
  border-radius: 28px 28px 0 0;
  background: var(--branco);
}

.frase {
  margin: 0 0 14px;
  font-family: var(--titulo);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.frase .p {
  display: block;
}

.frase .p::before {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-right: 0.34em;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: 0.14em;
}

.frase .p2::before {
  background: var(--roxo);
}

.frase .p3::before {
  background: var(--coral);
}

.topo-apoio {
  max-width: 34ch;
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.45;
}

.topo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

/* ==== Faixa de data ==== */

.faixa-data {
  background: var(--areia);
}

.faixa-data-dentro {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 14px var(--lateral);
}

.faixa-data svg {
  flex: none;
  width: 34px;
  height: 34px;
}

.faixa-data p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.faixa-data strong {
  display: block;
  font-family: var(--titulo);
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 899px) {
  .faixa-data-dentro {
    padding-right: calc(var(--mg-coracao-tam) + var(--mg-coracao-x) + 10px);
  }
}

/* ==== Vitrine ==== */

.vitrine {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 36px var(--lateral) 8px;
  scroll-margin-top: 8px;
}

.vitrine-titulo {
  margin: 0 0 18px;
  font-family: var(--titulo);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

/* O achador só aparece quando o vitrine.js liga (sem JS, a vitrine mostra tudo). */
.achador {
  display: none;
  margin: 0 0 22px;
}

.tem-achador .achador {
  display: block;
}

.achador-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.achador-rotulo {
  width: 100%;
  margin: 0 0 2px;
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 600;
}

.chip {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--areia);
  border-radius: 999px;
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--teal);
}

.chip[aria-pressed="true"] {
  border-color: var(--grafite);
  background: var(--grafite);
  color: var(--branco);
}

.achador-conta {
  margin: 2px 0 0;
  font-family: var(--apoio);
  font-size: 15px;
}

.vazio {
  margin: 0 0 24px;
  padding: 20px;
  border: 2px dashed var(--areia);
  border-radius: 20px;
  text-align: center;
}

.vazio p {
  margin: 0 0 12px;
}

/* Sem "dense": a ordem da tela é a do HTML (teclado e leitor de tela descem na mesma ordem).
   O cartão largo abre a grade e o cartão do PDF fecha: 12 casas, sem buraco em 2, 3 e 4 colunas. */
.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 10px;
  border: 1.5px solid var(--areia);
  border-radius: 20px;
  background: var(--branco);
  scroll-margin-top: 16px;
}

.card-foto {
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--areia-clara);
}

.card-foto img {
  display: block;
  width: 100%;
  height: auto;
}

.card-corpo {
  padding: 10px 4px 0;
}

.card-nome {
  margin: 0 0 4px;
  font-family: var(--titulo);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.card-linha {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
}

.card-faixa {
  font-weight: 700;
}

.card-var {
  font-family: var(--apoio);
}

.card .botao {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
}

/* Os dois botões de cada peça (Amazon, principal; WhatsApp, segunda opção mais leve, D3 de 01/10). */
.card-botoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

/* O WhatsApp: segunda opção, de contorno, do mesmo tamanho do botão da Amazon. Fundo branco, borda e
   logo oficial no verde do WhatsApp, texto grafite (11,4:1). Logo e texto juntos, no centro, numa linha
   só (reprovas de 01/10: bloco de texto colado, logo mal posicionado). */
.botao-wa,
.card .botao-wa {
  gap: 12px;
  border: 2px solid #25D366;
  background: var(--branco);
  color: var(--grafite);
  white-space: nowrap;
}

.botao-wa:hover {
  border-color: #1DA851;
  background: #F0FBF4;
}

.botao-wa .wa-logo {
  flex: none;
  width: 20px;
  height: 20px;
  color: #25D366;
}

/* Logo preso na esquerda, texto no centro do botão inteiro (nota do Junior, 01/10 00:28). A terceira
   coluna, vazia, tem a largura do logo: é ela que deixa o texto no centro de verdade. */
.botao-wa,
.card .botao-wa {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  column-gap: 8px;
  align-items: center;
  padding-left: 14px;
  padding-right: 14px;
  text-align: center;
}

.botao-wa .wa-logo { grid-column: 1; }
.botao-wa .wa-l,
.botao-wa .wa-m,
.botao-wa .wa-c { grid-column: 2; grid-row: 1; }

/* O texto acompanha a largura do botão: a frase inteira onde cabe, a média no card de 3 e 4 colunas,
   a curta no card de duas colunas do celular. Sem container query, fica a curta. */
.card-botoes {
  container-type: inline-size;
}

.wa-l,
.wa-m {
  display: none;
}

@container (min-width: 200px) {
  .wa-c { display: none; }
  .wa-m { display: inline; }
}

@container (min-width: 360px) {
  .wa-m { display: none; }
  .wa-l { display: inline; }
}

/* O Cubo Infinito: a peça com variação viva de cor, em cartão largo com a cartela real. */
.card-larga {
  display: grid;
  grid-column: 1 / -1;
  grid-template-areas:
    "foto corpo"
    "cartela cartela"
    "botao botao";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
}

.card-larga .card-foto {
  grid-area: foto;
}

.card-larga .card-corpo {
  grid-area: corpo;
  padding-top: 4px;
}

.card-larga .cartela {
  grid-area: cartela;
}

.card-larga .card-botoes {
  grid-area: botao;
  margin-top: 12px;
}

.cartela {
  margin-top: 12px;
}

.cartela-rotulo {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.cartela-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 100px));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartela-cor {
  display: block;
  border-radius: 12px;
  color: var(--grafite);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.cartela-cor img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  border: 2px solid var(--areia);
  border-radius: 12px;
}

.cartela-cor:hover img {
  border-color: var(--teal);
}

.cartela-cor span:first-of-type {
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* O último cartão: o catálogo em PDF (sem foto; o ícone ocupa o lugar dela no mesmo quadrado). */
.card-pdf {
  background: var(--areia-clara);
}

.card-pdf-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: var(--branco);
}

.card-pdf-icone svg {
  width: 38%;
  height: auto;
}

.botao-claro {
  border-color: var(--grafite);
  background: var(--branco);
}

.botao-claro:hover {
  border-color: var(--grafite);
  background: var(--areia);
}

.aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.aviso svg {
  flex: none;
  width: 26px;
  height: 26px;
}

/* ==== Quem faz ==== */

.quem {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 32px var(--lateral) 20px;
}

.quem-caixa {
  padding: 24px 20px;
  border: 2px solid var(--teal);
  border-radius: 24px;
}

.quem-titulo {
  margin: 0 0 14px;
  font-family: var(--titulo);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.quem-lista {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quem-lista li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}

.quem-lista li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--teal);
}

.quem-lista li:nth-child(2)::before {
  background: var(--roxo);
}

.quem-lista li:nth-child(3)::before {
  background: var(--coral);
}

.personalizados {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 8px var(--lateral) 40px;
  font-size: 16px;
}

.personalizados svg {
  flex: none;
  width: 28px;
  height: 28px;
}

/* O padding dá os 44 px de toque; a margem negativa devolve a linha à altura das outras (sem ela a
   segunda linha descia 11 px e a estrela ficava solta no vão, revisão mobile de 26/09). */
.personalizados a {
  display: inline-block;
  padding: 11px 0;
  margin: -11px 0;
  font-weight: 700;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ==== Rodapé (folga embaixo para o coração fixo) ==== */

.rodape {
  padding: 36px var(--lateral) 112px;
  background: var(--areia);
  text-align: center;
}

.rodape img {
  width: auto;
  height: 96px;
}

.rodape p {
  margin: 10px 0;
}

.rodape-afeto {
  font-family: var(--apoio);
  font-size: 18px;
  font-weight: 800;
}

.rodape-links a {
  display: inline-block;
  padding: 10px 6px;
  font-weight: 700;
}

/* No celular os dois links ficam um embaixo do outro, e o ponto do meio sai. */
@media (max-width: 559px) {
  .rodape-links a {
    display: block;
    width: max-content;
    margin: 0 auto;
  }

  .rodape-sep {
    display: none;
  }
}

.rodape-data {
  font-family: var(--apoio);
  font-size: 14px;
}

/* ==== Telas maiores ==== */

@media (min-width: 700px) {
  :root {
    --lateral: 28px;
  }

  .grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .card-larga {
    grid-column: span 2;
  }

  .card-nome {
    font-size: 17px;
  }

  .card-linha,
  .card-meta {
    font-size: 15px;
  }

  .vitrine-titulo {
    font-size: 32px;
  }

  .quem-caixa {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    padding: 32px;
  }

  .quem-lista li {
    font-size: 17px;
  }
}

@media (min-width: 900px) {
  .topo {
    display: grid;
    grid-template-areas:
      ". palco"
      "logo palco"
      "texto palco"
      ". palco";
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 56px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 36px var(--lateral) 44px;
  }

  .topo-logo {
    position: static;
    grid-area: logo;
    align-self: end;
    justify-self: start;
    padding: 0;
    border-radius: 0;
  }

  .topo-logo img {
    height: 132px;
  }

  .topo-palco {
    grid-area: palco;
    width: 524px;
    height: 803px;
    padding: 28px 76px 28px 28px;
  }

  .topo-enfeite {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .topo-quadro {
    position: relative;
    z-index: 1;
    width: 420px;
    height: 747px;
    border-radius: 28px;
  }

  .topo-texto {
    grid-area: texto;
    margin: 0;
    padding: 28px 0 0;
    border-radius: 0;
    background: none;
  }

  .frase {
    margin-bottom: 22px;
    font-size: 64px;
    line-height: 1.06;
  }

  .topo-apoio {
    max-width: 30ch;
    margin-bottom: 26px;
    font-size: 20px;
  }

  .faixa-data-dentro {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .faixa-data p {
    font-size: 16px;
  }

  .faixa-data strong {
    display: inline;
    margin-right: 10px;
    font-size: 17px;
  }
}

@media (min-width: 1000px) {
  .grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .card {
    padding: 10px 10px 12px;
  }

  .card-larga {
    column-gap: 18px;
  }

  .vitrine {
    padding-top: 48px;
  }
}

/* Casa e utilidades (decisão GV2, 05/10/2026): seção própria depois dos presentes, fora do achador */
.util { margin-top: 64px; }
.util .vitrine-titulo { margin-bottom: 24px; }

/* Orçamento e lembrancinhas (pedido da Gi, 05/10/2026) */
.link-orcamento { margin-left: 18px; }
.link-orcamento .wa-logo { width: 18px; height: 18px; color: #25D366; margin-right: 6px; vertical-align: -3px; }
.lembrancinhas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 48px 0 8px; padding: 26px 28px;
  border: 2px solid #62A89D; border-radius: 24px; }
.lemb-icone svg { width: 40px; height: 40px; display: block; }
.lemb-texto { flex: 1 1 260px; }
.lemb-titulo { margin: 0 0 4px; font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 600; }
.lemb-texto p { margin: 0; }
.lembrancinhas .botao-wa { flex: 0 0 auto; }