/* =========================================================
   Paleta Macondo + override Bootstrap
   ========================================================= */
:root {
  /* Paleta propia */
  --color-primary:       #AF5A3D;  /* marrón rojizo – botones / fondos */
  --color-primary-dark:  #9C4F36;  /* hover primary */
  --color-secondary:     #8a5436;  /* marrón Macondo – textos / botones */
  --color-accent:        #F8BA65;  /* amarillo cálido – acentos */

  /* Sobrescribo Bootstrap */
  --bs-primary:          var(--color-primary);
  --bs-primary-rgb:      175, 90, 61;

  --bs-secondary:        var(--color-secondary);
  --bs-secondary-rgb:    138, 84, 54;

  --bs-warning:          var(--color-accent);
  --bs-warning-rgb:      248, 186, 101;
}

/* =========================================================
   Utilidades de color (reemplazan a las de Bootstrap)
   ========================================================= */

/* Acento cálido para textos de énfasis */
.text-primary,
.text-warning,
.link-primary {
  color: var(--color-accent) !important;
}

/* Texto secondary en marrón Macondo */
.text-secondary {
  color: var(--color-secondary) !important;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.border-primary {
  border-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}

/* Warning como bloque de acento */
.bg-warning {
  background-color: var(--bs-warning) !important;
  color: var(--color-secondary);
}

.border-warning {
  border-color: var(--bs-warning) !important;
}

/* Links en marrón oscuro con hover más claro */
.link-primary:hover,
.link-primary:focus {
  color: #8a5436 !important; /* marrón algo más claro */
}

/* =========================================================
   Botones base
   ========================================================= */

.btn {
  font-family: 'Posey', 'Montserrat', system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
  border-radius: 999px;
  letter-spacing: 0.03em;
  padding-inline: 2.5rem;
}

/* Primary – marrón rojizo con texto/acento cálido */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-accent);
}

/* Secondary – marrón Macondo */
.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #6f412b; /* un toque más oscuro que #8a5436 */
  border-color: #6f412b;
  color: #fff;
}

/* Outline primary – borde/acento cálido */
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

/* Outline secondary – marrón Macondo */
.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* Warning – inverso de primary (fondo amarillo, texto marrón) */
.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: var(--color-secondary); /* marrón clarito */
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #f9c578; /* un poco más intenso que var(--bs-warning) */
  border-color: #f9c578;
  color: var(--color-secondary);
}


/* Variante chica para “leer más” del blog */
.btn-readmore {
  border-color: #fff;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.35rem 1rem;
}

.btn-readmore:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* =========================================================
   Overlays
   ========================================================= */

/* Overlay suave oscuro */
.bg-overlay {
  /* background: rgba(59, 36, 23, 0.3); */
  background: rgba(0, 0, 0, 0.05);
}