/* Variables de marca (ajustar al logo definitivo) */
:root {
    --color-primary: #009141;
    --color-primary-strong: #007A35;
    --brand-gray: #58595B;
    --color-primary-bright: #009141;
    --color-navy: #1F2D26;
    --color-dark: #1F2937;
    --color-accent: #E8F5C8;
    --color-health: #10B981;
    --color-sale: #E11D48;
    --color-warning: #F59E0B;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --border: #E5E7EB;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(31, 45, 38, .08), 0 4px 12px rgba(31, 45, 38, .06);
    --transition: 250ms ease;
    --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-dark);
    background: #fff;
    line-height: 1.5;
}

:focus-visible { outline: 3px solid rgba(0, 145, 65, .45); outline-offset: 2px; }

.placeholder {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}
.placeholder h1 { margin: 0; font-weight: 600; color: var(--color-navy); }
.placeholder .code { margin: 0; font-size: 64px; font-weight: 700; color: var(--color-primary-bright); }
.muted { color: var(--gray-500); }
.debug { max-width: 90vw; overflow: auto; background: var(--gray-50); padding: 12px; border-radius: var(--radius); text-align: left; }

.btn {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--color-navy);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: background var(--transition);
}
.btn:hover { background: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}