/* =========================================
   Paleta de colores Huaco Lodge
   ========================================= */

:root {
  /* Colores principales */
  --dorado: #D4AF37;
  --negro: #111111;
  --celeste: #5ECFF5;
  --gris-oscuro: #555555;
  --blanco: #FFFFFF;

  /* Tonos de apoyo (opcional) */
  --dorado-hover: #c49b2f;     /* más oscuro para efectos hover */
  --celeste-hover: #41bde8;    /* celeste más intenso para hover */
  --gris-claro: #f5f5f5;        /* fondos suaves */
}

/* =========================================
   Ejemplos de uso
   ========================================= */

/* Texto */
.texto-principal {
  color: var(--negro);
}

.texto-secundario {
  color: var(--gris-oscuro);
}

.titulo {
  color: var(--dorado);
  font-weight: bold;
}

/* Fondos */
.fondo-principal {
  background-color: var(--blanco);
}

.fondo-oscuro {
  background-color: var(--negro);
  color: var(--blanco);
}

/* Botones */
.boton-principal {
  background-color: var(--dorado);
  color: var(--negro);
  border: none;
  padding: 0.75em 1.5em;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.boton-principal:hover {
  background-color: var(--dorado-hover);
}

.boton-secundario {
  background-color: var(--celeste);
  color: var(--negro);
  border: none;
  padding: 0.75em 1.5em;
  border-radius: 4px;
  cursor: pointer;
}

.boton-secundario:hover {
  background-color: var(--celeste-hover);
}