/* ===========================
   Paleta de colores
   =========================== */
   :root {
    --color-azul-oscuro: #243E97;
    --color-celeste: #2EAACD;
    --color-rojo-oscuro: #B80E1D;
    --color-rojo-claro: #E32E24;
  }
  
  /* ===========================
     Colores de fondo
     =========================== */
  .bg-azul {
    background-color: var(--color-azul-oscuro);
    color:#fff
  }
  
  .bg-rojo-oscuro {
    background-color: var(--color-rojo-oscuro);
    color: #fff;
  }
  
  /* ===========================
     Colores de texto
     =========================== */
  .text-azul {
    color: var(--color-azul-oscuro);
  }
  .text-azul:hover,
  .text-azul:active {
    color: var(--color-celeste);
  }
  
  .text-rojo {
    color: var(--color-rojo-oscuro);
  }
  .text-rojo:hover,
  .text-rojo:active {
    color: var(--color-rojo-claro);
  }
  
  /* ===========================
     Botones
     =========================== */
  .btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
  }
  
  .btn-azul {
    background-color: var(--color-azul-oscuro);
    color: #fff;
  }
  .btn-azul:hover,
  .btn-azul:active {
    background-color: var(--color-celeste);
    color: #ffff;
  }
  
  .btn-rojo {
    background-color: var(--color-rojo-oscuro);
    color: #fff;
  }
  .btn-rojo:hover,
  .btn-rojo:active {
    background-color: var(--color-rojo-claro);
    color: #fff;
  }