/* Identidad provisional v1. Fuente: branding/la-fondita/propuesta-v1/colores.json.
   Mantener estados de negocio separados de los colores de marca. */
:root {
  --brand-terracotta: #B84A32;
  --brand-green: #284B3A;
  --brand-cream: #FFF8ED;
  --brand-maize: #E5B14D;
  --brand-charcoal: #2D2926;
  --ink: var(--brand-charcoal);
  --green: var(--brand-green);
  --cream: var(--brand-cream);
  --orange: var(--brand-terracotta);
  --muted: #66635C;
  --line: #E6E2D8;
  --red: #A12835;
}
header { gap: 16px; }
.brand { min-width: 0; }
.brand-wordmark { display: block; width: 240px; max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--brand-green); }
.primary { background: var(--brand-terracotta); border-color: var(--brand-terracotta); color: #fff; }
.primary:hover { background: #9D3E29; border-color: #9D3E29; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline-color: var(--brand-green);
}
.brand-tagline { font-size: 15px; font-weight: 600; margin: 0 0 20px; }
.login .brand-tagline { color: var(--brand-green); }
.login { border-top: 4px solid var(--brand-maize); }
@media (max-width: 650px) {
  .brand-wordmark { width: 210px; }
  header > button { flex-shrink: 0; }
}