/* ═══════════════════════════════════════════════════
   Toda Linda · tema da vitrine (a base é o front/ do catalogo-kit)
   Paleta tirada da própria marca: o rosa claro do fundo
   da logo, o vinho-ameixa das letras e o pink forte que
   a loja usa nos destaques dos posts (só decorativo, não
   carrega texto por contraste).
   Tipografia: Bodoni Moda (revista de moda, ecoa o TODA
   em serifa da logo) + Great Vibes (o "Linda" cursivo)
   + Outfit no corpo, legível no celular. As fontes vêm
   do Google, em partes/cabecalho.html.
   Assinatura: o preço como etiqueta de roupa pendurada
   (no kit) e o traço com coração que sai da logo (aqui).
   ═══════════════════════════════════════════════════ */

:root {
  --fundo:     #FCF1F4;   /* fundo base */
  --fundo-translucido: rgba(252, 241, 244, .92);
  --fundo-em-breve:    rgba(252, 241, 244, .6);
  --superficie: #F6D9E2;  /* rosa da logo, superfícies */
  --superficie-forte: #EFC4D2;
  --papel:     #FFFFFF;
  --destaque:  #8A2C57;   /* vinho da logo: botões e títulos, 8:1 no branco */
  --destaque-forte: #6E1F44;
  --acento:    #E5407A;   /* pink dos posts, só acento */
  --tinta:     #2B1620;
  --apagado:   #6B5260;   /* 6,3:1 sobre o fundo */
  --linha:     rgba(138, 44, 87, .16);
  --erro:      #A1123B;
  --sombra-foto: 0 18px 40px -18px rgba(110, 31, 68, .45);
  --sombra-etiqueta: 0 6px 14px -8px rgba(110, 31, 68, .5);
  --veu:       rgba(43, 22, 32, .5);

  --fonte-titulo: 'Bodoni Moda', Georgia, serif;
  --fonte-script: 'Great Vibes', cursive;
  --fonte-texto: 'Outfit', system-ui, -apple-system, sans-serif;
  --largura: 1160px;
  --raio: 10px;
  --raio-grande: 22px;
}

/* a palavra em letra cursiva no meio dos títulos ("especiais", "provar") */
.script { font-family: var(--fonte-script); font-weight: 400; color: var(--destaque); font-size: 1.25em; line-height: .8; letter-spacing: 0; padding-right: .05em; }
.hero h1 .script { display: inline-block; font-size: 1.35em; transform: rotate(-4deg) translateY(6px); }

/* ── logo aprovada pela Carol (a da plaquinha, identidade/logo.png): no topo, no rodapé e no hub ── */
.brand .logo { display: block; width: auto; height: 60px; }
.brand-sm .logo { height: 52px; }
.brand-hub .logo { height: auto; width: min(260px, 72vw); }

/* ── o traço com coração embaixo do hero ── */
.swash { position: absolute; left: 50%; bottom: 14px; width: min(600px, 80vw); transform: translateX(-50%); }
.swash path { fill: none; stroke: var(--destaque); stroke-width: 1.4; opacity: .5; }
.swash .heart { fill: var(--acento); stroke: none; opacity: .9; }

@media (max-width: 640px) {
  .brand .logo { height: 54px; }
  .brand-hub .logo { height: auto; }
}