/* ============================================================
   Tema Rose Gold — Isabela Raissa | Designer de Sobrancelhas

   A paleta em si mora em build/input.css (bloco @theme), que remapeia a
   escala "pink" do Tailwind para o rose gold do logo. Este arquivo guarda
   só o que o Tailwind não cobre: rede de segurança mobile, variáveis de
   marca e componentes próprios. Carregar SEMPRE depois de tailwind.css.
   ============================================================ */

/* 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 {
    --ir-preto:      #1a1a1a;
    --rose-escuro:   #8c523a;
    --rose:          #b87456;
    --rose-claro:    #e0a88b;
    --rose-suave:    #f7e4d9;
    --creme:         #fdf6f1;
}

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

/* Cartão do logo (usado no header das telas).
   O logo é retangular (monograma IR + nome), então é exibido inteiro num
   cartão branco — nada de recorte circular. */
.logo-medalhao {
    background: #fff;
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.35);
    outline: 2px solid var(--rose-claro);
    outline-offset: 2px;
}
.logo-medalhao img { width: 100%; height: auto; display: block; }