/* ============================================================
   Tema Vinho & Rosé — Studio de Manicure
   Sobrescreve a escala "pink" do Tailwind 2.x para tons de
   vinho/bordô + rosé. Carregar SEMPRE depois do CSS do Tailwind.
   Mudar a paleta aqui reflete em todo o sistema.
   ============================================================ */
/* Rede de segurança mobile: nunca deixa a página estourar a largura da tela
   (evita telas "cortadas/zoom out" no celular). Flex-items podem encolher. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
*, *::before, *::after {
    min-width: 0;
}

:root {
    --vinho-dark: #5e1530;
    --vinho: #7b1e3b;
    --rose: #be3455;
    --rosa: #f4c8d4;
    --rosa-claro: #fbe6ec;
    --creme: #fff7f3;
}

/* ---- Cores sólidas: background ---- */
.bg-pink-50  { background-color: #fdf4f1; }
.bg-pink-100 { background-color: #fbe6ec; }
.bg-pink-200 { background-color: #f4c8d4; }
.bg-pink-300 { background-color: #e6a3b6; }
.bg-pink-400 { background-color: #d56e8c; }
.bg-pink-500 { background-color: #be3455; }
.bg-pink-600 { background-color: #7b1e3b; }
.bg-pink-700 { background-color: #5e1530; }
.bg-pink-800 { background-color: #4a1026; }
.hover\:bg-pink-50:hover  { background-color: #fdf4f1; }
.hover\:bg-pink-100:hover { background-color: #fbe6ec; }
.hover\:bg-pink-200:hover { background-color: #f4c8d4; }
.hover\:bg-pink-500:hover { background-color: #be3455; }
.hover\:bg-pink-600:hover { background-color: #7b1e3b; }
.hover\:bg-pink-700:hover { background-color: #5e1530; }

/* ---- Cores sólidas: texto ---- */
.text-pink-50  { color: #fdf4f1; }
.text-pink-100 { color: #fbe6ec; }
.text-pink-200 { color: #f4c8d4; }
.text-pink-300 { color: #e6a3b6; }
.text-pink-400 { color: #d56e8c; }
.text-pink-500 { color: #be3455; }
.text-pink-600 { color: #7b1e3b; }
.text-pink-700 { color: #5e1530; }
.text-pink-800 { color: #4a1026; }
.hover\:text-pink-600:hover { color: #7b1e3b; }
.hover\:text-pink-700:hover { color: #5e1530; }
.hover\:text-pink-800:hover { color: #4a1026; }

/* ---- Bordas ---- */
.border-pink-100 { border-color: #fbe6ec; }
.border-pink-200 { border-color: #f4c8d4; }
.border-pink-300 { border-color: #e6a3b6; }
.border-pink-400 { border-color: #d56e8c; }
.border-pink-500 { border-color: #be3455; }
.border-pink-600 { border-color: #7b1e3b; }
.hover\:border-pink-300:hover { border-color: #e6a3b6; }
.hover\:border-pink-400:hover { border-color: #d56e8c; }
.hover\:border-pink-500:hover { border-color: #be3455; }
.focus\:border-pink-500:focus { border-color: #be3455; }

/* ---- Anéis de foco (ring) ---- */
.ring-pink-200 { --tw-ring-color: #f4c8d4; }
.ring-pink-300 { --tw-ring-color: #e6a3b6; }
.ring-pink-400 { --tw-ring-color: #d56e8c; }
.ring-pink-500 { --tw-ring-color: #be3455; }
.focus\:ring-pink-200:focus { --tw-ring-color: #f4c8d4; }
.focus\:ring-pink-300:focus { --tw-ring-color: #e6a3b6; }
.focus\:ring-pink-400:focus { --tw-ring-color: #d56e8c; }
.focus\:ring-pink-500:focus { --tw-ring-color: #be3455; }

/* ---- Gradientes: from ---- */
.from-pink-50  { --tw-gradient-from: #fdf4f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253,244,241,0)); }
.from-pink-100 { --tw-gradient-from: #fbe6ec; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251,230,236,0)); }
.from-pink-400 { --tw-gradient-from: #d56e8c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(213,110,140,0)); }
.from-pink-500 { --tw-gradient-from: #be3455; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(190,52,85,0)); }
.from-pink-600 { --tw-gradient-from: #7b1e3b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(123,30,59,0)); }
.hover\:from-pink-500:hover { --tw-gradient-from: #be3455; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(190,52,85,0)); }
.hover\:from-pink-600:hover { --tw-gradient-from: #7b1e3b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(123,30,59,0)); }

/* ---- Gradientes: to ---- */
.to-pink-50  { --tw-gradient-to: #fdf4f1; }
.to-pink-100 { --tw-gradient-to: #fbe6ec; }
.to-pink-500 { --tw-gradient-to: #be3455; }
.to-pink-600 { --tw-gradient-to: #7b1e3b; }
.to-pink-700 { --tw-gradient-to: #5e1530; }
.hover\:to-pink-600:hover { --tw-gradient-to: #7b1e3b; }
.hover\:to-pink-700:hover { --tw-gradient-to: #5e1530; }

/* ============================================================
   Componentes de marca reutilizáveis
   ============================================================ */
/* Título elegante */
.brand-title { font-family: 'Playfair Display', Georgia, serif; letter-spacing: 0.4px; }

/* Medalhão do logo (usado no header das telas) */
.logo-medalhao {
    background: #fff;
    box-shadow: 0 8px 24px rgba(94, 21, 48, 0.40);
    border: 3px solid rgba(255, 255, 255, 0.92);
    outline: 2px solid var(--rosa);
    overflow: hidden;
}
.logo-medalhao img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }