/* ---------- Botones ----------
   Esquinas apenas redondeadas, sobrias. Tres jerarquías:
   - .btn-primary: azul petróleo, la acción normal.
   - .btn-accent:  verde petróleo oscuro, la acción que más importa en la
                   pantalla (reservar, ver alojamientos) — una por sección.
   - .btn-outline / .btn-white: secundarias. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
/* El hover sube el botón y lo agranda apenas (1.03): suficiente para que se
   entienda que es clickeable, sin que salte. */
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--sombra-hover); }

.btn-primary { background: var(--petroleo); color: var(--blanco); }
.btn-primary:hover { background: var(--petroleo-oscuro); color: var(--blanco); }

.btn-accent { background: var(--petroleo-oscuro); color: var(--crema); }
.btn-accent:hover { background: var(--petroleo); color: var(--blanco); }

.btn-outline { background: transparent; color: var(--petroleo-oscuro); border-color: var(--petroleo-oscuro); }
.btn-outline:hover { background: var(--petroleo-oscuro); color: var(--crema); }

.btn-white { background: var(--crema); color: var(--petroleo-oscuro); }
.btn-white:hover { background: var(--blanco); color: var(--petroleo-oscuro); }

.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }