/* =========================================================
   COBAG — estilos do site
   Baseado no Manual de Identidade Visual v1.0 + Opção B.
   Cores e fontes ficam nas variáveis abaixo: mude aqui e o
   site inteiro acompanha.
   ========================================================= */

:root {
  /* Cores principais (manual, pág. 04) */
  --azul: #1749B1;          /* Azul Cobag */
  --laranja: #FF7A16;       /* Laranja Solar */
  --amarelo: #FFC52F;       /* Amarelo Manga */
  --rosa: #F05A91;          /* Rosa Pop */

  /* Cores de apoio */
  --verde: #268451;
  --creme: #FFF4E8;
  --vermelho: #D9362B;
  --preto: #1E1E1E;

  /* Variações usadas no site */
  --rosa-letreiro: #DE79B3;  /* fundo do letreiro animado */
  --azul-escuro: #0F3585;    /* hover de botões azuis */
  --rosa-texto: #C2185B;     /* rosa legível para texto pequeno */
  --cinza-texto: #4A4A4A;

  /* Tipografia (manual, pág. 05) */
  --fonte-titulo: 'Archivo Black', system-ui, sans-serif;  /* títulos, logo, chamadas */
  --fonte-texto: 'DM Sans', system-ui, sans-serif;         /* textos do site */

  --raio: 26px;
  --largura: 1200px;
}

/* === BASE === */
body {
  font-family: var(--fonte-texto);
  color: var(--preto);
  background: var(--creme);
  font-synthesis: none; /* Archivo Black só tem um peso: não deixa o navegador "engrossar" */
}

h1, h2, h3, h4, h5,
.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  color: var(--azul);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

a { color: var(--azul); }
a:hover { color: var(--rosa-texto); }

:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 3px;
}

main { min-height: 60vh; }

.container-cobag {
  max-width: var(--largura);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.secao-titulo {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  margin-bottom: 0.4rem;
}

.secao-subtitulo {
  color: var(--cinza-texto);
  font-size: 1.12rem;
  margin-bottom: 1.9rem;
}

/* Faixa de cores do manual */
.faixa-cores {
  height: 10px;
  background: linear-gradient(90deg,
    var(--azul) 0 20%, var(--laranja) 20% 40%, var(--amarelo) 40% 60%,
    var(--rosa) 60% 80%, var(--verde) 80% 100%);
}

/* === BOTÕES === */
.btn-cobag,
.btn-cobag-outline,
.btn-whatsapp,
.btn-mercadopago {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 1.1rem;
  border-radius: 999px;
  padding: 0 2rem;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}

.btn-cobag:hover,
.btn-cobag-outline:hover,
.btn-whatsapp:hover { transform: translateY(-2px); }

/* Amarelo com texto escuro ("Quero Cor!") */
.btn-cobag {
  --bs-btn-color: var(--preto);
  --bs-btn-bg: var(--amarelo);
  --bs-btn-border-color: var(--amarelo);
  --bs-btn-hover-color: var(--preto);
  --bs-btn-hover-bg: #FFD45C;
  --bs-btn-hover-border-color: #FFD45C;
  --bs-btn-active-bg: #F2B414;
  --bs-btn-active-color: var(--preto);
  --bs-btn-disabled-bg: #E8DCC0;
  --bs-btn-disabled-color: #6B6B6B;
}

/* Contorno azul ("Ver queridinhas") */
.btn-cobag-outline {
  --bs-btn-color: var(--azul);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--azul);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--azul);
  --bs-btn-hover-border-color: var(--azul);
  --bs-btn-active-bg: var(--azul-escuro);
  --bs-btn-active-color: #fff;
}

/* Verde da marca para WhatsApp */
.btn-whatsapp {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--verde);
  --bs-btn-border-color: var(--verde);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1D6A40;
  --bs-btn-hover-border-color: #1D6A40;
  --bs-btn-active-bg: #175633;
  --bs-btn-active-color: #fff;
}

/* === CABEÇALHO (azul) === */
.navbar-cobag {
  background: var(--azul);
  padding: 14px 0;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* logo completo (símbolo + "cobag"), feito para fundo azul ou escuro */
.logo-cobag {
  display: block;
  height: 48px;
  width: auto;
}

.wordmark {
  font-family: var(--fonte-titulo);
  font-size: 34px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}

.navbar-cobag .nav-link {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 0.75rem 0;
}

.navbar-cobag .nav-link:hover,
.navbar-cobag .nav-link.active {
  color: var(--amarelo);
}

.icone-carrinho {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--amarelo);
  color: var(--preto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icone-carrinho:hover { background: #FFD45C; }

.contador-carrinho {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--rosa);
  color: var(--preto);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  border: 2px solid var(--azul);
}

.navbar-cobag .navbar-toggler {
  border: 2px solid rgba(255, 255, 255, 0.6);
  width: 46px;
  height: 46px;
  padding: 0;
}

@media (min-width: 768px) {
  .navbar-cobag .navbar-nav { gap: 36px; }
}

@media (max-width: 767.98px) {
  .wordmark { font-size: 28px; }
  .marca .logo-cobag { height: 40px; }
  .navbar-cobag .navbar-nav { padding: 0.5rem 0 0.75rem; text-align: center; }
}

/* === TOPO DA HOME (creme) === */
.hero {
  padding: 56px 0 88px;
  overflow: hidden;
}

.hero-grade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.hero-texto { flex: 1 1 460px; min-width: 0; }
.hero-imagens {
  flex: 1 1 400px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 7.5vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Cada palavra com seu próprio bloco amarelo */
.destaque-palavra {
  display: inline-block;
  margin-top: 10px;
  background: var(--amarelo);
  color: var(--azul);
  padding: 0.02em 0.12em 0.06em;
  border-radius: 0.14em;
}

.hero p.lead {
  margin: 24px 0 32px;
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 480px;
  color: #3A3A3A;
}

.hero-imagens img,
/* no site publicado: foto pendente vira só um bloco na cor da marca, sem texto */
.placeholder-imagem.placeholder-publicado {
  border: 0;
  background: var(--creme);
}

.hero-imagens .placeholder-imagem {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 24px;
  border: 4px solid #fff;
  box-sizing: border-box;
}

.hero-imagens > :first-child { transform: rotate(-3deg); }
.hero-imagens > :last-child { transform: rotate(3deg) translateY(28px); }

/* === LETREIRO ANIMADO === */
.letreiro {
  background: var(--rosa-letreiro);
  color: var(--preto);
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--fonte-titulo);
  font-size: 22px;
}

.letreiro-trilho {
  display: inline-flex;
  width: max-content;
  animation: letreiro 40s linear infinite;
}

.letreiro-trilho span { padding-right: 0.5em; }
.letreiro:hover .letreiro-trilho { animation-play-state: paused; }

@keyframes letreiro {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* === CARDS DE MODELO (home) === */
.modelos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.modelo-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--raio);
  color: var(--preto);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.modelo-card:hover { color: var(--preto); transform: translateY(-4px); }

.modelo-card svg {
  width: 100%;
  max-width: 190px;
  height: auto;
  align-self: center;
}

.modelo-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 26px;
  line-height: 1.05;
}

/* nome + legenda ocupam a sobra, empurrando o botão para o pé do cartão */
.modelo-texto { flex: 1; }

.modelo-legenda {
  display: block;
  margin-top: 4px;
  font-weight: 500;
}

/* Packing BAG: as duas legendas na mesma célula; a altura é a da maior */
.legenda-troca { display: grid; }
.legenda-troca > span { grid-area: 1 / 1; }

.modelo-botao {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--preto);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.modelo-amarelo { background: var(--amarelo); }
.modelo-rosa { background: var(--rosa); }
.modelo-laranja { background: var(--laranja); }
.modelo-verde { background: var(--verde); color: #fff; }
.modelo-verde:hover { color: #fff; }
.modelo-verde .modelo-botao { background: #fff; color: var(--preto); }

/* Packing BAG: ícone inflado -> comprimido ao passar o mouse */
.modelo-card .icone-comprimida { display: none; }
.modelo-card:hover .icone-inflada,
.modelo-card:focus-visible .icone-inflada { display: none; }
.modelo-card:hover .icone-comprimida,
.modelo-card:focus-visible .icone-comprimida { display: block; }
.modelo-card .legenda-comprimida { visibility: hidden; }
.modelo-card:hover .legenda-inflada,
.modelo-card:focus-visible .legenda-inflada { visibility: hidden; }
.modelo-card:hover .legenda-comprimida,
.modelo-card:focus-visible .legenda-comprimida { visibility: visible; }

/* === CARD DE PRODUTO (vitrine e "Queridinhas") === */
.produtos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.produto-card {
  display: block;
  background: #fff;
  border-radius: 22px;
  padding: 10px 10px 18px;
  text-decoration: none;
  color: var(--preto);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.produto-card:hover {
  color: var(--preto);
  transform: translateY(-4px);
  box-shadow: 0 8px 0 var(--amarelo);
}

.produto-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--creme);
}

.produto-foto > img:not(.produto-estampa-selo),
.produto-foto > .placeholder-imagem:not(.produto-estampa-selo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* bolinha com a estampa no canto da foto */
.produto-estampa-selo {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.produto-categoria {
  margin: 12px 6px 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rosa-texto);
}

.produto-nome {
  margin: 0 6px;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  line-height: 1.15;
  color: var(--preto);
}

.produto-preco {
  margin: 4px 6px 0;
  font-weight: 700;
  color: var(--azul);
  font-size: 18px;
}

/* celular: dois cards por linha */
@media (max-width: 575.98px) {
  .produtos-grade,
  .modelos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .modelo-card { padding: 16px; gap: 10px; border-radius: 20px; }
  .modelo-nome { font-size: 18px; }
  .modelo-legenda { font-size: 13px; }
  .modelo-botao { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .produto-nome { font-size: 15px; }
  .produto-preco { font-size: 15px; }
  .produto-categoria { font-size: 10px; }
  .placeholder-imagem { font-size: 11px; padding: 6px; }
  .placeholder-imagem code { font-size: 10px; }
  .placeholder-imagem small { display: none; }
  .produto-estampa-selo { width: 24px; height: 24px; left: 6px; bottom: 6px; border-width: 2px; }
}

.lista-vazia {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--cinza-texto);
  padding: 3rem 0;
}

/* === FILTROS (página de produtos) === */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  min-height: 46px;
  padding: 0.4rem 1.25rem;
  border: 2px solid var(--azul);
  border-radius: 999px;
  background: #fff;
  color: var(--azul);
  font-family: var(--fonte-texto);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chip:hover {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--preto);
}

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

.chip-limpar {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* bolinhas de estampa (filtro e página do produto) */
.estampas-seletor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.estampa-bolinha {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  outline: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0 0 2px #E5D6C6;
}

.estampa-bolinha img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.estampa-bolinha[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--azul);
}

/* === PÁGINA DO PRODUTO === */
.produto-galeria-principal {
  border-radius: var(--raio);
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1;
}

.produto-galeria-principal img,
.produto-galeria-principal .placeholder-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniaturas {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.miniatura {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

.miniatura img,
.miniatura .placeholder-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniatura[aria-current="true"] { border-color: var(--rosa); }

.produto-detalhe-preco {
  font-family: var(--fonte-titulo);
  font-size: 2.2rem;
  color: var(--azul);
}

.rotulo-opcao {
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 0.5rem;
}

.rotulo-opcao span { color: var(--preto); font-weight: 500; }

.quantidade {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--azul);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.quantidade button {
  width: 46px;
  height: 46px;
  border: 0;
  background: #fff;
  color: var(--azul);
  font-size: 1.2rem;
  font-weight: 700;
}

.quantidade button:hover { background: var(--amarelo); color: var(--preto); }

.quantidade output,
.quantidade span {
  min-width: 36px;
  text-align: center;
  font-weight: 700;
}

.produto-info {
  background: #fff;
  border-radius: var(--raio);
  padding: 1.25rem 1.5rem 0.5rem;
}

.produto-info dt {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  color: var(--azul);
}

.produto-info dd {
  color: var(--cinza-texto);
  margin-bottom: 0.9rem;
}

.breadcrumb a { text-decoration: none; font-weight: 500; }

/* === CARRINHO (painel lateral) === */
.offcanvas { background: var(--creme); }
.offcanvas-title { color: var(--azul); }

.carrinho-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  background: #fff;
  border-radius: 14px;
}

.carrinho-item img,
.carrinho-item .placeholder-imagem {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.carrinho-item .nome {
  font-family: var(--fonte-titulo);
  color: var(--preto);
  line-height: 1.2;
}

.carrinho-item .detalhe {
  color: var(--cinza-texto);
  font-size: 0.88rem;
}

.carrinho-item .quantidade button {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}

.carrinho-remover {
  border: 0;
  background: none;
  color: var(--cinza-texto);
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0.25rem 0;
  min-height: 32px;
}

.carrinho-total {
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  color: var(--azul);
}

/* Entrega e pagamento (rodapé do carrinho) */
.frete-opcoes:empty { display: none; }

.frete-opcao {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.4rem;
  border: 2px solid #E3D9CC;
  border-radius: 12px;
  cursor: pointer;
}
.frete-opcao:has(input:checked) { border-color: var(--azul); background: #EEF3FC; }
.frete-opcao input { accent-color: var(--azul); flex-shrink: 0; }
.frete-opcao .frete-nome { flex-grow: 1; line-height: 1.25; }

.checkout-erro { color: var(--vermelho); }
.checkout-erro:empty { display: none; }
.checkout-aviso { color: var(--rosa-texto); }

/* Acompanhar pedido: etapas e rastreio */
.etapas-pedido {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.etapas-pedido li {
  flex: 1;
  padding-top: 0.6rem;
  border-top: 6px solid #E3D9CC;
  font-size: 0.9rem;
  color: var(--cinza-texto);
}
.etapas-pedido li.feita { border-top-color: var(--verde); color: var(--preto); font-weight: 700; }

.caixa-rastreio {
  background: #EEF3FC;
  border-left: 6px solid var(--azul);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

/* Azul Cobag no botão de pagamento */
.btn-mercadopago {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--azul);
  --bs-btn-border-color: var(--azul);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--azul-escuro);
  --bs-btn-hover-border-color: var(--azul-escuro);
  --bs-btn-active-bg: var(--azul-escuro);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--azul);
  --bs-btn-disabled-color: #fff;
}

/* === SOBRE NÓS === */
.featurette {
  align-items: center;
}

.featurette-heading {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
}

.featurette-heading span { color: var(--rosa-texto); }

.featurette img,
.featurette .placeholder-imagem {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio);
}

.featurette-divider {
  margin: 4rem 0;
  border: 0;
  height: 10px;
  opacity: 1;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--azul) 0 20%, var(--laranja) 20% 40%, var(--amarelo) 40% 60%,
    var(--rosa) 60% 80%, var(--verde) 80% 100%);
}

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.pilar {
  background: #fff;
  border-radius: 22px;
  padding: 24px 20px;
  text-align: center;
}

.pilar svg { width: 48px; height: 48px; }

.pilar h3 {
  margin: 12px 0 6px;
  font-size: 1.1rem;
  color: var(--preto);
}

.pilar p { margin: 0; color: var(--cinza-texto); font-size: 0.95rem; }

/* === CAIXAS BRANCAS (contato) === */
.caixa {
  background: #fff;
  border-radius: var(--raio);
  padding: 1.75rem;
}

.contato-item {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.contato-item .icone-circulo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.contato-item strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  color: var(--azul);
}

.contato-item span,
.contato-item a { color: var(--cinza-texto); }

.bg-amarelo { background: var(--amarelo); color: var(--preto); }
.bg-rosa { background: var(--rosa); color: var(--preto); }
.bg-verde { background: var(--verde); color: #fff; }

/* === PÁGINAS DE TEXTO (políticas) === */
.texto-pagina {
  max-width: 760px;
  margin: 0 auto;
}

.texto-pagina h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.texto-pagina h2 { margin-top: 2.5rem; font-size: 1.6rem; }

.placeholder-texto {
  background: #FFF0C2;
  border-left: 5px solid var(--amarelo);
  padding: 0.75rem 1rem;
  border-radius: 0 10px 10px 0;
}

/* === FORMULÁRIO === */
.form-control,
.form-select {
  border: 2px solid #E5D6C6;
  border-radius: 14px;
  min-height: 50px;
  background-color: #fff;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 0.25rem rgba(23, 73, 177, 0.2);
}

.form-label { font-weight: 700; color: var(--azul); }

/* === RODAPÉ (preto) === */
.rodape {
  background: var(--preto);
  color: #fff;
  margin-top: 4rem;
}

.rodape-conteudo {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  padding-top: 56px;
  padding-bottom: 28px;
}

.rodape .wordmark {
  display: block;
  font-size: 52px;
  color: var(--amarelo);
}

.rodape .logo-rodape { height: 72px; }

.rodape .slogan {
  margin: 8px 0 0;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 14px;
}

.rodape .footer-titles {
  margin: 0 0 12px;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  color: var(--rosa);
}

.rodape ul { list-style: none; padding: 0; margin: 0; }

.rodape li a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  color: #fff;
  text-decoration: none;
}

.rodape li a:hover { color: var(--amarelo); }

.rodape .copyright {
  color: #BDBDBD;
  font-size: 0.85rem;
  text-align: center;
  padding-bottom: 20px;
  margin: 0;
}

/* === BOTÃO FLUTUANTE DO WHATSAPP === */
.whatsapp-flutuante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  z-index: 1030;
  text-decoration: none;
}

.whatsapp-flutuante:hover { color: #fff; background: #1D6A40; }

/* =========================================================
   PLACEHOLDER DE IMAGEM
   Quando uma foto ainda não existe na pasta img/, o script
   troca a imagem por esta caixa, mostrando o caminho exato
   onde o arquivo deve ser colocado.
   ========================================================= */
.placeholder-imagem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(23, 73, 177, 0.06) 0 12px, transparent 12px 24px),
    #FFFFFF;
  border: 2px dashed var(--azul);
  color: var(--azul);
  font-family: var(--fonte-texto);
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  box-sizing: border-box;
}

.placeholder-imagem svg { width: 30px; height: 30px; flex: 0 0 auto; }
.placeholder-imagem strong { font-weight: 700; }
.placeholder-imagem code {
  color: var(--rosa-texto);
  font-size: 12px;
  word-break: break-all;
}
.placeholder-imagem small { color: var(--cinza-texto); }

/* em espaços pequenos (miniaturas, carrinho) mostra só o ícone */
.miniatura .placeholder-imagem code,
.miniatura .placeholder-imagem small,
.miniatura .placeholder-imagem strong,
.carrinho-item .placeholder-imagem code,
.carrinho-item .placeholder-imagem small,
.carrinho-item .placeholder-imagem strong,
.produto-estampa-selo.placeholder-imagem * { display: none; }

/* respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .letreiro-trilho { animation: none; }
}