/* assets/css/style.css */

:root {
    --cempasuchil: #FFB800;
    --rosa-mexicano: #E4007C;
    --talavera: #0047AB;
    --hueso: #F9F9F9;
    --carbon: #1A1A1A;
}

body {
    font-family: 'Montserrat', sans-serif !important;
    background-color: var(--hueso);
    color: var(--carbon);
}

h1, h2, h3, .font-bangers {
    font-family: 'Bangers', cursive !important;
    letter-spacing: 0.05em;
}

.bg-cempasuchil { background-color: var(--cempasuchil); }
.bg-rosa-mexicano { background-color: var(--rosa-mexicano); }
.bg-talavera { background-color: var(--talavera); }
.bg-carbon { background-color: var(--carbon); }

.text-cempasuchil { color: var(--cempasuchil); }
.text-rosa-mexicano { color: var(--rosa-mexicano); }
.text-talavera { color: var(--talavera); }

.btn-primary {
    background-color: var(--cempasuchil);
    border: 3px solid var(--carbon);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-family: 'Bangers', cursive;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    box-shadow: 4px 4px 0px var(--carbon);
}

.btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--carbon);
}

/* Estilo Error de Tinta */
.ink-error {
    filter: contrast(120%) brightness(95%);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}