:root {
    --cor-rosa: #d63384; 
    --cor-rosa-hover: #c21b6c;
    --cor-fundo: #f8f9fa;
}

body {
    background-color: var(--cor-fundo);
    font-family: 'Nunito', sans-serif;
    /* Padrão de fundo responsivo */
    background-image: radial-gradient(#eecce0 1px, transparent 1px);
    background-size: 20px 20px;
}

h1, h2, h5 {
    font-family: 'Lora', serif;
}

/* Ajuste fino para tipografia em telas muito pequenas */
@media (max-width: 576px) {
    h1 {
        font-size: 2rem; /* Garante que o nome não quebre feio */
    }
}

.text-rosa {
    color: var(--cor-rosa) !important;
}

.btn-rosa {
    background-color: var(--cor-rosa);
    color: white;
    border: none;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
}

.btn-rosa:hover, .btn-rosa:active {
    background-color: var(--cor-rosa-hover);
    color: white;
    transform: scale(1.02); /* Feedback visual de toque */
}

.card {
    background-color: rgba(255, 255, 255, 0.98);
    border-radius: 16px; /* Bordas mais arredondadas (estilo mobile app) */
}