:root {
  /* 🎯 Colores originales del logo */
  --sp-rojo: #c00019;
  --sp-rojo-soft: #ffb5ba;
  --sp-azul: #00255a;
  --sp-azul-soft: #bdd5f6;
  --sp-amarillo: #f7a800;
  --sp-amarillo-soft: #ffe5b2;
  --sp-blanco: #ffffff;
  --sp-fondo: #f7fafd;
  --sp-text: #0a1e2c;
  --sp-glass: rgba(255, 255, 255, 0.8);

  /* 🌸 Variantes pastel / tendencias suaves */
  --sp-rosa-pastel: #f7b6c2;
  --sp-rosa-pastel-soft: #fde4e8;
  --sp-azul-pastel: #a8c5f0;
  --sp-azul-pastel-soft: #e2edfa;
  --sp-menta: #b8e2dc;
  --sp-menta-soft: #e6f7f4;
  --sp-amarillo-pastel: #fce5b0;
  --sp-amarillo-pastel-soft: #fff6e0;
  --sp-lavanda: #d7c5f3;
  --sp-lavanda-soft: #f2edfb;

  /* 🌿 Tonos neutros y de soporte */
  --sp-gris-claro: #f2f4f7;
  --sp-gris-medio: #b0b8c1;
  --sp-gris-oscuro: #4a4a4a;
}

.bg-sp-rojo {
  background-color: var(--sp-rojo);
}
.bg-sp-azul {
  background-color: var(--sp-azul);
}
.text-sp-rojo {
  color: var(--sp-rojo);
}
.text-sp-azul {
  color: var(--sp-azul);
}

/* ===== HEADER SHRINK EFFECT ===== */
header.sticky.is-shrunk {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

header.sticky.is-shrunk .header-logo img {
  max-height: 40px !important;
}

header.sticky.is-shrunk ~ .branch-bar,
header.sticky.is-shrunk + .branch-bar {
  top: 60px !important;
}

@media (prefers-reduced-motion: reduce) {
  header.sticky {
    transition: none !important;
  }
  
  header.sticky.is-shrunk {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}